:root,
html[data-theme="violet"] {
  --bg: #0b0a10;
  --bg-deep: #06050a;
  --bg-veil-top: rgba(6, 5, 12, 0.72);
  --bg-veil-mid: rgba(8, 6, 16, 0.82);
  --bg-veil-bottom: rgba(6, 5, 12, 0.9);
  --ink: #f4f2f8;
  --ink-soft: #d2cce0;
  --muted: #9b93ad;
  --panel: rgba(18, 16, 28, 0.78);
  --panel-solid: rgba(22, 19, 34, 0.92);
  --panel-border: rgba(255, 255, 255, 0.1);
  --accent: #b026ff;
  --accent-soft: #c77dff;
  --accent-deep: #9b1fe8;
  --accent-bright: #ae3af5;
  --accent-light: #d4a5ff;
  --accent-mid: #d14dff;
  --accent-pale: #e6a0ff;
  --accent-rgb: 176, 38, 255;
  --accent-soft-rgb: 199, 125, 255;
  --accent-mid-rgb: 209, 77, 255;
  --accent-pale-rgb: 224, 179, 255;
  --accent-dim: rgba(var(--accent-rgb), 0.18);
  --accent-text: #ffffff;
  /* Opposite of violet on the color wheel (yellow-green) for max-contrast CTAs */
  --cta-contrast: #a8ff1a;
  --cta-contrast-rgb: 168, 255, 26;
  --cta-contrast-text: #0b1204;
  --success: #5ddea0;
  --error: #ff7b8a;
  --info: #8ec8ff;
  --shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
  --glow: 0 0 14px rgba(var(--accent-rgb), 0.45), 0 0 28px rgba(var(--accent-rgb), 0.2);
  --glow-soft: 0 0 10px rgba(var(--accent-rgb), 0.28);
  --radius: 18px;
  --font-display: "Bebas Neue", sans-serif;
  --font-body: "DM Sans", sans-serif;
  /* Layout tokens — rem-scaled with html font-size on tablet/phone */
  --space-page-x: 1.25rem;
  --touch-min: 2.75rem;
  --type-body: clamp(0.92rem, 0.86rem + 0.22vw, 1rem);
  --type-small: clamp(0.82rem, 0.76rem + 0.18vw, 0.88rem);
  --type-caption: clamp(0.72rem, 0.68rem + 0.14vw, 0.78rem);
}

html[data-theme="blue"] {
  --bg: #070a14;
  --bg-deep: #040712;
  --bg-veil-top: rgba(4, 8, 20, 0.74);
  --bg-veil-mid: rgba(6, 12, 28, 0.84);
  --bg-veil-bottom: rgba(3, 6, 16, 0.92);
  --ink: #eef2ff;
  --ink-soft: #c5d0ef;
  --muted: #8e9bb8;
  --panel: rgba(10, 16, 34, 0.8);
  --panel-solid: rgba(12, 18, 38, 0.94);
  --accent: #1a4cff;
  --accent-soft: #5c7fff;
  --accent-deep: #0d2fd4;
  --accent-bright: #2f5fff;
  --accent-light: #8aa4ff;
  --accent-mid: #3d6bff;
  --accent-pale: #a8bbff;
  --accent-rgb: 26, 76, 255;
  --accent-soft-rgb: 92, 127, 255;
  --accent-mid-rgb: 61, 107, 255;
  --accent-pale-rgb: 168, 187, 255;
  --accent-dim: rgba(var(--accent-rgb), 0.2);
  --accent-text: #ffffff;
  /* Opposite of blue (amber / orange) */
  --cta-contrast: #ffb01a;
  --cta-contrast-rgb: 255, 176, 26;
  --cta-contrast-text: #1a0e02;
  --glow: 0 0 14px rgba(var(--accent-rgb), 0.5), 0 0 28px rgba(var(--accent-rgb), 0.24);
  --glow-soft: 0 0 10px rgba(var(--accent-rgb), 0.32);
}

html[data-theme="red"] {
  --bg: #12080a;
  --bg-deep: #0a0406;
  --bg-veil-top: rgba(18, 5, 8, 0.74);
  --bg-veil-mid: rgba(28, 8, 12, 0.84);
  --bg-veil-bottom: rgba(12, 4, 6, 0.92);
  --ink: #fff1f3;
  --ink-soft: #efc5cc;
  --muted: #b89298;
  --panel: rgba(34, 12, 16, 0.8);
  --panel-solid: rgba(38, 14, 18, 0.94);
  --accent: #ff2a4a;
  --accent-soft: #ff7a8e;
  --accent-deep: #e01236;
  --accent-bright: #ff4d68;
  --accent-light: #ff9eac;
  --accent-mid: #ff3d5c;
  --accent-pale: #ffb3be;
  --accent-rgb: 255, 42, 74;
  --accent-soft-rgb: 255, 122, 142;
  --accent-mid-rgb: 255, 61, 92;
  --accent-pale-rgb: 255, 179, 190;
  --accent-dim: rgba(var(--accent-rgb), 0.18);
  --accent-text: #ffffff;
  /* Opposite of red (cyan / teal) */
  --cta-contrast: #1affd6;
  --cta-contrast-rgb: 26, 255, 214;
  --cta-contrast-text: #041210;
  --glow: 0 0 14px rgba(var(--accent-rgb), 0.48), 0 0 28px rgba(var(--accent-rgb), 0.22);
  --glow-soft: 0 0 10px rgba(var(--accent-rgb), 0.3);
}

html[data-theme="green"] {
  --bg: #070f08;
  --bg-deep: #040a05;
  --bg-veil-top: rgba(4, 14, 6, 0.74);
  --bg-veil-mid: rgba(6, 20, 10, 0.84);
  --bg-veil-bottom: rgba(3, 10, 5, 0.92);
  --ink: #effff0;
  --ink-soft: #c5e8c8;
  --muted: #8eae90;
  --panel: rgba(10, 28, 14, 0.8);
  --panel-solid: rgba(12, 32, 16, 0.94);
  --accent: #39ff14;
  --accent-soft: #8fff6e;
  --accent-deep: #1fd100;
  --accent-bright: #57ff38;
  --accent-light: #b4ff9a;
  --accent-mid: #4dff2e;
  --accent-pale: #c8ffb5;
  --accent-rgb: 57, 255, 20;
  --accent-soft-rgb: 143, 255, 110;
  --accent-mid-rgb: 77, 255, 46;
  --accent-pale-rgb: 200, 255, 181;
  --accent-dim: rgba(var(--accent-rgb), 0.16);
  /* Neon green needs dark type on filled controls for contrast */
  --accent-text: #061208;
  /* Opposite of green (magenta / violet) */
  --cta-contrast: #d11aff;
  --cta-contrast-rgb: 209, 26, 255;
  --cta-contrast-text: #ffffff;
  --glow: 0 0 14px rgba(var(--accent-rgb), 0.42), 0 0 28px rgba(var(--accent-rgb), 0.2);
  --glow-soft: 0 0 10px rgba(var(--accent-rgb), 0.28);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
  max-width: 100%;
  overflow-x: clip;
}

/*
 * Fluid root: scales continuously in both directions (no breakpoint steps).
 * px bounds keep small sizes on whole pixels for sharper text.
 */
html {
  font-size: clamp(12px, 10px + 0.55vw, 18px);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  font-family: var(--font-body);
  font-size: var(--type-body);
  color: var(--ink);
  background: var(--bg-deep);
  line-height: 1.5;
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Scrollbars ausblenden – Scrollen bleibt aktiv, volle Breite nutzbar */
* {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

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

img,
video,
iframe {
  max-width: 100%;
}

.leaflet-container img,
.leaflet-tile,
.leaflet-marker-icon,
.leaflet-marker-shadow {
  max-width: none;
}

a {
  color: inherit;
}

.auth-page,
.home-page,
.partys-page,
.party-detail-page,
.party-form-page,
.settings-page,
.chats-page,
.shorts-page,
.profile-photo-page,
.chat-detail-page,
.error-page {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
}

.auth-backdrop,
.home-backdrop {
  position: fixed;
  inset: 0;
  z-index: 0;
  background:
    linear-gradient(180deg, var(--bg-veil-top) 0%, var(--bg-veil-mid) 45%, var(--bg-veil-bottom) 100%),
    radial-gradient(ellipse 80% 50% at 50% 0%, rgba(var(--accent-rgb), 0.28), transparent 60%),
    radial-gradient(circle at 85% 75%, rgba(var(--accent-rgb), 0.16), transparent 35%),
    url("/images/disco-hall.jpg") center / cover no-repeat;
  background-color: var(--bg-deep);
}

.auth-backdrop {
  background:
    linear-gradient(180deg, var(--bg-veil-top) 0%, var(--bg-veil-mid) 50%, var(--bg-veil-bottom) 100%),
    radial-gradient(ellipse 70% 45% at 20% 10%, rgba(var(--accent-rgb), 0.3), transparent 55%),
    url("/images/club-floor.jpg") center / cover no-repeat;
  background-color: var(--bg-deep);
}

.auth-backdrop::after,
.home-backdrop::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.45;
  background-image:
    linear-gradient(rgba(var(--accent-rgb), 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--accent-rgb), 0.07) 1px, transparent 1px);
  background-size: 32px 32px;
  mask-image: radial-gradient(circle at center, black 15%, transparent 78%);
  animation: grid-drift 22s linear infinite;
}

.home-backdrop::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 90% 60% at 50% 20%, rgba(var(--accent-rgb), 0.22), transparent 65%),
    linear-gradient(90deg, transparent 0%, rgba(var(--accent-rgb), 0.08) 50%, transparent 100%),
    url("/images/party-lights.jpg") center bottom / cover no-repeat;
  opacity: 0.28;
  mix-blend-mode: screen;
}

@keyframes grid-drift {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(-32px, -32px, 0);
  }
}

.auth-panel,
.home-hero,
.topbar {
  position: relative;
  z-index: 1;
}

.auth-page {
  display: grid;
  place-items: center;
  padding: 2rem 1.25rem;
}

.auth-panel {
  width: min(100%, 420px);
  padding: 2.25rem 1.75rem 2rem;
  border: 1px solid var(--panel-border);
  border-radius: var(--radius);
  background: var(--panel);
  backdrop-filter: blur(14px);
  box-shadow: var(--shadow);
  animation: rise 0.55s ease both;
}

@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.brand {
  text-align: center;
  margin-bottom: 1.75rem;
}

.brand__icon {
  display: block;
  margin: 0 auto 0.85rem;
  border-radius: 18px;
  animation: spark 2.8s ease-in-out infinite;
}

@keyframes spark {
  0%,
  100% {
    transform: scale(1) rotate(0deg);
    filter: brightness(1);
  }
  50% {
    transform: scale(1.04) rotate(-2deg);
    filter: brightness(1.08);
  }
}

.brand__name {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(3rem, 12vw, 4rem);
  letter-spacing: 0.04em;
  line-height: 0.9;
}

.brand__tagline {
  margin: 0.55rem 0 0;
  color: var(--muted);
  font-size: 0.98rem;
}

.auth-form {
  display: grid;
  gap: 1rem;
}

.field {
  display: grid;
  gap: 0.4rem;
}

.field__label {
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--ink-soft);
}

.field__input {
  width: 100%;
  padding: 0.85rem 0.95rem;
  border: 1px solid rgba(17, 17, 17, 0.18);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.9);
  color: var(--ink);
  font: inherit;
  font-size: 1rem;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.field__input:focus {
  border-color: var(--ink);
  box-shadow: 0 0 0 3px rgba(17, 17, 17, 0.12);
}

.field__input--invalid,
.field__input--invalid:focus {
  border-color: #d12b2b;
  color: #d12b2b;
  box-shadow: 0 0 0 3px rgba(209, 43, 43, 0.15);
}

.field__hint--error {
  color: #d12b2b;
}

.field__geo {
  margin: 0.35rem 0 0;
  color: #9a9a9a;
  font-size: 0.78rem;
  font-weight: 300;
  letter-spacing: 0.01em;
  font-variant-numeric: tabular-nums;
}

.field--location {
  gap: 0.55rem;
}

.party-location-map {
  width: 100%;
  aspect-ratio: 1 / 1;
  border: 1px solid var(--panel-border, rgba(17, 17, 17, 0.18));
  border-radius: 12px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.04);
  z-index: 1;
  cursor: crosshair;
}

.party-location-map.leaflet-container {
  font: inherit;
}

.party-location-map .leaflet-control-attribution {
  display: none !important;
}

.party-location-map--invalid {
  border-color: rgba(255, 123, 138, 0.7);
  box-shadow: 0 0 0 3px rgba(255, 123, 138, 0.15);
}

.party-location-pin {
  background: transparent;
  border: 0;
}

.party-user-location {
  background: transparent;
  border: 0;
  overflow: visible;
}

.party-user-location__dot {
  display: block;
  width: 10px;
  height: 10px;
  margin: 4px;
  border-radius: 50%;
  background: #ea4335;
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.28), 0 1px 4px rgba(0, 0, 0, 0.25);
  cursor: pointer;
}

.party-user-location__tip {
  position: absolute;
  left: 50%;
  top: calc(100% + 2px);
  transform: translateX(-50%);
  padding: 0.2rem 0.45rem;
  border-radius: 6px;
  background: rgba(18, 16, 28, 0.92);
  color: #f4f2f8;
  font-size: 0.72rem;
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.12s ease;
}

.party-user-location__tip.is-in {
  opacity: 1;
  transition: opacity 0.12s ease;
}

.party-user-location__tip.is-out {
  opacity: 0;
  transition: opacity 0.22s ease;
}

.party-location-search {
  position: relative;
}

.field--suggest {
  position: relative;
}

.address-suggest {
  position: absolute;
  top: calc(100% + 0.2rem);
  left: 0;
  right: 0;
  z-index: 20;
  margin: 0;
  padding: 0.35rem 0;
  list-style: none;
  border: 1px solid rgba(17, 17, 17, 0.16);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.12);
  max-height: 14rem;
  overflow: auto;
}

.address-suggest__item {
  padding: 0.65rem 0.9rem;
  cursor: pointer;
  font-size: 0.92rem;
  line-height: 1.35;
  color: var(--ink);
}

.address-suggest__item:hover,
.address-suggest__item:focus {
  background: rgba(17, 17, 17, 0.06);
}

.party-form__footer .bottom-nav__split-side:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  min-height: 2.75rem;
  padding: 0.7rem 1.2rem;
  border: 1px solid transparent;
  border-radius: 999px;
  font: inherit;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.15s ease, background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.btn:active {
  transform: scale(0.98);
}

.btn--primary {
  background: linear-gradient(135deg, var(--accent-deep) 0%, var(--accent-soft) 100%);
  color: var(--accent-text);
  border-color: rgba(var(--accent-soft-rgb), 0.55);
  box-shadow: var(--glow);
}

.btn--primary:hover {
  background: linear-gradient(135deg, var(--accent-bright) 0%, var(--accent-light) 100%);
  box-shadow: 0 0 18px rgba(var(--accent-rgb), 0.55), 0 0 36px rgba(var(--accent-rgb), 0.28);
}

.btn--ghost {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.18);
  color: var(--ink);
  box-shadow: var(--glow-soft);
}

.btn--ghost:hover {
  background: var(--accent-dim);
  border-color: rgba(var(--accent-soft-rgb), 0.45);
}

.btn--block {
  width: 100%;
}

.btn--small {
  min-height: 2.25rem;
  padding: 0.45rem 0.9rem;
  font-size: 0.9rem;
}

.auth-actions {
  display: grid;
  gap: 0.75rem;
}

.auth-hint {
  margin: 1.25rem 0 0;
  text-align: center;
  color: var(--muted);
  font-size: 0.88rem;
}

.signup-prompt p {
  margin: 0 0 1.25rem;
  color: var(--ink-soft);
}

.flash {
  margin-bottom: 1.1rem;
  padding: 0.8rem 0.95rem;
  border-radius: 12px;
  font-size: 0.92rem;
  animation: rise 0.35s ease both;
}

.flash--error {
  background: rgba(155, 28, 28, 0.1);
  color: var(--error);
}

.flash--success {
  background: rgba(31, 107, 58, 0.12);
  color: var(--success);
}

.flash--info {
  background: rgba(28, 79, 122, 0.1);
  color: var(--info);
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-width: 0;
  max-width: 100%;
  padding: 1.1rem max(1.25rem, env(safe-area-inset-left), env(safe-area-inset-right));
}

.topbar__brand {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  min-width: 0;
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 4.5vw, 1.7rem);
  letter-spacing: 0.04em;
  color: inherit;
  text-decoration: none;
}

.topbar__brand-link {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  color: inherit;
  text-decoration: none;
}

.topbar__brand-name {
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  background: transparent;
  color: inherit;
  font: inherit;
  font-family: var(--font-display);
  letter-spacing: inherit;
  text-decoration: none;
  cursor: pointer;
  transition: text-shadow 0.25s ease, color 0.2s ease, filter 0.2s ease;
}

.topbar__brand-name:hover,
.topbar__brand-name:focus-visible {
  color: var(--accent-light);
  filter: brightness(1.08);
  text-shadow:
    0 0 12px rgba(var(--accent-rgb), 0.75),
    0 0 28px rgba(var(--accent-rgb), 0.4),
    0 1px 12px rgba(6, 5, 12, 0.9);
}

.topbar__brand-name:active {
  color: var(--accent-light);
  filter: brightness(1.12);
  text-shadow:
    0 0 16px rgba(var(--accent-rgb), 0.9),
    0 0 32px rgba(var(--accent-rgb), 0.55),
    0 1px 12px rgba(6, 5, 12, 0.9);
}

.topbar__brand-name:focus-visible {
  outline: 2px solid var(--accent-soft);
  outline-offset: 3px;
  border-radius: 6px;
}

.topbar__disco {
  display: inline-flex;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  border-radius: 10px;
  line-height: 0;
}

.topbar__disco:hover {
  filter: brightness(1.08);
}

.topbar__disco:focus-visible {
  outline: 2px solid var(--accent-soft);
  outline-offset: 3px;
}

.topbar__brand img,
.topbar__disco img {
  border-radius: 10px;
  display: block;
}

.topbar__actions {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  gap: 0.35rem;
}

.topbar__live-dot,
.live-broadcast-dot {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.35rem;
  height: 2.35rem;
  flex-shrink: 0;
  border-radius: 10px;
  text-decoration: none;
}

.topbar__live-dot:hover,
.topbar__live-dot:focus-visible,
.live-broadcast-dot:hover,
.live-broadcast-dot:focus-visible {
  background: rgba(255, 45, 45, 0.1);
}

.topbar__live-dot-core,
.live-broadcast-dot__core {
  width: 0.72rem;
  height: 0.72rem;
  border-radius: 50%;
  background: #e11d2e;
  box-shadow:
    0 0 0 2px rgba(225, 29, 46, 0.28),
    0 0 10px rgba(225, 29, 46, 0.85),
    0 0 18px rgba(255, 40, 40, 0.55);
  animation: topbar-live-dot-pulse 1.5s ease-in-out infinite;
}

@keyframes topbar-live-dot-pulse {
  0%,
  100% {
    transform: scale(1);
    box-shadow:
      0 0 0 2px rgba(225, 29, 46, 0.25),
      0 0 8px rgba(225, 29, 46, 0.75),
      0 0 14px rgba(255, 40, 40, 0.45);
  }
  50% {
    transform: scale(1.12);
    box-shadow:
      0 0 0 3px rgba(225, 29, 46, 0.35),
      0 0 14px rgba(225, 29, 46, 1),
      0 0 24px rgba(255, 40, 40, 0.7);
  }
}

.live-cameras__connect.is-live-stop.is-required-error {
  border-radius: 8px;
  outline: none;
  box-shadow:
    0 0 0 2px rgba(255, 59, 85, 0.95),
    0 0 0 5px rgba(255, 59, 85, 0.22),
    0 0 18px rgba(255, 59, 85, 0.35) !important;
}

.topbar__search,
.topbar__settings {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.35rem;
  height: 2.35rem;
  border: 0;
  border-radius: 10px;
  color: #111111;
  background: transparent;
  text-decoration: none;
  cursor: pointer;
  padding: 0;
}

.topbar__settings {
  margin-right: -0.25rem;
}

.topbar__search:hover,
.topbar__settings:hover {
  background: rgba(17, 17, 17, 0.06);
}

.topbar__search svg,
.topbar__settings svg {
  width: 1.35rem;
  height: 1.35rem;
}

.topbar__search[aria-expanded='true'] {
  background: rgba(17, 17, 17, 0.1);
}

.home-page {
  position: relative;
  display: flex;
  flex-direction: column;
  /* Vertical scroll native; horizontal swipes handled by setupHomeGestures */
  touch-action: pan-y;
  -webkit-touch-callout: none;
}

.home-page .party-card,
.home-page .party-card__hit {
  touch-action: pan-y;
  -webkit-user-drag: none;
  user-select: none;
}

.home-hero {
  display: grid;
  align-content: start;
  justify-items: center;
  text-align: center;
  padding: 4vh 1.5rem 0.5rem;
  animation: rise 0.55s ease both;
}

.home-page:not([data-guest]) .home-hero {
  padding-top: 0;
}

.home-hero__top {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  /* Vertikal mittig zwischen Topbar (Seitenanfang-Bereich) und „Angemeldet als“ */
  min-height: clamp(4.25rem, 11vh, 7.25rem);
}

.home-kicker {
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--muted);
}

.home-mood {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 42rem;
  margin: 0.15rem 0 0.55rem;
  gap: 0;
}

.home-mood__surprise {
  display: flex;
  justify-content: center;
  align-items: center;
  width: auto;
  margin: 0;
}

.home-mood__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  width: 100%;
  column-gap: 0.35rem;
}

.home-mood__side {
  display: flex;
  align-items: center;
  min-width: 0;
}

.home-mood__side--left {
  justify-content: center;
}

.home-mood__side--right {
  justify-content: center;
}

.home-mood .home-title {
  margin: 0;
  justify-self: center;
  max-width: min(58vw, 16rem);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.home-title__qr-btn {
  display: block;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 0;
  border: 0;
  background: transparent;
  font: inherit;
  letter-spacing: inherit;
  line-height: inherit;
  color: inherit;
  text-align: center;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}

.home-title__qr-btn:hover,
.home-title__qr-btn:focus-visible {
  color: var(--accent-soft);
}

.home-title__qr-btn:focus-visible {
  outline: 2px solid rgba(var(--accent-rgb), 0.65);
  outline-offset: 4px;
  border-radius: 0.2em;
}

.home-mood__btn {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: clamp(2.5rem, 8vw, 3.15rem);
  height: clamp(2.5rem, 8vw, 3.15rem);
  padding: 0;
  border-radius: 50%;
  border: 1.5px solid rgba(80, 255, 230, 0.55);
  background:
    radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.14), transparent 55%),
    rgba(8, 12, 22, 0.55);
  color: #7dfff0;
  cursor: pointer;
  box-shadow:
    0 0 0 1px rgba(120, 255, 240, 0.18),
    0 0 12px rgba(0, 255, 220, 0.45),
    0 0 28px rgba(255, 40, 180, 0.28),
    inset 0 0 10px rgba(0, 255, 220, 0.12);
  transition: color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease,
    background 0.2s ease;
}

.home-mood__btn--social {
  border-color: rgba(255, 90, 220, 0.55);
  color: #ff7af0;
  box-shadow:
    0 0 0 1px rgba(255, 120, 240, 0.2),
    0 0 12px rgba(255, 60, 200, 0.5),
    0 0 28px rgba(80, 255, 230, 0.25),
    inset 0 0 10px rgba(255, 80, 220, 0.12);
}

.home-mood__btn--surprise {
  border-color: rgba(180, 120, 255, 0.6);
  color: #c9a6ff;
  box-shadow:
    0 0 0 1px rgba(190, 140, 255, 0.22),
    0 0 12px rgba(160, 80, 255, 0.5),
    0 0 28px rgba(0, 255, 220, 0.22),
    inset 0 0 10px rgba(170, 100, 255, 0.14);
}

.home-mood__btn:hover {
  transform: translateY(-1px);
}

.home-mood__btn:active {
  transform: scale(0.96);
}

.home-mood__btn.is-active {
  border-color: rgba(255, 60, 80, 0.95);
  color: #ff4d5e;
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 40, 60, 0.18), transparent 60%),
    rgba(12, 4, 8, 0.72);
  box-shadow:
    0 0 0 2px rgba(255, 40, 70, 0.55),
    0 0 14px rgba(255, 30, 60, 0.85),
    0 0 32px rgba(255, 0, 50, 0.55),
    inset 0 0 12px rgba(255, 40, 70, 0.25);
}

.home-mood__icon {
  display: grid;
  place-items: center;
  width: 1.55rem;
  height: 1.55rem;
}

.home-mood__icon svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}

.home-mood__icon--now,
.home-mood__icon--social,
.home-mood__icon--surprise {
  filter: drop-shadow(0 0 4px currentColor) drop-shadow(0 0 10px currentColor);
}

.home-mood__icon--off {
  display: none;
  width: 1.25rem;
  height: 1.25rem;
  filter: drop-shadow(0 0 5px rgba(255, 40, 70, 0.95)) drop-shadow(0 0 12px rgba(255, 0, 40, 0.75));
}

.home-mood__btn.is-active .home-mood__icon--now,
.home-mood__btn.is-active .home-mood__icon--social,
.home-mood__btn.is-active .home-mood__icon--surprise {
  display: none;
}

.home-mood__btn.is-active .home-mood__icon--off {
  display: grid;
}

.home-title {
  margin: 0.4rem 0 0.75rem;
  font-family: var(--font-display);
  font-size: clamp(3.4rem, 14vw, 6rem);
  letter-spacing: 0.03em;
  line-height: 0.9;
  color: var(--ink);
}

.home-pro-btn {
  width: min(100%, 14rem);
  min-height: 2.5rem;
  margin: 0 0 0.85rem;
  padding-inline: 1.5rem;
  font-size: 0.95rem;
  font-weight: 650;
  letter-spacing: 0.01em;
}

.home-pro-crown {
  display: inline-grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  margin: 0 0 0.85rem;
  border-radius: 50%;
  border: 2px solid #0a0a0c;
  background: #050508;
  color: var(--accent-mid);
  text-decoration: none;
  box-shadow:
    0 0 0 1px rgba(var(--accent-mid-rgb), 0.35),
    0 0 12px rgba(var(--accent-rgb), 0.55),
    0 0 28px rgba(var(--accent-rgb), 0.35),
    inset 0 0 10px rgba(var(--accent-rgb), 0.12);
  transition: transform 0.15s ease, box-shadow 0.2s ease, color 0.2s ease;
}

.home-pro-crown:hover {
  color: var(--accent-pale);
  box-shadow:
    0 0 0 1px rgba(230, 160, 255, 0.5),
    0 0 16px rgba(var(--accent-rgb), 0.75),
    0 0 36px rgba(var(--accent-rgb), 0.45),
    inset 0 0 12px rgba(var(--accent-rgb), 0.18);
}

.home-pro-crown:active {
  transform: scale(0.96);
}

.home-pro-crown__icon {
  width: 1.35rem;
  height: 1.35rem;
  filter: drop-shadow(0 0 4px rgba(var(--accent-mid-rgb), 0.95)) drop-shadow(0 0 10px rgba(var(--accent-rgb), 0.7));
}

.home-title--guest {
  font-size: clamp(2rem, 10vw, 4.2rem);
}

.home-auth-cta {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  color: inherit;
  text-decoration: none;
}

.home-auth-cta:hover .home-title--guest {
  color: var(--accent-soft);
}

.home-copy {
  margin: 0;
  max-width: 28rem;
  color: var(--ink-soft);
}

.home-copy__install {
  display: inline;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.16em;
  cursor: pointer;
}

.home-copy__install:hover {
  color: #000;
}

.install-guide {
  position: fixed;
  inset: 0;
  z-index: 96;
  display: grid;
  align-items: end;
  background:
    radial-gradient(ellipse 80% 50% at 50% 100%, rgba(var(--accent-rgb), 0.28), transparent 70%),
    rgba(0, 0, 0, 0.62);
}

.install-guide[hidden] {
  display: none !important;
}

.install-guide__sheet {
  position: relative;
  max-height: min(85vh, 34rem);
  overflow: auto;
  border-radius: 18px 18px 0 0;
  border: 1px solid rgba(var(--accent-rgb), 0.45);
  border-bottom: none;
  background:
    linear-gradient(180deg, rgba(var(--accent-rgb), 0.16) 0%, transparent 42%),
    rgba(18, 16, 28, 0.97);
  box-shadow:
    0 -12px 40px rgba(0, 0, 0, 0.45),
    0 0 36px rgba(var(--accent-rgb), 0.35),
    0 0 72px rgba(var(--accent-rgb), 0.18),
    inset 0 1px 0 rgba(var(--accent-pale-rgb), 0.35);
  padding: 0 0 calc(1rem + env(safe-area-inset-bottom));
  animation: install-guide-glow 2.6s ease-in-out infinite;
}

.install-guide__sheet::before {
  content: "";
  position: absolute;
  top: 0;
  left: 12%;
  right: 12%;
  height: 3px;
  border-radius: 0 0 6px 6px;
  background: linear-gradient(
    90deg,
    transparent,
    var(--accent-soft),
    var(--accent),
    var(--accent-soft),
    transparent
  );
  box-shadow:
    0 0 12px rgba(var(--accent-rgb), 0.9),
    0 0 28px rgba(var(--accent-rgb), 0.55);
  pointer-events: none;
}

@keyframes install-guide-glow {
  0%,
  100% {
    box-shadow:
      0 -12px 40px rgba(0, 0, 0, 0.45),
      0 0 28px rgba(var(--accent-rgb), 0.28),
      0 0 56px rgba(var(--accent-rgb), 0.14),
      inset 0 1px 0 rgba(var(--accent-pale-rgb), 0.28);
  }
  50% {
    box-shadow:
      0 -12px 40px rgba(0, 0, 0, 0.45),
      0 0 48px rgba(var(--accent-rgb), 0.5),
      0 0 90px rgba(var(--accent-rgb), 0.28),
      inset 0 1px 0 rgba(var(--accent-pale-rgb), 0.45);
  }
}

.install-guide__toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.95rem 1rem 0.85rem;
  border-bottom: 1px solid rgba(var(--accent-rgb), 0.22);
  position: sticky;
  top: 0;
  background: rgba(18, 16, 28, 0.98);
  z-index: 1;
}

.install-guide__title {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: var(--accent-soft);
  text-shadow:
    0 0 14px rgba(var(--accent-rgb), 0.65),
    0 0 32px rgba(var(--accent-rgb), 0.35);
}

.install-guide__close {
  width: 2rem;
  height: 2rem;
  border: 1px solid rgba(var(--accent-rgb), 0.35);
  border-radius: 50%;
  background: rgba(var(--accent-rgb), 0.12);
  color: var(--accent-soft);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: var(--glow-soft);
  transition: background 0.15s ease, box-shadow 0.15s ease, color 0.15s ease;
}

.install-guide__close:hover {
  background: rgba(var(--accent-rgb), 0.28);
  color: var(--ink);
  box-shadow: var(--glow);
}

.install-guide__device {
  margin: 0.9rem 1rem 0;
  color: var(--accent-light);
  font-size: 0.88rem;
  font-weight: 700;
  text-shadow: 0 0 12px rgba(var(--accent-rgb), 0.4);
}

.install-guide__steps {
  margin: 0.75rem 1rem 0;
  padding: 0 0 0 1.35rem;
  display: grid;
  gap: 0.85rem;
  color: var(--ink);
  font-size: 0.95rem;
  line-height: 1.45;
}

.install-guide__steps li {
  padding: 0.55rem 0.7rem 0.55rem 0.35rem;
  border-radius: 12px;
  background: rgba(var(--accent-rgb), 0.08);
  border: 1px solid rgba(var(--accent-rgb), 0.16);
  box-shadow: inset 0 0 18px rgba(var(--accent-rgb), 0.06);
}

.install-guide__steps li::marker {
  color: var(--accent);
  font-weight: 800;
  text-shadow: 0 0 10px rgba(var(--accent-rgb), 0.7);
}

@media (prefers-reduced-motion: reduce) {
  .install-guide__sheet {
    animation: none;
  }
}

.delete-account {
  position: fixed;
  inset: 0;
  z-index: 97;
  display: grid;
  place-items: center;
  padding: 1.25rem;
  background: rgba(0, 0, 0, 0.62);
}

.delete-account[hidden] {
  display: none !important;
}

.delete-account__sheet {
  position: relative;
  width: min(100%, 26rem);
  max-height: min(92vh, 40rem);
  overflow-y: auto;
  padding: 1.75rem 1.4rem 1.5rem;
  border: 1px solid var(--panel-border);
  border-radius: var(--radius);
  background: rgba(18, 16, 28, 0.96);
  box-shadow: var(--shadow), 0 0 30px rgba(var(--accent-rgb), 0.15);
  animation: rise 0.35s ease both;
}

.delete-account__close {
  position: absolute;
  top: 0.55rem;
  right: 0.55rem;
  width: 2rem;
  height: 2rem;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--muted);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
}

.delete-account__close:hover {
  color: var(--ink);
}

.wish-overlay {
  position: fixed;
  inset: 0;
  z-index: 97;
  display: grid;
  place-items: center;
  padding: 1.25rem;
  background: rgba(0, 0, 0, 0.62);
}

.wish-overlay[hidden] {
  display: none !important;
}

.profile-qr-overlay {
  position: fixed;
  inset: 0;
  z-index: 97;
  display: grid;
  place-items: center;
  padding: 1.25rem;
  background: rgba(0, 0, 0, 0.62);
}

.profile-qr-overlay[hidden] {
  display: none !important;
}

.profile-qr-overlay__sheet {
  position: relative;
  width: min(100%, 18rem);
  padding: 2rem 1.35rem 1.45rem;
  border: 1px solid var(--panel-border);
  border-radius: var(--radius);
  background: rgba(18, 16, 28, 0.96);
  box-shadow: var(--shadow), 0 0 30px rgba(var(--accent-rgb), 0.15);
  animation: rise 0.35s ease both;
}

.profile-qr-overlay__close {
  position: absolute;
  top: 0.55rem;
  right: 0.55rem;
  width: 2rem;
  height: 2rem;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--muted);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
}

.profile-qr-overlay__close:hover {
  color: var(--ink);
}

.profile-qr-overlay__content.settings-qr {
  margin: 0 auto;
}

.wish-overlay__sheet {
  width: min(100%, 26rem);
  padding: 1.5rem 1.35rem 1.25rem;
  border: 1px solid var(--panel-border);
  border-radius: var(--radius);
  background: rgba(18, 16, 28, 0.96);
  box-shadow: var(--shadow), 0 0 30px rgba(var(--accent-rgb), 0.15);
  animation: rise 0.35s ease both;
}

.wish-overlay__title {
  margin: 0;
  color: var(--ink);
  font-size: 1.2rem;
  font-weight: 700;
  text-align: center;
}

.wish-overlay__copy {
  margin: 0.85rem 0 0;
  color: var(--ink-soft);
  font-size: 0.95rem;
  font-weight: 500;
  line-height: 1.5;
  text-align: center;
}

.wish-overlay__input {
  display: block;
  width: 100%;
  min-height: 4.6rem;
  margin-top: 1rem;
  resize: none;
  line-height: 1.45;
}

.wish-overlay__error {
  margin: 0.55rem 0 0;
  color: #ff7b8a;
  font-size: 0.88rem;
  line-height: 1.4;
  text-align: center;
}

.wish-overlay__error[hidden] {
  display: none !important;
}

.wish-overlay__actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
  margin-top: 1.15rem;
}

.wish-overlay__actions .btn {
  min-width: 7.5rem;
}

.delete-account__warning {
  margin: 0;
  padding-right: 1.25rem;
  color: var(--ink-soft);
  font-size: 0.98rem;
  line-height: 1.55;
  text-align: center;
}

.delete-account__spacer {
  height: 1.15rem;
}

.delete-account__secret-intro {
  margin: 0;
  padding-right: 1.25rem;
  color: var(--ink);
  font-size: 1.08rem;
  font-weight: 700;
  line-height: 1.55;
  text-align: center;
}

.delete-account__secret-confirm {
  margin-top: 1.15rem;
  padding: 0.85rem 0.8rem 0.95rem;
  border: 1.5px solid transparent;
  border-radius: 14px;
  outline: none;
}

.delete-account__secret-accent {
  margin: 0;
  color: #e24a62;
  font-size: 0.98rem;
  font-weight: 600;
  line-height: 1.55;
  text-align: center;
}

.delete-account__secret-toggle {
  margin-top: 1rem;
  padding-right: 0.35rem;
}

.delete-account__actions {
  display: flex;
  justify-content: center;
  margin-top: 1.35rem;
}

.btn--danger {
  background: linear-gradient(135deg, #d63a52 0%, #ff7b8a 100%);
  color: #fff;
  border-color: rgba(255, 123, 138, 0.55);
  box-shadow: 0 0 14px rgba(255, 123, 138, 0.35), 0 0 28px rgba(214, 58, 82, 0.18);
}

.btn--danger:hover {
  background: linear-gradient(135deg, #e24a62 0%, #ff92a0 100%);
  box-shadow: 0 0 18px rgba(255, 123, 138, 0.45), 0 0 36px rgba(214, 58, 82, 0.25);
}

.home-hint {
  margin: 0.85rem 0 0;
  max-width: 28rem;
  color: #111111;
  font-size: 1rem;
  line-height: 1.45;
}

.home-hint__mark {
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  cursor: pointer;
}

.home-hint__mark.is-alert {
  color: var(--error, #b42323);
}

.home-date-panel {
  display: grid;
  justify-items: center;
  width: 100%;
  margin-top: 0.85rem;
}

.home-calendar {
  width: min(100%, 18.5rem);
  padding: 0.85rem 0.9rem 1rem;
  border: 1px solid rgba(17, 17, 17, 0.14);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.1);
}

.home-calendar.is-overlay {
  position: fixed;
  z-index: 10080;
  width: min(18.5rem, calc(100vw - 2rem));
  margin: 0;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.28);
}

.home-calendar[hidden] {
  display: none !important;
}

.home-calendar__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

.home-calendar__month {
  margin: 0;
  font-weight: 700;
  color: var(--ink);
  text-transform: capitalize;
}

.home-calendar__nav {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

.home-calendar__nav-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 1px solid rgba(17, 17, 17, 0.14);
  border-radius: 10px;
  background: #f5f5f5;
  color: var(--ink);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
}

.home-calendar__nav-btn:hover:not(:disabled) {
  background: #ececec;
}

.home-calendar__nav-btn:disabled {
  opacity: 0.35;
  cursor: default;
}

.home-calendar__weekdays,
.home-calendar__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0.2rem;
}

.home-calendar__weekdays {
  margin-bottom: 0.35rem;
}

.home-calendar__weekdays span {
  text-align: center;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--muted);
}

.home-calendar__day {
  aspect-ratio: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 0.92rem;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}

.home-calendar__day:hover:not(:disabled) {
  background: rgba(17, 17, 17, 0.08);
}

.home-calendar__day.is-muted {
  visibility: hidden;
  pointer-events: none;
}

.home-calendar__day.is-selected {
  background: #111111;
  color: #fff;
  font-weight: 700;
}

.home-calendar__day:disabled {
  color: rgba(17, 17, 17, 0.28);
  cursor: default;
}

