:root {
  --cream: #fffaf5;
  --blush: #fdecea;
  --pink: #ee7f9e;
  --pink-soft: #f8b6c8;
  --rose: #8b1834;
  --rose-dark: #651126;
  --line: #f6ccd4;
  --ink: #6c1730;
  --shadow: 0 22px 45px rgba(139, 24, 52, 0.13);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
  background:
    radial-gradient(circle at 12% 10%, rgba(255, 211, 222, 0.55), transparent 16rem),
    radial-gradient(circle at 82% 85%, rgba(255, 238, 214, 0.8), transparent 20rem),
    var(--blush);
  color: var(--ink);
  font-family: "Quicksand", system-ui, sans-serif;
}

body.dark-landing {
  background: #091326;
  color: #f7f8ff;
}

body.dark-landing .chat-topbar {
  border-bottom-color: rgba(67, 87, 124, .35);
  background: rgba(9, 19, 38, .9);
}

body.dark-landing .chat-brand strong {
  color: #f7f8ff;
}

body.dark-landing .online-counter {
  color: #8cacff;
}

body:has(.landing-screen.active) {
  background: #091326;
}

body:has(.landing-screen.active) .chat-topbar {
  border-bottom-color: rgba(67, 87, 124, .35);
  background: rgba(9, 19, 38, .9);
}

body:has(.landing-screen.active) .brand-name {
  color: #f7f8ff;
  font-family: "Quicksand", system-ui, sans-serif;
  font-size: 1.2rem;
}

body.dark-app {
  background: #091326;
  color: #f7f8ff;
}

body.dark-app .chat-topbar {
  border-bottom-color: rgba(67, 87, 124, .35);
  background: rgba(9, 19, 38, .94);
}

body.dark-app .chat-brand strong,
body.dark-app .online-counter {
  color: #a9b1c2;
}

body.dark-app .panel {
  border-color: #354056;
  background: rgba(26, 34, 52, .96);
  box-shadow: 0 20px 60px rgba(0, 0, 0, .2);
}

body.dark-app h1,
body.dark-app h2,
body.dark-app label,
body.dark-app .chat-status,
body.dark-app .video-label {
  color: #f7f8ff;
}

body.dark-app p,
body.dark-app .tiny-note,
body.dark-app .check-row,
body.dark-app .error-message {
  color: #a9b1c2;
}

body.dark-app input,
body.dark-app select {
  border-color: #46526b;
  background: #121b2d;
  color: #f7f8ff;
}

body.dark-app .chat-gate,
body.dark-app .messages,
body.dark-app .chat-status {
  border-color: #354056;
  background: #121b2d;
}

body.dark-app .chat-gate.approved {
  border-color: #46526b;
  background: #18243a;
}

body.dark-app .video-tile {
  border-color: #46526b;
  background: #0b1220;
}

body.dark-app .video-grid video {
  border-color: #46526b;
  background: #0b1220;
}

body.dark-app .video-label {
  background: rgba(9, 19, 38, .86);
}

body.dark-app .radius-control,
body.dark-app .approx-map,
body.dark-app .approx-map.ready {
  border-color: #354056;
  background-color: #121b2d;
}

body.dark-app .map-status {
  color: #a9b1c2;
}

body.dark-app .map-ring {
  border-color: rgba(109, 157, 248, .7);
  background: rgba(109, 157, 248, .08);
}

body.dark-app .match-item {
  border-color: #354056;
  background: #121b2d;
}

.location-button {
  width: 100%;
  margin-bottom: 8px;
}

.location-permission-note {
  margin: 0 0 16px;
  color: #a9b1c2;
  font-size: .82rem;
  text-align: center;
}

body.dark-app .secondary-btn,
body.dark-app .mode-tab {
  border-color: #46526b;
  background: #1a263b;
  color: #f7f8ff;
}

body.dark-app .mode-tab.active,
body.dark-app .primary-btn {
  background: linear-gradient(110deg, #6d9df8, #b680ff);
  color: #0c1225;
}

.landing-nav {
  display: flex;
  align-items: center;
  gap: clamp(18px, 4vw, 42px);
  margin-left: auto;
  margin-right: 26px;
}

.landing-nav a {
  color: #a9b1c2;
  text-decoration: none;
  font-size: .95rem;
}

.landing-nav a:hover {
  color: #fff;
}

.landing-account-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-left: auto;
}

.landing-account-actions a {
  color: #a9b1c2;
  text-decoration: none;
  font-size: .95rem;
}

.landing-account-actions button {
  min-height: 42px;
  padding: 0 20px;
  border: 0;
  border-radius: 999px;
  background: #f2f3f7;
  color: #111827;
  cursor: pointer;
  font-weight: 700;
}

.chat-topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 66px;
  padding: 8px 18px;
  border-bottom: 1px solid rgba(246, 204, 212, 0.8);
  background: rgba(255, 250, 245, 0.88);
  backdrop-filter: blur(10px);
}

.chat-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  color: inherit;
  text-decoration: none;
}

.brand-mark {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: #5aa8ff;
  color: white;
  font-size: 2rem;
  font-weight: 700;
}

.brand-name {
  color: #ff7b1a;
  font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(1.8rem, 5vw, 3rem);
  font-weight: 700;
  line-height: 1;
}

.chat-brand strong {
  color: #111827;
  font-size: clamp(1rem, 2.8vw, 1.55rem);
  white-space: nowrap;
}

