:root {
  --pink: #ff3894;
  --pink-dark: #e03170;
  --cream: #ffe8f0;
  --ink: #16141a;
  --muted: #6b6570;
  --card: #ffffff;
  --line: rgba(22, 20, 26, 0.08);
  --ok: #2ecc71;
  --shadow: 0 16px 40px rgba(22, 20, 26, 0.12);
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

* { box-sizing: border-box; scrollbar-width: none; -ms-overflow-style: none; }
*::-webkit-scrollbar { width: 0; height: 0; background: transparent; }
html, body { margin: 0; height: 100%; overflow: hidden; scrollbar-width: none; -ms-overflow-style: none; }
body {
  font-family: "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: #111;
  color: var(--ink);
}
@media (pointer: coarse) and (max-width: 900px) {
  html, body { height: auto; overflow-y: auto; }
  body { min-height: calc(100lvh + 1px); overscroll-behavior-y: auto; }
}

#app {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: min(100%, 430px);
  height: 100dvh;
  height: var(--app-height, 100dvh);
  margin: 0 auto;
  background: var(--cream);
  overflow: hidden;
}

.screen {
  min-height: 100dvh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  padding-bottom: 0;
}

.screen.no-tab { padding-bottom: calc(24px + var(--safe-bottom)); overflow: auto; }

.screen > .pad {
  flex: 1;
  min-height: 0;
  overflow: auto;
  scrollbar-width: none;
}

.search-field {
  width: 100%;
  border: 0;
  background: rgba(22,20,26,0.06);
  border-radius: 12px;
  padding: 12px 14px;
  font: inherit;
  margin: 4px 0 14px;
}

.hero {
  position: relative;
  height: 100dvh;
  min-height: 100dvh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  color: white;
  background:
    linear-gradient(180deg, rgba(10,8,14,0.12), rgba(10,8,14,0.28) 45%, rgba(10,8,14,0.78)),
    url("/assets/home-miami.png") center / cover no-repeat;
  padding: calc(18px + var(--safe-top)) 22px 0;
}

.hero.no-tab {
  padding-bottom: calc(28px + var(--safe-bottom));
}

.hero.ice {
  background:
    linear-gradient(180deg, rgba(6,10,18,0.2), rgba(6,10,18,0.78)),
    radial-gradient(circle at 50% 20%, #8ecae6, transparent 40%),
    linear-gradient(180deg, #0b1320, #1c2541 60%, #0b1320);
}

.top-status {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  gap: 10px;
}
.top-lead { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1; }
.search-place {
  display: flex;
  align-items: center;
  gap: 4px;
  max-width: 46vw;
  color: #fff;
  background: rgba(255,255,255,0.08);
  border: 0;
  border-radius: 999px;
  padding: 7px 12px;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.search-place span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.search-place svg { width: 10px; height: 10px; flex: none; opacity: 0.85; }
.top-status > span { opacity: 0.8; }

.brand {
  font-family: "Snell Roundhand", "Segoe Script", cursive;
  font-size: 42px;
  margin: 36px 0 0;
  text-shadow: 0 8px 24px rgba(0,0,0,0.35);
}

.hero-space { flex: 1; }

.event-list {
  margin: 14px -22px 0;
  padding: 0 22px 120px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  scrollbar-width: none;
}
.hero .event-list { pointer-events: auto; }
.event-list > * {
  flex: 0 0 auto;
}
.home-refresh {
  position: fixed;
  z-index: 40;
  top: calc(8px + var(--safe-top));
  left: 50%;
  width: 36px;
  height: 3px;
  margin-left: -18px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.9);
  pointer-events: none;
  transform-origin: center;
  animation: homeSync 1.15s ease-in-out infinite;
}
.home-refresh.done {
  animation: none;
  opacity: 0;
  transition: opacity 0.4s ease;
}
@keyframes homeSync {
  0%, 100% { opacity: 0.18; transform: scaleX(0.6); }
  50% { opacity: 0.7; transform: scaleX(1); }
}
.event-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  opacity: 0.75;
}
.event-empty {
  margin: 0;
  padding: 14px;
  border-radius: 18px;
  color: rgba(255,255,255,0.62);
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.12);
  font-size: 13px;
}
.event-card {
  display: flex;
  gap: 12px;
  text-align: left;
  width: 100%;
  border: 0;
  border-radius: 18px;
  padding: 14px;
  color: white;
  background: rgba(255,255,255,0.12);
  backdrop-filter: blur(16px);
  position: relative;
  align-items: flex-start;
  cursor: pointer;
}
.event-card.mine {
  background: linear-gradient(90deg, rgba(255,56,148,0.42), rgba(20,8,16,0.72));
  box-shadow: inset 0 0 0 1.5px rgba(255,56,148,0.7);
}
.event-card.theirs {
  background: linear-gradient(90deg, rgba(89,235,242,0.36), rgba(8,20,22,0.72));
  box-shadow: inset 0 0 0 1.5px rgba(89,235,242,0.6);
}
.event-card.mine .event-badge { color: #ff8ec8; }
.event-card.theirs .event-badge { color: #9ff7fb; }
.swipe-row {
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  flex: 0 0 auto;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
}
.swipe-row img { pointer-events: none; -webkit-user-drag: none; }
.swipe-action {
  position: absolute;
  right: 0; top: 2px; bottom: 2px;
  z-index: 0;
  width: 96px;
  border: 0;
  border-radius: 16px;
  background: #e23;
  color: #fff;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.15;
  text-align: center;
  padding: 0 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
}
.swipe-row[data-open="1"] .swipe-action {
  opacity: 1;
  pointer-events: auto;
}
.swipe-row .event-card,
.swipe-row .mine-card { position: relative; z-index: 1; }
.home-dock {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(74px + var(--safe-bottom));
  z-index: 30;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding: 36px 22px 6px;
  background: transparent;
  pointer-events: none;
}
.home-dock .big-btn,
.home-dock .text-btn {
  pointer-events: auto;
}
.home-dock .text-btn {
  padding: 10px 8px;
}
.nav-icon {
  width: 36px;
  height: 36px;
  border: 0;
  background: none;
  color: #fff;
  padding: 0;
  display: grid;
  place-items: center;
  position: relative;
  cursor: pointer;
}
.push-ask {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border-radius: 16px;
  background: #fff;
  color: var(--ink);
}
.push-ask .muted { margin-top: 2px; }
.install-chip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  margin: 12px 0 0;
  padding: 9px 14px;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
  font: inherit;
  font-size: 14px;
  font-weight: 650;
  text-align: left;
  cursor: pointer;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
.install-chip span {
  font-size: 18px;
  line-height: 1;
  opacity: 0.75;
}
.hero.calm-light .install-chip {
  background: rgba(22, 20, 26, 0.08);
  color: var(--ink);
}
.install-steps {
  margin: 18px 0 0;
  padding-left: 1.2em;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.install-steps li { line-height: 1.35; }
.install-note,
.install-fallback {
  margin: 14px 0 0;
  padding: 12px 14px;
  border-radius: 14px;
  background: #fff;
  text-align: left;
  line-height: 1.35;
}
.install-fallback { color: var(--muted); font-size: 14px; }
.install-guide {
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
  text-align: left;
}
.install-guide li {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 10px;
  align-items: start;
}
.install-n {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--pink);
  color: #fff;
  font-weight: 700;
  display: grid;
  place-items: center;
  margin-top: 1px;
}
.install-guide p { margin: 4px 0 8px; line-height: 1.35; }
.install-guide img {
  width: 100%;
  height: auto;
  border-radius: 16px;
  display: block;
  background: #1a1a1a;
}
.push-ask button {
  border: 0;
  background: var(--pink);
  color: #fff;
  font-weight: 700;
  border-radius: 999px;
  padding: 8px 14px;
  white-space: nowrap;
  cursor: pointer;
}
.bell-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 99px;
  background: var(--pink);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  line-height: 16px;
  text-align: center;
  box-sizing: border-box;
  z-index: 2;
}
.home-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid rgba(255,255,255,0.35);
  background: rgba(255,255,255,0.18);
  color: #fff;
  display: grid;
  place-items: center;
}
.store-soon {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  width: 100%;
}
.store-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.member-panel {
  margin: 0 16px 8px;
  padding: 8px 12px;
  border-radius: 16px;
  background: rgba(255,255,255,0.12);
}
.event-skel { pointer-events: none; }
.skel-line {
  height: 10px;
  border-radius: 6px;
  background: rgba(255,255,255,0.18);
  margin-top: 8px;
  animation: skel 1.1s ease-in-out infinite alternate;
}
.skel-line.short { width: 72px; margin-top: 0; }
.skel-line.mid { width: 55%; }
@keyframes skel { to { opacity: 0.45; } }
.event-emoji {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(255,255,255,0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  flex-shrink: 0;
}
.event-source {
  font-size: 11px;
  font-weight: 800;
  color: rgba(255, 255, 255, 0.78);
  margin-bottom: 2px;
}
.event-badge { font-size: 11px; font-weight: 800; opacity: 0.8; }
.event-title { font-size: 16px; font-weight: 700; }
.event-sub { font-size: 12px; opacity: 0.75; margin-top: 2px; }
.event-note {
  font-size: 13px;
  line-height: 1.3;
  margin-top: 4px;
  opacity: 0.92;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.big-btn {
  width: 100%;
  border: 0;
  border-radius: 999px;
  background: var(--pink);
  color: white;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: 0.08em;
  padding: 22px 16px;
  box-shadow: 0 8px 14px rgba(255, 56, 148, 0.4);
  white-space: nowrap;
  animation: bigGlow 2.1s ease-in-out infinite;
}

.big-btn .prompt {
  display: inline-block;
}

.big-btn .prompt.in {
  animation: promptIn 0.38s ease;
}

@keyframes promptIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes bigGlow {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 8px 14px rgba(255, 56, 148, 0.4);
  }
  50% {
    transform: scale(1.03);
    box-shadow: 0 8px 28px rgba(255, 56, 148, 0.85);
  }
}

.big-btn:active {
  animation: none;
  transform: scale(0.98);
}

@media (prefers-reduced-motion: reduce) {
  .big-btn, .tab-plus, .tab-plus.ready, .surprise { animation: none; }
}

.ghost-btn, .text-btn {
  background: none;
  border: 0;
  color: inherit;
  font: inherit;
}

.panel {
  padding: 22px 20px calc(20px + var(--safe-bottom));
}

h1 { font-size: 28px; margin: 0 0 8px; }
h2 { font-size: 20px; margin: 0 0 6px; }
p { line-height: 1.45; }

.muted { color: var(--muted); }
.center { text-align: center; }

.fb-btn {
  width: 100%;
  border: 0;
  border-radius: 14px;
  background: #1877f2;
  color: white;
  font-size: 17px;
  font-weight: 700;
  padding: 16px;
  display: flex;
  justify-content: center;
  gap: 10px;
  align-items: center;
}

.card {
  background: var(--card);
  border-radius: 22px;
  padding: 16px;
  box-shadow: var(--shadow);
}

.note-screen { background: var(--cream); }
.note-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.note-head h1 { margin: 0; }
.note-head .text-btn {
  color: var(--pink);
  font-size: 16px;
  font-weight: 700;
  padding: 0;
  width: auto;
}
.note-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  background: var(--card);
  border-radius: 18px;
  padding: 14px;
  margin-bottom: 10px;
  box-shadow: 0 8px 24px rgba(22, 20, 26, 0.08);
}
.note-open {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
  min-width: 0;
  border: 0;
  background: none;
  padding: 0;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.note-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}
.note-top b { flex: 1; min-width: 0; font-size: 16px; line-height: 1.25; }
.note-time { color: var(--muted); font-size: 12px; white-space: nowrap; }
.note-body, .note-extra {
  display: block;
  white-space: pre-line;
  line-height: 1.35;
}
.note-body { font-size: 15px; }
.note-extra { color: var(--muted); font-size: 13px; }
.note-seen {
  border: 0;
  background: var(--cream);
  color: var(--ink);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  border-radius: 999px;
  padding: 7px 12px;
  cursor: pointer;
}
.note-empty { padding: 28px 4px 8px; }
.note-empty p { margin: 0 0 6px; }

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

.person {
  display: grid;
  grid-template-columns: 48px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 10px 4px;
}

.avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  background: #ddd;
}

.person .name { font-weight: 700; }
.person .meta { font-size: 13px; color: var(--muted); }

.check {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid #d7d2cc;
  display: grid;
  place-items: center;
}
.check.on { background: var(--ok); border-color: var(--ok); color: white; }
.check.off { color: #c4bec0; }

.tabs {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: calc(20px + var(--safe-bottom));
  z-index: 80;
  width: auto;
  height: 64px;
  padding: 6px 8px;
  border: 0;
  border-radius: 999px;
  background: rgba(16, 12, 18, 0.72);
  backdrop-filter: blur(18px) saturate(1.4);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  box-shadow: 0 10px 28px rgba(0,0,0,0.28);
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
}
.tabs.has-plus { grid-template-columns: 1fr auto 1fr; }
.tab-plus {
  width: 56px;
  height: 56px;
  margin: 0;
  border: 0;
  border-radius: 50%;
  background: var(--pink);
  color: #fff;
  font-size: 34px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  animation: none;
}
.tab-plus.ready {
  animation: plusPulse 1.8s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .tab-plus.ready { animation: none; }
}
@keyframes plusPulse {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 4px 12px rgba(255, 56, 148, 0.4);
  }
  50% {
    transform: scale(1.08);
    box-shadow: 0 0 0 7px rgba(255, 56, 148, 0.18), 0 8px 22px rgba(255, 56, 148, 0.72);
  }
}
.tab-plus:active {
  animation: none;
  transform: scale(0.96);
}

.hero .tabs {
  background: rgba(16, 12, 18, 0.72);
  border-color: transparent;
  box-shadow: 0 10px 28px rgba(0,0,0,0.28);
}

.close-btn {
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50%;
  background: rgba(255,255,255,0.94);
  color: var(--ink);
  font-size: 20px;
  font-weight: 500;
  line-height: 1;
  display: grid;
  place-items: center;
  padding: 0;
  box-shadow: 0 4px 16px rgba(0,0,0,0.12);
}

.ios-soon {
  width: 100%;
  border: 1.5px solid rgba(255,255,255,0.7);
  background: rgba(0,0,0,0.28);
  color: white;
  border-radius: 16px;
  font-size: 14px;
  font-weight: 700;
  padding: 12px 8px;
  margin: 0;
}
button.ios-soon {
  display: block;
  text-align: center;
  font-size: 15px;
  font-weight: 700;
  cursor: default;
}

.ios-soon-note {
  text-align: center;
  font-size: 13px;
  color: rgba(255,255,255,0.75);
  margin: 0;
}

.login .store-soon { margin-top: 18px; }

.login .ios-soon {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border-color: rgba(22,20,26,0.15);
  background: white;
  color: var(--ink);
}

.login .ios-soon-note { color: var(--muted); }

.tab {
  border: 0;
  background: none;
  color: #9a94a0;
  font-size: 10px;
  font-weight: 650;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  border-radius: 22px;
  min-width: 0;
}
.tab { color: rgba(255,255,255,0.55); }
.tab.on { color: var(--pink); background: transparent; }
.hero .tab { color: rgba(255,255,255,0.55); }
.hero .tab.on { color: var(--pink); background: transparent; }
.tab svg { width: 20px; height: 20px; }

.wheel-screen .flow-top { margin-bottom: 0; }
.wheel-screen .flow-art--wheel::after {
  background: linear-gradient(180deg, rgba(0,0,0,0.38) 0%, rgba(0,0,0,0.02) 34%, rgba(0,0,0,0.2) 100%);
}

.wheel-screen .flow-art--wheel { padding-left: 10px; padding-right: 10px; }
.wheel-wrap {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 2px 0 18px;
  min-height: 0;
}

.wheel-stage {
  position: relative;
  width: min(88vw, calc(100% - 8px), 372px);
  aspect-ratio: 1;
}

.wheel {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: conic-gradient(
    from 90deg,
    #ff2a8c,
    #c43bff,
    #3873ff,
    #3ee7f2,
    #5af273,
    #ffe040,
    #ff7a2e,
    #ff2a8c
  );
  box-shadow:
    0 0 0 14px #ff3894,
    0 0 22px 4px rgba(255, 56, 148, 0.9),
    0 0 48px 10px rgba(255, 70, 170, 0.45);
  transition: transform 2.6s cubic-bezier(0.08, 0.72, 0.12, 1);
}
.wheel.spinning {
  box-shadow:
    0 0 0 14px #ff3894,
    0 0 28px 8px rgba(255, 56, 148, 1),
    0 0 64px 16px rgba(255, 80, 180, 0.6);
}

.wheel-center {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 36%;
  height: 36%;
  border-radius: 50%;
  background: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  text-align: center;
  color: var(--ink);
  z-index: 2;
  pointer-events: none;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.16);
}
.wheel-center .wheel-emoji { font-size: 34px; line-height: 1; }
.wheel-center .wheel-name {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.05;
  padding: 0 8px;
}
.wheel-center:has(.wheel-name) .wheel-emoji { font-size: 30px; }

.wheel-screen .wheel-title {
  font-size: 32px;
  font-weight: 800;
  text-align: center;
  line-height: 1.12;
  letter-spacing: -0.03em;
  margin: 18px 12px 0;
}
.wheel-pointer {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 12px auto 0;
  filter: drop-shadow(0 0 10px rgba(255, 56, 148, 0.95));
  position: relative;
  z-index: 3;
}
.wheel-pointer-bar {
  width: 72px;
  height: 8px;
  border-radius: 999px;
  background: var(--pink);
}
.wheel-pointer-tip {
  width: 0;
  height: 0;
  margin-top: 1px;
  border-left: 11px solid transparent;
  border-right: 11px solid transparent;
  border-top: 14px solid var(--pink);
}
.wheel-pointer.on { animation: pointerPulse 0.42s ease-in-out infinite alternate; }
@keyframes pointerPulse { to { transform: scale(1.08); } }

@media (max-height: 700px) {
  .wheel-screen .wheel-title { font-size: 26px; margin-top: 8px; }
  .wheel-pointer { margin-top: 8px; }
  .wheel-stage { width: min(72vw, 300px); }
}
.local-pager { margin-top: 16px; flex: 0 0 auto; width: 100%; min-width: 0; }
.poster-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 10px;
}
.poster-head h2 {
  margin: 0;
  flex: 1;
  min-width: 0;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: rgba(255, 255, 255, 0.62);
  white-space: nowrap;
}
.poster-all {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  border: 0;
  background: none;
  color: rgba(255, 255, 255, 0.62);
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  padding: 0;
  cursor: pointer;
}
.poster-all span {
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
}
.local-track {
  display: flex;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x pan-y;
  overscroll-behavior-x: contain;
}
.local-pager.peek {
  margin-left: -22px;
  margin-right: -22px;
  width: calc(100% + 44px);
}
.local-pager.peek .poster-head { padding-inline: 22px; }
.local-pager.peek .local-track {
  gap: 10px;
  padding-inline: 26px;
}
.local-track::-webkit-scrollbar { display: none; }
.local-slide {
  flex: 0 0 100%;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  height: 174px;
  display: flex;
  box-sizing: border-box;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}