.home-date-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-top: 0.85rem;
  padding: 0.35rem 0.45rem 0.35rem 0.75rem;
  border: 1px solid rgba(180, 35, 35, 0.28);
  border-radius: 999px;
  background: rgba(180, 35, 35, 0.08);
  color: #b42323;
  font-size: 0.92rem;
  font-weight: 600;
  cursor: pointer;
}

.home-date-chip[hidden] {
  display: none !important;
}

.home-date-chip__clear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.55rem;
  height: 1.55rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: inherit;
  font-size: 1.15rem;
  line-height: 1;
  cursor: pointer;
}

.home-date-chip__clear:hover {
  background: rgba(180, 35, 35, 0.12);
}

.home-toast {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 30;
  display: flex;
  justify-content: center;
  padding: calc(0.85rem + env(safe-area-inset-top)) 1rem 0;
  pointer-events: none;
  animation: toast-in 0.22s ease both;
}

.home-toast[hidden] {
  display: none !important;
}

.home-toast__panel {
  position: relative;
  pointer-events: auto;
  width: min(100%, 28rem);
  margin: 0;
  padding-right: 2.4rem;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.16);
}

.home-toast__close {
  position: absolute;
  top: 0.45rem;
  right: 0.55rem;
  z-index: 1;
  width: 1.8rem;
  height: 1.8rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--muted);
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
}

.home-toast__close:hover {
  background: rgba(17, 17, 17, 0.06);
  color: var(--ink);
}

@keyframes toast-in {
  from {
    opacity: 0;
    transform: translateY(-0.6rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.home-empty {
  position: relative;
  z-index: 1;
  margin: 1.75rem 1.5rem 0;
  text-align: center;
  color: var(--muted);
}

.party-list--home {
  margin-top: 1.75rem;
}

.home-search {
  position: absolute;
  z-index: 6;
  display: block;
  box-sizing: border-box;
  padding: 0;
  pointer-events: none;
}

.home-search[hidden] {
  display: none !important;
}

.home-search__shell {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 0.45rem;
  width: 100%;
  height: 100%;
  min-height: 2.45rem;
  padding: 0.35rem 0.4rem 0.35rem 0.85rem;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  background: #16141f;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35);
  transform-origin: center center;
  box-sizing: border-box;
}

.home-search.is-opening .home-search__shell {
  animation: home-search-pop 0.48s cubic-bezier(0.22, 1.2, 0.36, 1) both;
}

.home-search.is-closing .home-search__shell {
  animation: home-search-suck 0.32s cubic-bezier(0.55, 0.05, 0.8, 0.3) both;
  transform-origin: center center;
}

@keyframes home-search-pop {
  0% {
    opacity: 0;
    transform: scaleX(0.22) scaleY(0.78);
  }
  58% {
    opacity: 1;
    transform: scaleX(1.08) scaleY(1.1);
  }
  100% {
    opacity: 1;
    transform: scaleX(1) scaleY(1);
  }
}

@keyframes home-search-suck {
  0% {
    opacity: 1;
    transform: scaleX(1) scaleY(1);
  }
  100% {
    opacity: 0;
    transform: scaleX(0.06) scaleY(0.55);
  }
}

.home-search__clear {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.85rem;
  height: 1.85rem;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #8b8798;
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
}

.home-search__clear:hover,
.home-search__clear:focus-visible {
  color: #c9c5d4;
}

.home-search__field {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
  display: flex;
  align-items: center;
}

.home-search__ghost {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0.35rem 0.15rem;
  overflow: hidden;
  white-space: pre;
  pointer-events: none;
  font: inherit;
  font-size: 1rem;
  line-height: 1.35;
  z-index: 0;
}

.home-search__ghost-typed {
  color: transparent;
  flex: 0 0 auto;
}

.home-search__ghost-rest {
  color: rgba(180, 176, 194, 0.72);
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: clip;
  pointer-events: auto;
  cursor: text;
}

.home-search.has-ghost .home-search__ghost-rest:hover {
  color: rgba(210, 206, 222, 0.9);
}

.home-search__input {
  position: relative;
  z-index: 1;
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0.35rem 0.15rem;
  border: 0;
  background: transparent;
  color: #ffffff;
  font: inherit;
  font-size: 1rem;
  line-height: 1.35;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  caret-color: #ffffff;
}

.home-search__input::placeholder {
  color: rgba(255, 255, 255, 0.45);
}

.home-search.has-ghost .home-search__input::placeholder {
  color: transparent;
}

.home-search__input::-webkit-search-decoration,
.home-search__input::-webkit-search-cancel-button,
.home-search__input::-webkit-search-results-button,
.home-search__input::-webkit-search-results-decoration {
  display: none;
}

.party-card--feed {
  grid-template-columns: minmax(0, 1fr) auto;
}

.party-card--feed .party-card__actions {
  justify-content: space-between;
  align-self: stretch;
  min-height: 100%;
}

.party-card--feed[hidden] {
  display: none;
}

.party-card__distance {
  margin: 0;
  color: var(--muted);
  font-size: clamp(0.68rem, 3.2cqi, 0.88rem);
}

.party-card__right {
  position: absolute;
  left: var(--pc-center-x);
  top: 50%;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--pc-stack-gap);
  width: min(100%, var(--pc-center-max));
  max-width: var(--pc-center-max);
  margin: 0;
  transform: translate(calc(-50% + var(--pc-center-shift)), var(--pc-center-y));
  text-align: center;
  pointer-events: none;
}

/* Nur die Beschreibung darf mitten im Wort umbrechen/gekürzt werden */
.party-card__description {
  margin: 0;
  width: 100%;
  max-width: 100%;
  color: var(--ink-soft);
  font-size: clamp(0.62rem, 3.2cqi, 0.82rem);
  line-height: 1.32;
  text-align: center;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  line-clamp: 4;
  white-space: normal;
  word-break: normal;
  overflow-wrap: anywhere;
  hyphens: auto;
}

.party-card__more {
  margin: 0;
  color: var(--accent-soft);
  font-size: clamp(0.58rem, 2.8cqi, 0.72rem);
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.25;
  text-align: center;
}

.party-card__more--center {
  position: absolute;
  left: var(--pc-center-x);
  top: 50%;
  z-index: 2;
  margin: 0;
  transform: translate(calc(-50% + var(--pc-center-shift)), var(--pc-center-y));
  text-align: center;
  width: min(100%, var(--pc-center-max));
  max-width: var(--pc-center-max);
  pointer-events: none;
}

.settings-page {
  display: flex;
  flex-direction: column;
  touch-action: pan-y;
}

.settings-hero {
  position: relative;
  z-index: 1;
  display: grid;
  align-content: start;
  justify-items: stretch;
  width: min(100%, 28rem);
  margin: 0 auto;
  padding: 6vh 1.5rem calc(6.5rem + env(safe-area-inset-bottom));
  animation: rise 0.55s ease both;
}

.settings-qr {
  display: grid;
  justify-items: center;
  gap: 0.65rem;
  margin: 1.35rem auto 0;
  width: min(100%, 15rem);
}

.settings-qr__image {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  height: auto;
  padding: 0.85rem;
  border-radius: 22px;
  background: #ffffff;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.28);
}

.settings-qr__handle {
  margin: 0;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--ink);
  text-align: center;
}

.settings-auth {
  width: 100%;
  margin: 1.35rem auto 0;
}

.settings-auth__form {
  display: grid;
  gap: 0.85rem;
}

.settings-auth__hint {
  margin: 0.85rem 0 0;
  text-align: center;
}

.settings-auth__prompt {
  text-align: center;
}

.settings-auth__prompt-msg {
  margin: 0 0 0.85rem;
  text-align: center;
  font-weight: 600;
  color: #ff7b8a;
}

.settings-auth.is-login-prompt {
  padding: 0.9rem;
  border-radius: 18px;
  border: 2px solid #ff5a6a;
  animation: login-glow 0.85s ease 3;
}

@keyframes login-glow {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(255, 90, 106, 0.15);
  }
  50% {
    box-shadow: 0 0 0 4px rgba(255, 90, 106, 0.35), 0 0 22px rgba(255, 90, 106, 0.55);
  }
}

.settings-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 9vw, 3.8rem);
  letter-spacing: 0.03em;
  line-height: 0.95;
  color: var(--ink);
  text-align: center;
}

.settings-panel {
  margin-top: 2rem;
  padding: 1.15rem 1.2rem;
  border: 1px solid rgba(17, 17, 17, 0.14);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.08);
}

.settings-panel__title {
  margin: 0 0 0.95rem;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--ink);
}

.settings-panel__subtitle {
  margin: 1.15rem 0 0.75rem;
  font-size: 0.98rem;
  font-weight: 700;
  color: var(--ink);
}

.settings-nearby__field {
  display: block;
  margin: 0 0 0.85rem;
}

.settings-nearby__field .field__label {
  display: block;
  margin-bottom: 0.35rem;
  font-size: 0.92rem;
  font-weight: 600;
}

.settings-nearby__hint {
  margin: 0.15rem 0 0;
  font-size: 0.82rem;
  opacity: 0.75;
}

.settings-email__hint {
  margin: 0 0 0.85rem;
  font-size: 0.82rem;
  opacity: 0.75;
}

.settings-nearby__status {
  margin: 0.45rem 0 0;
  font-size: 0.85rem;
}

.settings-language {
  position: relative;
  z-index: 5;
}

.settings-panel[data-language-settings].is-open {
  position: relative;
  z-index: 20;
}

.settings-language__input {
  cursor: pointer;
  caret-color: transparent;
}

.settings-language__list {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 0.4rem);
  z-index: 30;
  margin: 0;
  padding: 0.4rem;
  list-style: none;
  max-height: min(18rem, 50vh);
  overflow-y: auto;
  overscroll-behavior: contain;
  border-radius: 12px;
  border: 1px solid rgba(17, 17, 17, 0.14);
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.16);
}

.settings-language__list[hidden] {
  display: none !important;
}

.settings-design__swatches {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.1rem;
  flex-wrap: wrap;
  padding: 0.15rem 0 0.1rem;
}

.settings-design__swatch {
  width: 2.85rem;
  height: 2.85rem;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.22);
  padding: 0;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background: var(--swatch);
  box-shadow:
    0 0 10px color-mix(in srgb, var(--swatch) 70%, transparent),
    0 0 22px color-mix(in srgb, var(--swatch) 35%, transparent),
    inset 0 0 12px color-mix(in srgb, #fff 22%, transparent);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.settings-design__swatch:hover {
  transform: scale(1.06);
}

.settings-design__swatch:focus-visible {
  outline: 2px solid var(--accent-soft);
  outline-offset: 3px;
}

.settings-design__swatch.is-selected {
  border-color: #fff;
  box-shadow:
    0 0 0 2px rgba(255, 255, 255, 0.35),
    0 0 14px color-mix(in srgb, var(--swatch) 85%, transparent),
    0 0 28px color-mix(in srgb, var(--swatch) 45%, transparent),
    inset 0 0 14px color-mix(in srgb, #fff 28%, transparent);
}

.settings-design__swatch[data-theme-swatch="violet"] {
  --swatch: #b026ff;
}

.settings-design__swatch[data-theme-swatch="blue"] {
  --swatch: #1a4cff;
}

.settings-design__swatch[data-theme-swatch="red"] {
  --swatch: #ff2a4a;
}

.settings-design__swatch[data-theme-swatch="green"] {
  --swatch: #39ff14;
}

.settings-language__option {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  min-height: 2.5rem;
  padding: 0.55rem 0.75rem;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}

.settings-language__option::after {
  content: '';
  flex: 0 0 auto;
  width: 0.42rem;
  height: 0.78rem;
  margin-left: auto;
  border-right: 1.5px solid transparent;
  border-bottom: 1.5px solid transparent;
  transform: rotate(40deg) translateY(-0.08rem);
}

.settings-language__option.is-selected::after {
  border-right-color: currentColor;
  border-bottom-color: currentColor;
}

.settings-language__option:hover,
.settings-language__option.is-selected {
  background: rgba(17, 17, 17, 0.06);
}

.settings-panel .settings-toggle + .settings-row,
.settings-panel .settings-toggle + .settings-toggle {
  margin-top: 0.85rem;
}

.settings-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.settings-status--inline {
  margin: 0;
  font-weight: 400;
}

.settings-actions {
  display: grid;
  gap: 0.65rem;
}

.settings-action {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 2.75rem;
  padding: 0.7rem 1rem;
  border: 1px solid rgba(17, 17, 17, 0.14);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.72);
  color: var(--ink);
  font: inherit;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.15s ease, background 0.2s ease, border-color 0.2s ease;
}

.settings-action--keyed {
  gap: 0.55rem;
}

.settings-action__key {
  width: 1.15rem;
  height: 1.15rem;
  flex-shrink: 0;
}

a.settings-action:visited {
  color: var(--ink);
}

.settings-action:hover {
  background: #f7f7f7;
}

.settings-action:active {
  transform: scale(0.98);
}

.password-change {
  position: fixed;
  inset: 0;
  z-index: 98;
  display: grid;
  place-items: center;
  padding: 1.25rem;
  background: rgba(0, 0, 0, 0.62);
}

.password-change[hidden] {
  display: none !important;
}

.password-change__sheet {
  position: relative;
  width: min(100%, 26rem);
  padding: 1.75rem 1.4rem 1.5rem;
  border: 1px solid var(--panel-border);
  border-radius: var(--radius);
  background: rgba(18, 16, 28, 0.96);
  box-shadow: var(--shadow), 0 0 30px rgba(var(--accent-rgb), 0.15);
  animation: rise 0.35s ease both;
}

.password-change__title {
  margin: 0 0 1rem;
  color: var(--ink);
  font-size: 1.15rem;
  font-weight: 700;
  text-align: center;
}

.password-change__sheet .field + .field {
  margin-top: 0.85rem;
}

.password-change__input-wrap {
  position: relative;
  display: block;
}

.password-change__input {
  padding-right: 5.1rem;
}

.password-change__forgot {
  position: absolute;
  top: 50%;
  right: 0.45rem;
  transform: translateY(-50%);
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0.2rem 0.35rem;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 0.68rem;
  font-weight: 600;
  line-height: 1.15;
  text-align: center;
  cursor: pointer;
}

.password-change__forgot:hover {
  color: var(--ink);
}

.password-change__copy {
  margin: 0 0 1rem;
  color: var(--ink-soft);
  font-size: 0.95rem;
  line-height: 1.5;
  text-align: center;
}

.password-change__error {
  margin: 0.75rem 0 0;
  color: #ff7b8a;
  font-size: 0.9rem;
  line-height: 1.4;
  text-align: center;
}

.password-change__error[hidden] {
  display: none !important;
}

.password-change__actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
  margin-top: 1.35rem;
}

.password-change__actions .btn {
  min-width: 7.5rem;
}

.privacy-overlay {
  position: fixed;
  inset: 0;
  z-index: 98;
  display: grid;
  place-items: center;
  padding: 0.85rem;
  background: rgba(0, 0, 0, 0.62);
}

.privacy-overlay[hidden] {
  display: none !important;
}

.privacy-overlay__sheet {
  display: flex;
  flex-direction: column;
  width: min(100%, 42rem);
  height: min(92dvh, 52rem);
  max-height: 92vh;
  border: 1px solid var(--panel-border);
  border-radius: var(--radius);
  background: rgba(18, 16, 28, 0.98);
  box-shadow: var(--shadow), 0 0 30px rgba(var(--accent-rgb), 0.15);
  animation: rise 0.35s ease both;
  overflow: hidden;
}

.privacy-overlay__sheet--guide {
  position: relative;
  width: min(100%, 48rem);
  height: min(94dvh, 58rem);
  max-height: 94vh;
}

.privacy-overlay__toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-shrink: 0;
  padding: 0.9rem 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(18, 16, 28, 0.98);
}

.privacy-overlay__title {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--ink);
}

.privacy-overlay__close {
  width: 2rem;
  height: 2rem;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--muted);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
}

.privacy-overlay__close:hover {
  color: var(--ink);
}

.blocked-users {
  position: fixed;
  inset: 0;
  z-index: 98;
  display: grid;
  place-items: center;
  padding: 1.25rem;
  background: rgba(0, 0, 0, 0.62);
}

.blocked-users[hidden] {
  display: none !important;
}

.blocked-users__sheet {
  position: relative;
  width: min(100%, 26rem);
  max-height: min(88dvh, 40rem);
  display: flex;
  flex-direction: column;
  padding: 1.75rem 1.4rem 1.5rem;
  border: 1px solid var(--panel-border);
  border-radius: var(--radius);
  background: rgba(18, 16, 28, 0.96);
  box-shadow: var(--shadow), 0 0 30px rgba(var(--accent-rgb), 0.15);
  animation: rise 0.35s ease both;
  overflow: hidden;
}

.blocked-users__close,
.block-user-search__close {
  width: 2rem;
  height: 2rem;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--muted);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
}

.blocked-users__close {
  position: absolute;
  top: 0.55rem;
  right: 0.55rem;
  z-index: 2;
}

.blocked-users__close:hover,
.block-user-search__close:hover {
  color: var(--ink);
}

.blocked-users__copy {
  margin: 0;
  padding-right: 1.25rem;
  color: var(--ink-soft);
  font-size: 0.98rem;
  line-height: 1.55;
  text-align: center;
  flex-shrink: 0;
}

.blocked-users__actions {
  display: flex;
  justify-content: center;
  margin-top: 1.35rem;
  flex-shrink: 0;
}

.blocked-users__lists {
  margin-top: 1.25rem;
  overflow: auto;
  min-height: 0;
  flex: 1;
  display: grid;
  gap: 1.1rem;
  padding-right: 0.15rem;
}

.blocked-users__section[hidden] {
  display: none !important;
}

.blocked-users__section-title {
  margin: 0 0 0.5rem;
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--ink);
}

.blocked-users__list {
  position: static !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  max-height: none !important;
  overflow: visible !important;
  box-shadow: none !important;
}

.blocked-users__list .user-search__item {
  padding-left: 0.65rem;
  padding-right: 0.65rem;
}

.user-search__unblock {
  flex: 0 0 auto;
  border: 0;
  background: transparent;
  color: var(--accent-soft);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  padding: 0.35rem 0.55rem;
}

.user-search__unblock:hover {
  color: var(--accent-light);
}

.user-search__unblock:disabled {
  opacity: 0.55;
  cursor: default;
}

.block-user-search {
  position: fixed;
  inset: 0;
  z-index: 99;
  display: grid;
  place-items: center;
  padding: 0.85rem;
  background: rgba(0, 0, 0, 0.62);
}

.block-user-search[hidden] {
  display: none !important;
}

.block-user-search__sheet {
  display: flex;
  flex-direction: column;
  width: min(100%, 28rem);
  border: 1px solid var(--panel-border);
  border-radius: var(--radius);
  background: rgba(18, 16, 28, 0.98);
  box-shadow: var(--shadow), 0 0 30px rgba(var(--accent-rgb), 0.15);
  animation: rise 0.35s ease both;
  overflow: visible;
}

.block-user-search__toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-shrink: 0;
  padding: 0.85rem 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius) var(--radius) 0 0;
  background: rgba(18, 16, 28, 0.98);
}

.block-user-search__title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--ink);
}

.block-user-search__body {
  position: relative;
  z-index: 1;
  padding: 1rem;
  overflow: visible;
  border-radius: 0 0 var(--radius) var(--radius);
  background: rgba(18, 16, 28, 0.98);
}

.block-user-search__body .user-search {
  position: relative;
  z-index: 2;
}

.block-user-search__body .user-search__suggest {
  position: absolute;
  top: calc(100% + 0.4rem);
  left: 0;
  right: 0;
  z-index: 40;
  margin: 0;
  max-height: min(40vh, 14rem);
  overflow: auto;
}

.block-user-search__status {
  margin: 0.85rem 0 0;
  text-align: center;
  color: var(--success);
  font-size: 0.92rem;
  font-weight: 600;
}

.block-user-search__status.is-error {
  color: var(--error);
}

.user-search__block {
  flex: 0 0 auto;
  border: 0;
  background: transparent;
  color: #ff7b8a;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  padding: 0.35rem 0.55rem;
}

.user-search__block:hover {
  color: #ff92a0;
}

.user-search__block:disabled {
  opacity: 0.55;
  cursor: default;
}

.privacy-overlay__body {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: 1rem 1.15rem calc(1.25rem + env(safe-area-inset-bottom));
  -webkit-overflow-scrolling: touch;
}

/* Datenschutzerklärung: Text darf nicht markiert/kopiert werden */
.privacy-overlay[data-privacy-overlay],
.privacy-overlay[data-privacy-overlay] * {
  -webkit-user-select: none !important;
  -moz-user-select: none !important;
  -ms-user-select: none !important;
  user-select: none !important;
  -webkit-touch-callout: none;
}

.privacy-overlay[data-privacy-overlay] ::selection,
.privacy-overlay[data-privacy-overlay] *::selection {
  background: transparent;
  color: inherit;
}

.legal-doc {
  color: var(--ink-soft);
  font-size: 0.92rem;
  line-height: 1.55;
}

.user-guide {
  color: var(--ink-soft);
  font-size: 0.95rem;
  line-height: 1.6;
}

.user-guide__intro,
.user-guide__outro {
  margin: 0 0 1rem;
  color: var(--ink);
}

.user-guide__toc {
  margin: 0 0 1.35rem;
  padding: 0.85rem 1rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: calc(var(--radius) - 4px);
  background: rgba(255, 255, 255, 0.03);
}

.user-guide__toc-title {
  margin: 0 0 0.45rem;
  color: var(--ink);
  font-size: 0.92rem;
  font-weight: 700;
}

.user-guide__toc ol {
  margin: 0;
  padding-left: 1.2rem;
}

.user-guide__toc li {
  margin: 0.28rem 0;
}

.user-guide__toc a {
  color: var(--accent-soft);
  text-decoration: none;
}

.user-guide__toc a:hover {
  text-decoration: underline;
}

.user-guide h3 {
  margin: 1.55rem 0 0.55rem;
  scroll-margin-top: 0.75rem;
  color: var(--ink);
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.35;
}

.user-guide h4 {
  margin: 1rem 0 0.4rem;
  color: var(--ink);
  font-size: 0.96rem;
  font-weight: 700;
}

.user-guide p {
  margin: 0 0 0.75rem;
}

.user-guide ul,
.user-guide ol {
  margin: 0 0 0.85rem;
  padding-left: 1.2rem;
}

.user-guide li {
  margin: 0.3rem 0;
}

.user-guide strong {
  color: var(--ink);
  font-weight: 700;
}

.legal-doc__meta {
  margin: 0 0 1rem;
  color: var(--muted);
  font-size: 0.85rem;
}

.legal-doc h3 {
  margin: 1.45rem 0 0.55rem;
  color: var(--ink);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.35;
}

.legal-doc h4 {
  margin: 0.95rem 0 0.4rem;
  color: var(--ink);
  font-size: 0.94rem;
  font-weight: 700;
}

.legal-doc p {
  margin: 0 0 0.7rem;
}

.legal-doc ul {
  margin: 0 0 0.75rem;
  padding-left: 1.2rem;
}

.legal-doc li {
  margin: 0.25rem 0;
}

.legal-doc__footer {
  margin-top: 1.5rem;
  padding-top: 0.85rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--muted);
  font-size: 0.85rem;
}

.settings-toggle {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  cursor: pointer;
  user-select: none;
}

.settings-toggle__text {
  display: grid;
  gap: 0.2rem;
  min-width: 0;
}

.settings-toggle__label {
  font-weight: 700;
  color: var(--ink);
}

.settings-toggle__hint {
  color: var(--ink-soft);
  font-size: 0.92rem;
}

.settings-toggle__input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.settings-toggle__switch {
  position: relative;
  flex: 0 0 auto;
  width: 3rem;
  height: 1.7rem;
  border-radius: 999px;
  background: rgba(17, 17, 17, 0.18);
  transition: background 0.2s ease;
}

.settings-toggle__switch::after {
  content: "";
  position: absolute;
  top: 0.2rem;
  left: 0.2rem;
  width: 1.3rem;
  height: 1.3rem;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
  transition: transform 0.2s ease;
}

.settings-toggle__input:checked + .settings-toggle__switch {
  background: #111111;
}

.settings-toggle__input:checked + .settings-toggle__switch::after {
  transform: translateX(1.3rem);
}

.settings-toggle__input:focus-visible + .settings-toggle__switch {
  outline: 2px solid #111111;
  outline-offset: 3px;
}

.settings-status {
  margin: 0.85rem 0 0;
  color: var(--muted);
  font-size: 0.9rem;
}

.bottom-nav {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
  display: flex;
  justify-content: center;
  padding: 1rem max(1.25rem, env(safe-area-inset-left), env(safe-area-inset-right)) calc(1.25rem + env(safe-area-inset-bottom));
  pointer-events: none;
}

.bottom-nav__btn {
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: min(11.5rem, calc(100vw - 2.5rem));
  min-height: clamp(2.75rem, 8vw, 3rem);
  padding: 0.75rem 1.5rem;
  border: 1px solid rgba(17, 17, 17, 0.18);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.14);
  color: var(--ink);
  font-size: clamp(0.88rem, 0.84rem + 0.18vw, 1rem);
  font-weight: 600;
  text-decoration: none;
  transition: transform 0.15s ease, background 0.2s ease;
}

.bottom-nav__btn:hover {
  background: #f7f7f7;
}

.bottom-nav__btn:active {
  transform: scale(0.98);
}

.partys-page {
  display: flex;
  flex-direction: column;
  touch-action: pan-y;
}

.partys-page .party-card,
.partys-page .party-card__hit {
  touch-action: pan-y;
  -webkit-user-drag: none;
  user-select: none;
}

.partys-saved {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
  width: 100%;
  padding: 0.35rem 1rem 0.25rem;
}

.partys-saved__split {
  width: min(100%, 28rem);
}

.partys-saved__split.bottom-nav__split--triple {
  grid-template-columns: 1fr 1fr 1fr;
}

.partys-saved__split .bottom-nav__split-side {
  font-size: 0.78rem;
  line-height: 1.2;
  padding: 0.7rem 0.4rem;
}

.partys-saved__split.bottom-nav__split--triple .bottom-nav__split-side:not(:last-child) {
  border-right: 1px solid rgba(17, 17, 17, 0.18);
}

.partys-page .partys-saved__split.bottom-nav__split {
  pointer-events: auto;
}

.partys-saved__btn {
  cursor: pointer;
}

.visibility-page,
.pro-page,
.ads-page,
.checkout-page {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow: visible;
}

.ads-page:not(.ads-list-page) {
  touch-action: pan-y;
}

.ads-page.is-period-open,
.ads-page.is-duration-open {
  z-index: 30;
}

.visibility-hero,
.ads-hero {
  position: relative;
  z-index: 1;
  display: grid;
  align-content: start;
  justify-items: center;
  gap: 1.75rem;
  width: min(100%, 28rem);
  margin: 0 auto;
  padding: 12vh 1.5rem calc(6.5rem + env(safe-area-inset-bottom));
  text-align: center;
  animation: rise 0.55s ease both;
}

.visibility-title,
.ads-title {
  margin: 0;
  max-width: 22ch;
  font-family: var(--font-display, inherit);
  font-size: clamp(1.35rem, 4.5vw, 1.85rem);
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: 0.01em;
  color: var(--ink, #f4f2f8);
}

.ads-title {
  font-size: clamp(2.4rem, 9vw, 3.8rem);
  letter-spacing: 0.03em;
  line-height: 0.95;
  max-width: none;
}

.pro-glow {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 70% 42% at 50% 8%, rgba(var(--accent-rgb), 0.34), transparent 62%),
    radial-gradient(circle at 88% 72%, rgba(var(--accent-soft-rgb), 0.14), transparent 34%),
    radial-gradient(circle at 12% 58%, rgba(var(--accent-rgb), 0.1), transparent 30%);
  animation: pro-glow-pulse 5.5s ease-in-out infinite;
}

@keyframes pro-glow-pulse {
  0%,
  100% {
    opacity: 0.85;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.03);
  }
}

.pro-hero {
  position: relative;
  z-index: 1;
  display: grid;
  align-content: start;
  justify-items: stretch;
  gap: 1.15rem;
  width: min(100%, 28rem);
  margin: 0 auto;
  padding: 7vh 1.25rem calc(6.75rem + env(safe-area-inset-bottom));
  text-align: center;
  animation: rise 0.55s ease both;
}

.pro-kicker {
  margin: 0;
  color: var(--accent-soft);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-shadow: 0 0 16px rgba(var(--accent-rgb), 0.45);
  animation: rise 0.5s ease both;
}

.pro-title {
  margin: 0;
  font-family: var(--font-display, inherit);
  font-size: clamp(3.4rem, 16vw, 5.2rem);
  font-weight: 600;
  letter-spacing: 0.06em;
  line-height: 0.88;
  color: var(--ink, #f4f2f8);
  text-shadow:
    0 0 18px rgba(var(--accent-rgb), 0.55),
    0 0 42px rgba(var(--accent-rgb), 0.28);
  animation: rise 0.55s ease 0.04s both, pro-title-glow 3.4s ease-in-out 0.6s infinite;
}

@keyframes pro-title-glow {
  0%,
  100% {
    text-shadow:
      0 0 18px rgba(var(--accent-rgb), 0.55),
      0 0 42px rgba(var(--accent-rgb), 0.28);
  }
  50% {
    text-shadow:
      0 0 26px rgba(var(--accent-pale-rgb), 0.8),
      0 0 56px rgba(var(--accent-rgb), 0.5);
  }
}

.pro-lead {
  margin: 0 auto;
  max-width: 24ch;
  color: var(--ink-soft, #d2cce0);
  font-size: 1.02rem;
  font-weight: 500;
  line-height: 1.4;
  animation: rise 0.55s ease 0.08s both;
}

.pro-badge {
  justify-self: center;
  margin: 0.15rem 0 0.35rem;
  padding: 0.35rem 0.85rem;
  border: 1px solid rgba(var(--accent-soft-rgb), 0.55);
  border-radius: 999px;
  background: rgba(var(--accent-rgb), 0.18);
  color: var(--accent-soft);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  box-shadow: var(--glow-soft);
  animation: rise 0.55s ease 0.12s both;
}

.pro-badge--soft {
  border-color: rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.06);
  color: var(--ink-soft, #d2cce0);
  box-shadow: none;
}

.pro-page.is-pro .pro-badge {
  border-color: rgba(93, 222, 160, 0.45);
  background: rgba(93, 222, 160, 0.14);
  color: var(--success, #5ddea0);
  box-shadow: 0 0 14px rgba(93, 222, 160, 0.22);
}

.pro-features {
  display: grid;
  gap: 0.7rem;
  margin: 0.35rem 0 0;
  padding: 0;
  list-style: none;
}

.pro-feature {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 0.75rem 0.85rem;
  align-items: start;
  padding: 0.95rem 1rem;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 16px;
  background: rgba(18, 16, 28, 0.72);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.28);
  text-align: left;
  animation: rise 0.55s ease both;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.pro-feature:nth-child(1) {
  animation-delay: 0.14s;
}

.pro-feature:nth-child(2) {
  animation-delay: 0.2s;
}

.pro-feature:nth-child(3) {
  animation-delay: 0.26s;
}

.pro-feature:hover {
  border-color: rgba(var(--accent-soft-rgb), 0.45);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.32), var(--glow-soft);
  transform: translateY(-1px);
}

.pro-feature__index {
  font-family: var(--font-display);
  font-size: 1.35rem;
  letter-spacing: 0.04em;
  line-height: 1;
  color: var(--accent-soft);
  text-shadow: 0 0 12px rgba(var(--accent-rgb), 0.4);
}

.pro-feature__body {
  min-width: 0;
}

.pro-feature__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 4vw, 1.55rem);
  letter-spacing: 0.03em;
  line-height: 0.95;
  color: var(--ink);
}

.pro-feature__text {
  margin: 0.4rem 0 0;
  color: var(--ink-soft, #d2cce0);
  font-size: 0.88rem;
  font-weight: 500;
  line-height: 1.45;
}

.pro-feature__price {
  margin: 0;
  display: grid;
  justify-items: end;
  align-content: start;
  gap: 0.1rem;
  color: var(--ink);
  font-weight: 700;
  line-height: 1.1;
  white-space: nowrap;
}

.pro-feature__price span {
  font-size: 1.05rem;
}

.pro-feature__price small {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 600;
}

.pro-bundle {
  position: relative;
  overflow: hidden;
  margin-top: 0.2rem;
  padding: 1.15rem 1.15rem 1.1rem;
  border: 1px solid rgba(var(--accent-soft-rgb), 0.5);
  border-radius: 18px;
  background:
    linear-gradient(145deg, rgba(var(--accent-rgb), 0.22), rgba(18, 16, 28, 0.88) 55%),
    rgba(18, 16, 28, 0.9);
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.35), var(--glow);
  text-align: left;
  animation: rise 0.55s ease 0.32s both;
}

.pro-bundle::before {
  content: '';
  position: absolute;
  inset: -40% auto auto -20%;
  width: 10rem;
  height: 10rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--accent-pale-rgb), 0.35), transparent 68%);
  pointer-events: none;
  animation: pro-bundle-shine 4.8s ease-in-out infinite;
}

@keyframes pro-bundle-shine {
  0%,
  100% {
    transform: translate(0, 0);
    opacity: 0.7;
  }
  50% {
    transform: translate(18%, 22%);
    opacity: 1;
  }
}

.pro-bundle__top {
  position: relative;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
}

.pro-bundle__label {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.55rem, 5vw, 2rem);
  letter-spacing: 0.04em;
  line-height: 0.95;
  color: var(--ink);
}

.pro-bundle__price {
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: 0.25rem;
  color: var(--accent-soft);
  font-weight: 700;
  text-shadow: 0 0 14px rgba(var(--accent-rgb), 0.35);
}

.pro-bundle__price span {
  font-size: 1.35rem;
}

.pro-bundle__price small {
  color: var(--ink-soft);
  font-size: 0.78rem;
  font-weight: 600;
}