.online-counter {
  border: 0;
  background: transparent;
  color: #5aa8ff;
  cursor: pointer;
  font-size: clamp(0.95rem, 2.3vw, 1.3rem);
  font-weight: 700;
  white-space: nowrap;
}

.online-panel {
  position: fixed;
  top: 78px;
  right: max(18px, 2vw);
  left: auto;
  z-index: 20;
  display: none;
  width: min(360px, calc(100vw - 32px));
  max-height: calc(100vh - 96px);
  overflow: auto;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(255, 253, 249, 0.98);
  box-shadow: var(--shadow);
}

.online-panel.open {
  display: block;
}

.online-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--rose-dark);
}

.online-panel-head button {
  width: 32px;
  height: 32px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: #fff0f4;
  color: var(--rose-dark);
  cursor: pointer;
}

.online-location-note {
  margin: 10px 0 16px;
  color: #a9b1c2;
  font-size: .82rem;
  line-height: 1.45;
}

.online-total {
  margin: 12px 0;
  padding: 12px;
  border-radius: 14px;
  background: #fff3f6;
  color: var(--rose-dark);
  font-weight: 700;
}

.online-panel h3 {
  margin: 16px 0 8px;
  color: var(--rose);
  font-size: 0.95rem;
}

.stats-list {
  display: grid;
  gap: 8px;
}

.stat-row {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--cream);
}

body.dark-landing .online-panel,
body.dark-app .online-panel {
  border-color: #354056;
  background: #121b2d;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .38);
}

body.dark-landing .online-panel-head,
body.dark-app .online-panel-head {
  color: #f7f8ff;
}

body.dark-landing .online-panel-head button,
body.dark-app .online-panel-head button {
  border-color: #46526b;
  background: #1a263b;
  color: #f7f8ff;
}

body.dark-landing .online-total,
body.dark-app .online-total {
  background: #1a263b;
  color: #f7f8ff;
}

body.dark-landing .online-panel h3,
body.dark-app .online-panel h3 {
  color: #8cacff;
}

body.dark-landing .stat-row,
body.dark-app .stat-row {
  border-color: #354056;
  background: #18243a;
  color: #f7f8ff;
}

body.dark-landing .stat-row strong,
body.dark-app .stat-row strong {
  color: #9b82ff;
}

button,
input,
select {
  font: inherit;
}

.app-shell {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 90px 24px 24px;
}

.screen {
  display: none;
  width: min(100%, 520px);
}

.screen.active {
  display: block;
  animation: floatIn 440ms ease both;
}

.landing-screen {
  width: min(100%, 1308px);
}

.landing-screen .invitation-panel {
  display: none;
}

.landing-screen {
  color: #f7f8ff;
  position: relative;
}

.landing-screen::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  background-color: #091326;
  background-image: linear-gradient(rgba(120, 151, 219, .07) 1px, transparent 1px), linear-gradient(90deg, rgba(120, 151, 219, .07) 1px, transparent 1px);
  background-size: 56px 56px;
}

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

.landing-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(420px, .88fr);
  gap: clamp(40px, 8vw, 110px);
  align-items: center;
  padding: 70px 0 44px;
}