.local-pager.peek .local-slide { scroll-snap-align: center; }
.local-ticket {
  position: relative;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  height: 174px;
  display: flex;
  align-items: stretch;
  text-align: left;
  color: #fff;
  font: inherit;
  border: 0;
  padding: 0;
  border-radius: 16px;
  background: rgba(0, 0, 0, 0.34);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.28);
  cursor: pointer;
  overflow: hidden;
}
.local-ticket.has-photo { background: #140e12; }
.local-photo {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}
.local-ticket.has-photo::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.46) 0%, rgba(0, 0, 0, 0.22) 42%, rgba(0, 0, 0, 0.7) 100%);
  pointer-events: none;
}
.local-body {
  position: relative;
  z-index: 2;
  flex: 1;
  min-width: 0;
  padding: 12px 50px 12px 14px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  overflow: hidden;
}
.local-pills {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
  min-width: 0;
}
.local-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  max-width: 100%;
  height: 24px;
  padding: 0 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.03em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 0 1 auto;
}
.local-pill.cat {
  background: rgba(0, 0, 0, 0.42);
  color: #fff;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
}
.local-title, .local-line, .local-skal, .see-all-next { text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45); }
.local-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: anywhere;
  font-size: 20px;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.02em;
}
.local-line {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 3px;
  min-width: 0;
  font-size: 13px;
  font-weight: 550;
  color: rgba(255, 255, 255, 0.82);
}
.local-line span:last-child {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.local-ticket.see-all .local-body { padding-right: 14px; }
.see-all-next {
  margin-top: 4px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
  font-weight: 550;
  color: rgba(255, 255, 255, 0.82);
}
.see-all-cta {
  margin-top: auto;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding: 0 12px;
  border-radius: 999px;
  background: var(--pink);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
}
.ticket-ico { width: 14px; height: 14px; flex: none; }
.local-foot {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  min-width: 0;
}
.local-faces { display: flex; align-items: center; flex: none; }
.local-skal {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
  font-weight: 650;
  color: rgba(255, 255, 255, 0.92);
}
.local-faces .avatar,
.local-faces .placeholder-avatar {
  margin-left: -7px;
  border: 2px solid rgba(0, 0, 0, 0.55);
  box-sizing: border-box;
}
.local-faces .avatar:first-child,
.local-faces .placeholder-avatar:first-child { margin-left: 0; }
.ticket-heart, .ticket-plus {
  position: absolute;
  z-index: 2;
  border: 0;
  padding: 0;
  cursor: pointer;
}
.ticket-heart {
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.7));
  top: 8px;
  right: 8px;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  background: transparent;
  color: #fff;
}
.ticket-heart svg { width: 20px; height: 20px; display: block; }
.ticket-heart.on { color: var(--pink); }
.ticket-plus {
  right: 10px;
  bottom: 10px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--pink);
  color: #fff;
  font-size: 22px;
  font-weight: 600;
  line-height: 1;
  box-shadow: 0 4px 12px rgba(255, 56, 148, 0.4);
}
.local-archive {
  display: block;
  margin: 8px auto 0;
  padding: 4px 12px;
  font-size: 14px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.88);
}
.local-pager.large .local-slide,
.local-pager.large .local-ticket { height: 192px; }
.local-pager.large .local-body { padding: 14px 52px 14px 16px; }
.local-pager.large .local-ticket.see-all .local-body { padding-right: 16px; }
.local-pager.large .local-title { font-size: 22px; }
.local-pager.large .local-line { font-size: 15px; }
.local-pager + .event-list { margin-top: 10px; }
.local-ticket.local-skel { cursor: default; }
.local-ticket.local-skel .skel-line { display: block; width: 68%; }
.local-ticket.local-skel .skel-line.short {
  width: 76px;
  height: 18px;
  margin: 0 0 12px;
  border-radius: 999px;
}
.local-ticket.local-skel .skel-line.mid { width: 42%; }
.local-sheet {
  position: absolute;
  inset: 0;
  z-index: 50;
  background: rgba(0, 0, 0, 0.45);
  display: flex;
  align-items: flex-end;
}
.local-sheet-card {
  width: 100%;
  max-height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--cream);
  color: var(--ink);
  border-radius: 22px 22px 0 0;
}
.local-sheet-card h2, .local-sheet-card h3 { color: var(--ink); margin: 0 0 8px; }
.local-sheet-card h3 { font-size: 24px; }
.local-sheet-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex: 0 0 auto;
  padding: 18px 22px 0;
}
.local-hero {
  display: block;
  width: calc(100% + 44px);
  height: 176px;
  margin: 0 -22px 14px;
  object-fit: cover;
  background: #140e12;
}
.poster-thumb {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  object-fit: cover;
  background: #140e12;
  flex: none;
}
.hit-card .poster-thumb,
.plan-happening .poster-thumb { width: 48px; height: 48px; border-radius: 14px; }
.plan-happening .poster-thumb { width: 52px; height: 52px; border-radius: 12px; }
.local-sheet-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  padding: 4px 22px 12px;
}
.local-sheet-actions {
  flex: 0 0 auto;
  padding: 4px 22px calc(16px + var(--safe-bottom));
}
.local-sheet-actions .primary {
  white-space: normal;
  line-height: 1.3;
  text-align: center;
}
.interest-faces { display: flex; align-items: center; }
.interest-faces .avatar,
.interest-faces .placeholder-avatar,
.interest-more {
  margin-left: -8px;
  border: 2px solid var(--cream);
  box-sizing: content-box;
}
.interest-faces .avatar:first-child,
.interest-faces .placeholder-avatar:first-child { margin-left: 0; }
.interest-more {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(0,0,0,0.08);
  color: var(--ink);
  font-size: 12px;
  font-weight: 750;
}
.interest-caption { margin: 6px 0 0; font-size: 13px; font-weight: 650; color: rgba(22,20,26,0.55); }
.interest-btn {
  width: 100%;
  margin-top: 8px;
  border-radius: 999px;
  border: 0;
  background: rgba(22,20,26,0.55);
  color: #fff;
  font: inherit;
  font-weight: 750;
  padding: 12px 16px;
  cursor: pointer;
}
.interest-btn.on { background: var(--pink); }
.local-sheet .text-btn { color: var(--pink); font-weight: 700; display: block; margin: 8px auto 0; }
.local-sheet-top .text-btn { display: inline; margin: 0; flex: 0 0 auto; }
.local-kicker { color: var(--pink); font-weight: 700; margin: 8px 0; display: flex; align-items: center; gap: 8px; }
.neon-ico {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  vertical-align: middle;
  line-height: 1;
  filter: drop-shadow(0 1px 2px color-mix(in srgb, var(--neon, currentColor) 18%, transparent));
}
.neon-ico svg { width: 100%; height: 100%; display: block; overflow: hidden; }
.rangle-activity-icon.is-small { filter: none; }
.rangle-activity-icon.is-hover { opacity: .8; }
.rangle-activity-icon:is(.is-inactive, .is-outline) { color: #bdb9d1; filter: none; }
.rangle-activity-icon.is-inactive { opacity: .5; }
.local-sheet .primary { margin-top: 8px; }
.round-wait { text-align: center; padding: 8px 8px 4px; }
.round-emoji { font-size: 56px; line-height: 1; }
.round-wait h2 { margin: 10px 0 6px; }

.result {
  min-height: 100dvh;
  background: var(--cream);
  padding: calc(16px + var(--safe-top)) 20px 24px;
  display: flex;
  flex-direction: column;
}

.glyph {
  font-size: 120px;
  text-align: center;
  margin: 40px 0 10px;
}

.headline {
  font-size: 42px;
  font-weight: 900;
  text-align: center;
  letter-spacing: 0.04em;
}

.search {
  min-height: 100dvh;
  background: #fffaf6;
  padding: calc(16px + var(--safe-top)) 22px;
}

.runner {
  width: 180px;
  height: 180px;
  margin: 50px auto 24px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #ffe08a, #ff6b6b 45%, #4cc9f0);
  display: grid;
  place-items: center;
  font-size: 72px;
  animation: pulse 1.4s ease-in-out infinite;
}

@keyframes pulse {
  50% { transform: scale(1.04); }
}

.checks { display: flex; flex-direction: column; gap: 14px; margin-top: 28px; }
.checkline { display: flex; gap: 10px; align-items: center; color: var(--muted); }
.checkline.done { color: var(--ink); font-weight: 600; }

.toolbar {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: calc(12px + var(--safe-top)) 16px 8px;
  position: sticky;
  top: 0;
  z-index: 20;
}

.primary {
  width: 100%;
  border: 0;
  border-radius: 16px;
  background: var(--ink);
  color: white;
  font-size: 17px;
  font-weight: 700;
  padding: 16px;
}

.primary.pink { background: var(--pink); }
.primary:disabled { opacity: 0.4; }

.pad { padding: 0 18px 18px; }

.activity-row {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 14px 4px;
  border-bottom: 1px solid var(--line);
}
.activity-row.log-event { grid-template-columns: 1fr auto; }
.log-open {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 12px;
  align-items: center;
  min-width: 0;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  font: inherit;
  padding: 0;
  cursor: pointer;
}
.log-open .name, .log-open .muted { display: block; }
.log-open .name { font-weight: 700; }
.log-alert {
  display: inline-block;
  margin-left: 6px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 8px;
  background: #ff3894;
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  line-height: 16px;
  text-align: center;
  vertical-align: 1px;
}
.log-more { min-height: 24px; margin: 0; }
.log-restore {
  border: 0;
  background: none;
  color: var(--pink);
  font: inherit;
  font-size: 15px;
  font-weight: 700;
  padding: 8px 0 8px 8px;
  cursor: pointer;
}

.activity-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  font-size: 22px;
}

.stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  text-align: center;
  margin: 16px 0;
}
.stats b { display: block; font-size: 22px; }

.profile-pic {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  margin: 8px auto;
  display: block;
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #efeae3;
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 12px;
}

.map {
  height: 320px;
  border-radius: 20px;
  overflow: hidden;
}

.note { font-size: 13px; color: var(--muted); margin-top: 12px; }

.stack-avatars { display: flex; justify-content: center; margin: 20px 0; }
.stack-avatars img {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 3px solid white;
  margin-left: -10px;
}

.login {
  min-height: 100dvh;
  background: var(--cream);
  padding: calc(28px + var(--safe-top)) 24px 32px;
  display: flex;
  flex-direction: column;
}

.login .mark {
  width: 88px;
  height: 88px;
  border-radius: 20px;
  background: url("/assets/previews/icon-neon-512.webp?v=20261010-assets1") center / cover no-repeat;
  color: transparent;
  font-size: 0;
  margin: 48px auto 24px;
  box-shadow: 0 10px 24px rgba(255, 56, 148, 0.45);
}

.mark-sm {
  width: 34px;
  height: 34px;
  border-radius: 11px;
  background: url("/assets/previews/icon-neon-512.webp?v=20261010-assets1") center / cover no-repeat;
  color: transparent;
  font-size: 0;
  box-shadow: 0 4px 12px rgba(255, 56, 148, 0.32);
}