.pro-bundle__text {
  position: relative;
  margin: 0.7rem 0 0;
  color: var(--ink-soft, #d2cce0);
  font-size: 0.92rem;
  font-weight: 500;
  line-height: 1.45;
}

@media (max-width: 380px) {
  .pro-feature {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .pro-feature__price {
    grid-column: 2;
    justify-items: start;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pro-glow,
  .pro-title,
  .pro-bundle::before {
    animation: none;
  }
}

.ads-hero {
  padding-bottom: 1.25rem;
}

.ads-list {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 1rem;
  width: min(100%, 44rem);
  margin: 0 auto;
  padding: 0.25rem 1rem 1.25rem;
  overflow: visible;
}

.ads-page.is-period-open,
.ads-page.is-period-open .ads-list,
.ads-list.is-period-open,
.ads-page.is-duration-open,
.ads-page.is-duration-open .ads-list,
.ads-list.is-duration-open {
  z-index: 60;
  overflow: visible;
}

.ads-mine {
  position: relative;
  z-index: 1;
  width: min(100%, 44rem);
  margin: 0 auto;
  padding: 0.5rem 1rem calc(6.5rem + env(safe-area-inset-bottom));
  overflow: visible;
}

.ads-page.is-period-open .ads-mine,
.ads-page.is-duration-open .ads-mine {
  z-index: 1;
}

.ads-mine__title {
  margin: 0 0 0.85rem;
  font-family: var(--font-display);
  font-size: clamp(1.45rem, 4vw, 1.9rem);
  letter-spacing: 0.03em;
  color: var(--ink);
}

.ads-mine__empty {
  margin: 0;
  color: var(--muted);
  font-size: 0.95rem;
}

.ads-list--mine {
  padding: 0;
  width: 100%;
}

.ads-mine__media {
  display: block;
  width: 100%;
  max-height: 9rem;
  object-fit: cover;
  border-radius: 12px;
  background: rgba(17, 17, 17, 0.06);
}

.ads-card__preview {
  display: grid;
  gap: 0.45rem;
  align-content: start;
}

.ads-mine__media-name {
  margin: 0;
  text-align: left;
  overflow-wrap: anywhere;
}

.ads-mine__stats {
  margin: 0.85rem 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.45rem;
}

.ads-mine__stats li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.4rem 0.55rem;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.ads-mine__stat-label {
  color: var(--muted, #9b93ad);
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1.3;
}

.ads-mine__stat-value {
  color: var(--ink, #f4f2f8);
  font-size: 0.95rem;
  font-weight: 700;
  white-space: nowrap;
}

.ads-mine__stat--price .ads-mine__stat-value {
  color: var(--accent-soft);
}

.ads-field__file--warn {
  color: var(--error, #ff7b8a) !important;
  font-weight: 600;
}

.ads-card__preview {
  align-self: center;
}

.ads-card {
  display: grid;
  gap: 1rem;
  width: 100%;
  padding: 1.15rem 1.2rem 1rem;
  border: 1px solid rgba(17, 17, 17, 0.14);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.08);
  animation: rise 0.45s ease both;
}

.ads-card__main {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(12rem, 0.9fr);
  gap: 1rem 1.25rem;
  align-items: start;
}

.ads-card__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.55rem, 4.5vw, 2.1rem);
  letter-spacing: 0.03em;
  line-height: 0.95;
  color: var(--ink);
}

.ads-card__subtitle {
  margin: 0.45rem 0 0;
  color: var(--accent-soft);
  font-size: 0.92rem;
  font-weight: 650;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.ads-card__text {
  margin: 0.75rem 0 0;
  color: var(--ink-soft, #d2cce0);
  font-size: 0.95rem;
  font-weight: 500;
  line-height: 1.55;
}

.ads-card__contract {
  display: inline;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  line-height: inherit;
  text-align: inherit;
  text-decoration: none;
  cursor: pointer;
}

.ads-card__contract:focus-visible {
  outline: 2px solid var(--accent, #c9a227);
  outline-offset: 2px;
  border-radius: 0.15rem;
}

.ads-contract__text {
  margin: 0;
  white-space: pre-wrap;
  color: var(--ink-soft, #d2cce0);
  font-size: 0.98rem;
  font-weight: 500;
  line-height: 1.6;
}

.ads-card__right {
  display: grid;
  gap: 0.85rem;
  align-content: start;
  justify-items: stretch;
}

.ads-card--adfree .ads-card__right {
  justify-items: end;
  align-content: center;
  min-height: 100%;
}

.ads-card__cta {
  min-height: 2.85rem;
  padding-inline: 1.2rem;
  font-weight: 650;
  white-space: nowrap;
}

.ads-card__included {
  margin: 0;
  padding: 0.65rem 0.85rem;
  text-align: center;
  font-size: 0.92rem;
  font-weight: 650;
  color: color-mix(in srgb, var(--ink, #f4f2f8) 82%, transparent);
}

.ads-card__upload {
  width: 100%;
  min-height: 2.55rem;
  justify-content: center;
}

.ads-field {
  display: grid;
  gap: 0.35rem;
}

.ads-field__label {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--ink-soft);
}

.ads-field__input {
  width: 100%;
  min-height: 2.55rem;
  padding: 0.65rem 0.8rem;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 12px;
  background: rgba(5, 3, 10, 0.55);
  color: var(--ink);
  font: inherit;
  font-size: 0.95rem;
  outline: none;
}

.ads-field__input:focus {
  border-color: rgba(var(--accent-soft-rgb), 0.75);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.18);
}

/* Flying required-field error ring (settles as red outline on the control). */
.required-error-flyer {
  position: fixed;
  z-index: 10060;
  pointer-events: none;
  box-sizing: border-box;
  border: 2.5px solid #ff3b55;
  border-radius: 50%;
  background: transparent;
  box-shadow:
    0 0 0 0 rgba(255, 59, 85, 0.35),
    0 0 34px rgba(255, 59, 85, 0.45);
  opacity: 0.95;
  will-change: left, top, width, height, border-radius, opacity, transform, box-shadow;
}

.required-error-flyer.is-flying {
  transition:
    left 0.78s cubic-bezier(0.16, 1.35, 0.28, 1),
    top 0.78s cubic-bezier(0.16, 1.35, 0.28, 1),
    width 0.78s cubic-bezier(0.18, 1.4, 0.32, 1),
    height 0.78s cubic-bezier(0.18, 1.4, 0.32, 1),
    border-radius 0.72s cubic-bezier(0.2, 1.2, 0.3, 1),
    box-shadow 0.78s ease,
    opacity 0.35s ease;
}

.required-error-flyer.is-settling {
  box-shadow:
    0 0 0 1px rgba(255, 59, 85, 0.55),
    0 0 18px rgba(255, 59, 85, 0.28);
}

.required-error-flyer.is-fading {
  opacity: 0;
  transition: opacity 0.28s ease;
}

.is-required-error {
  border-color: #ff3b55 !important;
  box-shadow:
    0 0 0 1px rgba(255, 59, 85, 0.55),
    0 0 16px rgba(255, 59, 85, 0.28) !important;
  transition:
    border-color 0.55s ease,
    box-shadow 0.65s ease;
}

.is-required-error.is-required-error-clearing {
  border-color: rgba(255, 255, 255, 0.18) !important;
  box-shadow: none !important;
}

.ads-period__trigger.is-required-error.is-required-error-clearing {
  border-color: rgba(var(--accent-soft-rgb), 0.55) !important;
}

.field__input.is-required-error.is-required-error-clearing,
.chat-composer__input.is-required-error.is-required-error-clearing {
  border-color: rgba(255, 255, 255, 0.18) !important;
}

#party-location-map.is-required-error,
#party-schedule-box.is-required-error {
  border-radius: 14px;
  outline: 2px solid #ff3b55;
  outline-offset: 2px;
}

#party-location-map.is-required-error.is-required-error-clearing,
#party-schedule-box.is-required-error.is-required-error-clearing {
  outline-color: transparent;
  box-shadow: none !important;
  border-color: inherit !important;
}

@media (prefers-reduced-motion: reduce) {
  .required-error-flyer {
    display: none !important;
  }

  .is-required-error {
    transition: none;
  }
}

.ads-field__budget {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.45rem;
}

.ads-field__currency {
  font-size: 1.05rem;
  font-weight: 650;
  color: var(--ink);
}

.ads-field__file {
  margin: 0;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.ads-field--period,
.ads-field--duration {
  position: relative;
  z-index: 4;
}

.ads-field--period.is-open,
.ads-field--duration.is-open {
  z-index: 80;
}

.ads-card--publish {
  overflow: visible;
}

.ads-card--publish.is-period-open,
.ads-card--publish.is-duration-open {
  position: relative;
  z-index: 70;
  overflow: visible;
}

.ads-card--publish.is-period-open .ads-card__main,
.ads-card--publish.is-period-open .ads-card__right,
.ads-card--publish.is-duration-open .ads-card__main,
.ads-card--publish.is-duration-open .ads-card__right {
  overflow: visible;
  position: relative;
  z-index: 2;
}

.ads-card--publish.is-period-open .ads-card__footer,
.ads-card--publish.is-duration-open .ads-card__footer {
  position: relative;
  z-index: 0;
}

.ads-period__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  width: 100%;
  min-height: 2.55rem;
  padding: 0.55rem 0.8rem;
  border-radius: 12px;
  border: 1px solid rgba(var(--accent-soft-rgb), 0.55);
  background: rgba(5, 3, 10, 0.55);
  color: #fff;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.ads-period__chevron {
  width: 0.45rem;
  height: 0.45rem;
  border-right: 1.5px solid var(--accent-soft);
  border-bottom: 1.5px solid var(--accent-soft);
  transform: rotate(45deg);
  flex-shrink: 0;
}

.ads-period__trigger[aria-expanded='true'] .ads-period__chevron {
  transform: rotate(-135deg) translate(-1px, -1px);
}

.ads-period__list {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 0.35rem);
  bottom: auto;
  z-index: 90;
  margin: 0;
  padding: 0.4rem;
  list-style: none;
  max-height: min(16rem, 50vh);
  overflow-y: auto;
  overscroll-behavior: contain;
  border-radius: 12px;
  border: 1.5px solid #d28bff;
  background: #100c18;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.55);
  pointer-events: auto;
}

.ads-period__list[hidden] {
  display: none !important;
}

.ads-period__list li + li {
  margin-top: 0.3rem;
}

.ads-period__option {
  display: block;
  width: 100%;
  min-height: 2.25rem;
  padding: 0.45rem 0.65rem;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: #050308;
  color: #fff;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.ads-period__option:hover,
.ads-period__option.is-active {
  border-color: #fff;
  background: #120a1c;
}

.ads-duration__option {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.65rem;
}

.ads-duration__price {
  flex-shrink: 0;
  color: rgba(180, 176, 190, 0.85);
  font-size: 0.88em;
}

.ads-duration__trigger-label {
  display: inline-flex;
  align-items: baseline;
  gap: 0.45rem;
  flex: 1;
  min-width: 0;
  color: inherit;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ads-duration__trigger-label.is-placeholder {
  color: rgba(255, 255, 255, 0.55);
}

.ads-card__footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.85rem;
  flex-wrap: wrap;
  padding-top: 0.15rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.ads-card__footer--publish {
  flex-direction: column;
  align-items: stretch;
  gap: 0.55rem;
}

.ads-card__footer-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.85rem;
  flex-wrap: wrap;
}

.ads-personalized-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  cursor: pointer;
  min-width: 0;
}

.ads-personalized-toggle__label {
  font-weight: 600;
  color: var(--ink);
  font-size: 0.95rem;
  line-height: 1.2;
}

.ads-card__footer--mine {
  justify-content: center;
  position: relative;
  min-height: 2.85rem;
  padding-top: 0.65rem;
}

.ads-card__footer--mine .ads-card__status {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(100% + 0.25rem);
  margin: 0;
  text-align: center;
}

.ads-mine__action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.85rem;
  height: 2.85rem;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #ff8f9c;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  transition: color 0.2s ease, filter 0.2s ease, transform 0.15s ease;
}

.ads-mine__action:disabled {
  opacity: 0.55;
  cursor: wait;
}

.ads-mine__action-icon {
  width: 2.85rem;
  height: 2.85rem;
  display: block;
}

.ads-mine__ring {
  stroke: currentColor;
  stroke-width: 1.6;
}

.ads-mine__trash {
  stroke: currentColor;
  stroke-width: 1.55;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ads-mine__x {
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
}

.ads-mine__action--delete:hover,
.ads-mine__action--delete:focus-visible {
  color: #ff5a6a;
  filter: drop-shadow(0 0 6px rgba(255, 90, 106, 0.55))
    drop-shadow(0 0 14px rgba(255, 90, 106, 0.35));
  outline: none;
}

.ads-mine__action--delete:active {
  transform: scale(0.96);
}

.ads-mine__action--deleted {
  color: #8a8794;
  cursor: default;
  pointer-events: none;
  filter: none;
}

.ads-card__status {
  margin: 0;
  margin-right: auto;
  color: var(--accent-soft);
  font-size: 0.86rem;
  font-weight: 500;
}

.ads-card__status.is-error {
  color: var(--error, #ff7b8a);
}

@media (max-width: 720px) {
  .ads-card__main {
    grid-template-columns: 1fr;
  }

  .ads-card--adfree .ads-card__right {
    justify-items: stretch;
  }

  .ads-card__cta {
    width: 100%;
  }
}

.visibility-pro-btn,
.pro-btn {
  justify-self: center;
  width: min(100%, 16rem);
  min-height: 3.15rem;
  margin-top: 0.35rem;
  font-weight: 650;
  box-shadow: var(--glow-soft);
  animation: rise 0.55s ease 0.38s both;
}

.pro-btn:hover {
  box-shadow: var(--glow);
}

.visibility-pro-btn:disabled,
.pro-btn:disabled {
  opacity: 0.65;
  cursor: wait;
}

.pro-cancel {
  position: fixed;
  inset: 0;
  z-index: 97;
  display: grid;
  place-items: center;
  padding: 1.25rem;
  background: rgba(0, 0, 0, 0.62);
}

.pro-cancel[hidden] {
  display: none !important;
}

.pro-cancel__sheet {
  position: relative;
  width: min(100%, 26rem);
  padding: 1.75rem 1.4rem 1.5rem;
  border: 1px solid var(--panel-border);
  border-radius: var(--radius);
  background: rgba(18, 16, 28, 0.96);
  box-shadow: var(--shadow), 0 0 30px rgba(var(--accent-rgb), 0.15);
  animation: rise 0.35s ease both;
}

.pro-cancel__warning {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.98rem;
  line-height: 1.55;
  text-align: center;
}

.pro-cancel__actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.35rem;
}

.pro-cancel__actions .btn {
  min-width: 7.5rem;
}

.secret-mode {
  position: fixed;
  inset: 0;
  z-index: 97;
  display: grid;
  place-items: center;
  padding: 1.25rem;
  background: rgba(0, 0, 0, 0.62);
}

.secret-mode[hidden] {
  display: none !important;
}

.secret-mode__sheet {
  position: relative;
  width: min(100%, 26rem);
  padding: 1.75rem 1.4rem 1.5rem;
  border: 1px solid var(--panel-border);
  border-radius: var(--radius);
  background: rgba(18, 16, 28, 0.96);
  box-shadow: var(--shadow), 0 0 30px rgba(var(--accent-rgb), 0.15);
  animation: rise 0.35s ease both;
}

.secret-mode__copy {
  display: flex;
  flex-direction: column;
  gap: 1.15rem;
}

.secret-mode__warning {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.98rem;
  line-height: 1.55;
  text-align: center;
}

.secret-mode__warning--accent {
  color: #e24a62;
}

.secret-mode__actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.35rem;
}

.secret-mode__actions .btn {
  min-width: 7.5rem;
}

.btn--secret-activate {
  background: transparent;
  color: #e24a62;
  border: 1.5px solid #e24a62;
  box-shadow: none;
  transition: background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.btn--secret-activate:hover,
.btn--secret-activate:focus-visible {
  background: rgba(226, 74, 98, 0.18);
  color: #ff7b8a;
  border-color: #ff7b8a;
  box-shadow: 0 0 16px rgba(226, 74, 98, 0.45), 0 0 28px rgba(214, 58, 82, 0.22);
}

.partys-empty {
  position: relative;
  z-index: 1;
  margin: 1rem 1.25rem 0;
  color: var(--muted);
  text-align: center;
  font-weight: 500;
}

.partys-page .bottom-nav__split,
.home-page .bottom-nav__split,
.visibility-page .bottom-nav__split,
.pro-page .bottom-nav__split,
.ads-page .bottom-nav__split,
.saved-shorts-page .bottom-nav__split,
.party-form__footer .bottom-nav__split {
  pointer-events: auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: min(100%, 22rem);
  min-height: 3rem;
  border: 1px solid rgba(17, 17, 17, 0.18);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.14);
  overflow: hidden;
}

.partys-page .partys-saved__split.bottom-nav__split--triple,
.home-page .bottom-nav__split--triple {
  grid-template-columns: 1fr 1fr 1fr;
  width: min(100%, 28rem);
}

.home-page .bottom-nav__split--triple .bottom-nav__split-side {
  font-size: 0.82rem;
  line-height: 1.2;
  padding: 0.75rem 0.45rem;
}

.home-page .bottom-nav__split--triple .bottom-nav__split-side:not(:last-child) {
  border-right: 1px solid rgba(17, 17, 17, 0.18);
}

.partys-page .bottom-nav__split-side,
.home-page .bottom-nav__split-side,
.visibility-page .bottom-nav__split-side,
.pro-page .bottom-nav__split-side,
.ads-page .bottom-nav__split-side,
.saved-shorts-page .bottom-nav__split-side,
.party-form__footer .bottom-nav__split-side {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  padding: 0.75rem 0.55rem;
  border: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  white-space: normal;
  overflow-wrap: anywhere;
  cursor: pointer;
  transition: background 0.2s ease;
}

.partys-page .bottom-nav__split-side:first-child,
.home-page .bottom-nav__split-side:first-child,
.visibility-page .bottom-nav__split-side:first-child,
.pro-page .bottom-nav__split-side:first-child,
.ads-page .bottom-nav__split-side:first-child,
.saved-shorts-page .bottom-nav__split-side:first-child,
.party-form__footer .bottom-nav__split-side:first-child {
  border-right: 1px solid rgba(17, 17, 17, 0.18);
}

.partys-page .bottom-nav__split-side:hover,
.home-page .bottom-nav__split-side:hover,
.visibility-page .bottom-nav__split-side:hover,
.pro-page .bottom-nav__split-side:hover,
.ads-page .bottom-nav__split-side:hover,
.saved-shorts-page .bottom-nav__split-side:hover,
.party-form__footer .bottom-nav__split-side:hover {
  background: #f7f7f7;
}

.partys-page .bottom-nav__split-side:active,
.home-page .bottom-nav__split-side:active,
.visibility-page .bottom-nav__split-side:active,
.pro-page .bottom-nav__split-side:active,
.ads-page .bottom-nav__split-side:active,
.saved-shorts-page .bottom-nav__split-side:active,
.party-form__footer .bottom-nav__split-side:active {
  background: #efefef;
}

.partys-avatar-wrap {
  position: fixed;
  top: max(0.7rem, env(safe-area-inset-top, 0px));
  right: max(0.7rem, env(safe-area-inset-right, 0px));
  z-index: 12;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.partys-avatar-wrap .partys-avatar {
  position: static;
}

.partys-avatar {
  position: fixed;
  top: max(0.7rem, env(safe-area-inset-top, 0px));
  right: max(0.7rem, env(safe-area-inset-right, 0px));
  z-index: 12;
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  overflow: hidden;
  border: 2px solid #fff;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28);
  color: #fff;
  text-decoration: none;
}

.partys-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.partys-avatar__letter {
  font-family: var(--font-display);
  font-size: 1.35rem;
  line-height: 1;
  letter-spacing: 0.02em;
}

.partys-hero {
  position: relative;
  z-index: 1;
  display: grid;
  align-content: start;
  justify-items: center;
  text-align: center;
  padding: max(12vh, calc(4.4rem + env(safe-area-inset-top, 0px))) 1.5rem 1.5rem;
  animation: rise 0.55s ease both;
}

.profile-photo-page {
  overflow: hidden;
  background: #000;
  touch-action: none;
  -webkit-touch-callout: none;
  user-select: none;
}

.profile-photo__stage {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  background: #000;
  touch-action: none;
  -webkit-user-drag: none;
  user-select: none;
}

.profile-photo__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #000;
  touch-action: none;
  -webkit-user-drag: none;
  user-select: none;
  pointer-events: auto;
}

.profile-photo__letter {
  font-family: var(--font-display);
  font-size: clamp(6rem, 28vw, 12rem);
  line-height: 1;
  color: #fff;
}

.profile-photo__bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 6;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 1.15rem calc(1.15rem + env(safe-area-inset-bottom, 0px));
  pointer-events: none;
}

.profile-photo__btn {
  pointer-events: auto;
  min-height: 2.75rem;
  padding: 0.65rem 1.1rem;
  border: 0;
  border-radius: 14px;
  background: rgba(0, 0, 0, 0.38);
  color: #fff;
  font: inherit;
  font-weight: 700;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.55);
  cursor: pointer;
}

.profile-photo__camera {
  position: fixed;
  inset: 0;
  z-index: 20;
  background: #000;
}

.profile-photo__camera[hidden] {
  display: none !important;
}

.profile-photo__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scaleX(-1);
}

.profile-photo__guide {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

.profile-photo__guide-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(72vmin, calc(100vw - 2.5rem), calc(100vh - 12rem));
  height: min(72vmin, calc(100vw - 2.5rem), calc(100vh - 12rem));
  transform: translate(-50%, -50%);
  border: 2px solid rgba(255, 255, 255, 0.95);
  border-radius: 50%;
  box-shadow: 0 0 0 999px rgba(0, 0, 0, 0.52);
}

.profile-photo__shutter {
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: calc(1.35rem + env(safe-area-inset-bottom, 0px));
  width: 4.2rem;
  height: 4.2rem;
  transform: translateX(-50%);
  border: 4px solid #fff;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.28);
  cursor: pointer;
}

.profile-photo__camera-close {
  position: absolute;
  z-index: 3;
  top: max(0.7rem, env(safe-area-inset-top, 0px));
  right: max(0.7rem, env(safe-area-inset-right, 0px));
  width: 2.75rem;
  height: 2.75rem;
  border: 0;
  background: transparent;
  color: #fff;
  font-size: 2rem;
  line-height: 1;
  cursor: pointer;
}

.partys-title {
  margin: 0;
  max-width: 18ch;
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 8vw, 3.6rem);
  letter-spacing: 0.03em;
  line-height: 1.05;
  color: #111111;
}

.chats-page,
.shorts-page {
  display: flex;
  flex-direction: column;
  touch-action: pan-y;
}

.shorts-hero {
  position: relative;
  z-index: 5;
  display: grid;
  justify-items: center;
  gap: 1.5rem;
  width: min(100%, 28rem);
  margin: 0 auto;
  padding: 1.5rem 1.25rem 1.25rem;
  animation: rise 0.55s ease both;
}

html:has(.shorts-page--feed),
body:has(.shorts-page--feed) {
  height: 100%;
  max-height: 100%;
  overflow: hidden;
}

.shorts-page.shorts-page--feed {
  min-height: 0;
  height: var(--shorts-vh, 100dvh);
  max-height: var(--shorts-vh, 100dvh);
  overflow: hidden;
  background: #000;
  /* Full-bleed Shorts; Overlays nutzen eigene safe-area-Insets */
  padding-left: 0;
  padding-right: 0;
}

.shorts-page--feed .shorts-feed {
  flex: 1 1 auto;
  min-height: 0;
}

.shorts-page--feed .home-backdrop {
  display: none;
}

.shorts-feed {
  position: relative;
  z-index: 1;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  scroll-snap-type: y mandatory;
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
  background: #000;
  scrollbar-width: none;
}

.shorts-feed::-webkit-scrollbar {
  display: none;
}

.shorts-slide[data-shorts-public]:not([data-shorts-unlocked]) {
  display: none;
}

.shorts-slide {
  position: relative;
  height: var(--shorts-vh, 100dvh);
  min-height: 0;
  max-height: var(--shorts-vh, 100dvh);
  scroll-snap-align: start;
  scroll-snap-stop: always;
  overflow: hidden;
  background: #000;
}

.shorts-slide--ad.is-empty {
  display: none;
}

.shorts-slide--ad .shorts-slide__media video,
.shorts-slide--ad .shorts-slide__media img {
  object-fit: contain;
}

.shorts-slide__ad-label {
  position: absolute;
  top: max(1rem, env(safe-area-inset-top, 0px));
  left: max(1rem, env(safe-area-inset-left, 0px));
  z-index: 4;
  margin: 0;
  padding: 0.28rem 0.55rem;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.shorts-slide__ad-skip {
  z-index: 5;
}

.shorts-slide__media {
  /* Maximal groß: UI liegt als Overlay darüber, nicht in reserviertem Rand */
  position: absolute;
  inset: 0;
  z-index: 0;
}

.shorts-slide__media img,
.shorts-slide__media video {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  object-fit: contain;
  object-position: center center;
  background: transparent;
  -webkit-user-drag: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  touch-action: pan-y;
}

.shorts-slide--live .shorts-slide__media {
  background: #07070c;
}

.shorts-slide--live .shorts-slide__media video {
  object-fit: cover;
  background: #050508;
}

.shorts-slide--live:not(.is-remote) .shorts-slide__media video {
  transform: scaleX(-1);
}

.shorts-live-badge {
  position: absolute;
  top: 0.75rem;
  left: 3.6rem;
  z-index: 3;
  padding: 0.18rem 0.5rem;
  border-radius: 6px;
  background: #e11d2e;
  color: #fff;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  pointer-events: none;
}

.shorts-live-label {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  color: rgba(255, 255, 255, 0.82);
  font-size: 1.05rem;
  font-weight: 600;
  pointer-events: none;
}

.shorts-slide--live.is-playing .shorts-live-label {
  display: none;
}

.shorts-slide--live .party-live__play {
  z-index: 5;
}

.shorts-slide__scrim {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 42%;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.62) 100%);
}

.page-back,
.shorts-back {
  position: fixed;
  top: max(0.7rem, env(safe-area-inset-top, 0px));
  left: max(0.7rem, env(safe-area-inset-left, 0px));
  z-index: 12;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 0;
  background: transparent;
  color: #fff;
  text-decoration: none;
  filter: drop-shadow(0 1px 6px rgba(0, 0, 0, 0.55));
}

.shorts-search-open {
  position: fixed;
  top: max(0.7rem, env(safe-area-inset-top, 0px));
  right: max(0.7rem, env(safe-area-inset-right, 0px));
  z-index: 12;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: #fff;
  cursor: pointer;
  filter: drop-shadow(0 1px 6px rgba(0, 0, 0, 0.55));
}

.shorts-search-open svg {
  width: 1.45rem;
  height: 1.45rem;
}

.page-back svg,
.shorts-back svg {
  width: 1.55rem;
  height: 1.55rem;
}

.shorts-page--comments .shorts-back,
.shorts-page--comments .shorts-search-open,
.shorts-page--comments .shorts-slide__friends,
.shorts-page--comments .shorts-slide__social {
  visibility: hidden;
}

/* Shorts search page */
.shorts-search-page {
  min-height: 100vh;
  min-height: 100dvh;
  padding: max(0.85rem, env(safe-area-inset-top, 0px)) 0.85rem 2rem;
  box-sizing: border-box;
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(90, 70, 140, 0.28), transparent 55%),
    #0c0b12;
  color: #f4f2f8;
}

.shorts-search-bar {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  width: min(40rem, 100%);
  margin: 0 auto 1rem;
  padding: 0.3rem 0.45rem 0.3rem 0.35rem;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  background: #16141f;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35);
  box-sizing: border-box;
}

.shorts-search-bar__field {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 0.1rem;
}

.shorts-search-bar__back {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 10px;
  color: #b8b4c4;
  text-decoration: none;
  background: transparent;
  z-index: 2;
}

.shorts-search-bar__back svg {
  width: 1.15rem;
  height: 1.15rem;
  display: block;
}

.shorts-search-bar__back:hover,
.shorts-search-bar__back:focus-visible {
  color: #f0eef6;
  background: rgba(255, 255, 255, 0.06);
}

.shorts-search-bar__ghost {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  padding: 0.35rem 2.2rem 0.35rem 2.15rem;
  overflow: hidden;
  white-space: pre;
  pointer-events: none;
  font: inherit;
  font-size: 1rem;
  line-height: 1.35;
  z-index: 0;
}

.shorts-search-bar__ghost-typed {
  color: transparent;
  flex: 0 0 auto;
}

.shorts-search-bar__ghost-rest {
  color: rgba(180, 176, 194, 0.72);
  pointer-events: auto;
  cursor: text;
}

.shorts-search-bar__input {
  position: relative;
  z-index: 1;
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
  margin: 0;
  padding: 0.35rem 0.2rem;
  border: 0;
  background: transparent;
  color: #fff;
  font: inherit;
  font-size: 1rem;
  line-height: 1.35;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
}

.shorts-search-bar__input::placeholder {
  color: rgba(255, 255, 255, 0.45);
}

.shorts-search-bar__input::-webkit-search-decoration,
.shorts-search-bar__input::-webkit-search-cancel-button {
  display: none;
}

.shorts-search-bar__clear {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.85rem;
  height: 1.85rem;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 999px;
  color: #8b8798;
  font-size: 1.35rem;
  line-height: 1;
  background: transparent;
  cursor: pointer;
  z-index: 2;
}

.shorts-search-bar__clear[hidden] {
  display: none !important;
}

.shorts-search-bar__clear:hover,
.shorts-search-bar__clear:focus-visible {
  color: #c9c5d4;
  background: rgba(255, 255, 255, 0.06);
}

.shorts-search-empty {
  width: min(40rem, 100%);
  margin: 1.5rem auto;
  text-align: center;
  color: rgba(244, 242, 248, 0.55);
}

.shorts-search-results.party-media__grid {
  width: min(40rem, 100%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.45rem;
}

.shorts-search-results .party-media__item {
  position: relative;
  margin: 0;
  aspect-ratio: 9 / 16;
  border-radius: 10px;
  overflow: hidden;
  background: #1a1824;
  cursor: pointer;
}

.shorts-search-results .party-media__item img,
.shorts-search-results .party-media__item video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
}

.shorts-search-results .party-media__item video {
  background: #121018;
}

.shorts-search-results .shorts-search-tile__live {
  position: absolute;
  left: 0.4rem;
  top: 0.4rem;
  z-index: 1;
  padding: 0.15rem 0.4rem;
  border-radius: 6px;
  background: rgba(220, 40, 60, 0.92);
  color: #fff;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.shorts-slide--offline {
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.shorts-offline-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 2rem;
  text-align: center;
  color: #fff;
}

.shorts-offline-wifi {
  width: 4.5rem;
  height: 4.5rem;
  color: #fff;
}

.shorts-offline-text {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.shorts-offline-arrow {
  position: fixed;
  left: 50%;
  top: 50%;
  z-index: 12000;
  width: 4.25rem;
  height: 4.25rem;
  margin: 0;
  padding: 0.55rem;
  border-radius: 999px;
  color: #fff;
  background: rgba(0, 0, 0, 0.55);
  transform: translate(-50%, -50%) scale(0.86);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease;
}

.shorts-offline-arrow svg {
  width: 100%;
  height: 100%;
  display: block;
}

.shorts-offline-arrow.is-show {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.is-offline-denied {
  color: #ff3b30 !important;
  fill: #ff3b30;
  filter: drop-shadow(0 0 8px rgba(255, 59, 48, 0.65));
  transition: color 0.15s ease, filter 0.15s ease;
}

.share-overlay__offline-msg {
  list-style: none;
  margin: 0.35rem 0 0.15rem;
  padding: 0.85rem 0.4rem;
  text-align: center;
  color: #ff3b30;
  font-weight: 700;
  font-size: 1.02rem;
  letter-spacing: 0.01em;
}

.shorts-search-results .shorts-search-tile__meta {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 1.4rem 0.4rem 0.4rem;
  background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.72));
  color: #fff;
  font-size: 0.68rem;
  line-height: 1.25;
  pointer-events: none;
}

@media (max-width: 420px) {
  .shorts-search-results.party-media__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.shorts-slide__friends {
  position: absolute;
  top: max(0.7rem, env(safe-area-inset-top, 0px));
  left: 50%;
  z-index: 6;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.4rem 0.9rem;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 999px;
  background: rgba(10, 8, 16, 0.52);
  color: #fff;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  cursor: pointer;
  transform: translateX(-50%);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
}

.shorts-slide__friends:active {
  transform: translateX(-50%) scale(0.97);
}

.shorts-slide__social {
  position: absolute;
  left: max(1rem, env(safe-area-inset-left, 0px));
  bottom: calc(7.05rem + env(safe-area-inset-bottom, 0px));
  z-index: 4;
  display: inline-grid;
  place-items: center;
  width: 3.15rem;
  height: 3.15rem;
  padding: 0;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.85);
  background:
    radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.22), transparent 55%),
    rgba(8, 12, 22, 0.45);
  color: #fff;
  cursor: pointer;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.28),
    0 0 12px rgba(255, 255, 255, 0.35),
    inset 0 0 10px rgba(255, 255, 255, 0.1);
}

.shorts-slide__social-icon {
  display: grid;
  place-items: center;
  width: 1.55rem;
  height: 1.55rem;
  filter: drop-shadow(0 0 4px currentColor) drop-shadow(0 0 10px currentColor);
}

.shorts-slide__social-icon svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}

.shorts-slide__social:active {
  transform: scale(0.96);
}

.shorts-slide__actions {
  position: absolute;
  right: max(0.7rem, env(safe-area-inset-right, 0px));
  bottom: calc(2.1rem + env(safe-area-inset-bottom, 0px));
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.05rem;
}

.shorts-slide__avatar-wrap {
  position: relative;
  width: 3rem;
  height: 3rem;
  margin-bottom: 0.45rem;
  flex: 0 0 auto;
  overflow: visible;
  z-index: 5;
  isolation: isolate;
}

.shorts-slide__avatar {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid #fff;
  background: var(--accent);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
  color: #fff;
  text-decoration: none;
}

.shorts-slide__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.shorts-slide__avatar-letter {
  font-family: var(--font-display);
  font-size: 1.35rem;
  line-height: 1;
  letter-spacing: 0.02em;
}

.shorts-slide__follow-badge {
  position: absolute;
  left: 50%;
  bottom: -0.28rem;
  z-index: 10;
  display: grid;
  place-items: center;
  width: 1.28rem;
  height: 1.28rem;
  margin: 0;
  padding: 0;
  border: 2px solid #fff;
  border-radius: 50%;
  background: #ff5c63;
  color: #fff;
  line-height: 0;
  transform: translateX(-50%) scale(1);
  transform-origin: center center;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
  pointer-events: auto;
  transition:
    transform 0.34s cubic-bezier(0.2, 0.85, 0.2, 1),
    background 0.22s ease,
    color 0.22s ease,
    box-shadow 0.22s ease,
    opacity 0.3s ease;
}

/* Größere Touch-Fläche — sonst trifft man den Avatar und öffnet die Party */
.shorts-slide__follow-badge::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 2.85rem;
  height: 2.85rem;
  transform: translate(-50%, -50%);
  border-radius: 50%;
}

.shorts-slide__follow-badge-icon {
  grid-area: 1 / 1;
  width: 0.7rem;
  height: 0.7rem;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.shorts-slide__follow-badge-icon--check {
  display: none;
}

.shorts-slide__follow-badge[hidden] {
  display: none !important;
}

.shorts-slide__follow-badge:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

/* Folgen: hellgrün + weißes Häkchen, nach innen verschwinden */
.shorts-slide__follow-badge.is-follow-anim {
  background: #39ff88;
  color: #fff;
  box-shadow:
    0 0 8px rgba(57, 255, 136, 0.95),
    0 0 18px rgba(57, 255, 136, 0.55);
}

.shorts-slide__follow-badge.is-follow-anim .shorts-slide__follow-badge-icon--plus {
  display: none;
}

.shorts-slide__follow-badge.is-follow-anim .shorts-slide__follow-badge-icon--check {
  display: block;
}

.shorts-slide__follow-badge.is-follow-anim.loc-phase-shrink,
.shorts-slide__follow-badge.is-follow-anim.loc-phase-restore {
  transform: translateX(-50%) scale(0);
  opacity: 0;
  transition-timing-function: ease-in;
}

/* Entfolgen: leuchtend rot, von innen nach außen */
.shorts-slide__follow-badge.is-unfollow-anim {
  background: #ff3b4a;
  color: #fff;
  box-shadow:
    0 0 8px rgba(255, 59, 74, 0.95),
    0 0 18px rgba(255, 59, 74, 0.55);
  transform: translateX(-50%) scale(0);
  opacity: 0;
}

.shorts-slide__follow-badge.is-unfollow-anim.loc-phase-glow {
  transform: translateX(-50%) scale(0.2);
  opacity: 0.5;
}

.shorts-slide__follow-badge.is-unfollow-anim.loc-phase-mark,
.shorts-slide__follow-badge.is-unfollow-anim.loc-phase-hold,
.shorts-slide__follow-badge.is-unfollow-anim.loc-phase-shrink {
  transform: translateX(-50%) scale(1);
  opacity: 1;
}

.shorts-slide__follow-badge.is-unfollow-anim.loc-phase-restore {
  background: #ff5c63;
  color: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
  transform: translateX(-50%) scale(1);
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .shorts-slide__follow-badge {
    transition: none !important;
  }
}

.shorts-slide__action {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.18rem;
}

.shorts-slide__btn {
  appearance: none;
  display: grid;
  place-items: center;
  width: 2.85rem;
  height: 2.85rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #fff;
  cursor: pointer;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.55));
}

.shorts-slide__count {
  min-width: 1.2ch;
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.01em;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.75);
  pointer-events: none;
}

.shorts-slide__faces {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 1.2rem;
  margin-top: 0.08rem;
  pointer-events: none;
}

.shorts-slide__face {
  position: relative;
  display: grid;
  place-items: center;
  width: 1.08rem;
  height: 1.08rem;
  border-radius: 50%;
  overflow: hidden;
  border: 1.5px solid #fff;
  background: var(--accent);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
  color: #fff;
  flex: 0 0 auto;
}

.shorts-slide__face img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.shorts-slide__face-letter {
  font-family: var(--font-display);
  font-size: 0.58rem;
  line-height: 1;
  letter-spacing: 0.02em;
}

.shorts-slide__faces--1 .shorts-slide__face {
  width: 1.22rem;
  height: 1.22rem;
}

.shorts-slide__faces--1 .shorts-slide__face-letter {
  font-size: 0.68rem;
}

.shorts-slide__faces--2 .shorts-slide__face:nth-child(1) {
  z-index: 1;
  transform: translateX(0.08rem) rotate(-12deg);
}

.shorts-slide__faces--2 .shorts-slide__face:nth-child(2) {
  z-index: 2;
  margin-left: -0.42rem;
  transform: translateX(-0.08rem) rotate(12deg);
}

.shorts-slide__faces--3 .shorts-slide__face:nth-child(1) {
  z-index: 1;
  transform: rotate(-16deg);
}

.shorts-slide__faces--3 .shorts-slide__face:nth-child(2) {
  z-index: 2;
  margin-left: -0.4rem;
}

.shorts-slide__faces--3 .shorts-slide__face:nth-child(3) {
  z-index: 3;
  margin-left: -0.4rem;
  transform: rotate(16deg);
}

.shorts-slide__btn svg {
  width: 2.05rem;
  height: 2.05rem;
}

.shorts-slide__like svg {
  fill: #fff;
  transition: fill 0.15s ease, transform 0.15s ease;
}

.shorts-slide__like.is-liked svg {
  fill: #ff2d55;
}

.shorts-slide__like.is-liked {
  animation: shorts-like-pop 0.28s ease;
}

@keyframes shorts-like-pop {
  0% {
    transform: scale(1);
  }
  45% {
    transform: scale(1.22);
  }
  100% {
    transform: scale(1);
  }
}

.shorts-slide__meta {
  position: absolute;
  left: max(1rem, env(safe-area-inset-left, 0px));
  right: 5.25rem;
  bottom: calc(1.35rem + env(safe-area-inset-bottom, 0px));
  z-index: 4;
  display: grid;
  gap: 0.2rem;
  color: #fff;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.7);
  pointer-events: none;
}

.shorts-slide__distance {
  position: absolute;
  left: 50%;
  bottom: calc(0.28rem + env(safe-area-inset-bottom, 0px));
  z-index: 5;
  margin: 0;
  padding: 0.42rem 0.75rem;
  transform: translateX(-50%);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1;
  text-decoration: none;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.8);
  pointer-events: auto;
  white-space: nowrap;
  cursor: pointer;
}

.shorts-slide__link-btn {
  position: absolute;
  left: 50%;
  bottom: calc(2.15rem + env(safe-area-inset-bottom, 0px));
  z-index: 5;
  display: grid;
  place-items: center;
  width: 3.35rem;
  height: 3.35rem;
  margin: 0;
  padding: 0;
  transform: translateX(-50%);
  border-radius: 0.85rem;
  background: #ffe500;
  color: #111;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  line-height: 1;
  text-decoration: none;
  text-shadow: none;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
  pointer-events: auto;
  -webkit-tap-highlight-color: transparent;
}

.shorts-slide__link-btn[hidden] {
  display: none !important;
}

.shorts-slide__link-btn:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}

.shorts-page--comments .shorts-slide__link-btn {
  visibility: hidden;
}

.shorts-links {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: grid;
  align-items: end;
  justify-items: center;
  padding: 0;
  background: rgba(0, 0, 0, 0.45);
}

.shorts-links[hidden] {
  display: none !important;
}

.shorts-links__dismiss {
  position: absolute;
  inset: 0;
  border: 0;
  margin: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
}

.shorts-links__sheet {
  position: relative;
  z-index: 1;
  width: min(100%, 28rem);
  max-height: min(72vh, 34rem);
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0.55rem 0.9rem calc(0.95rem + env(safe-area-inset-bottom, 0px));
  border-radius: 1.1rem 1.1rem 0 0;
  background: #12121a;
  color: #fff;
  box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.45);
}

.shorts-links__handle {
  width: 2.4rem;
  height: 0.28rem;
  margin: 0.15rem auto 0.7rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.28);
}

.shorts-links__header {
  margin: 0 0 0.55rem;
}

.shorts-links__title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.shorts-links__list {
  list-style: none;
  margin: 0;
  padding: 0;
  overflow: auto;
  display: grid;
  gap: 0.35rem;
  flex: 1 1 auto;
  min-height: 0;
}

.shorts-links__item {
  margin: 0;
}

.shorts-links__row {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  width: 100%;
  margin: 0;
  padding: 0.78rem 0.85rem;
  border: 0;
  border-radius: 0.75rem;
  background: rgba(255, 255, 255, 0.06);
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.shorts-links__row:hover,
.shorts-links__row:focus-visible {
  background: rgba(255, 229, 0, 0.16);
  outline: none;
}

.shorts-links__index {
  flex: 0 0 auto;
  min-width: 1.35rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: #ffe500;
}

.shorts-links__host {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.shorts-links__cancel {
  display: block;
  width: 100%;
  margin: 0.7rem 0 0;
  padding: 0.85rem 1rem;
  border: 0;
  border-radius: 0.85rem;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
}

.shorts-links__cancel:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

.shorts-page--links .shorts-back,
.shorts-page--links .shorts-slide__link-btn,
.shorts-page--links .shorts-slide__distance {
  visibility: hidden;
}

.shorts-slide__distance[hidden] {
  display: none !important;
}

.shorts-page--comments .shorts-slide__distance {
  visibility: hidden;
}

.shorts-slide__party,
.shorts-slide__user,
.shorts-slide__coords {
  pointer-events: auto;
  color: inherit;
  text-decoration: none;
}

.shorts-slide__party {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 5vw, 1.85rem);
  letter-spacing: 0.03em;
  line-height: 1.05;
}

.shorts-slide__user,
.shorts-slide__coords {
  margin: 0;
  position: relative;
  z-index: 3;
  display: inline-block;
  justify-self: start;
  width: max-content;
  max-width: 100%;
  font-size: 0.95rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: rgba(255, 255, 255, 0.88);
}

.shorts-slide__user.party-card__location--follow,
.shorts-slide__coords.party-card__location--follow {
  color: rgba(255, 255, 255, 0.88);
}

.shorts-slide__user .party-card__location-mark,
.shorts-slide__coords .party-card__location-mark {
  left: 50%;
  top: 50%;
  color: inherit;
}

.shorts-slide__party:focus-visible,
.shorts-slide__user:focus-visible,
.shorts-slide__coords:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}