.landing-copy { max-width: 560px; }
.live-pill { display: inline-flex; align-items: center; gap: 9px; padding: 9px 15px; border: 1px solid #315b9c; border-radius: 999px; color: #74a3ff; font-size: .75rem; letter-spacing: .16em; }
.live-pill span { width: 7px; height: 7px; border-radius: 50%; background: #66e4bd; box-shadow: 0 0 12px #66e4bd; }
.landing-copy h1 { margin: 26px 0 22px; color: #f7f8ff; font-size: clamp(3.5rem, 7vw, 6.3rem); line-height: .93; letter-spacing: 0; }
.landing-copy h1 em { color: #9b82ff; font-style: normal; }
.landing-lede { max-width: 550px; color: #a9b1c2; font-size: 1.13rem; line-height: 1.65; }
.landing-actions, .preview-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }
.landing-primary, .landing-secondary, .date-teaser button, .skip-preview { min-height: 54px; padding: 0 25px; border-radius: 15px; cursor: pointer; font-weight: 700; }
.landing-primary { border: 0; background: linear-gradient(110deg, #6d9df8, #b680ff); color: #0c1225; }
.landing-secondary, .skip-preview { border: 1px solid #39445e; background: #151e31; color: #f5f6fd; }
.landing-location-btn { min-height: 42px; margin-top: 14px; padding: 0 18px; border: 1px solid #4169ae; border-radius: 12px; background: #18243a; color: #9dbbff; cursor: pointer; font-weight: 700; }
.landing-location-btn:disabled { cursor: wait; opacity: .65; }
.landing-location-status { min-height: 20px; margin: 8px 0 0; color: #8f99ad; font-size: .82rem; }
.play-icon { display: inline-grid; place-items: center; width: 25px; height: 25px; margin-right: 8px; border-radius: 50%; background: #f5f6fd; color: #6898f6; font-size: .7rem; }
.landing-note { color: #727d91; font-size: .8rem; letter-spacing: .03em; }
.landing-preview-column { display: grid; gap: 20px; }
.preview-card, .date-teaser, .landing-features article, .landing-terms { border: 1px solid #354056; border-radius: 24px; background: rgba(26, 34, 52, .9); box-shadow: 0 20px 60px rgba(0, 0, 0, .2); }
.preview-card { padding: 30px; }
.preview-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 24px; font-size: 1.2rem; }
.preview-heading span { padding: 8px 12px; border: 1px solid #6a55a6; border-radius: 999px; color: #ae91ff; font-size: .7rem; letter-spacing: .12em; }
.preview-video { position: relative; display: grid; place-items: center; min-height: 310px; overflow: hidden; border-radius: 19px; background: linear-gradient(145deg, #0d9ed0, #584b91 60%, #1a293e); }
.preview-video img { width: 72%; max-height: 250px; object-fit: contain; filter: brightness(1.2); }
.preview-play { position: absolute; display: grid; place-items: center; width: 62px; height: 62px; border-radius: 50%; background: rgba(255,255,255,.9); color: #5b70d3; }
.preview-actions .landing-primary { flex: 1; }
.date-teaser { display: flex; align-items: center; gap: 17px; padding: 22px; }
.date-icon, .feature-icon { display: grid; place-items: center; flex: 0 0 auto; width: 48px; height: 48px; border-radius: 15px; background: #26355a; color: #75a1ff; font-weight: 700; }
.date-teaser strong { color: #f7f8ff; }.date-teaser p { margin: 4px 0 0; color: #8f99ad; font-size: .86rem; line-height: 1.4; }.date-teaser button { min-height: 42px; margin-left: auto; padding: 0 16px; border: 1px solid #46526b; background: #202b40; color: #f7f8ff; }
.landing-features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }.landing-features article { padding: 25px; }.landing-features h2 { margin: 22px 0 9px; font-size: 1.12rem; }.landing-features p, .landing-terms p { margin: 0; color: #939daf; line-height: 1.55; font-size: .9rem; }.feature-icon.purple { background: #30294f; color: #bc9aff; }.feature-icon.green { background: #0e484d; color: #5bddba; }
.landing-terms { margin-top: 44px; padding: 25px 30px; color: #74a3ff; }.terms-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px 32px; margin-top: 23px; }.terms-grid p { margin: 0; color: #939daf; line-height: 1.55; font-size: .9rem; }.terms-links { display: flex; flex-wrap: wrap; gap: 28px; margin-top: 23px; }.terms-links a, .landing-footer a { color: #939daf; text-decoration: none; }.terms-links a:hover, .landing-footer a:hover { color: #78a2ff; }
.landing-footer { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 48px; padding: 25px 0 8px; border-top: 1px solid #26344e; color: #939daf; }.landing-footer strong { color: #f7f8ff; font-size: 1.05rem; }.landing-footer strong span { display: inline-grid; place-items: center; width: 38px; height: 38px; margin-right: 10px; border: 1px solid #4169ae; border-radius: 12px; color: #78a2ff; }.landing-footer p { margin: 0; }.landing-footer div { display: flex; gap: 24px; }
.landing-docs { display: grid; gap: 18px; margin-top: 22px; scroll-margin-top: 92px; }
.landing-doc { display: grid; grid-template-columns: 58px minmax(0, 1fr); gap: 20px; padding: 28px 30px; border: 1px solid #354056; border-radius: 24px; background: rgba(26, 34, 52, .9); scroll-margin-top: 92px; }
.landing-doc h2 { margin: 0 0 10px; color: #f7f8ff; font-size: 1.25rem; }
.landing-doc p, .landing-doc li { color: #939daf; line-height: 1.6; font-size: .93rem; }
.landing-doc p { margin: 0 0 12px; }.landing-doc ol, .landing-doc ul { margin: 0; padding-left: 19px; }.landing-doc li + li { margin-top: 5px; }
.doc-number { display: grid; place-items: center; width: 48px; height: 48px; border: 1px solid #4169ae; border-radius: 15px; background: #26355a; color: #78a2ff; font-weight: 700; }
.safety-number { border-color: #7050a9; background: #30294f; color: #bd9aff; }.terms-number { border-color: #148b86; background: #0e484d; color: #68e0c3; }
@media (max-width: 820px) { .landing-doc { grid-template-columns: 1fr; padding: 22px; } }
@media (max-width: 820px) { .terms-grid { grid-template-columns: 1fr; } .landing-footer { align-items: flex-start; flex-direction: column; } .landing-footer div { gap: 18px; } }

@media (max-width: 820px) {
  .landing-nav { display: none; }
  .landing-account-actions { display: none; }
  .landing-layout { grid-template-columns: 1fr; padding-top: 35px; }.landing-copy { max-width: none; }.landing-copy h1 { font-size: clamp(3.3rem, 15vw, 5.5rem); }.preview-video { min-height: 230px; }.landing-features, .landing-terms > div { grid-template-columns: 1fr; }.date-teaser button { margin-left: auto; }
}

/* Required adult, consent, and safety controls. */
.age-gate[hidden] { display: none; }
.age-gate {
  position: fixed;
  z-index: 1000;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 24px;
  overflow: auto;
  background: rgba(4, 10, 24, .94);
}
.age-gate-open { overflow: hidden; }
.age-gate-card, .safety-dialog {
  width: min(100%, 580px);
  border: 1px solid #314362;
  border-radius: 12px;
  background: #121d31;
  color: #f7f8ff;
  box-shadow: 0 28px 70px rgba(0, 0, 0, .38);
}
.age-gate-card { padding: clamp(28px, 5vw, 48px); }
.age-gate-kicker { display: block; color: #ff8668; font-size: .8rem; font-weight: 700; text-transform: uppercase; }
.age-gate-card h1, .safety-dialog h2 { margin: 12px 0 14px; color: #f7f8ff; font-family: "Playfair Display", serif; }
.age-gate-card p, .dialog-copy p { color: #bac4d4; line-height: 1.6; }
.age-gate-check { margin: 24px 0; color: #dce4f2; }
.age-gate-check a { color: #90b1ff; }
.age-gate-actions, .dialog-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.age-gate-actions .primary-btn, .dialog-actions .primary-btn { flex: 1 1 250px; }
.age-gate-actions .secondary-btn, .dialog-actions .secondary-btn { flex: 1 1 180px; }
.safety-dialog { padding: 0; max-width: 560px; }
.safety-dialog::backdrop { background: rgba(4, 10, 24, .76); }
.dialog-copy { padding: 30px 30px 14px; }
.dialog-copy label { display: block; margin: 18px 0 7px; color: #f7f8ff; font-weight: 700; }
.dialog-copy select, .dialog-copy textarea { width: 100%; border: 1px solid #405171; border-radius: 8px; padding: 12px; background: #0e182a; color: #f7f8ff; font: inherit; }
.dialog-copy textarea { min-height: 104px; resize: vertical; }
.dialog-actions { padding: 14px 30px 30px; }
.safety-action { border-color: #a65b67 !important; color: #ffd8d8 !important; }
@media (max-width: 620px) {
  .age-gate, .age-gate-card { padding: 18px; }
  .dialog-copy, .dialog-actions { padding-left: 20px; padding-right: 20px; }
}

/* Full-size chat and video workspace */
.screen[data-screen="stranger-chat"] {
  width: min(100%, 1140px);
}

.screen[data-screen="stranger-chat"] .chat-panel {
  padding: 30px;
  border-color: #26334c;
  border-radius: 25px;
  background: #111b2e;
}

.screen[data-screen="stranger-chat"] .chat-panel > h2 {
  margin-bottom: 24px;
  color: #f4f5fa;
  font-family: "Playfair Display", Georgia, serif;
  font-size: 1.8rem;
}

.screen[data-screen="stranger-chat"] .chat-gate {
  display: grid;
  grid-template-columns: 70px 120px minmax(190px, 1fr) minmax(250px, 1.7fr);
  gap: 12px;
  align-items: end;
  margin-bottom: 14px;
  padding: 18px;
  border-color: #26334c;
  border-radius: 20px;
  background: #0d1628;
}

.screen[data-screen="stranger-chat"] .chat-field {
  display: grid;
  gap: 7px;
  margin: 0;
  color: #8f9ab0;
  font-size: .75rem;
  text-align: left;
}

.screen[data-screen="stranger-chat"] .chat-field input,
.screen[data-screen="stranger-chat"] .chat-field select {
  width: 100%;
  min-height: 38px;
  padding: 0 10px;
  border: 1px solid #2b3850;
  border-radius: 12px;
  background: #1b2940;
  color: #f4f5fa;
}

.screen[data-screen="stranger-chat"] .chat-gate .check-row {
  min-height: 38px;
  margin: 0;
  padding: 0 10px;
  border: 1px solid #2b3850;
  border-radius: 12px;
  color: #9aa5ba;
  font-size: .72rem;
}

.screen[data-screen="stranger-chat"] .chat-gate .compact-btn {
  width: 100%;
  min-height: 42px;
  margin: 0;
  background: linear-gradient(100deg, #ff774d, #ed5f92);
  color: #1b1420;
}

.screen[data-screen="stranger-chat"] .mode-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 0 0 10px;
}

.screen[data-screen="stranger-chat"] .mode-tab {
  min-height: 42px;
  border-color: #26334c;
  background: #182239;
  color: #c0c8d8;
}

.screen[data-screen="stranger-chat"] .mode-tab.active {
  border-color: transparent;
  background: linear-gradient(100deg, #ff774d, #ed5f92);
  color: #1b1420;
}

.screen[data-screen="stranger-chat"] .chat-status {
  min-height: 38px;
  margin: 12px 0 14px;
  border-color: #26334c;
  border-radius: 999px;
  background: #0d1628;
  color: #c0c8d8;
}

.screen[data-screen="stranger-chat"] .call-workspace {
  gap: 16px;
}

.screen[data-screen="stranger-chat"] .call-stage {
  min-width: 0;
}

.screen[data-screen="stranger-chat"] .call-chat {
  min-width: 0;
  padding: 14px;
  border: 1px solid #26334c;
  border-radius: 20px;
  background: #0d1628;
}

.screen[data-screen="stranger-chat"] .messages {
  min-height: 340px;
  height: min(48vh, 480px);
  margin: 0 0 12px;
  border-color: #26334c;
  border-radius: 18px;
  background: #111b2e;
}

.screen[data-screen="stranger-chat"] .message-form {
  gap: 10px;
}

.screen[data-screen="stranger-chat"] .message-form input {
  min-height: 42px;
  border-color: #2b3850;
  border-radius: 999px;
  background: #1b2940;
  color: #f4f5fa;
}

.screen[data-screen="stranger-chat"] .send-btn {
  width: 46px;
  min-height: 42px;
  padding: 0;
  border-radius: 50%;
  background: #ff715d;
  color: #1b1420;
}

.screen[data-screen="stranger-chat"] .chat-media-controls,
.screen[data-screen="stranger-chat"] .chat-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 12px;
}

.screen[data-screen="stranger-chat"] .chat-media-controls .secondary-btn,
.screen[data-screen="stranger-chat"] .chat-actions .secondary-btn,
.screen[data-screen="stranger-chat"] .chat-actions .primary-btn {
  width: auto;
  min-height: 38px;
  margin: 0;
  padding: 0 16px;
  border: 1px solid #2b3850;
  border-radius: 999px;
  background: #182239;
  color: #c0c8d8;
  box-shadow: none;
}

.screen[data-screen="stranger-chat"] .chat-actions .primary-btn {
  background: linear-gradient(100deg, #ff774d, #ed5f92);
  color: #1b1420;
}

.screen[data-screen="stranger-chat"] .chat-panel:not(.video-mode) .call-workspace {
  display: block;
}

.screen[data-screen="stranger-chat"] .chat-panel:not(.video-mode) .call-chat {
  display: grid;
}

.screen[data-screen="stranger-chat"] .chat-panel:not(.video-mode) .call-stage {
  display: flex;
  justify-content: flex-end;
}

.screen[data-screen="stranger-chat"] .chat-panel:not(.video-mode) .chat-media-controls,
.screen[data-screen="stranger-chat"] .chat-panel:not(.video-mode) .video-grid {
  display: none;
}

@media (max-width: 820px) {
  .screen[data-screen="stranger-chat"] .chat-panel {
    padding: 18px;
  }

  .screen[data-screen="stranger-chat"] .chat-gate {
    grid-template-columns: 1fr 1fr;
  }

  .screen[data-screen="stranger-chat"] .chat-gate .check-row,
  .screen[data-screen="stranger-chat"] .chat-gate .compact-btn {
    grid-column: 1 / -1;
  }

  .screen[data-screen="stranger-chat"] .call-workspace {
    grid-template-columns: 1fr;
  }
}

.screen.focus-screen {
  width: min(100%, 1180px);
}

.panel {
  width: 100%;
  padding: clamp(28px, 6vw, 42px);
  border: 1px solid var(--line);
  border-radius: 28px;
  background: rgba(255, 253, 249, 0.92);
  box-shadow: var(--shadow);
  text-align: center;
}

h1,
h2 {
  margin: 0 0 20px;
  color: var(--rose-dark);
  font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(1.65rem, 7vw, 2.5rem);
  line-height: 1.18;
  letter-spacing: 0;
}

p {
  margin: 0 0 20px;
}

.tiny-note {
  font-size: 0.9rem;
  color: #9b5364;
}

.couple-art {
  display: block;
  width: min(190px, 50vw);
  aspect-ratio: 1;
  margin: 8px auto 22px;
  border: 4px solid #ffc6d5;
  border-radius: 50%;
  background: #fff4f7;
  box-shadow: 0 14px 24px rgba(238, 127, 158, 0.2);
}

.primary-btn,
.secondary-btn {
  display: inline-grid;
  place-items: center;
  min-height: 48px;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

.wide-secondary {
  width: 100%;
}

.primary-btn {
  width: 100%;
  margin-top: 12px;
  padding: 0 22px;
  background: var(--pink);
  color: white;
  font-weight: 700;
  box-shadow: 0 10px 20px rgba(238, 127, 158, 0.28);
}

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

.primary-btn:disabled,
.secondary-btn:disabled,
.mode-tab:disabled {
  cursor: not-allowed;
  opacity: 0.5;
  transform: none;
  box-shadow: none;
}

.secondary-btn {
  min-width: 92px;
  margin-top: 14px;
  padding: 0 24px;
  border: 1px solid var(--line);
  background: #fff0f4;
  color: var(--rose-dark);
}

.runaway {
  position: relative;
}

.heart-row {
  margin: 20px 0 8px;
  color: var(--pink);
  font-size: 1.45rem;
  letter-spacing: 0;
}

.form-panel,
.location-panel {
  text-align: left;
}

.form-panel h2,
.location-panel h2,
.food-panel h2,
.match-panel h2 {
  text-align: center;
}

label {
  display: block;
  margin: 18px 0 8px;
  color: var(--rose);
  font-weight: 700;
}

input,
select {
  width: 100%;
  min-height: 48px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--cream);
  color: var(--ink);
  padding: 0 18px;
  outline: none;
}

input:focus,
select:focus {
  border-color: var(--pink);
  box-shadow: 0 0 0 4px rgba(238, 127, 158, 0.15);
}

.food-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin: 20px 0 12px;
}

.food-card {
  min-height: 92px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: var(--cream);
  color: var(--ink);
  cursor: pointer;
  transition: transform 180ms ease, border-color 180ms ease, background 180ms ease;
}

.food-card span {
  display: block;
  margin-bottom: 8px;
  font-size: 1.7rem;
}

.food-card.selected {
  border: 2px solid var(--pink);
  background: #fff1f5;
  transform: scale(1.04);
}

.other-card {
  grid-column: 1 / -1;
}

.other-food-field {
  margin: 4px 0 10px;
  text-align: left;
}

.other-food-field[hidden] {
  display: none;
}

.other-food-field label {
  margin-top: 0;
}

.select-stack {
  display: grid;
  gap: 2px;
}

.manual-location-input[hidden] {
  display: none;
}

.manual-location-input {
  margin-top: 8px;
}

.radius-control {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 48px;
  margin: 18px 0;
  padding: 0 18px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff3f6;
}

.radius-control strong {
  color: var(--rose-dark);
}

.approx-map {
  position: relative;
  height: 230px;
  margin: 16px 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 24px;
  background:
    linear-gradient(35deg, transparent 48%, rgba(238, 127, 158, 0.15) 49%, rgba(238, 127, 158, 0.15) 51%, transparent 52%),
    linear-gradient(115deg, transparent 45%, rgba(139, 24, 52, 0.12) 46%, rgba(139, 24, 52, 0.12) 48%, transparent 49%),
    radial-gradient(circle at 24% 28%, #dff0df 0 12%, transparent 13%),
    radial-gradient(circle at 78% 65%, #ffe1e9 0 14%, transparent 15%),
    #fff9f2;
}

.approx-map.ready {
  background:
    linear-gradient(35deg, transparent 48%, rgba(238, 127, 158, 0.2) 49%, rgba(238, 127, 158, 0.2) 51%, transparent 52%),
    linear-gradient(115deg, transparent 45%, rgba(139, 24, 52, 0.14) 46%, rgba(139, 24, 52, 0.14) 48%, transparent 49%),
    radial-gradient(circle at 24% 28%, rgba(153, 196, 151, 0.45) 0 12%, transparent 13%),
    radial-gradient(circle at 78% 65%, rgba(255, 190, 212, 0.55) 0 14%, transparent 15%),
    #fff9f2;
}

.map-status {
  position: absolute;
  left: 14px;
  right: 14px;
  top: 12px;
  z-index: 2;
  overflow: hidden;
  color: #9b5364;
  font-size: 0.78rem;
  font-weight: 700;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.map-ring {
  position: absolute;
  inset: 32px;
  border: 2px dashed rgba(238, 127, 158, 0.65);
  border-radius: 50%;
  background: rgba(255, 225, 233, 0.25);
}

.map-pin {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  max-width: 96px;
  padding: 7px 10px;
  border-radius: 999px;
  background: var(--rose);
  color: white;
  font-size: 0.78rem;
  font-weight: 700;
  white-space: nowrap;
  box-shadow: 0 8px 18px rgba(101, 17, 38, 0.18);
}

.match-pin {
  background: var(--pink);
}

.match-pin small {
  display: block;
  font-size: 0.68rem;
  font-weight: 600;
  opacity: 0.9;
}

.match-list {
  display: grid;
  gap: 12px;
  margin: 18px 0;
  text-align: left;
}

.match-item {
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--cream);
}

.match-item strong {
  display: block;
  margin-bottom: 6px;
  color: var(--rose-dark);
}

.match-item span {
  display: block;
  color: #9b5364;
  font-size: 0.92rem;
}

.error-message {
  min-height: 20px;
  margin: 12px 0 0;
  color: #c92f5f;
  font-size: 0.9rem;
  text-align: center;
}

.visibility-guard {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(45, 19, 29, 0.72);
}

.visibility-guard[hidden] {
  display: none;
}

.visibility-card {
  width: min(100%, 560px);
  padding: clamp(26px, 5vw, 56px);
  border: 1px solid var(--line);
  border-radius: 24px;
  background: var(--cream);
  box-shadow: var(--shadow);
  text-align: center;
}

.visibility-card h2 {
  margin: 0 0 14px;
  color: var(--rose);
  font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(2rem, 5vw, 3.4rem);
}

.visibility-card p {
  margin: 0 auto 26px;
  max-width: 38rem;
  color: #6c1730;
  font-size: clamp(1rem, 2vw, 1.25rem);
}

.visibility-card strong {
  display: grid;
  place-items: center;
  width: min(100%, 220px);
  min-height: 100px;
  margin: 0 auto;
  border-radius: 18px;
  background: #a9e2ce;
  color: white;
  font-size: clamp(3rem, 8vw, 5rem);
}

.chat-panel {
  text-align: left;
}

.screen[data-screen="stranger-chat"] {
  width: min(100%, 1308px);
}

.screen[data-screen="stranger-chat"] .chat-panel {
  width: 100%;
}

.screen[data-screen="stranger-chat"] .call-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(280px, .75fr);
  gap: 18px;
  align-items: start;
}

.screen[data-screen="stranger-chat"] .call-chat {
  display: grid;
  align-content: start;
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #fff8fa;
}

body.dark-app .screen[data-screen="stranger-chat"] .call-chat {
  border-color: #354056;
  background: #121b2d;
}

.screen[data-screen="stranger-chat"] .messages {
  height: min(56vh, 520px);
  margin: 0 0 12px;
}

.screen[data-screen="stranger-chat"] .video-grid {
  min-height: 420px;
}

.chat-panel h2,
.chat-panel .tiny-note {
  text-align: center;
}

.chat-gate {
  display: grid;
  gap: 12px;
  margin-bottom: 14px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #fff8fa;
}

.chat-gate.approved {
  border-color: rgba(238, 127, 158, 0.6);
  background: #fff0f4;
}

.gate-grid {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
}

.gate-grid label {
  margin: 0;
}

.check-row {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  margin: 0;
  color: #9b5364;
  font-size: 0.9rem;
  font-weight: 600;
}

.check-row input {
  width: 18px;
  min-height: 18px;
  margin: 2px 0 0;
}

.chat-status {
  display: grid;
  place-items: center;
  min-height: 42px;
  margin: 14px 0;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff3f6;
  color: var(--rose-dark);
  font-weight: 700;
}

.mode-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 14px;
}

.mode-tab {
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--cream);
  color: var(--rose-dark);
  cursor: pointer;
  font-weight: 700;
}

.mode-tab.active {
  border-color: var(--pink);
  background: var(--pink);
  color: white;
}

.video-grid {
  display: none;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 14px 0;
}

.chat-panel.video-mode .video-grid {
  display: grid;
}

.video-tile {
  position: relative;
  min-width: 0;
}

.video-grid video {
  width: 100%;
  aspect-ratio: 4 / 3;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #3a1b25;
  object-fit: cover;
}

.video-label {
  position: absolute;
  left: 10px;
  bottom: 10px;
  z-index: 1;
  padding: 4px 9px;
  border-radius: 999px;
  background: rgba(58, 27, 37, 0.78);
  color: white;
  font-size: 0.78rem;
  font-weight: 700;
}

.call-workspace {
  display: contents;
}

.call-chat {
  display: contents;
}

.chat-panel.focus-mode {
  width: min(100%, 1180px);
}

.chat-panel.focus-mode .call-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(280px, 0.75fr);
  gap: 16px;
  align-items: start;
}

.chat-panel.focus-mode .video-grid {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  margin: 0 0 12px;
  overflow: hidden;
  border-radius: 18px;
  background: #3a1b25;
}

.chat-panel.focus-mode .video-tile {
  position: absolute;
  inset: 0;
}

.chat-panel.focus-mode .video-tile:first-child {
  inset: auto 18px 18px auto;
  z-index: 2;
  width: clamp(130px, 24%, 230px);
  border: 2px solid white;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 12px 26px rgba(58, 27, 37, 0.28);
}

.chat-panel.focus-mode .video-tile:first-child .video-label {
  left: 7px;
  bottom: 7px;
  font-size: 0.7rem;
}

.chat-panel.focus-mode .video-tile:last-child {
  z-index: 1;
}

.chat-panel.focus-mode .video-grid video {
  height: 100%;
  aspect-ratio: auto;
  border: 0;
  border-radius: 0;
}

.chat-panel.focus-mode .call-chat {
  display: grid;
  align-content: start;
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #fff8fa;
}

.chat-panel.focus-mode .messages {
  height: min(56vh, 520px);
  margin: 0 0 12px;
}

.chat-panel.focus-mode .chat-media-controls,
.chat-panel.focus-mode .chat-actions {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 820px) {
  .screen[data-screen="stranger-chat"] .call-workspace {
    grid-template-columns: 1fr;
  }

  .screen[data-screen="stranger-chat"] .messages {
    height: 260px;
  }

  .screen[data-screen="stranger-chat"] .video-grid {
    min-height: 280px;
  }

  .chat-panel.focus-mode .call-workspace {
    grid-template-columns: 1fr;
  }

  .chat-panel.focus-mode .messages {
    height: 260px;
  }
}

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

.chat-media-controls {
  display: none;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 0 0 14px;
}

.chat-panel.video-mode .chat-media-controls {
  display: grid;
}

.compact-btn {
  width: 100%;
  min-height: 42px;
  margin-top: 0;
  padding: 0 12px;
  font-size: 0.9rem;
}

.messages {
  display: grid;
  align-content: start;
  gap: 8px;
  height: 190px;
  margin: 14px 0;
  overflow-y: auto;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--cream);
}

.message {
  display: grid;
  gap: 3px;
  max-width: 78%;
  padding: 9px 12px;
  border-radius: 16px;
  word-break: break-word;
}

.message-sender {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  opacity: 0.78;
}

.message.you {
  justify-self: end;
  background: var(--pink);
  color: white;
}

.message.stranger {
  justify-self: start;
  background: #fff0f4;
  color: var(--rose-dark);
}

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

.message-form input {
  min-width: 0;
}

.send-btn {
  min-height: 48px;
  margin: 0;
}

.petal-field span {
  position: fixed;
  top: -40px;
  z-index: -1;
  animation: fall linear infinite;
  opacity: 0.75;
  pointer-events: none;
}

.confetti {
  position: fixed;
  left: 50%;
  top: 50%;
  font-size: 1.5rem;
  animation: burst 900ms ease-out forwards;
  pointer-events: none;
}

@keyframes floatIn {
  from {
    opacity: 0;
    transform: translateY(18px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes fall {
  to {
    transform: translateY(110vh) rotate(360deg);
  }
}

@keyframes burst {
  to {
    opacity: 0;
    transform: translate(var(--x), var(--y)) scale(1.6);
  }
}

@media (max-width: 520px) {
  .chat-topbar {
    align-items: flex-start;
    flex-direction: column;
    gap: 4px;
  }

  .chat-brand {
    gap: 8px;
  }

  .brand-mark {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    font-size: 1.4rem;
  }

  .chat-brand strong {
    white-space: normal;
  }

  .app-shell {
    padding: 122px 16px 16px;
  }

  .panel {
    border-radius: 24px;
  }

  .food-grid {
    grid-template-columns: 1fr;
  }

  .video-grid,
  .gate-grid,
  .chat-media-controls,
  .chat-actions {
    grid-template-columns: 1fr;
  }

  .message-form {
    grid-template-columns: 1fr;
  }
}

.nearby-date-note {
  display: grid;
  gap: 5px;
  margin: 22px 0 16px;
  padding: 16px 18px;
  border: 1px solid #354056;
  border-radius: 16px;
  background: #121b2d;
  color: #f7f8ff;
  text-align: left;
}

.nearby-date-note span {
  color: #a9b1c2;
  font-size: .84rem;
}

.nearby-date-note strong {
  color: #ff9a82;
}

.nearby-search-label {
  margin: 18px 0 8px;
  color: #f7f8ff;
  text-align: left;
}

.nearby-place-search {
  min-height: 46px;
  border-color: #46526b;
  border-radius: 14px;
  background: #121b2d;
  color: #f7f8ff;
}

.nearby-search-summary {
  margin: 12px 0;
  color: #a9b1c2;
  font-size: .82rem;
  text-align: left;
}

.nearby-search-results {
  display: grid;
  gap: 9px;
  max-height: 310px;
  overflow-y: auto;
  margin-bottom: 14px;
}

.nearby-result {
  padding: 12px;
  border: 1px solid #354056;
  border-radius: 14px;
  background: #121b2d;
  text-align: left;
}

.nearby-result .cafe-item {
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
}

.nearby-result .cafe-date-btn {
  min-height: 34px;
  margin-top: 4px;
}

.match-list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.cafe-item {
  display: grid;
  gap: 8px;
  min-height: 190px;
  background: #121b2d;
}

.cafe-card-top {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
}

.cafe-card-top strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cafe-card-top strong {
  min-width: 0;
  margin: 0;
  color: #f7f8ff;
}

.cafe-icon {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: #3b2940;
  color: #ff9a82;
  font-size: .62rem;
  font-weight: 700;
  text-transform: uppercase;
}

.cafe-tag {
  margin-left: auto;
  padding: 5px 8px;
  border: 1px solid #684b67;
  border-radius: 999px;
  color: #e5a0dc;
  font-size: .67rem;
  white-space: nowrap;
}

.cafe-item span:not(.cafe-icon):not(.cafe-tag) {
  color: #a9b1c2;
  font-size: .82rem;
  line-height: 1.45;
}

.cafe-description,
.cafe-detail {
  display: block;
  min-height: 20px;
}

.cafe-date-btn {
  align-self: end;
  width: 100%;
  min-height: 38px;
  margin-top: 5px;
  border-color: #46526b;
  background: #1a263b;
  color: #f7f8ff;
}

.cafe-details-btn {
  width: 100%;
  min-height: 34px;
  margin-top: 2px;
  border-color: #46526b;
  background: transparent;
  color: #a9baff;
  font-size: .78rem;
}

.cafe-details {
  display: grid;
  gap: 4px;
  padding: 10px;
  border: 1px solid #354056;
  border-radius: 10px;
  background: #0d1628;
  color: #a9b1c2;
  font-size: .76rem;
  line-height: 1.4;
}

.cafe-details strong {
  color: #f7f8ff;
}

.cafe-date-btn.selected {
  border-color: #ff8069;
  background: linear-gradient(100deg, #ff774d, #ed5f92);
  color: #1b1420;
}

@media (max-width: 700px) {
  .match-list {
    grid-template-columns: 1fr;
  }
}

/* Exact desktop home composition: hero copy stays beside the preview card. */
@media (min-width: 821px) {
  body:has(.landing-screen.active) .chat-topbar {
    padding-right: max(24px, calc((100vw - 1380px) / 2));
    padding-left: max(24px, calc((100vw - 1380px) / 2));
  }

  body:has(.landing-screen.active) .online-counter {
    display: none;
  }

  body:has(.landing-screen.active) .landing-screen {
    width: min(100%, 1380px);
  }

  body:has(.landing-screen.active) .landing-layout {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(560px, 1fr) !important;
    gap: 70px;
    align-items: center;
    padding: 92px 0 48px;
  }

  body:has(.landing-screen.active) .landing-copy {
    max-width: 635px;
    text-align: left;
  }

  body:has(.landing-screen.active) .landing-preview-column {
    display: grid;
    max-width: none;
    margin: 0;
    gap: 20px;
  }

  body:has(.landing-screen.active) .preview-video {
    min-height: 0;
    aspect-ratio: 16 / 10;
  }

  body:has(.landing-screen.active) .preview-video img {
    width: 86%;
    max-height: 90%;
  }
}

/* Chat entry screen follows the reference while keeping the existing controls functional. */
.screen[data-screen="stranger-chat"] {
  width: min(100%, 1400px);
}

.chat-landing-intro {
  padding: 28px 0 48px;
  text-align: center;
}

.chat-speed-pill {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 9px 16px;
  border: 1px solid #263852;
  border-radius: 999px;
  background: #121e32;
  color: #a9b5c9;
  font-size: .78rem;
}

.chat-speed-pill span {
  color: #ff774d;
  font-size: 1.05rem;
}

.chat-landing-intro h1 {
  margin: 34px 0 22px;
  color: #f7f8ff;
  font-size: clamp(3rem, 5.3vw, 5.15rem);
  line-height: 1.02;
}

.chat-landing-intro h1 em {
  color: #ff765d;
  font-style: normal;
}

.chat-landing-intro p {
  margin: 0;
  color: #a9b5c9;
  font-size: 1.05rem;
  line-height: 1.55;
}

.screen[data-screen="stranger-chat"] .chat-panel {
  max-width: none;
}

@media (max-width: 820px) {
  .chat-landing-intro {
    padding: 18px 0 28px;
  }

  .chat-landing-intro h1 {
    margin-top: 24px;
    font-size: clamp(2.35rem, 11vw, 4rem);
  }

  .chat-landing-intro p {
    font-size: .92rem;
  }
}