/* The HelloBae app's screens, drawn in HTML on a phone (home page and Join):
   the video date, Meet, It's a match, Chat and the Live Now room, following
   the app design (Figma 1092:13, 98:2, 331:5814, 162:2111). Sizes inside a
   screen are in cqw (1% of the screen's width, 393 px in the design), so a
   phone of any size keeps the same layout. The people are models from Pexels
   and Unsplash (img/vd-*.webp), except "Meera" (img/vd-meera.webp and the
   join page's picture): a real person, shown with her written permission
   (owner, 25 Oct 2026). */

.dev {
  position: relative;
  width: 300px;
  max-width: 100%;
  border-radius: 46px;
  background: #0b0709;
  padding: 9px;
  box-shadow:
    0 40px 80px rgba(0, 0, 0, 0.55),
    0 0 0 1px #2c1f27 inset,
    0 0 0 2px #3a2a33;
  flex: none;
}

.scr {
  position: relative;
  width: 100%;
  aspect-ratio: 393 / 852;
  border-radius: 38px;
  overflow: hidden;
  background: #fff8fb;
  container-type: inline-size;
  color: #1d1218;
  font-family:
    Manrope,
    -apple-system,
    BlinkMacSystemFont,
    'Segoe UI',
    Roboto,
    sans-serif;
  line-height: 1.35;
  text-align: left;
  /* The home page has older .match styles; none of them apply here. */
  display: block;
  padding: 0;
  inset: auto;
  box-shadow: none;
}

.scr .a-status {
  position: absolute;
  inset: 0 0 auto;
  height: 12cqw;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 7cqw;
  padding-top: 1cqw;
  font-size: 4.1cqw;
  font-weight: 600;
  letter-spacing: -0.01em;
  z-index: 5;
}

.scr .a-status i {
  width: 17cqw;
  height: 3cqw;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 68 12'%3E%3Cg fill='%231d1218'%3E%3Crect x='0' y='8' width='3' height='4' rx='1'/%3E%3Crect x='5' y='5.5' width='3' height='6.5' rx='1'/%3E%3Crect x='10' y='3' width='3' height='9' rx='1'/%3E%3Crect x='15' y='0' width='3' height='12' rx='1'/%3E%3Cpath d='M31 3.2a9.5 9.5 0 0 1 12.6 0l-1.5 1.6a7.3 7.3 0 0 0-9.6 0zM33.4 5.8a6 6 0 0 1 7.8 0l-1.5 1.6a3.8 3.8 0 0 0-4.8 0zM37.3 11.6l-2-2.1a2.9 2.9 0 0 1 4 0z'/%3E%3Crect x='50' y='1' width='15' height='10' rx='3' fill='none' stroke='%231d1218' stroke-opacity='.45'/%3E%3Crect x='52' y='3' width='11' height='6' rx='1.5'/%3E%3Crect x='66' y='4' width='1.6' height='4' rx='.8' fill-opacity='.45'/%3E%3C/g%3E%3C/svg%3E")
    right center / contain no-repeat;
}

.scr.vid .a-status i {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 68 12'%3E%3Cg fill='%23ffffff'%3E%3Crect x='0' y='8' width='3' height='4' rx='1'/%3E%3Crect x='5' y='5.5' width='3' height='6.5' rx='1'/%3E%3Crect x='10' y='3' width='3' height='9' rx='1'/%3E%3Crect x='15' y='0' width='3' height='12' rx='1'/%3E%3Cpath d='M31 3.2a9.5 9.5 0 0 1 12.6 0l-1.5 1.6a7.3 7.3 0 0 0-9.6 0zM33.4 5.8a6 6 0 0 1 7.8 0l-1.5 1.6a3.8 3.8 0 0 0-4.8 0zM37.3 11.6l-2-2.1a2.9 2.9 0 0 1 4 0z'/%3E%3Crect x='50' y='1' width='15' height='10' rx='3' fill='none' stroke='%23ffffff' stroke-opacity='.45'/%3E%3Crect x='52' y='3' width='11' height='6' rx='1.5'/%3E%3Crect x='66' y='4' width='1.6' height='4' rx='.8' fill-opacity='.45'/%3E%3C/g%3E%3C/svg%3E");
}