.shorts-page--comments .shorts-feed {
  overflow: hidden;
  pointer-events: none;
}

.shorts-comments {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  flex-direction: column;
}

.shorts-comments[hidden] {
  display: none !important;
}

.shorts-comments__dismiss {
  flex: 0 0 38%;
  width: 100%;
  border: 0;
  padding: 0;
  background: rgba(0, 0, 0, 0.28);
  cursor: pointer;
}

.shorts-comments__sheet {
  flex: 1 1 62%;
  display: flex;
  flex-direction: column;
  min-height: 0;
  border-radius: 22px 22px 0 0;
  background: rgba(18, 16, 28, 0.98);
  box-shadow: 0 -16px 40px rgba(0, 0, 0, 0.45);
  color: var(--ink);
  animation: shorts-comments-up 0.28s ease;
}

@keyframes shorts-comments-up {
  from {
    transform: translateY(18%);
  }
  to {
    transform: translateY(0);
  }
}

.shorts-comments__handle {
  flex: 0 0 auto;
  width: 2.4rem;
  height: 0.28rem;
  margin: 0.55rem auto 0.15rem;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.28);
}

.shorts-comments__header {
  position: relative;
  z-index: 2;
  flex: 0 0 auto;
  display: grid;
  justify-items: center;
  gap: 0.15rem;
  padding: 0.35rem 1.25rem 0;
  border-bottom: 0;
  background: linear-gradient(
    180deg,
    rgba(18, 16, 28, 0.98) 0%,
    rgba(18, 16, 28, 0.98) calc(100% - 1.25rem),
    rgba(18, 16, 28, 0) 100%
  );
}

.shorts-comments__header::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1.25rem;
  pointer-events: none;
  z-index: 1;
  background: linear-gradient(
    180deg,
    rgba(18, 16, 28, 0.98) 0%,
    rgba(18, 16, 28, 0.55) 58%,
    rgba(18, 16, 28, 0) 100%
  );
}

.shorts-comments__title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
}

.shorts-comments__party {
  position: relative;
  z-index: 2;
  margin: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.25rem;
}

.shorts-comments__thread {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  align-content: start;
  gap: 0.7rem;
  margin-top: -1.25rem;
  padding: 1.35rem 1rem 0.75rem;
  overflow: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 1.25rem, #000 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 1.25rem, #000 100%);
}

.shorts-comments__thread .chat-bubble {
  max-width: min(100%, 20rem);
}

.chat-bubble--partner {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 1px rgba(var(--accent-rgb), 0.45), var(--glow);
}

.chat-bubble--partner .chat-bubble__label {
  color: var(--accent-soft);
  text-shadow: 0 0 8px rgba(var(--accent-rgb), 0.4);
}

.shorts-comments__thread .chat-bubble--partner {
  background: rgba(var(--accent-rgb), 0.16) !important;
}

.shorts-comments__empty,
.shorts-comments__error {
  margin: 1.5rem 0 0;
  text-align: center;
  color: var(--muted);
}

.shorts-comments__composer {
  flex: 0 0 auto;
  display: flex;
  align-items: flex-end;
  gap: 0.65rem;
  padding: 0.7rem 0.9rem calc(0.75rem + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(12, 10, 20, 0.96);
}

.shorts-comments__input {
  flex: 1 1 auto;
  min-height: 2.75rem;
  max-height: 6.5rem;
  resize: none;
  padding: 0.7rem 0.85rem;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--ink);
  font: inherit;
}

.shorts-comments__input:focus {
  outline: none;
  border-color: rgba(var(--accent-rgb), 0.55);
}

.shorts-comments__send {
  flex: 0 0 auto;
  min-height: 2.75rem;
  padding: 0.65rem 1rem;
  border: 0;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--accent-deep), var(--accent-soft));
  color: var(--accent-text);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.shorts-comments__send:disabled {
  opacity: 0.55;
  cursor: default;
}

.chats-hero {
  position: relative;
  z-index: 5;
  display: grid;
  justify-items: center;
  gap: 1.5rem;
  width: min(100%, 28rem);
  margin: 0 auto;
  padding: 1.5rem 1.25rem 1.25rem;
  animation: rise 0.55s ease both;
}

.chats-hero .partys-title {
  margin: 0;
}

.chats-hero__title-row {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  margin-top: 0.5rem;
  width: 100%;
}

.chats-party-btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 1px solid rgba(17, 17, 17, 0.14);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
  color: inherit;
  cursor: pointer;
  transition: transform 0.15s ease, background 0.2s ease;
}

.chats-party-btn:hover {
  background: #f7f7f7;
}

.chats-party-btn:active {
  transform: scale(0.96);
}

.chats-party-btn:focus-visible {
  outline: 2px solid rgba(var(--accent-rgb), 0.7);
  outline-offset: 2px;
}

.chats-party-btn[aria-expanded='true'] {
  background: #f0f0f0;
}

.chats-party-btn__emoji {
  display: block;
  width: 1.55rem;
  height: 1.55rem;
  object-fit: contain;
  pointer-events: none;
}

.chats-party-pop {
  position: absolute;
  top: calc(100% + 0.55rem);
  left: 50%;
  right: auto;
  z-index: 40;
  width: min(20.5rem, calc(100vw - 2rem));
  transform: translateX(-50%);
  filter: drop-shadow(0 16px 36px rgba(0, 0, 0, 0.28));
}

.chats-party-pop[hidden] {
  display: none !important;
}

.chats-party-pop__panel {
  position: relative;
  display: flex;
  flex-direction: column;
  max-height: min(26rem, 70vh);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 16px;
  background: rgba(22, 19, 34, 0.98);
  color: var(--ink, #f4f0ff);
}

.chats-party-pop__panel::before {
  content: '';
  position: absolute;
  top: -6px;
  left: 50%;
  right: auto;
  width: 12px;
  height: 12px;
  border-left: 1px solid rgba(255, 255, 255, 0.12);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(22, 19, 34, 0.98);
  transform: translateX(-50%) rotate(45deg);
}

.chats-party-pop__toolbar {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 2rem 1fr 2rem;
  align-items: center;
  gap: 0.35rem;
  padding: 0.7rem 0.7rem 0.45rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.chats-party-pop__title {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 700;
  text-align: center;
  line-height: 1.25;
}

.chats-party-pop__back,
.chats-party-pop__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: inherit;
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
}

.chats-party-pop__back[hidden] {
  visibility: hidden;
  pointer-events: none;
}

.chats-party-pop__back:hover,
.chats-party-pop__close:hover {
  background: rgba(255, 255, 255, 0.08);
}

.chats-party-pop__body {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: 0.55rem 0.55rem 0.7rem;
}

.chats-party-pop__body[hidden] {
  display: none !important;
}

.chats-party-pop__hint {
  margin: 0 0.35rem 0.55rem;
  color: rgba(244, 240, 255, 0.72);
  font-size: 0.78rem;
  line-height: 1.35;
}

.chats-party-pop__list {
  list-style: none;
  margin: 0;
  padding: 0;
  overflow: auto;
  max-height: min(18rem, 52vh);
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.chats-party-pop__item {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  width: 100%;
  min-height: 2.7rem;
  padding: 0.55rem 0.65rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s ease;
}

.chats-party-pop__item:hover {
  background: rgba(255, 255, 255, 0.08);
}

.chats-party-pop__item-main {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.12rem;
}

.chats-party-pop__item-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 650;
  font-size: 0.92rem;
}

.chats-party-pop__item-meta {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: rgba(244, 240, 255, 0.62);
  font-size: 0.74rem;
}

.chats-party-pop__item-match {
  flex: 0 0 auto;
  color: rgba(244, 240, 255, 0.78);
  font-size: 0.78rem;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
}

.chats-party-pop__partner {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 2.9rem;
  padding: 0.45rem 0.55rem 0.45rem 0.7rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
}

.chats-party-pop__partner.is-comments {
  background: rgba(88, 140, 255, 0.14);
  border-color: rgba(120, 168, 255, 0.28);
}

.chats-party-pop__partner.is-group {
  background: rgba(var(--accent-rgb), 0.12);
  border-color: rgba(var(--accent-rgb), 0.28);
}

.chats-party-pop__partner.is-selected {
  border-color: rgba(110, 231, 168, 0.45);
}

.chats-party-pop__partner-name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 650;
  font-size: 0.92rem;
}

.chats-party-pop__invite {
  position: relative;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.15rem;
  height: 2.15rem;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  color: inherit;
  cursor: pointer;
}

.chats-party-pop__invite[hidden] {
  display: inline-flex !important;
  visibility: hidden;
  pointer-events: none;
}

.chats-party-pop__invite:hover {
  background: rgba(255, 255, 255, 0.12);
}

.chats-party-pop__invite:disabled {
  opacity: 0.55;
  cursor: default;
}

.chats-party-pop__invite svg {
  width: 1.15rem;
  height: 1.15rem;
}

.chats-party-pop__invite-plus {
  position: absolute;
  right: -0.05rem;
  bottom: -0.05rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 0.85rem;
  height: 0.85rem;
  border-radius: 999px;
  background: #2ecc71;
  color: #0b1a10;
  font-size: 0.7rem;
  font-weight: 800;
  line-height: 1;
  box-shadow: 0 0 0 2px rgba(22, 19, 34, 0.98);
}

.chats-party-pop__ring {
  --match: 0;
  position: relative;
  flex: 0 0 auto;
  width: 2.35rem;
  height: 2.35rem;
}

.chats-party-pop__ring.is-selected {
  --match: 100;
}

.chats-party-pop__ring.is-selected .chats-party-pop__ring-value {
  stroke: #6ee7a8;
}

.chats-party-pop__ring.is-selected .chats-party-pop__ring-label {
  font-size: 0.95rem;
}

.chats-party-pop__ring.is-explainable {
  cursor: pointer;
}

.chats-party-pop__ring.is-explainable:hover,
.chats-party-pop__ring.is-explainable:focus-visible {
  filter: drop-shadow(0 0 8px rgba(var(--accent-rgb), 0.55));
}

.chats-party-pop__explain {
  position: absolute;
  inset: 0;
  z-index: 8;
  display: grid;
  place-items: center;
  padding: 0.85rem;
  background: rgba(6, 5, 12, 0.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.chats-party-pop__explain[hidden] {
  display: none !important;
}

.chats-party-pop__explain-panel {
  width: min(100%, 18.5rem);
  max-height: min(70dvh, 24rem);
  overflow: auto;
  padding: 0.85rem 0.95rem 1rem;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(16, 14, 24, 0.96);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
}

.chats-party-pop__explain-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.45rem;
}

.chats-party-pop__explain-title {
  margin: 0;
  font-size: 1rem;
  font-weight: 650;
}

.chats-party-pop__explain-close {
  border: 0;
  background: transparent;
  color: inherit;
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
  opacity: 0.75;
}

.chats-party-pop__explain-pct {
  margin: 0 0 0.55rem;
  color: var(--accent-light);
  font-weight: 600;
  font-size: 0.92rem;
}

.chats-party-pop__explain-list {
  margin: 0;
  padding-left: 1.1rem;
  display: grid;
  gap: 0.4rem;
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.88rem;
  line-height: 1.35;
}

.chats-party-pop__ring svg {
  display: block;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.chats-party-pop__ring-track {
  fill: none;
  stroke: rgba(160, 160, 170, 0.45);
  stroke-width: 3.2;
}

.chats-party-pop__ring-value {
  fill: none;
  stroke: #6ee7a8;
  stroke-width: 3.2;
  stroke-linecap: round;
  stroke-dasharray: 100;
  stroke-dashoffset: calc(100 - var(--match));
  transition: stroke-dashoffset 0.35s ease;
}

.chats-party-pop__ring-label {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.62rem;
  font-weight: 750;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  color: rgba(244, 240, 255, 0.92);
}

.chats-party-pop__send-row {
  margin-top: 0.55rem;
  padding: 0 0.15rem;
}

.chats-party-pop__send-row[hidden] {
  display: none !important;
}

.chats-party-pop__send-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 2.7rem;
  padding: 0.65rem 1rem;
  border: 1px solid rgba(110, 231, 168, 0.35);
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(46, 204, 113, 0.28), rgba(110, 231, 168, 0.18));
  color: #eafff2;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.chats-party-pop__send-btn:hover {
  background: linear-gradient(135deg, rgba(46, 204, 113, 0.38), rgba(110, 231, 168, 0.26));
}

.chats-party-pop__send-btn:disabled {
  opacity: 0.6;
  cursor: default;
}

.chats-party-pop__compose-input {
  width: 100%;
  min-height: 6.5rem;
  margin: 0 0 0.55rem;
  padding: 0.75rem 0.85rem;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.05);
  color: inherit;
  font: inherit;
  resize: vertical;
}

.chats-party-pop__compose-input:focus {
  outline: 2px solid rgba(110, 231, 168, 0.45);
  outline-offset: 1px;
}

.chat-list__row {
  position: relative;
}

.chats-party-pop__empty,
.chats-party-pop__status {
  margin: 0.55rem 0.35rem 0;
  color: rgba(244, 240, 255, 0.68);
  font-size: 0.82rem;
  line-height: 1.35;
}

.chats-party-pop__empty[hidden],
.chats-party-pop__status[hidden] {
  display: none !important;
}

.user-search {
  position: relative;
  z-index: 6;
  width: 100%;
}

.user-search__field {
  display: flex;
  align-items: center;
  gap: 0.15rem;
  min-width: 0;
  max-width: 100%;
  min-height: 3rem;
  padding: 0.35rem 0.4rem 0.35rem 0.55rem;
  border: 1px solid rgba(17, 17, 17, 0.18);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08);
}

.user-search__new-dot {
  flex: 0 0 auto;
  width: 0.55rem;
  height: 0.55rem;
  margin: 0 0.2rem 0 0.15rem;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: #ff3b4a;
  box-shadow: 0 0 0 2px rgba(255, 59, 74, 0.22), 0 0 10px rgba(255, 59, 74, 0.45);
  cursor: pointer;
}

.user-search__new-dot[hidden] {
  display: none !important;
}

.user-search__prefix {
  flex: 0 0 auto;
  color: var(--ink);
  font-weight: 700;
  font-size: 0.95rem;
  user-select: none;
  pointer-events: none;
}

.user-search__input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 0.95rem;
  outline: none;
}

.user-search__clear {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.1rem;
  height: 2.1rem;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: #111111;
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
}

.user-search__clear[hidden] {
  display: none !important;
}

.user-search__clear:hover {
  background: rgba(17, 17, 17, 0.08);
}

.user-search__camera {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.45rem;
  height: 2.45rem;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
}

.user-search__camera:hover {
  background: rgba(17, 17, 17, 0.06);
}

.user-search__camera svg {
  width: 1.25rem;
  height: 1.25rem;
}

.user-search__suggest {
  position: absolute;
  top: calc(100% + 0.4rem);
  left: 0;
  right: 0;
  z-index: 30;
  margin: 0;
  padding: 0.35rem 0;
  list-style: none;
  border: 1px solid rgba(17, 17, 17, 0.14);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.18);
  max-height: 16rem;
  overflow: auto;
}

.user-search__suggest[hidden] {
  display: none !important;
}

.user-search__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.55rem 0.75rem;
}

.user-search__item-dot {
  flex: 0 0 auto;
  width: 0.45rem;
  height: 0.45rem;
  margin-right: -0.15rem;
  border-radius: 999px;
  background: #ff3b4a;
  box-shadow: 0 0 8px rgba(255, 59, 74, 0.4);
}

.user-search__item-dot[hidden] {
  display: none !important;
}

.user-search__name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--ink);
  font-weight: 600;
  font-size: 0.95rem;
}

.user-search__chat {
  flex: 0 0 auto;
  padding: 0.4rem 0.75rem;
  border: 1px solid rgba(17, 17, 17, 0.18);
  border-radius: 10px;
  background: #111;
  color: #fff;
  font: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
}

.user-search__chat:hover {
  background: #2a2a2a;
}

.user-search__empty {
  margin: 0;
  padding: 0.75rem 0.9rem;
  color: var(--muted);
  font-size: 0.9rem;
}

.chat-list {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 0.75rem;
  width: min(100%, 28rem);
  margin: 0 auto;
  padding: 0.25rem 1.25rem calc(6.5rem + env(safe-area-inset-bottom));
}

.chat-list__row {
  position: relative;
  z-index: 1;
}

.chat-list__row.is-menu-open {
  z-index: 20;
}

.chat-list__item {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  min-width: 0;
  max-width: 100%;
  padding: 1rem 1.1rem;
  border: 1px solid rgba(17, 17, 17, 0.14);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08);
  text-decoration: none;
  color: inherit;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
}

.chat-list__row.is-menu-open .chat-list__item {
  border-color: rgba(var(--accent-rgb), 0.35);
}

.chat-list__menu {
  position: absolute;
  top: calc(100% - 0.15rem);
  left: 0.55rem;
  right: 0.55rem;
  z-index: 30;
  display: grid;
  gap: 0.1rem;
  padding: 0.35rem;
  border-radius: 14px;
  border: 1px solid rgba(17, 17, 17, 0.12);
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.22);
}

.chat-list__menu[hidden] {
  display: none !important;
}

.chat-list__menu-item {
  width: 100%;
  min-height: 2.45rem;
  padding: 0.55rem 0.85rem;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}

.chat-list__menu-item:hover {
  background: rgba(17, 17, 17, 0.05);
}

.chat-list__menu-item--danger {
  color: #d11a2a;
}

.chat-list__name {
  min-width: 0;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chat-list__item.is-unread {
  border-width: 3px;
  border-color: #111111;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12);
}

.chat-list__meta {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.45rem;
  min-width: 2rem;
}

.chat-list__pin {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.1rem;
  height: 1.1rem;
  color: var(--ink-soft);
}

.chat-list__pin[hidden] {
  display: none !important;
}

.chat-list__pin svg {
  width: 1.05rem;
  height: 1.05rem;
  display: block;
}

.chat-list__open {
  color: var(--muted);
  font-size: 0.88rem;
  font-weight: 600;
}

.chat-list__item .nav-badge {
  position: absolute;
  top: 0.45rem;
  right: 0.45rem;
}

.nav-badge--dot {
  width: 0.7rem;
  height: 0.7rem;
  min-width: 0.7rem;
  padding: 0;
  border-radius: 50%;
  font-size: 0;
  line-height: 0;
}

.chat-list__section-title {
  margin: 0.35rem 0.2rem 0.15rem;
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--ink-soft);
  letter-spacing: 0.02em;
}

.chat-list--archived {
  margin-top: 0.5rem;
}

.nav-badge {
  position: absolute;
  top: 0.2rem;
  right: 0.2rem;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.25rem;
  height: 1.25rem;
  padding: 0 0.3rem;
  border-radius: 999px;
  background: #d12b2b;
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  line-height: 1;
  box-shadow: 0 2px 6px rgba(209, 43, 43, 0.35);
}

.chat-detail-page {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;
  max-height: 100vh;
  max-height: 100dvh;
  overflow: hidden;
}

.chat-detail__topbar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 6;
  display: grid;
  grid-template-columns: 2.6rem 1fr auto;
  align-items: center;
  gap: 0.5rem;
  padding: calc(0.75rem + env(safe-area-inset-top, 0px)) 1rem 2.75rem;
  border: 0;
  background: linear-gradient(
    180deg,
    rgba(6, 5, 12, 0.18) 0%,
    rgba(6, 5, 12, 0.08) 40%,
    rgba(6, 5, 12, 0.02) 72%,
    transparent 100%
  );
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  pointer-events: none;
}

.chat-detail__topbar > * {
  pointer-events: auto;
}

.chat-detail__back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.6rem;
  height: 2.6rem;
  border: 1px solid rgba(17, 17, 17, 0.16);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.08);
  color: var(--ink);
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
}

.chat-detail__back:hover {
  background: #fff;
}

.chat-detail__heading {
  display: grid;
  justify-items: center;
  text-align: center;
  min-width: 0;
}

.chat-detail-page--group .chat-detail__topbar {
  z-index: 20;
  overflow: visible;
}

.chat-detail__heading-wrap {
  position: relative;
  display: grid;
  justify-items: center;
  width: min(100%, 18rem);
  z-index: 12;
  overflow: visible;
}

.chat-detail__kicker {
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--muted);
  text-shadow: 0 1px 10px rgba(6, 5, 12, 0.85), 0 0 18px rgba(6, 5, 12, 0.55);
}

.chat-detail__title {
  margin: 0.2rem 0 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 6vw, 2.2rem);
  letter-spacing: 0.03em;
  line-height: 0.95;
  color: var(--ink);
  text-shadow: 0 1px 12px rgba(6, 5, 12, 0.9), 0 0 22px rgba(6, 5, 12, 0.6);
}

button.chat-detail__title--group,
button.chat-detail__title--rename {
  display: block;
  width: auto;
  max-width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  text-align: center;
  transition: text-shadow 0.25s ease, color 0.2s ease;
}

button.chat-detail__title--rename:hover {
  color: var(--accent-light);
  text-decoration: none;
}

.chat-detail__title-input {
  display: block;
  width: min(100%, 18rem);
  margin: 0 auto;
  padding: 0.12rem 0.35rem;
  border: 0;
  border-bottom: 2px solid rgba(var(--accent-rgb), 0.85);
  border-radius: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-weight: inherit;
  font-size: inherit;
  line-height: inherit;
  text-align: center;
  text-shadow: inherit;
  outline: none;
  box-shadow: 0 0 18px rgba(var(--accent-rgb), 0.25);
}

button.chat-detail__title--group:hover,
button.chat-detail__title--group[aria-expanded='true'] {
  color: var(--accent-light);
  text-decoration: none;
  text-shadow:
    0 0 12px rgba(var(--accent-rgb), 0.75),
    0 0 28px rgba(var(--accent-rgb), 0.4),
    0 1px 12px rgba(6, 5, 12, 0.9);
}

.group-members {
  position: absolute;
  top: calc(100% + 0.55rem);
  left: 50%;
  z-index: 40;
  width: min(20.5rem, calc(100vw - 2rem));
  transform: translateX(-50%);
  filter: drop-shadow(0 18px 40px rgba(0, 0, 0, 0.55));
  animation: group-members-pop 0.38s cubic-bezier(0.2, 0.9, 0.25, 1.15) both;
}

.group-members[hidden] {
  display: none !important;
}

@keyframes group-members-pop {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(-8px) scale(0.94);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0) scale(1);
  }
}

.group-members__sheet {
  position: relative;
  display: flex;
  flex-direction: column;
  max-height: min(24rem, 58vh);
  overflow: hidden;
  border: 1px solid rgba(var(--accent-rgb), 0.42);
  border-radius: 18px;
  background:
    linear-gradient(165deg, rgba(28, 16, 48, 0.94) 0%, rgba(12, 8, 24, 0.96) 55%, rgba(18, 10, 36, 0.94) 100%),
    url('/images/party-lights.jpg') center / cover no-repeat;
  background-blend-mode: darken, normal;
  color: var(--ink, #f4f0ff);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.06) inset,
    0 0 24px rgba(var(--accent-rgb), 0.35),
    0 0 48px rgba(var(--accent-rgb), 0.18),
    var(--glow-soft);
}

.group-members__sheet::before {
  content: '';
  position: absolute;
  top: -7px;
  left: 50%;
  width: 14px;
  height: 14px;
  border-left: 1px solid rgba(var(--accent-rgb), 0.42);
  border-top: 1px solid rgba(var(--accent-rgb), 0.42);
  background: rgba(22, 14, 40, 0.98);
  transform: translateX(-50%) rotate(45deg);
  box-shadow: -4px -4px 16px rgba(var(--accent-rgb), 0.25);
}

.group-members__glow {
  pointer-events: none;
  position: absolute;
  inset: -20% -10% auto;
  height: 55%;
  background:
    radial-gradient(ellipse at 30% 20%, rgba(var(--accent-mid-rgb), 0.45), transparent 55%),
    radial-gradient(ellipse at 80% 0%, rgba(255, 90, 160, 0.28), transparent 50%);
  animation: group-members-shine 3.6s ease-in-out infinite alternate;
}

@keyframes group-members-shine {
  from {
    opacity: 0.55;
    transform: translateY(0);
  }
  to {
    opacity: 1;
    transform: translateY(6px);
  }
}

.group-members__toolbar {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.95rem 0.95rem 0.6rem;
  border-bottom: 1px solid rgba(var(--accent-rgb), 0.22);
}

.group-members__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-shadow: 0 0 16px rgba(var(--accent-rgb), 0.45);
}

.group-members__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.06);
  color: inherit;
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
}

.group-members__close:hover {
  background: rgba(var(--accent-rgb), 0.22);
  border-color: rgba(var(--accent-rgb), 0.4);
  box-shadow: var(--glow-soft);
}

.group-members__list {
  position: relative;
  z-index: 1;
  list-style: none;
  margin: 0;
  padding: 0.65rem 0.7rem 0.35rem;
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  min-height: 0;
  flex: 1 1 auto;
}

.group-members__row {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  min-height: 2.75rem;
  padding: 0.5rem 0.6rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  background: linear-gradient(120deg, rgba(255, 255, 255, 0.08), rgba(var(--accent-rgb), 0.1));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.03);
  animation: rise 0.45s ease both;
}

.group-members__row:nth-child(2) { animation-delay: 0.04s; }
.group-members__row:nth-child(3) { animation-delay: 0.08s; }
.group-members__row:nth-child(4) { animation-delay: 0.12s; }
.group-members__row:nth-child(5) { animation-delay: 0.16s; }

.group-members__row:hover {
  border-color: rgba(var(--accent-rgb), 0.45);
  box-shadow: 0 0 18px rgba(var(--accent-rgb), 0.22);
}

.group-members__name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 650;
  font-size: 0.92rem;
}

.group-members__dm {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.45rem;
  height: 1.9rem;
  padding: 0 0.45rem;
  border: 1px solid rgba(var(--accent-rgb), 0.5);
  border-radius: 6px;
  background: linear-gradient(145deg, rgba(var(--accent-rgb), 0.35), rgba(var(--accent-deep), 0.45));
  color: #fff;
  font: inherit;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 0 12px rgba(var(--accent-rgb), 0.35);
}

.group-members__dm:hover {
  box-shadow: 0 0 18px rgba(var(--accent-rgb), 0.55);
  filter: brightness(1.08);
}

.group-members__dm[hidden] {
  visibility: hidden;
  pointer-events: none;
}

.group-members__leave {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(100% - 1.4rem);
  min-height: 2.75rem;
  margin: 0.45rem 0.7rem 0.9rem;
  padding: 0.65rem 1rem;
  border: 1px solid #ff4d62;
  border-radius: 12px;
  background: rgba(255, 40, 70, 0.1);
  color: #ff5c70;
  font: inherit;
  font-weight: 750;
  letter-spacing: 0.05em;
  cursor: pointer;
  box-shadow:
    0 0 12px rgba(255, 60, 90, 0.5),
    0 0 26px rgba(255, 40, 70, 0.3),
    inset 0 0 14px rgba(255, 60, 90, 0.12);
  text-shadow: 0 0 12px rgba(255, 70, 100, 0.7);
  animation: group-leave-pulse 2.2s ease-in-out infinite;
}

@keyframes group-leave-pulse {
  0%,
  100% {
    box-shadow:
      0 0 10px rgba(255, 60, 90, 0.45),
      0 0 22px rgba(255, 40, 70, 0.28),
      inset 0 0 12px rgba(255, 60, 90, 0.1);
  }
  50% {
    box-shadow:
      0 0 16px rgba(255, 60, 90, 0.7),
      0 0 34px rgba(255, 40, 70, 0.4),
      inset 0 0 16px rgba(255, 60, 90, 0.18);
  }
}

.group-members__leave:hover {
  background: rgba(255, 40, 70, 0.16);
}

.chat-detail__copy {
  margin: 0.85rem 0 0;
  max-width: 24rem;
  color: var(--ink-soft);
}

.chat-thread {
  position: relative;
  z-index: 1;
  display: grid;
  align-content: start;
  gap: 0.75rem;
  flex: 1 1 auto;
  min-height: 0;
  width: min(100%, 36rem);
  margin: 0 auto;
  padding: calc(4.6rem + env(safe-area-inset-top, 0px)) 1.25rem 1rem;
  overflow: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
}

.chat-thread__empty {
  margin: 2rem 0 0;
  text-align: center;
  color: var(--muted);
}

.chat-bubble {
  max-width: min(100%, 18rem);
  padding: 0.75rem 0.9rem;
  border-radius: 16px;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.08);
  user-select: none;
  -webkit-user-select: none;
  touch-action: pan-y;
}

.chat-bubble.is-marked {
  outline: 2px solid #ff5a6a;
  outline-offset: 2px;
  box-shadow: 0 0 0 2px rgba(255, 90, 106, 0.25), 0 8px 18px rgba(0, 0, 0, 0.08);
}

.chat-bubble__reply {
  margin: 0 0 0.45rem;
  padding: 0.35rem 0.5rem;
  border-left: 2px solid rgba(255, 255, 255, 0.45);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.18);
  color: inherit;
  font-size: 0.82rem;
  font-weight: 500;
  opacity: 0.9;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chat-bubble--theirs .chat-bubble__reply {
  border-left-color: rgba(var(--accent-rgb), 0.7);
  background: rgba(var(--accent-rgb), 0.1);
}

.chat-reply {
  position: relative;
  z-index: 5;
  flex: 0 0 auto;
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.65rem 2.6rem 0.35rem 1rem;
  border-top: 0;
  background: linear-gradient(180deg, transparent, rgba(6, 5, 12, 0.88) 40%);
}

.chat-reply[hidden] {
  display: none !important;
}

.chat-reply__body {
  min-width: 0;
  flex: 1 1 auto;
}

.chat-reply__label {
  margin: 0;
  color: var(--accent-soft);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.chat-reply__text {
  margin: 0.2rem 0 0;
  color: var(--ink-soft);
  font-size: 0.9rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chat-reply__clear {
  position: absolute;
  top: 0.45rem;
  right: 0.75rem;
  width: 1.85rem;
  height: 1.85rem;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  color: var(--ink);
  font-size: 1.15rem;
  line-height: 1;
  cursor: pointer;
}

.chat-msg-menu {
  position: fixed;
  inset: 0;
  z-index: 98;
}

.chat-msg-menu[hidden] {
  display: none !important;
}

.chat-msg-menu__backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  background: rgba(0, 0, 0, 0.28);
  cursor: pointer;
}

.chat-msg-menu__sheet {
  position: fixed;
  z-index: 1;
  width: min(11.5rem, calc(100vw - 1.5rem));
  padding: 0.35rem;
  border-radius: 14px;
  background: rgba(22, 19, 34, 0.98);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
  display: grid;
  gap: 0.15rem;
}

.chat-msg-menu__item {
  width: 100%;
  min-height: 2.55rem;
  padding: 0.55rem 0.85rem;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}

.chat-msg-menu__item:hover {
  background: rgba(255, 255, 255, 0.06);
}

.chat-msg-menu__item[hidden] {
  display: none !important;
}

.chat-bubble--mine {
  justify-self: end;
  background: #111;
  color: #fff;
}

.chat-bubble--theirs {
  justify-self: start;
  background: rgba(255, 255, 255, 0.94);
  color: var(--ink);
  border: 1px solid rgba(17, 17, 17, 0.12);
}

.chat-bubble--system {
  justify-self: center;
  max-width: min(92%, 26rem);
  padding: 0.35rem 0.85rem;
  border: 0;
  background: transparent;
  box-shadow: none;
  text-align: center;
}

.chat-bubble__system {
  margin: 0;
  padding: 0.28rem 0.7rem;
  border-radius: 999px;
  background: rgba(17, 17, 17, 0.08);
  color: var(--ink-soft);
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.chat-bubble__label {
  margin: 0 0 0.28rem;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--ink-soft);
  overflow-wrap: anywhere;
}

.chat-bubble__text {
  margin: 0;
  font-weight: 600;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.chat-bubble__text-link {
  color: inherit;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 0.15em;
  overflow-wrap: anywhere;
}

.chat-bubble--mine .chat-bubble__text-link {
  color: #fff;
}

.chat-bubble__link {
  display: inline-block;
  margin-top: 0.35rem;
  color: inherit;
  font-size: 0.88rem;
  opacity: 0.85;
  overflow-wrap: anywhere;
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.chat-bubble--mine .chat-bubble__link {
  color: #d7d7d7;
}

.chat-detail-page--party-comments .chat-composer__input {
  padding-right: 7.6rem;
}

.chat-composer {
  position: relative;
  bottom: auto;
  z-index: 5;
  flex: 0 0 auto;
  display: flex;
  align-items: flex-end;
  gap: 0.65rem;
  width: 100%;
  padding: 0.75rem 1rem calc(0.85rem + env(safe-area-inset-bottom));
  border-top: 0;
  background: linear-gradient(180deg, transparent, rgba(6, 5, 12, 0.92) 30%);
  backdrop-filter: blur(10px);
}

.chat-composer__field {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: flex-end;
}

.chat-composer__input {
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
  min-height: 3rem;
  max-height: 9rem;
  padding: 0.75rem 9.9rem 0.75rem 0.95rem;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--ink);
  font: inherit;
  font-size: 1rem;
  line-height: 1.35;
  outline: none;
  resize: none;
  overflow-y: auto;
  field-sizing: content;
}

.chat-composer__input::placeholder {
  color: var(--muted);
}

.chat-composer__input:focus {
  border-color: rgba(var(--accent-soft-rgb), 0.55);
  box-shadow: var(--glow-soft);
}

.chat-composer__tools {
  position: absolute;
  right: 0.35rem;
  bottom: 0.35rem;
  transform: none;
  display: inline-flex;
  align-items: center;
  gap: 0.1rem;
}

.chat-composer__tool {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--ink-soft);
  cursor: pointer;
  touch-action: none;
  user-select: none;
}

.chat-composer__tool svg {
  width: 1.3rem;
  height: 1.3rem;
}

.chat-composer__tool:hover {
  color: var(--ink);
  background: rgba(17, 17, 17, 0.06);
}

.chat-composer__tool.is-recording {
  color: #ff5a6a;
  background: rgba(255, 90, 106, 0.12);
  animation: mic-pulse 1s ease infinite;
}

@keyframes mic-pulse {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(255, 90, 106, 0.2);
  }
  50% {
    box-shadow: 0 0 0 5px rgba(255, 90, 106, 0.12);
  }
}

.chat-composer__tool.is-open {
  color: var(--ink);
  background: rgba(17, 17, 17, 0.08);
}

.chat-plan {
  position: absolute;
  inset: 0;
  z-index: 35;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  pointer-events: none;
}

.chat-plan[hidden] {
  display: none !important;
}

.chat-plan:not([hidden]) {
  pointer-events: auto;
}

.chat-plan__backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  padding: 0;
  margin: 0;
  background: rgba(0, 0, 0, 0.55);
  cursor: pointer;
}

.chat-plan__sheet {
  position: relative;
  z-index: 1;
  width: min(22rem, calc(100vw - 2rem));
  padding: 1rem 0.9rem 1rem;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 16px;
  background: rgba(22, 19, 34, 0.98);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
  color: var(--ink);
  animation: chat-plan-pop 0.28s cubic-bezier(0.2, 0.9, 0.25, 1.1) both;
}

@keyframes chat-plan-pop {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.chat-plan__title {
  margin: 0 0 0.75rem;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-align: center;
  color: var(--ink);
}

.chat-plan__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.55rem;
  align-items: start;
}

.chat-plan__field {
  position: relative;
  min-width: 0;
}

.chat-plan__input {
  width: 100%;
  min-height: 2.75rem;
  padding: 0.65rem 0.75rem;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--ink);
  font: inherit;
  font-size: 0.95rem;
  outline: none;
  cursor: pointer;
}

.chat-plan__input::placeholder {
  color: var(--muted);
}

.chat-plan__input:focus {
  border-color: rgba(var(--accent-soft-rgb), 0.55);
  box-shadow: var(--glow-soft);
}

.chat-plan__input:not([readonly]) {
  cursor: text;
}

.chat-plan__suggest {
  top: calc(100% + 0.25rem);
  z-index: 30;
  max-height: 10rem;
}

.chat-plan__dauer-list {
  position: absolute;
  top: calc(100% + 0.25rem);
  left: 0;
  right: 0;
  z-index: 30;
  margin: 0;
  padding: 0.3rem;
  list-style: none;
  max-height: 12rem;
  overflow: auto;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  background: rgba(22, 19, 34, 0.98);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35);
}

.chat-plan__dauer-list[hidden] {
  display: none !important;
}

.chat-plan__dauer-option {
  display: flex;
  width: 100%;
  align-items: center;
  min-height: 2.2rem;
  padding: 0.45rem 0.7rem;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 0.92rem;
  text-align: left;
  cursor: pointer;
}

.chat-plan__dauer-option:hover,
.chat-plan__dauer-option[aria-selected='true'] {
  background: rgba(var(--accent-rgb), 0.16);
}

.chat-plan__actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.45rem;
  margin-top: 0.7rem;
}

.chat-plan__status {
  margin: 0;
  width: 100%;
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.35;
  text-align: left;
}

.chat-plan__status.is-error {
  color: #ff7b8a;
}

.chat-plan__status[hidden] {
  display: none !important;
}

.chat-plan__create {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.5rem;
  padding: 0.55rem 1.15rem;
  border: 0;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--accent-deep), var(--accent-soft));
  color: var(--accent-text);
  font: inherit;
  font-size: 0.92rem;
  font-weight: 650;
  cursor: pointer;
}

.chat-plan__create:hover {
  filter: brightness(1.06);
}

.chat-plan__create:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  filter: none;
}

.chat-plan-route-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.4rem;
  height: 3.4rem;
  margin-top: 0.75rem;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--accent-deep), var(--accent-soft));
  color: var(--accent-text);
  font: inherit;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-decoration: none;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.28);
}

.chat-plan-route-btn:hover {
  filter: brightness(1.06);
  color: var(--accent-text);
}

.chat-bubble--mine .chat-plan-route-btn {
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.22);
}

.plan-route-legend {
  position: absolute;
  left: 50%;
  bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
  z-index: 8;
  transform: translateX(-50%);
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  justify-content: center;
  max-width: min(28rem, calc(100vw - 1.5rem));
  padding: 0.45rem 0.6rem;
  border-radius: 999px;
  background: rgba(12, 10, 20, 0.82);
  border: 1px solid rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(10px);
}

.plan-route-legend__item {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: #f4f0ff;
  font-size: 0.72rem;
  font-weight: 600;
  white-space: nowrap;
}

.plan-route-legend__item::before {
  content: '';
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 999px;
}

.plan-route-legend__item--approach::before {
  background: #2f6bff;
}

.plan-route-legend__item--evening::before {
  background: #ff4fd8;
}

.plan-route-legend__item--live::before {
  background: #35d07f;
}

.chat-location-menu {
  position: absolute;
  right: 0;
  bottom: calc(100% + 0.45rem);
  z-index: 20;
  width: min(13.5rem, calc(100vw - 2.5rem));
  padding: 0.35rem;
  border-radius: 14px;
  background: rgba(22, 19, 34, 0.98);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
  display: grid;
  gap: 0.15rem;
}

.chat-location-menu[hidden] {
  display: none !important;
}

.chat-location-menu__switch-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  min-height: 2.55rem;
  padding: 0.35rem 0.65rem;
  border-radius: 10px;
  color: var(--ink);
  font-size: 0.95rem;
  font-weight: 600;
}