.apple-btn, .demo-btn {
  width: 100%;
  min-height: 50px;
  border: 0;
  border-radius: 12px;
  font-size: 17px;
  font-weight: 600;
  cursor: pointer;
}
.apple-btn { background: #000; color: #fff; margin-top: 10px; }
.login-social { display: flex; flex-direction: column; gap: 10px; margin-top: 22px; width: 100%; }
.login-social .apple-btn,
.login-social .google-btn { margin-top: 0; display: flex; align-items: center; justify-content: center; gap: 8px; }
.login-glyph { width: 18px; height: 18px; flex: none; }
.store-kicker {
  margin: 6px 0 0;
  text-align: center;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.google-btn {
  width: 100%;
  min-height: 50px;
  margin-top: 14px;
  border-radius: 12px;
  border: 1px solid rgba(22, 20, 26, 0.16);
  background: #fff;
  color: var(--ink);
  font-size: 17px;
  font-weight: 600;
  cursor: pointer;
}
.login-fields { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; }
.login-fields input {
  width: 100%;
  box-sizing: border-box;
  min-height: 50px;
  border-radius: 12px;
  border: 1px solid rgba(22, 20, 26, 0.12);
  padding: 0 14px;
  font-size: 17px;
  background: #fff;
}
.login .linkish {
  align-self: center;
  margin-top: 8px;
  border: 0;
  background: none;
  color: var(--pink);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}
.demo-btn { background: transparent; color: var(--pink); margin-top: 8px; }

.hero-arts { position: absolute; inset: 0; z-index: 0; }
.hero-art {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 1.4s ease;
}
.hero-art.on { opacity: 1; }
.hero > *:not(.hero-arts):not(.tabs):not(.local-sheet):not(.home-dock) { position: relative; z-index: 1; }
.hero > .home-dock { position: absolute; z-index: 30; }
.hero > .tabs { position: absolute; z-index: 80; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  border: 0;
  background: rgba(22,20,26,0.06);
  color: var(--ink);
  border-radius: 999px;
  padding: 8px 12px;
  font-weight: 600;
  cursor: pointer;
}
.chip.on { background: var(--pink); color: #fff; }

.handle-field {
  display: flex;
  align-items: center;
  gap: 6px;
  background: #fff;
  border-radius: 16px;
  padding: 14px;
  font-size: 20px;
  font-weight: 700;
}
.handle-field input {
  border: 0;
  flex: 1;
  font: inherit;
  background: transparent;
  outline: none;
}

.join-banner {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 12px;
  border-radius: 14px;
  background: rgba(46, 204, 113, 0.12);
}

.backdrop-row { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 6px; }
.backdrop-card {
  width: 92px;
  flex: 0 0 auto;
  text-align: center;
  cursor: pointer;
}
.backdrop-card img, .backdrop-card .mix {
  width: 92px;
  height: 118px;
  object-fit: cover;
  border-radius: 14px;
  border: 3px solid transparent;
}
.backdrop-card.on img, .backdrop-card.on .mix { border-color: var(--pink); }
.backdrop-card .mix {
  background:
    url("/assets/home-cocktail.png?v=6") center / cover,
    url("/assets/home-kite.jpg?v=4") center / cover;
}
.backdrop-card .tone-dark,
.backdrop-card .tone-light {
  position: relative;
  overflow: hidden;
}
.backdrop-card .tone-dark,
.hero.calm-dark {
  background: linear-gradient(165deg, #4a2236 0%, #2c1624 48%, #3a1c2c 100%);
}
.backdrop-card .tone-light,
.hero.calm-light {
  background: linear-gradient(165deg, #fff5f8 0%, #f6d5e2 48%, #f8e4dc 100%);
}
.backdrop-card .tone-light {
  box-shadow: inset 0 0 0 1px rgba(22, 20, 26, 0.12);
}
.hero.calm-dark { color: #fff; }
.hero.calm-light { color: var(--ink); }
.hero.calm-dark .hero-arts,
.hero.calm-light .hero-arts {
  overflow: hidden;
  background: inherit;
}
.hero.calm-dark .hero-arts::before,
.hero.calm-light .hero-arts::before,
.backdrop-card .tone-dark::before,
.backdrop-card .tone-light::before,
.hero.calm-dark .hero-arts::after,
.hero.calm-light .hero-arts::after,
.backdrop-card .tone-dark::after,
.backdrop-card .tone-light::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}
.hero.calm-dark .hero-arts::before,
.backdrop-card .tone-dark::before {
  width: 78%;
  aspect-ratio: 1;
  left: -14%;
  top: -18%;
  background: radial-gradient(circle, rgba(214, 72, 128, 0.55) 0%, rgba(120, 28, 64, 0.2) 48%, transparent 72%);
  animation: calm-drift-a 18s ease-in-out infinite alternate;
}
.hero.calm-light .hero-arts::before,
.backdrop-card .tone-light::before {
  width: 78%;
  aspect-ratio: 1;
  left: -14%;
  top: -18%;
  background: radial-gradient(circle, rgba(255, 150, 186, 0.72) 0%, rgba(255, 176, 200, 0.22) 48%, transparent 72%);
  animation: calm-drift-a 18s ease-in-out infinite alternate;
}
.hero.calm-dark .hero-arts::after,
.backdrop-card .tone-dark::after {
  width: 68%;
  aspect-ratio: 1;
  right: -12%;
  bottom: -16%;
  background: radial-gradient(circle, rgba(110, 32, 72, 0.7) 0%, rgba(48, 14, 32, 0.24) 50%, transparent 74%);
  animation: calm-drift-b 24s ease-in-out infinite alternate;
}
.hero.calm-light .hero-arts::after,
.backdrop-card .tone-light::after {
  width: 68%;
  aspect-ratio: 1;
  right: -12%;
  bottom: -16%;
  background: radial-gradient(circle, rgba(255, 186, 164, 0.7) 0%, rgba(255, 206, 190, 0.2) 50%, transparent 74%);
  animation: calm-drift-b 24s ease-in-out infinite alternate;
}
@keyframes calm-drift-a {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to { transform: translate3d(16%, 12%, 0) scale(1.16); }
}
@keyframes calm-drift-b {
  from { transform: translate3d(0, 0, 0) scale(1.06); }
  to { transform: translate3d(-14%, -10%, 0) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .hero.calm-dark .hero-arts::before,
  .hero.calm-dark .hero-arts::after,
  .hero.calm-light .hero-arts::before,
  .hero.calm-light .hero-arts::after,
  .backdrop-card .tone-dark::before,
  .backdrop-card .tone-dark::after,
  .backdrop-card .tone-light::before,
  .backdrop-card .tone-light::after {
    animation: none;
  }
}
.hero.calm-light .search-place {
  color: var(--ink);
  background: rgba(22, 20, 26, 0.06);
}
.hero.calm-light .nav-icon,
.hero.calm-light .home-avatar { color: var(--ink); }
.hero.calm-light .home-avatar {
  border-color: rgba(22, 20, 26, 0.12);
  background: rgba(22, 20, 26, 0.06);
}
.hero.calm-light .poster-head h2,
.hero.calm-light .poster-all,
.hero.calm-light .plan-block-head h2,
.hero.calm-light .plan-all { color: rgba(22, 20, 26, 0.55); }
.hero.calm-light .home-empty { color: var(--ink); }
.hero.calm-light .home-empty-sub,
.hero.calm-light .plan-empty { color: rgba(22, 20, 26, 0.62); }
.hero.calm-light .other-filters button {
  background: rgba(22, 20, 26, 0.06);
  color: var(--ink);
}
.hero.calm-light .other-filters button.on { background: rgba(22, 20, 26, 0.14); }
.hero.calm-light .home-refresh { background: rgba(22, 20, 26, 0.45); }
.hero.calm-light .event-skel { background: rgba(22, 20, 26, 0.06); }
.hero.calm-light .event-skel .skel-line,
.hero.calm-light .event-skel .event-emoji { background: rgba(22, 20, 26, 0.1); }
html.ios-standalone .hero.calm-light::before {
  content: "";
  position: fixed;
  z-index: 60;
  top: 0;
  left: 50%;
  width: min(100%, 430px);
  height: var(--safe-top);
  transform: translateX(-50%);
  background: #2c1624;
  pointer-events: none;
}
.placeholder-avatar {
  width: 32px; height: 32px; border-radius: 50%;
  background: rgba(255,255,255,0.18);
  display: grid; place-items: center;
  color: #fff; font-size: 14px;
}

.map-full { height: 52vh; border-radius: 16px; margin: 12px 0; }
.map-stage { position: relative; margin: 12px 0; }
.map-stage .map-full { position: relative; z-index: 0; margin: 0; }
.map-search {
  position: absolute;
  z-index: 1;
  top: 10px;
  left: 10px;
  right: 10px;
  display: flex;
  gap: 8px;
}
.map-search input {
  flex: 1;
  min-width: 0;
  border: 0;
  border-radius: 10px;
  padding: 10px 12px;
  font: inherit;
  font-size: 16px;
  color: var(--ink);
  background: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
}
.map-search input::placeholder { color: rgba(60, 60, 67, 0.6); }
.map-search input:focus { outline: 2px solid rgba(255, 56, 148, 0.45); }
.map-search button {
  border: 0;
  border-radius: 10px;
  padding: 10px 14px;
  font: inherit;
  font-size: 16px;
  font-weight: 650;
  color: var(--pink);
  background: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
  cursor: pointer;
}
.map-search button:disabled { opacity: 0.55; cursor: default; }
.map-search-note { margin: 8px 0 0; color: #c00; font-size: 14px; }
.map-search-note:empty { display: none; }

.round-note {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 8px;
  margin-top: 8px;
}
.round-note .round-about { margin: 0; flex: 1; }
.chat-log.empty { display: none; }
.chat-log {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 8px 16px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.chat-log::before {
  content: "";
  margin-top: auto;
}
.bubble {
  max-width: 78%;
  align-self: flex-start;
}
.bubble.mine { align-self: flex-end; }
.bubble .who {
  font-size: 11px;
  opacity: 0.7;
  margin-bottom: 2px;
}
.bubble .txt {
  background: rgba(255,255,255,0.16);
  padding: 8px 12px;
  border-radius: 18px 18px 18px 4px;
}
.bubble.mine .txt {
  background: #0b84ff;
  border-radius: 18px 18px 4px 18px;
}
.chat-img {
  width: 220px;
  height: 160px;
  max-width: 100%;
  object-fit: cover;
  border-radius: 16px;
  display: block;
  margin-bottom: 4px;
}
.chat-composer {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 8px 16px calc(10px + var(--safe-bottom));
  background: transparent;
}
.chat-plus {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 22px;
  color: #fff;
  background: rgba(255,255,255,0.14);
  border: 1px solid rgba(255,255,255,0.28);
}
.chat-composer input {
  flex: 1;
  border: 1px solid rgba(255,255,255,0.28);
  border-radius: 22px;
  padding: 10px 14px;
  font-size: 16px;
  color: #fff;
  background: rgba(255,255,255,0.12);
  box-shadow: 0 8px 24px rgba(0,0,0,0.22);
  scroll-margin-bottom: 36px;
}
.chat-composer input::placeholder { color: rgba(255,255,255,0.7); }
.chat-send {
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 50%;
  background: #0b84ff;
  color: #fff;
  font-size: 16px;
  font-weight: 700;
}
.chat-preview {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 8px;
  padding: 12px 14px;
  border: 0;
  border-radius: 18px;
  background: rgba(255,255,255,0.08);
  color: #fff;
  text-align: left;
  cursor: pointer;
}
.chat-preview-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(255,255,255,0.08);
  flex: 0 0 auto;
}
.chat-preview-copy { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.chat-preview-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 15px;
  font-weight: 750;
}
.chat-preview-title.new { color: #ff3894; }
.chat-preview-line {
  font-size: 15px;
  color: rgba(255,255,255,0.55);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.chat-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ff3894;
  display: inline-block;
}
.event-chat {
  position: fixed;
  z-index: 60;
  top: var(--vv-offset, 0px);
  left: 0;
  right: 0;
  width: min(100%, 430px);
  height: var(--app-height, 100dvh);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  background: #000;
  color: #fff;
  overflow: hidden;
}
.event-chat-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: calc(8px + var(--safe-top)) 12px 8px;
}
.event-chat-bar img {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  object-fit: cover;
  flex: 0 0 auto;
}
.event-chat-bar b, .event-chat-bar span { display: block; }
.event-chat-bar span { font-size: 12px; color: rgba(255,255,255,0.5); font-weight: 500; }
.event-chat-back {
  width: 32px;
  height: 32px;
  border: 0;
  background: transparent;
  color: #fff;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
}
.event-chat .chat-log {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  padding: 8px 16px;
  background: #000;
}
.event-chat .bubble {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  max-width: 100%;
}
.event-chat .bubble.mine { justify-content: flex-end; }
.event-chat .bubble-col { max-width: 78%; display: flex; flex-direction: column; }
.event-chat .bubble.mine .bubble-col { align-items: flex-end; }
.event-chat .bubble .who { color: rgba(255,255,255,0.55); font-weight: 650; }
.event-chat .bubble .txt { background: #2c2c2e; }
.event-chat .bubble .when {
  font-size: 11px;
  color: rgba(255,255,255,0.4);
  margin-top: 3px;
}
.chat-like {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 4px;
  padding: 0;
  border: 0;
  background: transparent;
  color: rgba(255,255,255,0.45);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}
.chat-like svg { width: 16px; height: 16px; }
.chat-like.on { color: #ff3894; }
.detail-names {
  margin-top: 4px;
  font-size: 15px;
  font-weight: 650;
  line-height: 1.35;
  color: rgba(255,255,255,0.82);
}
.detail-screen .public-roster .person { color: #fff; }
.detail-screen .public-roster .meta { color: rgba(255,255,255,0.55); }
.chat-stamp {
  align-self: center;
  font-size: 12px;
  font-weight: 650;
  color: rgba(255,255,255,0.45);
  padding: 10px 0 2px;
}
.event-chat .chat-composer {
  flex: 0 0 auto;
  background: #000;
  padding: 8px 12px calc(12px + var(--safe-bottom) + var(--browser-bottom, 0px));
}
.event-chat .chat-send.plane {
  background: transparent;
  color: rgba(255,255,255,0.85);
  font-size: 18px;
  width: 28px;
  height: 28px;
}
.event-chat .chat-composer input { background: rgba(255,255,255,0.1); }

.hidden { display: none !important; }

.dismiss-home { touch-action: pan-y; }
.event-cover {
  position: fixed;
  z-index: 200;
  top: 0;
  bottom: 0;
  left: 50%;
  width: min(100%, 430px);
  transform: translateX(-50%);
  pointer-events: auto;
}
.event-scrim {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
  pointer-events: none;
}
.event-cover > .dismiss-home { pointer-events: auto; }
.sheet-back {
  position: fixed;
  z-index: 150;
  top: 0;
  bottom: 0;
  left: 50%;
  width: min(100%, 430px);
  transform: translateX(-50%);
  overflow: hidden;
  pointer-events: none;
}
.sheet-grabber {
  position: absolute;
  z-index: 4;
  top: calc(7px + var(--safe-top));
  left: 50%;
  width: 36px;
  height: 5px;
  margin-left: -18px;
  border-radius: 99px;
  background: rgba(22, 20, 26, 0.28);
  pointer-events: none;
}
.choose-home-screen > .sheet-grabber {
  z-index: 6;
  top: var(--safe-top);
  width: 148px;
  height: 44px;
  margin-left: -74px;
  border-radius: 0;
  background: transparent;
  pointer-events: auto;
  touch-action: none;
  cursor: grab;
}
.choose-home-screen > .sheet-grabber::before {
  content: "";
  position: absolute;
  top: 7px;
  left: 50%;
  width: 36px;
  height: 5px;
  margin-left: -18px;
  border-radius: 99px;
  background: rgba(22, 20, 26, 0.28);
}
.detail-screen .sheet-grabber,
.event-chat > .sheet-grabber { background: rgba(255, 255, 255, 0.72); }
.local-sheet-card::before,
.edit-card::before,
.friend-code-card::before,
.clock-card::before {
  content: "";
  display: block;
  width: 36px;
  height: 5px;
  margin: 8px auto 0;
  border-radius: 99px;
  background: rgba(22, 20, 26, 0.28);
}
.flow-screen {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--cream);
}
.flow-art {
  position: relative;
  flex: 0 0 36%;
  background-size: cover;
  background-position: center;
  color: #fff;
  padding: calc(8px + var(--safe-top)) 16px 14px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.flow-art--setup { flex: 0 0 34%; min-height: 210px; }
.flow-art--wheel { flex: 1 1 auto; justify-content: flex-start; }
.flow-art--result { flex: 0 0 44%; }
.flow-art--search { flex: 0 0 40%; }
.flow-art--round { flex: 0 0 30%; }
.flow-art::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.16), rgba(0,0,0,0.48));
  pointer-events: none;
}
.close-btn, .text-btn, .primary { cursor: pointer; }
.flow-art > * { position: relative; z-index: 1; }
.flow-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: auto;
}
.flow-top--close { justify-content: flex-end; margin-bottom: 0; }
.flow-text {
  color: #fff;
  text-shadow: 0 2px 10px rgba(0,0,0,0.45);
  margin: 0 0 6px;
}
.flow-sheet {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  touch-action: pan-y;
  background: var(--cream);
  padding: 16px 20px calc(36px + var(--safe-bottom));
}
.flow-sheet.center {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}
.setup-label {
  font-weight: 700;
  margin: 16px 0 8px;
}
.setup-label:first-child { margin-top: 0; }

.flow-back {
  display: inline-flex;
  align-items: center;
  gap: 1px;
  color: #fff;
  font-size: 17px;
  font-weight: 650;
  padding: 6px 2px;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
}
.flow-back svg { width: 20px; height: 20px; display: block; }

.plan-screen { background: #fff1f5; }
.plan-screen .flow-top { margin-bottom: 0; }
.plan-screen .flow-art--setup {
  flex: 0 0 auto;
  height: 27%;
  min-height: 176px;
  max-height: 228px;
  justify-content: space-between;
  padding: calc(4px + var(--safe-top)) 18px 34px;
}
.plan-screen .flow-art--setup::after {
  background: linear-gradient(180deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.2) 48%, rgba(0,0,0,0.02) 100%);
}
.plan-copy { position: relative; z-index: 1; }
.plan-title {
  font-size: 34px;
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.02;
  margin: 0 0 8px;
}
.plan-sub {
  font-size: 17px;
  font-weight: 650;
  line-height: 1.25;
  margin: 0;
}
.plan-sheet {
  position: relative;
  z-index: 2;
  min-width: 0;
  margin-top: -22px;
  border-radius: 28px 28px 0 0;
  background: #fff1f5;
  padding: 14px 16px calc(18px + var(--safe-bottom));
}
.plan-occasion { margin: 0 0 16px; }
.plan-occasion h2 { margin: 0 0 4px; font-size: 22px; line-height: 1.2; }
.plan-occasion p { margin: 0; color: var(--muted); }
.plan-activity, .plan-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  width: 100%;
  max-width: 100%;
}
.plan-section { margin-top: 16px; min-width: 0; }
.plan-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 8px;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.02em;
}
.plan-head .plan-ico { color: var(--pink); width: 22px; height: 22px; }
.plan-ico {
  display: inline-flex;
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
}
.plan-ico svg { width: 100%; height: 100%; display: block; }
.plan-chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  white-space: nowrap;
  text-align: left;
  border: 0;
  background: #fff;
  color: var(--ink);
  border-radius: 999px;
  padding: 8px 12px;
  font: inherit;
  font-size: 14.5px;
  font-weight: 650;
  line-height: 1.1;
  box-shadow: 0 4px 14px rgba(22, 20, 26, 0.07);
  cursor: pointer;
}
.plan-chip.on {
  background: var(--pink);
  color: #fff;
  box-shadow: 0 6px 16px rgba(255, 56, 148, 0.28);
}
.plan-together {
  width: 100%;
  display: block;
  margin: 8px 0 4px;
  text-align: left;
  border: 0;
  border-radius: 16px;
  padding: 14px 16px;
  background: #fff;
  color: var(--ink);
  box-shadow: 0 4px 14px rgba(22, 20, 26, 0.07);
  font: inherit;
  font-size: 16px;
  font-weight: 750;
  cursor: pointer;
}
.plan-together.on {
  background: var(--pink);
  color: #fff;
  box-shadow: 0 6px 16px rgba(255, 56, 148, 0.28);
}
.who-list { display: flex; flex-direction: column; gap: 8px; margin: 8px 0 16px; }
.who-row {
  display: block;
  width: 100%;
  text-align: left;
  border: 0;
  border-radius: 16px;
  padding: 14px 16px;
  background: #fff;
  color: var(--ink);
  box-shadow: 0 4px 14px rgba(22, 20, 26, 0.07);
  cursor: pointer;
}
.who-row b, .who-row span { display: block; }
.who-row b { font-size: 16px; }
.who-row span { margin-top: 2px; font-size: 13px; font-weight: 550; color: rgba(22, 20, 26, 0.5); }
.who-row.on { background: #16141a; color: #fff; }
.who-row.on span { color: rgba(255, 255, 255, 0.72); }
.plan-chip .chev { font-size: 14px; font-weight: 700; opacity: 0.7; }
.plan-hint {
  margin: 10px 2px 0;
  font-size: 13px;
  color: rgba(22, 20, 26, 0.48);
}
.day-cal {
  margin-top: 10px;
  padding: 12px;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(22, 20, 26, 0.08);
}
.day-cal-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}
.day-cal-nav b {
  font-size: 16px;
  text-transform: capitalize;
}
.day-cal-nav button {
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 999px;
  background: rgba(22, 20, 26, 0.06);
  font: inherit;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}
.day-cal-nav button:disabled { opacity: 0.3; cursor: default; }
.day-cal-week, .day-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  text-align: center;
}
.day-cal-week {
  margin-bottom: 4px;
  font-size: 12px;
  font-weight: 700;
  color: rgba(22, 20, 26, 0.45);
}
.day-cal-day {
  aspect-ratio: 1;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-weight: 650;
  cursor: pointer;
}
.day-cal-day.on { background: var(--pink); color: #fff; }
.day-cal-day:disabled { color: rgba(22, 20, 26, 0.25); cursor: default; }
.plan-deadline {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
  padding: 14px 14px;
  border-radius: 16px;
  background: rgba(22, 20, 26, 0.05);
  color: rgba(22, 20, 26, 0.82);
  font-size: 15px;
  font-weight: 650;
}
.plan-deadline .plan-ico { color: rgba(22, 20, 26, 0.55); }
.plan-deadline span:nth-child(2) {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.plan-deadline .chev {
  color: rgba(22, 20, 26, 0.35);
  font-weight: 700;
}
.plan-deadline input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  font-size: 16px;
}
.plan-note { display: block; margin: 16px 0 0; }
.plan-note textarea {
  width: 100%;
  box-sizing: border-box;
  border: 0;
  border-radius: 16px;
  background: rgba(22, 20, 26, 0.05);
  color: var(--ink);
  padding: 14px;
  font: inherit;
  font-size: 16px;
  line-height: 1.35;
  resize: none;
  min-height: 64px;
}
.plan-note textarea::placeholder { color: rgba(22, 20, 26, 0.4); }
.round-about {
  margin: 4px 8px 8px;
  text-align: center;
  font-size: 16px;
  line-height: 1.35;
  color: var(--ink);
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.edit-sheet {
  position: absolute;
  inset: 0;
  z-index: 40;
  display: flex;
  align-items: flex-end;
  background: rgba(22, 20, 26, 0.45);
}
.edit-card {
  width: 100%;
  max-height: 88%;
  overflow: auto;
  background: #fff1f5;
  color: var(--ink);
  border-radius: 24px 24px 0 0;
  padding: 18px 18px calc(18px + var(--safe-bottom));
}
.edit-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.edit-top h2 { margin: 0; font-size: 22px; }
.edit-sheet .text-btn { color: var(--pink); font-weight: 700; width: auto; padding: 0; }
.plan-go {
  width: 100%;
  margin-top: 16px;
  border: 0;
  border-radius: 999px;
  background: var(--pink);
  color: #fff;
  font: inherit;
  font-size: 20px;
  font-weight: 800;
  padding: 16px 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-shadow: 0 12px 28px rgba(255, 56, 148, 0.28);
  cursor: pointer;
}
.plan-go:disabled { opacity: 0.4; box-shadow: none; }
.plan-go:active { transform: scale(0.985); }

@media (max-height: 700px) {
  .plan-screen .flow-art--setup { height: 24%; min-height: 150px; }
  .plan-title { font-size: 28px; }
  .plan-section { margin-top: 12px; }
}

@media (min-width: 900px) {
  .wheel-screen .wheel-title { font-size: 34px; }
  .wheel-stage { width: min(372px, calc(100% - 4px)); }
  .plan-title { font-size: 34px; }
}

.ios-screen { background: #f2f2f7; color: var(--ink); }
.pad.ios-pad { padding: calc(8px + var(--safe-top)) 0 calc(78px + var(--safe-bottom)); }
.pad.ios-pad.crew-pad { padding-top: 4px; }
.crew-pad > .ios-section:first-of-type { margin-top: 8px; }

h1.ios-title {
  font-size: 34px;
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1.05;
  margin: 6px 16px 12px;
}

.ios-nav {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr) 88px;
  align-items: center;
  min-height: 44px;
  padding: calc(8px + var(--safe-top)) 8px 6px 16px;
  background: #f2f2f7;
  position: sticky;
  top: 0;
  z-index: 5;
}
.ios-nav h1 {
  grid-column: 2;
  margin: 0;
  font-size: 17px;
  font-weight: 650;
  letter-spacing: -0.02em;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ios-nav-done.close-x {
  font-size: 28px;
  font-weight: 500;
  line-height: 1;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  padding: 0;
}
.ios-nav-done {
  grid-column: 3;
  justify-self: end;
  border: 0;
  background: none;
  color: var(--pink);
  font: inherit;
  font-size: 17px;
  font-weight: 600;
  min-height: 44px;
  padding: 8px;
  cursor: pointer;
  touch-action: manipulation;
}

.ios-search {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 16px 4px;
  padding: 0 8px 0 10px;
  height: 36px;
  border-radius: 10px;
  background: rgba(118, 118, 128, 0.12);
  color: rgba(60, 60, 67, 0.6);
}
.ios-search svg { width: 16px; height: 16px; flex: none; }
.ios-search input {
  flex: 1;
  min-width: 0;
  height: 36px;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 17px;
  color: var(--ink);
  outline: none;
}
.ios-search input::placeholder { color: rgba(60, 60, 67, 0.6); }

.pad:not(.ios-pad) .ios-section,
.pad:not(.ios-pad) .ios-footer {
  margin-left: 0;
  margin-right: 0;
}

.ios-section {
  margin: 22px 32px 6px;
  font-size: 13px;
  line-height: 1.2;
  color: #6d6d72;
  text-transform: uppercase;
  letter-spacing: -0.01em;
}
.ios-section.plain {
  text-transform: none;
  font-size: 15px;
  letter-spacing: -0.02em;
  margin-top: 14px;
  margin-bottom: 8px;
}
.ios-footer {
  margin: 6px 32px 0;
  font-size: 13px;
  line-height: 1.35;
  color: #6d6d72;
}
.privacy {
  text-align: left;
  margin-top: 36px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}
.privacy h2 {
  margin: 0 0 8px;
  font-size: 15px;
  color: var(--ink);
}
.privacy p { margin: 0 0 10px; }
.privacy a { color: var(--pink); font-weight: 700; }
.feedback-box {
  text-align: left;
  background: #fff;
  border-radius: 16px;
  padding: 14px;
  margin-top: 22px;
}
.feedback-box h2 {
  margin: 0 0 6px;
  font-size: 17px;
  color: var(--ink);
}
.feedback-box p { margin: 0 0 10px; color: var(--muted); font-size: 14px; }
.feedback-box textarea {
  width: 100%;
  box-sizing: border-box;
  min-height: 96px;
  border: 0;
  border-radius: 12px;
  background: rgba(22, 20, 26, 0.06);
  color: var(--ink);
  padding: 12px 14px;
  font: inherit;
  font-size: 16px;
  line-height: 1.35;
  resize: vertical;
}
.feedback-box .primary { width: 100%; margin-top: 10px; }
.feedback-box .primary:disabled { opacity: 0.55; }
.feedback-status { margin-top: 8px; color: var(--ink); }

.ios-group {
  background: #fff;
  border-radius: 12px;
  margin: 0 16px;
  overflow: hidden;
}
.ios-group-spaced { margin-top: 28px; }
.ios-group > * { position: relative; }
.ios-group > * + *::before {
  content: "";
  position: absolute;
  left: 16px;
  right: 0;
  top: 0;
  height: 0.5px;
  background: rgba(60, 60, 67, 0.29);
  pointer-events: none;
}
.ios-group > * + .has-glyph::before { left: 50px; }
.ios-group > * + .has-media::before { left: 68px; }
.ios-group > * + .has-avatar::before { left: 76px; }

.ios-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 44px;
  padding: 11px 16px;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 17px;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.ios-row:active { background: rgba(0, 0, 0, 0.04); }
.ios-row.static { cursor: default; }
.ios-row.static:active { background: transparent; }
.ios-row .name {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.ios-row > span.name {
  flex: 1;
  min-width: 0;
  font-weight: 400;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ios-row > .avatar,
.ios-row > .placeholder-avatar { flex: none; }
.ios-row .placeholder-avatar {
  background: rgba(255, 56, 148, 0.16);
  color: var(--pink);
}
.ios-row .meta {
  display: block;
  margin-top: 1px;
  font-size: 13px;
  font-weight: 400;
  color: #8e8e93;
}
.ios-row-copy { flex: 1; min-width: 0; }
.ios-row-copy .name,
.ios-row-copy .meta {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ios-action { color: var(--pink); font-weight: 400; }
.ios-row:disabled { opacity: 0.55; }
.friend-code-sheet {
  position: fixed;
  inset: 0;
  z-index: 80;
  background: rgba(0, 0, 0, 0.45);
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.friend-code-card {
  width: min(520px, 100%);
  background: var(--cream);
  color: var(--ink);
  border-radius: 22px 22px 0 0;
  padding: 8px 22px calc(22px + var(--safe-bottom));
}
.friend-code-card h3 { margin: 0; font-size: 24px; }
.friend-code-card p {
  margin: 0 0 16px;
  text-align: center;
  color: rgba(22, 20, 26, 0.65);
}
.friend-code-card .primary { width: 100%; margin-top: 0; }
.friend-qr {
  width: 220px;
  height: 220px;
  margin: 16px auto;
  padding: 12px;
  background: #fff;
  border-radius: 16px;
  box-sizing: border-box;
}
.friend-qr canvas { width: 100%; height: 100%; display: block; }
.ios-row.danger { color: #ff3b30; }
.ios-glyph {
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  flex: none;
  color: var(--pink);
}
.ios-glyph svg { width: 22px; height: 22px; display: block; }
.ios-note {
  margin: 0;
  padding: 12px 16px;
  font-size: 15px;
  line-height: 1.35;
  color: #8e8e93;
}
.ios-empty {
  margin: 0;
  padding: 14px 16px;
  font-size: 15px;
  color: #8e8e93;
}
.ios-you {
  margin-left: auto;
  font-size: 13px;
  color: #8e8e93;
}
.ios-inline {
  margin-left: auto;
  border: 0;
  background: none;
  color: var(--pink);
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  padding: 4px 0;
  cursor: pointer;
}
.ios-field {
  width: 100%;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 17px;
  padding: 12px 16px;
  color: var(--ink);
  outline: none;
}
.ios-emoji {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: rgba(120, 120, 128, 0.12);
  display: grid;
  place-items: center;
  font-size: 22px;
  flex: none;
}
.ios-pick {
  width: 26px;
  height: 26px;
  flex: none;
  transition: transform 0.28s cubic-bezier(0.2, 1.35, 0.4, 1);
}
.ios-pick.on { transform: scale(1.12); }
.ios-pick svg { width: 26px; height: 26px; display: block; }
.ios-pick .on { display: none; }
.ios-pick.on .off { display: none; }
.ios-pick.on .on { display: block; }

.ios-switch {
  appearance: none;
  -webkit-appearance: none;
  width: 51px;
  height: 31px;
  border: 0;
  border-radius: 16px;
  background: #e9e9eb;
  margin: 0 0 0 auto;
  position: relative;
  flex: 0 0 auto;
  cursor: pointer;
  transition: background 0.2s ease;
}
.ios-switch::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 27px;
  height: 27px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), 0 1px 1px rgba(0, 0, 0, 0.06);
  transition: transform 0.2s ease;
}
.ios-switch:checked { background: var(--pink); }
.ios-switch:checked::after { transform: translateX(20px); }
.ios-switch:focus-visible { outline: 2px solid var(--pink); outline-offset: 2px; }

.home-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  width: 100%;
  margin-top: 6px;
  padding: 10px 18px 8px;
  border: 0;
  background: none;
  color: #fff;
  text-align: center;
}
.home-empty-icon { display: block; margin-bottom: 6px; }
.home-empty-title { font-size: 34px; font-weight: 800; letter-spacing: -0.03em; line-height: 1.05; }
.home-empty-lead { font-size: 20px; font-weight: 750; letter-spacing: -0.02em; }
.home-empty-sub { max-width: 280px; color: rgba(255,255,255,0.78); font-size: 15px; line-height: 1.35; margin-top: 8px; }
.plan-block { display: flex; flex-direction: column; gap: 6px; }
.plan-block-head, .plan-nav, .choose-head, .detail-nav, .result-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.plan-block-head h2 { margin: 8px 0 0; font-size: 22px; }
.hero .plan-block-head h2 {
  margin: 2px 0 0;
  font-size: 20px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.62);
}
.hero .plan-all {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  color: rgba(255, 255, 255, 0.62);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
}
.plan-all span { margin-left: 3px; font-size: 17px; line-height: 0; }
.hero .plan-all span { margin-left: 0; font-size: 15px; font-weight: 700; line-height: 1; }
.plan-all, .plan-link { border: 0; background: none; color: var(--pink); font: inherit; font-weight: 700; cursor: pointer; padding: 0; }
.plan-card {
  position: relative;
  align-items: center;
  gap: 10px;
  padding: 8px;
  border-radius: 16px;
  background: rgba(0,0,0,0.42);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.12);
}
.plan-mark { width: 52px; height: 52px; flex: 0 0 auto; display: grid; place-items: center; }
.plan-mark.skate-mark { width: 72px; height: 52px; border-radius: 12px; overflow: hidden; background: #161411; }
.plan-mark.skate-mark img { width: 100%; height: 100%; object-fit: cover; display: block; }
.plan-copy { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 2px; }
.plan-card .event-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.plan-meta {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  color: rgba(255, 255, 255, 0.8);
  font-size: 12px;
  font-weight: 600;
}
.plan-meta .ticket-ico { width: 13px; height: 13px; }
.plan-meta span:last-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.plan-going { display: flex; align-items: center; gap: 7px; min-width: 0; margin-top: 2px; }
.plan-going small { overflow: hidden; color: rgba(255,255,255,0.9); font-size: 12px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.plan-faces { display: flex; flex: 0 0 auto; }
.plan-faces .avatar, .plan-faces .placeholder-avatar { margin-left: -8px; border: 2px solid rgba(0,0,0,0.45); }
.plan-faces .avatar:first-child, .plan-faces .placeholder-avatar:first-child { margin-left: 0; }
.plan-heart {
  width: 36px;
  height: 40px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border: 0;
  background: transparent;
  color: #fff;
  padding: 7px;
  cursor: pointer;
}
.plan-heart svg { width: 22px; height: 22px; }
.plan-heart.on { color: var(--pink); }
.plan-chevron {
  flex: 0 0 auto;
  color: rgba(255,255,255,0.58);
  font-size: 25px;
  font-weight: 600;
  line-height: 1;
}
.plan-alert {
  flex: 0 0 auto;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: #ff3894;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
  box-sizing: border-box;
}
.mine-row {
  display: grid;
  gap: 8px;
  align-items: stretch;
}
.mine-row.one { grid-template-columns: 1fr; }
.mine-row.two { grid-template-columns: 1fr 1fr; }
.mine-row.many { grid-template-columns: 1fr 1fr 1fr; }
.mine-card {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 1px;
  margin: 0;
  padding: 6px;
  border: 0;
  border-radius: 18px;
  background: rgba(20, 12, 28, 0.55);
  backdrop-filter: blur(18px);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22);
  color: #fff;
  text-align: left;
  cursor: pointer;
  font: inherit;
}
.mine-swipe {
  display: flex;
  flex-direction: column;
  min-width: 0;
  align-self: stretch;
  border-radius: 18px;
}
.mine-row.two .mine-swipe,
.mine-row.many .mine-swipe { height: 100%; }
.mine-row.two .swipe-action,
.mine-row.many .swipe-action {
  top: 0;
  bottom: 0;
  width: var(--swipe-reveal, 72px);
  border-radius: 18px;
  font-size: 12px;
  line-height: 1.15;
  padding: 8px 4px;
  white-space: normal;
}
.mine-row.many .swipe-action {
  font-size: 11px;
  line-height: 1.12;
  padding: 6px 3px;
}
.mine-swipe .mine-card { flex: 1; }
.mine-copy {
  min-width: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.mine-large {
  flex-direction: row;
  align-items: center;
  gap: 10px;
}
.mine-large { padding: 12px; }
.mine-large .mine-title { margin-top: 0; }
.mine-mark { position: relative; display: block; width: fit-content; flex: 0 0 auto; }
.mine-alert { position: absolute; top: -2px; right: -6px; z-index: 1; }
.mine-tile {
  gap: 3px;
  min-height: 156px;
  padding: 10px 10px 8px;
}
.mine-tile .mine-title { margin-top: 4px; font-size: 14px; }
.mine-row.many .mine-tile { padding: 8px; min-height: 148px; }
.mine-row.many .mine-tile .mine-title { font-size: 13px; }
.mine-row.many .mine-meta { font-size: 10px; }
.mine-tile .mine-going { margin-top: auto; }
.mine-title {
  margin-top: 4px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  font-size: 16px;
  font-weight: 750;
  line-height: 1.15;
  letter-spacing: -0.02em;
}
.mine-small .mine-title { margin-top: 1px; font-size: 14px; font-weight: 800; }
.mine-meta {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  color: rgba(255, 255, 255, 0.82);
  font-size: 12px;
  font-weight: 600;
}
.mine-small .mine-meta { font-size: 11px; }
.mine-meta .ticket-ico { width: 13px; height: 13px; }
.mine-meta span:last-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mine-going {
  display: flex;
  align-items: center;
  gap: 6px;
  padding-top: 4px;
  min-width: 0;
}
.mine-going small {
  overflow: hidden;
  color: rgba(255, 255, 255, 0.92);
  font-size: 12px;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.plan-sheet.local-sheet { background: transparent; }
.plan-sheet .local-sheet-card {
  max-height: 78%;
  color: #fff;
  background: rgba(16, 10, 18, 0.28);
  backdrop-filter: blur(22px) saturate(1.35);
  -webkit-backdrop-filter: blur(22px) saturate(1.35);
  box-shadow: 0 -16px 40px rgba(0, 0, 0, 0.22);
  border-top: 1px solid rgba(255, 255, 255, 0.22);
}
.plan-sheet .local-sheet-card::before { background: rgba(255, 255, 255, 0.78); }
.plan-sheet-bar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding-top: 6px;
  padding-bottom: 8px;
}
.plan-sheet-bar h2 {
  margin: 0;
  color: #fff;
  font-size: 17px;
  font-weight: 750;
  text-align: center;
}
.plan-sheet-bar .text-btn { justify-self: start; color: #fff; font-weight: 650; }
.plan-sheet .local-sheet-body { padding-bottom: calc(16px + var(--safe-bottom)); }
.plan-filter { display: flex; gap: 7px; margin: 2px 0 12px; }
.plan-filter button {
  height: 34px;
  border: 0;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.16);
  color: rgba(255, 255, 255, 0.82);
  padding: 0 13px;
  font: inherit;
  font-size: 13px;
  font-weight: 750;
}
.plan-filter button.on { background: var(--pink); color: #fff; }
.plan-sheet-list { display: flex; flex-direction: column; gap: 8px; }
.plan-sheet .plan-card {
  background: rgba(255, 255, 255, 0.1);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(10px);
}
.plan-sheet-empty { display: flex; flex-direction: column; gap: 5px; align-items: center; padding: 34px 16px; text-align: center; color: #fff; }
.plan-sheet-empty span { color: rgba(255, 255, 255, 0.72); font-size: 14px; }
.plan-happening {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 76px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.1);
  padding: 11px 10px 11px 13px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18);
  color: #fff;
  cursor: pointer;
}
.plan-happening > span { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 3px; }
.plan-happening b { color: var(--pink); font-size: 12px; }
.plan-happening strong, .plan-happening small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.plan-happening small { color: rgba(255, 255, 255, 0.72); }
.plan-happening .plan-heart { color: var(--pink); }
.plan-happening > i { color: rgba(255, 255, 255, 0.55); font-size: 24px; font-style: normal; }
.choose-screen { background: #fff; color: var(--ink); }
.choose-screen.screen.no-tab { overflow: hidden; padding-bottom: 0; }
.choose-top { display: flex; justify-content: flex-end; padding: calc(12px + var(--safe-top)) 16px 0; }
.choose-title { font-size: 32px; line-height: 1.05; letter-spacing: -0.03em; margin: 4px 0 8px; }
.choose-search-row { display: flex; align-items: center; gap: 4px; margin: 0 0 10px; }
.choose-back {
  width: 36px;
  height: 36px;
  border: 0;
  background: transparent;
  color: var(--ink);
  font-size: 32px;
  line-height: 1;
  padding: 0;
  cursor: pointer;
}
.choose-clear {
  border: 0;
  background: transparent;
  color: rgba(60, 60, 67, 0.55);
  font-size: 20px;
  line-height: 1;
  padding: 0 2px;
  cursor: pointer;
}
.choose-search {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
  margin: 0;
  padding: 0 12px;
  height: 40px;
  border-radius: 12px;
  background: rgba(118, 118, 128, 0.12);
  color: rgba(60, 60, 67, 0.6);
}
.choose-search svg { width: 16px; height: 16px; flex: none; }
.choose-search input {
  flex: 1;
  min-width: 0;
  height: 40px;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 16px;
  color: var(--ink);
  outline: none;
}
.choose-search input::placeholder { color: rgba(60, 60, 67, 0.6); }
.surprise {
  width: 100%;
  display: flex;
  gap: 12px;
  align-items: center;
  text-align: left;
  position: relative;
  overflow: hidden;
  min-height: 68px;
  border: 0;
  border-radius: 28px;
  background: linear-gradient(90deg, #ff2f92 0%, #c026d3 52%, #7c3aed 100%);
  color: #fff;
  padding: 14px 14px 14px 18px;
  cursor: pointer;
  box-shadow: 0 10px 24px rgba(192, 38, 180, 0.28);
}
.surprise-mark {
  flex: 0 0 auto;
  font-size: 22px;
  line-height: 1;
}
.surprise-copy {
  flex: 1;
  min-width: 0;
}
.surprise:active {
  transform: scale(0.98);
}
.surprise b, .surprise small { display: block; }
.surprise b { font-size: 18px; line-height: 1.12; letter-spacing: -0.015em; }
.surprise small { margin-top: 2px; font-size: 13px; line-height: 1.2; font-weight: 650; opacity: 0.92; }
.surprise-go {
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(255,255,255,0.2);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.24);
  font-size: 21px;
  font-weight: 850;
}
.public-events {
  width: 100%;
  display: flex;
  gap: 12px;
  align-items: center;
  text-align: left;
  border: 0;
  border-radius: 22px;
  background: #16141a;
  color: #fff;
  padding: 14px 16px;
  margin: 0 0 12px;
  cursor: pointer;
}
.public-events-mark {
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.08);
  color: var(--pink);
}
.public-events .plan-ico { width: 22px; height: 22px; }
.public-events b, .public-events small { display: block; }
.public-events small { font-weight: 550; opacity: 0.72; }
.choose-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 14px 0 8px; }
.choose-head h2 { margin: 0; font-size: 20px; }
.vibe-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 6px; }
.vibe {
  border: 1px solid rgba(22, 20, 26, 0.08);
  background: #fff;
  color: var(--ink);
  border-radius: 999px;
  padding: 6px 12px;
  font: inherit;
  font-size: 14px;
  font-weight: 750;
  box-shadow: 0 1px 2px rgba(22, 20, 26, 0.04);
  cursor: pointer;
}
.vibe.on { background: #ffe3f1; border-color: transparent; color: var(--pink-dark); }
.idea-list { display: flex; flex-direction: column; gap: 8px; }
.idea-card {
  width: 100%;
  display: flex;
  gap: 12px;
  align-items: center;
  text-align: left;
  border: 0;
  border-radius: 18px;
  padding: 8px 14px;
  color: var(--ink);
  font: inherit;
  cursor: pointer;
}
.idea-card b, .idea-card small { display: block; }
.idea-card b { font-size: 17px; }
.idea-card small { font-weight: 650; color: rgba(22, 20, 26, 0.62); margin-top: 2px; }
.idea-card span:nth-child(2) { flex: 1; min-width: 0; }
.idea-emoji { font-size: 28px; width: 44px; text-align: center; flex: none; }
.idea-card .chevron { color: rgba(22, 20, 26, 0.35); font-size: 22px; }
.idea-card.dark { background: #16141a; color: #fff; }
.idea-card.dark small, .idea-card.dark .chevron { color: rgba(255, 255, 255, 0.72); }
.idea-card.dark .public-events-mark { color: var(--pink); background: rgba(255, 255, 255, 0.08); }
.choose-tabs { display: flex; gap: 18px; margin: 0 0 4px; overflow: auto; }
.choose-tabs button {
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  padding: 8px 0;
  font: inherit;
  font-size: 15px;
  font-weight: 750;
  color: rgba(22, 20, 26, 0.45);
  cursor: pointer;
  white-space: nowrap;
}
.choose-tabs button.on { color: var(--ink); border-bottom-color: var(--pink); }
.choose-tabs button span {
  display: inline-block;
  margin-left: 4px;
  min-width: 18px;
  padding: 0 6px;
  border-radius: 9px;
  background: rgba(22, 20, 26, 0.06);
  font-size: 12px;
  line-height: 18px;
  text-align: center;
}
.choose-tabs button.on span { background: #ffe3f1; color: var(--pink-dark); }
.hit-card {
  width: 100%;
  display: grid;
  grid-template-columns: 48px 1fr auto;
  gap: 12px;
  align-items: center;
  text-align: left;
  border: 0;
  border-radius: 18px;
  background: #f6f5f8;
  padding: 12px;
  margin: 0 0 8px;
  color: inherit;
  font: inherit;
  cursor: pointer;
}
.hit-mark {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  font-size: 24px;
  background: #fff;
}
.hit-card b, .hit-card small { display: block; }
.hit-card b { font-size: 16px; }
.hit-card small { color: var(--muted); font-weight: 650; margin-top: 2px; }
.hit-card .chevron { color: rgba(22, 20, 26, 0.35); font-size: 22px; }
.choose-miss {
  width: 100%;
  display: flex;
  gap: 12px;
  align-items: center;
  text-align: left;
  border: 0;
  border-radius: 18px;
  background: #ffe3f1;
  color: var(--ink);
  padding: 12px;
  margin-top: 8px;
  font: inherit;
  cursor: pointer;
}
.choose-miss b, .choose-miss small { display: block; }
.choose-miss small { font-weight: 650; color: rgba(22, 20, 26, 0.62); margin-top: 2px; }
.choose-miss .plus {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: var(--pink);
  color: #fff;
  font-size: 26px;
  font-weight: 700;
  flex: none;
}
.choose-empty { text-align: center; padding: 8px 6px 4px; }
.choose-empty img { width: 168px; height: 168px; object-fit: contain; }
.choose-empty h2 { font-size: 26px; letter-spacing: -0.03em; margin: 8px 0; line-height: 1.15; }
.choose-empty p { margin: 0 0 14px; color: var(--muted); font-weight: 650; }
.choose-make {
  width: 100%;
  border: 0;
  border-radius: 16px;
  background: var(--pink);
  color: #fff;
  font: inherit;
  font-weight: 800;
  padding: 16px 14px;
  cursor: pointer;
}
.choose-make:disabled { opacity: 0.6; }
.recent-row {
  width: 100%;
  display: flex;
  gap: 10px;
  align-items: center;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-weight: 700;
  text-align: left;
  padding: 12px 0;
  cursor: pointer;
}
.recent-row .plan-ico { color: rgba(22, 20, 26, 0.45); }
.choose-dock {
  flex: none;
  position: relative;
  z-index: 2;
  margin-top: auto;
  padding: 10px 18px calc(10px + var(--safe-bottom));
  background: linear-gradient(180deg, rgba(255, 255, 255, 0), #fff 16px);
}
.choose-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.choose-tile {
  border: 0;
  border-radius: 16px;
  min-height: 76px;
  padding: 8px 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: var(--ink);
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}
.choose-tile span:first-child { font-size: 24px; }
.choose-home-screen {
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background:
    radial-gradient(ellipse 78% 150px at 88% 0%, rgba(255, 176, 204, 0.55), transparent 72%),
    linear-gradient(180deg, #fff1f6 0, #fff 180px);
}
.choose-home-scroll {
  width: 100%;
  height: auto;
  min-height: 0;
  flex: 1;
  overflow-x: clip;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  background: #fff;
}
.screen.no-tab.choose-home-screen {
  min-height: 0;
  padding-bottom: 0;
  overflow: hidden;
}
.choose-sticky {
  flex: none;
  position: relative;
  z-index: 3;
}
.choose-heading {
  position: relative;
  min-height: 46px;
  padding: calc(8px + var(--safe-top)) 20px 0;
}
.choose-heading .close-btn {
  position: absolute;
  top: calc(4px + var(--safe-top));
  right: 16px;
  z-index: 2;
}
html.ios-standalone .choose-heading .close-btn {
  position: absolute;
  top: calc(4px + var(--safe-top));
  right: 16px;
  width: 38px;
  height: 38px;
}
.choose-intro {
  display: grid;
  grid-template-rows: 1fr;
  padding: 0;
  transition: grid-template-rows .34s ease, opacity .22s ease;
}
.choose-intro-clip { overflow: hidden; min-height: 0; }
.choose-home-screen.is-search .choose-intro {
  grid-template-rows: 0fr;
  opacity: 0;
  pointer-events: none;
}
.choose-intro h1 {
  margin: 4px 0 4px;
  padding-right: 46px;
  color: var(--ink);
  font-size: 32px;
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.035em;
}
.choose-intro p {
  margin: 0 0 8px;
  color: rgba(22, 20, 26, 0.62);
  font-size: 15px;
  font-weight: 650;
  line-height: 1.25;
}
.choose-sticky .choose-search-row { margin: 2px 18px 12px; }
.choose-home-screen .choose-back {
  width: 0;
  margin: 0;
  padding: 0;
  opacity: 0;
  visibility: hidden;
  overflow: hidden;
  pointer-events: none;
  transition: width .32s ease, opacity .2s ease, visibility .32s ease;
}
.choose-home-screen.is-search .choose-back {
  width: 36px;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.choose-home-screen .choose-search {
  height: 48px;
  padding: 0 16px;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 8px 22px rgba(22, 20, 26, 0.1);
  outline: 1px solid rgba(22, 20, 26, 0.06);
  transition: box-shadow .28s ease, outline-color .28s ease;
}
.choose-home-screen.is-search .choose-search {
  outline-color: rgba(255, 47, 146, 0.5);
  box-shadow: 0 0 0 4px rgba(255, 47, 146, 0.14), 0 8px 20px rgba(22, 20, 26, 0.08);
}
.choose-home-screen .choose-search input { height: 48px; }
.choose-panels { position: relative; min-width: 0; }
.choose-panel {
  min-width: 0;
  transition: opacity .28s ease, transform .34s ease, visibility .28s ease;
}
.choose-panel-search {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 0;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(10px);
}
.choose-home-screen.is-search .choose-panel-home {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 0;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: none;
}
.choose-home-screen.is-search .choose-panel-search {
  position: relative;
  height: auto;
  overflow: visible;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: none;
}
.choose-panel-home > .choose-section-head:first-child { margin-top: 8px; }
.choose-suggest-filters .vibe-row { margin-top: 0; margin-bottom: 2px; }
.choose-home-screen .vibe-row {
  flex-wrap: nowrap;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow-x: auto;
  gap: 5px;
  margin: 0;
  padding: 0 16px 4px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  touch-action: pan-x pan-y;
}
.choose-home-screen .vibe-row::-webkit-scrollbar { display: none; }
.choose-home-screen .vibe {
  flex: none;
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: 0;
  background: #f3f2f5;
  padding: 5px 8px;
  font-size: 12px;
  box-shadow: none;
}
.choose-home-screen .vibe i { display: inline-flex; font-size: 13px; font-style: normal; }
.choose-home-screen .vibe .plan-ico { width: 13px; height: 13px; }
.choose-home-screen .vibe.on {
  background: linear-gradient(135deg, #ff2f92, #ff4f9e);
  color: #fff;
  box-shadow: 0 5px 14px rgba(255,47,146,0.24);
}
.choose-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: 16px 18px 8px;
}
.choose-section-head h2 { margin: 0; font-size: 20px; font-weight: 800; }
.choose-more {
  border: 0;
  background: none;
  color: rgba(22, 20, 26, 0.45);
  font: inherit;
  font-size: 14px;
  font-weight: 650;
  cursor: pointer;
  padding: 0;
}
.choose-more span { margin-left: 2px; }
.choose-recommendations {
  display: flex;
  align-items: stretch;
  gap: 12px;
  overflow-x: auto;
  padding: 4px 18px 8px;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  touch-action: pan-x pan-y;
}
.choose-recommendations::-webkit-scrollbar { display: none; }
.choose-recommendations.expanded {
  flex-wrap: wrap;
  overflow: visible;
}
.choose-recommendation {
  position: relative;
  width: 164px;
  height: 214px;
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 16px;
  background: #fff;
  color: var(--ink);
  box-shadow: 0 8px 18px rgba(22, 20, 26, 0.06);
  outline: 1px solid rgba(22, 20, 26, 0.06);
  scroll-snap-align: start;
  cursor: pointer;
}
.choose-rec-photo {
  position: relative;
  display: grid;
  place-items: center;
  height: 118px;
  overflow: hidden;
  background: #fff;
}
.choose-rec-photo::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 56%;
  width: 78%;
  height: 68%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: var(--neon, #ff4ec3);
  filter: blur(16px);
  opacity: 0.12;
  pointer-events: none;
}
.choose-rec-photo > .neon-ico { position: relative; z-index: 1; }
.choose-rec-photo img {
  position: relative;
  z-index: 1;
  width: 92%;
  height: 108px;
  display: block;
  object-fit: contain;
}
.choose-rec-photo.is-photo { background: #140e12; }
.choose-rec-photo.is-photo::before { display: none; }
.choose-rec-photo.is-photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.choose-rec-photo.is-photo .choose-heart {
  color: #fff;
  background: rgba(0, 0, 0, 0.35);
  border-radius: 50%;
}
.choose-rec-photo.is-photo .choose-heart.on { color: var(--pink); background: #fff; }
.choose-heart {
  position: absolute;
  z-index: 2;
  top: 6px;
  right: 6px;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border: 0;
  background: transparent;
  color: var(--pink);
  padding: 0;
  cursor: pointer;
}
.choose-heart svg { width: 22px; height: 22px; display: block; }
.choose-heart.on { color: var(--pink); }
.choose-rec-copy {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
  min-height: 0;
  padding: 8px 10px 10px;
}
.choose-rec-copy b {
  max-width: 100%;
  overflow: hidden;
  font-size: 15px;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.choose-rec-copy small {
  width: 100%;
  margin-top: 2px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  color: rgba(22, 20, 26, 0.55);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.25;
  max-height: 2.5em;
}
.choose-proof {
  display: flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  height: 18px;
  margin-top: auto;
  overflow: hidden;
  color: rgba(22, 20, 26, 0.55);
  font-size: 11px;
  font-weight: 650;
  white-space: nowrap;
}
.choose-faces { display: flex; flex: none; }
.choose-faces .avatar,
.choose-faces .placeholder-avatar {
  margin-left: -6px;
  border: 1.5px solid #fff;
  box-sizing: border-box;
}
.choose-faces .avatar:first-child,
.choose-faces .placeholder-avatar:first-child { margin-left: 0; }
.choose-moods {
  display: flex;
  gap: 7px;
  overflow-x: auto;
  padding: 0 18px 2px;
}
.choose-mood {
  position: relative;
  width: 88px;
  height: 76px;
  flex: 0 0 auto;
  overflow: hidden;
  border: 0;
  border-radius: 10px;
  background: #242027;
  color: #fff;
  padding: 0;
  font: inherit;
  cursor: pointer;
}
.choose-mood::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 36%, rgba(0,0,0,0.76));
}
.choose-mood img { width: 100%; height: 100%; object-fit: cover; }
.choose-mood span {
  position: absolute;
  z-index: 1;
  left: 7px;
  right: 7px;
  bottom: 7px;
  overflow: hidden;
  font-size: 11px;
  font-weight: 800;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.choose-cat-empty { margin: 0 18px 8px; color: rgba(22, 20, 26, 0.55); font-size: 14px; }
.choose-head-actions { display: flex; gap: 14px; align-items: baseline; }
.choose-mine-grid { padding: 0 18px 8px; }
.choose-all-list { padding: 4px 18px 8px; display: flex; flex-direction: column; gap: 8px; }
.choose-screen .hit-mark { position: relative; overflow: hidden; }
.choose-screen .hit-mark::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 54%;
  width: 34px;
  height: 34px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: var(--neon, #ff8f40);
  filter: blur(8px);
  opacity: 0.12;
}
.choose-screen .hit-mark .neon-ico { position: relative; z-index: 1; }
.mine-activity { margin: 0; }
.mine-activity-copy { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.mine-activity-copy b {
  overflow: hidden;
  font-size: 16px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mine-activity-copy small, .mine-activity .plan-meta {
  color: rgba(22, 20, 26, 0.55);
  font-size: 12px;
  font-weight: 600;
}
.mine-activity .plan-meta .ticket-ico { width: 13px; height: 13px; }
.mine-activity-side { display: flex; flex: none; align-items: center; gap: 6px; }
.mine-activity .mine-going small { color: rgba(22, 20, 26, 0.62); }
.mine-activity .plan-faces .avatar,
.mine-activity .plan-faces .placeholder-avatar { border-color: #fff; }
.choose-categories {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  padding: 0 16px 8px;
}
.choose-categories button {
  height: 44px;
  display: inline-flex;
  flex: 0 0 auto;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border: 0;
  border-radius: 16px;
  background: #f3f2f5;
  color: var(--ink);
  padding: 0 8px;
  font: inherit;
  cursor: pointer;
}
.choose-categories button.on { background: var(--pink); color: #fff; }
.choose-categories i { font-size: 15px; line-height: 1; font-style: normal; }
.choose-categories span { font-size: 12px; font-weight: 750; white-space: nowrap; }
.choose-home-screen > .choose-dock {
  width: 100%;
  margin: 0;
  padding-top: 7px;
  max-height: 220px;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(255,255,255,0.2), #fff 12px);
  transition: opacity .22s ease, transform .32s ease, max-height .32s ease, padding .32s ease;
}
.choose-home-screen.is-search > .choose-dock {
  max-height: 0;
  padding-top: 0;
  padding-bottom: 0;
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
}
.find-screen, .find-art { background: #111; }
.find-art {
  min-height: 100%;
  background-size: cover;
  background-position: center;
  display: flex;
  flex-direction: column;
  color: #fff;
}
.find-copy { margin-top: auto; padding: 28px 22px 48px; }
.find-copy h1 { margin: 8px 0; font-size: 34px; line-height: 1.05; letter-spacing: -0.03em; }
.find-copy p { margin: 0; font-weight: 650; }
.find-face { font-size: 64px; min-height: 72px; }
.result-screen { background: #fff; }
.result-art {
  flex: 1;
  min-height: 0;
  background-size: cover;
  background-position: center top;
  display: flex;
}
.result-nav, .detail-nav { padding: calc(12px + var(--safe-top)) 16px 0; width: 100%; }
.result-nav .text-btn, .detail-nav .text-btn { color: #fff; font-size: 28px; font-weight: 700; }
.result-nav .text-btn:last-child, .detail-nav .text-btn:last-child { font-size: 16px; }
.result-sheet { background: #fff; color: var(--ink); padding: 18px 22px calc(16px + var(--safe-bottom)); }
.result-sheet h1 { margin: 0 0 8px; font-size: 34px; letter-spacing: -0.03em; }
.result-sheet p { margin: 0 0 16px; color: rgba(22,20,26,0.65); }
.plan-form { background: #fff; color: var(--ink); }
.plan-form h1 { margin: 4px 0 6px; font-size: 34px; letter-spacing: -0.03em; }
.plan-lead { margin: 0 0 8px; font-weight: 650; color: rgba(22,20,26,0.62); }
.plan-back {
  width: 36px;
  height: 36px;
  border: 0;
  padding: 0;
  background: transparent;
  color: var(--ink);
  display: grid;
  place-items: center;
}
.plan-back svg { width: 22px; height: 22px; }
.plan-activity {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 8px 0 0;
}
.plan-activity-shot {
  width: 72px;
  height: 72px;
  flex: none;
  margin: 0;
  padding: 0;
  border-radius: 18px;
  overflow: hidden;
  cursor: pointer;
}
.plan-activity img,
.plan-activity-fallback {
  width: 72px;
  height: 72px;
  border-radius: 18px;
  object-fit: cover;
  flex: none;
  background: #f4f2f6;
  display: block;
}
.plan-activity-fallback {
  display: grid;
  place-items: center;
  color: var(--pink);
  font-size: 22px;
}
.plan-activity h1 {
  margin: 0;
  font-size: 28px;
  letter-spacing: -0.03em;
}
.plan-activity .text-btn {
  margin-top: 2px;
  padding: 0;
  color: var(--pink);
  font-size: 15px;
  font-weight: 700;
}
.plan-sentence {
  margin: 16px 0 0;
  padding: 14px;
  border-radius: 16px;
  background: rgba(22, 20, 26, 0.05);
  color: var(--ink);
  font-size: 16px;
  line-height: 1.35;
}
.plan-activity + .plan-note,
.plan-sentence + .plan-note { margin-top: 12px; }
.plan-nav { padding-top: calc(8px + var(--safe-top)); }
.plan-nav .text-btn { color: var(--pink); font-size: 16px; font-weight: 700; }
.plan-more {
  width: 100%;
  display: flex;
  justify-content: space-between;
  border: 0;
  background: none;
  color: rgba(22,20,26,0.55);
  font: inherit;
  font-weight: 650;
  padding: 8px 0 12px;
  cursor: pointer;
}
.send-cover {
  position: absolute;
  inset: 0;
  z-index: 30;
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  color: #fff;
}
.send-cover.event-invite-cover {
  position: fixed;
  z-index: 220;
  top: 0;
  right: auto;
  bottom: 0;
  left: 50%;
  width: min(100%, 430px);
  transform: translateX(-50%);
}
.send-sheet {
  position: relative;
  z-index: 1;
  width: 100%;
  background: rgba(12, 10, 16, 0.9);
  border-radius: 28px 28px 0 0;
  padding: 28px 22px calc(22px + var(--safe-bottom));
  text-align: center;
}
.send-bar {
  height: 6px;
  margin: 14px 28px;
  border-radius: 99px;
  background: rgba(255,255,255,0.16);
  overflow: hidden;
}
.send-bar span {
  display: block;
  height: 100%;
  width: 42%;
  border-radius: inherit;
  background: var(--pink);
  animation: sendglide 1.1s ease-in-out infinite alternate;
}
@keyframes sendglide { from { transform: translateX(-30%); } to { transform: translateX(170%); } }
.send-cancel {
  margin-top: 10px;
  border: 0;
  background: none;
  color: rgba(255,255,255,0.86);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.send-confetti {
  position: absolute;
  left: 16px;
  right: 16px;
  top: 10px;
  height: 36px;
  background:
    radial-gradient(circle at 12% 40%, #ff3894 4px, transparent 5px),
    radial-gradient(circle at 32% 18%, #ffe14a 4px, transparent 5px),
    radial-gradient(circle at 54% 55%, #4cc9f0 4px, transparent 5px),
    radial-gradient(circle at 74% 16%, #ff8a3d 4px, transparent 5px),
    radial-gradient(circle at 90% 62%, #fff 3px, transparent 4px);
}
.send-count { font-weight: 700; opacity: 0.8; }
.send-dim { position: absolute; inset: 0; border: 0; background: rgba(0,0,0,0.55); }
.send-copy, .send-card { position: relative; z-index: 1; text-align: center; padding: 24px; }
.send-card { position: relative; width: min(100% - 48px, 360px); margin: auto 24px; background: rgba(0,0,0,0.55); border-radius: 28px; }
.send-plane, .send-check { font-size: 54px; color: var(--pink); }
.send-share {
  margin-top: 8px;
  width: 100%;
  border: 0;
  background: rgba(255,255,255,0.16);
  color: #fff;
  border-radius: 999px;
  min-height: 48px;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.gather-actions { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.gather-actions .send-share { margin-top: 0; }
.send-share-primary { background: var(--pink); }
.gather-panel {
  margin: 12px 0;
  max-height: 42vh;
  overflow: auto;
  background: #fff;
  color: var(--ink);
  border-radius: 18px;
  text-align: left;
}
.gather-friend {
  width: 100%;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-weight: 650;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(22,20,26,0.06);
  cursor: pointer;
}
.gather-friend:disabled { color: var(--muted); cursor: default; }
.gather-empty { margin: 0; padding: 16px; color: var(--muted); }
.invite-redesign {
  position: fixed;
  inset: 0;
  z-index: 230;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  color: var(--ink);
}
.invite-dim {
  position: absolute;
  inset: 0;
  border: 0;
  background: rgba(0,0,0,0.46);
}
.invite-panel {
  position: relative;
  width: min(100%, 430px);
  height: min(78dvh, 720px);
  min-height: 530px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 24px 24px 0 0;
  background: #fff;
  box-shadow: 0 -16px 50px rgba(0,0,0,0.24);
}
.invite-grabber {
  width: 38px;
  height: 5px;
  flex: 0 0 auto;
  margin: 8px auto 0;
  border-radius: 3px;
  background: rgba(22,20,26,0.18);
}
.invite-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 18px 0;
}
.invite-head > div { min-width: 0; flex: 1; }
.invite-head h2 { margin: 0; font-size: 24px; letter-spacing: -0.025em; }
.invite-head p { margin: 3px 0 0; color: rgba(22,20,26,0.56); font-size: 13px; font-weight: 600; }
.invite-close {
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: rgba(22,20,26,0.07);
  color: var(--ink);
  font: inherit;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}
.invite-audiences {
  display: grid;
  grid-template-columns: repeat(4, minmax(78px, 1fr));
  gap: 8px;
  overflow-x: auto;
  padding: 14px 18px 4px;
  scrollbar-width: none;
}
.invite-audience {
  min-width: 78px;
  height: 108px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border: 1.5px solid transparent;
  border-radius: 14px;
  background: rgba(22,20,26,0.035);
  color: var(--ink);
  padding: 8px 5px;
  font: inherit;
  cursor: pointer;
}
.invite-audience i { height: 25px; font-size: 21px; font-style: normal; line-height: 25px; }
.invite-audience b { font-size: 12px; line-height: 1.1; }
.invite-audience span { color: rgba(22,20,26,0.48); font-size: 9px; font-weight: 600; line-height: 1.15; }
.invite-audience.on { border-color: var(--pink); background: rgba(255,56,148,0.07); color: var(--pink); }
.invite-audience.on span { color: rgba(255,56,148,0.72); }
.invite-body {
  min-height: 0;
  flex: 1;
  overflow-y: auto;
  padding: 12px 18px 4px;
}
.invite-body h3 { margin: 0 0 9px; font-size: 14px; }
.invite-search {
  height: 40px;
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 6px;
  padding: 0 12px;
  border-radius: 12px;
  background: rgba(118,118,128,0.1);
  color: rgba(22,20,26,0.38);
}
.invite-search svg { width: 16px; height: 16px; }
.invite-search input {
  min-width: 0;
  flex: 1;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 14px;
}
.invite-list { display: flex; flex-direction: column; }
.invite-person {
  min-height: 52px;
  display: flex;
  align-items: center;
  gap: 10px;
  border: 0;
  border-bottom: 1px solid rgba(22,20,26,0.08);
  background: transparent;
  color: var(--ink);
  padding: 7px 2px;
  text-align: left;
  font: inherit;
  cursor: pointer;
}
.invite-person > b { min-width: 0; flex: 1; font-size: 14px; }
.invite-person > small { color: rgba(22,20,26,0.44); font-weight: 650; }
.invite-check {
  width: 21px;
  height: 21px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border: 1.5px solid rgba(22,20,26,0.2);
  border-radius: 5px;
  color: #fff;
  font-size: 13px;
  font-weight: 900;
}
.invite-check.on { border-color: var(--pink); background: var(--pink); }
.invite-group-list { gap: 9px; }
.invite-group {
  display: flex;
  align-items: center;
  gap: 11px;
  border: 0;
  border-radius: 14px;
  background: rgba(22,20,26,0.035);
  color: var(--ink);
  padding: 9px;
  text-align: left;
  font: inherit;
  cursor: pointer;
}
.invite-group-art {
  width: 56px;
  height: 56px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--pink), #8b46ef);
  color: #fff;
  font-size: 24px;
  font-weight: 850;
}
.invite-group-copy { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 2px; }
.invite-group-copy > b { font-size: 14px; }
.invite-group-copy > small { color: rgba(22,20,26,0.5); font-size: 11px; }
.invite-group-faces { display: flex; margin-top: 2px; }
.invite-group-faces .avatar, .invite-group-faces .placeholder-avatar { margin-left: -6px; border: 2px solid #fff; }
.invite-group-faces .avatar:first-child, .invite-group-faces .placeholder-avatar:first-child { margin-left: 0; }
.invite-group-faces i {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  margin-left: -4px;
  border-radius: 50%;
  background: #ece9e7;
  color: rgba(22,20,26,0.6);
  font-size: 9px;
  font-style: normal;
  font-weight: 750;
}
.invite-open { display: flex; flex-direction: column; align-items: center; padding: 34px 22px; text-align: center; }
.invite-open > span { color: var(--pink); font-size: 52px; }
.invite-open h3 { margin: 8px 0 6px; font-size: 20px; }
.invite-open p { max-width: 320px; margin: 0; color: rgba(22,20,26,0.56); font-size: 14px; line-height: 1.4; }
.invite-share-first {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 11px;
  padding: 24px 4px;
  text-align: center;
}
.invite-share-first.waiting { opacity: 0.68; }
.invite-share-mark {
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--pink);
  color: #fff;
  font-size: 28px;
  font-weight: 850;
}
.invite-share-first h3 { margin: 0; font-size: 21px; }
.invite-share-first p { max-width: 330px; margin: 0 0 4px; color: rgba(22,20,26,0.56); font-size: 13px; font-weight: 600; line-height: 1.35; }
.invite-share-primary, .invite-share-copy {
  width: 100%;
  height: 50px;
  border: 0;
  border-radius: 25px;
  font: inherit;
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
}
.invite-share-primary { background: var(--pink); color: #fff; }
.invite-share-copy { background: rgba(22,20,26,0.055); color: var(--ink); }
.invite-share-primary:disabled, .invite-share-copy:disabled { opacity: 0.55; }
.invite-empty { margin: 0; padding: 18px 4px; color: rgba(22,20,26,0.5); font-size: 14px; font-weight: 600; }
.invite-footer { padding: 10px 18px calc(10px + var(--safe-bottom)); background: rgba(255,255,255,0.96); }
.invite-alternatives { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 9px; }
.invite-alternatives button {
  height: 38px;
  border: 0;
  border-radius: 20px;
  background: rgba(22,20,26,0.055);
  color: var(--ink);
  font: inherit;
  font-size: 12px;
  font-weight: 750;
}
.invite-done {
  width: 100%;
  height: 52px;
  border: 0;
  border-radius: 27px;
  background: var(--pink);
  color: #fff;
  font: inherit;
  font-size: 16px;
  font-weight: 750;
  cursor: pointer;
}
.invite-done:disabled { opacity: 0.52; }
.invite-done span { margin-left: 8px; }
.invite-later {
  border: 0;
  background: transparent;
  color: rgba(22,20,26,0.58);
  padding: 8px 12px 0;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
.invite-later:disabled { opacity: 0.5; }
.invite-sent-flash {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 24px;
  border: 0;
  border-radius: inherit;
  background: rgba(255,255,255,0.94);
  color: var(--ink);
  font: inherit;
  text-align: center;
  cursor: pointer;
}
.invite-sent-mark {
  width: 72px;
  height: 72px;
  display: grid;
  place-items: center;
  margin-bottom: 4px;
  border-radius: 50%;
  background: var(--pink);
  color: #fff;
  font-size: 36px;
  font-weight: 850;
  animation: invite-pop 0.45s cubic-bezier(0.2, 0.9, 0.3, 1.15);
}
.invite-sent-flash h2 { margin: 0; font-size: 26px; letter-spacing: -0.03em; }
.invite-sent-flash p { margin: 0; color: rgba(22,20,26,0.56); font-size: 15px; font-weight: 650; }
@keyframes invite-pop {
  from { transform: scale(0.45); opacity: 0; }
  to { transform: none; opacity: 1; }
}
.invite-sent { align-items: stretch; background: #050505; color: #fff; }
.invite-sent-panel {
  position: relative;
  width: min(100%, 430px);
  min-height: 100%;
  overflow-y: auto;
  margin: 0 auto;
  padding: calc(38px + var(--safe-top)) 20px calc(20px + var(--safe-bottom));
  background: #050505;
  color: #fff;
  text-align: center;
}
.invite-close-dark { position: absolute; top: calc(12px + var(--safe-top)); right: 16px; background: rgba(255,255,255,0.18); color: #fff; }
.invite-sent-check {
  width: 78px;
  height: 78px;
  display: grid;
  place-items: center;
  margin: 0 auto 12px;
  border-radius: 50%;
  background: #fff;
  color: var(--pink);
  font-size: 38px;
  font-weight: 900;
}
.invite-sent-panel > h2 { margin: 0; font-size: 30px; letter-spacing: -0.03em; }
.invite-sent-panel > p { margin: 5px 20px 18px; color: rgba(255,255,255,0.68); }
.invite-event-card {
  display: flex;
  align-items: center;
  gap: 11px;
  margin: 0 0 20px;
  border-radius: 17px;
  background: rgba(255,255,255,0.1);
  padding: 11px;
  text-align: left;
}
.invite-event-card img { width: 66px; height: 66px; flex: 0 0 auto; border-radius: 13px; object-fit: cover; }
.invite-event-card > span { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 4px; }
.invite-event-card b, .invite-event-card small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.invite-event-card small { color: rgba(255,255,255,0.64); }
.invite-event-card > i { color: rgba(255,255,255,0.55); font-size: 24px; font-style: normal; }
.invite-sent-panel > h3, .invite-sent-to { margin: 0 0 10px; color: rgba(255,255,255,0.78); font-size: 13px; text-align: left; }
.invite-share-actions { display: flex; gap: 14px; margin-bottom: 20px; }
.invite-share-actions button {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  border: 0;
  background: transparent;
  color: rgba(255,255,255,0.78);
  font: inherit;
}
.invite-share-actions i {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(255,255,255,0.12);
  color: #fff;
  font-size: 20px;
  font-style: normal;
}
.invite-share-actions span { font-size: 11px; }
.invite-sent-to { display: flex; flex-direction: column; gap: 9px; margin-bottom: 18px; }
.invite-sent-to > span { min-height: 34px; display: flex; align-items: center; color: rgba(255,255,255,0.62); }
.invite-sent-to .avatar, .invite-sent-to .placeholder-avatar { margin-right: -7px; border: 2px solid #050505; }
.invite-more {
  width: 100%;
  height: 48px;
  margin-top: 8px;
  border: 0;
  border-radius: 25px;
  background: rgba(255,255,255,0.1);
  color: #fff;
  font: inherit;
  font-weight: 700;
}
.member-head {
  margin: 14px 0 4px;
  font-size: 13px;
  font-weight: 750;
  color: rgba(255,255,255,0.55);
}
.detail-screen {
  background: #000;
  color: #fff;
  height: 100%;
  min-height: 100%;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.detail-hero {
  height: 280px;
  min-height: 280px;
  max-height: 280px;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  color: #fff;
  display: flex;
  flex-direction: column;
  position: relative;
}
.detail-hero-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  pointer-events: none;
}
.detail-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.45) 0%, rgba(0,0,0,0) 28%, rgba(0,0,0,.2) 55%, #000 100%);
  pointer-events: none;
}
.detail-nav, .detail-title { position: relative; z-index: 1; }
.detail-x {
  width: 36px;
  height: 36px;
  border: 0;
  background: none;
  color: #fff;
  font-size: 26px;
  font-weight: 700;
  cursor: pointer;
  padding: 0;
}
.detail-edit {
  display: inline-block;
  border: 0;
  background: rgba(255,255,255,0.18);
  color: #fff;
  border-radius: 999px;
  padding: 8px 14px;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.detail-nav-actions { display: flex; gap: 8px; align-items: center; }
.detail-title { margin-top: auto; padding: 18px 20px 8px; }
.detail-title h1 { margin: 0; font-size: 36px; letter-spacing: -0.03em; }
.detail-title p { margin: 6px 0 0; font-weight: 650; }
.detail-host { opacity: 0.72; }
.detail-sheet { padding: 8px 20px calc(28px + var(--safe-bottom)); background: #000; }
.detail-buttons { display: flex; gap: 10px; align-items: center; margin-bottom: 18px; }
.detail-more { margin-left: auto; }
.detail-invite, .detail-link, .detail-close {
  flex: 1;
  min-height: 48px;
  border-radius: 999px;
  border: 0;
  font: inherit;
  font-weight: 750;
  cursor: pointer;
}
.detail-invite { background: var(--pink); color: #fff; }
.detail-link, .detail-close { background: rgba(255,255,255,0.14); color: #fff; }
.detail-close { font-size: 15px; }
.detail-more { position: relative; flex: 0 0 auto; }
.detail-more > button {
  width: 48px;
  height: 48px;
  border: 0;
  border-radius: 50%;
  background: rgba(255,255,255,0.14);
  color: #fff;
  font-size: 22px;
  font-weight: 800;
  cursor: pointer;
}
.detail-menu {
  position: absolute;
  right: 0;
  top: 54px;
  z-index: 6;
  min-width: 190px;
  background: #1c1a20;
  border-radius: 14px;
  padding: 6px;
  box-shadow: 0 12px 30px rgba(0,0,0,0.45);
  display: flex;
  flex-direction: column;
}
.detail-menu button,
.detail-menu label {
  position: relative;
  display: block;
  border: 0;
  background: none;
  color: #fff;
  text-align: left;
  font: inherit;
  font-weight: 650;
  padding: 10px 12px;
  border-radius: 10px;
  cursor: pointer;
}
.detail-menu label input[type="file"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  opacity: 0;
  font-size: 16px;
  cursor: pointer;
}
.detail-menu button.danger { color: #ff5a5a; }
.detail-row {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 12px;
  padding: 8px 0;
  align-items: start;
}
.detail-row .plan-ico { color: rgba(255,255,255,0.72); width: 22px; height: 22px; margin-top: 2px; }
.detail-row span { display: block; font-size: 12px; font-weight: 750; color: rgba(255,255,255,0.48); }
.detail-row b { display: block; font-size: 16px; font-weight: 650; }
.detail-row button { border: 0; background: none; color: var(--pink); font: inherit; font-weight: 700; padding: 4px 0 0; cursor: pointer; }
.detail-row .detail-place-link {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  max-width: 100%;
  padding: 3px 0 4px;
  color: #fff;
  text-align: left;
}
.detail-place-link b {
  overflow-wrap: anywhere;
  text-decoration: underline;
  text-decoration-color: rgba(255, 56, 148, 0.55);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
.detail-row .detail-place-link .detail-place-action {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex: none;
  color: var(--pink);
  font-size: 12px;
  font-weight: 800;
}
.detail-place-action i {
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(255, 56, 148, 0.16);
  font-size: 18px;
  font-style: normal;
  line-height: 1;
}
.detail-place-link:active { opacity: 0.72; }
.offer-list { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.offer { padding: 10px 12px; border-radius: 14px; background: rgba(255,255,255,0.08); }
.offer b { font-size: 15px; }
.offer-meta { display: block; margin-top: 2px; font-size: 12px; font-weight: 650; color: rgba(255,255,255,0.55); }
.offer-actions { display: flex; gap: 8px; align-items: center; margin-top: 8px; }
.detail-row .offer-actions button {
  background: rgba(255,255,255,0.14);
  color: #fff;
  font-size: 13px;
  font-weight: 750;
  padding: 6px 12px;
  border-radius: 999px;
}
.detail-row .offer-actions button.on { background: var(--pink); }
.detail-row .offer-actions button[data-choose] { background: #fff; color: #111; }
.offer-picked { font-size: 13px; font-weight: 800; color: var(--pink); }
.detail-row .offer-add { color: var(--pink); background: none; padding: 2px 0 0; }
.edit-card .plan-note input {
  width: 100%;
  box-sizing: border-box;
  margin-top: 8px;
  border: 0;
  border-radius: 12px;
  background: #fff;
  padding: 12px 14px;
  font: inherit;
  color: #16141a;
}
.offer-note { margin: 8px 0 0; color: rgba(22, 20, 26, 0.55); font-size: 14px; }
.detail-faces {
  margin: 0 0 8px 40px;
  border: 0;
  background: none;
  padding: 0;
  cursor: pointer;
}
.detail-screen .plan-faces .avatar,
.detail-screen .plan-faces .placeholder-avatar { border-color: #000; }
.detail-plus {
  width: 36px;
  height: 36px;
  margin-left: -8px;
  border-radius: 50%;
  border: 2px solid #000;
  background: rgba(255,255,255,0.16);
  display: inline-grid;
  place-items: center;
  font-size: 12px;
  font-weight: 800;
  color: #fff;
}
.detail-about { color: #fff; line-height: 1.4; font-weight: 650; }
.detail-guest { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.guest-replies { margin: 4px 0 8px 40px; }
.detail-screen .guest-replies .person { color: #fff; }
.detail-screen .guest-replies .meta { color: rgba(255,255,255,0.55); }
.detail-guest label { display: block; font-weight: 750; margin-top: 4px; }
.detail-guest input:not([type="hidden"]) {
  width: 100%;
  box-sizing: border-box;
  border: 0;
  border-radius: 16px;
  padding: 16px;
  margin: 10px 0 4px;
  font: inherit;
  background: #fff;
  color: #16141a;
}
.detail-cancelled-kicker {
  margin: 0 0 6px;
  color: #ff5a5a;
  font-weight: 800;
  letter-spacing: 1.4px;
  font-size: 13px;
  text-transform: uppercase;
}
.detail-screen.is-cancelled .detail-hero-photo { filter: grayscale(0.85) brightness(0.72); }
.detail-cancelled {
  margin: 4px 0 18px;
  padding: 16px;
  border-radius: 16px;
  background: rgba(255, 90, 90, 0.16);
  border: 1px solid rgba(255, 90, 90, 0.5);
}
.detail-cancelled b { display: block; font-size: 20px; font-weight: 800; }
.detail-cancelled p { margin: 4px 0 0; color: rgba(255,255,255,0.82); font-weight: 650; }
.detail-login {
  margin: 28px 0 8px;
  color: rgba(255,255,255,0.55);
  font-size: 15px;
  line-height: 1.4;
  font-weight: 650;
}
.detail-login a { color: #fff; font-weight: 750; }
.detail-quiet {
  display: inline-block;
  margin-top: 8px;
  color: rgba(255,255,255,0.55);
  font-weight: 700;
  text-decoration: none;
}
.detail-note { margin: 8px 0 0; font-weight: 700; }
.detail-sheet .check { font-size: 22px; font-weight: 800; margin: 4px 0 8px; }
.detail-sheet .notice { color: #ffb4a8; font-weight: 700; margin: 0 0 8px; }

/* Phone Safari only hides its bars when the document itself scrolls. */
@media (pointer: coarse) {
  html, body {
    height: auto;
    overflow-x: hidden;
    overflow-y: auto;
  }
  body { min-height: 100lvh; overscroll-behavior-y: auto; }

  #app {
    position: relative;
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
    height: auto;
    min-height: 100lvh;
    overflow: visible;
  }

  .screen,
  .hero {
    height: auto;
    min-height: 100lvh;
    overflow: visible;
  }
  .screen.no-tab { overflow: visible; }

  .screen > .pad,
  .event-list,
  .flow-sheet {
    overflow: visible;
    flex: 0 0 auto;
    min-height: auto;
    max-height: none;
    overscroll-behavior: auto;
  }

  .hero { background-color: #111; }
  /* 100lvh stays put behind the browser bar. 100dvh shrinks while the bar is open, so a cover photo zooms as the bar collapses and the page color shows in the gap. */
  .hero-arts {
    position: fixed;
    inset: auto;
    top: 0;
    left: 50%;
    z-index: 0;
    width: min(100%, 430px);
    height: 100lvh;
    transform: translateX(-50%);
    pointer-events: none;
  }

  .tabs,
  .hero > .tabs {
    position: fixed;
    top: auto;
    right: auto;
    left: 50%;
    bottom: calc(20px + var(--browser-bottom, 0px));
    z-index: 40;
    width: min(calc(100% - 32px), 398px);
    transform: translateX(-50%);
  }

  .event-list { padding-bottom: calc(132px + var(--browser-bottom, 0px)); }
  .pad.ios-pad { padding-bottom: calc(108px + var(--browser-bottom, 0px) + var(--safe-bottom)); }

  .local-sheet {
    position: fixed;
    top: 0;
    right: auto;
    bottom: 0;
    left: 50%;
    z-index: 50;
    width: min(100%, 430px);
    height: auto;
    transform: translateX(-50%);
  }

  body:has(.event-chat) {
    overflow: hidden;
    height: 100%;
    min-height: 0;
  }
  body:has(.event-chat) #app {
    position: fixed;
    top: var(--vv-offset, 0px);
    left: 0;
    right: 0;
    width: min(100%, 430px);
    height: var(--app-height, 100dvh);
    min-height: 0;
    margin: 0 auto;
    overflow: hidden;
    transform: none;
  }
  body:has(.event-chat) .event-chat {
    top: var(--vv-offset, 0px);
    height: var(--app-height, 100dvh);
    max-height: var(--app-height, 100dvh);
    min-height: 0;
    overflow: hidden;
  }
}

.other-filters {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 8px 0 4px;
  touch-action: pan-x pan-y;
  -webkit-overflow-scrolling: touch;
}
.other-filters button {
  border: 0;
  background: rgba(255,255,255,0.16);
  color: #fff;
  border-radius: 999px;
  padding: 8px 12px;
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}
.other-filters button.on { background: rgba(255,255,255,0.34); }
.poster-filters button {
  background: rgba(22, 20, 26, 0.06);
  color: var(--ink);
}
.poster-filters button.on { background: rgba(22, 20, 26, 0.16); color: var(--ink); }
.plan-empty { margin: 0; color: rgba(255,255,255,0.72); }
.find-light .choose-top { justify-content: flex-end; }
.find-light .close-btn, .result-light .close-btn {
  background: rgba(22,20,26,0.06);
  box-shadow: none;
  color: var(--ink);
}
.send-cover.send-draw {
  background-color: #fff;
  background-size: min(92%, 420px);
  background-repeat: no-repeat;
  background-position: center 10%;
}
.send-draw .send-dim {
  background: linear-gradient(180deg, rgba(0,0,0,0.02), rgba(0,0,0,0.28) 42%, rgba(0,0,0,0.72));
}
.find-light, .result-light { background: #fff; color: var(--ink); }
.find-light h1, .result-light h1 { font-size: 34px; letter-spacing: -0.03em; line-height: 1.05; margin: 8px 0; }
.find-light p { margin: 0; color: rgba(22,20,26,0.55); font-weight: 650; }
.find-night {
  position: relative;
  min-height: 100%;
  overflow: hidden;
  padding-bottom: 0 !important;
  isolation: isolate;
  background: #071124;
  color: #fff;
}
.find-story.find-night {
  background: #fff;
  color: var(--ink);
}
.find-glow {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.find-glow-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(18px);
  animation: find-glow-pulse 4.2s ease-in-out infinite;
}
.find-glow-1 {
  width: 72vw;
  height: 72vw;
  left: 42%;
  top: -16%;
  background: radial-gradient(circle at 40% 40%, rgba(255, 186, 214, 0.95) 0%, rgba(255, 126, 176, 0.55) 42%, rgba(255, 126, 176, 0) 72%);
}
.find-glow-2 {
  width: 64vw;
  height: 64vw;
  left: -24%;
  top: 26%;
  background: radial-gradient(circle at 42% 40%, rgba(214, 204, 255, 0.95) 0%, rgba(168, 150, 255, 0.5) 46%, rgba(168, 150, 255, 0) 74%);
  animation-duration: 5s;
  animation-delay: -1.6s;
}
.find-glow-3 {
  width: 56vw;
  height: 56vw;
  right: -16%;
  top: 48%;
  background: radial-gradient(circle at 40% 42%, rgba(196, 236, 255, 0.95) 0%, rgba(120, 206, 236, 0.48) 48%, rgba(120, 206, 236, 0) 74%);
  animation-duration: 4.6s;
  animation-delay: -2.4s;
}
.find-glow-4 {
  width: 50vw;
  height: 50vw;
  left: 6%;
  bottom: -10%;
  background: radial-gradient(circle at 40% 40%, rgba(255, 220, 186, 0.95) 0%, rgba(255, 186, 122, 0.46) 46%, rgba(255, 186, 122, 0) 74%);
  animation-duration: 5.4s;
  animation-delay: -0.8s;
}
@keyframes find-glow-pulse {
  0%, 100% { transform: translate3d(0, 8px, 0) scale(0.96); opacity: 0.55; }
  50% { transform: translate3d(0, -12px, 0) scale(1.06); opacity: 0.9; }
}
.find-analysis-bg,
.find-night-bg,
.find-night-shade {
  position: absolute;
  inset: 0;
}
.find-analysis-bg {
  z-index: -3;
  background:
    radial-gradient(circle at 72% 24%, rgba(31, 171, 210, 0.42), transparent 34%),
    radial-gradient(circle at 25% 48%, rgba(212, 39, 145, 0.32), transparent 42%),
    linear-gradient(155deg, #030716 0%, #10173a 50%, #26102f 100%);
}
.find-analysis-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.3;
  background-image:
    radial-gradient(circle, #fff 0 1px, transparent 1.5px),
    radial-gradient(circle, #77e9ff 0 1px, transparent 1.5px);
  background-position: 12px 20px, 48px 65px;
  background-size: 74px 82px, 103px 119px;
}
.find-night-bg {
  z-index: -3;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.04);
}
.find-night-shade {
  z-index: -2;
  background: linear-gradient(180deg, rgba(3,8,25,0.4), rgba(4,8,24,0.62) 48%, rgba(3,6,18,0.94));
}
.find-close {
  position: absolute;
  z-index: 3;
  top: calc(12px + var(--safe-top));
  right: 16px;
  border: 0;
  background: #fff;
  color: var(--ink);
  box-shadow: 0 6px 16px rgba(22, 20, 26, 0.12);
}
.find-night-copy {
  position: relative;
  z-index: 1;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  padding: calc(62px + var(--safe-top)) 22px calc(18px + var(--safe-bottom));
}
.find-night-copy h1,
.find-titles {
  max-width: 330px;
  margin: 0;
  font-size: 35px;
  line-height: 1.02;
  letter-spacing: -0.035em;
}
.find-titles {
  display: grid;
  font-weight: 800;
}
.find-titles { position: relative; }
.find-titles span {
  grid-area: 1 / 1;
  transition: opacity 340ms ease, transform 340ms ease;
}
.find-story .find-title-almost {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  opacity: 0;
  transform: translateY(8px);
}
.find-story.almost .find-title-finding {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  opacity: 0;
  transform: translateY(-8px);
}
.find-story.almost .find-title-almost {
  position: relative;
  opacity: 1;
  transform: none;
}
.find-night-copy > p,
.find-subs p {
  max-width: 320px;
  margin: 7px 0 0;
  color: rgba(255,255,255,0.82);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
}
.find-story .find-subs p,
.find-story .find-night-copy > p {
  color: rgba(22, 20, 26, 0.62);
}
.find-subs { display: grid; }
.find-subs p {
  grid-area: 1 / 1;
  transition: opacity 340ms ease, transform 340ms ease;
}
.find-story .find-sub-almost {
  opacity: 0;
  transform: translateY(8px);
}
.find-story.almost .find-sub-finding {
  opacity: 0;
  transform: translateY(-6px);
}
.find-story.almost .find-sub-almost {
  opacity: 1;
  transform: none;
}
.find-story .find-title-landed,
.find-story .find-sub-landed {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  opacity: 0;
  transform: translateY(8px);
}
.find-story.landed .find-title-finding,
.find-story.landed .find-title-almost,
.find-story.landed .find-sub-finding,
.find-story.landed .find-sub-almost {
  position: absolute;
  opacity: 0;
  transform: translateY(-8px);
}
.find-story.landed .find-title-landed,
.find-story.landed .find-sub-landed {
  position: relative;
  opacity: 1;
  transform: none;
}
.find-analysis-art {
  position: relative;
  width: min(70vw, 280px);
  aspect-ratio: 1;
  margin: 5px auto 0;
  flex: 0 1 270px;
  min-height: 150px;
}
.find-orb {
  position: absolute;
  width: 46%;
  aspect-ratio: 1;
  left: 27%;
  top: 27%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 34% 30%, #f7fbff 0 2%, #54e9ef 10%, #8b48ef 34%, #ed398d 62%, #ff9d2e 82%, #111b53 100%);
  box-shadow: 0 0 20px rgba(77,225,244,0.6), 0 0 54px rgba(229,56,164,0.46);
  animation: find-pulse 2.2s ease-in-out infinite;
}
.find-orb::before,
.find-orb::after {
  content: "";
  position: absolute;
  inset: 15%;
  border: 1px solid rgba(255,255,255,0.42);
  border-radius: 50%;
  transform: rotate(24deg);
}
.find-orb::after { inset: 33% -10%; transform: rotate(-38deg); }
.find-satellite {
  position: absolute;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: 50%;
  background: rgba(8,16,48,0.72);
  box-shadow: 0 0 18px rgba(91,211,255,0.26);
  font-size: 19px;
  font-style: normal;
  backdrop-filter: blur(8px);
  animation: find-float 2.8s ease-in-out infinite;
}
.find-satellite-1 { left: 6%; top: 14%; }
.find-satellite-2 { right: 5%; top: 11%; animation-delay: -0.6s; }
.find-satellite-3 { left: 0; top: 50%; animation-delay: -1.2s; }
.find-satellite-4 { right: 0; top: 50%; animation-delay: -1.8s; }
.find-satellite-5 { left: 17%; bottom: 3%; animation-delay: -0.9s; }
.find-satellite-6 { right: 17%; bottom: 3%; animation-delay: -2.1s; }
@keyframes find-pulse { 50% { transform: scale(1.05) rotate(3deg); filter: saturate(1.18); } }
@keyframes find-float { 50% { transform: translateY(-6px); } }
.find-check-list {
  display: grid;
  gap: 5px;
  margin-top: auto;
}
.find-check {
  min-height: 39px;
  display: grid;
  grid-template-columns: 27px minmax(0, 1fr);
  gap: 9px;
  align-items: center;
  color: rgba(255,255,255,0.35);
  transition: color 180ms ease, transform 180ms ease;
}
.find-check > i {
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border: 1.5px solid rgba(255,255,255,0.28);
  border-radius: 50%;
  color: #06101e;
  font-size: 13px;
  font-style: normal;
  font-weight: 900;
}
.find-check b,
.find-check small { display: block; }
.find-check b { font-size: 13px; line-height: 1.15; }
.find-check small { margin-top: 2px; font-size: 10px; line-height: 1.1; opacity: 0.68; }
.find-check.active { color: rgba(255,255,255,0.72); transform: translateX(2px); }
.find-check.active > i { border-color: rgba(126,239,199,0.8); box-shadow: 0 0 12px rgba(66,224,169,0.3); }
.find-check.done { color: #fff; }
.find-check.done > i {
  border-color: #75efbd;
  background: #75efbd;
  box-shadow: 0 0 12px rgba(66,224,169,0.38);
}
.find-story .find-bubble-list {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-top: clamp(36px, 7vh, 72px);
}
.find-bubble-slot {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transform: translateY(14px);
  transition: grid-template-rows 420ms ease, opacity 420ms ease, transform 420ms ease, margin 420ms ease;
}
.find-bubble-slot > .find-insight {
  min-height: 0;
  overflow: hidden;
  animation: none;
  width: max-content;
  max-width: 100%;
  margin-left: 0;
}
.find-bubble-slot.in {
  grid-template-rows: 1fr;
  opacity: 1;
  transform: none;
  margin-top: 11px;
}
.find-bubble-slot:first-child.in { margin-top: 0; }
.find-bubble-slot:nth-child(even).in > .find-insight {
  margin-left: clamp(16px, 8vw, 42px);
  max-width: calc(100% - 42px);
}
.find-insights .find-night-copy { justify-content: flex-start; }
.find-insight-list {
  display: grid;
  justify-items: start;
  gap: 11px;
  margin-top: clamp(36px, 8vh, 72px);
}
.find-insight {
  max-width: min(100%, 340px);
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  padding: 10px 15px 10px 10px;
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 999px;
  background: rgba(8,14,38,0.55);
  box-shadow: 0 9px 24px rgba(0,0,0,0.18);
  color: #fff;
  font-size: 13px;
  font-weight: 650;
  line-height: 1.22;
  backdrop-filter: blur(13px);
  animation: find-rise 420ms both;
  animation-delay: var(--delay);
}
.find-story .find-insight {
  border-color: rgba(22, 20, 26, 0.08);
  background: rgba(255, 255, 255, 0.84);
  box-shadow: 0 10px 24px rgba(22, 20, 26, 0.06);
  color: var(--ink);
}
.find-story .find-insight i {
  background: rgba(22, 20, 26, 0.06);
}
.find-insight:nth-child(even) { margin-left: clamp(12px, 8vw, 42px); }
.find-insight i {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(255,255,255,0.1);
  font-style: normal;
  font-size: 17px;
}
@keyframes find-rise {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
.find-copy { display: flex; flex-direction: column; }
.find-illu { width: 100%; flex: 1; min-height: 180px; object-fit: contain; margin: 8px 0; }
.find-stage { position: relative; width: 100%; aspect-ratio: 864 / 1152; margin: 8px 0; }
.find-stage .find-illu { width: 100%; height: 100%; min-height: 0; margin: 0; object-fit: fill; flex: none; }
.find-bob { animation: find-bob 2.6s ease-in-out infinite; }
@keyframes find-bob { 50% { transform: translateY(-10px); } }
.find-orbit {
  position: absolute;
  inset: 4% 6%;
  pointer-events: none;
  animation: find-spin 7s linear infinite;
  filter: drop-shadow(0 0 10px rgba(255, 56, 148, 0.75));
}
.find-orbit span {
  position: absolute;
  width: 18px;
  height: 18px;
  background: var(--pink);
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
  left: 8%;
  top: 12%;
}
.find-orbit span:nth-child(2) {
  right: 8%;
  top: 16%;
  left: auto;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  clip-path: none;
  background: #3ee7f2;
  box-shadow: 0 0 12px #3ee7f2;
}
.find-orbit span:nth-child(3) {
  right: 14%;
  bottom: 10%;
  left: auto;
  top: auto;
  width: 14px;
  height: 14px;
  clip-path: none;
  background: #ffe040;
  transform: rotate(18deg);
  box-shadow: 0 0 12px #ffe040;
}
.find-orbit span:nth-child(4) {
  left: 18%;
  bottom: 16%;
  top: auto;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  clip-path: none;
  background: #fff;
  box-shadow: 0 0 14px #fff;
}
.find-orbit span:nth-child(5) {
  left: 42%;
  top: 4%;
  width: 10px;
  height: 22px;
  border-radius: 6px;
  clip-path: none;
  background: #ff8ac4;
  transform: rotate(24deg);
}
.find-orbit span:nth-child(6) {
  right: 36%;
  bottom: 6%;
  left: auto;
  top: auto;
  width: 20px;
  height: 8px;
  border-radius: 8px;
  clip-path: none;
  background: #b388ff;
  box-shadow: 0 0 12px #b388ff;
}
.find-counter {
  position: absolute;
  inset: 12% 14%;
  pointer-events: none;
  animation: find-spin 11s linear infinite reverse;
}
.find-counter span {
  position: absolute;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 10px rgba(255,255,255,0.9);
  left: 0;
  top: 46%;
}
.find-counter span:nth-child(2) { left: auto; right: 4%; top: 8%; background: #3ee7f2; }
.find-counter span:nth-child(3) { left: 48%; top: auto; bottom: 0; background: var(--pink); }
@keyframes find-spin { to { transform: rotate(360deg); } }
.detail-chat { margin-top: 18px; }
.detail-chat-label { margin: 0 0 8px 4px; font-size: 12px; font-weight: 750; color: rgba(255,255,255,0.48); }
.detail-chat .chat-log { flex: none; max-height: 280px; }
.detail-chat .chat-composer { margin-top: 8px; }
.result-light .result-nav { display: flex; justify-content: space-between; align-items: center; }
.result-light .text-btn { color: var(--pink); font-size: 16px; font-weight: 700; }
.result-body { display: flex; flex-direction: column; }
.result-illu { width: 100%; max-height: 360px; object-fit: contain; }
.result-kicker { margin: 8px 0 0; font-size: 26px; font-weight: 700; color: rgba(22,20,26,0.45); }
.result-body h1 { margin: 0; font-size: 56px; }
.result-body > p:last-of-type { color: rgba(22,20,26,0.65); font-size: 20px; }
.find-light .find-wheel { margin-top: 12px; }
.find-light .wheel-stage { width: min(78vw, 300px); margin: 0 auto; }
.find-light .wheel-pointer { margin-top: 0; }
.result-body .plan-go { margin-top: auto; }
.result-recommend-screen,
.result-more-screen {
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding-bottom: 0 !important;
  background: #fff;
  color: var(--ink);
}
.result-recommend-scroll {
  min-height: 0;
  flex: 1;
  overflow-y: auto;
}
.result-recommend-hero {
  position: relative;
  height: 235px;
  overflow: hidden;
  background-color: #101427;
  background-position: center;
  background-size: cover;
  color: #fff;
}
.result-recommend-hero > span {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(5,8,20,0.2), rgba(5,8,20,0.84));
}
.result-recommend-hero > div {
  position: absolute;
  left: 22px;
  right: 72px;
  bottom: 42px;
}
.result-recommend-hero h1 {
  margin: 0 0 7px;
  font-size: 34px;
  line-height: 0.98;
  letter-spacing: -0.035em;
}
.result-recommend-hero p {
  margin: 0;
  color: rgba(255,255,255,0.88);
  font-size: 13px;
  font-weight: 650;
  line-height: 1.28;
}
.result-recommend-close {
  position: absolute;
  z-index: 2;
  top: calc(12px + var(--safe-top));
  right: 16px;
  background: rgba(255,255,255,0.78);
  color: var(--ink);
  backdrop-filter: blur(10px);
}
.result-recommend-sheet {
  position: relative;
  z-index: 1;
  margin-top: -24px;
  padding: 0 22px 22px;
  border-radius: 24px 24px 0 0;
  background: #fff;
}
.result-hero-card {
  position: relative;
  height: 172px;
  overflow: hidden;
  transform: translateY(-28px);
  margin-bottom: -18px;
  border: 3px solid #fff;
  border-radius: 15px;
  background: #1a1820;
  box-shadow: 0 9px 24px rgba(22,20,26,0.17);
}
.result-hero-card > img,
.result-option > img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
.result-card-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 28%, rgba(0,0,0,0.72));
}
.result-card-badge,
.result-option-badge {
  position: absolute;
  z-index: 1;
  top: 10px;
  left: 10px;
  max-width: calc(100% - 64px);
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255,255,255,0.92);
  color: var(--ink);
  padding: 5px 9px;
  font-size: 10px;
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.result-card-heart {
  position: absolute;
  z-index: 2;
  top: 5px;
  right: 7px;
  width: 38px;
  height: 38px;
  border: 0;
  background: transparent;
  color: #fff;
  padding: 0;
  font: inherit;
  font-size: 29px;
  text-shadow: 0 2px 8px rgba(0,0,0,0.55);
  cursor: pointer;
}
.result-card-heart.on { color: var(--pink); }
.result-recommend-sheet h2 {
  margin: 9px 0 0;
  font-size: 27px;
  line-height: 1.08;
  letter-spacing: -0.025em;
}
.result-recommend-detail {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 14px;
  font-weight: 650;
}
.result-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
  padding: 17px 0;
}
.result-metrics > span {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.result-metrics i { font-size: 20px; font-style: normal; }
.result-metrics b {
  max-width: 100%;
  margin-top: 4px;
  overflow: hidden;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.result-metrics small {
  max-width: 100%;
  overflow: hidden;
  color: var(--muted);
  font-size: 9px;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.result-explanation {
  margin: 0;
  color: rgba(22,20,26,0.64);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.42;
}
.result-recommend-actions {
  flex: none;
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.25fr);
  gap: 9px;
  padding: 8px 18px calc(9px + var(--safe-bottom));
  background: rgba(255,255,255,0.97);
  box-shadow: 0 -8px 22px rgba(22,20,26,0.06);
}
.result-recommend-actions button,
.result-self-dock button {
  min-width: 0;
  height: 54px;
  border: 0;
  border-radius: 17px;
  font: inherit;
  font-size: 12px;
  font-weight: 850;
  cursor: pointer;
}
.result-choose-button { background: #f3f2f4; color: var(--ink); }
.result-choose-button span { margin-right: 2px; font-size: 18px; }
.result-accept-button {
  background: linear-gradient(110deg, #ff2f92, #f22d9a);
  color: #fff;
  box-shadow: 0 8px 18px rgba(255,47,146,0.28);
}
.result-accept-button span { margin-left: 4px; font-size: 18px; }
.result-more-nav {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: calc(8px + var(--safe-top)) 18px 0;
}
.result-more-nav .text-btn { color: var(--pink); font-size: 13px; font-weight: 800; }
.result-more-head { flex: none; padding: 8px 18px 0; }
.result-more-head h1 { margin: 0; font-size: 28px; letter-spacing: -0.03em; }
.result-more-head p { margin: 3px 0 0; color: var(--muted); font-size: 13px; font-weight: 600; }
.result-more-list {
  min-height: 0;
  flex: 1;
  display: grid;
  align-content: start;
  gap: 10px;
  overflow-y: auto;
  padding: 15px 18px;
}
.result-option {
  position: relative;
  height: 132px;
  overflow: hidden;
  border-radius: 14px;
  background: #211d24;
  color: #fff;
  cursor: pointer;
}
.result-option-copy {
  position: absolute;
  z-index: 1;
  left: 11px;
  right: 48px;
  bottom: 9px;
}
.result-option-copy b,
.result-option-copy small,
.result-option-copy em { display: block; }
.result-option-copy b { font-size: 16px; line-height: 1.1; }
.result-option-copy small { margin-top: 2px; color: rgba(255,255,255,0.82); font-size: 10px; font-weight: 650; }
.result-option-copy em { margin-top: 5px; font-size: 9px; font-style: normal; font-weight: 750; }
.result-self-dock {
  flex: none;
  padding: 8px 18px calc(9px + var(--safe-bottom));
  background: #fff;
}
.result-self-dock button { width: 100%; background: #f3f2f4; color: var(--ink); }
.clock-sheet {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  align-items: flex-end;
  background: rgba(22, 20, 26, 0.45);
}
.clock-card {
  width: min(100%, 520px);
  margin: 0 auto;
  background: #fff;
  color: var(--ink);
  border-radius: 24px 24px 0 0;
  padding: 18px 18px calc(18px + var(--safe-bottom));
}
.clock-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.clock-top h2 { flex: 1; margin: 0; font-size: 22px; text-align: center; }
.clock-top .text-btn { color: var(--pink); font-weight: 700; flex: 0 0 auto; padding: 0; }
.clock-ok {
  width: 46px;
  height: 46px;
  border: 0;
  border-radius: 50%;
  background: #1a73e8;
  color: #fff;
  font-size: 24px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
}
.clock-wheels {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 14px;
}
.clock-col {
  height: 220px;
  overflow-y: auto;
  scroll-snap-type: y mandatory;
  padding: 88px 0;
  border-radius: 16px;
  background: #f6f4f7;
  scrollbar-width: none;
}
.clock-col::-webkit-scrollbar { display: none; }
.clock-cell {
  display: block;
  width: 100%;
  height: 44px;
  border: 0;
  background: transparent;
  color: rgba(22, 20, 26, 0.38);
  font: inherit;
  font-size: 22px;
  font-weight: 700;
  scroll-snap-align: center;
  cursor: pointer;
}
.clock-cell.on { color: var(--ink); font-size: 28px; }
.plan-chip-picker {
  position: absolute;
  z-index: 2;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  opacity: 0.02;
  cursor: pointer;
  font-size: 16px;
  color: transparent;
  background: transparent;
}
.plan-photo {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 12px 0 16px;
  cursor: pointer;
  font-weight: 650;
}
.plan-photo input[type="file"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  opacity: 0;
  font-size: 16px;
  cursor: pointer;
}
html.ios-browser:not(:has(.event-chat)),
html.ios-browser:not(:has(.event-chat)) body {
  height: auto !important;
  max-height: none !important;
  min-height: 0 !important;
  overflow: visible !important;
  overscroll-behavior: auto !important;
}
html.ios-browser:not(:has(.event-chat)) body {
  min-height: calc(100lvh + 120px) !important;
}
html.ios-browser:not(:has(.event-chat)) #app,
html.ios-browser:not(:has(.event-chat)) .screen:not(.dismiss-home),
html.ios-browser:not(:has(.event-chat)) .hero,
html.ios-browser:not(:has(.event-chat)) .screen.no-tab:not(.dismiss-home),
html.ios-browser:not(:has(.event-chat)) .screen:not(.dismiss-home) > .pad,
html.ios-browser:not(:has(.event-chat)) .event-list,
html.ios-browser:not(:has(.event-chat)) .flow-sheet:not(.dismiss-home),
html.ios-browser:not(:has(.event-chat)) .detail-screen:not(.dismiss-home),
html.ios-browser:not(:has(.event-chat)) .detail-sheet {
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
  overscroll-behavior: auto !important;
}
html.ios-browser:not(:has(.event-chat)) #app {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  min-height: 100lvh !important;
}

/* Phones, including Android Chrome, scroll the document. A fixed app box clips the send button. */
@media (max-width: 900px), (pointer: coarse), (hover: none) {
  html:not(:has(.event-chat)),
  html:not(:has(.event-chat)) body {
    height: auto !important;
    max-height: none !important;
    min-height: 100lvh !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: auto !important;
  }
  html:not(:has(.event-chat)) #app {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    width: min(100%, 430px);
    height: auto !important;
    min-height: 100lvh !important;
    max-height: none !important;
    margin: 0 auto;
    overflow: visible !important;
    transform: none !important;
  }
  html:not(:has(.event-chat)) .screen:not(.dismiss-home),
  html:not(:has(.event-chat)) .screen.no-tab:not(.dismiss-home),
  html:not(:has(.event-chat)) .plan-form:not(.dismiss-home),
  html:not(:has(.event-chat)) .choose-screen:not(.dismiss-home),
  html:not(:has(.event-chat)) .detail-screen:not(.dismiss-home),
  html:not(:has(.event-chat)) .hero,
  html:not(:has(.event-chat)) .screen:not(.dismiss-home) > .pad,
  html:not(:has(.event-chat)) .event-list,
  html:not(:has(.event-chat)) .flow-sheet:not(.dismiss-home) {
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
    overflow: visible !important;
    overscroll-behavior: auto !important;
  }
  html:not(:has(.event-chat)) .screen:not(.dismiss-home),
  html:not(:has(.event-chat)) .plan-form:not(.dismiss-home),
  html:not(:has(.event-chat)) .detail-screen:not(.dismiss-home),
  html:not(:has(.event-chat)) .hero {
    min-height: 100lvh !important;
  }
  .plan-form > .pad {
    padding-bottom: calc(120px + env(safe-area-inset-bottom, 0px));
  }
}

/* Home-screen app draws under the status bar. That band does not take taps, so the close control sits below it. */
html.ios-standalone {
  --safe-top: max(env(safe-area-inset-top, 0px), 59px);
}
html.ios-standalone:not(:has(.event-chat)) {
  height: 100% !important;
  overflow: hidden !important;
}
html.ios-standalone:not(:has(.event-chat)) body {
  height: 100% !important;
  min-height: 100% !important;
  max-height: none !important;
  margin: 0;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
}
html.ios-standalone .plan-nav,
html.ios-standalone .detail-nav,
html.ios-standalone .choose-top,
html.ios-standalone .result-nav {
  position: relative;
  z-index: 40;
}
html.ios-standalone .plan-nav { background: #fff; }
html:has(.event-chat),
html:has(.event-chat) body {
  height: 100% !important;
  min-height: 0 !important;
  overflow: hidden !important;
}
html:has(.event-chat) .event-chat {
  top: var(--vv-offset, 0px) !important;
  height: var(--app-height, 100dvh) !important;
  max-height: var(--app-height, 100dvh) !important;
}
html:has(.event-chat) .event-chat .chat-composer {
  padding-bottom: calc(12px + var(--composer-bottom, var(--safe-bottom)) + var(--browser-bottom, 0px));
}

html.ios-standalone .close-btn,
html.ios-standalone .detail-x {
  position: relative;
  z-index: 41;
  width: 44px;
  height: 44px;
  touch-action: manipulation;
}
html.ios-standalone .close-btn.result-sheet-close,
html.ios-standalone .close-btn.find-close {
  position: absolute;
  left: auto;
  right: 16px;
}

.plan-photo img, .plan-photo-mark {
  width: 52px;
  height: 52px;
  border-radius: 12px;
  object-fit: cover;
  background: rgba(22,20,26,0.05);
  display: grid;
  place-items: center;
}

.detail-screen .detail-nav { padding-top: calc(22px + var(--safe-top)); }

html:has(.event-cover),
html:has(.event-cover) body,
html.ios-browser:not(:has(.event-chat)):has(.event-cover),
html.ios-browser:not(:has(.event-chat)):has(.event-cover) body,
html.ios-standalone:not(:has(.event-chat)):has(.event-cover),
html.ios-standalone:not(:has(.event-chat)):has(.event-cover) body {
  height: 100% !important;
  min-height: 100% !important;
  max-height: none !important;
  overflow: hidden !important;
  overscroll-behavior: none !important;
}

html body .event-cover > section.sheet-scroll.dismiss-home {
  display: flex !important;
  flex-direction: column !important;
  min-height: 0 !important;
}
html body .event-cover > section.sheet-scroll.dismiss-home > .pad,
html body .event-cover > section.sheet-scroll.dismiss-home > .choose-top + .pad {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  height: auto !important;
  max-height: none !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  padding-bottom: calc(32px + env(safe-area-inset-bottom, 0px));
}
html body .event-cover > section.choose-screen.sheet-scroll > .pad,
html body .event-cover > section.choose-screen.sheet-scroll > .choose-top + .pad {
  padding-bottom: 12px !important;
}
html body .event-cover > section.choose-screen.screen.no-tab.dismiss-home {
  padding-bottom: 0 !important;
}

html body .event-cover > section.dismiss-home,
html.ios-browser:not(:has(.event-chat)) body .event-cover > section.screen.dismiss-home,
html.ios-browser body .event-cover > section.detail-screen.dismiss-home,
html.ios-browser body .event-cover > section.flow-screen.dismiss-home,
html.ios-standalone:not(:has(.event-chat)) body .event-cover > section.screen.dismiss-home,
html.ios-standalone body .event-cover > section.detail-screen.dismiss-home,
html.ios-standalone body .event-cover > section.flow-screen.dismiss-home,
html body .event-cover > section.screen.dismiss-home {
  position: absolute !important;
  inset: 0 !important;
  z-index: 2 !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: auto !important;
  margin: 0 !important;
  height: auto !important;
  max-height: none !important;
  min-height: 0 !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
}
html body .event-cover > section.screen.no-tab.dismiss-home {
  padding-bottom: calc(32px + var(--safe-bottom) + var(--browser-bottom, 0px));
}
html body .event-cover > section.sheet-scroll.dismiss-home {
  overflow: hidden !important;
}
html body .event-cover > section.sheet-scroll.screen.dismiss-home,
html body .event-cover > section.result-recommend-screen.dismiss-home {
  touch-action: pan-x pan-y;
}
html body .event-cover > section.choose-home-screen.dismiss-home,
html.ios-browser:not(:has(.event-chat)) body .event-cover > section.choose-home-screen.dismiss-home,
html.ios-standalone:not(:has(.event-chat)) body .event-cover > section.choose-home-screen.dismiss-home {
  overflow-x: clip !important;
  touch-action: pan-x pan-y;
}
html:has(.event-chat) .event-cover {
  bottom: auto;
  height: var(--app-height, 100dvh);
}
html body .event-cover > section.event-chat.dismiss-home {
  position: absolute !important;
  inset: 0 !important;
  z-index: 2 !important;
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  height: 100% !important;
  max-height: none !important;
  min-height: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
  background: #000 !important;
  overscroll-behavior: none !important;
}

/* Desktop shell. A phone in landscape still misses this, so the mobile rules stay as they are. */
/* Rangle uses the same compact app canvas as the other platform apps. */
@media (min-width: 900px) and (hover: hover) and (pointer: fine) {
  body { background: #20201e url('/assets/skate/grain.svg'); }
  #app { transform: translateZ(0); box-shadow: 0 0 65px #0005; }
  #app .event-cover, #app .sheet-back, #app .clock-sheet, #app .event-invite-cover {
    left: 0; right: 0; width: auto; transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .surprise, .surprise-spark, .invite-sent-mark,
  .find-orb, .find-satellite, .find-insight, .find-glow-orb { animation: none; }
  .find-glow-orb { opacity: 0.7; }
  .find-titles span, .find-subs p, .find-bubble-slot { transition: none; }
  .choose-intro, .choose-home-screen .choose-back, .choose-panel,
  .choose-home-screen > .choose-dock, .choose-home-screen .choose-search { transition: none; }
}

@media (pointer: coarse) and (max-width: 900px) {
  html:not(:has(.event-chat)) .choose-screen {
    min-height: 100lvh !important;
    display: flex !important;
    flex-direction: column !important;
  }
  html:not(:has(.event-chat)) .choose-home-screen {
    width: 100% !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    max-height: 100dvh !important;
    overflow: hidden !important;
  }
  html:not(:has(.event-chat)) .choose-home-scroll {
    height: auto !important;
    min-height: 0 !important;
    flex: 1 1 auto !important;
    overflow-x: clip !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  html:not(:has(.event-chat)) .choose-home-screen > .choose-dock {
    flex: none !important;
    margin-top: 0 !important;
  }
  html:not(:has(.event-chat)) .find-night {
    height: 100dvh !important;
    min-height: 100dvh !important;
    max-height: 100dvh !important;
    overflow: hidden !important;
  }
  html:not(:has(.event-chat)) .result-recommend-screen,
  html:not(:has(.event-chat)) .result-more-screen {
    height: 100dvh !important;
    min-height: 100dvh !important;
    max-height: 100dvh !important;
    overflow: hidden !important;
  }
  html:not(:has(.event-chat)) .result-recommend-scroll,
  html:not(:has(.event-chat)) .result-more-list {
    min-height: 0 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }
}

@media (pointer: coarse) and (max-width: 900px) and (max-height: 900px) {
  .choose-intro h1 { font-size: 28px; }
  .choose-section-head { margin-top: 12px; }
  .choose-home-screen > .choose-dock { padding: 6px 16px calc(8px + var(--safe-bottom)); }
  .choose-home-screen .surprise { min-height: 64px; border-radius: 26px; }
  .choose-home-screen .surprise b { font-size: 17px; }
  .find-night-copy { padding-top: calc(58px + var(--safe-top)); }
  .find-analysis-art { flex-basis: 230px; }
  .find-check { min-height: 35px; }
}

@media (pointer: coarse) and (max-width: 900px) and (max-height: 720px) {
  .find-analysis-art { flex-basis: 170px; width: min(58vw, 210px); }
  .find-story .find-titles { font-size: 30px; }
  .find-story .find-bubble-list { margin-top: 24px; }
  .find-bubble-slot.in { margin-top: 8px; }
  .find-check small { display: none; }
  .find-check { min-height: 31px; }
  .find-insight-list { margin-top: 24px; gap: 8px; }
  .find-insight { padding-block: 8px; }
}

.screen.no-tab.result-recommend-screen {
  overflow: hidden;
  padding-bottom: 0;
}
.result-sheet-close {
  position: absolute;
  z-index: 3;
  top: calc(10px + var(--safe-top));
  right: 16px;
  background: #f2f1f4;
  color: var(--ink);
  box-shadow: none;
}
.result-suggest-copy {
  flex: none;
  padding: calc(52px + var(--safe-top)) 28px 0;
  text-align: center;
}
.result-suggest-copy h1 {
  margin: 0;
  font-size: 32px;
  line-height: 1.02;
  letter-spacing: -0.04em;
}
.result-suggest-copy p {
  margin: 8px auto 0;
  max-width: 280px;
  color: var(--muted);
  font-size: 15px;
  font-weight: 550;
  line-height: 1.35;
}
.result-pager {
  min-height: 0;
  flex: 1;
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  touch-action: pan-x;
  overscroll-behavior-x: contain;
}
.result-slide {
  flex: 0 0 100%;
  scroll-snap-align: center;
  min-width: 0;
  display: flex;
  align-items: center;
  padding: 14px 18px 6px;
  box-sizing: border-box;
}
.suggest-card { width: 100%; }
.suggest-art {
  position: relative;
  height: min(200px, 30vh);
  overflow: hidden;
  border-radius: 22px 22px 16px 16px;
  background: #fff;
}
.suggest-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.suggest-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  max-width: calc(100% - 68px);
  display: inline-flex;
  align-items: center;
  gap: 5px;
  overflow: hidden;
  padding: 7px 11px;
  border-radius: 999px;
  background: rgba(255,255,255,0.94);
  color: var(--ink);
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
  text-overflow: ellipsis;
  box-shadow: 0 4px 12px rgba(22,20,26,0.08);
}
.suggest-badge i { color: #f0a000; font-style: normal; }
.suggest-heart {
  position: absolute;
  top: 6px;
  right: 8px;
  width: 40px;
  height: 40px;
  border: 0;
  background: transparent;
  color: rgba(22,20,26,0.8);
  padding: 0;
  font-size: 26px;
  line-height: 1;
  text-shadow: 0 0 6px #fff;
  cursor: pointer;
}
.suggest-heart.on { color: var(--pink); }
.suggest-art.is-photo .suggest-heart {
  color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
}
.suggest-art.is-photo .suggest-heart.on { color: var(--pink); }
.suggest-info {
  position: relative;
  margin-top: -48px;
  padding: 16px 14px 12px;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 12px 28px rgba(22,20,26,0.1);
}
.suggest-info h2 { margin: 0; font-size: 26px; letter-spacing: -0.03em; }
.suggest-place {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 14px;
  font-weight: 650;
}
.suggest-place .plan-ico { width: 14px; height: 14px; color: var(--muted); }
.suggest-metrics i { display: flex; justify-content: center; font-style: normal; }
.suggest-metrics .plan-ico { width: 18px; height: 18px; color: rgba(22,20,26,0.82); }
.suggest-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 12px;
}
.suggest-metrics > span {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 0 4px;
  text-align: center;
}
.suggest-metrics > span:not(:first-child) { border-left: 1px solid rgba(22,20,26,0.08); }
.suggest-metrics i { font-style: normal; font-size: 18px; }
.suggest-metrics b {
  max-width: 100%;
  overflow: hidden;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.suggest-metrics small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.2;
}
.result-dots {
  flex: none;
  display: flex;
  justify-content: center;
  gap: 6px;
  padding: 8px 0 2px;
}
.result-dots button {
  width: 7px;
  height: 7px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(22,20,26,0.16);
  cursor: pointer;
}
.result-dots button.on { background: var(--pink); }
.result-recommend-actions button { font-size: 14px; padding: 0 10px; }
.result-recommend-actions .result-accept-button { background: var(--pink); }

.detail-plan { background: #fff; color: var(--ink); }
.detail-plan .detail-hero {
  height: 214px;
  min-height: 214px;
  max-height: 214px;
  overflow: visible;
  z-index: 4;
}
.detail-plan .detail-hero-photo { z-index: 0; }
.detail-plan .detail-hero::after {
  z-index: 1;
  background: linear-gradient(180deg, rgba(0,0,0,.28) 0%, rgba(0,0,0,0) 34%, rgba(255,255,255,0) 62%, #fff 100%);
}
.detail-plan .detail-nav {
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 2px;
  width: auto;
  padding: calc(6px + var(--safe-top)) 8px 0;
}
.detail-nav-gap { flex: 1; }
.detail-icon,
.detail-heart {
  width: 40px;
  height: 40px;
  border: 0;
  background: none;
  color: #fff;
  display: grid;
  place-items: center;
  padding: 0;
  font-size: 22px;
  cursor: pointer;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.4));
}
.detail-icon .plan-ico { width: 22px; height: 22px; color: #fff; }
.detail-heart svg { width: 22px; height: 22px; }
.detail-heart.on { color: var(--pink); }
.detail-plan .detail-more > button {
  width: 40px;
  height: 40px;
  border-radius: 0;
  background: none;
  color: #fff;
  font-size: 22px;
}
.detail-plan .detail-menu {
  top: 42px;
  z-index: 8;
  max-height: min(420px, calc(100dvh - 96px - var(--safe-top)));
  overflow-y: auto;
  background: #fff;
  color: var(--ink);
  box-shadow: 0 14px 34px rgba(22,20,26,0.16);
}
.detail-plan .detail-menu button,
.detail-plan .detail-menu label {
  display: block;
  width: 100%;
  border: 0;
  background: none;
  color: var(--ink);
  text-align: left;
  font: inherit;
  font-weight: 650;
  padding: 10px 12px;
  border-radius: 10px;
  cursor: pointer;
}
.detail-plan .detail-menu button.danger { color: #e23b3b; }
.detail-plan .detail-sheet {
  background: #fff;
  color: var(--ink);
  padding: 0 20px calc(28px + var(--safe-bottom));
}
.detail-name {
  margin: 0;
  font-size: 34px;
  letter-spacing: -0.04em;
  line-height: 1.05;
}
.detail-lead {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 15px;
  font-weight: 550;
  line-height: 1.35;
}
.detail-source {
  display: inline-block;
  margin-top: 8px;
  color: var(--pink);
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
}
.detail-invite-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 14px;
}
.detail-invited {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  border: 0;
  background: none;
  padding: 0;
  color: rgba(22,20,26,0.72);
  font: inherit;
  font-weight: 650;
  cursor: pointer;
}
.detail-plan .plan-faces .avatar,
.detail-plan .plan-faces .placeholder-avatar { border-color: #fff; }
.detail-plan .placeholder-avatar { background: #efe8ee; color: #6b6570; }
.detail-invite-more {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 0;
  background: var(--pink);
  color: #fff;
  border-radius: 999px;
  padding: 10px 14px;
  font: inherit;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
}
.detail-invite-more .plan-ico { width: 16px; height: 16px; color: #fff; }
.detail-chat-entry { margin-top: 16px; }
.detail-plan .detail-chat-entry .chat-preview { margin-top: 0; }
.detail-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 16px -10px 0;
  border-bottom: 1px solid rgba(22,20,26,0.08);
}
.detail-tabs button {
  min-width: 0;
  border: 0;
  background: none;
  color: var(--muted);
  font: inherit;
  font-size: 13px;
  font-weight: 750;
  padding: 0;
  cursor: pointer;
}
.detail-tabs button i {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 8px 2px 7px;
  font-style: normal;
  white-space: nowrap;
}
.detail-tabs .plan-ico { width: 15px; height: 15px; color: currentColor; }
.detail-tabs button span {
  display: block;
  height: 3px;
  border-radius: 3px 3px 0 0;
  background: transparent;
}
.detail-tabs button.on { color: var(--pink); }
.detail-tabs button.on span { background: var(--pink); }
.vote-section { margin-top: 18px; }
.vote-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.vote-head h2 { margin: 0; font-size: 22px; letter-spacing: -0.03em; }
.vote-head p { margin: 3px 0 0; color: var(--muted); font-size: 14px; font-weight: 550; }
.vote-badge .plan-ico { width: 28px; height: 28px; color: var(--pink); }
.vote-empty { margin: 10px 0 0; color: var(--muted); font-size: 14px; }
.vote-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  gap: 10px;
  align-items: center;
  margin-top: 10px;
  padding: 10px;
  border-radius: 16px;
  background: rgba(22,20,26,0.035);
}
.vote-mark {
  width: 28px;
  display: grid;
  place-items: center;
  color: rgba(22,20,26,0.35);
  font-size: 18px;
  text-align: center;
}
.vote-mark .plan-ico { width: 20px; height: 20px; color: rgba(22,20,26,0.38); }
.vote-mark.on {
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--pink);
  color: #fff;
  font-size: 13px;
  font-weight: 800;
}
.vote-thumb { width: 46px; height: 46px; object-fit: cover; border-radius: 10px; }
.vote-copy { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.vote-hit {
  width: 100%;
  border: 0;
  background: none;
  padding: 0;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.vote-hit b { display: block; font-size: 15px; }
.vote-track {
  display: block;
  height: 6px;
  margin-top: 6px;
  overflow: hidden;
  border-radius: 99px;
  background: rgba(22,20,26,0.08);
}
.vote-track i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: rgba(22,20,26,0.18);
}
.vote-row.leading .vote-track i { background: var(--pink); }
.vote-count {
  min-width: 22px;
  padding: 2px 7px;
  border-radius: 99px;
  background: rgba(22,20,26,0.06);
  font-size: 12px;
  text-align: center;
}
.vote-check {
  width: 26px;
  height: 26px;
  border: 1.5px solid rgba(22,20,26,0.18);
  border-radius: 50%;
  background: #fff;
  color: transparent;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
}
.vote-check.on { border-color: var(--pink); background: var(--pink); color: #fff; }
.vote-check:disabled { cursor: default; }
.vote-chosen { color: var(--pink); font-size: 11px; font-style: normal; font-weight: 800; }
.vote-copy button[data-pick-offer] {
  border: 0;
  background: none;
  padding: 0;
  color: var(--muted);
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}
.vote-add,
.vote-map {
  width: 100%;
  margin-top: 6px;
  border: 0;
  background: none;
  padding: 10px 0;
  color: rgba(22,20,26,0.82);
  font: inherit;
  font-weight: 750;
  text-align: center;
  cursor: pointer;
}
.vote-map { color: var(--pink); text-align: left; }
.vote-add.on { color: var(--pink); }
.detail-people { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; }
.detail-people > b { font-size: 18px; }
.detail-plan .member-head,
.detail-plan .detail-names,
.detail-plan .public-roster .meta,
.detail-plan .guest-replies .meta { color: var(--muted); }
.detail-plan .public-roster .person,
.detail-plan .guest-replies .person { color: var(--ink); }
.detail-plan .detail-about { color: rgba(22,20,26,0.72); }
.detail-plan .chat-preview { background: rgba(22,20,26,0.04); color: var(--ink); }
.detail-plan .chat-preview-title { color: var(--ink); }
.detail-plan .chat-preview-line,
.detail-plan .chat-preview-icon { color: var(--muted); }
.detail-plan .detail-login,
.detail-plan .detail-login a { color: var(--ink); }
.detail-plan .detail-cancelled { background: #fff4f2; color: #9b1c1c; border-radius: 16px; }
.detail-plan .detail-cancelled p { color: #9b1c1c; }
.detail-plan .text-btn { color: var(--pink); }

.plan-design { margin: 4px 0 8px; }
.plan-design-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  border: 0;
  background: rgba(22, 20, 26, 0.05);
  color: var(--ink);
  border-radius: 16px;
  padding: 12px;
  text-align: left;
  cursor: pointer;
}
.plan-design-mark {
  flex: none;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: #fff;
  font-size: 22px;
}
.plan-design-copy { min-width: 0; }
.plan-design-copy b,
.plan-design-copy small { display: block; }
.plan-design-copy b { font-size: 15px; }
.plan-design-copy small {
  margin-top: 2px;
  color: var(--muted);
  font-weight: 650;
}
.plan-design-chevron {
  margin-left: auto;
  color: rgba(22, 20, 26, 0.45);
  font-size: 14px;
}
.invite-templates {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding: 12px 2px 4px;
  scroll-snap-type: x mandatory;
}
.invite-template {
  flex: none;
  width: 108px;
  height: 132px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  border: 0;
  border-radius: 18px;
  padding: 12px;
  scroll-snap-align: start;
  cursor: pointer;
  color: #fff;
  background-color: var(--paper);
  background-size: cover;
  background-position: center;
  box-shadow: inset 0 0 0 0 transparent;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
}
.invite-template.on { box-shadow: inset 0 0 0 3px #fff; }
.invite-template-art { font-size: 28px; line-height: 1; }
.invite-template b {
  font-size: 13px;
  line-height: 1.15;
  text-align: left;
  color: #fff;
}
.plan-design-note {
  margin: 8px 2px 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 650;
  line-height: 1.35;
}
.detail-plan[data-invite] { background: var(--invite-wash); }
.detail-plan[data-invite] .detail-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(circle at 18% 72%, var(--invite-accent) 0 7px, transparent 8px),
    radial-gradient(circle at 30% 24%, #fff 0 3px, transparent 4px),
    radial-gradient(circle at 78% 28%, var(--invite-paper) 0 5px, transparent 6px),
    radial-gradient(circle at 88% 66%, var(--invite-accent) 0 4px, transparent 5px);
}
.detail-plan[data-invite] .detail-hero::after {
  background: linear-gradient(180deg, rgba(0,0,0,.28) 0%, rgba(0,0,0,0) 34%, transparent 62%, var(--invite-wash) 100%);
}
.detail-plan[data-invite] .detail-sheet { background: var(--invite-wash); }
.invite-mark {
  position: absolute;
  z-index: 3;
  left: 16px;
  bottom: 14px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px 6px 8px;
  border-radius: 999px;
  background: var(--invite-paper);
  color: var(--invite-on);
  font-size: 13px;
  font-weight: 800;
}
.detail-plan[data-invite] .detail-invite-more {
  background: var(--invite-paper);
  color: var(--invite-on);
}

/* Shared five-step app setup, with Rangle's pink and cream palette. */
.rangle-intro { background: #fff1f5; }
.rangle-intro.screen.no-tab { padding-bottom: 0; }
.rangle-intro .intro-content { display: flex; flex-direction: column; padding: calc(22px + var(--safe-top)) 22px calc(18px + var(--safe-bottom)); }
.intro-header { display: flex; justify-content: space-between; align-items: center; min-height: 55px; gap: 16px; }
.intro-brand { font: 48px/.95 'Kaushan Script', cursive; letter-spacing: -.07em; color: var(--pink); text-decoration: none; transform: rotate(-8deg); }
.intro-count { font-size: 14px; font-weight: 700; letter-spacing: .08em; color: var(--muted); }
.intro-count i { color: var(--pink); font-style: normal; padding: 0 5px; }
.intro-progress { display: flex; gap: 5px; margin: 20px 0 23px; }
.intro-progress span { flex: 1; height: 3px; background: #16141a12; transform: skewX(-25deg); }
.intro-progress .active { background: var(--pink); }
.rangle-intro h1 { font-size: 42px; line-height: 1.08; letter-spacing: -.045em; margin: 0 0 14px; }
.rangle-intro h1:focus { outline: none; }
.rangle-intro h1 em { font: 700 1.35em/.85 Caveat, cursive; letter-spacing: -.02em; color: var(--pink); }
.intro-lead { font-size: 14px; line-height: 1.65; margin: 0 0 14px; }
.intro-detail { font-size: 12px; line-height: 1.6; margin: 0 0 20px; color: var(--muted); }
.intro-visual { height: 190px; flex-shrink: 0; position: relative; margin: 0 0 24px; border-radius: 15px; overflow: hidden; background: #ffd3e3; }
.intro-hero { height: 220px; margin: 0 -22px 24px; border-radius: 0; }
.intro-hero img { width: 100%; height: 100%; object-fit: cover; }
.intro-hero::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, #160e19a6, transparent 80%); }
.intro-hand { font: 700 30px/.95 Caveat, cursive; transform: rotate(-6deg); }
.intro-hero .intro-hand { position: absolute; z-index: 1; left: 22px; bottom: 18px; margin: 0; color: #fff; text-shadow: 0 1px 5px #0007; }
.intro-sticker { position: absolute; z-index: 1; top: 16px; right: 15px; padding: 6px 12px; color: #16141a; background: var(--pink); font-size: 11px; font-weight: 800; transform: rotate(5deg); }
.intro-home { display: flex; align-items: center; justify-content: center; gap: 28px; background: linear-gradient(140deg, #ffd6e6, #ffb6d4); }
.intro-home img { width: 90px; height: 90px; border-radius: 20px; box-shadow: 5px 8px 0 #e0317030; transform: rotate(-6deg); }
.intro-guide { display: grid; gap: 8px; font-size: 12px; line-height: 1.6; padding: 14px 18px 14px 32px; margin: 0 0 18px; border-radius: 11px; background: #fff8; }
.intro-guide li::marker { color: var(--pink-dark); font-weight: 700; }
.intro-map { background-color: #dce3dc; background-image: repeating-linear-gradient(115deg, transparent 0 45px, #bbcfc8 46px 48px, transparent 49px 90px), repeating-linear-gradient(22deg, transparent 0 59px, #eef1e9 60px 65px, transparent 66px 100px); }
.intro-map::before { content: ''; position: absolute; width: 42%; height: 150%; right: -17%; top: -25%; background: #7dbbc8; border-left: 8px solid #c9e1d8; transform: rotate(20deg); }
.intro-map-pin { position: absolute; left: 40%; top: 22%; display: grid; place-items: center; width: 65px; height: 65px; font-size: 32px; background: var(--pink); border: 3px solid white; border-radius: 50%; box-shadow: 0 4px 13px #23495030; }
.intro-map .intro-hand { position: absolute; left: 19px; bottom: 22px; }
.intro-notify { display: flex; align-items: center; padding: 16px; background: #ffd3e3; }
.intro-notify .intro-sticker { left: 14px; right: auto; top: 12px; transform: rotate(-4deg); }
.intro-notify-card { display: flex; align-items: center; gap: 12px; padding: 15px; background: white; width: 100%; border-radius: 11px; transform: rotate(-3deg); box-shadow: 4px 5px 0 #e0317020; }
.intro-notify-card > span { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 9px; font-size: 23px; background: var(--pink); }
.intro-notify-card strong { font-size: 13px; }
.intro-notify-card p { font-size: 12px; margin: 4px 0 0; }
.intro-notify .intro-hand { position: absolute; right: 19px; bottom: 8px; font-size: 24px; color: var(--pink-dark); transform: rotate(4deg); }
.intro-people { display: flex; align-items: center; justify-content: center; gap: 24px; padding-bottom: 20px; }
.intro-people-mark { display: grid; place-items: center; width: 80px; height: 80px; border-radius: 50%; background: var(--pink); border: 2px solid white; font-size: 50px; transform: rotate(-9deg); box-shadow: 4px 4px 0 #e0317033; }
.intro-people .intro-sticker { top: auto; bottom: 13px; left: 50%; right: auto; transform: translateX(-50%) rotate(2deg); white-space: nowrap; }
.intro-footer { margin-top: auto; padding-top: 14px; display: grid; gap: 7px; }
.intro-cta { display: flex; justify-content: center; align-items: center; gap: 14px; min-height: 54px; margin: 0; font-size: 16px; border-radius: 9px; }
.intro-cta span { font-size: 23px; }
.intro-cta:disabled { opacity: .5; }
.intro-skip { min-height: 44px; padding: 10px; border: 0; background: transparent; color: var(--muted); font: inherit; font-size: 12px; text-decoration: underline; text-underline-offset: 4px; }
.intro-error { color: #a62452; font-size: 13px; line-height: 1.5; }
@media (max-height: 740px) {
  .rangle-intro .intro-content { padding-top: calc(16px + var(--safe-top)); }
  .intro-progress { margin: 14px 0 18px; }
  .intro-visual { height: 148px; margin-bottom: 18px; }
  .intro-hero { height: 180px; }
  .rangle-intro h1 { font-size: 38px; }
  .intro-lead { font-size: 13px; }
}
@media (max-width: 360px) {
  .rangle-intro .intro-content { padding-left: 18px; padding-right: 18px; }
  .intro-hero { margin-left: -18px; margin-right: -18px; }
  .rangle-intro h1 { font-size: 36px; }
}

.future-events-more { margin: 24px 0 36px; }
.future-events-more .primary { width: 100%; }