.scr .a-island {
  position: absolute;
  left: 50%;
  top: 2.6cqw;
  width: 31cqw;
  height: 8.4cqw;
  margin-left: -15.5cqw;
  border-radius: 6cqw;
  background: #000;
  z-index: 6;
}

.scr .a-photo {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center 30%;
}

/* ---- Video date: full-screen video, You, the icebreaker, Pass and Like ---- */

.scr.vid .a-photo {
  background-image: url('/img/vd-meera.webp');
  background-position: center 12%;
}

.scr.vid .a-status {
  color: #fff;
}

.scr.vid .a-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.25) 0,
    transparent 18%,
    transparent 70%,
    rgba(0, 0, 0, 0.45) 100%
  );
}

.scr .a-you {
  position: absolute;
  top: 31cqw;
  right: 4cqw;
  width: 28cqw;
  height: 40cqw;
  border-radius: 3.4cqw;
  overflow: hidden;
  border: 0.5cqw solid rgba(255, 255, 255, 0.8);
  background: url('/img/vd-you.webp') center 22% / cover;
  z-index: 4;
}

.scr .a-you span {
  position: absolute;
  left: 2cqw;
  bottom: 2cqw;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-size: 2.8cqw;
  padding: 0.4cqw 1.6cqw;
  border-radius: 1cqw;
  font-weight: 600;
}

.scr .a-idea {
  position: absolute;
  left: 4cqw;
  right: 4cqw;
  bottom: 27cqw;
  background: #fff;
  border-radius: 4cqw;
  padding: 3.2cqw 4cqw 3.2cqw 9.5cqw;
  font-size: 3.7cqw;
  font-weight: 600;
  line-height: 1.3;
  z-index: 4;
  box-shadow: 0 2cqw 6cqw rgba(0, 0, 0, 0.2);
}

.scr .a-idea::before {
  content: '✦';
  position: absolute;
  left: 3.4cqw;
  top: 3.2cqw;
  color: #e8418a;
  font-size: 4cqw;
}

.scr .a-idea small {
  display: block;
  color: #8a7581;
  font-weight: 500;
  font-size: 2.9cqw;
  margin-top: 1cqw;
}

.scr .a-choice {
  position: absolute;
  left: 6cqw;
  right: 6cqw;
  bottom: 8cqw;
  display: flex;
  gap: 3cqw;
  z-index: 4;
}

.scr .a-choice span {
  border-radius: 7cqw;
  padding: 4cqw 0;
  font-size: 4.4cqw;
  font-weight: 700;
  color: #fff;
  text-align: center;
  box-shadow: 0 2cqw 6cqw rgba(0, 0, 0, 0.25);
}

.scr .a-choice .a-pass {
  flex: 0 0 36%;
  background: rgba(40, 14, 28, 0.82);
  border: 0.4cqw solid rgba(255, 255, 255, 0.25);
}

.scr .a-choice .a-like {
  flex: 1;
  background: #e8418a;
}

/* ---- It's a match ---- */