.chat-location-menu__switch-label {
  flex: 1 1 auto;
  min-width: 0;
}

.chat-location-switch {
  position: relative;
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  cursor: pointer;
}

.chat-location-switch input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}

.chat-location-switch__track {
  display: block;
  width: 2.55rem;
  height: 1.45rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.14);
  transition: background 0.18s ease;
  position: relative;
}

.chat-location-switch__thumb {
  position: absolute;
  top: 0.12rem;
  left: 0.12rem;
  width: 1.12rem;
  height: 1.12rem;
  border-radius: 50%;
  background: #f4f4f5;
  transition: transform 0.18s ease;
}

.chat-location-switch input:checked + .chat-location-switch__track {
  background: rgba(var(--accent-rgb), 0.55);
  border-color: rgba(var(--accent-soft-rgb), 0.55);
}

.chat-location-switch input:checked + .chat-location-switch__track .chat-location-switch__thumb {
  transform: translateX(1.05rem);
}

.chat-location-menu__item {
  width: 100%;
  min-height: 2.55rem;
  padding: 0.45rem 0.65rem;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 0.95rem;
  text-align: left;
  cursor: pointer;
}

.chat-location-menu__item:hover {
  background: rgba(255, 255, 255, 0.08);
}

.chat-bubble__location {
  display: block;
  width: min(17rem, 72vw);
  overflow: hidden;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(0, 0, 0, 0.25);
  text-decoration: none;
  color: inherit;
}

.chat-bubble__location-map {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 5 / 3;
  overflow: hidden;
  background: #1c1a24;
}

.chat-bubble__location-tiles {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.chat-bubble__location-tile {
  position: absolute;
  width: 256px;
  height: 256px;
  max-width: none;
  pointer-events: none;
  user-select: none;
}

.chat-bubble__location-pin {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 2;
  width: 1.35rem;
  height: 1.35rem;
  margin: 0;
  pointer-events: none;
  background: #e10600;
  border-radius: 50% 50% 50% 0;
  transform: translate(-50%, -100%) rotate(-45deg);
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.45));
}

.chat-bubble__location-pin::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0.42rem;
  height: 0.42rem;
  border-radius: 50%;
  background: #fff;
  transform: translate(-50%, -50%);
}

.chat-bubble__location-label {
  display: block;
  padding: 0.55rem 0.7rem 0.65rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--ink);
}

.chat-bubble__location--live .chat-bubble__location-label {
  color: var(--accent-soft);
}

.chat-composer__send {
  flex: 0 0 auto;
  min-height: 3rem;
  padding: 0.7rem 1rem;
  border: 0;
  border-radius: 14px;
  background: #111;
  color: #fff;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.chat-composer__send:hover {
  background: #2a2a2a;
}

.chat-composer__send:disabled {
  opacity: 0.55;
  cursor: default;
}

.chat-bubble__media {
  display: block;
  max-width: min(100%, 16rem);
  border-radius: 12px;
}

.chat-bubble__media--image {
  width: 100%;
  height: auto;
}

.chat-bubble__media--audio {
  width: min(100%, 15rem);
  max-width: 100%;
}

.chat-voice {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  min-width: min(100%, 13.5rem);
  max-width: 16rem;
  padding: 0.15rem 0.2rem 0.15rem 0.05rem;
}

.chat-voice__play {
  position: relative;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.15rem;
  height: 2.15rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
  color: inherit;
  cursor: pointer;
}

.chat-bubble--theirs .chat-voice__play {
  background: rgba(17, 17, 17, 0.08);
}

.chat-voice__icon {
  width: 1.05rem;
  height: 1.05rem;
  display: block;
  pointer-events: none;
}

.chat-voice__icon--play {
  margin-left: 0.12rem;
}

.chat-voice__icon--pause {
  display: none;
}

.chat-voice.is-playing .chat-voice__icon--play {
  display: none;
}

.chat-voice.is-playing .chat-voice__icon--pause {
  display: block;
}

.chat-voice__wave {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.13rem;
  height: 1.75rem;
  min-width: 8.5rem;
  width: 9.5rem;
}

.chat-voice__bar {
  flex: 1 1 0;
  display: block;
  width: 100%;
  min-width: 2px;
  max-width: 3px;
  height: calc(var(--h, 0.4) * 1.75rem);
  border-radius: 99px;
  background: currentColor;
  opacity: 0.42;
  transform-origin: center;
  transition: opacity 0.15s ease;
}

.chat-voice__bar.is-played {
  opacity: 1;
}

.chat-voice__audio {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
}

.chat-bubble__media--video {
  width: 100%;
  max-height: 18rem;
  background: #000;
}

.chat-camera {
  position: fixed;
  inset: 0;
  z-index: 97;
  background: #050508;
}

.chat-camera[hidden] {
  display: none !important;
}

.chat-camera__sheet {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-height: 100%;
  min-height: 100dvh;
}

.chat-camera__sheet[hidden] {
  display: none !important;
}

.chat-camera__toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: calc(0.75rem + env(safe-area-inset-top)) 1rem 0.75rem;
}

.chat-camera__title {
  margin: 0;
  color: #fff;
  font-weight: 700;
}

.chat-camera__close {
  width: 2.4rem;
  height: 2.4rem;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
}

.chat-camera__viewport {
  position: relative;
  margin: 0 1rem;
  overflow: hidden;
  border-radius: 18px;
  background: #111;
  touch-action: none;
  user-select: none;
  min-height: 55vh;
}

.chat-camera__viewport--preview {
  display: grid;
  place-items: center;
  touch-action: auto;
  cursor: default;
}

.chat-camera__video,
.chat-camera__preview-video,
.chat-camera__preview-image {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 55vh;
  object-fit: cover;
  background: #111;
}

.chat-camera__video {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0;
  pointer-events: none;
}

.chat-camera__canvas {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  min-height: 55vh;
  pointer-events: none;
  background: #111;
}

.chat-camera__preview-image[hidden],
.chat-camera__preview-video[hidden] {
  display: none !important;
}

.chat-camera__controls {
  display: flex;
  justify-content: center;
  padding: 1rem 1rem calc(1.25rem + env(safe-area-inset-bottom));
}

.chat-camera__shutter {
  width: 4.4rem;
  height: 4.4rem;
  border: 4px solid #fff;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.2);
  cursor: pointer;
  touch-action: none;
  user-select: none;
}

.chat-camera__shutter:active,
.chat-camera__shutter.is-recording {
  transform: scale(0.94);
}

.chat-camera__shutter.is-recording {
  background: #ff5a6a;
  border-color: #fff;
  box-shadow: 0 0 0 4px rgba(255, 90, 106, 0.35);
}

.chat-camera__shutter:disabled {
  opacity: 0.45;
  cursor: default;
}

.chat-camera__preview-actions {
  display: flex;
  justify-content: flex-end;
  padding: 1rem 1rem calc(1.25rem + env(safe-area-inset-bottom));
}

.chat-camera__send {
  min-height: 3rem;
  padding: 0.7rem 1.25rem;
  border: 0;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--accent-deep), var(--accent-soft));
  color: var(--accent-text);
  font: inherit;
  font-weight: 700;
  box-shadow: var(--glow-soft);
  cursor: pointer;
}

.chat-camera__send:hover {
  box-shadow: var(--glow);
}

.chat-camera__send:disabled {
  opacity: 0.55;
  cursor: default;
}

.experience-camera {
  position: fixed;
  inset: 0;
  z-index: 98;
  background: #050508;
}

.experience-camera[hidden] {
  display: none !important;
}

.experience-camera__sheet {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-height: 100%;
  min-height: 100dvh;
}

.experience-camera__sheet[hidden] {
  display: none !important;
}

.experience-camera__toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: calc(0.75rem + env(safe-area-inset-top)) 1rem 0.75rem;
}

.experience-camera__title {
  margin: 0;
  color: #fff;
  font-weight: 700;
}

.experience-camera__close {
  width: 2.4rem;
  height: 2.4rem;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  font-size: 1.45rem;
  line-height: 1;
  cursor: pointer;
}

.experience-camera__viewport {
  position: relative;
  overflow: hidden;
  background: #000;
  touch-action: manipulation;
}

.experience-camera__viewport--preview {
  display: grid;
  place-items: center;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
}

.experience-camera__video,
.experience-camera__preview-video,
.experience-camera__preview-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  -webkit-user-drag: none;
  user-select: none;
  -webkit-touch-callout: none;
}

.experience-camera__preview-video,
.experience-camera__preview-image {
  touch-action: none;
  pointer-events: auto;
}

.experience-camera__video {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
}

.experience-camera__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.experience-camera__preview-image[hidden],
.experience-camera__preview-video[hidden] {
  display: none !important;
}

.experience-camera__playback {
  position: absolute;
  left: 0.75rem;
  right: 0.75rem;
  top: 0.75rem;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.45rem 0.55rem;
  border-radius: 999px;
  background: rgba(8, 8, 12, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.55);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.35),
    0 8px 24px rgba(0, 0, 0, 0.4),
    0 0 18px rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.experience-camera__playback[hidden] {
  display: none !important;
}

.experience-camera__play {
  flex: 0 0 auto;
  width: 2.55rem;
  height: 2.55rem;
  margin: 0;
  padding: 0;
  border: 2px solid rgba(255, 255, 255, 0.95);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.92);
  color: #0b0b10;
  cursor: pointer;
  box-shadow:
    0 0 12px rgba(255, 255, 255, 0.55),
    0 4px 14px rgba(0, 0, 0, 0.35);
}

.experience-camera__play:hover {
  background: #fff;
  box-shadow:
    0 0 16px rgba(255, 255, 255, 0.75),
    0 6px 16px rgba(0, 0, 0, 0.4);
}

.experience-camera__play-icon {
  width: 1.15rem;
  height: 1.15rem;
  display: block;
}

.experience-camera__play-icon[hidden] {
  display: none !important;
}

.experience-camera__scrub {
  flex: 1 1 auto;
  min-width: 0;
  height: 2.55rem;
  display: flex;
  align-items: center;
  cursor: pointer;
  touch-action: none;
}

.experience-camera__scrub-track {
  position: relative;
  width: 100%;
  height: 0.55rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.28);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35);
  overflow: hidden;
}

.experience-camera__scrub-fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0%;
  border-radius: inherit;
  background: linear-gradient(90deg, #fff 0%, var(--cta-contrast, #a8ff1a) 100%);
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.65);
}

.experience-camera__controls {
  display: flex;
  justify-content: center;
  padding: 1rem 1rem calc(1.35rem + env(safe-area-inset-bottom));
}

.experience-camera__shutter {
  width: 4.2rem;
  height: 4.2rem;
  border: 3px solid rgba(255, 255, 255, 0.92);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.35);
  cursor: pointer;
  transition: transform 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

.experience-camera__shutter:active,
.experience-camera__shutter.is-recording {
  transform: scale(0.92);
  background: rgba(255, 70, 90, 0.45);
}

.experience-camera__shutter.is-recording {
  box-shadow: 0 0 0 3px rgba(255, 70, 90, 0.55);
}

.experience-camera__shutter:disabled {
  opacity: 0.45;
  cursor: default;
}

.experience-camera__edit {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.55rem;
  z-index: 3;
}

.experience-camera__preview-actions {
  position: relative;
  z-index: 5;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 0.85rem;
  padding: 1rem 1rem calc(1.35rem + env(safe-area-inset-bottom));
  pointer-events: auto;
}

.experience-camera__draft {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.4rem;
  height: 3.4rem;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  cursor: pointer;
  pointer-events: auto;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.28);
}

.experience-camera__draft:hover {
  background: rgba(255, 255, 255, 0.24);
}

.experience-camera__draft:disabled {
  opacity: 0.45;
  cursor: default;
}

.experience-camera__draft-icon {
  width: 1.55rem;
  height: 1.55rem;
  display: block;
}

.experience-camera__send {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.4rem;
  height: 3.4rem;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
  pointer-events: auto;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.experience-camera__send:hover {
  transform: translateY(-1px);
}

.experience-camera__send:disabled {
  opacity: 0.45;
  cursor: default;
}

.experience-camera__send-icon {
  width: 2.35rem;
  height: 2.35rem;
  filter: drop-shadow(0 0 6px rgba(57, 255, 20, 0.55)) drop-shadow(0 0 10px rgba(0, 240, 255, 0.35));
}

.friends-overlay {
  position: fixed;
  inset: 0;
  z-index: 96;
  display: grid;
  align-items: center;
  justify-items: center;
  padding: max(1rem, env(safe-area-inset-top, 0px)) 1rem max(1rem, env(safe-area-inset-bottom, 0px));
  background: rgba(0, 0, 0, 0.45);
}

.friends-overlay[hidden] {
  display: none !important;
}

.friends-overlay__dismiss {
  position: absolute;
  inset: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.friends-overlay__sheet {
  position: relative;
  z-index: 1;
  width: min(100%, 22.5rem);
  max-height: min(72vh, 32rem);
  overflow: auto;
  border-radius: 18px;
  background: rgba(18, 16, 28, 0.96);
  color: var(--ink);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.5), 0 0 30px rgba(var(--accent-rgb), 0.15);
  padding: 0 0 0.85rem;
}

.friends-overlay__handle {
  display: none;
}

.friends-overlay__toolbar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.7rem 1rem 0.75rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  position: sticky;
  top: 0;
  background: rgba(18, 16, 28, 0.96);
}

.friends-overlay__heading {
  min-width: 0;
}

.friends-overlay__title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--ink);
}

.friends-overlay__party {
  margin: 0.2rem 0 0;
  color: var(--muted);
  font-size: 0.82rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.friends-overlay__close {
  width: 2rem;
  height: 2rem;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--muted);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
}

.friends-overlay__list {
  list-style: none;
  margin: 0;
  padding: 0.75rem 1rem 0.35rem;
  display: grid;
  gap: 0.5rem;
}

.friends-overlay__item {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.45rem 0.4rem 0.45rem 0.7rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.06);
}

.friends-overlay__row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  padding: 0.2rem 0.2rem 0.2rem 0;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.friends-overlay__item:hover {
  border-color: rgba(var(--accent-rgb), 0.45);
  background: rgba(var(--accent-rgb), 0.12);
}

.friends-overlay__route {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 2.55rem;
  height: 2.55rem;
  border-radius: 50%;
  color: var(--accent-soft);
  text-decoration: none;
}

.friends-overlay__route:hover {
  background: rgba(var(--accent-rgb), 0.18);
  color: var(--accent);
}

.friends-overlay__marker {
  width: 1.45rem;
  height: 1.45rem;
}

.friends-overlay__avatar {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 2.45rem;
  height: 2.45rem;
  overflow: hidden;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
}

.friends-overlay__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.friends-overlay__avatar-letter {
  font-family: var(--font-display);
  font-size: 1.15rem;
  line-height: 1;
}

.friends-overlay__meta {
  flex: 1 1 auto;
  min-width: 0;
  display: grid;
  gap: 0.12rem;
}

.friends-overlay__name {
  min-width: 0;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.friends-overlay__stay {
  min-width: 0;
  font-size: 0.78rem;
  font-weight: 500;
  line-height: 1.25;
  color: var(--muted);
}

.friends-overlay__stay--en-route {
  color: var(--accent-soft, #7dfff0);
  font-weight: 650;
}

.friends-overlay__empty {
  margin: 1.25rem 1rem 0.5rem;
  text-align: center;
  color: var(--muted);
}

.share-overlay {
  position: fixed;
  inset: 0;
  z-index: 95;
  display: grid;
  align-items: end;
  background: rgba(0, 0, 0, 0.45);
}

.share-overlay[hidden] {
  display: none !important;
}

.share-overlay__sheet {
  max-height: min(85vh, 36rem);
  overflow: auto;
  border-radius: 18px 18px 0 0;
  background: #f2f2f7;
  box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.2);
  padding: 0 0 calc(0.85rem + env(safe-area-inset-bottom));
}

.share-overlay__toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem 1rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  position: sticky;
  top: 0;
  background: #f2f2f7;
}

.share-overlay__title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
  color: #111;
}

.share-overlay__close {
  width: 2rem;
  height: 2rem;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #8e8e93;
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
}

.share-overlay__link-row {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin: 1rem 1rem 0;
  padding: 0.75rem 0.8rem;
  border: 1px solid rgba(17, 17, 17, 0.12);
  border-radius: 14px;
  background: #fff;
}

.share-overlay__link {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.88rem;
  overflow-wrap: anywhere;
}

.share-overlay__copy {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.4rem;
  height: 2.4rem;
  padding: 0;
  border: 1px solid rgba(120, 120, 120, 0.28);
  border-radius: 12px;
  background: rgba(150, 150, 150, 0.14);
  color: #8a8a8a;
  cursor: pointer;
}

.share-overlay__copy:hover {
  background: rgba(150, 150, 150, 0.24);
}

.share-overlay__copy svg {
  width: 1.15rem;
  height: 1.15rem;
}

.share-overlay__copy.is-copied {
  border-color: rgba(31, 107, 58, 0.35);
  background: rgba(31, 107, 58, 0.14);
  color: #1f6b3a;
}

.share-overlay__copied {
  margin: 0.45rem 1rem 0;
  color: #1f6b3a;
  font-size: 0.85rem;
  font-weight: 600;
}

.share-overlay__section {
  margin: 1.15rem 1rem 0.55rem;
  color: var(--ink);
  font-size: 0.9rem;
  font-weight: 700;
}

.share-overlay__partners {
  list-style: none;
  margin: 0;
  padding: 0 1rem;
  display: grid;
  gap: 0.55rem;
}

.share-overlay__partner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0;
  border: 1px solid rgba(17, 17, 17, 0.12);
  border-radius: 14px;
  background: #fff;
  overflow: hidden;
}

.share-overlay__partner-btn {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  width: 100%;
  margin: 0;
  padding: 0.7rem 0.85rem;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.share-overlay__partner-btn:hover {
  background: rgba(17, 17, 17, 0.04);
}

.share-overlay__avatar {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 2.35rem;
  height: 2.35rem;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(18, 16, 28, 0.72);
  color: #fff;
}

.share-overlay__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.share-overlay__avatar-letter {
  font-family: var(--font-display);
  font-size: 1.05rem;
  line-height: 1;
}

.share-overlay__partner-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
}

.share-note {
  position: fixed;
  inset: 0;
  z-index: 97;
  display: grid;
  align-items: end;
  background: rgba(0, 0, 0, 0.45);
}

.share-note[hidden] {
  display: none !important;
}

.share-note__sheet {
  display: flex;
  flex-direction: column;
  max-height: min(85vh, 34rem);
  padding: 0 0 calc(0.85rem + env(safe-area-inset-bottom));
  border-radius: 18px 18px 0 0;
  background: #f2f2f7;
  box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.2);
}

.share-note__toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem 1rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.share-note__title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
  color: #111;
}

.share-note__close {
  width: 2rem;
  height: 2rem;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #8e8e93;
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
}

.share-note__partner {
  margin: 0.85rem 1rem 0;
  color: var(--ink);
  font-weight: 700;
}

.share-note__input {
  display: block;
  width: calc(100% - 2rem);
  min-height: 5.2rem;
  margin: 0.7rem 1rem 0;
  padding: 0.75rem 0.85rem;
  border: 1px solid rgba(17, 17, 17, 0.12);
  border-radius: 14px;
  background: #fff;
  color: var(--ink);
  font: inherit;
  resize: vertical;
}

.share-note__suggests {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin: 0.75rem 1rem 0;
}

.share-note__chip {
  max-width: 100%;
  padding: 0.45rem 0.7rem;
  border: 1px solid rgba(17, 17, 17, 0.14);
  border-radius: 999px;
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}

.share-note__chip:hover {
  background: #f7f7f7;
}

.share-note__chip:disabled {
  opacity: 0.55;
  cursor: default;
}

.share-note__actions {
  display: flex;
  justify-content: flex-end;
  margin: 0.85rem 1rem 0;
}

.share-note__send {
  padding: 0.5rem 1rem;
  border: 1px solid rgba(17, 17, 17, 0.18);
  border-radius: 10px;
  background: #111;
  color: #fff;
  font: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
}

.share-note__send:hover {
  background: #2a2a2a;
}

.share-note__send:disabled {
  opacity: 0.55;
  cursor: default;
}

.share-overlay__send {
  flex: 0 0 auto;
  padding: 0.4rem 0.75rem;
  border: 1px solid rgba(17, 17, 17, 0.18);
  border-radius: 10px;
  background: #111;
  color: #fff;
  font: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
}

.share-overlay__send:hover {
  background: #2a2a2a;
}

.share-overlay__send:disabled {
  opacity: 0.55;
  cursor: default;
}

.share-overlay__empty {
  margin: 0 1rem 0.5rem;
  color: var(--muted);
  font-size: 0.9rem;
}

.share-overlay__empty--auth {
  color: inherit;
}

.share-overlay__auth-link {
  color: var(--ink);
  text-decoration: none;
  cursor: pointer;
}

.share-overlay__auth-link:hover {
  color: var(--accent-soft);
}

.qr-scanner {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  align-items: end;
  background: rgba(0, 0, 0, 0.45);
}

.qr-scanner[hidden] {
  display: none !important;
}

.qr-scanner__sheet {
  border-radius: 18px 18px 0 0;
  background: #f2f2f7;
  box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.2);
  padding-bottom: calc(0.85rem + env(safe-area-inset-bottom));
}

.qr-scanner__toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem 1rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.qr-scanner__title {
  margin: 0;
  font-weight: 700;
  color: #111;
}

.qr-scanner__close {
  width: 2rem;
  height: 2rem;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #8e8e93;
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
}

.qr-scanner__viewport {
  position: relative;
  margin: 0.85rem 1rem 0;
  overflow: hidden;
  border-radius: 14px;
  background: #111;
  aspect-ratio: 3 / 4;
}

.qr-scanner__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.qr-scanner__hint {
  margin: 0.75rem 1rem 0;
  color: var(--muted);
  font-size: 0.9rem;
  text-align: center;
}

.party-list {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 1rem;
  width: 100%;
  padding: 0.5rem 1rem calc(6.5rem + env(safe-area-inset-bottom));
}

.saved-folder {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.7rem;
  width: 100%;
  min-height: 0;
  padding: 0.65rem 0.85rem;
  border: 1px solid var(--panel-border);
  border-radius: var(--radius, 14px);
  background: var(--panel-solid);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25), inset 0 0 0 1px rgba(255, 255, 255, 0.04);
  color: var(--ink);
  text-decoration: none;
  transition: box-shadow 0.2s, border-color 0.2s, transform 0.15s;
}

.saved-folder:hover,
.saved-folder:focus-visible {
  border-color: rgba(var(--accent-rgb), 0.4);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3), var(--glow-soft);
  transform: translateY(-1px);
}

.saved-folder__icon {
  display: inline-flex;
  width: 1.35rem;
  height: 1.35rem;
  color: var(--ink);
}

.saved-folder__icon svg {
  width: 100%;
  height: 100%;
}

.saved-folder__body {
  display: flex;
  align-items: baseline;
  gap: 0.55rem;
  min-width: 0;
}

.saved-folder__title {
  font-size: clamp(12px, 0.5rem + 1.4vw, 17px);
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--ink);
}

.saved-folder__meta {
  color: var(--muted);
  font-size: 0.8rem;
}

.saved-folder__chevron {
  color: var(--muted);
  font-size: 1.1rem;
  line-height: 1;
}

.saved-shorts-page {
  position: relative;
  min-height: 100vh;
  padding-bottom: 5rem;
}

.saved-media-grid.shorts-search-results.party-media__grid {
  position: relative;
  z-index: 1;
  padding: 0.5rem 1rem calc(6.5rem + env(safe-area-inset-bottom));
  box-sizing: border-box;
  touch-action: pan-y;
}

.saved-media-grid .party-media__item {
  text-decoration: none;
  color: inherit;
  display: block;
  touch-action: pan-y;
  -webkit-user-drag: none;
  user-select: none;
  -webkit-user-select: none;
}

.saved-media-grid .party-media__item img,
.saved-media-grid .party-media__item video {
  pointer-events: none;
  -webkit-user-drag: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  touch-action: none;
}

.saved-media-grid__live-ph {
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(160deg, #2a2438, #121018);
  pointer-events: none;
}

.saved-shorts-list {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 1rem;
  width: 100%;
  padding: 0.5rem 1rem calc(6.5rem + env(safe-area-inset-bottom));
}

.saved-shorts-row {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.35rem 0.55rem;
  width: 100%;
  min-height: 4.4rem;
  padding: 0.95rem 1rem;
  border: 1px solid var(--panel-border);
  border-radius: var(--radius, 18px);
  background: var(--panel-solid);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35), inset 0 0 0 1px rgba(255, 255, 255, 0.04);
  color: var(--ink);
  text-decoration: none;
}

.saved-shorts-row:hover,
.saved-shorts-row:focus-visible {
  border-color: rgba(var(--accent-rgb), 0.4);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35), var(--glow-soft);
}

.saved-shorts-row__party {
  font-weight: 700;
  color: var(--ink);
}

.saved-shorts-row__sep {
  color: var(--muted);
}

.saved-shorts-row__creator {
  color: var(--muted);
  font-size: 0.95rem;
}

.party-card {
  container-type: inline-size;
  container-name: party-card;
  --pc-stack-gap: clamp(0.38rem, 2.2cqi, 0.55rem);
  --pc-actions-w: clamp(1.42rem, 8cqi, 2.35rem);
  --pc-actions-gap: clamp(0.28rem, 1.6cqi, 0.45rem);
  --pc-actions-col: calc(var(--pc-actions-w) + 0.15rem);
  --pc-main-max: 38%;
  --pc-center-x: 50%;
  --pc-center-shift: 0px;
  --pc-center-y: -50%;
  --pc-center-max: min(18rem, calc(100cqi - var(--pc-actions-col) - 36% - 0.45rem));
  --pc-center-reserve: 30%;
  --pc-name-size: clamp(12px, 0.55rem + 1.85vw, 22px);
  --pc-name-max: calc(100cqi - var(--pc-actions-col) - var(--pc-center-reserve));
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--pc-actions-col);
  gap: clamp(0.45rem, 2.5cqi, 0.85rem) clamp(0.35rem, 2cqi, 0.65rem);
  align-items: stretch;
  width: 100%;
  min-height: clamp(5.85rem, 34cqi, 9.5rem);
  padding: clamp(0.72rem, 3.2cqi, 1rem) clamp(0.72rem, 3cqi, 1.05rem) clamp(0.65rem, 3cqi, 0.88rem);
  border: 1px solid rgba(17, 17, 17, 0.14);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.08);
}

/* Lesbarkeit: scharfe Kanten, kein Weichzeichner auf Kleinsttext */
.party-card,
.party-card__name,
.party-card__name-text,
.party-card__description,
.party-card__location,
.party-card__creator,
.party-card__distance,
.party-card__more,
.party-card__experience,
.party-card__friends,
.party-card__friends-count,
.party-card__friends-label,
.party-rating--card,
.party-rating__split-avg {
  text-rendering: geometricPrecision;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.party-card.is-focus-glow {
  border-color: #e0b3ff !important;
  box-shadow:
    0 0 4px #f0d4ff,
    0 0 14px #d07aff,
    0 0 28px var(--accent),
    0 0 48px rgba(var(--accent-rgb), 0.75),
    0 12px 28px rgba(0, 0, 0, 0.35) !important;
  animation: party-card-neon-pulse 0.75s ease-in-out 2;
}

@keyframes party-card-neon-pulse {
  0%,
  100% {
    box-shadow:
      0 0 4px #f0d4ff,
      0 0 14px #d07aff,
      0 0 28px var(--accent),
      0 0 48px rgba(var(--accent-rgb), 0.75),
      0 12px 28px rgba(0, 0, 0, 0.35);
  }
  50% {
    box-shadow:
      0 0 8px #fff,
      0 0 20px #e6b0ff,
      0 0 40px var(--accent-soft),
      0 0 64px rgba(var(--accent-rgb), 0.95),
      0 12px 28px rgba(0, 0, 0, 0.35);
  }
}

.party-card__hit {
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
}

.party-card__main {
  position: relative;
  z-index: 2;
  grid-column: 1;
  grid-row: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--pc-stack-gap);
  align-items: start;
  align-self: start;
  min-width: 0;
  max-width: var(--pc-main-max);
  overflow: visible;
  pointer-events: none;
}

.party-card__left {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--pc-stack-gap);
  min-width: 0;
  max-width: 100%;
}

.party-card__name {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.12rem 0.22rem;
  max-width: var(--pc-name-max);
  font-family: var(--font-display);
  font-size: var(--pc-name-size);
  letter-spacing: 0.03em;
  line-height: 1.1;
  color: var(--ink);
}

.party-card__name-text {
  flex: 0 1 auto;
  min-width: 0;
  overflow-wrap: normal;
  word-break: normal;
  hyphens: manual;
  text-wrap: pretty;
}

.party-card__live {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  font-size: 0.62em;
  line-height: 1;
  vertical-align: baseline;
  user-select: none;
  pointer-events: none;
}

.party-card__live.is-hot {
  font-size: 0.62em;
  filter: drop-shadow(0 0 4px rgba(255, 120, 20, 0.95))
    drop-shadow(0 0 10px rgba(255, 80, 0, 0.7));
  animation: party-card-flame 1.15s ease-in-out infinite alternate;
}

@keyframes party-card-flame {
  from {
    transform: scale(1);
    filter: drop-shadow(0 0 3px rgba(255, 140, 30, 0.85))
      drop-shadow(0 0 8px rgba(255, 70, 0, 0.55));
  }
  to {
    transform: scale(1.06);
    filter: drop-shadow(0 0 7px rgba(255, 180, 40, 1))
      drop-shadow(0 0 16px rgba(255, 90, 0, 0.85));
  }
}

.party-card__draft {
  display: inline-block;
  margin-left: 0.35rem;
  padding: 0.12rem 0.45rem;
  border-radius: 999px;
  background: rgba(17, 17, 17, 0.08);
  color: #6b6b6b;
  font-family: var(--font-body, inherit);
  font-size: 0.45em;
  font-weight: 600;
  letter-spacing: 0.02em;
  vertical-align: middle;
  line-height: 1.2;
}

.party-rating {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 0.12rem;
  margin: 0;
  pointer-events: auto;
}

.party-card__left .party-rating {
  margin: 0;
}

.party-rating--card {
  display: grid;
  grid-template-columns: repeat(5, clamp(0.82rem, 4.6cqi, 1.15rem));
  column-gap: clamp(0.04rem, 0.6cqi, 0.1rem);
  row-gap: 0.06rem;
  align-items: center;
  justify-content: start;
  width: max-content;
  max-width: 100%;
}

.party-rating--card .party-rating__star {
  grid-row: 1;
}

.party-rating--card .party-rating__star[data-star='1'] { grid-column: 1; }
.party-rating--card .party-rating__star[data-star='2'] { grid-column: 2; }
.party-rating--card .party-rating__star[data-star='3'] { grid-column: 3; }
.party-rating--card .party-rating__star[data-star='4'] { grid-column: 4; }
.party-rating--card .party-rating__star[data-star='5'] { grid-column: 5; }

.party-rating__split-avg {
  grid-row: 2;
  font-size: clamp(0.62rem, 3cqi, 0.72rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.01em;
  font-variant-numeric: tabular-nums;
  text-align: center;
  pointer-events: none;
  white-space: nowrap;
}

.party-rating__split-avg--visited {
  grid-column: 1 / 3;
  color: var(--accent-bright);
  text-shadow: 0 0 8px rgba(var(--accent-rgb), 0.55), 0 0 16px rgba(var(--accent-rgb), 0.28);
}

.party-rating__split-avg--not-visited {
  grid-column: 4 / 6;
  color: rgba(17, 17, 17, 0.38);
  font-weight: 500;
}

.party-rating__average {
  margin-right: 0.28rem;
  font-size: 0.85rem;
  font-weight: 500;
  line-height: 1.35rem;
  letter-spacing: 0.01em;
  color: rgba(17, 17, 17, 0.42);
  font-variant-numeric: tabular-nums;
  min-width: 2.4ch;
}

.party-rating__average.is-gold,
.party-rating__average.is-perfect {
  color: #ffd000;
  font-weight: 700;
}

.party-rating__count {
  margin-left: 0.35rem;
  font-size: 0.85rem;
  font-weight: 500;
  line-height: 1.35rem;
  letter-spacing: 0.01em;
  color: rgba(17, 17, 17, 0.42);
  font-variant-numeric: tabular-nums;
}

.party-rating__star {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: clamp(0.82rem, 4.6cqi, 1.15rem);
  height: clamp(0.82rem, 4.6cqi, 1.15rem);
  padding: 0;
  border: 0;
  background: transparent;
  color: rgba(17, 17, 17, 0.42);
  cursor: pointer;
}

.party-rating__icon {
  width: clamp(0.72rem, 4cqi, 1rem);
  height: clamp(0.72rem, 4cqi, 1rem);
  display: block;
}

.party-rating__fill {
  opacity: 0;
}

.party-rating__star.is-filled,
.party-rating__star.is-preview {
  color: #111111;
}

.party-rating__star.is-filled .party-rating__fill,
.party-rating__star.is-preview .party-rating__fill {
  opacity: 1;
}

.party-rating__star.is-filled .party-rating__outline,
.party-rating__star.is-preview .party-rating__outline {
  opacity: 0;
}

.party-card__location {
  margin: 0;
  color: var(--ink-soft);
  font-size: clamp(0.68rem, 3.4cqi, 0.88rem);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
  line-height: 1.3;
}

button.party-card__location--follow,
a.party-card__creator-link.party-card__location--follow,
a.shorts-slide__user.party-card__location--follow,
button.shorts-slide__coords.party-card__location--follow {
  position: relative;
  z-index: 3;
  display: inline-block;
  width: max-content;
  max-width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-variant-numeric: tabular-nums;
  text-align: left;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  /* Über dem Karten-Hit-Link (Detailseite), sonst blockiert der Card-Klick Follow */
  pointer-events: auto;
}

button.party-card__location--follow:focus-visible {
  outline: 2px solid rgba(var(--accent-rgb), 0.65);
  outline-offset: 2px;
  border-radius: 4px;
}

.party-card__location-text {
  display: inline-block;
  transform-origin: center center;
  opacity: 1;
  transform: scale(1);
  color: inherit;
  text-shadow: none;
  transition:
    opacity 0.3s ease,
    transform 0.3s ease,
    color 0.22s ease,
    text-shadow 0.22s ease;
}

.party-card__location-mark {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) scale(0);
  opacity: 0;
  pointer-events: none;
  font-weight: 800;
  font-size: 1.15em;
  line-height: 1;
  text-shadow: none;
  transition:
    opacity 0.34s ease,
    transform 0.34s cubic-bezier(0.2, 0.85, 0.2, 1),
    color 0.22s ease,
    text-shadow 0.22s ease;
}

.party-card__location-mark[hidden] {
  display: none !important;
}

.party-card__location--follow.is-animating {
  pointer-events: none;
}

.party-card__location--follow.is-follow-anim.loc-phase-glow .party-card__location-text,
.party-card__location--follow.is-follow-anim.loc-phase-mark .party-card__location-text,
.party-card__location--follow.is-follow-anim.loc-phase-hold .party-card__location-text,
.party-card__location--follow.is-follow-anim.loc-phase-shrink .party-card__location-text,
.party-card__location--follow.is-follow-anim .party-card__location-mark {
  color: #39ff88;
  text-shadow: 0 0 8px rgba(57, 255, 136, 0.95), 0 0 22px rgba(57, 255, 136, 0.55);
}

.party-card__location--follow.is-unfollow-anim.loc-phase-glow .party-card__location-text,
.party-card__location--follow.is-unfollow-anim.loc-phase-mark .party-card__location-text,
.party-card__location--follow.is-unfollow-anim.loc-phase-hold .party-card__location-text,
.party-card__location--follow.is-unfollow-anim.loc-phase-shrink .party-card__location-text,
.party-card__location--follow.is-unfollow-anim .party-card__location-mark {
  color: #ff3b4a;
  text-shadow: 0 0 8px rgba(255, 59, 74, 0.95), 0 0 22px rgba(255, 59, 74, 0.55);
}

.party-card__location--follow.loc-phase-mark .party-card__location-text,
.party-card__location--follow.loc-phase-hold .party-card__location-text,
.party-card__location--follow.loc-phase-shrink .party-card__location-text {
  opacity: 0;
  transform: scale(0.12);
}

.party-card__location--follow.loc-phase-mark .party-card__location-mark,
.party-card__location--follow.loc-phase-hold .party-card__location-mark {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.party-card__location--follow.loc-phase-shrink .party-card__location-mark {
  opacity: 0;
  transform: translate(-50%, -50%) scale(0);
  transition-timing-function: ease-in;
}

.party-card__location--follow.loc-phase-restore .party-card__location-text {
  opacity: 1;
  transform: scale(1);
  color: inherit;
  text-shadow: none;
}

.party-card__location--follow.loc-phase-restore .party-card__location-mark {
  opacity: 0;
  transform: translate(-50%, -50%) scale(0);
}

@media (prefers-reduced-motion: reduce) {
  .party-card__location-text,
  .party-card__location-mark {
    transition: none !important;
  }
}

.party-card__creator {
  margin: 0;
  max-width: 100%;
  color: var(--muted);
  font-size: clamp(0.58rem, 3.2cqi, 0.88rem);
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
  overflow-wrap: normal;
  word-break: keep-all;
  overflow: hidden;
}

.party-card__experience {
  position: relative;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: clamp(0.25rem, 1.5cqi, 0.45rem);
  margin: 0;
  max-width: 100%;
  padding: clamp(0.3rem, 1.8cqi, 0.42rem) clamp(0.45rem, 2.5cqi, 0.72rem) clamp(0.3rem, 1.8cqi, 0.42rem) clamp(0.4rem, 2cqi, 0.55rem);
  border: 1px solid rgba(var(--cta-contrast-rgb), 0.95);
  border-radius: 999px;
  background:
    linear-gradient(
      135deg,
      rgba(var(--cta-contrast-rgb), 1) 0%,
      rgba(var(--cta-contrast-rgb), 0.82) 55%,
      rgba(var(--cta-contrast-rgb), 0.7) 100%
    );
  color: var(--cta-contrast-text);
  font: inherit;
  font-size: clamp(0.62rem, 3.2cqi, 0.82rem);
  font-weight: 700;
  letter-spacing: 0.01em;
  cursor: pointer;
  pointer-events: auto;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.28);
  box-shadow:
    0 0 10px rgba(var(--cta-contrast-rgb), 0.75),
    0 0 22px rgba(var(--cta-contrast-rgb), 0.45),
    0 0 40px rgba(var(--cta-contrast-rgb), 0.28),
    0 8px 18px rgba(0, 0, 0, 0.28);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  transition:
    background 0.2s ease,
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    transform 0.15s ease,
    filter 0.2s ease;
}

.party-card__experience[hidden] {
  display: none !important;
}

.party-card__experience:hover {
  border-color: rgba(var(--cta-contrast-rgb), 1);
  background:
    linear-gradient(
      135deg,
      rgba(var(--cta-contrast-rgb), 1) 0%,
      rgba(var(--cta-contrast-rgb), 0.92) 100%
    );
  color: var(--cta-contrast-text);
  box-shadow:
    0 0 14px rgba(var(--cta-contrast-rgb), 0.9),
    0 0 28px rgba(var(--cta-contrast-rgb), 0.55),
    0 0 48px rgba(var(--cta-contrast-rgb), 0.35),
    0 10px 20px rgba(0, 0, 0, 0.3);
  filter: brightness(1.06);
}

.party-card__experience:active {
  transform: scale(0.97);
  filter: brightness(0.96);
}

.party-card__experience-icon {
  width: clamp(0.85rem, 4.5cqi, 1.15rem);
  height: clamp(0.85rem, 4.5cqi, 1.15rem);
  flex: 0 0 auto;
  color: inherit;
  filter: drop-shadow(0 0 4px rgba(var(--cta-contrast-rgb), 0.55));
}

.party-card__experience-label {
  line-height: 1;
  white-space: nowrap;
  color: inherit;
}

.party-card__friends {
  position: relative;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: clamp(0.2rem, 1.2cqi, 0.35rem);
  margin: 0;
  max-width: 100%;
  padding: clamp(0.28rem, 1.6cqi, 0.4rem) clamp(0.55rem, 3cqi, 0.85rem);
  border: 1px solid rgba(var(--accent-rgb), 0.38);
  border-radius: 999px;
  background: rgba(18, 18, 22, 0.55);
  color: #ececf1;
  font: inherit;
  font-size: clamp(0.56rem, 2.9cqi, 0.82rem);
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  cursor: pointer;
  pointer-events: auto;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition:
    background 0.2s ease,
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    color 0.2s ease,
    transform 0.15s ease,
    filter 0.2s ease;
}

.party-card__friends[hidden] {
  display: none !important;
}

.party-card__experience:not([hidden]) + .party-card__friends {
  display: none !important;
}

.party-card__friends:hover {
  background: rgba(28, 28, 34, 0.72);
  border-color: rgba(var(--accent-rgb), 0.62);
}

.party-card__friends:active {
  transform: scale(0.97);
}

/* Friends present (>0): same complementary glow as Moment teilen */
.party-card__friends--glow {
  border-color: rgba(var(--cta-contrast-rgb), 0.95);
  background:
    linear-gradient(
      135deg,
      rgba(var(--cta-contrast-rgb), 1) 0%,
      rgba(var(--cta-contrast-rgb), 0.82) 55%,
      rgba(var(--cta-contrast-rgb), 0.7) 100%
    );
  color: var(--cta-contrast-text);
  font-weight: 700;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.28);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow:
    0 0 10px rgba(var(--cta-contrast-rgb), 0.75),
    0 0 22px rgba(var(--cta-contrast-rgb), 0.45),
    0 0 40px rgba(var(--cta-contrast-rgb), 0.28),
    0 8px 18px rgba(0, 0, 0, 0.28);
}

.party-card__friends--glow:hover {
  border-color: rgba(var(--cta-contrast-rgb), 1);
  background:
    linear-gradient(
      135deg,
      rgba(var(--cta-contrast-rgb), 1) 0%,
      rgba(var(--cta-contrast-rgb), 0.92) 100%
    );
  color: var(--cta-contrast-text);
  box-shadow:
    0 0 14px rgba(var(--cta-contrast-rgb), 0.9),
    0 0 28px rgba(var(--cta-contrast-rgb), 0.55),
    0 0 48px rgba(var(--cta-contrast-rgb), 0.35),
    0 10px 20px rgba(0, 0, 0, 0.3);
  filter: brightness(1.06);
}

.party-card__friends--en-route.party-card__friends--glow,
.party-card__friends--en-route {
  border-color: rgba(var(--cta-contrast-rgb), 0.95);
  background:
    linear-gradient(
      135deg,
      rgba(var(--cta-contrast-rgb), 1) 0%,
      rgba(var(--cta-contrast-rgb), 0.72) 100%
    );
  color: var(--cta-contrast-text);
  box-shadow:
    0 0 12px rgba(var(--cta-contrast-rgb), 0.7),
    0 0 24px rgba(var(--cta-contrast-rgb), 0.4),
    0 8px 18px rgba(0, 0, 0, 0.22);
}

.party-card__friends--en-route:hover,
.party-card__friends--en-route.party-card__friends--glow:hover {
  background:
    linear-gradient(
      135deg,
      rgba(var(--cta-contrast-rgb), 1) 0%,
      rgba(var(--cta-contrast-rgb), 0.85) 100%
    );
  border-color: rgba(var(--cta-contrast-rgb), 1);
  color: var(--cta-contrast-text);
}

.party-card__friends-count,
.party-card__friends-label {
  line-height: 1;
  white-space: nowrap;
  flex: 0 0 auto;
  color: inherit;
}

.party-card__actions {
  position: relative;
  z-index: 2;
  grid-column: 2;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  align-self: stretch;
  width: var(--pc-actions-col);
  min-height: 100%;
}

.party-card__actions form {
  margin: 0;
  display: contents;
}

.party-card__action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--pc-actions-w);
  height: var(--pc-actions-w);
  padding: 0;
  border-radius: clamp(8px, 2.5cqi, 12px);
  text-decoration: none;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.15s ease;
}

.party-card__action--edit {
  border: 1px solid rgba(120, 120, 120, 0.28);
  background: rgba(150, 150, 150, 0.14);
  color: #8a8a8a;
}

.party-card__action--edit:hover {
  background: rgba(150, 150, 150, 0.24);
}

.party-card__action--share {
  border: 1px solid rgba(120, 120, 120, 0.28);
  background: rgba(150, 150, 150, 0.14);
  color: #8a8a8a;
}

.party-card__action--share:hover {
  background: rgba(150, 150, 150, 0.24);
}

.party-card__action--save {
  border: 1px solid rgba(120, 120, 120, 0.28);
  background: rgba(150, 150, 150, 0.14);
  color: #8a8a8a;
}

.party-card__action--save:hover {
  background: rgba(150, 150, 150, 0.24);
}

.party-card__action--save.is-saved {
  border-color: rgba(var(--accent-rgb), 0.45);
  background: rgba(var(--accent-rgb), 0.18);
  color: var(--accent-soft);
}

.party-card__action--comment {
  border: 1px solid rgba(120, 120, 120, 0.28);
  background: rgba(150, 150, 150, 0.14);
  color: #8a8a8a;
}

.party-card__action--comment:hover {
  background: rgba(150, 150, 150, 0.24);
}

.party-card__action--route {
  border: 1px solid rgba(120, 120, 120, 0.28);
  background: rgba(150, 150, 150, 0.14);
  color: #8a8a8a;
}

.party-card__action--route:hover {
  background: rgba(150, 150, 150, 0.24);
}

.party-card__action--delete {
  border: 1px solid rgba(196, 60, 60, 0.28);
  background: rgba(220, 80, 80, 0.16);
  color: #b42323;
}

.party-card__action--delete:hover {
  background: rgba(220, 80, 80, 0.26);
}

.party-card__action:active {
  transform: scale(0.96);
}

.party-card__icon {
  width: clamp(0.85rem, 4.5cqi, 1.05rem);
  height: clamp(0.85rem, 4.5cqi, 1.05rem);
}

.party-card__icon--marker {
  width: clamp(0.9rem, 4.8cqi, 1.15rem);
  height: clamp(0.9rem, 4.8cqi, 1.15rem);
}

/* Party card — scale & nudge zones by card width (not viewport) */
@container party-card (max-width: 520px) {
  .party-card {
    --pc-center-reserve: 32%;
  }

  .party-card__main {
    max-width: 34%;
  }

  .party-card__name {
    max-width: calc(100cqi - var(--pc-actions-col) - 32%);
  }

  .party-card__right,
  .party-card__more--center {
    width: min(100%, min(13rem, calc(100cqi - var(--pc-actions-col) - 34% - 0.3rem)));
    max-width: min(13rem, calc(100cqi - var(--pc-actions-col) - 34% - 0.3rem));
    transform: translate(calc(-50% - 0.4rem), var(--pc-center-y));
  }

  .party-card__description {
    -webkit-line-clamp: 3;
    line-clamp: 3;
  }
}

@container party-card (max-width: 420px) {
  .party-card {
    --pc-center-reserve: 34%;
  }

  .party-card__main {
    max-width: 31%;
  }

  .party-card__name {
    max-width: calc(100cqi - var(--pc-actions-col) - 34%);
  }

  .party-card__right,
  .party-card__more--center {
    width: min(100%, min(10.5rem, calc(100cqi - var(--pc-actions-col) - 32% - 0.22rem)));
    max-width: min(10.5rem, calc(100cqi - var(--pc-actions-col) - 32% - 0.22rem));
    transform: translate(calc(-50% - 0.6rem), var(--pc-center-y));
  }

  .party-card__description {
    -webkit-line-clamp: 2;
    line-clamp: 2;
  }

  .party-card__creator {
    font-size: clamp(0.54rem, 3cqi, 0.8rem);
  }

  .party-card__friends {
    font-size: clamp(0.52rem, 2.8cqi, 0.76rem);
  }

  .party-rating__split-avg {
    font-size: clamp(0.52rem, 2.5cqi, 0.65rem);
  }
}

@container party-card (max-width: 360px) {
  .party-card {
    --pc-center-reserve: 36%;
  }

  .party-card__main {
    max-width: 28%;
  }

  .party-card__name {
    max-width: calc(100cqi - var(--pc-actions-col) - 36%);
  }

  .party-card__right,
  .party-card__more--center {
    width: min(100%, min(9rem, calc(100cqi - var(--pc-actions-col) - 28% - 0.18rem)));
    max-width: min(9rem, calc(100cqi - var(--pc-actions-col) - 28% - 0.18rem));
    transform: translate(calc(-50% - 0.8rem), -48%);
  }

  .party-card__creator {
    font-size: clamp(0.52rem, 2.8cqi, 0.76rem);
    font-weight: 500;
  }

  .party-card__friends {
    font-size: clamp(0.5rem, 2.6cqi, 0.72rem);
    font-weight: 600;
  }
}

@container party-card (max-width: 300px) {
  .party-card {
    --pc-center-reserve: 38%;
  }

  .party-card__main {
    max-width: 26%;
  }

  .party-card__name {
    max-width: calc(100cqi - var(--pc-actions-col) - 38%);
  }

  .party-card__right,
  .party-card__more--center {
    width: min(100%, min(7.5rem, calc(100cqi - var(--pc-actions-col) - 26%)));
    max-width: min(7.5rem, calc(100cqi - var(--pc-actions-col) - 26%));
    transform: translate(calc(-50% - 0.95rem), -48%);
  }

  .party-card__description {
    -webkit-line-clamp: 2;
    line-clamp: 2;
  }
}

@container party-card (min-width: 480px) {
  .party-card {
    --pc-center-reserve: 28%;
    --pc-center-max: min(16rem, calc(100cqi - var(--pc-actions-col) - 34% - 0.5rem));
  }

  .party-card__main {
    max-width: 40%;
  }

  .party-card__name {
    max-width: calc(100cqi - var(--pc-actions-col) - 28%);
  }

  .party-card__right,
  .party-card__more--center {
    width: min(100%, var(--pc-center-max));
    max-width: var(--pc-center-max);
    transform: translate(calc(-50% + var(--pc-center-shift)), var(--pc-center-y));
  }

  .party-card__description {
    -webkit-line-clamp: 4;
    line-clamp: 4;
  }
}

@container party-card (min-width: 600px) {
  .party-card {
    --pc-main-max: 42%;
    --pc-center-reserve: 26%;
    --pc-center-max: min(18rem, calc(100cqi - var(--pc-actions-col) - 36% - 0.55rem));
  }

  .party-card__main {
    max-width: var(--pc-main-max);
  }

  .party-card__name {
    max-width: calc(100cqi - var(--pc-actions-col) - 26%);
  }

  .party-card__right,
  .party-card__more--center {
    width: min(100%, var(--pc-center-max));
    max-width: var(--pc-center-max);
  }
}

@container party-card (min-width: 720px) {
  .party-card {
    --pc-main-max: 44%;
    --pc-center-reserve: 24%;
    --pc-center-max: min(20rem, calc(100cqi - var(--pc-actions-col) - 38% - 0.65rem));
  }

  .party-card__name {
    max-width: calc(100cqi - var(--pc-actions-col) - 24%);
  }

  .party-card__right,
  .party-card__more--center {
    width: min(100%, var(--pc-center-max));
    max-width: var(--pc-center-max);
  }
}

.party-detail-page {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  --pd-stack-gap: 0.85rem;
  /* Vertical scroll native; horizontal swipes handled by setupPartyDetailEdgeSwipe */
  touch-action: pan-y;
}

.party-detail__avatar-wrap {
  position: absolute;
  top: calc(0.85rem + env(safe-area-inset-top, 0px));
  left: calc(0.85rem + env(safe-area-inset-left, 0px));
  z-index: 30;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.party-detail__avatar-wrap .party-detail__avatar {
  position: static;
}

.party-detail__avatar {
  position: absolute;
  top: calc(0.85rem + env(safe-area-inset-top, 0px));
  left: calc(0.85rem + env(safe-area-inset-left, 0px));
  z-index: 30;
  display: grid;
  place-items: center;
  width: 4.1rem;
  height: 4.1rem;
  overflow: hidden;
  border: 0;
  border-radius: 999px;
  background: rgba(18, 16, 28, 0.72);
  box-shadow: var(--glow-soft), 0 8px 22px rgba(0, 0, 0, 0.28);
  color: var(--ink);
  text-decoration: none;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.party-detail__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.party-detail__avatar-letter {
  font-family: var(--font-display);
  font-size: 1.7rem;
  line-height: 1;
  letter-spacing: 0.02em;
  color: var(--accent-soft);
}

.party-detail__match {
  position: absolute;
  top: calc(0.85rem + env(safe-area-inset-top, 0px));
  right: calc(0.85rem + env(safe-area-inset-right, 0px));
  z-index: 30;
}

.party-detail__match-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 4.1rem;
  height: 4.1rem;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(18, 16, 28, 0.72);
  box-shadow: var(--glow-soft), 0 8px 22px rgba(0, 0, 0, 0.28);
  color: var(--ink);
  cursor: pointer;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.party-detail__match-btn:hover {
  background: rgba(28, 24, 42, 0.88);
}

.party-detail__match-btn--static {
  cursor: default;
}

.party-detail__match-btn--static:hover {
  background: rgba(18, 16, 28, 0.72);
}

.partys-page--user {
  position: relative;
}

.partys-page--user .partys-hero {
  padding-top: max(7.4rem, calc(5.6rem + env(safe-area-inset-top, 0px)));
}

.partys-page--user .partys-title {
  max-width: min(16ch, calc(100vw - 10.4rem));
  overflow-wrap: anywhere;
}

.party-detail__match-ring {
  position: relative;
  width: 3.2rem;
  height: 3.2rem;
}

.party-detail__match-ring svg {
  display: block;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.party-detail__match-track {
  fill: none;
  stroke: rgba(255, 255, 255, 0.16);
  stroke-width: 2.8;
}

.party-detail__match-value {
  fill: none;
  stroke: var(--accent-bright);
  stroke-width: 2.8;
  stroke-linecap: round;
  stroke-dasharray: var(--match, 0) 100;
  filter: drop-shadow(0 0 6px rgba(var(--accent-rgb), 0.45));
}

.party-detail__match-label {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 0.86rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  pointer-events: none;
}

.chats-party-pop--detail {
  position: absolute;
  top: calc(100% + 0.55rem);
  right: 0;
  left: auto;
  transform: none;
  width: min(20.5rem, calc(100vw - 1.5rem));
}

.chats-party-pop--detail .chats-party-pop__panel::before {
  left: auto;
  right: 1.1rem;
  transform: rotate(45deg);
}

.party-detail__content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--pd-stack-gap, 0.85rem);
  text-align: center;
  width: min(100%, 720px);
  margin: 0 auto;
  padding: max(12vh, calc(5.6rem + env(safe-area-inset-top, 0px))) 1.25rem calc(6.5rem + env(safe-area-inset-bottom));
}

.party-detail__content > .party-rating {
  justify-content: center;
  margin: 0;
}

.party-detail__title {
  margin: 0;
  max-width: min(18ch, 100%);
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 9vw, 3.8rem);
  letter-spacing: 0.03em;
  line-height: 0.95;
  color: var(--ink);
  overflow-wrap: anywhere;
}

.party-detail__title a {
  color: inherit;
  text-decoration: none;
}

.party-detail__title a:focus-visible {
  outline: 2px solid var(--accent, #c9a227);
  outline-offset: 4px;
  border-radius: 0.2rem;
}

.party-detail__views {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  margin: 0;
  color: var(--muted);
  font-size: 0.9rem;
  font-weight: 500;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}

.party-detail__views-icon {
  width: 1.15rem;
  height: 1.15rem;
  display: block;
  flex: 0 0 auto;
}

.party-detail__views-count {
  appearance: none;
  min-width: 1ch;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}

.party-detail__views-count:hover,
.party-detail__views-count:focus-visible {
  color: var(--ink-soft);
  text-decoration: underline;
  text-underline-offset: 0.12em;
}

.party-detail__occupancy {
  margin: 0;
  color: var(--muted);
  font-size: 0.86rem;
  font-weight: 650;
  line-height: 1.25;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.party-detail__occupancy[hidden] {
  display: none;
}

.party-detail__occupancy.is-busy {
  color: #ffd166;
}

.party-detail__occupancy.is-hot {
  color: #ff3b4a;
  animation: occupancy-hot-glow 1.45s ease-in-out infinite;
}

@keyframes occupancy-hot-glow {
  0%,
  100% {
    text-shadow: 0 0 6px rgba(255, 59, 74, 0.72), 0 0 14px rgba(255, 32, 54, 0.38);
  }
  50% {
    text-shadow: 0 0 12px rgba(255, 86, 96, 1), 0 0 26px rgba(255, 40, 60, 0.78);
  }
}

.party-views-pop {
  position: absolute;
  top: calc(100% + 0.45rem);
  left: 50%;
  z-index: 40;
  width: min(18.5rem, calc(100vw - 2rem));
  transform: translateX(-50%);
}

.party-views-pop[hidden] {
  display: none;
}

.party-views-pop__panel {
  padding: 0.85rem 0.95rem 1rem;
  border-radius: 16px;
  background: var(--panel-solid);
  border: 1px solid var(--panel-border);
  box-shadow: var(--shadow);
  color: var(--ink);
}

.party-views-pop__toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.7rem;
}

.party-views-pop__title {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
}

.party-views-pop__close {
  appearance: none;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
}

.party-views-pop__close:hover,
.party-views-pop__close:focus-visible {
  color: var(--ink);
}

.party-views-pop__table {
  width: 100%;
  border-collapse: collapse;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.party-views-pop__table th,
.party-views-pop__table td {
  padding: 0.45rem 0.5rem;
  border-bottom: 1px solid var(--panel-border);
}

.party-views-pop__table th {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 600;
}

.party-views-pop__table td {
  font-size: 1.05rem;
  font-weight: 700;
}

.party-views-pop__table tr:last-child th,
.party-views-pop__table tr:last-child td {
  border-bottom: 0;
}

.party-detail__schedule {
  width: 100%;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--pd-stack-gap, 0.85rem);
  text-align: left;
}

.party-detail__period {
  margin: 0;
  color: var(--muted);
  font-size: 0.92rem;
  font-weight: 600;
  line-height: 1.45;
}

.party-detail__fixed-dates {
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--text);
  font-size: 0.95rem;
  font-weight: 500;
  line-height: 1.55;
}

.party-detail__fixed-dates li + li {
  margin-top: 0.2rem;
}

.schedule-box--readonly {
  pointer-events: none;
}

.schedule-box--readonly .schedule-row__times {
  display: inline-flex;
}

.schedule-box--readonly .schedule-row__day {
  cursor: default;
}

.time-chip--static {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: default;
}

.party-detail__link {
  margin: 0;
  max-width: 100%;
  color: var(--info);
  font-size: 0.98rem;
  font-weight: 600;
  line-height: 1.4;
  overflow-wrap: anywhere;
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.party-detail__link--empty {
  color: var(--muted);
  font-weight: 500;
  text-decoration: none;
}

.party-detail__nearest-address {
  margin: 0;
  max-width: 36rem;
  color: var(--muted);
  font-size: 0.92rem;
  font-weight: 600;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.party-detail__nearest-address[hidden],
[data-party-nearest-address-wrap][hidden] {
  display: none !important;
}

.party-detail__nearest-address a {
  color: var(--ink);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 0.12em;
}

.party-detail__nearest-address a:hover,
.party-detail__nearest-address a:focus-visible {
  color: var(--accent, #e10600);
}

.party-detail__location {
  margin: 0;
  max-width: 36rem;
  color: var(--ink);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.party-detail__distance {
  margin: 0.25rem 0 0;
  color: var(--muted);
  font-size: 0.92rem;
  font-weight: 600;
}

.party-detail__distance[hidden] {
  display: none !important;
}

.party-detail__description-block {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--pd-stack-gap, 0.85rem);
  max-width: 36rem;
  text-align: left;
  width: 100%;
}

.party-detail__description-label {
  margin: 0;
  color: var(--ink);
  font-size: 1rem;
  font-weight: 700;
}

.party-detail__description {
  margin: 0;
  color: var(--ink-soft);
  font-size: 1rem;
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.party-detail__price {
  margin: 0;
  color: var(--ink);
  font-size: 0.98rem;
  font-weight: 600;
}

.party-media {
  width: 100%;
  margin: 0;
}

.party-media__empty {
  margin: 0;
  color: var(--muted);
  text-align: center;
}

.party-media__grid {
  display: grid;
  justify-content: center;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: 1rem;
  width: 100%;
}

.party-media__item {
  margin: 0;
  overflow: hidden;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.88);
  border: 1px solid rgba(17, 17, 17, 0.1);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08);
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
}

.party-media__item img,
.party-media__item video {
  display: block;
  width: 100%;
  height: auto;
}

.party-media__item audio {
  display: block;
  width: 100%;
  padding: 1rem;
}

.party-media__file {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 8rem;
  padding: 1rem;
  color: var(--ink);
  font-weight: 600;
  text-decoration: none;
}

.party-share-kit {
  width: 100%;
  margin-top: 2.25rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.party-share-kit__title {
  margin: 0 0 1.25rem;
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 4vw, 2.4rem);
  letter-spacing: 0.04em;
  font-weight: 400;
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

.party-share-kit__lead {
  margin: 0 0 1.25rem;
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.45;
}

.party-share-kit__group + .party-share-kit__group {
  margin-top: 1.35rem;
}

.party-share-kit__group-title {
  margin: 0 0 0.7rem;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--ink-soft);
}

.party-share-kit__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 140px), 1fr));
  gap: 0.85rem;
  width: 100%;
}

.party-share-kit__item {
  margin: 0;
}

.party-share-kit__card {
  position: relative;
  overflow: hidden;
  border-radius: 14px;
  border: 1px solid rgba(0, 240, 255, 0.35);
  background: rgba(0, 0, 0, 0.35);
  box-shadow:
    0 0 0 1px rgba(255, 43, 214, 0.22),
    0 0 18px rgba(0, 240, 255, 0.28),
    0 0 36px rgba(255, 43, 214, 0.18),
    0 10px 24px rgba(0, 0, 0, 0.28);
  animation: share-kit-neon-pulse 2.8s ease-in-out infinite;
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.party-share-kit__card::before {
  content: "";
  position: absolute;
  inset: -40% -60%;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    115deg,
    transparent 35%,
    rgba(0, 240, 255, 0.28) 48%,
    rgba(255, 43, 214, 0.22) 52%,
    transparent 65%
  );
  transform: translateX(-30%);
  animation: share-kit-shimmer 3.6s ease-in-out infinite;
}

.party-share-kit__card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(184, 255, 60, 0.18);
}

.party-share-kit__item:nth-child(2n) .party-share-kit__card {
  animation-delay: 0.45s;
}

.party-share-kit__item:nth-child(3n) .party-share-kit__card {
  animation-delay: 0.9s;
}

.party-share-kit__item:nth-child(2n) .party-share-kit__card::before {
  animation-delay: 0.7s;
}

.party-share-kit__item:nth-child(3n) .party-share-kit__card::before {
  animation-delay: 1.4s;
}

.party-share-kit__card:hover {
  transform: translateY(-3px) scale(1.01);
  border-color: rgba(184, 255, 60, 0.65);
  box-shadow:
    0 0 0 1px rgba(0, 240, 255, 0.45),
    0 0 24px rgba(255, 43, 214, 0.4),
    0 0 48px rgba(0, 240, 255, 0.28),
    0 14px 28px rgba(0, 0, 0, 0.35);
}

@keyframes share-kit-neon-pulse {
  0%,
  100% {
    box-shadow:
      0 0 0 1px rgba(255, 43, 214, 0.22),
      0 0 14px rgba(0, 240, 255, 0.22),
      0 0 28px rgba(255, 43, 214, 0.14),
      0 10px 24px rgba(0, 0, 0, 0.28);
  }
  50% {
    box-shadow:
      0 0 0 1px rgba(0, 240, 255, 0.45),
      0 0 26px rgba(255, 43, 214, 0.4),
      0 0 52px rgba(184, 255, 60, 0.18),
      0 12px 28px rgba(0, 0, 0, 0.32);
  }
}

@keyframes share-kit-shimmer {
  0%,
  18% {
    transform: translateX(-45%);
    opacity: 0;
  }
  35% {
    opacity: 1;
  }
  55% {
    transform: translateX(45%);
    opacity: 0.15;
  }
  100% {
    transform: translateX(55%);
    opacity: 0;
  }
}

.party-share-kit__link {
  position: relative;
  z-index: 2;
  display: block;
}

.party-share-kit__link img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  background: #0b0a10;
}

.party-share-kit__group[data-kind='instagramStory'] .party-share-kit__link img,
.party-share-kit__group[data-kind='poster'] .party-share-kit__link img {
  aspect-ratio: 9 / 16;
}

.party-share-kit__share {
  position: absolute;
  right: 0.55rem;
  bottom: 0.55rem;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.4rem;
  height: 2.4rem;
  margin: 0;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 999px;
  background: rgba(11, 10, 16, 0.72);
  color: #f4f2f8;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(8px);
  cursor: pointer;
  transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}

.party-share-kit__share:hover,
.party-share-kit__share:focus-visible {
  transform: scale(1.06);
  background: rgba(var(--accent-rgb), 0.82);
  border-color: rgba(255, 255, 255, 0.45);
  outline: none;
}

.party-share-kit__share:active {
  transform: scale(0.96);
}

.party-share-kit__share:disabled {
  opacity: 0.65;
  cursor: wait;
}

.party-share-kit__share-icon {
  width: 1.15rem;
  height: 1.15rem;
  display: block;
}

.party-share-kit__caption {
  margin-top: 0.4rem;
  font-size: 0.8rem;
  color: var(--muted);
  text-align: center;
}

.media-preview {
  position: fixed;
  inset: 0;
  z-index: 10040;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: env(safe-area-inset-top, 0) env(safe-area-inset-right, 0) env(safe-area-inset-bottom, 0)
    env(safe-area-inset-left, 0);
  background: rgba(0, 0, 0, 0.92);
  touch-action: none;
}

.media-preview[hidden] {
  display: none !important;
}

.media-preview__frame {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  max-width: 100vw;
  max-height: 100dvh;
}

.media-preview__close {
  position: absolute;
  top: max(0.65rem, env(safe-area-inset-top, 0px));
  right: max(0.65rem, env(safe-area-inset-right, 0px));
  z-index: 2;
  width: 2.5rem;
  height: 2.5rem;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
}

.media-preview__close:hover {
  background: rgba(255, 255, 255, 0.24);
}

.media-preview__image,
.media-preview__video {
  display: block;
  max-width: min(100%, 100vw);
  max-height: min(100%, 100dvh);
  width: auto;
  height: auto;
  object-fit: contain;
  background: #000;
}

.media-preview__image[hidden],
.media-preview__video[hidden] {
  display: none !important;
}

.media-preview__edit {
  position: absolute;
  left: 0;
  right: 0;
  bottom: max(0.85rem, env(safe-area-inset-bottom, 0px));
  z-index: 3;
  display: grid;
  grid-template-columns: 2.75rem minmax(0, 1fr) 2.75rem;
  align-items: end;
  gap: 0.55rem;
  padding: 0 0.75rem;
  pointer-events: none;
}

.media-preview__edit[hidden] {
  display: none !important;
}

.media-preview__side--start {
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  justify-content: flex-end;
  gap: 0.45rem;
  pointer-events: none;
}

.media-preview__wand,
.media-preview__undo,
.media-preview__mic {
  pointer-events: auto;
  width: 2.75rem;
  height: 2.75rem;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
  cursor: pointer;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.28);
}

.media-preview__wand:hover,
.media-preview__undo:hover,
.media-preview__mic:hover {
  background: rgba(255, 255, 255, 0.26);
}

.media-preview__wand svg,
.media-preview__undo svg,
.media-preview__mic svg {
  width: 1.25rem;
  height: 1.25rem;
  display: block;
}

.media-preview__mic-glyph {
  position: relative;
  width: 1.25rem;
  height: 1.25rem;
  display: block;
}

.media-preview__mic-slash {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1.55rem;
  height: 0.14rem;
  border-radius: 999px;
  background: currentColor;
  box-shadow: 0 0 0 1.5px rgba(20, 20, 28, 0.75);
  transform: translate(-50%, -50%) rotate(-45deg);
  opacity: 0;
  pointer-events: none;
}

.media-preview__mic.is-muted .media-preview__mic-slash {
  opacity: 1;
}

.media-preview__mic.is-muted {
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.92);
}

.media-preview__mic.is-recording {
  background: rgba(220, 40, 60, 0.88);
  color: #fff;
  box-shadow:
    0 0 0 2px rgba(255, 255, 255, 0.55),
    0 0 18px rgba(220, 40, 60, 0.55),
    0 8px 22px rgba(0, 0, 0, 0.28);
  animation: media-preview-mic-pulse 1s ease-in-out infinite;
}

@keyframes media-preview-mic-pulse {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.06);
  }
}

.media-preview__undo[hidden] {
  visibility: hidden;
  pointer-events: none;
}

.media-preview__side--start .media-preview__undo[hidden] {
  display: none !important;
  visibility: visible;
  pointer-events: none;
}

.media-preview__undo svg {
  transform-origin: 45% 55%;
  animation: media-preview-undo-swing 1.6s ease-in-out infinite;
}

@keyframes media-preview-undo-swing {
  0%,
  100% {
    transform: rotate(-18deg);
  }
  50% {
    transform: rotate(16deg);
  }
}

.media-preview__wand.is-spark {
  animation: media-preview-wand-spark 0.45s ease;
}

@keyframes media-preview-wand-spark {
  0% {
    transform: scale(1) rotate(0deg);
  }
  40% {
    transform: scale(1.12) rotate(-12deg);
  }
  100% {
    transform: scale(1) rotate(0deg);
  }
}

.media-preview__filters {
  pointer-events: auto;
  position: relative;
  min-width: 0;
  height: 5.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.media-preview__filter-ring {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 3.55rem;
  height: 3.55rem;
  transform: translate(-50%, -58%);
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.92);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.35),
    0 0 18px rgba(255, 255, 255, 0.18);
  pointer-events: none;
  z-index: 2;
}

.media-preview__filter-track {
  display: flex;
  align-items: flex-end;
  gap: 0.7rem;
  width: 100%;
  height: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: none;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: 0.35rem 0 0.15rem;
  touch-action: pan-x;
  -webkit-overflow-scrolling: touch;
}

.media-preview__filter-track::-webkit-scrollbar {
  display: none;
}

.media-preview__filter-pad {
  flex: 0 0 calc(50% - 1.6rem);
  height: 1px;
  scroll-snap-align: none;
}

.media-preview__filter-chip {
  flex: 0 0 auto;
  width: 3.2rem;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: #fff;
  cursor: pointer;
  scroll-snap-align: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.28rem;
}

.media-preview__filter-thumb {
  width: 3.2rem;
  height: 3.2rem;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.12);
  background-size: cover;
  background-position: center;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.28);
}

.media-preview__filter-chip.is-selected .media-preview__filter-thumb {
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.45),
    0 0 0 2px rgba(255, 255, 255, 0.55);
}

.media-preview__filter-label {
  font-size: 0.68rem;
  line-height: 1;
  opacity: 0.86;
  white-space: nowrap;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
}

@media (prefers-reduced-motion: reduce) {
  .media-preview__undo svg,
  .media-preview__wand.is-spark,
  .media-preview__mic.is-recording {
    animation: none;
  }
}


.party-detail__actions {
  width: 100%;
  margin: 0;
  display: grid;
  gap: var(--pd-stack-gap, 0.85rem);
}

.party-detail__actions + .party-media {
  margin-top: 0;
}

.party-live {
  display: grid;
  gap: var(--pd-stack-gap, 0.85rem);
  width: 100%;
}

.party-live__slot {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 16 / 9;
  min-height: min(56dvh, 28rem);
  overflow: hidden;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background:
    radial-gradient(ellipse 70% 55% at 50% 40%, rgba(var(--accent-rgb), 0.18), transparent 62%),
    #07070c;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.28);
  color: rgba(255, 255, 255, 0.78);
}

.party-live__video {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #050508;
  transform: scaleX(-1);
  -webkit-transform: scaleX(-1);
  pointer-events: none;
}

.party-live__slot.is-remote .party-live__video {
  transform: none;
  -webkit-transform: none;
}

.party-live__slot.is-playing .party-live__video {
  background: transparent;
}

.party-live__slot.is-playing .party-live__label,
.party-live__slot.is-playing .party-live__start {
  display: none;
}

.party-live__slot.is-playing .party-live__play[hidden],
.party-live__play[hidden] {
  display: none !important;
}

.party-live__slot--empty .party-live__badge {
  display: none;
}

.party-live__slot--empty .party-live__label {
  color: rgba(255, 255, 255, 0.38);
}

.party-live__badge {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  z-index: 2;
  padding: 0.18rem 0.5rem;
  border-radius: 6px;
  background: #e11d2e;
  color: #fff;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  pointer-events: none;
}

.party-live__label {
  position: relative;
  z-index: 2;
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  pointer-events: none;
}

.party-live__start {
  position: relative;
  z-index: 3;
  margin-top: 0.85rem;
  padding: 0.55rem 1rem;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  color: #111;
  font: inherit;
  font-size: 0.92rem;
  font-weight: 650;
  cursor: pointer;
  pointer-events: auto;
}

.party-live__start[hidden] {
  display: none !important;
}

.party-live__play {
  position: absolute;
  z-index: 4;
  inset: 0;
  margin: auto;
  width: 4.2rem;
  height: 4.2rem;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.55);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  cursor: pointer;
  pointer-events: auto;
}

.party-live__play:hover,
.party-live__play:focus-visible {
  background: rgba(0, 0, 0, 0.72);
}

.party-live__play-icon {
  display: block;
  width: 0;
  height: 0;
  margin-left: 0.28rem;
  border-style: solid;
  border-width: 0.7rem 0 0.7rem 1.15rem;
  border-color: transparent transparent transparent #fff;
}

.party-detail__action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 100%;
  min-height: 3rem;
  padding: 0.75rem 1.25rem;
  border: 1px solid rgba(17, 17, 17, 0.18);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.14);
  color: var(--ink);
  font: inherit;
  font-weight: 600;
  text-decoration: none;
  transition: transform 0.15s ease, background 0.2s ease;
}

.party-detail__action-btn:hover {
  background: #f7f7f7;
}

.party-detail__action-btn:active {
  transform: scale(0.98);
}

.party-form-page {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  touch-action: pan-y;
}

.party-form {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 1.15rem;
  width: min(100%, 520px);
  margin: 0 auto;
  padding: 1.5rem 1.25rem calc(6.5rem + env(safe-area-inset-bottom));
}

.party-form__preview-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 100%;
  min-height: 3rem;
  padding: 0.75rem 1.25rem;
  border: 1px solid rgba(17, 17, 17, 0.18);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.14);
  color: var(--ink);
  font: inherit;
  font-weight: 600;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  transition: transform 0.15s ease, background 0.2s ease;
}

.party-form__preview-btn:hover {
  background: #f7f7f7;
}

.party-form__preview-btn:active {
  transform: scale(0.98);
}

.party-form__preview-btn--disabled,
.party-form__preview-btn:disabled {
  opacity: 0.48;
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}

.party-preview-banner {
  position: relative;
  z-index: 4;
  width: 100%;
  max-width: 34rem;
  margin: 0 auto 0.85rem;
  padding: 0.95rem 1.15rem;
  border-radius: 14px;
  background: #fff4f4;
  border: 2px solid #c62828;
  box-shadow:
    0 0 0 3px rgba(198, 40, 40, 0.22),
    0 12px 28px rgba(0, 0, 0, 0.35);
  color: #8f1212;
  font-size: clamp(1rem, 0.92rem + 0.35vw, 1.12rem);
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: 0.01em;
  text-align: center;
  text-wrap: balance;
  outline: none;
  scroll-margin-top: calc(1rem + env(safe-area-inset-top, 0px));
  transition:
    box-shadow 0.2s ease,
    transform 0.2s ease,
    background 0.2s ease;
}

.party-preview-banner.is-attention {
  background: #ffe8e8;
  box-shadow:
    0 0 0 4px rgba(198, 40, 40, 0.45),
    0 0 0 10px rgba(255, 90, 90, 0.2),
    0 14px 32px rgba(0, 0, 0, 0.4);
  transform: scale(1.02);
  animation: party-preview-banner-pulse 0.9s ease;
}

@keyframes party-preview-banner-pulse {
  0%,
  100% {
    transform: scale(1.02);
  }
  40% {
    transform: scale(1.045);
  }
}

.party-detail-page--preview a[href]:not(.party-preview-remove):not(.bottom-nav__btn):not(.party-share-kit__link),
.party-detail-page--preview button:not(.party-preview-remove),
.party-detail-page--preview [role="button"]:not(.party-preview-remove),
.party-detail-page--preview .party-rating,
.party-detail-page--preview .party-live__slot {
  cursor: not-allowed;
}

.party-detail-page--preview .party-share-kit__link,
.party-detail-page--preview .party-media__item {
  cursor: zoom-in;
}

.party-preview-target {
  position: relative;
}

.party-preview-target--inline {
  display: flex;
  align-items: flex-start;
  gap: 0.45rem;
}

.party-preview-target--link {
  display: grid;
  gap: 0.35rem;
}

.party-preview-target--map {
  width: 100%;
}

.party-preview-target--address {
  width: 100%;
  max-width: 36rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
}

.party-preview-target--address > .party-preview-remove {
  position: static;
  margin: 0;
}

.party-preview-target.is-removing {
  opacity: 0;
  transform: scale(0.98);
  max-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden;
  pointer-events: none;
  transition:
    opacity 0.22s ease,
    transform 0.22s ease,
    max-height 0.28s ease,
    margin 0.28s ease,
    padding 0.28s ease;
}

.party-preview-remove {
  position: absolute;
  top: 0.35rem;
  right: 0.35rem;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.15rem;
  height: 2.15rem;
  margin: 0;
  padding: 0;
  border: 1px solid rgba(196, 60, 60, 0.35);
  border-radius: 10px;
  background: rgba(220, 80, 80, 0.88);
  color: #fff;
  box-shadow: 0 6px 16px rgba(180, 35, 35, 0.28);
  cursor: pointer;
  transition: transform 0.15s ease, background 0.15s ease, filter 0.15s ease;
}

.party-preview-target--inline > .party-preview-remove {
  position: static;
  flex-shrink: 0;
  width: 1.85rem;
  height: 1.85rem;
  border-radius: 8px;
}