.scr.match {
  background: linear-gradient(180deg, #fff 0%, #fde8f1 100%);
}

.scr.match .a-pair {
  position: absolute;
  top: 42cqw;
  left: 0;
  right: 0;
  height: 46cqw;
}

.scr.match .a-pair div {
  position: absolute;
  top: 0;
  width: 40cqw;
  height: 40cqw;
  border-radius: 50%;
  border: 1.6cqw solid #fff;
  background-size: cover;
  box-shadow: 0 3cqw 10cqw rgba(181, 16, 95, 0.2);
}

.scr.match .a-pair .a-me {
  left: 15cqw;
  background-image: url('/img/vd-you.webp');
  background-position: center 18%;
}

.scr.match .a-pair .a-her {
  right: 15cqw;
  z-index: 1;
  background-image: url('/img/vd-meera.webp');
  background-position: center 14%;
}

.scr.match .a-pair i {
  position: absolute;
  left: 50%;
  top: 13.5cqw;
  z-index: 2;
  width: 14cqw;
  height: 14cqw;
  margin-left: -7cqw;
  border-radius: 50%;
  background: #b5105f;
  color: #fff;
  display: grid;
  place-items: center;
  font-style: normal;
  font-size: 5.5cqw;
  border: 1cqw solid #fff;
}

.scr.match .a-txt {
  position: absolute;
  top: 100cqw;
  left: 8cqw;
  right: 8cqw;
  text-align: center;
}

.scr.match .a-txt small {
  color: #b5105f;
  font-weight: 800;
  letter-spacing: 0.12em;
  font-size: 3cqw;
}

.scr.match .a-txt b {
  display: block;
  font-size: 10cqw;
  margin: 2cqw 0 3cqw;
  letter-spacing: -0.02em;
}

.scr.match .a-txt p {
  margin: 0;
  color: #6d5a64;
  font-size: 3.9cqw;
  line-height: 1.45;
}

.scr.match .a-go {
  position: absolute;
  left: 8cqw;
  right: 8cqw;
  bottom: 12cqw;
  background: #b5105f;
  color: #fff;
  border-radius: 8cqw;
  padding: 4.2cqw;
  text-align: center;
  font-weight: 700;
  font-size: 4.2cqw;
}

/* ---- Chat ---- */

.scr.chat {
  background: #fff;
}

.scr.chat .a-top {
  position: absolute;
  top: 12cqw;
  left: 0;
  right: 0;
  height: 15cqw;
  display: flex;
  align-items: center;
  gap: 3cqw;
  padding: 0 5cqw;
  border-bottom: 1px solid #f1e3ea;
  font-size: 5cqw;
}

.scr.chat .a-av {
  width: 11cqw;
  height: 11cqw;
  border-radius: 50%;
  background: url('/img/vd-meera.webp') center 14% / cover;
}

.scr.chat .a-av.riya {
  background: url('/img/vd-riya.webp') center 18% / cover;
}

.scr.chat .a-top b {
  display: block;
  font-size: 4.3cqw;
}

.scr.chat .a-top small {
  display: block;
  color: #8a7581;
  font-size: 3.1cqw;
}

.scr.chat .a-x {
  margin-left: auto;
  display: flex;
  gap: 2cqw;
  align-items: center;
}

.scr.chat .a-x span {
  background: #ffe5e5;
  color: #d33;
  font-size: 2.9cqw;
  font-weight: 800;
  border-radius: 3cqw;
  padding: 1cqw 2.4cqw;
}

.scr.chat .a-msgs {
  position: absolute;
  top: 30cqw;
  left: 4cqw;
  right: 4cqw;
  display: flex;
  flex-direction: column;
  gap: 3cqw;
}

.scr.chat .a-day,
.scr.chat .a-note {
  align-self: center;
  color: #8a7581;
  font-size: 3cqw;
}

.scr.chat .a-note {
  font-size: 2.9cqw;
  background: #faf4f7;
  border-radius: 3cqw;
  padding: 1.6cqw 3cqw;
}

.scr.chat .a-b {
  max-width: 70%;
  border-radius: 4.5cqw;
  padding: 3cqw 4cqw 2cqw;
  font-size: 3.7cqw;
  line-height: 1.4;
}

.scr.chat .a-b small {
  display: block;
  text-align: right;
  font-size: 2.5cqw;
  opacity: 0.7;
  margin-top: 1cqw;
}

.scr.chat .a-them {
  background: #f6eef2;
  align-self: flex-start;
  border-bottom-left-radius: 1.4cqw;
}

.scr.chat .a-mine {
  background: #b5105f;
  color: #fff;
  align-self: flex-end;
  border-bottom-right-radius: 1.4cqw;
}

.scr.chat .a-ice {
  position: absolute;
  left: 4cqw;
  right: 4cqw;
  bottom: 24cqw;
  border-radius: 4cqw;
  padding: 3cqw 4cqw;
  background: #fff5f9;
  border: 0.4cqw solid #f6c9dc;
  font-size: 3.4cqw;
}

.scr.chat .a-ice b {
  color: #b5105f;
  display: block;
  font-size: 3cqw;
  margin-bottom: 0.8cqw;
}

.scr.chat .a-inp {
  position: absolute;
  left: 4cqw;
  right: 4cqw;
  bottom: 7cqw;
  display: flex;
  gap: 2.6cqw;
  align-items: center;
}

.scr.chat .a-inp span {
  flex: 1;
  border: 0.4cqw solid #e9d7e0;
  border-radius: 6cqw;
  padding: 3cqw 4cqw;
  color: #a08f98;
  font-size: 3.6cqw;
}

.scr.chat .a-inp .a-spark {
  flex: none;
  width: 11cqw;
  height: 11cqw;
  border-radius: 50%;
  background: #ffe3ef;
  color: #e8418a;
  display: grid;
  place-items: center;
  font-size: 4.8cqw;
}

.scr.chat .a-inp i {
  width: 11cqw;
  height: 11cqw;
  border-radius: 50%;
  background: #b5105f;
  color: #fff;
  display: grid;
  place-items: center;
  font-style: normal;
  font-size: 4.6cqw;
}

/* ---- Live Now room: finding your date, with people live nearby ---- */

.scr.room {
  background: radial-gradient(120% 70% at 50% 35%, #4a1530 0%, #1d0b14 70%);
  color: #fff;
}

.scr.room .a-ttl {
  position: absolute;
  top: 14cqw;
  left: 5cqw;
  right: 5cqw;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.scr.room .a-ttl b {
  font-size: 6.4cqw;
}

.scr.room .a-ttl span {
  background: rgba(255, 77, 94, 0.18);
  color: #ff8a95;
  border-radius: 4cqw;
  padding: 1.2cqw 3cqw;
  font-size: 3.2cqw;
  font-weight: 800;
  display: flex;
  gap: 1.6cqw;
  align-items: center;
}

.scr.room .a-ttl span::before {
  content: '';
  width: 1.8cqw;
  height: 1.8cqw;
  border-radius: 50%;
  background: #ff4d5e;
}

.scr.room .a-ring {
  position: absolute;
  left: 50%;
  top: 52cqw;
  width: 76cqw;
  height: 76cqw;
  margin-left: -38cqw;
  border-radius: 50%;
  border: 0.4cqw solid rgba(255, 140, 190, 0.25);
  display: grid;
  place-items: center;
}

.scr.room .a-ring::before {
  content: '';
  position: absolute;
  inset: 9cqw;
  border-radius: 50%;
  border: 0.4cqw solid rgba(255, 140, 190, 0.4);
}

.scr.room .a-ring div {
  width: 40cqw;
  height: 40cqw;
  border-radius: 50%;
  background: url('/img/vd-you.webp') center 18% / cover;
  border: 1.2cqw solid #e8418a;
}

.scr.room .a-near span {
  position: absolute;
  border-radius: 50%;
  background-size: cover;
  background-position: center;
  border: 0.7cqw solid rgba(255, 255, 255, 0.85);
  box-shadow: 0 1cqw 4cqw rgba(0, 0, 0, 0.4);
  z-index: 3;
}

.scr.room .a-near span::after {
  content: '';
  position: absolute;
  right: -0.4cqw;
  bottom: -0.4cqw;
  width: 3.2cqw;
  height: 3.2cqw;
  border-radius: 50%;
  background: #3ddc84;
  border: 0.6cqw solid #2a0f1d;
}

.scr.room .a-near span:nth-child(1) {
  left: 16cqw;
  top: 54cqw;
  width: 12cqw;
  height: 12cqw;
  background-image: url('/img/vd-near-1.webp');
}

.scr.room .a-near span:nth-child(2) {
  left: 74cqw;
  top: 56cqw;
  width: 11cqw;
  height: 11cqw;
  background-image: url('/img/vd-near-2.webp');
}

.scr.room .a-near span:nth-child(3) {
  left: 71.5cqw;
  top: 115.5cqw;
  width: 13cqw;
  height: 13cqw;
  background-image: url('/img/vd-near-3.webp');
}

.scr.room .a-find {
  position: absolute;
  top: 136cqw;
  left: 6cqw;
  right: 6cqw;
  text-align: center;
}

.scr.room .a-find b {
  display: block;
  font-size: 6cqw;
  margin-bottom: 2cqw;
}

.scr.room .a-find p {
  margin: 0;
  color: #d9bfcb;
  font-size: 3.7cqw;
}

.scr.room .a-find p::before {
  content: '';
  display: inline-block;
  width: 2cqw;
  height: 2cqw;
  border-radius: 50%;
  background: #3ddc84;
  margin-right: 1.6cqw;
  vertical-align: middle;
  box-shadow: 0 0 0 1cqw rgba(61, 220, 132, 0.2);
}

.scr.room .a-rules {
  position: absolute;
  left: 6cqw;
  right: 6cqw;
  top: 166cqw;
  display: flex;
  gap: 2cqw;
  justify-content: center;
  flex-wrap: wrap;
}

.scr.room .a-rules span {
  background: rgba(255, 255, 255, 0.08);
  border: 0.3cqw solid rgba(255, 255, 255, 0.15);
  border-radius: 4cqw;
  padding: 1.4cqw 3cqw;
  font-size: 3cqw;
  color: #f0dbe5;
}

.scr.room .a-leave {
  position: absolute;
  left: 20cqw;
  right: 20cqw;
  bottom: 9cqw;
  border-radius: 8cqw;
  padding: 3.6cqw;
  text-align: center;
  font-weight: 700;
  font-size: 4cqw;
  border: 0.4cqw solid rgba(255, 255, 255, 0.3);
}

/* The room's search rings pulse; the nearby people breathe. */
@media (prefers-reduced-motion: no-preference) {
  .scr.room .a-ring::after {
    content: '';
    position: absolute;
    inset: 18cqw;
    border-radius: 50%;
    border: 0.6cqw solid rgba(232, 65, 138, 0.6);
    animation: a-ping 2.4s ease-out infinite;
  }
  .scr.room .a-near span {
    animation: a-breathe 3s ease-in-out infinite;
  }
  .scr.room .a-near span:nth-child(2) {
    animation-delay: 0.8s;
  }
  .scr.room .a-near span:nth-child(3) {
    animation-delay: 1.6s;
  }
}

@keyframes a-ping {
  from {
    transform: scale(1);
    opacity: 1;
  }
  to {
    transform: scale(1.9);
    opacity: 0;
  }
}

@keyframes a-breathe {
  50% {
    transform: scale(1.08);
  }
}

.scr.vid .a-status {
  color: #fff;
}

/* ---- Light app screens (owner, 25 Oct 2026): the Live Now room ---- */
.scr.room {
  background: radial-gradient(120% 70% at 50% 35%, #ffe3ef 0%, #fff7fa 70%);
  color: #1d1218;
}
.scr.room .a-status {
  color: #1d1218;
}
.scr.room .a-ttl b {
  color: #b5105f;
}
.scr.room .a-ttl span {
  background: #ffe1e6;
  color: #d6243d;
}
.scr.room .a-ring {
  border-color: rgba(181, 16, 95, 0.18);
}
.scr.room .a-ring::before {
  border-color: rgba(181, 16, 95, 0.28);
}
.scr.room .a-ring div {
  border-color: #e8418a;
  box-shadow: 0 3cqw 10cqw rgba(181, 16, 95, 0.25);
}
.scr.room .a-near span {
  border-color: #fff;
  box-shadow: 0 1cqw 4cqw rgba(58, 15, 36, 0.2);
}
.scr.room .a-near span::after {
  border-color: #fff;
}
.scr.room .a-find b {
  color: #1d1218;
}
.scr.room .a-find p {
  color: #7a6870;
}
.scr.room .a-rules span {
  background: #fff;
  border-color: #f0d6e2;
  color: #7a6870;
}
.scr.room .a-leave {
  border-color: #e7a9c5;
  color: #b5105f;
  background: #fff;
}

/* The video date: light controls over the video. */
.scr .a-choice .a-pass {
  background: rgba(255, 255, 255, 0.94);
  color: #1d1218;
  border-color: rgba(255, 255, 255, 0.6);
}

/* Glass (owner, 25 Oct 2026): frosted controls over the video and the photos. */
.scr .a-idea {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.34), rgba(255, 255, 255, 0.14));
  color: #fff;
  border: 0.3cqw solid rgba(255, 255, 255, 0.45);
  box-shadow:
    0 2cqw 8cqw rgba(0, 0, 0, 0.18),
    inset 0 0.4cqw 0 rgba(255, 255, 255, 0.35);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
}
.scr .a-idea::before {
  color: #fff;
}
.scr .a-idea small {
  color: rgba(255, 255, 255, 0.82);
}
.scr .a-choice .a-pass {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.34), rgba(255, 255, 255, 0.14));
  color: #fff;
  border: 0.3cqw solid rgba(255, 255, 255, 0.45);
  box-shadow:
    inset 0 0.4cqw 0 rgba(255, 255, 255, 0.35),
    0 2cqw 6cqw rgba(0, 0, 0, 0.18);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
}
.scr .a-choice .a-like {
  background: linear-gradient(135deg, rgba(255, 95, 162, 0.92), rgba(232, 65, 138, 0.82));
  border: 0.3cqw solid rgba(255, 255, 255, 0.35);
  box-shadow:
    inset 0 0.4cqw 0 rgba(255, 255, 255, 0.3),
    0 2cqw 6cqw rgba(232, 65, 138, 0.35);
  backdrop-filter: blur(14px);
}
.scr .a-you {
  border: 0.5cqw solid rgba(255, 255, 255, 0.55);
  box-shadow: 0 2cqw 6cqw rgba(0, 0, 0, 0.25);
}
.scr .a-you span {
  background: rgba(255, 255, 255, 0.22);
  backdrop-filter: blur(8px);
  border: 0.2cqw solid rgba(255, 255, 255, 0.35);
}