.party-detail__price.party-preview-target > .party-preview-remove,
.party-preview-target--link > .party-preview-remove {
  position: static;
  margin: 0 0 0.45rem auto;
}

.party-detail__price.party-preview-target {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
}

.party-preview-remove:hover,
.party-preview-remove:focus-visible {
  background: rgba(196, 40, 40, 0.98);
  filter: brightness(1.05);
  outline: none;
}

.party-preview-remove:active {
  transform: scale(0.94);
}

.party-preview-remove:disabled {
  opacity: 0.55;
  cursor: wait;
}

.party-preview-remove__icon {
  width: 1.05rem;
  height: 1.05rem;
  pointer-events: none;
}

.field__optional {
  font-weight: 400;
  color: var(--muted);
}

.field__hint {
  font-size: 0.82rem;
  color: var(--muted);
}

.live-cameras-notes {
  display: grid;
  gap: 0.85rem;
  margin: 0.15rem 0 0;
}

.live-cameras-notes .field__hint {
  margin: 0;
  line-height: 1.45;
}

.live-cameras-notes__confirm {
  font-weight: 650;
}

.field__input--file {
  padding: 0.7rem;
  background: rgba(255, 255, 255, 0.95);
}

.media-field {
  position: relative;
}

.media-field__input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}

.media-field__control {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 3rem;
  padding: 0.7rem 0.95rem;
  border: 1px solid rgba(17, 17, 17, 0.18);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.95);
  cursor: pointer;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.media-field__control:hover {
  border-color: rgba(17, 17, 17, 0.35);
}

.media-field__input:focus + .media-field__control {
  border-color: var(--ink);
  box-shadow: 0 0 0 3px rgba(17, 17, 17, 0.12);
}

.media-field__button {
  border: 0;
  padding: 0;
  background: transparent;
  font: inherit;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  text-align: left;
}

.media-field__count {
  flex-shrink: 0;
  min-width: 1.5rem;
  border: 0;
  padding: 0;
  background: transparent;
  text-align: right;
  color: #8a8a8a;
  font: inherit;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}

.media-dropdown {
  position: absolute;
  top: calc(100% + 0.35rem);
  left: 0;
  right: 0;
  z-index: 25;
  margin: 0;
  padding: 0.35rem 0;
  list-style: none;
  border: 1px solid rgba(17, 17, 17, 0.16);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.12);
  max-height: 16rem;
  overflow: auto;
}

.media-dropdown__item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  gap: 0.55rem;
  align-items: center;
  padding: 0.55rem 0.8rem;
}

.media-dropdown__index {
  color: var(--muted);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.media-dropdown__name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.92rem;
  color: var(--ink);
}

.media-dropdown__preview {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.35rem;
  height: 1.35rem;
  overflow: hidden;
  border-radius: 4px;
  background: #ececec;
  flex-shrink: 0;
}

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

.media-dropdown__preview--file {
  color: #777;
  font-size: 0.85rem;
  font-weight: 700;
}

.media-dropdown__video-badge {
  position: absolute;
  right: -0.1rem;
  bottom: -0.15rem;
  width: 0.75rem;
  height: 0.75rem;
  color: #111;
  filter: drop-shadow(0 0 1px #fff);
}

.media-dropdown__edit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.7rem;
  height: 1.7rem;
  padding: 0;
  border: 1px solid rgba(120, 120, 120, 0.28);
  border-radius: 8px;
  background: rgba(150, 150, 150, 0.14);
  color: #8a8a8a;
  cursor: pointer;
}

.media-dropdown__edit:hover {
  background: rgba(150, 150, 150, 0.24);
}

.media-dropdown__icon {
  width: 0.95rem;
  height: 0.95rem;
}

.field__textarea {
  resize: vertical;
  min-height: 8rem;
  line-height: 1.45;
}

.schedule-box {
  display: grid;
  gap: 0.15rem;
  padding: 0.55rem 0.7rem;
  border: 1px solid rgba(17, 17, 17, 0.18);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.95);
}

.live-cameras {
  display: grid;
  gap: 0.85rem;
  padding: 0.7rem 0.85rem;
  border: 1px solid rgba(17, 17, 17, 0.18);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.95);
}

.live-cameras__section {
  display: grid;
  gap: 0.05rem;
}

.live-cameras__section + .live-cameras__section {
  padding-top: 0.75rem;
  border-top: 1px solid rgba(17, 17, 17, 0.1);
}

.live-cameras__heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  margin: 0 0 0.2rem;
}

.live-cameras__title {
  margin: 0;
  font-size: 0.88rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--ink);
}

.live-cameras__connect {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: #9a9a9a;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 300;
  font-style: italic;
  line-height: 1.2;
  min-height: 1.15rem;
  cursor: pointer;
}

.live-cameras__connect:hover,
.live-cameras__connect:focus-visible {
  color: #b8b8b8;
}

.live-cameras__connect.is-connected {
  color: #b8b8b8;
}

.live-cameras__connect.is-live-stop {
  gap: 0.4rem;
  color: #9a9a9a;
  font-style: italic;
  font-weight: 300;
  font-size: 0.78rem;
  line-height: 1.2;
  min-height: 1.15rem;
}

.live-cameras__connect-label {
  color: #9a9a9a;
  font-style: italic;
  font-weight: 300;
}

.live-cameras__connect-x {
  color: #ff2d2d;
  font-style: normal;
  font-weight: 400;
  font-size: 1.05rem;
  line-height: 1;
  text-shadow:
    0 0 4px rgba(255, 40, 40, 0.95),
    0 0 10px rgba(255, 50, 50, 0.8),
    0 0 18px rgba(255, 0, 0, 0.55);
  animation: live-x-glow 1.6s ease-in-out infinite;
}

@keyframes live-x-glow {
  0%,
  100% {
    text-shadow:
      0 0 4px rgba(255, 40, 40, 0.9),
      0 0 10px rgba(255, 50, 50, 0.7),
      0 0 16px rgba(255, 0, 0, 0.45);
  }
  50% {
    text-shadow:
      0 0 8px rgba(255, 70, 70, 1),
      0 0 16px rgba(255, 40, 40, 0.95),
      0 0 28px rgba(255, 0, 0, 0.75);
  }
}

.live-camera-connect {
  position: fixed;
  inset: 0;
  z-index: 98;
  display: grid;
  place-items: center;
  padding: 1.25rem;
  background: rgba(0, 0, 0, 0.62);
}

.live-camera-connect[hidden] {
  display: none !important;
}

.live-camera-connect__sheet {
  position: relative;
  width: min(100%, 22rem);
  padding: 1.35rem 1.25rem 1.2rem;
  border: 1px solid var(--panel-border);
  border-radius: var(--radius);
  background: rgba(18, 16, 28, 0.96);
  box-shadow: var(--shadow), 0 0 30px rgba(var(--accent-rgb), 0.15);
  animation: rise 0.35s ease both;
}

.live-camera-connect__toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.live-camera-connect__title {
  margin: 0;
  color: var(--ink);
  font-size: 1.15rem;
  font-weight: 700;
}

.live-camera-connect__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  margin: -0.25rem -0.2rem -0.25rem 0;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--ink-soft);
  font: inherit;
  font-size: 1.45rem;
  line-height: 1;
  cursor: pointer;
}

.live-camera-connect__close:hover {
  color: var(--ink);
}

.live-camera-connect__hint {
  margin: 0.85rem 0 0;
  color: var(--ink-soft);
  font-size: 0.92rem;
  font-weight: 500;
  line-height: 1.45;
  text-align: center;
}

.live-camera-connect__actions {
  display: grid;
  justify-items: center;
  gap: 0.7rem;
  margin-top: 1.25rem;
}

.live-camera-connect__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: min(100%, 12.5rem);
  min-height: 2.6rem;
  padding: 0.65rem 1.15rem;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--ink);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  box-shadow: var(--glow-soft);
  transition: transform 0.15s ease, background 0.2s ease, border-color 0.2s ease;
}

.live-camera-connect__btn:hover,
.live-camera-connect__btn:focus-visible {
  background: var(--accent-dim);
  border-color: rgba(var(--accent-soft-rgb), 0.45);
}

.live-camera-connect__btn:active {
  transform: scale(0.98);
}

.live-port-picker {
  z-index: 99;
}

.live-port-preview {
  z-index: 100;
}

.live-port-picker__sheet,
.live-port-preview__sheet {
  width: min(100%, 24rem);
  max-height: min(84vh, 36rem);
  display: flex;
  flex-direction: column;
}

.live-port-picker__list {
  list-style: none;
  margin: 1.1rem 0 0;
  padding: 0;
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  min-height: 0;
}

.live-port-picker__item {
  display: block;
  width: 100%;
  min-height: 2.7rem;
  padding: 0.7rem 0.9rem;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--ink);
  font: inherit;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  transition: transform 0.15s ease, background 0.2s ease, border-color 0.2s ease;
}

.live-port-picker__item:hover,
.live-port-picker__item:focus-visible {
  background: var(--accent-dim);
  border-color: rgba(var(--accent-soft-rgb), 0.45);
}

.live-port-picker__item:active {
  transform: scale(0.99);
}

.live-port-picker__empty {
  margin: 0;
  padding: 0.15rem 0.15rem 0.35rem;
  color: var(--ink-soft);
  font-size: 0.92rem;
  font-weight: 500;
  line-height: 1.45;
}

.live-port-preview__toolbar {
  display: flex;
  align-items: center;
  gap: 0.55rem;
}

.live-port-preview__back {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.1rem;
  height: 2.1rem;
  margin: -0.15rem 0 -0.15rem -0.2rem;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
}

.live-port-preview__back svg {
  width: 1.35rem;
  height: 1.35rem;
  display: block;
}

.live-port-preview__back:hover,
.live-port-preview__back:focus-visible {
  background: rgba(255, 255, 255, 0.06);
}

.live-port-preview__title {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.live-port-preview__video {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  margin-top: 1.05rem;
  border-radius: 12px;
  background: #000;
  object-fit: contain;
}

.live-cameras__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 2.15rem;
  cursor: pointer;
}

.live-cameras__auto-off {
  position: relative;
  user-select: none;
}

.live-cameras__auto-off .settings-toggle__switch {
  flex-shrink: 0;
}

.live-cameras__text {
  min-width: 0;
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--ink);
}

.live-cameras__check {
  width: 1.05rem;
  height: 1.05rem;
  flex-shrink: 0;
  accent-color: #111;
}

.schedule-period {
  position: relative;
  margin: 0.15rem 0 0.45rem;
}

.schedule-period__btn {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.65rem;
  min-width: 9.5rem;
  min-height: 2.4rem;
  padding: 0.45rem 0.75rem;
  border: 1px solid rgba(17, 17, 17, 0.16);
  border-radius: 12px;
  background: #f5f5f5;
  color: var(--ink);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.schedule-period__value {
  display: inline-flex;
  align-items: baseline;
  gap: 0.35rem;
  min-width: 0;
}

.schedule-period__btn-price {
  color: #8a8a8a;
  font-size: 0.72rem;
  font-weight: 500;
  line-height: 1.2;
}

.schedule-period__btn-price[hidden] {
  display: none !important;
}

.schedule-period__btn:hover {
  background: #ececec;
}

.schedule-period__caret {
  color: var(--muted);
  font-size: 0.85rem;
  line-height: 1;
}

.schedule-period__menu {
  position: absolute;
  top: calc(100% + 0.35rem);
  left: 0;
  z-index: 25;
  margin: 0;
  padding: 0.35rem 0;
  list-style: none;
  min-width: 12rem;
  border: 1px solid rgba(17, 17, 17, 0.14);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.12);
}

.schedule-period__menu[hidden] {
  display: none !important;
}

.schedule-period__option {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.1rem;
  width: 100%;
  padding: 0.6rem 0.85rem;
  border: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}

.schedule-period__option-label {
  line-height: 1.2;
}

.schedule-period__option-price {
  color: #8a8a8a;
  font-size: 0.72rem;
  font-weight: 500;
  line-height: 1.2;
}

.schedule-period__option:hover {
  background: rgba(17, 17, 17, 0.06);
}

.schedule-period__option.is-selected {
  background: rgba(17, 17, 17, 0.08);
}

.schedule-panel[hidden] {
  display: none !important;
}

.schedule-panel--fixed {
  position: relative;
  padding-bottom: 3rem;
  min-height: 3.5rem;
}

.schedule-fixed__rows {
  display: grid;
  gap: 0.15rem;
}

.schedule-row--simple {
  grid-template-columns: minmax(0, 1fr) auto;
}

.schedule-row--simple .schedule-row__times {
  display: inline-flex;
}

.schedule-row--fixed {
  grid-template-columns: minmax(0, 1fr) auto auto;
}

.schedule-row--fixed .schedule-row__times {
  display: inline-flex;
}

.schedule-row__picker {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  min-width: 0;
  font-weight: 600;
  color: var(--ink);
}

.schedule-row__picker-label {
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 600;
}

.schedule-row__select,
.schedule-row__date,
.schedule-row__date-btn {
  min-height: 2.2rem;
  padding: 0.35rem 0.55rem;
  border: 1px solid rgba(17, 17, 17, 0.16);
  border-radius: 10px;
  background: #f7f7f7;
  color: var(--ink);
  font: inherit;
  font-weight: 600;
}

.schedule-row__date-btn {
  display: inline-flex;
  align-items: center;
  min-width: 7.5rem;
  max-width: 100%;
  text-align: left;
  cursor: pointer;
}

.schedule-row__date-btn.is-placeholder {
  color: var(--muted);
  font-weight: 500;
}

.schedule-row__date {
  min-width: 9.5rem;
}

.schedule-calendar {
  margin-top: 0.75rem;
  width: min(100%, 18.5rem);
}

.schedule-day-picker {
  width: min(100%, 18.5rem);
  margin-top: 0.75rem;
  padding: 0.85rem 0.9rem 1rem;
  border: 1px solid rgba(17, 17, 17, 0.14);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.1);
}

.schedule-day-picker[hidden] {
  display: none !important;
}

.schedule-day-picker__header {
  margin-bottom: 0.75rem;
}

.schedule-day-picker__title {
  margin: 0;
  font-weight: 700;
  color: var(--ink);
}

.schedule-day-picker__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0.2rem;
}

.schedule-day-picker__day {
  aspect-ratio: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 0.92rem;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}

.schedule-day-picker__day:hover {
  background: rgba(17, 17, 17, 0.08);
}

.schedule-day-picker__day.is-selected {
  background: #111111;
  color: #fff;
  font-weight: 700;
}

.schedule-row__remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.4rem;
  height: 2.4rem;
  padding: 0;
  border: 1px solid rgba(196, 60, 60, 0.28);
  border-radius: 12px;
  background: rgba(220, 80, 80, 0.12);
  color: #b42323;
  cursor: pointer;
}

.schedule-row__remove:hover {
  background: rgba(220, 80, 80, 0.22);
}

.schedule-row__remove svg {
  width: 1.1rem;
  height: 1.1rem;
}

.schedule-fixed__add {
  position: absolute;
  right: 0.15rem;
  bottom: 0.15rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  border: 0;
  border-radius: 12px;
  background: #111;
  color: #fff;
  font-size: 1.45rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.16);
}

.schedule-fixed__add:hover {
  background: #2a2a2a;
}

.schedule-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.75rem;
  align-items: center;
  min-height: 2.6rem;
  padding: 0.2rem 0.15rem;
}

.schedule-row__day {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
}

.schedule-row__check {
  width: 1.05rem;
  height: 1.05rem;
  accent-color: #111;
}

.schedule-row__times {
  display: none;
  align-items: center;
  gap: 0.4rem;
}

.schedule-row.is-active .schedule-row__times {
  display: inline-flex;
}

.schedule-row__times[hidden] {
  display: none !important;
}

.schedule-row__dash {
  color: var(--muted);
  font-weight: 600;
}

.time-chip {
  min-width: 4.2rem;
  padding: 0.35rem 0.55rem;
  border: 1px solid rgba(17, 17, 17, 0.14);
  border-radius: 10px;
  background: #f3f3f3;
  color: var(--ink);
  font: inherit;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}

.time-chip:hover {
  background: #ececec;
}

.ios-time-picker {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  align-items: end;
  background: rgba(0, 0, 0, 0.35);
}

.ios-time-picker[hidden] {
  display: none;
}

.ios-time-picker__sheet {
  border-radius: 18px 18px 0 0;
  background: #f2f2f7;
  box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.2);
  padding-bottom: calc(0.75rem + env(safe-area-inset-bottom));
}

.ios-time-picker__toolbar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.ios-time-picker__title {
  font-weight: 600;
  color: #111;
}

.ios-time-picker__cancel,
.ios-time-picker__done {
  border: 0;
  background: transparent;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.ios-time-picker__cancel {
  justify-self: start;
  color: #8e8e93;
}

.ios-time-picker__done {
  justify-self: end;
  color: #007aff;
}

.ios-time-picker__wheels {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: stretch;
  height: 252px;
  margin: 0.5rem 1rem 0.75rem;
  overflow: hidden;
}

.ios-time-picker__col {
  height: 100%;
  overflow-y: auto;
  scroll-snap-type: y mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  text-align: center;
}

.ios-time-picker__col::-webkit-scrollbar {
  display: none;
}

.ios-time-picker__item {
  height: 36px;
  line-height: 36px;
  scroll-snap-align: center;
  scroll-snap-stop: always;
  font-size: 1.35rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: #111;
}

.ios-time-picker__colon {
  display: grid;
  place-items: center;
  font-size: 1.4rem;
  font-weight: 700;
  color: #111;
  pointer-events: none;
}

.ios-time-picker__highlight {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 36px;
  transform: translateY(-50%);
  border-top: 1px solid rgba(0, 0, 0, 0.12);
  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
  background: rgba(255, 255, 255, 0.35);
  pointer-events: none;
}

.ios-time-picker__fade--top,
.ios-time-picker__fade--bottom {
  position: absolute;
  left: 0;
  right: 0;
  height: 72px;
  z-index: 1;
  pointer-events: none;
}

.ios-time-picker__fade--top {
  top: 0;
  background: linear-gradient(to bottom, #f2f2f7 10%, rgba(242, 242, 247, 0));
}

.ios-time-picker__fade--bottom {
  bottom: 0;
  background: linear-gradient(to top, #f2f2f7 10%, rgba(242, 242, 247, 0));
}

body.picker-open {
  overflow: hidden;
}

.party-form__footer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
  display: flex;
  justify-content: center;
  padding: 1rem max(1.25rem, env(safe-area-inset-left), env(safe-area-inset-right)) calc(1.25rem + env(safe-area-inset-bottom));
  pointer-events: none;
}

.error-page {
  display: grid;
  place-content: center;
  gap: 0.75rem;
  padding: 2rem;
  text-align: center;
}

.error-stack {
  max-width: 100%;
  overflow: auto;
  text-align: left;
  font-size: 0.8rem;
}

@media (min-width: 720px) {
  .auth-panel {
    padding: 2.75rem 2.25rem 2.25rem;
  }

  .auth-actions {
    grid-template-columns: 1fr 1fr;
  }
}


/* =========================================================
   Night Neon Theme — dark surfaces + soft lilac accents
   ========================================================= */

.auth-panel,
.settings-panel {
  background: var(--panel);
  border-color: var(--panel-border);
  box-shadow: var(--shadow), inset 0 0 0 1px rgba(var(--accent-rgb), 0.08);
  color: var(--ink);
}

.field__label {
  color: var(--ink-soft);
}

.field__input,
.field__textarea,
.field__input--file,
.chat-composer__input,
.chat-search__input,
.schedule-row__select,
.schedule-row__date,
.schedule-row__date-btn {
  background: rgba(255, 255, 255, 0.06) !important;
  border-color: rgba(255, 255, 255, 0.14) !important;
  color: var(--ink) !important;
  box-shadow: none;
}

.field__input::placeholder,
.field__textarea::placeholder,
.chat-composer__input::placeholder,
.chat-search__input::placeholder,
.schedule-row__date-btn.is-placeholder {
  color: var(--muted) !important;
}

.field__input:focus,
.field__textarea:focus,
.chat-composer__input:focus,
.chat-search__input:focus {
  border-color: rgba(var(--accent-soft-rgb), 0.55) !important;
  box-shadow: var(--glow-soft);
  outline: none;
}

.field__input--invalid {
  border-color: rgba(255, 123, 138, 0.7) !important;
}

.address-suggest,
.media-dropdown {
  background: rgba(22, 19, 34, 0.96) !important;
  border-color: var(--panel-border) !important;
  color: var(--ink);
  box-shadow: var(--shadow);
}

.address-suggest__item:hover,
.media-dropdown__edit:hover {
  background: var(--accent-dim) !important;
}

.flash--error {
  background: rgba(255, 123, 138, 0.12);
  color: var(--error);
}

.flash--success {
  background: rgba(93, 222, 160, 0.12);
  color: var(--success);
}

.flash--info {
  background: rgba(142, 200, 255, 0.12);
  color: var(--info);
}

.topbar__search,
.topbar__settings {
  color: #f4f2f8;
}

.topbar__search:hover,
.topbar__settings:hover {
  background: var(--accent-dim);
  box-shadow: var(--glow-soft);
}

.topbar__search[aria-expanded='true'] {
  background: var(--accent-dim);
  box-shadow: var(--glow-soft);
}

.home-title,
.settings-title,
.partys-title,
.party-detail__title,
.chats-title {
  color: var(--ink);
  text-shadow: 0 0 24px rgba(var(--accent-rgb), 0.25);
}

.settings-qr__handle {
  color: var(--ink);
}

.home-kicker,
.home-copy,
.home-hint,
.party-detail__period,
.party-detail__description,
.party-detail__price {
  color: var(--ink-soft);
}

.home-copy__install {
  color: var(--accent-soft);
  text-shadow: 0 0 12px rgba(var(--accent-rgb), 0.35);
}

.home-hint__mark {
  color: var(--accent-soft) !important;
}

.home-hint__mark.is-alert {
  color: var(--error) !important;
}

.home-calendar,
.schedule-day-picker,
.schedule-calendar.home-calendar {
  background: rgba(18, 16, 28, 0.94) !important;
  border-color: rgba(var(--accent-rgb), 0.28) !important;
  box-shadow: var(--shadow), var(--glow-soft);
  color: var(--ink);
}

.home-calendar__month,
.schedule-day-picker__title {
  color: var(--ink) !important;
}

.home-calendar__nav-btn {
  background: rgba(255, 255, 255, 0.06) !important;
  border-color: rgba(255, 255, 255, 0.14) !important;
  color: var(--ink) !important;
}

.home-calendar__nav-btn:hover:not(:disabled) {
  background: var(--accent-dim) !important;
}

.home-calendar__weekdays span {
  color: var(--muted) !important;
}

.home-calendar__day,
.schedule-day-picker__day {
  color: var(--ink) !important;
}

.home-calendar__day:hover:not(:disabled),
.schedule-day-picker__day:hover {
  background: rgba(var(--accent-rgb), 0.16) !important;
}

.home-calendar__day.is-selected,
.schedule-day-picker__day.is-selected {
  background: linear-gradient(135deg, var(--accent-deep), var(--accent-soft)) !important;
  color: var(--accent-text) !important;
  box-shadow: var(--glow-soft);
  font-weight: 700;
}

.home-calendar__day:disabled {
  color: rgba(255, 255, 255, 0.22) !important;
}

.home-date-chip {
  border-color: rgba(var(--accent-rgb), 0.4) !important;
  background: rgba(var(--accent-rgb), 0.16) !important;
  color: var(--accent-soft) !important;
}

.home-toast__panel,
.share-overlay__sheet,
.share-note__sheet,
.qr-scanner__sheet,
.ios-time-picker__sheet {
  background: rgba(18, 16, 28, 0.96) !important;
  color: var(--ink) !important;
  box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.45), 0 0 30px rgba(var(--accent-rgb), 0.15);
}

.install-guide__sheet {
  background:
    linear-gradient(180deg, rgba(var(--accent-rgb), 0.16) 0%, transparent 42%),
    rgba(18, 16, 28, 0.97) !important;
  color: var(--ink) !important;
  border-color: rgba(var(--accent-rgb), 0.45) !important;
}

.delete-account__sheet,
.wish-overlay__sheet,
.profile-qr-overlay__sheet,
.pro-cancel__sheet {
  background: rgba(18, 16, 28, 0.96) !important;
  color: var(--ink) !important;
}

.password-change__sheet {
  background: rgba(18, 16, 28, 0.96) !important;
  color: var(--ink) !important;
}

.friends-overlay,
.share-overlay,
.share-note,
.qr-scanner,
.ios-time-picker,
.delete-account,
.wish-overlay,
.profile-qr-overlay,
.pro-cancel,
.password-change,
.privacy-overlay,
.blocked-users,
.block-user-search {
  background: rgba(0, 0, 0, 0.62) !important;
}

.install-guide {
  background:
    radial-gradient(ellipse 80% 50% at 50% 100%, rgba(var(--accent-rgb), 0.28), transparent 70%),
    rgba(0, 0, 0, 0.62) !important;
}

.share-overlay__toolbar,
.share-note__toolbar,
.ios-time-picker__toolbar {
  background: rgba(18, 16, 28, 0.98) !important;
  border-bottom-color: rgba(255, 255, 255, 0.08) !important;
}

.install-guide__toolbar {
  background: rgba(18, 16, 28, 0.98) !important;
  border-bottom-color: rgba(var(--accent-rgb), 0.22) !important;
}

.share-overlay__title,
.share-note__title,
.ios-time-picker__title {
  color: var(--ink) !important;
}

.install-guide__title {
  color: var(--accent-soft) !important;
  text-shadow:
    0 0 14px rgba(var(--accent-rgb), 0.65),
    0 0 32px rgba(var(--accent-rgb), 0.35) !important;
}

.share-overlay__close,
.share-note__close,
.home-toast__close,
.delete-account__close,
.privacy-overlay__close,
.blocked-users__close,
.block-user-search__close {
  color: var(--muted) !important;
}

.install-guide__close {
  color: var(--accent-soft) !important;
  background: rgba(var(--accent-rgb), 0.12) !important;
  border-color: rgba(var(--accent-rgb), 0.35) !important;
}

.install-guide__device {
  color: var(--accent-light) !important;
}

.install-guide__steps {
  color: var(--ink) !important;
}

.share-overlay__section,
.share-overlay__link,
.share-overlay__empty,
.share-note__partner {
  color: var(--ink-soft) !important;
}

.share-overlay__link-row,
.share-overlay__partner,
.share-note__input,
.share-note__chip {
  background: rgba(255, 255, 255, 0.05) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}

.share-overlay__partner-btn:hover,
.share-note__chip:hover {
  background: rgba(255, 255, 255, 0.08) !important;
}

.share-overlay__copy,
.share-overlay__send,
.share-note__send,
.chat-composer__send {
  background: linear-gradient(135deg, var(--accent-deep), var(--accent-soft)) !important;
  color: var(--accent-text) !important;
  border: 0 !important;
  box-shadow: var(--glow-soft);
}

.share-overlay__send:hover,
.share-note__send:hover,
.chat-composer__send:hover {
  box-shadow: var(--glow);
}

.settings-toggle__label {
  color: var(--ink) !important;
}

.settings-toggle__hint,
.settings-status {
  color: var(--muted) !important;
}

.settings-language__list {
  background: rgba(22, 19, 34, 0.98) !important;
  border-color: rgba(var(--accent-rgb), 0.28) !important;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45);
}

.settings-language__option:hover,
.settings-language__option.is-selected {
  background: rgba(var(--accent-rgb), 0.16) !important;
}

.settings-toggle__switch {
  background: rgba(255, 255, 255, 0.18) !important;
}

.settings-toggle__input:checked + .settings-toggle__switch {
  background: linear-gradient(135deg, var(--accent-deep), var(--accent-soft)) !important;
  box-shadow: var(--glow-soft);
}

.bottom-nav__btn,
.party-detail__action-btn,
.party-form__preview-btn,
.home-page .bottom-nav__split,
.partys-page .bottom-nav__split,
.visibility-page .bottom-nav__split,
.pro-page .bottom-nav__split,
.ads-page .bottom-nav__split,
.saved-shorts-page .bottom-nav__split,
.party-form__footer .bottom-nav__split {
  background: rgba(18, 16, 28, 0.92) !important;
  border-color: rgba(var(--accent-rgb), 0.28) !important;
  color: var(--ink) !important;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35), var(--glow-soft);
}

.home-page .bottom-nav__split-side,
.partys-page .bottom-nav__split-side,
.visibility-page .bottom-nav__split-side,
.pro-page .bottom-nav__split-side,
.ads-page .bottom-nav__split-side,
.saved-shorts-page .bottom-nav__split-side,
.party-form__footer .bottom-nav__split-side {
  color: var(--ink) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}

.home-page .bottom-nav__split-side:hover,
.partys-page .bottom-nav__split-side:hover,
.visibility-page .bottom-nav__split-side:hover,
.pro-page .bottom-nav__split-side:hover,
.ads-page .bottom-nav__split-side:hover,
.saved-shorts-page .bottom-nav__split-side:hover,
.party-form__footer .bottom-nav__split-side:hover,
.bottom-nav__btn:hover,
.party-detail__action-btn:hover,
.party-form__preview-btn:hover {
  background: var(--accent-dim) !important;
}

.partys-saved__split.bottom-nav__split--triple .bottom-nav__split-side:not(:last-child),
.home-page .bottom-nav__split--triple .bottom-nav__split-side:not(:last-child) {
  border-right-color: rgba(255, 255, 255, 0.1);
}

.settings-action {
  background: rgba(255, 255, 255, 0.06) !important;
  border-color: rgba(255, 255, 255, 0.14) !important;
  color: var(--ink) !important;
}

.settings-action:hover {
  background: var(--accent-dim) !important;
  border-color: rgba(var(--accent-rgb), 0.35) !important;
}

.nav-badge {
  background: linear-gradient(135deg, var(--accent-deep), var(--accent-soft)) !important;
  color: var(--accent-text) !important;
  box-shadow: var(--glow-soft);
}

.party-card,
.ads-card,
.chat-list__item,
.saved-folder,
.saved-shorts-row {
  background:
    linear-gradient(135deg, rgba(22, 19, 34, 0.88), rgba(14, 12, 24, 0.9)),
    url("/images/disco-crowd.jpg") center / cover no-repeat !important;
  background-blend-mode: darken, normal;
  border-color: rgba(var(--accent-rgb), 0.22) !important;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35), inset 0 0 0 1px rgba(255, 255, 255, 0.04);
  color: var(--ink);
}

.chat-list__menu {
  background: rgba(22, 19, 34, 0.98) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
}

.chat-list__menu-item {
  color: var(--ink) !important;
}

.chat-list__menu-item:hover {
  background: rgba(255, 255, 255, 0.06) !important;
}

.chat-list__menu-item--danger {
  color: #ff7b8a !important;
}

.party-card--feed {
  background:
    linear-gradient(120deg, rgba(10, 8, 18, 0.88) 0%, rgba(14, 10, 28, 0.78) 55%, rgba(18, 10, 36, 0.7) 100%),
    url("/images/concert-stage.jpg") right center / cover no-repeat !important;
}

.party-card:nth-child(3n) {
  background:
    linear-gradient(120deg, rgba(10, 8, 18, 0.88) 0%, rgba(14, 10, 28, 0.78) 55%, rgba(18, 10, 36, 0.7) 100%),
    url("/images/party-lights.jpg") right center / cover no-repeat !important;
}

.party-card:nth-child(3n + 2) {
  background:
    linear-gradient(120deg, rgba(10, 8, 18, 0.88) 0%, rgba(14, 10, 28, 0.78) 55%, rgba(18, 10, 36, 0.7) 100%),
    url("/images/club-floor.jpg") right center / cover no-repeat !important;
}

.chat-list__item.is-unread {
  border-width: 3px !important;
  border-color: rgba(var(--accent-soft-rgb), 0.85) !important;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35), var(--glow-soft) !important;
}

.chat-list__pin {
  color: var(--accent-soft) !important;
}

.chat-list__section-title {
  color: var(--ink-soft) !important;
}

.party-rating__star {
  color: rgba(255, 255, 255, 0.38) !important;
}

.party-rating__average {
  color: rgba(255, 255, 255, 0.38) !important;
}

.party-rating__average.is-gold,
.party-rating__average.is-perfect {
  color: #ffd000 !important;
  text-shadow: 0 0 10px rgba(255, 208, 0, 0.45);
}

.party-rating__split-avg--visited {
  color: var(--accent-bright) !important;
  text-shadow: 0 0 8px rgba(var(--accent-rgb), 0.55), 0 0 16px rgba(var(--accent-rgb), 0.28);
}

.party-rating__split-avg--not-visited {
  color: rgba(255, 255, 255, 0.38) !important;
}

.party-rating__count {
  color: rgba(255, 255, 255, 0.38) !important;
}

.party-detail__views {
  color: rgba(255, 255, 255, 0.38) !important;
}

.party-detail__occupancy {
  color: rgba(255, 255, 255, 0.38);
}

.party-detail__occupancy.is-busy {
  color: #ffd166 !important;
}

.party-detail__occupancy.is-hot {
  color: #ff3b4a !important;
}

.party-rating__star.is-filled,
.party-rating__star.is-preview {
  color: #ffd166 !important;
}

.party-card__creator,
.party-card__location,
.party-card__distance,
.party-card__description,
.chat-list__meta,
.home-empty,
.saved-folder__meta,
.saved-folder__chevron,
.saved-folder__icon,
.saved-shorts-row__sep,
.saved-shorts-row__creator,
.party-media__empty,
.chat-thread__empty {
  color: var(--ink-soft) !important;
}

.saved-folder__title,
.saved-shorts-row__party {
  color: var(--ink) !important;
}

.party-card__more {
  color: var(--accent-soft) !important;
}

.party-card__action {
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(255, 255, 255, 0.14) !important;
  color: var(--ink) !important;
  box-shadow: var(--glow-soft);
}

.party-card__action--share {
  color: var(--accent-soft) !important;
  border-color: rgba(var(--accent-rgb), 0.35) !important;
}

.party-card__action--save {
  color: var(--ink-soft) !important;
  border-color: rgba(255, 255, 255, 0.14) !important;
}

.party-card__action--save.is-saved {
  color: var(--accent-soft) !important;
  border-color: rgba(var(--accent-rgb), 0.45) !important;
  background: rgba(var(--accent-rgb), 0.18) !important;
}

.party-card__action--comment {
  color: var(--accent-soft) !important;
  border-color: rgba(var(--accent-rgb), 0.35) !important;
}

.party-card__action--route {
  color: var(--accent-soft) !important;
  border-color: rgba(var(--accent-rgb), 0.35) !important;
}

.party-card__action--delete {
  color: var(--error) !important;
  border-color: rgba(255, 123, 138, 0.35) !important;
}

.chat-list__item {
  background: rgba(18, 16, 28, 0.82) !important;
}

.chat-list__item:hover {
  border-color: rgba(var(--accent-rgb), 0.4) !important;
  box-shadow: var(--glow-soft);
}

.chat-bubble--mine {
  background: linear-gradient(135deg, rgba(155, 31, 232, 0.55), rgba(88, 24, 140, 0.75)) !important;
  color: #fff !important;
  border: 1px solid rgba(var(--accent-soft-rgb), 0.35);
  box-shadow: var(--glow-soft);
}

.chat-bubble--theirs {
  background: rgba(255, 255, 255, 0.08) !important;
  color: var(--ink) !important;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.chat-bubble--theirs.chat-bubble--partner {
  background: rgba(var(--accent-rgb), 0.16) !important;
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 1px rgba(var(--accent-rgb), 0.45), var(--glow);
}

.chat-bubble--system {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.chat-bubble__system {
  background: rgba(255, 255, 255, 0.1);
  color: var(--ink-soft);
}

.chat-bubble__text-link,
.chat-bubble__link,
.party-detail__link {
  color: var(--accent-soft) !important;
  text-shadow: 0 0 10px rgba(var(--accent-rgb), 0.35);
}

.chat-bubble--mine .chat-bubble__text-link,
.chat-bubble--mine .chat-bubble__link {
  color: #f3e8ff !important;
}

.chat-composer {
  background: linear-gradient(180deg, transparent, rgba(6, 5, 12, 0.92) 30%) !important;
  border-top-color: rgba(255, 255, 255, 0.08) !important;
}

.chat-composer__tool {
  color: var(--ink-soft);
}

.chat-composer__tool:hover {
  color: var(--ink);
  background: rgba(255, 255, 255, 0.08);
}

.chat-composer__tool.is-recording {
  color: #ff7b8a;
  background: rgba(255, 90, 106, 0.16);
}

.chat-camera__sheet,
.chat-camera {
  background: #050508;
}

.chat-detail__back {
  color: var(--accent-soft) !important;
}

.schedule-box,
.live-cameras {
  background: rgba(18, 16, 28, 0.88) !important;
  border-color: rgba(var(--accent-rgb), 0.22) !important;
  color: var(--ink);
}

.live-cameras__section + .live-cameras__section {
  border-top-color: rgba(255, 255, 255, 0.1);
}

.live-cameras__title,
.live-cameras__text {
  color: var(--ink-soft);
}

.live-cameras__connect {
  color: #9a9a9a;
}

.live-cameras__connect.is-live-stop {
  color: #9a9a9a;
}

.live-cameras__connect-x {
  color: #ff2d2d;
}

.live-camera-connect {
  background: rgba(0, 0, 0, 0.62) !important;
}

.live-camera-connect__sheet {
  background: rgba(18, 16, 28, 0.96) !important;
  color: var(--ink) !important;
}

.live-cameras__check {
  accent-color: var(--accent-soft);
}

.schedule-period__btn,
.schedule-period__menu,
.time-chip,
.time-chip--static {
  background: rgba(255, 255, 255, 0.06) !important;
  border-color: rgba(255, 255, 255, 0.14) !important;
  color: var(--ink) !important;
}

.schedule-period__btn {
  box-shadow: var(--glow-soft);
}

.schedule-period__option:hover,
.schedule-period__option.is-selected {
  background: var(--accent-dim) !important;
  color: var(--accent-soft) !important;
}

.time-chip:hover,
.schedule-row__date-btn:hover {
  border-color: rgba(var(--accent-soft-rgb), 0.5) !important;
  box-shadow: var(--glow-soft);
}

.schedule-row__day,
.schedule-row__picker-label {
  color: var(--ink-soft) !important;
}

.schedule-fixed__add {
  background: linear-gradient(135deg, var(--accent-deep), var(--accent-soft)) !important;
  color: var(--accent-text) !important;
  box-shadow: var(--glow);
  border: 0 !important;
}

.schedule-row__remove {
  background: rgba(255, 123, 138, 0.12) !important;
  border-color: rgba(255, 123, 138, 0.35) !important;
  color: var(--error) !important;
}

.ios-time-picker__item,
.ios-time-picker__cancel,
.ios-time-picker__done {
  color: var(--ink) !important;
}

.ios-time-picker__done {
  color: var(--accent-soft) !important;
}

.ios-time-picker__fade--top {
  background: linear-gradient(to bottom, rgba(18, 16, 28, 1) 10%, rgba(18, 16, 28, 0)) !important;
}

.ios-time-picker__fade--bottom {
  background: linear-gradient(to top, rgba(18, 16, 28, 1) 10%, rgba(18, 16, 28, 0)) !important;
}

.party-media__item {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  overflow: hidden;
}

.party-detail__content,
.party-form,
.settings-hero,
.chats-hero {
  position: relative;
  z-index: 5;
}

.partys-hero,
.home-hero {
  position: relative;
  z-index: 1;
}

.media-field__preview,
.media-field__drop {
  background: rgba(255, 255, 255, 0.04) !important;
  border-color: rgba(255, 255, 255, 0.14) !important;
  color: var(--ink-soft) !important;
}

.party-form-page .home-backdrop {
  background:
    linear-gradient(180deg, var(--bg-veil-top) 0%, var(--bg-veil-mid) 50%, var(--bg-veil-bottom) 100%),
    radial-gradient(ellipse 70% 40% at 70% 20%, rgba(var(--accent-rgb), 0.26), transparent 55%),
    url("/images/disco-crowd.jpg") center / cover no-repeat;
}

.chat-detail-page .home-backdrop,
.chats-page .home-backdrop {
  background:
    linear-gradient(180deg, var(--bg-veil-top) 0%, var(--bg-veil-mid) 55%, var(--bg-veil-bottom) 100%),
    radial-gradient(ellipse 60% 40% at 30% 0%, rgba(var(--accent-rgb), 0.24), transparent 55%),
    url("/images/party-lights.jpg") center / cover no-repeat;
}

.partys-page .home-backdrop,
.party-detail-page .home-backdrop {
  background:
    linear-gradient(180deg, var(--bg-veil-top) 0%, var(--bg-veil-mid) 50%, var(--bg-veil-bottom) 100%),
    radial-gradient(ellipse 70% 45% at 80% 10%, rgba(var(--accent-rgb), 0.26), transparent 55%),
    url("/images/concert-stage.jpg") center / cover no-repeat;
}

.brand__name {
  color: var(--ink);
  text-shadow: 0 0 28px rgba(var(--accent-rgb), 0.35);
}

.brand__tagline {
  color: var(--muted);
}

.brand__icon {
  border-radius: 16px;
  box-shadow: var(--glow);
}

.schedule-period__menu {
  background: rgba(18, 16, 28, 0.98) !important;
  border-color: rgba(var(--accent-rgb), 0.25) !important;
  box-shadow: var(--shadow);
}

.schedule-period__option {
  color: var(--ink) !important;
}

.schedule-period__option-price {
  color: #9b93ad !important;
}

.schedule-period__btn-price {
  color: #9b93ad !important;
}

.media-dropdown__edit,
.media-field__chip {
  background: rgba(255, 255, 255, 0.06) !important;
  color: var(--ink) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
}

.media-field__control {
  background: rgba(255, 255, 255, 0.96) !important;
  border-color: rgba(17, 17, 17, 0.18) !important;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.2);
}

.media-field__button {
  color: #111111 !important;
}

.media-field__count {
  color: #6b6b6b !important;
}

.media-field__control:hover {
  border-color: rgba(17, 17, 17, 0.35) !important;
}

.media-dropdown {
  background: #ffffff !important;
  border-color: rgba(17, 17, 17, 0.16) !important;
  color: #111111 !important;
}

.media-dropdown__name,
.media-dropdown__index {
  color: #111111 !important;
}

.media-dropdown__index {
  color: #6b6b6b !important;
}

.media-dropdown__edit {
  background: rgba(17, 17, 17, 0.06) !important;
  color: #111111 !important;
  border-color: rgba(17, 17, 17, 0.14) !important;
}

.media-dropdown__edit:hover {
  background: rgba(17, 17, 17, 0.1) !important;
}

.chat-search {
  background: transparent;
}

.user-search__field {
  background: rgba(255, 255, 255, 0.96) !important;
  border-color: rgba(17, 17, 17, 0.18) !important;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.25);
}