/* Room and match: glass chips and buttons */
.scr.room .a-rules span,
.scr.room .a-leave {
  background: rgba(255, 255, 255, 0.55);
  border-color: rgba(255, 255, 255, 0.95);
  box-shadow:
    0 1.5cqw 5cqw rgba(181, 16, 95, 0.1),
    inset 0 0.3cqw 0 #fff;
  backdrop-filter: blur(12px);
}
.scr.room .a-ttl span {
  background: rgba(255, 225, 230, 0.7);
  backdrop-filter: blur(8px);
  border: 0.3cqw solid rgba(255, 255, 255, 0.9);
}

/* Chat: glass icebreaker and input */
.scr.chat .a-ice {
  background: rgba(255, 240, 247, 0.7);
  border-color: rgba(246, 201, 220, 0.9);
  backdrop-filter: blur(12px);
  box-shadow: inset 0 0.3cqw 0 #fff;
}

/* One primary button style on every screen (owner, 25 Oct 2026): the app's
   brand pink #b5105f as glass, the same on the video call, Meet, the match
   and Chat. */
.scr .a-choice .a-like,
.scr.match .a-go,
.scr.chat .a-inp i {
  background: linear-gradient(135deg, #d6347f 0%, #b5105f 100%);
  color: #fff;
  border: 0.3cqw solid rgba(255, 255, 255, 0.35);
  box-shadow:
    inset 0 0.4cqw 0 rgba(255, 255, 255, 0.3),
    0 2cqw 6cqw rgba(181, 16, 95, 0.35);
}

/* ---- Meet, as in the app (owner's screenshot, 25 Oct 2026): title with the
   bell and filters, intent chips that scroll sideways, the profile card, a
   glass Pass / Like / Like + note bar and the floating glass tab bar ---- */

.scr.meet {
  background: #f7f3f5;
}

.scr.meet .a-mhead {
  position: absolute;
  top: 15.5cqw;
  left: 6cqw;
  right: 2.2cqw;
  display: flex;
  align-items: center;
  gap: 2.2cqw;
}

.scr.meet .a-mhead b {
  margin-right: auto;
  color: #b5105f;
  font-size: 9.6cqw;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.scr.meet .a-round {
  width: 10.8cqw;
  height: 10.8cqw;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1cqw 3cqw rgba(60, 10, 35, 0.08);
  display: grid;
  place-items: center;
  color: #1d1218;
}

.scr.meet .a-round svg {
  width: 5.2cqw;
  height: 5.2cqw;
}

.scr.meet .a-chips {
  position: absolute;
  top: 28.7cqw;
  left: 2.2cqw;
  right: 0;
  display: flex;
  gap: 1.2cqw;
  overflow: hidden;
  white-space: nowrap;
}

.scr.meet .a-chips span {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 1.6cqw;
  height: 10cqw;
  padding: 0 4.4cqw 0 3.6cqw;
  border-radius: 3.2cqw;
  background: #fff;
  border: 0.3cqw solid #ebe1e6;
  color: #1d1218;
  font-size: 3.6cqw;
  font-weight: 500;
}

.scr.meet .a-chips span.a-on {
  background: #b5105f;
  border-color: #b5105f;
  color: #fff;
}

.scr.meet .a-chips svg {
  width: 4.4cqw;
  height: 4.4cqw;
}

.scr.meet .a-mcard {
  position: absolute;
  top: 41.5cqw;
  left: 2.2cqw;
  right: 2.2cqw;
  height: 125.5cqw;
  border-radius: 4.6cqw;
  overflow: hidden;
}

.scr.meet .a-photo {
  background-image: url('/img/vd-riya.webp');
  background-position: center 22%;
}

.scr.meet .a-mcard::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(0, 0, 0, 0.62) 88%);
}