.user-search__prefix,
.user-search__input,
.user-search__camera,
.user-search__clear,
.user-search__name {
  color: #111111 !important;
}

.user-search__input::placeholder {
  color: #6b6b6b !important;
}

.user-search__camera:hover,
.user-search__clear:hover {
  background: rgba(17, 17, 17, 0.08) !important;
}

.user-search__suggest {
  background: #ffffff !important;
  border-color: rgba(17, 17, 17, 0.14) !important;
}

.user-search__empty {
  color: #6b6b6b !important;
}

.chats-title,
.partys-title {
  text-shadow: 0 0 24px rgba(var(--accent-rgb), 0.25);
}

.home-atmosphere {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.45rem;
  width: min(100%, 28rem);
  margin: 1.1rem auto 0.35rem;
  padding: 0 1rem;
}

.home-atmosphere__shot {
  aspect-ratio: 3 / 4;
  border-radius: 14px;
  background-size: cover;
  background-position: center;
  border: 1px solid rgba(var(--accent-rgb), 0.22);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35), var(--glow-soft);
  opacity: 0.9;
}

.home-atmosphere__shot:nth-child(1) {
  background-image: linear-gradient(180deg, transparent 40%, rgba(6, 5, 12, 0.55)), url("/images/disco-crowd.jpg");
  transform: translateY(8px);
}

.home-atmosphere__shot:nth-child(2) {
  background-image: linear-gradient(180deg, transparent 40%, rgba(6, 5, 12, 0.45)), url("/images/party-lights.jpg");
}

.home-atmosphere__shot:nth-child(3) {
  background-image: linear-gradient(180deg, transparent 40%, rgba(6, 5, 12, 0.55)), url("/images/concert-stage.jpg");
  transform: translateY(8px);
}

@media (max-width: 560px) {
  .home-atmosphere {
    width: 100%;
  }
}

#party-publish.bottom-nav__split-side,
.party-form__footer #party-publish {
  background: transparent !important;
  color: var(--ink) !important;
  font-weight: 600 !important;
  text-shadow: none;
  box-shadow: none !important;
}

.party-form__footer #party-publish:hover,
#party-publish.bottom-nav__split-side:hover,
.party-form__footer #party-publish:active,
#party-publish.bottom-nav__split-side:active {
  background: var(--accent-dim) !important;
  box-shadow: var(--glow) !important;
}

.party-form__footer #party-publish:disabled,
#party-publish.bottom-nav__split-side:disabled {
  background: transparent !important;
  color: var(--muted) !important;
  box-shadow: none !important;
  opacity: 0.45;
  cursor: not-allowed;
}

.chat-detail__call {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.6rem;
  height: 2.6rem;
  padding: 0;
  border: 1px solid rgba(var(--accent-rgb), 0.35);
  border-radius: 12px;
  background: rgba(18, 16, 28, 0.88);
  color: var(--accent-soft);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.25), var(--glow-soft);
  cursor: pointer;
}

.chat-detail__actions {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.chat-detail__call svg {
  width: 1.2rem;
  height: 1.2rem;
}

.chat-detail__call:hover {
  background: var(--accent-dim);
  box-shadow: var(--glow);
}

.chat-detail__call.is-active {
  color: #ff7b8a;
  border-color: rgba(255, 123, 138, 0.45);
  box-shadow: 0 0 14px rgba(255, 123, 138, 0.35);
}

.chat-detail__back {
  background: rgba(18, 16, 28, 0.88) !important;
  border-color: rgba(255, 255, 255, 0.14) !important;
  color: var(--accent-soft) !important;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.25);
}

.call-overlay {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: grid;
  place-items: center;
  padding: 1.25rem;
  background: rgba(0, 0, 0, 0.62);
}

.call-overlay[hidden] {
  display: none !important;
}

.call-overlay__sheet {
  width: min(100%, 22rem);
  padding: 1.5rem 1.25rem 1.25rem;
  border: 1px solid rgba(var(--accent-rgb), 0.3);
  border-radius: 18px;
  background: rgba(18, 16, 28, 0.96);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45), var(--glow-soft);
  text-align: center;
}

.call-overlay__kicker {
  margin: 0;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.call-overlay__title {
  margin: 0.45rem 0 0;
  color: var(--ink);
  font-size: 1.35rem;
  font-weight: 700;
}

.call-overlay__status {
  margin: 0.75rem 0 0;
  color: var(--accent-soft);
  font-weight: 600;
}

.call-overlay__videos {
  position: relative;
  margin: 1rem 0 0;
  aspect-ratio: 3 / 4;
  max-height: min(52vh, 28rem);
  overflow: hidden;
  border-radius: 14px;
  background: #0a0a10;
}

.call-overlay__videos[hidden] {
  display: none !important;
}

.call-overlay__remote,
.call-overlay__local {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #0a0a10;
}

.call-overlay__local {
  position: absolute;
  right: 0.55rem;
  bottom: 0.55rem;
  width: 28%;
  height: auto;
  aspect-ratio: 3 / 4;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.35);
  z-index: 1;
}

.call-overlay__actions {
  display: flex;
  justify-content: center;
  gap: 0.65rem;
  margin-top: 1.25rem;
}

.call-overlay__btn {
  min-height: 2.6rem;
  padding: 0.55rem 1rem;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--ink);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.call-overlay__btn--accept {
  background: linear-gradient(135deg, var(--accent-deep), var(--accent-soft));
  border-color: rgba(var(--accent-soft-rgb), 0.5);
  color: var(--accent-text);
  box-shadow: var(--glow-soft);
}

.call-overlay__btn--hangup,
.call-overlay__btn--decline {
  background: rgba(255, 123, 138, 0.16);
  border-color: rgba(255, 123, 138, 0.4);
  color: #ff7b8a;
}

.call-overlay__btn[hidden] {
  display: none !important;
}

/* —— Party route map —— */
.party-route-page {
  position: fixed;
  inset: 0;
  z-index: 40;
  margin: 0;
  padding: 0;
  background: #0b0a10;
}

.party-route-map {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

.party-route-back {
  position: absolute;
  top: calc(0.85rem + env(safe-area-inset-top));
  left: calc(0.85rem + env(safe-area-inset-left));
  z-index: 500;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.55rem;
  height: 2.55rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(12, 12, 16, 0.72);
  color: #f4f4f5;
  text-decoration: none;
  backdrop-filter: blur(8px);
}

.party-route-back svg {
  width: 1.35rem;
  height: 1.35rem;
}

.party-route-flag {
  position: absolute;
  top: calc(0.85rem + env(safe-area-inset-top));
  left: 50%;
  z-index: 500;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.7rem;
  height: 2.7rem;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.94);
  color: #1a1a1a;
  transform: translateX(-50%);
  cursor: pointer;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.18);
}

.party-route-flag__ring {
  position: absolute;
  inset: 3px;
  border-radius: 999px;
  border: 1px solid rgba(17, 17, 17, 0.28);
  pointer-events: none;
}

.party-route-flag__icon {
  position: relative;
  width: 1.15rem;
  height: 1.15rem;
}

.party-route-status {
  position: absolute;
  left: 50%;
  bottom: calc(1.25rem + env(safe-area-inset-bottom));
  z-index: 500;
  max-width: min(92vw, 26rem);
  margin: 0;
  padding: 0.55rem 0.9rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(12, 12, 16, 0.78);
  color: rgba(255, 255, 255, 0.88);
  font-size: 0.88rem;
  text-align: center;
  transform: translateX(-50%);
  backdrop-filter: blur(8px);
}

.party-route-status.is-error {
  border-color: rgba(255, 123, 138, 0.35);
  color: #ffb4bc;
}

.party-route-status[hidden] {
  display: none !important;
}

.party-route-sheet {
  position: absolute;
  inset: 0;
  z-index: 600;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 1rem;
  padding-bottom: calc(1rem + env(safe-area-inset-bottom));
  background: transparent;
  pointer-events: none;
}

.party-route-sheet[hidden] {
  display: none !important;
}

.party-route-sheet__panel {
  pointer-events: auto;
  display: flex;
  flex-direction: column;
  width: min(100%, 22rem);
  max-height: min(78vh, 36rem);
  overflow: visible;
  padding: 1.05rem 1.15rem 1.2rem;
  border-radius: var(--radius, 18px);
  border: 1px solid rgba(var(--accent-soft-rgb), 0.38);
  background:
    linear-gradient(160deg, rgba(38, 24, 58, 0.96) 0%, rgba(16, 12, 28, 0.98) 55%, rgba(10, 8, 18, 0.98) 100%);
  color: var(--ink, #f4f2f8);
  box-shadow: var(--glow-soft), 0 22px 48px rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(14px);
}

.party-route-sheet__panel.is-transit {
  width: min(100%, 34rem);
  max-height: min(86vh, 44rem);
}

.party-route-sheet__toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.85rem;
}

.party-route-sheet__title {
  margin: 0;
  font-family: var(--font-display, inherit);
  font-size: 1.45rem;
  letter-spacing: 0.06em;
  font-weight: 500;
  color: #fff;
  text-shadow: 0 0 14px rgba(var(--accent-rgb), 0.35);
}

.party-route-sheet__close {
  width: 2rem;
  height: 2rem;
  border: 1px solid rgba(var(--accent-soft-rgb), 0.28);
  border-radius: 999px;
  background: rgba(var(--accent-rgb), 0.12);
  color: var(--accent-soft);
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
}

.party-route-sheet__close:hover {
  background: rgba(var(--accent-rgb), 0.22);
}

.party-route-sheet__stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  margin: 0 0 1rem;
}

.party-route-sheet__stats > div {
  padding: 0.65rem 0.7rem;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.04);
}

.party-route-sheet__stats dt {
  margin: 0;
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted, #9b93ad);
}

.party-route-sheet__stats dd {
  margin: 0.25rem 0 0;
  font-size: 1.08rem;
  font-weight: 600;
  color: #fff;
}

.party-route-start {
  display: block;
  width: 100%;
  min-height: 2.7rem;
  margin: 0 0 1rem;
  padding: 0.65rem 1rem;
  border: 0;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-deep) 55%, color-mix(in srgb, var(--accent-deep) 70%, #000) 100%);
  color: var(--accent-text);
  font: inherit;
  font-size: 1rem;
  font-weight: 650;
  letter-spacing: 0.02em;
  cursor: pointer;
  box-shadow: 0 0 18px rgba(var(--accent-rgb), 0.4);
}

.party-route-start:hover {
  filter: brightness(1.08);
}

.party-route-start[hidden] {
  display: none !important;
}

.party-route-start.is-active {
  background: linear-gradient(135deg, #5a2a6e 0%, #3a1a48 100%);
  box-shadow: none;
}

.party-route-nav {
  position: absolute;
  left: 0.85rem;
  right: 0.85rem;
  top: calc(0.85rem + env(safe-area-inset-top));
  z-index: 550;
  display: grid;
  gap: 0.55rem;
  pointer-events: none;
}

.party-route-nav[hidden] {
  display: none !important;
}

.party-route-nav__instruction {
  margin: 0;
  padding: 0.85rem 1rem;
  border-radius: 14px;
  border: 1px solid rgba(var(--accent-soft-rgb), 0.4);
  background: rgba(12, 8, 22, 0.92);
  color: #fff;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.35;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(12px);
}

.party-route-nav__stop {
  pointer-events: auto;
  justify-self: start;
  min-height: 2.2rem;
  padding: 0.4rem 0.9rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(20, 12, 32, 0.88);
  color: #e0b3ff;
  font: inherit;
  font-size: 0.86rem;
  cursor: pointer;
}

.party-route-nav__stop:hover {
  border-color: rgba(var(--accent-pale-rgb), 0.55);
  color: #fff;
}

.party-route-sheet__label {
  display: block;
  margin: 0 0 0.35rem;
  font-size: 0.8rem;
  color: var(--accent-soft);
}

.party-route-mode {
  position: relative;
  z-index: 8;
}

.party-route-mode__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  width: 100%;
  min-height: 2.55rem;
  padding: 0.55rem 0.8rem;
  border-radius: 12px;
  border: 1px solid rgba(var(--accent-soft-rgb), 0.85);
  background: #0c0a12;
  color: #ffffff;
  font: inherit;
  text-align: left;
  cursor: pointer;
  box-shadow:
    0 0 0 1px rgba(var(--accent-rgb), 0.25),
    0 0 14px rgba(var(--accent-rgb), 0.35);
}

.party-route-mode__trigger:focus {
  outline: none;
  border-color: #e0b3ff;
  box-shadow:
    0 0 0 1px rgba(var(--accent-pale-rgb), 0.55),
    0 0 18px rgba(var(--accent-rgb), 0.5);
}

.party-route-mode__chevron {
  width: 0.45rem;
  height: 0.45rem;
  border-right: 1.5px solid var(--accent-soft);
  border-bottom: 1.5px solid var(--accent-soft);
  transform: rotate(-135deg) translate(1px, 1px);
  flex-shrink: 0;
}

.party-route-mode__trigger[aria-expanded='true'] .party-route-mode__chevron {
  transform: rotate(45deg) translate(-1px, -2px);
}

.party-route-mode__list {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(100% + 0.4rem);
  top: auto;
  z-index: 20;
  margin: 0;
  padding: 0.4rem;
  list-style: none;
  border-radius: 12px;
  border: 1.5px solid #d28bff;
  background: #100c18;
  box-shadow:
    0 0 0 1px rgba(var(--accent-rgb), 0.35),
    0 0 18px rgba(var(--accent-rgb), 0.45),
    0 -12px 36px rgba(0, 0, 0, 0.55);
}

.party-route-mode__list[hidden] {
  display: none !important;
}

.party-route-mode__list li + li {
  margin-top: 0.35rem;
}

.party-route-mode__option {
  display: block;
  width: 100%;
  min-height: 2.35rem;
  padding: 0.5rem 0.7rem;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.72);
  background: #050308;
  color: #ffffff;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.party-route-mode__option:hover,
.party-route-mode__option.is-active {
  background: #120a1c;
  border-color: #ffffff;
  box-shadow: 0 0 10px rgba(var(--accent-rgb), 0.22);
}

.party-route-steps {
  flex: 1 1 auto;
  min-height: 0;
  margin-top: 1rem;
  max-height: min(42vh, 22rem);
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  touch-action: pan-y;
  padding-right: 0.35rem;
}

.party-route-sheet__panel.is-transit .party-route-steps {
  /* Restfläche im Transit-Panel: vollständig scrollbar */
  max-height: max(12rem, calc(min(86vh, 44rem) - 18.5rem));
}

.party-route-steps[hidden] {
  display: none !important;
}

.party-route-steps__title {
  margin: 0 0 0.55rem;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent-soft);
}

.party-route-steps__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.55rem;
}

.party-route-steps__item {
  padding: 0.7rem 0.8rem;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(5, 3, 10, 0.72);
}

.party-route-steps__time {
  margin: 0;
  font-size: 0.82rem;
  font-weight: 600;
  color: #e0b3ff;
}

.party-route-steps__vehicle {
  margin: 0.28rem 0 0;
  font-size: 0.95rem;
  font-weight: 600;
  color: #fff;
}

.party-route-steps__places {
  margin: 0.25rem 0 0;
  font-size: 0.86rem;
  color: var(--ink-soft, #d2cce0);
}

.party-route-steps__length {
  margin: 0.3rem 0 0;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--accent-soft);
}

.party-route-steps__agency {
  margin: 0.2rem 0 0;
  font-size: 0.75rem;
  color: var(--muted, #9b93ad);
}

.party-route-sheet__hint {
  min-height: 1.2em;
  margin: 0.65rem 0 0;
  font-size: 0.82rem;
  color: var(--error, #ff7b8a);
}

.party-route-user-dot {
  background: transparent !important;
  border: 0 !important;
}

.party-route-user-dot__inner {
  display: block;
  width: 12px;
  height: 12px;
  border-radius: 999px;
  background: #e10600;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.95), 0 2px 8px rgba(0, 0, 0, 0.35);
}

.party-route-party-pin {
  background: transparent !important;
  border: 0 !important;
}

.party-route-party-pin__stem {
  position: absolute;
  left: 50%;
  bottom: 2px;
  width: 2px;
  height: 14px;
  background: #b00000;
  transform: translateX(-50%);
}

.party-route-party-pin__head {
  position: absolute;
  left: 50%;
  top: 2px;
  width: 16px;
  height: 16px;
  border-radius: 999px 999px 999px 2px;
  background: #e10600;
  border: 2px solid #fff;
  transform: translateX(-50%) rotate(-45deg);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.party-route-address-pin {
  background: transparent !important;
  border: 0 !important;
}

.party-route-address-pin__stem {
  position: absolute;
  left: 50%;
  bottom: 2px;
  width: 2px;
  height: 14px;
  background: #111;
  transform: translateX(-50%);
}

.party-route-address-pin__head {
  position: absolute;
  left: 50%;
  top: 2px;
  width: 16px;
  height: 16px;
  border-radius: 999px 999px 999px 2px;
  background: repeating-linear-gradient(
    -45deg,
    #111 0,
    #111 3px,
    #fff 3px,
    #fff 6px
  );
  border: 2px solid #111;
  transform: translateX(-50%) rotate(-45deg);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}

.party-route-party-spot-pin {
  background: transparent;
  border: 0;
}

.party-route-page .leaflet-control-attribution {
  background: rgba(255, 255, 255, 0.75) !important;
  font-size: 10px;
}

.promo-overlay {
  position: fixed;
  inset: 0;
  z-index: 10050;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
}

.promo-overlay[hidden] {
  display: none !important;
}

.promo-overlay__media,
.promo-overlay__video,
.promo-overlay__image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000;
}

.promo-overlay__media[hidden],
.promo-overlay__video[hidden],
.promo-overlay__image[hidden] {
  display: none !important;
}

.promo-overlay__skip {
  position: absolute;
  right: max(16px, env(safe-area-inset-right));
  bottom: max(20px, env(safe-area-inset-bottom));
  z-index: 1;
  margin: 0;
  padding: 0.7rem 1rem;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #9a9a9a;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  cursor: pointer;
  box-shadow: none;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.85), 0 0 10px rgba(0, 0, 0, 0.45);
}

.promo-overlay__skip[hidden] {
  display: none !important;
}

.promo-overlay__skip:hover,
.promo-overlay__skip:focus-visible {
  background: transparent;
  color: #b8b8b8;
}

.party-detail-page.is-promo-pending .party-detail__content {
  visibility: hidden;
}

/* =========================================================
   Responsive foundation — scale on every screen, never overlap
   ========================================================= */

@media (max-width: 1023.98px) {
  :root {
    --space-page-x: 1.1rem;
    --touch-min: 2.85rem;
  }

  body {
    line-height: 1.48;
  }

  .auth-panel,
  .settings-hero,
  .chats-hero,
  .pro-hero,
  .ads-hero,
  .visibility-hero,
  .party-form,
  .party-detail__content {
    max-width: 100%;
    min-width: 0;
  }
}

@media (max-width: 767.98px) {
  :root {
    --space-page-x: 1rem;
    --touch-min: 2.9rem;
    --type-small: 0.9rem;
    --type-caption: 0.8rem;
  }

  body {
    line-height: 1.45;
  }

  .btn,
  .settings-action,
  .settings-toggle,
  .bottom-nav__btn,
  .bottom-nav__split-side,
  .party-detail__action-btn,
  .field__input,
  .chat-composer__input,
  .settings-language__input {
    min-height: var(--touch-min);
  }

  .field__textarea {
    min-height: 6.5rem;
  }

  .settings-design__swatch {
    width: 3.1rem;
    height: 3.1rem;
  }

  .settings-design__swatches {
    gap: 1.25rem;
  }

  .auth-page,
  .home-page,
  .partys-page,
  .party-detail-page,
  .party-form-page,
  .settings-page,
  .chats-page,
  .chat-detail-page,
  .error-page,
  .pro-page,
  .ads-page,
  .visibility-page,
  .shorts-page {
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
  }

  .settings-hero,
  .home-hero,
  .partys-hero,
  .chats-hero,
  .visibility-hero,
  .ads-hero,
  .pro-hero {
    padding-inline: max(var(--space-page-x), env(safe-area-inset-left), env(safe-area-inset-right));
  }

  .party-detail__content {
    padding-inline: max(var(--space-page-x), env(safe-area-inset-left), env(safe-area-inset-right));
  }

  .auth-page {
    padding-inline: max(var(--space-page-x), env(safe-area-inset-left), env(safe-area-inset-right));
  }

  .home-mood__btn {
    width: clamp(2.5rem, 8vw, 3.15rem);
    height: clamp(2.5rem, 8vw, 3.15rem);
  }

  .chat-detail__topbar {
    grid-template-columns: 2.6rem minmax(0, 1fr) auto;
    gap: 0.4rem;
  }

  .chat-detail__heading-wrap {
    width: 100%;
    max-width: 100%;
  }

  .shorts-slide__friends {
    max-width: calc(100% - 7.5rem);
  }

  .party-detail__avatar,
  .party-detail__match-btn {
    width: 3.5rem;
    height: 3.5rem;
  }
}

@media (max-width: 479.98px) {
  :root {
    --space-page-x: 0.9rem;
    --type-body: 0.92rem;
    --type-small: 0.82rem;
    --type-caption: 0.72rem;
  }

  .brand__name,
  .home-title,
  .partys-title,
  .party-detail__title,
  .settings-title,
  .pro-title {
    letter-spacing: 0.02em;
  }

  .home-mood__btn {
    width: clamp(2.35rem, 7.5vw, 2.85rem);
    height: clamp(2.35rem, 7.5vw, 2.85rem);
  }

  .topbar {
    padding-top: 0.85rem;
    padding-bottom: 0.85rem;
  }

  .pro-cancel__actions .btn,
  .secret-mode__actions .btn {
    min-width: 0;
    flex: 1 1 8rem;
  }

  .party-detail__title {
    max-width: 100%;
  }

  .bottom-nav__split--triple .bottom-nav__split-side,
  .home-page .bottom-nav__split--triple .bottom-nav__split-side {
    font-size: 0.72rem;
    padding: 0.65rem 0.28rem;
  }
}

@media (max-width: 399.98px) {
  :root {
    --space-page-x: 0.85rem;
  }
}

@media (max-width: 359.98px) {
  :root {
    --space-page-x: 0.8rem;
  }
}

@media (max-width: 319.98px) {
  :root {
    --space-page-x: 0.72rem;
  }
}

@media (pointer: coarse) {
  .btn,
  .settings-action,
  .settings-design__swatch,
  .bottom-nav__btn,
  .bottom-nav__split-side {
    -webkit-tap-highlight-color: rgba(var(--accent-rgb), 0.18);
  }
}

/* ——— Feature styles: match explain, jetzt-los, RSVP, taste, follow, map ——— */

.party-detail__match-explain {
  width: min(100%, 22rem);
  margin: 0.55rem auto 0;
  padding: 0.55rem 0.75rem;
  border-radius: 12px;
  border: 1px solid rgba(var(--accent-rgb), 0.22);
  background: rgba(var(--accent-rgb), 0.06);
  text-align: left;
}

.party-detail__match-personal {
  margin: 0 0 0.35rem;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--accent-light);
}

.party-detail__match-reasons {
  margin: 0;
  padding: 0 0 0 1.05rem;
  list-style: disc;
  color: var(--ink-soft);
  font-size: 0.82rem;
  line-height: 1.35;
}

.party-detail__match-reasons li + li {
  margin-top: 0.2rem;
}

.home-page.is-jetzt-los {
  box-shadow: inset 0 0 0 2px rgba(var(--accent-rgb), 0.35);
}

.home-page.is-jetzt-los .home-mood__btn--now.is-active {
  color: var(--accent-light);
  filter: drop-shadow(0 0 10px rgba(var(--accent-rgb), 0.55));
}

.party-card__creator-link {
  position: relative;
  z-index: 4;
  pointer-events: auto;
  color: inherit;
  text-decoration: none;
  white-space: nowrap;
  overflow-wrap: normal;
  word-break: keep-all;
  transition: text-shadow 0.25s ease, color 0.2s ease, filter 0.2s ease;
}

.party-card__creator-link:hover,
.party-card__creator-link:focus-visible {
  color: var(--accent-light);
  filter: brightness(1.08);
  text-shadow:
    0 0 12px rgba(var(--accent-rgb), 0.75),
    0 0 28px rgba(var(--accent-rgb), 0.4);
}

.party-detail__map-link {
  position: relative;
  display: block;
  width: 100%;
  text-decoration: none;
  color: inherit;
  border-radius: 12px;
  overflow: hidden;
}

.party-detail__map-link:focus-visible {
  outline: 2px solid rgba(var(--accent-rgb), 0.85);
  outline-offset: 3px;
}

.party-detail__map-link .party-location-map,
.party-detail__map {
  width: 100%;
  aspect-ratio: 1 / 1;
  cursor: pointer;
  pointer-events: none;
}

.party-detail__map .leaflet-pane,
.party-detail__map .leaflet-control,
.party-detail__map .leaflet-marker-icon,
.party-detail__map .leaflet-interactive {
  pointer-events: none !important;
}

.party-detail__map-link .party-detail__distance {
  position: absolute;
  left: 50%;
  bottom: 0.7rem;
  z-index: 5;
  margin: 0;
  transform: translateX(-50%);
  max-width: calc(100% - 1.5rem);
  color: #000;
  font-size: 0.95rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
  text-align: center;
  text-shadow: 0 0 6px rgba(255, 255, 255, 0.85), 0 1px 2px rgba(255, 255, 255, 0.7);
  pointer-events: none;
}

.party-detail__follow-location.is-following,
.partys-follow-btn.is-following {
  border-color: rgba(var(--accent-rgb), 0.55);
  color: var(--accent-light);
  box-shadow: 0 0 14px rgba(var(--accent-rgb), 0.25);
}

.partys-follow-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0.65rem auto 0;
  padding: 0.45rem 1.1rem;
  border: 1px solid rgba(var(--accent-rgb), 0.35);
  border-radius: 999px;
  background: rgba(var(--accent-rgb), 0.08);
  color: var(--ink);
  font: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.partys-follow-btn:hover {
  background: rgba(var(--accent-rgb), 0.16);
}

.partys-hero {
  text-align: center;
}

.taste-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0.35rem 0 0.85rem;
}

.taste-chip {
  padding: 0.32rem 0.7rem;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--ink-soft);
  font: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.taste-chip.is-liked {
  border-color: rgba(var(--accent-rgb), 0.55);
  background: rgba(var(--accent-rgb), 0.16);
  color: var(--accent-light);
}

.taste-chip.is-avoided {
  border-color: rgba(255, 110, 120, 0.45);
  background: rgba(255, 80, 90, 0.12);
  color: #ffb0b6;
  text-decoration: line-through;
}

.taste-chip.is-on {
  border-color: rgba(var(--accent-rgb), 0.55);
  background: rgba(var(--accent-rgb), 0.16);
  color: var(--accent-light);
}

.visit-feedback-modal {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: grid;
  place-items: center;
  padding: 1.25rem;
  background: rgba(4, 4, 8, 0.62);
  backdrop-filter: blur(6px);
}

.visit-feedback-modal[hidden] {
  display: none !important;
}

.visit-feedback-modal__sheet {
  width: min(100%, 20rem);
  padding: 1.1rem 1.15rem 1.2rem;
  border-radius: 16px;
  border: 1px solid rgba(var(--accent-rgb), 0.28);
  background: linear-gradient(165deg, rgba(22, 20, 32, 0.98), rgba(10, 10, 16, 0.98));
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
}

.visit-feedback-modal__title {
  margin: 0 0 0.25rem;
  font-size: 1.05rem;
  font-weight: 700;
}

.visit-feedback-modal__party {
  margin: 0 0 0.85rem;
  color: var(--ink-soft);
  font-size: 0.88rem;
}

.visit-feedback-modal__ratings {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.4rem;
  margin-bottom: 0.75rem;
}

.visit-feedback-modal__btn {
  padding: 0.55rem 0.4rem;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.05);
  color: inherit;
  font: inherit;
  font-size: 0.85rem;
  font-weight: 650;
  cursor: pointer;
}

.visit-feedback-modal__btn.is-selected {
  border-color: rgba(var(--accent-rgb), 0.55);
  background: rgba(var(--accent-rgb), 0.16);
  color: var(--accent-light);
}

.visit-feedback-modal__again {
  display: flex;
  gap: 0.4rem;
  margin-bottom: 0.75rem;
}

.visit-feedback-modal__actions {
  display: flex;
  gap: 0.45rem;
}

.visit-feedback-modal__actions .btn {
  flex: 1;
}


/* PartyUp in-app Rapyd checkout (neon) */
.checkout-page {
  align-items: center;
  justify-content: center;
  padding: 1.5rem var(--space-page-x) 2.5rem;
}

.checkout-glow {
  position: fixed;
  inset: -20% auto auto 50%;
  width: min(70vw, 520px);
  height: min(70vw, 520px);
  transform: translateX(-50%);
  pointer-events: none;
  background: radial-gradient(
    circle,
    rgba(var(--accent-rgb), 0.28) 0%,
    rgba(var(--accent-rgb), 0.08) 42%,
    transparent 70%
  );
  filter: blur(8px);
  z-index: 0;
}

.checkout-shell {
  position: relative;
  z-index: 1;
  width: min(100%, 440px);
  display: grid;
  gap: 1.25rem;
}

.checkout-brand {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}

.checkout-brand__icon {
  border-radius: 12px;
  box-shadow: 0 0 18px rgba(var(--accent-rgb), 0.35);
}

.checkout-brand__name {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 6vw, 2.35rem);
  letter-spacing: 0.06em;
  line-height: 1;
  text-shadow: 0 0 18px rgba(var(--accent-rgb), 0.45);
}

.checkout-brand__lead {
  margin: 0.2rem 0 0;
  color: var(--muted);
  font-size: var(--type-small);
}

.checkout-panel {
  display: grid;
  gap: 1rem;
  padding: 1.1rem 1rem 1.2rem;
  border-radius: calc(var(--radius) + 2px);
  border: 1px solid rgba(var(--accent-rgb), 0.35);
  background: linear-gradient(
    165deg,
    rgba(var(--accent-rgb), 0.1) 0%,
    rgba(12, 10, 22, 0.92) 40%,
    rgba(6, 5, 12, 0.96) 100%
  );
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.04) inset,
    0 0 28px rgba(var(--accent-rgb), 0.22),
    var(--shadow);
}

.checkout-element {
  min-height: 1.5rem;
}

.checkout-element--rapyd {
  min-height: 28rem;
  width: 100%;
}

.checkout-element--rapyd iframe,
#rapyd-checkout,
#rapyd-checkout-frame {
  width: 100%;
  min-height: 28rem;
  border: 0;
}

.checkout-form {
  display: grid;
  gap: 1rem;
}

.checkout-pay {
  width: 100%;
  min-height: 3.1rem;
  position: relative;
  box-shadow: var(--glow);
}

.checkout-pay.is-loading .checkout-pay__label {
  opacity: 0.35;
}

.checkout-pay.is-loading .checkout-pay__spinner {
  opacity: 1;
}

.checkout-pay__spinner {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 1.15rem;
  height: 1.15rem;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.25);
  border-top-color: var(--accent-text);
  opacity: 0;
  animation: checkout-spin 0.7s linear infinite;
}

@keyframes checkout-spin {
  to {
    transform: rotate(360deg);
  }
}

.checkout-cancel {
  justify-self: center;
  color: var(--muted);
  text-decoration: none;
  font-size: var(--type-small);
}

.checkout-cancel:hover {
  color: var(--accent-light);
  text-shadow: 0 0 12px rgba(var(--accent-rgb), 0.45);
}

.checkout-message {
  margin: 0;
  padding: 0.65rem 0.8rem;
  border-radius: 12px;
  border: 1px solid rgba(var(--accent-rgb), 0.3);
  background: rgba(var(--accent-rgb), 0.08);
  color: var(--ink-soft);
  font-size: var(--type-small);
}

.checkout-message.is-error {
  border-color: rgba(255, 123, 138, 0.55);
  background: rgba(255, 123, 138, 0.1);
  color: var(--error);
  box-shadow: 0 0 16px rgba(255, 123, 138, 0.2);
}

.checkout-error {
  display: grid;
  gap: 1rem;
  padding: 1.1rem;
  border-radius: var(--radius);
  border: 1px solid rgba(255, 123, 138, 0.45);
  background: rgba(18, 10, 14, 0.9);
  color: var(--ink-soft);
}

.checkout-error code {
  font-size: 0.85em;
  color: var(--accent-pale);
}

.checkout-layout {
  display: grid;
  gap: 1.25rem;
}

@media (min-width: 860px) {
  .checkout-shell {
    width: min(100%, 920px);
  }

  .checkout-layout {
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.15fr);
    align-items: start;
    gap: 1.5rem;
  }
}

.checkout-summary {
  padding: 1.15rem 1.1rem;
  border-radius: calc(var(--radius) + 2px);
  border: 1px solid rgba(var(--accent-rgb), 0.32);
  background: linear-gradient(
    160deg,
    rgba(var(--accent-rgb), 0.14),
    rgba(8, 6, 16, 0.92) 55%
  );
  box-shadow: 0 0 24px rgba(var(--accent-rgb), 0.18);
}

.checkout-summary__kicker {
  margin: 0;
  color: var(--muted);
  font-size: var(--type-caption);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.checkout-summary__title {
  margin: 0.35rem 0 0;
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 4vw, 2rem);
  letter-spacing: 0.04em;
  line-height: 1.05;
}

.checkout-summary__amount {
  margin: 0.55rem 0 0;
  font-size: clamp(1.35rem, 3.5vw, 1.7rem);
  font-weight: 700;
  color: var(--accent-light);
  text-shadow: 0 0 16px rgba(var(--accent-rgb), 0.45);
}

.checkout-summary__lines {
  list-style: none;
  margin: 1rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.55rem;
}

.checkout-summary__line {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  color: var(--ink-soft);
  font-size: var(--type-small);
}

.checkout-summary__line--total {
  margin-top: 0.25rem;
  padding-top: 0.65rem;
  border-top: 1px solid rgba(var(--accent-rgb), 0.28);
  color: var(--ink);
  font-weight: 650;
}

.checkout-summary__note {
  margin: 0.85rem 0 0;
  color: var(--muted);
  font-size: var(--type-caption);
}

.checkout-section {
  display: grid;
  gap: 0.55rem;
}

.checkout-section + .checkout-section {
  margin-top: 0.35rem;
  padding-top: 0.95rem;
  border-top: 1px solid rgba(var(--accent-rgb), 0.18);
}

.checkout-section__title {
  margin: 0;
  font-size: var(--type-small);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--accent-pale);
}

.checkout-secure {
  margin: 0;
  text-align: center;
  color: var(--muted);
  font-size: var(--type-caption);
  line-height: 1.45;
}

.checkout-secure a {
  color: var(--accent-light);
  text-decoration: none;
}

.checkout-secure a:hover {
  text-shadow: 0 0 10px rgba(var(--accent-rgb), 0.5);
}

.checkout-fallback-note {
  margin: 0;
  color: var(--muted);
  font-size: var(--type-small);
}

.checkout-section__hint {
  margin: 0;
  color: var(--muted);
  font-size: var(--type-caption);
  line-height: 1.4;
}

.checkout-element--express {
  min-height: 3rem;
}

.checkout-or {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 0.75rem;
  margin-top: 0.85rem;
  color: var(--muted);
  font-size: var(--type-caption);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.checkout-or::before,
.checkout-or::after {
  content: '';
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(var(--accent-rgb), 0.45),
    transparent
  );
}

.checkout-section--express[hidden] {
  display: none !important;
}

.checkout-secure__privacy {
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--accent-light);
  font: inherit;
  font-size: inherit;
  text-decoration: underline;
  text-underline-offset: 0.12em;
  cursor: pointer;
}

.checkout-secure__privacy:hover {
  text-shadow: 0 0 10px rgba(var(--accent-rgb), 0.5);
}