.scr.meet .a-minfo {
  position: absolute;
  left: 4cqw;
  right: 4cqw;
  bottom: 5cqw;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.3cqw;
  color: #fff;
}

.scr.meet .a-active,
.scr.meet .a-intent {
  display: inline-flex;
  align-items: center;
  gap: 1.6cqw;
  height: 6.6cqw;
  padding: 0 3.4cqw 0 2.6cqw;
  border-radius: 3.3cqw;
  font-size: 3.3cqw;
  font-weight: 500;
}

.scr.meet .a-active {
  background: #fff;
  color: #1d1218;
}

.scr.meet .a-intent {
  background: #ec4f8d;
}

.scr.meet .a-active i,
.scr.meet .a-intent i {
  width: 1.8cqw;
  height: 1.8cqw;
  border-radius: 50%;
  background: #6f6168;
}

.scr.meet .a-intent i {
  background: #fff;
}

.scr.meet .a-minfo b {
  margin-top: 1cqw;
  font-size: 6.8cqw;
  font-weight: 500;
  letter-spacing: -0.01em;
}

.scr.meet .a-minfo b small {
  font-size: 5.2cqw;
  margin-left: 1cqw;
}

.scr.meet .a-loc {
  display: inline-flex;
  align-items: center;
  gap: 1.4cqw;
  font-size: 3.9cqw;
}

.scr.meet .a-loc svg {
  width: 3.8cqw;
  height: 3.8cqw;
}

/* The profile carries on under the glass bar, as in the app. */
.scr.meet .a-behind {
  position: absolute;
  top: 181cqw;
  left: 4.2cqw;
  right: 4.2cqw;
}

.scr.meet .a-behind b {
  display: block;
  font-size: 5.8cqw;
  font-weight: 500;
}

.scr.meet .a-behind p {
  margin: 1.5cqw 0 0;
  color: #8a7581;
  font-size: 3.4cqw;
}

.scr.meet .a-macts {
  position: absolute;
  top: 169.6cqw;
  left: 17.9cqw;
  width: 64cqw;
  height: 23.8cqw;
  border-radius: 12cqw;
  display: flex;
  justify-content: space-around;
  align-items: center;
  background: linear-gradient(180deg, rgba(255, 233, 243, 0.82), rgba(255, 244, 249, 0.72));
  border: 0.3cqw solid rgba(255, 255, 255, 0.95);
  box-shadow:
    0 2cqw 8cqw rgba(181, 16, 95, 0.12),
    inset 0 0.4cqw 0 #fff;
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  z-index: 3;
}

.scr.meet .a-macts > div {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.4cqw;
  font-size: 3.2cqw;
  color: #8a7581;
}

.scr.meet .a-macts i {
  position: relative;
  width: 13.2cqw;
  height: 13.2cqw;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #fff;
  border: 0.3cqw solid #e2d6dc;
  color: #1d1218;
}

.scr.meet .a-macts svg {
  width: 5.6cqw;
  height: 5.6cqw;
}

.scr.meet .a-macts .a-like {
  color: #1d1218;
}

.scr.meet .a-macts .a-like i {
  background: linear-gradient(135deg, #d6347f 0%, #b5105f 100%);
  border-color: rgba(255, 255, 255, 0.35);
  color: #fff;
  box-shadow:
    inset 0 0.4cqw 0 rgba(255, 255, 255, 0.3),
    0 2cqw 6cqw rgba(181, 16, 95, 0.35);
}

.scr.meet .a-macts .a-note {
  color: #b5105f;
}

.scr.meet .a-macts .a-note i {
  border-color: #b5105f;
  color: #b5105f;
}

.scr.meet .a-macts .a-note em {
  position: absolute;
  right: -0.6cqw;
  bottom: -0.6cqw;
  width: 4.6cqw;
  height: 4.6cqw;
  border-radius: 50%;
  background: #f4c76b;
  color: #6a4a0c;
  display: grid;
  place-items: center;
}

.scr.meet .a-macts .a-note em svg {
  width: 2.8cqw;
  height: 2.8cqw;
}

.scr.meet .a-mtabs {
  position: absolute;
  top: 195.5cqw;
  left: 5.4cqw;
  right: 5.6cqw;
  height: 15.6cqw;
  border-radius: 8cqw;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-items: center;
  padding: 0 1.2cqw;
  background: rgba(255, 255, 255, 0.78);
  border: 0.3cqw solid rgba(255, 255, 255, 0.95);
  box-shadow: 0 2cqw 8cqw rgba(60, 10, 35, 0.12);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  z-index: 3;
}

.scr.meet .a-mtabs div {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.8cqw;
  font-size: 3.1cqw;
  color: #1d1218;
  height: 13cqw;
  justify-content: center;
  border-radius: 6.5cqw;
}

.scr.meet .a-mtabs div.a-on {
  color: #b5105f;
  background: #efe9ec;
}

.scr.meet .a-mtabs svg {
  width: 6cqw;
  height: 6cqw;
}