:root {
  --berry: #a70f3f;
  --berry-dark: #65102e;
  --plum: #341222;
  --cream: #fff9f5;
  --sand: #d9aa76;
  --line: #efe1da;
  --muted: #856f77;
  --green: #16804c;
  --green-soft: #e8f7ee;
  --shadow: 0 18px 50px rgba(83, 18, 47, .12);
}

* { box-sizing: border-box; }
html { background: #f7efeb; }
body {
  margin: 0;
  min-height: 100vh;
  font-family: Inter, "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  color: var(--plum);
  background:
    radial-gradient(circle at 10% 4%, rgba(218, 169, 118, .22), transparent 26%),
    radial-gradient(circle at 95% 15%, rgba(167, 15, 63, .12), transparent 28%),
    #f8f1ed;
}
button, input, select { font: inherit; }
button { cursor: pointer; }
svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }

.preview-toolbar { position: fixed; z-index: 200; top: 0; left: 0; right: 0; height: 46px; display: flex; align-items: center; justify-content: center; gap: 7px; padding: 6px 10px; color: #fff; background: #32123d; box-shadow: 0 4px 14px rgba(35, 8, 40, .24); }
.preview-toolbar[hidden] { display: none; }
.preview-toolbar strong { margin-right: 5px; color: #f8b6ca; font-size: 11px; letter-spacing: .08em; }
.preview-toolbar button { min-height: 30px; padding: 0 12px; border: 1px solid rgba(255,255,255,.36); border-radius: 8px; color: #fff; background: rgba(255,255,255,.08); font-size: 11px; font-weight: 800; }
.preview-toolbar button.is-active { border-color: #ff5486; background: #a70f3f; box-shadow: 0 0 0 2px rgba(255,84,134,.18); }
body.has-preview-toolbar { padding-top: 46px; }
body.has-preview-toolbar .app-shell { min-height: calc(100dvh - 46px); }

.app-shell {
  width: min(100%, 460px);
  min-height: 100dvh;
  margin: 0 auto;
  background: var(--cream);
  box-shadow: var(--shadow);
  position: relative;
  overflow: hidden;
}
.app-view { min-height: 100dvh; }
.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: grid;
  grid-template-columns: 58px 1fr 58px;
  align-items: center;
  gap: 8px;
  padding: calc(12px + env(safe-area-inset-top)) 17px 10px;
  background: rgba(255, 249, 245, .92);
  backdrop-filter: blur(18px);
  border-bottom: 1px solid rgba(239, 225, 218, .75);
}
.icon-button, .more-button, .heart-button { border: 0; }
.icon-button { width: 44px; height: 44px; display: grid; place-items: center; background: #fff; border-radius: 15px; color: var(--plum); box-shadow: 0 6px 20px rgba(65, 20, 40, .08); position: relative; }
.account-more-button { width: 44px; height: 40px; display: grid; place-items: center; justify-self: end; padding: 0 0 8px; border: 0; border-radius: 14px; color: var(--plum); background: #fff; box-shadow: 0 6px 20px rgba(65,20,40,.08); font-size: 22px; font-weight: 900; letter-spacing: 1px; }
.account-more-button[hidden] { display: none; }
.notice-dot { position: absolute; width: 8px; height: 8px; border-radius: 50%; background: var(--berry); top: 7px; right: 8px; border: 2px solid #fff; }
.brand { text-align: center; line-height: 1; }
.brand strong { display: block; font-size: 28px; color: var(--berry-dark); letter-spacing: .02em; }
.brand strong span { font-size: 15px; color: var(--sand); margin-right: 3px; }
.brand small { display: block; margin-top: 5px; font-size: 10px; color: #bd8958; }
.content { padding: 0 16px calc(104px + env(safe-area-inset-bottom)); }
.hero-copy { text-align: center; padding: 24px 0 15px; }
.eyebrow { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; color: var(--berry); font-weight: 700; }
.eyebrow i { width: 7px; height: 7px; border-radius: 50%; background: var(--berry); box-shadow: 0 0 0 5px rgba(167, 15, 63, .09); }
.hero-copy h1 { margin: 12px 0 7px; font-size: clamp(26px, 7vw, 32px); letter-spacing: -.04em; line-height: 1.18; }
.hero-copy p { margin: 0; color: var(--muted); font-size: 14px; }
.deck-head { display: flex; align-items: center; justify-content: space-between; padding: 20px 2px 13px; }
.deck-head h1 { margin: 5px 0 0; font-size: 25px; letter-spacing: -.035em; }
.filter-toggle { height: 39px; display: flex; align-items: center; gap: 6px; padding: 0 13px; border: 1px solid var(--line); border-radius: 999px; color: var(--berry); background: #fff; font-size: 12px; font-weight: 900; box-shadow: 0 5px 16px rgba(70,17,40,.06); }
.filter-toggle span { font-size: 14px; }
.match-filters { display: grid; grid-template-columns: .82fr 1.18fr; gap: 8px; margin-bottom: 13px; }
.match-filters[hidden] { display: none; }
.gender-toggle { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 5px; padding: 5px; border-radius: 16px; background: #f2e8e3; }
.gender-toggle button { height: 40px; border: 0; border-radius: 12px; color: var(--muted); background: transparent; font-size: 13px; font-weight: 900; }
.gender-toggle button.is-active { color: #fff; background: var(--berry); box-shadow: 0 6px 15px rgba(167,15,63,.2); }
.filter-select { display: flex; flex-direction: column; gap: 5px; padding: 10px 11px; border: 1px solid var(--line); border-radius: 16px; background: #fff; color: var(--muted); font-size: 10px; font-weight: 800; }
.filter-select > select { width: 100%; height: 28px; padding: 0 4px; border: 0; color: var(--plum); background: transparent; font-size: 14px; font-weight: 900; outline: none; }
.range-fields { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 4px; }
.range-fields select { min-width: 0; height: 28px; border: 0; color: var(--plum); background: transparent; font-size: 14px; font-weight: 900; outline: none; }
.range-fields i { color: var(--muted); font-style: normal; font-size: 10px; }
.filter-confirm { grid-column: 1 / -1; height: 43px; border: 0; border-radius: 13px; color: #fff; background: var(--berry); font-size: 14px; font-weight: 900; box-shadow: 0 8px 18px rgba(167,15,63,.2); }
.filter-toggle.compact { min-width: 76px; justify-content: center; box-shadow: none; }
.slider-filter { justify-content: center; min-height: 78px; }
.slider-filter > span { display: flex; justify-content: space-between; align-items: center; }
.slider-filter output { color: var(--berry); font-size: 13px; font-weight: 900; }
.slider-filter input[type="range"] { width: 100%; height: 20px; margin: 3px 0 0; accent-color: var(--berry); cursor: grab; }
.slider-filter input[type="range"]:active { cursor: grabbing; }
.range-select.slider-filter { gap: 2px; }
.range-select.slider-filter > label { display: grid; grid-template-columns: 25px 1fr; align-items: center; gap: 4px; }
.range-select.slider-filter small { color: #a6979d; font-size: 9px; }
.carousel-meta { display: flex; align-items: center; justify-content: space-between; padding: 1px 3px 7px; color: var(--muted); }
.carousel-meta span { font-size: 12px; font-weight: 800; }
.carousel-meta span b { color: var(--berry); font-size: 14px; }
.carousel-meta small { font-size: 10px; }
.profile-deck { position: relative; padding: 0 2px 5px; overflow: hidden; border-radius: 25px; perspective: 900px; isolation: isolate; }
.profile-deck::before { content: ""; position: absolute; z-index: 0; left: 2px; right: 2px; top: 4px; bottom: 5px; border-radius: 30px; background: linear-gradient(0deg,rgba(31,8,18,.42),transparent 48%),var(--next-photo),#eadcdf; background-position: center 22%; background-size: cover; box-shadow: 0 14px 28px rgba(62,17,37,.1); transform: scale(var(--deck-scale,.975)) translateY(8px); transition: transform .14s ease; }
.feature-card { height: clamp(360px, calc(100dvh - 400px), 500px); border-radius: 30px; overflow: hidden; position: relative; background: var(--current-photo) center 22%/cover no-repeat,#ddd; box-shadow: 0 18px 36px rgba(62, 17, 37, .16); touch-action: none; user-select: none; will-change: transform,opacity; transition: transform .2s cubic-bezier(.2,.72,.25,1),opacity .18s ease; transform-origin: 50% 100%; }
.feature-card { z-index: 1; }
.feature-card.is-dragging { transition: none; cursor: grabbing; }
.feature-card.is-resetting { transition: none !important; }
.swipe-stamp { position: absolute; z-index: 7; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 21px; font-weight: 950; letter-spacing: .04em; text-align: center; text-shadow: 0 2px 0 rgba(92,16,64,.65),0 4px 14px rgba(0,0,0,.35); opacity: 0; pointer-events: none; will-change: opacity,transform; transition: opacity .06s linear,transform .06s linear; }
.swipe-stamp.nope { inset: -10%; border: 0; border-radius: 0; background: radial-gradient(circle,rgba(25,20,23,.42),rgba(25,20,23,.04) 55%,transparent 72%); transform: rotate(-8deg) scale(.55); }
.swipe-stamp.nope::before { content: "×"; position: absolute; font-size: clamp(118px,42vw,190px); font-weight: 300; line-height: 1; }
.swipe-stamp.nope::after { content: "跳过"; position: absolute; top: 61%; padding: 6px 13px; border-radius: 999px; background: rgba(30,24,27,.52); font-size: 18px; }
.swipe-stamp.like { inset: 0; border: 0; border-radius: 30px; overflow: hidden; background: transparent; transform: scale(.88); }
.like-heart-core,.like-heart-ring,.like-heart-field { position: absolute; left: 50%; top: 47%; display: block; transform: translate3d(-50%,-50%,0); transform-origin: 50% 50%; will-change: transform,opacity; backface-visibility: hidden; }
.like-heart-core { width: 22%; min-width: 64px; }
.like-heart-core { filter: drop-shadow(0 5px 8px rgba(105,12,65,.2)); }
.like-heart-core path { fill: #f11882; stroke: #fff; stroke-width: 5; stroke-linejoin: round; }
.like-heart-core,.like-heart-ring { z-index: 2; }
.like-heart-ring,.like-heart-field { width: 30%; min-width: 88px; opacity: 0; }
.like-heart-ring path { fill: none; stroke-linejoin: round; }
.like-heart-field { z-index: 1; }
.like-heart-field path { fill: none; stroke-linejoin: round; }
.like-field-outer { stroke: #ee9bdf; stroke-width: 12; }
.like-field-middle { stroke: #69caf4; stroke-width: 8; }
.like-field-inner { stroke: #9b69df; stroke-width: 4; }
.like-heart-ring-primary .like-ring-outer { stroke: #ff552c; stroke-width: 17; }
.like-heart-ring-primary .like-ring-middle { stroke: #fff; stroke-width: 11; }
.like-heart-ring-primary .like-ring-inner { stroke: #f32a95; stroke-width: 5; }
.like-heart-ring-secondary .like-ring-outer { stroke: #ec8be9; stroke-width: 3.5; }
.like-heart-ring-secondary .like-ring-middle,.like-heart-ring-secondary .like-ring-inner { display: none; }
.swipe-stamp.like.is-armed .like-heart-core { animation: likeCoreSequence 1s cubic-bezier(.28,.02,.22,1) both; }
.swipe-stamp.like.is-armed .like-heart-field { animation: likeFieldWave 1s cubic-bezier(.16,.7,.22,1) both; }
.swipe-stamp.like.is-armed .like-heart-ring-primary { animation: likePrimaryWave 1s cubic-bezier(.16,.7,.22,1) both; }
.swipe-stamp.like.is-armed .like-heart-ring-secondary { animation: likeSecondaryWave 1s cubic-bezier(.16,.7,.22,1) both; }
.feature-card.is-resetting .swipe-stamp,.feature-card.is-resetting .swipe-stamp * { opacity: 0 !important; animation: none !important; }
@keyframes likeCoreSequence {
  0% { opacity: .94; transform: translate3d(-50%,-50%,0) scale(.62); }
  10% { opacity: 1; transform: translate3d(-50%,-50%,0) scale(.82); }
  22% { transform: translate3d(-50%,-50%,0) scale(1.14); }
  38%,58% { transform: translate3d(-50%,-50%,0) scale(1.14); }
  72% { transform: translate3d(-50%,-50%,0) scale(.98); }
  100% { opacity: .94; transform: translate3d(-50%,-50%,0) scale(.68); }
}
@keyframes likePrimaryWave {
  0%,18% { opacity: 0; transform: translate3d(-50%,-50%,0) scale(.68); }
  23% { opacity: 1; transform: translate3d(-50%,-50%,0) scale(.78); }
  37% { opacity: 1; transform: translate3d(-50%,-50%,0) scale(1.08); }
  52% { opacity: 1; transform: translate3d(-50%,-50%,0) scale(1.4); }
  68% { opacity: 1; transform: translate3d(-50%,-50%,0) scale(1.55); }
  82% { opacity: .94; transform: translate3d(-50%,-50%,0) scale(1.75); }
  92% { opacity: .56; transform: translate3d(-50%,-50%,0) scale(2.2); }
  100% { opacity: 0; transform: translate3d(-50%,-50%,0) scale(2.8); }
}
@keyframes likeSecondaryWave {
  0%,28% { opacity: 0; transform: translate3d(-50%,-50%,0) scale(.74); }
  33% { opacity: .78; transform: translate3d(-50%,-50%,0) scale(.88); }
  48% { opacity: .94; transform: translate3d(-50%,-50%,0) scale(1.2); }
  64% { opacity: .68; transform: translate3d(-50%,-50%,0) scale(1.65); }
  82% { opacity: .28; transform: translate3d(-50%,-50%,0) scale(2.4); }
  94%,100% { opacity: 0; transform: translate3d(-50%,-50%,0) scale(3.5); }
}
@keyframes likeFieldWave {
  0%,24% { opacity: 0; transform: translate3d(-50%,-50%,0) scale(.9) scaleX(1.04) scaleY(1.12); }
  34% { opacity: .2; transform: translate3d(-50%,-50%,0) scale(1.25) scaleX(1.04) scaleY(1.12); }
  50% { opacity: .48; transform: translate3d(-50%,-50%,0) scale(2.2) scaleX(1.04) scaleY(1.12); }
  68% { opacity: .54; transform: translate3d(-50%,-50%,0) scale(3.5) scaleX(1.04) scaleY(1.12); }
  82% { opacity: .34; transform: translate3d(-50%,-50%,0) scale(5.6) scaleX(1.04) scaleY(1.12); }
  92% { opacity: .2; transform: translate3d(-50%,-50%,0) scale(5.8) scaleX(1.04) scaleY(1.12); }
  100% { opacity: 0; transform: translate3d(-50%,-50%,0) scale(5.9) scaleX(1.04) scaleY(1.12); }
}
.swipe-stamp.super { --super-scale: .12; --super-alpha: 0; z-index: 7; inset: 0; border: 0; border-radius: 30px; overflow: hidden; background: transparent; transform: none; }
.super-burst { position: absolute; z-index: 2; left: 50%; top: 47%; width: 84%; aspect-ratio: 1; opacity: var(--super-alpha); transform: translate3d(-50%,-50%,0) scale(var(--super-scale)); transform-origin: center; will-change: transform,opacity; backface-visibility: hidden; contain: layout paint; }
.super-star { position: absolute; left: 50%; top: 50%; display: block; width: var(--star-size); height: var(--star-size); transform: translate3d(-50%,-50%,0); overflow: visible; }
.super-star path { fill: currentColor; }
.star-blue { --star-size: 100%; color: #1774ef; }
.star-cyan { --star-size: 78%; color: #2bd9f1; }
.star-violet { --star-size: 58%; color: #3157ed; }
.star-pink { --star-size: 39%; color: #f132d8; }
.star-white { --star-size: 23%; color: #fff; }
.super-cover { position: absolute; z-index: 3; inset: 0; opacity: 0; background: radial-gradient(circle at -8% -7%,#f132d8 0 25%,transparent 25.5%),radial-gradient(circle at 108% -7%,#a94bf3 0 25%,transparent 25.5%),#fff; }
.super-photo-reveal { position: absolute; z-index: 4; inset: 0; opacity: 0; clip-path: polygon(50% 25%,54% 42%,72% 42%,58% 52%,64% 69%,50% 59%,36% 69%,42% 52%,28% 42%,46% 42%); transform: translateZ(0) scale(.18); transform-origin: 50% 47%; will-change: transform,opacity; backface-visibility: hidden; }
.super-cover,.super-photo-reveal { display: none; }
.super-photo-reveal::before { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg,rgba(27,7,16,.34),transparent 54%),var(--current-photo) center 22%/cover no-repeat; transform-origin: 50% 47%; will-change: transform; backface-visibility: hidden; }
.super-label { position: absolute; z-index: 5; left: 50%; top: 47%; padding: 5px 9px; opacity: 0; color: #fff; background: linear-gradient(90deg,#20d6f5,#6556f4 46%,#ff37c4); border: 3px solid #fff; border-radius: 7px; box-shadow: 3px 3px 0 #7b3ce8,-2px -2px 0 #19cfea; font-size: 19px; font-style: italic; white-space: nowrap; text-shadow: 0 2px 0 #8951e5; transform: translate(-50%,-50%) scale(.72); transition: opacity .06s linear,transform .1s ease-out; }
.swipe-stamp.super.is-preview .super-label { opacity: 1; transform: translate(-50%,-50%) scale(.9); }
.swipe-stamp.super.is-armed .super-label { transform: translate(-50%,-50%) scale(1.02); }
.swipe-stamp.super.is-committed { --super-alpha: 1; }
.swipe-stamp.super.is-committed .super-burst { animation: superBurstExpand .6s cubic-bezier(.16,.9,.22,1) both; }
.swipe-stamp.super.is-committed .super-cover { animation: superWhiteStage .5s linear .31s both; }
.swipe-stamp.super.is-committed .super-photo-reveal { animation: superPhotoReveal .44s cubic-bezier(.16,.9,.22,1) .34s both; }
.swipe-stamp.super.is-committed .super-photo-reveal::before { animation: superPhotoCounterScale .44s cubic-bezier(.16,.9,.22,1) .34s both; }
.swipe-stamp.super.is-committed .super-label { animation: superLabelHold 1s ease both; }
@keyframes superBurstExpand { 0% { opacity: .35; transform: translate3d(-50%,-50%,0) scale(.08); } 12% { opacity: .82; transform: translate3d(-50%,-50%,0) scale(.45); } 30% { opacity: 1; transform: translate3d(-50%,-50%,0) scale(1.3); } 54% { opacity: 1; transform: translate3d(-50%,-50%,0) scale(2.45); } 76% { opacity: 1; transform: translate3d(-50%,-50%,0) scale(3.6); } 100% { opacity: 0; transform: translate3d(-50%,-50%,0) scale(4.4); } }
@keyframes superWhiteStage { 0%,6% { opacity: 0; } 14%,68% { opacity: 1; } 100% { opacity: 0; } }
@keyframes superPhotoReveal { 0% { opacity: 0; transform: translateZ(0) scale(.18); } 12% { opacity: 1; } 72% { opacity: 1; transform: translateZ(0) scale(2.7); } 100% { opacity: 0; transform: translateZ(0) scale(4.4); } }
@keyframes superPhotoCounterScale { 0% { transform: translateZ(0) scale(5.5556); } 72% { transform: translateZ(0) scale(.3704); } 100% { transform: translateZ(0) scale(.2273); } }
@keyframes superLabelHold { 0% { opacity: .5; transform: translate(-50%,-50%) scale(.35); } 20% { opacity: 1; transform: translate(-50%,-50%) scale(1.08); } 30%,92% { opacity: 1; transform: translate(-50%,-50%) scale(1); } 100% { opacity: 0; transform: translate(-50%,-50%) scale(.98); } }
.feature-card.is-super-commit { box-shadow: 0 0 0 4px rgba(91,100,255,.28),0 24px 60px rgba(225,45,188,.36); }
.feature-card > img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center 22%; }
.photo-shade { position: absolute; inset: 38% 0 0; background: linear-gradient(transparent, rgba(27, 7, 16, .82)); }
.verified-badge { position: absolute; right: 17px; top: 17px; min-width: 78px; height: 34px; display: flex; align-items: center; justify-content: center; gap: 4px; padding: 0 9px; background: #238deb; color: #fff; border: 3px solid #fff; border-radius: 12px 12px 12px 4px; font-size: 15px; font-weight: 900; }
.verified-badge b { font-size: 11px; white-space: nowrap; }
.verified-badge[hidden] { display: none; }
.more-button { position: absolute; left: 16px; top: 17px; width: 42px; height: 36px; border-radius: 999px; color: #fff; background: rgba(28, 17, 21, .62); letter-spacing: 2px; }
.heart-button { position: absolute; right: 18px; bottom: 20px; width: 57px; height: 57px; border-radius: 50%; background: #fff; color: var(--berry); font-size: 25px; box-shadow: 0 8px 25px rgba(20, 8, 13, .2); transition: transform .2s, color .2s, background .2s; }
.heart-button.is-liked { color: #fff; background: var(--berry); transform: scale(1.06); }
.profile-summary { position: absolute; left: 22px; right: 22px; bottom: 20px; color: #fff; }
.name-line { display: flex; align-items: center; gap: 9px; }
.name-line h2 { margin: 0; font-size: 29px; letter-spacing: -.03em; }
.online-dot { width: 9px; height: 9px; display: inline-block; margin-right: 5px; background: #3dd886; border: 2px solid rgba(255,255,255,.9); border-radius: 50%; vertical-align: 0; }
.online-dot.is-recent { background: #f0a43a; }.online-dot.is-hour { background: #aaa1a5; }
.profile-summary p { margin: 4px 0 11px; font-size: 14px; }
.interest-row { display: flex; gap: 8px; }
.interest-row span { padding: 7px 11px; border-radius: 999px; background: rgba(255,255,255,.9); color: var(--plum); font-weight: 700; font-size: 12px; backdrop-filter: blur(8px); }
.swipe-actions { display: flex; align-items: flex-start; justify-content: center; gap: 18px; margin-top: 15px; }
.round-action { width: 58px; border: 0; color: var(--muted); background: transparent; padding: 0; font-weight: 900; }
.round-action > span { width: 54px; height: 54px; display: grid; place-items: center; border: 1px solid #eadce0; border-radius: 50%; background: #fff; box-shadow: 0 7px 19px rgba(65,17,38,.12); font-size: 25px; line-height: 1; transition: transform .18s; }
.round-action:active > span { transform: scale(.9); }
.round-action small { display: block; margin-top: 6px; font-size: 9px; }
.round-action.rewind > span { color: #df9c31; font-size: 23px; }
.round-action.pass > span { color: #6d7a88; font-size: 32px; font-weight: 400; }
.round-action.like > span { width: 63px; height: 63px; margin: -5px -5px 0; color: #fff; border: 0; background: linear-gradient(145deg,#f35675,#b30943); box-shadow: 0 10px 25px rgba(167,15,63,.3); font-size: 27px; }
.round-action.like small { margin-top: 1px; color: var(--berry); }
.round-action.chat > span { color: #8460db; }
.deck-dots { display: flex; justify-content: center; gap: 4px; min-height: 14px; padding: 8px 0 0; }
.deck-dots i { width: 5px; height: 5px; border-radius: 999px; background: #ddcdd2; transition: .2s; }
.deck-dots i.is-active { width: 18px; background: var(--berry); }
.profile-actions { display: block; margin-top: 7px; }
.profile-actions .button { width: 100%; min-height: 44px; color: var(--berry); background: transparent; }
.button { min-height: 51px; border-radius: 17px; border: 0; font-weight: 800; padding: 0 18px; }
.button.primary { color: #fff; background: linear-gradient(135deg, #bc164e, #8c0a36); box-shadow: 0 9px 21px rgba(167, 15, 63, .22); }
.button.secondary { color: var(--plum); background: #f2e8e3; }
.profile-details { margin-top: 12px; padding: 16px; border: 1px solid var(--line); border-radius: 20px; background: #fff; animation: reveal .25s ease-out; }
.profile-details > div { display: inline-flex; flex-direction: column; gap: 3px; margin-right: 34px; }
.profile-details span { color: var(--muted); font-size: 11px; }
.profile-details strong { font-size: 14px; }
.profile-details p { margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--line); color: #5d4a52; font-size: 14px; line-height: 1.75; }
@keyframes reveal { from { opacity: 0; transform: translateY(-6px); } }
.trust-strip { display: grid; grid-template-columns: 37px 1fr auto; align-items: center; gap: 10px; background: var(--green-soft); color: var(--green); padding: 12px 13px; border-radius: 19px; margin-top: 12px; }
.shield { width: 34px; height: 38px; display: grid; place-items: center; color: #fff; background: var(--green); clip-path: polygon(50% 0, 92% 14%, 86% 75%, 50% 100%, 14% 75%, 8% 14%); font-weight: 900; }
.trust-strip p { margin: 0; line-height: 1.25; }
.trust-strip p strong { display: block; font-size: 12px; }
.trust-strip p small { display: block; opacity: .76; margin-top: 3px; font-size: 10px; }
.trust-strip b { font-size: 13px; }
.section-heading { display: flex; align-items: end; justify-content: space-between; margin: 28px 1px 12px; }
.section-heading span { color: var(--berry); font-size: 11px; font-weight: 800; }
.section-heading h2 { margin: 3px 0 0; font-size: 20px; }
.section-heading button { border: 0; background: transparent; color: var(--berry); font-weight: 800; }
.gallery-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.gallery-card { border: 0; min-height: 214px; border-radius: 21px; overflow: hidden; padding: 0; position: relative; background: #ddd; }
.gallery-card img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gallery-card::after { content: ""; position: absolute; inset: 45% 0 0; background: linear-gradient(transparent, rgba(28, 8, 17, .76)); }
.gallery-card span { position: absolute; z-index: 1; bottom: 13px; left: 13px; color: #fff; font-size: 15px; font-weight: 800; }
.gallery-card i { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #3bd183; margin-left: 6px; }
.bottom-nav { position: fixed; z-index: 25; left: 50%; bottom: 0; transform: translateX(-50%); width: min(100%, 460px); display: grid; grid-template-columns: repeat(4,1fr); padding: 11px 8px calc(10px + env(safe-area-inset-bottom)); background: rgba(255,255,255,.95); backdrop-filter: blur(20px); border-top: 1px solid var(--line); box-shadow: 0 -10px 35px rgba(74, 17, 42, .08); }
.nav-item { border: 0; background: transparent; color: #91848a; display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 11px; font-weight: 700; }
.nav-item svg { width: 25px; height: 25px; }
.nav-item.is-active { color: var(--berry); }
.nav-item.is-active svg { stroke-width: 2.4; }
.nav-icon { position: relative; display: grid; place-items: center; }
.nav-icon b { position: absolute; right: -11px; top: -8px; min-width: 18px; height: 18px; padding: 0 5px; display: grid; place-items: center; border-radius: 999px; color: #fff; background: var(--berry); border: 2px solid #fff; font-size: 9px; line-height: 1; }
.nav-icon b[hidden] { display: none; }
.tab-panel { display: none; }
.tab-panel.is-active { display: block; }
.empty-panel, .account-panel { min-height: 70vh; text-align: center; padding: 90px 16px 30px; }
.empty-icon, .account-avatar { width: 92px; height: 92px; margin: 0 auto 22px; display: grid; place-items: center; border-radius: 30px; color: var(--berry); background: #f5e4e6; font-size: 38px; }
.empty-panel h1, .account-panel h1 { font-size: 27px; margin: 0 0 8px; }
.empty-panel p, .account-panel p { color: var(--muted); line-height: 1.7; margin: 0 auto 22px; max-width: 280px; }
.empty-panel .button { width: 100%; }
.account-avatar { background: linear-gradient(135deg, #c21c53, #74102f); color: #fff; border-radius: 50%; font-size: 27px; font-weight: 900; }
.account-kicker { display: inline-block; margin-bottom: 9px; color: var(--berry); font-size: 11px; font-weight: 900; }
.account-continue { width: 100%; margin: 2px 0 17px; }
.settings-card { display: flex; justify-content: space-between; padding: 17px; background: #fff; border: 1px solid var(--line); border-radius: 16px; margin-top: 10px; text-align: left; }
.settings-card b { color: var(--green); font-size: 13px; }
.messages-panel { min-height: 70vh; padding: 38px 1px 30px; }
.messages-heading { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 18px; }
.messages-heading span { color: var(--berry); font-size: 12px; font-weight: 900; }
.messages-heading h1 { margin: 4px 0 0; font-size: 27px; }
.messages-heading i { font-style: normal; color: var(--muted); font-size: 11px; }
.message-card { width: 100%; display: grid; grid-template-columns: 60px 1fr auto; align-items: center; gap: 12px; border: 1px solid var(--line); border-radius: 20px; padding: 12px; margin-bottom: 10px; text-align: left; color: var(--plum); background: #fff; box-shadow: 0 8px 24px rgba(78, 21, 45, .06); }
.message-avatar { width: 60px; height: 60px; position: relative; }
.message-avatar img { width: 60px; height: 60px; display: block; object-fit: cover; border-radius: 18px; }
.message-avatar i { position: absolute; right: -2px; bottom: -2px; width: 13px; height: 13px; border-radius: 50%; background: #2bbb72; border: 3px solid #fff; }
.message-copy strong, .message-copy small { display: block; }
.message-copy strong { font-size: 15px; }
.message-copy small { margin-top: 7px; color: #5d4a52; font-size: 14px; font-weight: 700; }
.message-meta { align-self: stretch; display: flex; flex-direction: column; align-items: flex-end; justify-content: space-between; }
.message-meta time { color: var(--muted); font-size: 10px; }
.message-meta b { min-width: 22px; height: 22px; padding: 0 7px; display: grid; place-items: center; border-radius: 999px; color: #fff; background: var(--berry); font-size: 10px; }
.message-meta b[hidden] { display: none; }
.messages-note { margin: 16px 8px 0; color: var(--muted); font-size: 12px; text-align: center; }

dialog { max-width: none; }
.guide-dialog, .form-dialog { width: min(calc(100% - 22px), 430px); max-height: min(92dvh, 780px); border: 0; border-radius: 28px 28px 0 0; padding: 17px 18px calc(22px + env(safe-area-inset-bottom)); margin: auto auto 0; color: var(--plum); background: var(--cream); box-shadow: 0 -15px 60px rgba(49, 12, 29, .24); overflow-y: auto; }
.guide-dialog::backdrop, .form-dialog::backdrop { background: rgba(32, 9, 20, .55); backdrop-filter: blur(3px); }
.dialog-handle { width: 42px; height: 5px; border-radius: 999px; background: #dacdc7; margin: -5px auto 11px; }
.dialog-close { position: absolute; right: 15px; top: 16px; width: 34px; height: 34px; border: 0; border-radius: 50%; background: #f1e8e4; font-size: 23px; color: #59434c; }
.guide-head { text-align: center; padding: 4px 24px 13px; }
.guide-step { color: var(--berry); font-size: 11px; font-weight: 900; }
.guide-head h2 { margin: 7px 0 4px; font-size: 27px; }
.guide-head p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.5; }
.selected-mini { display: grid; grid-template-columns: 57px 1fr auto; align-items: center; gap: 11px; padding: 10px; background: #fff; border: 1px solid var(--line); border-radius: 18px; }
.selected-mini img { width: 57px; height: 57px; border-radius: 16px; object-fit: cover; }
.selected-mini strong, .selected-mini span { display: block; }
.selected-mini strong { font-size: 15px; }
.selected-mini span { color: var(--muted); font-size: 11px; margin-top: 3px; }
.selected-mini i { font-style: normal; color: var(--green); background: var(--green-soft); border-radius: 999px; padding: 5px 8px; font-size: 10px; font-weight: 800; }
.browser-instruction { padding: 13px 0 4px; }
.instruction-title { display: flex; align-items: center; gap: 8px; font-weight: 800; font-size: 14px; margin: 8px 0; }
.instruction-title b { width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; background: var(--berry); color: #fff; font-size: 12px; }
.browser-guide-image { display: block; width: 100%; height: auto; max-height: min(43dvh,390px); object-fit: contain; border: 1px solid #e5dcf5; border-radius: 18px; background: #f1f0ff; }
.fake-browser-bar { height: 43px; display: flex; align-items: center; justify-content: space-between; border-radius: 13px; background: #eee8e5; padding: 0 13px; color: #8a7c81; margin-bottom: 13px; }
.fake-browser-bar strong { width: 36px; height: 31px; display: grid; place-items: center; border: 3px solid var(--berry); border-radius: 50%; color: var(--plum); letter-spacing: 2px; }
.fake-menu { background: #fff; border: 1px solid #e7dfdb; border-radius: 15px; overflow: hidden; box-shadow: 0 8px 22px rgba(47, 19, 30, .1); }
.fake-menu > div { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; border-bottom: 1px solid #eee8e5; font-size: 13px; }
.fake-menu > div:last-child { border-bottom: 0; }
.fake-menu .safari-row { background: #e9f1ff; font-weight: 800; }
.safari-icon { font-style: normal; color: #198bf0; font-size: 18px; margin-right: 7px; }
.copy-button { width: 100%; margin-top: 9px; }
.copy-status { min-height: 18px; text-align: center; color: var(--muted); font-size: 11px; line-height: 1.5; }
.copy-status.is-success { color: var(--green); font-weight: 800; }
.copy-status.is-error { color: #b42318; }
.daily-limit-dialog { width: min(calc(100% - 34px),390px); border: 0; border-radius: 28px; padding: 30px 24px 24px; color: var(--plum); background: #fffaf8; box-shadow: 0 22px 70px rgba(49,12,29,.28); text-align: center; }
.daily-limit-dialog::backdrop { background: rgba(32,9,20,.5); backdrop-filter: blur(4px); }
.daily-limit-icon { width: 66px; height: 66px; display: grid; place-items: center; margin: 0 auto 12px; border-radius: 23px; color: #fff; background: linear-gradient(145deg,#ff7194,#b30943); box-shadow: 0 12px 28px rgba(179,9,67,.24); font-size: 35px; font-weight: 900; }
.daily-limit-dialog > span { color: var(--berry); font-size: 12px; font-weight: 900; }
.daily-limit-dialog h2 { margin: 8px 0; font-size: 24px; }
.daily-limit-dialog p { margin: 0 0 20px; color: var(--muted); font-size: 14px; line-height: 1.65; }
.daily-limit-dialog .button { width: 100%; }
.daily-limit-actions { display: grid; gap: 9px; }
.greeting-list-dialog { width: min(100%,460px); height: min(100dvh,820px); max-width: none; max-height: none; margin: auto; padding: 0 15px 22px; overflow-y: auto; border: 0; border-radius: 28px; color: var(--plum); background: #fff; box-shadow: 0 24px 80px rgba(40,14,25,.28); }
.greeting-list-dialog::backdrop { background: rgba(29,16,22,.45); }
.greeting-list-dialog > header { position: sticky; z-index: 2; top: 0; display: grid; grid-template-columns: 40px 1fr 40px; align-items: center; min-height: 70px; background: rgba(255,255,255,.96); }
.greeting-list-dialog > header button { width: 38px; height: 38px; border: 0; border-radius: 12px; color: var(--plum); background: #f4efed; font-size: 29px; }
.greeting-list-dialog > header h2 { margin: 0; text-align: center; font-size: 21px; }
.greeting-list-banner { display: flex; align-items: center; justify-content: space-between; min-height: 84px; padding: 15px 16px; border-radius: 19px; background: linear-gradient(120deg,#ffe0b5,#ffc5a8); }
.greeting-list-banner span { font-size: 17px; font-weight: 900; }.greeting-list-banner b { color: #ee8c84; }
.greeting-list-banner small { display: block; margin-top: 6px; color: #9b6c64; font-size: 11px; font-weight: 600; }
.greeting-list-banner button { padding: 10px 13px; border: 0; border-radius: 13px; color: #c5574c; background: #fff; font-size: 12px; font-weight: 800; box-shadow: 0 3px 10px rgba(151,73,63,.12); }
.greeting-list-filters { display: grid; grid-template-columns: repeat(4,1fr); gap: 4px; padding: 20px 0 11px; text-align: center; }
.greeting-list-filters button { min-width: 0; padding: 8px 2px; border: 1px solid transparent; border-radius: 10px; color: var(--plum); background: transparent; font-size: 12px; font-weight: 800; }
.greeting-list-filters button::after { content: "⌄"; margin-left: 2px; font-size: 10px; }
.greeting-list-filters button.is-active { border-color: #f3c8d3; color: var(--brand); background: #fff5f7; }
.greeting-list-dialog > p { margin: 0 0 13px; color: #a18f96; font-size: 11px; text-align: center; }
.greeting-list-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 11px; }
.greeting-list-grid > button { min-width: 0; padding: 0; overflow: hidden; position: relative; border: 0; border-radius: 17px; color: #fff; background: #eee; text-align: left; box-shadow: 0 7px 20px rgba(69,23,43,.12); }
.greeting-list-grid img { width: 100%; aspect-ratio: .78; display: block; object-fit: cover; }
.greeting-list-grid button > span { position: absolute; left: 0; right: 0; bottom: 0; padding: 38px 10px 10px; background: linear-gradient(transparent,rgba(26,12,19,.78)); }
.greeting-list-grid strong,.greeting-list-grid small { display: block; }.greeting-list-grid strong { font-size: 14px; }.greeting-list-grid small { margin-top: 5px; font-size: 10px; font-weight: 600; }
.greeting-list-grid small i { display: inline-block; width: 7px; height: 7px; margin-right: 4px; border-radius: 50%; background: #35d17d; }
.greeting-list-grid small.is-today { color: #b9b2b5; }
.greeting-list-grid small.is-today i { background: #9b9698; }
.greeting-list-grid small.is-online { color: #149456; font-weight: 800; }
.greeting-list-grid .greeting-list-empty { grid-column: 1 / -1; margin: 38px 12px; color: #9d8a92; text-align: center; font-size: 13px; line-height: 1.7; }
.greeting-list-dialog.is-like-list > p { margin: 4px 0 16px; }
.greeting-list-dialog.is-like-list [hidden] { display: none !important; }
.greeting-list-dialog.is-like-list .greeting-list-grid { grid-template-columns: 1fr; gap: 0; }
.greeting-list-dialog.is-like-list .greeting-list-grid > button { min-height: 96px; display: grid; grid-template-columns: 72px 1fr; align-items: center; gap: 13px; padding: 12px 4px; overflow: visible; border-bottom: 1px solid #eee5e8; border-radius: 0; color: var(--plum); background: #fff; box-shadow: none; }
.greeting-list-dialog.is-like-list .greeting-list-grid > button:last-child { border-bottom: 0; }
.greeting-list-dialog.is-like-list .greeting-list-grid img { width: 72px; height: 72px; aspect-ratio: 1; border-radius: 50%; object-fit: cover; }
.greeting-list-dialog.is-like-list .greeting-list-grid button > span { position: static; min-width: 0; padding: 0 8px 0 0; background: none; }
.greeting-list-dialog.is-like-list .greeting-list-grid strong { font-size: 16px; }
.greeting-list-dialog.is-like-list .greeting-list-grid small { display: inline-flex; align-items: center; margin-top: 5px; color: #168d55; font-size: 11px; }
.greeting-list-dialog.is-like-list .greeting-list-grid small.is-recent { color: #d98920; }
.greeting-list-dialog.is-like-list .greeting-list-grid small.is-hour { color: #91888c; }
.greeting-list-dialog.is-like-list .greeting-list-grid small.is-recent i { background: #f0a43a; }
.greeting-list-dialog.is-like-list .greeting-list-grid small.is-hour i { background: #aaa1a5; }
.greeting-list-dialog.is-like-list .greeting-list-grid span > b { display: block; overflow: hidden; margin-top: 6px; color: #817278; font-size: 11px; font-weight: 500; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.greeting-list-dialog.is-like-list .greeting-list-grid span > u { display: block; margin-top: 5px; color: var(--berry); font-size: 11px; font-weight: 800; text-decoration: none; }
.greeting-profile-dialog { width: min(calc(100% - 34px),390px); border: 0; border-radius: 28px; padding: 24px; color: var(--plum); background: #fffaf8; box-shadow: 0 22px 70px rgba(49,12,29,.28); text-align: center; }
.greeting-profile-dialog::backdrop { background: rgba(32,9,20,.5); backdrop-filter: blur(4px); }
.greeting-profile-photo { width: 132px; height: 132px; position: relative; margin: 7px auto 15px; }
.greeting-profile-photo img { width: 100%; height: 100%; display: block; object-fit: cover; border-radius: 32px; box-shadow: 0 12px 30px rgba(77,25,48,.18); }
.greeting-profile-photo i { position: absolute; right: -9px; bottom: 8px; padding: 5px 9px; border: 3px solid #fffaf8; border-radius: 999px; color: #fff; background: #24b76c; font-size: 10px; font-style: normal; font-weight: 800; }
.greeting-profile-photo i.is-offline { background: #9b9698; }
.greeting-profile-dialog h2 { margin: 0; font-size: 25px; }
.greeting-profile-location { margin: 7px 0 14px; color: var(--muted); font-size: 12px; }
.greeting-profile-tags { display: flex; justify-content: center; flex-wrap: wrap; gap: 7px; }
.greeting-profile-tags span { padding: 6px 10px; border: 1px solid #efcbd5; border-radius: 999px; color: var(--berry); background: #fff; font-size: 11px; font-weight: 800; }
.greeting-profile-intro { margin: 15px 0 19px; color: #5d4a52; font-size: 13px; line-height: 1.65; }
.greeting-profile-gallery { display: grid; grid-template-columns: repeat(3,1fr); gap: 7px; margin: 0 0 18px; }.greeting-profile-gallery button { min-width: 0; aspect-ratio: .72; display: grid; place-items: center; padding: 0; overflow: hidden; border: 2px solid transparent; border-radius: 12px; background: #f3ece9; }.greeting-profile-gallery button.is-active { border-color: var(--berry); }.greeting-profile-gallery img { width: 100%; height: 100%; display: block; object-fit: contain; background: #f3ece9; }
.greeting-profile-dialog .button { width: 100%; }
.greeting-profile-dialog.is-column-profile { width: min(100%,460px); height: min(calc(100dvh - 18px),900px); max-height: none; margin: auto; padding: 18px 16px calc(24px + env(safe-area-inset-bottom)); overflow-y: auto; border-radius: 28px; text-align: left; }
.greeting-profile-dialog.is-column-profile > .dialog-close { position: sticky; z-index: 5; top: 0; float: right; margin-bottom: -42px; }
.greeting-profile-dialog.is-column-profile .greeting-profile-photo { width: 100%; height: auto; margin: 0 0 20px; clear: both; }
.greeting-profile-dialog.is-column-profile .greeting-profile-photo img { width: 100%; height: auto; max-height: none; border-radius: 24px; object-fit: contain; }
.greeting-profile-dialog.is-column-profile .greeting-profile-photo i { right: 12px; bottom: 12px; }
.greeting-profile-dialog.is-column-profile h2 { font-size: 28px; text-align: left; }
.greeting-profile-dialog.is-column-profile .greeting-profile-location { margin: 7px 0 20px; text-align: left; }
.greeting-profile-section-title { margin: 20px 0 10px; color: var(--plum); font-size: 15px; text-align: left; }
.greeting-profile-dialog.is-column-profile .greeting-profile-tags { justify-content: flex-start; }
.greeting-profile-dialog.is-column-profile .greeting-profile-intro { margin: 0; padding: 15px; border-radius: 16px; background: #fff; text-align: left; }
.greeting-profile-dialog.is-column-profile .greeting-profile-gallery { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; margin-bottom: 22px; }
.greeting-profile-dialog.is-column-profile .greeting-profile-gallery button { width: 100%; height: auto; aspect-ratio: .78; overflow: hidden; border: 0; border-radius: 14px; background: #f3ece9; }
.greeting-profile-dialog.is-column-profile .greeting-profile-gallery img { width: 100%; height: 100%; border-radius: 14px; object-fit: cover; object-position: center; background: #f3ece9; }
.greeting-profile-dialog.is-column-profile #greetingProfileChat { min-height: 54px; font-size: 17px; }
.profile-photo-viewer { position: fixed; inset: 0; z-index: 30; display: grid; place-items: center; padding: 54px 16px 24px; background: rgba(18,7,13,.88); }
.profile-photo-viewer[hidden] { display: none; }
.profile-photo-viewer img { width: auto; max-width: min(92vw,680px); height: auto; max-height: 82vh; display: block; border-radius: 18px; object-fit: contain; box-shadow: 0 18px 60px rgba(0,0,0,.45); }
.profile-photo-viewer-close { position: absolute; top: max(16px,env(safe-area-inset-top)); right: 18px; width: 40px; height: 40px; border: 0; border-radius: 50%; color: #2f1721; background: rgba(255,250,248,.94); font-size: 28px; line-height: 1; }
.profile-photo-nav { position: absolute; z-index: 2; top: 50%; width: 44px; height: 56px; display: grid; place-items: center; border: 0; border-radius: 15px; color: #351523; background: rgba(255,250,248,.9); box-shadow: 0 6px 22px rgba(0,0,0,.24); font-size: 38px; line-height: 1; transform: translateY(-50%); }
.profile-photo-nav.is-prev { left: 12px; }
.profile-photo-nav.is-next { right: 12px; }
.profile-photo-nav[hidden] { display: none; }
.form-dialog form { display: grid; gap: 12px; }
.form-dialog label { color: #5d4750; font-size: 12px; font-weight: 800; }
.form-dialog input, .form-dialog select { width: 100%; height: 48px; border: 1px solid #e5d8d2; border-radius: 13px; background: #fff; padding: 0 13px; margin-top: 6px; color: var(--plum); outline: none; }
.form-dialog input:focus, .form-dialog select:focus { border-color: var(--berry); box-shadow: 0 0 0 3px rgba(167,15,63,.08); }
.phone-field { display: grid; grid-template-columns: 64px 1fr; gap: 7px; align-items: end; }
.phone-field span { height: 48px; margin-top: 6px; display: grid; place-items: center; background: #f1e8e4; border-radius: 13px; color: var(--plum); }
.form-error { min-height: 18px; margin: -3px 0 0; color: #b42318; font-size: 11px; }
.form-success { text-align: center; padding: 35px 10px; }
.form-success span { width: 64px; height: 64px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: var(--green); font-size: 30px; margin: 0 auto 16px; }
.form-success h3 { font-size: 24px; margin: 0 0 7px; }
.form-success p { color: var(--muted); }
.safari-account { padding: 25px 0 14px; }
.safari-account.is-dashboard { padding-top: 4px; }
.account-dashboard-hero { padding-top: 0; padding-bottom: 12px; }
.account-dashboard-hero h1 { margin-top: 0; }
.auth-hero { text-align: center; padding: 3px 15px 20px; }
.auth-hero .status-pill { display: inline-flex; align-items: center; gap: 6px; padding: 7px 11px; border-radius: 999px; color: var(--green); background: var(--green-soft); font-size: 11px; font-weight: 900; }
.auth-hero h1 { margin: 13px 0 7px; font-size: 28px; }
.auth-hero p { max-width: 320px; margin: 0 auto; color: var(--muted); font-size: 13px; line-height: 1.65; }
.auth-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; padding: 5px; margin-bottom: 14px; border-radius: 15px; background: #f2e8e3; }
.auth-tabs button { height: 39px; border: 0; border-radius: 11px; color: var(--muted); background: transparent; font-size: 13px; font-weight: 800; }
.auth-tabs button.is-active { color: var(--berry); background: #fff; box-shadow: 0 4px 12px rgba(61,19,37,.08); }
.auth-card { padding: 16px; border: 1px solid var(--line); border-radius: 23px; background: #fff; box-shadow: 0 12px 30px rgba(74,17,42,.08); }
.avatar-upload { display: flex; flex-direction: column; align-items: center; gap: 8px; margin: 1px auto 17px; cursor: pointer; }
.avatar-upload input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.avatar-preview { width: 92px; height: 92px; display: grid; place-items: center; overflow: hidden; border: 3px solid #fff; border-radius: 50%; color: var(--berry); background: #f5e2e8; box-shadow: 0 0 0 2px #edd2dc, 0 10px 24px rgba(87,20,49,.14); font-size: 30px; font-weight: 900; position: relative; }
.avatar-preview img { width: 100%; height: 100%; object-fit: cover; }
.avatar-preview b { position: absolute; right: 0; bottom: 1px; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: var(--berry); border: 2px solid #fff; font-size: 17px; }
.avatar-upload > span { color: var(--berry); font-size: 12px; font-weight: 800; }
.photo-tip { margin: -3px 0 2px; padding: 10px 11px; border-radius: 13px; color: #715d65; background: #fff6e8; font-size: 10px; line-height: 1.55; text-align: left; }
.photo-tip b { color: #a55d14; margin-right: 5px; }
.auth-form { display: grid; gap: 12px; }
.auth-form label { color: #59434c; font-size: 12px; font-weight: 800; text-align: left; }
.auth-form input, .auth-form select { width: 100%; height: 48px; margin-top: 6px; padding: 0 13px; border: 1px solid #e7dad4; border-radius: 13px; color: var(--plum); background: #fff; outline: none; }
.auth-form input:focus, .auth-form select:focus { border-color: var(--berry); box-shadow: 0 0 0 3px rgba(167,15,63,.08); }
.auth-row { display: grid; grid-template-columns: .9fr 1.1fr; gap: 9px; }
.auth-form .button { width: 100%; margin-top: 2px; }
.auth-help { display: flex; align-items: flex-start; gap: 8px; margin: 14px 2px 0; color: var(--muted); font-size: 10px; line-height: 1.55; }
.auth-help b { flex: 0 0 auto; width: 19px; height: 19px; display: grid; place-items: center; border-radius: 50%; color: var(--green); background: var(--green-soft); }
.auth-error { min-height: 16px; margin: -3px 0 0; color: #b42318; font-size: 11px; }
.saved-account { text-align: center; padding: 14px 12px 15px; }
.saved-account .saved-avatar { width: 96px; height: 96px; display: grid; place-items: center; margin: 0 auto 14px; overflow: hidden; border-radius: 50%; color: #fff; background: linear-gradient(135deg,#c21c53,#74102f); font-size: 30px; font-weight: 900; }
.saved-account .saved-avatar img { width: 100%; height: 100%; object-fit: cover; }
.account-avatar-progress { position: relative; width: 104px; margin: 0 auto 18px; padding-bottom: 8px; }
.account-avatar-progress .saved-avatar { margin: 0 auto; }
.account-progress-pill { position: absolute; left: 50%; bottom: 0; min-width: 58px; height: 24px; display: grid; place-items: center; padding: 0 9px; border: 3px solid #fff; border-radius: 999px; color: #fff; background: linear-gradient(135deg,#ff922e,#e96c17); box-shadow: 0 5px 13px rgba(218,103,23,.2); font-size: 10px; font-weight: 900; transform: translateX(-50%); }
.account-avatar-editor { display: grid; justify-items: center; margin: 0 auto 11px; cursor: pointer; }.account-avatar-editor input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.account-avatar-editor .saved-avatar { position: relative; margin-bottom: 7px; }.account-avatar-editor .saved-avatar b { position: absolute; right: 1px; bottom: 1px; width: 28px; height: 28px; display: grid; place-items: center; border: 2px solid #fff; border-radius: 50%; color: #fff; background: var(--berry); font-size: 14px; }
.account-avatar-editor > b { color: var(--berry); font-size: 11px; }
.saved-name-edit { display: flex; align-items: center; justify-content: center; gap: 8px; }.saved-name-edit h2 { margin: 0; }.saved-name-edit button { padding: 4px 8px; border: 1px solid #ebcad4; border-radius: 999px; color: var(--berry); background: #fff7f9; font-size: 10px; font-weight: 800; }
.nickname-edit-form { display: flex; gap: 7px; margin: 10px 0 12px; }.nickname-edit-form[hidden] { display: none; }.nickname-edit-form input { min-width: 0; flex: 1; height: 39px; padding: 0 10px; border: 1px solid var(--line); border-radius: 11px; outline: 0; }.nickname-edit-form button { padding: 0 13px; border: 0; border-radius: 11px; color: #fff; background: var(--berry); font-weight: 800; }
.saved-account h2 { margin: 0 0 5px; font-size: 23px; }
.saved-account > p { margin: 0 0 17px; color: var(--muted); font-size: 12px; }
.saved-account .account-bio { max-width: 285px; min-height: 28px; display: flex; align-items: center; justify-content: center; gap: 5px; margin: 0 auto 11px; line-height: 1.5; }
.account-bio button { width: 27px; height: 27px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; color: var(--berry); background: #fff1f5; font-size: 13px; }
.profile-stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 7px; margin: 0 12px 16px; }
.profile-stats div { min-width: 0; padding: 13px 5px 11px; border: 1px solid #f0e0e4; border-radius: 15px; background: #fff8f8; }
.profile-stats strong, .profile-stats span { display: block; }
.profile-stats strong { color: var(--berry); font-size: 20px; }
.profile-stats span { margin-top: 4px; color: var(--muted); font-size: 9px; line-height: 1.35; }
.saved-account .profile-stats { grid-template-columns: repeat(4,1fr); gap: 0; margin: 0 0 17px; }
.saved-account .profile-stats div { padding: 8px 2px; border: 0; border-right: 1px solid var(--line); border-radius: 0; background: transparent; }
.saved-account .profile-stats div:last-child { border-right: 0; }
.saved-account .profile-stats strong { color: var(--plum); font-size: 19px; }
.saved-account .profile-stats .nearby-stat { display: grid; justify-items: center; align-content: start; padding-top: 4px; }
.saved-account .nearby-stat > strong { font-size: 16px; line-height: 1.15; }
.nearby-avatar-stack { height: 20px; display: flex !important; align-items: center; justify-content: center; margin: 2px 0 -1px !important; }
.nearby-avatar-stack img { width: 20px; height: 20px; display: block; margin-left: -6px; border: 2px solid #fff; border-radius: 50%; object-fit: cover; object-position: center 18%; background: #eee; }
.nearby-avatar-stack img:first-child { margin-left: 0; }
.account-facts { display: grid; gap: 8px; margin-bottom: 15px; text-align: left; }
.account-facts div,.account-facts button { width: 100%; display: flex; justify-content: space-between; gap: 10px; padding: 12px 13px; border: 0; border-radius: 13px; color: var(--plum); background: #f8f2ef; font-size: 12px; text-align: left; }
.account-facts span { color: var(--muted); }
.account-facts strong { max-width: 62%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.auth-secondary { width: 100%; height: 44px; border: 0; border-radius: 14px; color: var(--berry); background: #f4e5e8; font-weight: 800; }
.account-photo-zone { padding: 13px; border: 1px solid #f0dfe4; border-radius: 18px; background: linear-gradient(145deg,#fff9fa,#fff3f6); }
.account-photos-head { display: flex; align-items: center; justify-content: space-between; margin: 0 1px 11px; text-align: left; }
.account-photos-head strong,.account-photos-head small { display: block; }.account-photos-head strong { color: var(--plum); font-size: 14px; }.account-photos-head small { margin-top: 3px; color: var(--muted); font-size: 9px; font-weight: 500; }.account-photos-head > span { padding: 4px 7px; border-radius: 999px; color: var(--berry); background: #fff; font-size: 10px; font-weight: 800; }
.account-photo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }
.account-photo-item,.account-photo-upload,.account-photo-placeholder { aspect-ratio: 1; position: relative; overflow: hidden; margin: 0; border-radius: 15px; background: #fff; }
.account-photo-item img { width: 100%; height: 100%; object-fit: cover; }
.account-photo-item button { position: absolute; top: 5px; right: 5px; width: 24px; height: 24px; display: grid; place-items: center; border: 0; border-radius: 50%; color: #fff; background: rgba(42,18,28,.72); font-size: 17px; }
.account-photo-upload { display: grid; place-content: center; gap: 3px; border: 1.5px dashed #d9b6c2; color: var(--berry); cursor: pointer; }
.account-photo-upload input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.account-photo-upload b { font-size: 32px; line-height: 1; }.account-photo-upload span { font-size: 10px; font-weight: 800; }
.account-photo-placeholder { display: grid; place-content: center; gap: 4px; border: 1px dashed #eadce1; color: #d8c4cb; }
.account-photo-placeholder b { font-size: 25px; font-weight: 400; }.account-photo-placeholder small { font-size: 8px; }
.account-info-settings { width: 100%; display: grid; grid-template-columns: repeat(2,1fr); gap: 9px; margin-top: 13px; padding: 0; border: 0; background: transparent; text-align: left; }
.account-info-settings > span { min-width: 0; display: grid; grid-template-columns: 28px 1fr; grid-template-rows: auto auto; column-gap: 8px; padding: 10px; border: 1px solid #eee0e4; border-radius: 15px; background: #fff; box-shadow: 0 5px 14px rgba(62,17,37,.05); }
.account-info-settings i { grid-row: 1 / 3; width: 28px; height: 28px; display: grid; place-items: center; align-self: center; border-radius: 9px; background: #fff0f4; font-size: 13px; font-style: normal; }.account-info-settings small { color: var(--muted); font-size: 9px; }.account-info-settings strong { min-width: 0; overflow: hidden; margin-top: 2px; color: var(--plum); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.account-completion-card { width: 100%; min-height: 66px; display: grid; grid-template-columns: 38px 1fr auto; align-items: center; gap: 10px; margin-top: 20px; padding: 10px 12px; border: 0; border-radius: 17px; color: #fff; background: linear-gradient(135deg,#bc124b,#8d0a37); text-align: left; box-shadow: 0 10px 22px rgba(164,12,62,.18); }
.account-completion-card i { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 12px; background: rgba(255,255,255,.16); font-size: 18px; font-style: normal; }.account-completion-card span strong,.account-completion-card span small { display: block; }.account-completion-card span strong { font-size: 12px; }.account-completion-card span small { margin-top: 4px; color: rgba(255,255,255,.78); font-size: 9px; }.account-completion-card > b { font-size: 10px; white-space: nowrap; }

/* Reference-inspired app layout: original colors/assets, no mini-games. */
body.active-discover .topbar { display: none; }
.explore-head { position: relative; z-index: 12; display: flex; align-items: center; justify-content: space-between; padding: 18px 1px 12px; background: var(--cream); }
.explore-tabs { display: flex; align-items: center; gap: 20px; }
.explore-tabs button { border: 0; padding: 0; color: #aaa0a4; background: transparent; font-size: 20px; font-weight: 800; }
.explore-tabs button.is-active { color: var(--plum); font-size: 25px; }
.explore-tools { display: flex; gap: 7px; }
.explore-tools button, .square-tool { position: relative; width: 40px; height: 40px; display: grid; place-items: center; border: 0; border-radius: 12px; color: #8d8588; background: #f3f1f0; font-size: 19px; font-weight: 900; }
.explore-tools button i { position: absolute; top: 4px; right: 4px; width: 7px; height: 7px; border-radius: 50%; background: #ff5268; }
.home-verify-banner { position: relative; z-index: 11; width: 100%; min-height: 48px; display: grid; grid-template-columns: 25px 1fr auto; align-items: center; gap: 8px; margin: 0 0 13px; padding: 8px 10px; border: 0; border-radius: 13px; color: #16617d; background: #a9ecfa; text-align: left; }
.home-verify-banner span { width: 23px; height: 23px; display: grid; place-items: center; border-radius: 8px; color: #fff; background: #2697bd; font-size: 12px; font-weight: 900; }
.home-verify-banner strong { font-size: 12px; }
.home-verify-banner b { padding: 6px 9px; border-radius: 9px; color: #1680a5; background: #fff; font-size: 11px; }
.feature-card { height: clamp(430px, calc(100dvh - 285px), 600px); border-radius: 25px; }
.story-progress { position: absolute; z-index: 5; left: 17px; right: 17px; top: 13px; display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 7px; }
.story-progress i { height: 3px; border-radius: 9px; background: rgba(255,255,255,.48); box-shadow: 0 1px 2px rgba(0,0,0,.18); }
.story-progress i:first-child { background: #fff; }
.profile-summary .profile-quote { max-width: calc(100% - 34px); margin: 13px 0 0; color: rgba(255,255,255,.92); font-size: 13px; line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.swipe-actions { position: relative; z-index: 4; gap: 31px; margin: 30px 0 8px; padding-bottom: 4px; }
.round-action.like > span, .round-action.super > span { width: 64px; height: 64px; margin: -5px -5px 0; border: 0; background: #fff; box-shadow: 0 9px 24px rgba(65,17,38,.18); font-size: 29px; }
.round-action.like > span { color: #ff3e79; }
.round-action.super > span { color: #169fef; font-size: 31px; }
.round-action.like small { color: var(--berry); }
.round-action.super small { margin-top: 1px; color: #169fef; }
.round-action.super.is-drag-lit > span { color: #fff; background: #19a8f2; border-color: #19a8f2; box-shadow: 0 0 0 7px rgba(25,168,242,.17),0 10px 25px rgba(25,168,242,.34); transform: scale(1.08); }
.profile-details .button { width: 100%; margin-top: 13px; }
.bottom-nav { grid-template-columns: repeat(5,1fr); }

.nearby-panel { min-height: 76vh; padding: 28px 0 20px; }
.page-title-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 17px; }
.page-title-row > div { display: flex; align-items: baseline; gap: 8px; }
.page-title-row span { color: var(--berry); font-size: 11px; font-weight: 900; }
.page-title-row h1 { margin: 0; font-size: 28px; }
.nearby-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.nearby-grid button { overflow: hidden; padding: 0 0 11px; border: 1px solid var(--line); border-radius: 20px; color: var(--plum); background: #fff; text-align: left; }
.nearby-grid img { width: 100%; aspect-ratio: .84; display: block; object-fit: cover; }
.nearby-grid strong, .nearby-grid small { display: block; padding: 0 11px; }
.nearby-grid strong { margin-top: 9px; font-size: 14px; }.nearby-grid small { margin-top: 4px; color: var(--green); font-size: 10px; }
.nearby-grid small.is-recent { color: #d98920; }.nearby-grid small.is-hour { color: #9c9297; }
.nearby-more-button { display: block; min-width: 132px; min-height: 42px; margin: 20px auto 4px; padding: 0 22px; border: 1px solid #eadbd8; border-radius: 999px; color: var(--berry); background: #fff; font-size: 14px; font-weight: 800; }
.nearby-more-button:active { transform: scale(.98); background: #fff4f7; }

.messages-panel { padding: 27px 1px 30px; }
.app-list-heading { align-items: center; }
.app-list-heading h1 { margin: 0; font-size: 29px; }.app-list-heading > div { display: flex; gap: 8px; }
.match-filter-button { height: 40px; padding: 0 12px; border: 0; border-radius: 12px; color: var(--muted); background: #f3f1f0; font-size: 12px; font-weight: 800; }
.matches-label { margin: 15px 0 12px; font-size: 17px; }
.message-search { height: 42px; display: grid; grid-template-columns: 25px 1fr 28px; align-items: center; gap: 4px; margin: -7px 0 14px; padding: 0 9px; border: 1px solid #eadde1; border-radius: 13px; background: #fff; }
.message-search[hidden] { display: none; }
.message-search span { color: #9d9196; font-size: 18px; }.message-search input { min-width: 0; height: 38px; border: 0; outline: 0; color: var(--plum); background: transparent; font-size: 13px; }
.message-search button { width: 26px; height: 26px; border: 0; border-radius: 50%; color: #8f8589; background: #f3efef; font-size: 17px; }
.match-strip { display: flex; gap: 16px; min-height: 93px; overflow-x: auto; padding-bottom: 15px; border-bottom: 1px solid var(--line); scrollbar-width: none; }
.match-strip::-webkit-scrollbar { display: none; }
.match-strip button { width: 66px; border: 0; padding: 0; color: var(--plum); background: transparent; }
.match-strip button > span { position: relative; width: 64px; height: 64px; display: grid; place-items: center; border-radius: 22px; background: #f7f4f3; }
.match-strip img { width: 64px; height: 64px; border-radius: 22px; object-fit: cover; }
.match-strip i { position: absolute; right: -2px; bottom: -2px; width: 12px; height: 12px; border: 3px solid #fff; border-radius: 50%; background: #2ed36f; }
.match-strip small { display: block; margin-top: 6px; font-size: 10px; }.empty-match span { color: #b6adb0; font-size: 24px; }
.message-filters { display: flex; gap: 7px; overflow: auto; padding: 14px 0 11px; scrollbar-width: none; }
.message-filters button { flex: 0 0 auto; height: 31px; padding: 0 11px; border: 1px solid var(--line); border-radius: 10px; color: #a09599; background: #fff; font-size: 10px; }
.message-filters button.is-active { color: var(--berry); border-color: #e7aabc; background: #fff5f7; }
.verify-banner { width: 100%; display: grid; grid-template-columns: 24px 1fr auto; align-items: center; gap: 7px; margin-bottom: 12px; padding: 11px; border: 0; border-radius: 13px; color: #494044; background: #f4f2f1; text-align: left; }
.verify-banner[hidden] { display: none; }
.verify-banner span { width: 22px; height: 22px; display: grid; place-items: center; border-radius: 7px; color: #fff; background: #333; font-size: 11px; }.verify-banner strong { font-size: 11px; }.verify-banner b { color: #d39032; font-size: 11px; }
.message-card { border: 0; border-radius: 0; padding: 10px 0; margin: 0; box-shadow: none; }
.message-card[hidden],.system-message[hidden],.messages-empty[hidden] { display: none; }
.message-copy strong { font-size: 13px; }.message-copy small { font-size: 12px; font-weight: 500; }.message-copy small b { color: #ef8124; }
.message-verified-badge { display: inline-flex; align-items: center; margin-left: 6px; padding: 2px 6px; border-radius: 999px; color: #1687d8; background: #e9f6ff; font-size: 9px; font-weight: 800; vertical-align: middle; }
.nearby-verified, .greeting-verified { color: #1687d8; font-size: 10px; font-style: normal; white-space: nowrap; }
.message-copy { min-width: 0; }
.message-copy small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.system-message { width: 100%; display: grid; grid-template-columns: 60px 1fr auto; align-items: center; gap: 12px; padding: 10px 0; border: 0; color: var(--plum); background: transparent; text-align: left; }
.system-message > span { width: 60px; height: 60px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: #f1b800; font-weight: 900; }.system-message strong small { display: block; margin-top: 6px; color: var(--muted); font-size: 11px; font-weight: 500; }.system-message time { color: var(--muted); font-size: 10px; }
.system-message .message-meta { width: auto; height: auto; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; color: inherit; background: transparent; }
.system-message .message-meta b { min-width: 20px; height: 20px; display: grid; place-items: center; border-radius: 999px; color: #fff; background: var(--berry); font-size: 10px; box-shadow: 0 3px 10px rgba(178,10,67,.25); }
.system-message .message-meta b[hidden] { display: none; }
.messages-empty { min-height: 180px; display: grid; place-items: center; align-content: center; gap: 7px; color: var(--muted); text-align: center; }
.messages-empty > span { font-size: 35px; color: #d9cbd0; }.messages-empty strong { color: var(--plum); font-size: 15px; }.messages-empty small { font-size: 11px; }

.ai-chat-dialog { width: min(100%,460px); height: min(100dvh,820px); max-width: none; max-height: none; margin: auto; padding: 0; overflow: hidden; border: 0; border-radius: 28px; color: var(--plum); background: #fffaf7; box-shadow: 0 24px 80px rgba(40,14,25,.28); }
.ai-chat-dialog::backdrop { background: rgba(29,16,22,.45); }
.ai-chat-header { display: grid; grid-template-columns: 38px 44px 1fr; align-items: center; gap: 10px; padding: 14px 15px; border-bottom: 1px solid var(--line); background: rgba(255,255,255,.94); }
.ai-chat-header > button { width: 36px; height: 36px; border: 0; border-radius: 12px; color: var(--plum); background: #f4efed; font-size: 29px; }
.ai-chat-header > .ai-chat-profile-open { width: 44px; height: 44px; padding: 0; overflow: hidden; border-radius: 50%; background: transparent; }
.ai-chat-header img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
.ai-chat-header strong,.ai-chat-header span { display: block; }.ai-chat-header strong { font-size: 15px; }.ai-chat-header span { margin-top: 3px; color: var(--muted); font-size: 10px; }.ai-chat-header i { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #29c775; }
.ai-chat-header .ai-chat-status { display: flex; align-items: center; gap: 4px; min-height: 15px; }
.ai-chat-status b { font-weight: 500; }
.ai-chat-status em { display: none; align-items: center; gap: 3px; margin-left: 1px; }
.ai-chat-status.is-typing em { display: inline-flex; }
.ai-chat-status u { width: 3px; height: 3px; border-radius: 50%; background: currentColor; animation: typingDot .75s infinite alternate; }
.ai-chat-status u:nth-child(2) { animation-delay: .16s; }.ai-chat-status u:nth-child(3) { animation-delay: .32s; }
.ai-chat-messages { height: calc(100% - 176px); overflow-y: auto; padding: 20px 15px; }
.chat-system-notice { display: flex; align-items: center; justify-content: center; gap: 7px; margin: 15px 18px; padding: 10px 12px; border-radius: 13px; color: #8b5368; background: #f9eaf0; text-align: center; font-size: 11px; line-height: 1.45; }.chat-system-notice span { flex: 0 0 auto; width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: var(--berry); }.chat-system-notice p { margin: 0; }
.chat-bubble { width: fit-content; max-width: 78%; margin: 0 0 10px; padding: 11px 13px; border-radius: 17px 17px 17px 5px; background: #f0e9e7; font-size: 13px; line-height: 1.5; }
.chat-bubble.is-user { margin-left: auto; border-radius: 17px 17px 5px 17px; color: #fff; background: linear-gradient(135deg,#c51652,#9e0d3e); }
.chat-bubble small { display: block; margin-top: 4px; opacity: .6; font-size: 8px; }
@keyframes typingDot { to { opacity: .25; transform: translateY(-3px); } }
.ai-quick-replies { display: flex; gap: 7px; overflow-x: auto; padding: 6px 12px; scrollbar-width: none; }
.ai-quick-replies button { flex: 0 0 auto; padding: 8px 11px; border: 1px solid #e7ccd5; border-radius: 999px; color: var(--berry); background: #fff; font-size: 10px; }
.ai-chat-compose { display: grid; grid-template-columns: 1fr 62px; gap: 8px; padding: 9px 12px calc(9px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: #fff; }
.ai-chat-compose input { min-width: 0; height: 42px; padding: 0 14px; border: 1px solid var(--line); border-radius: 14px; outline: 0; background: #faf7f5; }
.ai-chat-compose button { border: 0; border-radius: 14px; color: #fff; background: var(--berry); font-weight: 800; }

.likes-panel { min-height: 73vh; padding: 24px 5px 30px; text-align: center; }
.likes-kicker { display: inline-block; padding: 7px 11px; border-radius: 999px; color: var(--berry); background: #f7e7ec; font-size: 10px; font-weight: 900; }
.likes-panel h1 { margin: 13px 0 7px; font-size: 27px; }.likes-panel h1 strong { color: var(--berry); }
.likes-panel > p { max-width: 300px; margin: 0 auto 25px; color: var(--muted); font-size: 12px; line-height: 1.65; }
.blurred-likes { display: flex; justify-content: center; align-items: center; min-height: 145px; margin-bottom: 24px; }
.blurred-like { position: relative; width: 118px; height: 142px; overflow: hidden; margin: 0 -8px; padding: 0; border: 5px solid var(--cream); border-radius: 29px; color: #fff; background: #eadfe2; box-shadow: 0 12px 30px rgba(73,17,41,.16); transform: rotate(-5deg); }
.blurred-like:nth-child(2) { transform: rotate(5deg); }
.blurred-like img { width: 100%; height: 100%; object-fit: cover; filter: blur(8px); transform: scale(1.12); }
.blurred-like span { position: absolute; inset: 0; display: grid; place-content: end center; gap: 2px; padding: 12px 7px; color: #fff; background: rgba(86,32,52,.2); font-size: 28px; text-shadow: 0 2px 8px rgba(0,0,0,.25); }
.blurred-like span b { font-size: 13px; }.blurred-like span small { font-size: 9px; font-weight: 700; }
.blurred-likes.is-revealed .blurred-like img { filter: none; transform: scale(1.02); }
.blurred-likes.is-revealed .blurred-like span { background: linear-gradient(180deg, transparent 62%, rgba(50,15,29,.34)); }
.likes-panel .button { width: 100%; }
.incoming-likes { margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--line); }
.incoming-likes > span { display: inline-block; padding: 6px 10px; border-radius: 999px; color: #8a5470; background: #f2e9ec; font-size: 10px; font-weight: 900; }
.incoming-likes h2 { margin: 10px 0 5px; font-size: 21px; }.incoming-likes h2 strong { color: var(--berry); }
.incoming-likes > p { margin: 0 auto 12px; color: var(--muted); font-size: 11px; }
.incoming-like-avatars { min-height: 126px; margin-bottom: 0; }
.incoming-like-avatars .blurred-like { width: 104px; height: 123px; border-radius: 25px; }
.incoming-likes .button { margin-top: 16px; }
.likes-empty { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.7; }

.account-panel { min-height: 76vh; padding: 18px 0 35px; text-align: left; }
.account-topline { display: flex; justify-content: space-between; align-items: center; }
.account-menu-button, .verify-mini { height: 36px; border: 0; border-radius: 11px; background: #f2efee; color: var(--plum); font-weight: 800; }.account-menu-button { width: 40px; font-size: 19px; }.verify-mini { padding: 0 12px; font-size: 10px; }
.profile-overview { display: grid; grid-template-columns: 82px 1fr; align-items: center; gap: 15px; margin: 20px 4px 15px; }
.profile-overview .account-avatar { width: 78px; height: 78px; margin: 0; position: relative; font-size: 24px; }
.profile-overview .account-avatar b { position: absolute; left: 4px; right: 4px; bottom: -8px; padding: 4px; border-radius: 999px; color: #fff; background: #ed8727; font-size: 10px; text-align: center; }
.profile-overview h1 { margin: 0 0 5px; font-size: 21px; }.profile-overview p { margin: 0; max-width: none; font-size: 11px; line-height: 1.5; }.profile-overview button { margin-top: 7px; padding: 0; border: 0; color: var(--berry); background: transparent; font-size: 11px; font-weight: 900; }
.overview-stats { grid-template-columns: repeat(4,1fr); gap: 0; margin: 8px 0 15px; }
.overview-stats div { padding: 10px 2px; border: 0; border-right: 1px solid var(--line); border-radius: 0; background: transparent; text-align: center; }.overview-stats div:last-child { border-right: 0; }.overview-stats strong { color: var(--plum); font-size: 18px; }
.profile-completion { width: 100%; display: flex; justify-content: space-between; align-items: center; padding: 15px; border: 0; border-radius: 15px; color: #704513; background: linear-gradient(135deg,#ffd895,#ffc266); text-align: left; }.profile-completion strong,.profile-completion span { display: block; }.profile-completion strong { font-size: 13px; }.profile-completion span { margin-top: 4px; font-size: 10px; opacity: .78; }.profile-completion b { font-size: 11px; }
.account-section-title { margin: 23px 2px 9px; color: var(--muted); font-size: 11px; font-weight: 800; }
.account-list { overflow: hidden; border: 1px solid var(--line); border-radius: 17px; background: #fff; }.account-list button { width: 100%; display: grid; grid-template-columns: 38px 1fr auto; align-items: center; gap: 10px; padding: 12px; border: 0; border-bottom: 1px solid #f1e8e4; color: var(--plum); background: transparent; text-align: left; }.account-list button:last-child { border-bottom: 0; }.list-icon { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 11px; color: #fff; font-weight: 900; }.list-icon.pink{background:#ef78a5}.list-icon.blue{background:#59bfee}.list-icon.green{background:#65ca79}.account-list strong small { display: block; margin-top: 3px; color: var(--muted); font-size: 9px; font-weight: 500; }.account-list button > b { color: #b9afb3; }

.account-menu-dialog { width: min(100%,460px); height: min(100dvh,820px); max-width: none; max-height: none; margin: auto; padding: 0 18px 30px; overflow-y: auto; border: 0; border-radius: 28px; color: var(--plum); background: #fff; box-shadow: 0 24px 80px rgba(40,14,25,.28); }
.account-menu-dialog::backdrop { background: rgba(29,16,22,.45); }
.account-menu-dialog > header { position: sticky; z-index: 2; top: 0; display: grid; grid-template-columns: 40px 1fr 40px; align-items: center; min-height: 68px; background: rgba(255,255,255,.97); }
.account-menu-dialog > header button { width: 38px; height: 38px; border: 0; border-radius: 12px; color: var(--plum); background: #f4efed; font-size: 29px; }
.account-menu-dialog > header h2 { margin: 0; text-align: center; font-size: 21px; }
.account-menu-identity { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 4px 4px 16px; }.account-menu-identity b { display: block; font-size: 25px; }.account-menu-identity > div > span { display: block; margin-top: 4px; color: var(--muted); font-size: 11px; }
.account-menu-avatar { width: 54px; height: 54px; flex: 0 0 54px; display: grid; place-items: center; overflow: hidden; margin: 0 4px 0 0; border: 3px solid #fff; border-radius: 50%; color: #fff; background-color: var(--berry); background-position: center; background-size: cover; box-shadow: 0 0 0 1px #ead8dd, 0 7px 18px rgba(75,18,42,.14); font-size: 20px; font-weight: 900; }
.account-menu-list { display: grid; }
.account-menu-list button { width: 100%; min-height: 58px; display: grid; grid-template-columns: 36px 1fr auto auto; align-items: center; gap: 10px; padding: 0 8px; border: 0; color: var(--plum); background: #fff; text-align: left; }
.account-menu-list i { font-size: 23px; font-style: normal; }.account-menu-list span { font-size: 15px; font-weight: 800; }.account-menu-list b { color: #b6a6ac; font-size: 20px; }
.account-menu-list em { width: 7px; height: 7px; border-radius: 50%; background: #f13f65; }
.account-menu-list hr { width: 100%; height: 1px; margin: 7px 0; border: 0; background: #f0e8e5; }
.service-detail-content { display: grid; gap: 14px; padding: 12px 2px 30px; }
.service-detail-card { padding: 18px; border: 1px solid #eee2df; border-radius: 20px; background: #fff9f7; }
.service-detail-card h3 { margin: 0 0 9px; font-size: 18px; }
.service-detail-card p { margin: 0 0 10px; color: #735f67; font-size: 13px; line-height: 1.7; }
.service-detail-card p:last-child { margin-bottom: 0; }
.service-share-field { width: 100%; min-height: 74px; resize: none; padding: 12px; border: 1px solid #e6d7d3; border-radius: 13px; color: #51333f; background: #fff; font-size: 12px; line-height: 1.5; }
.service-action { width: 100%; min-height: 48px; display: grid; place-items: center; border: 0; border-radius: 14px; color: #fff; background: var(--berry); font-weight: 800; text-decoration: none; }
.service-action[disabled] { color: #8f7e85; background: #eee8e6; }
.service-profile-form { display: grid; gap: 14px; }
.service-profile-avatar { display: grid; justify-items: center; gap: 8px; cursor: pointer; }
.service-profile-avatar input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.service-profile-avatar > span { position: relative; width: 100px; height: 100px; display: grid; place-items: center; overflow: hidden; border-radius: 50%; color: #fff; background: linear-gradient(135deg,#c21c53,#74102f); font-size: 30px; font-weight: 900; box-shadow: 0 0 0 3px #f0d9e0; }
.service-profile-avatar img { width: 100%; height: 100%; object-fit: cover; }
.service-profile-avatar b { position: absolute; right: 2px; bottom: 2px; width: 29px; height: 29px; display: grid; place-items: center; border: 2px solid #fff; border-radius: 50%; color: #fff; background: var(--berry); font-size: 14px; }
.service-profile-avatar strong { color: var(--berry); font-size: 12px; }
.service-profile-tip { margin: 2px 0 14px !important; padding: 10px 12px; border-radius: 12px; color: #8a5a19 !important; background: #fff5e5; text-align: center; font-size: 11px !important; }
.service-profile-field { display: grid; gap: 7px; font-size: 13px; font-weight: 800; }
.service-profile-field input { width: 100%; height: 48px; padding: 0 13px; border: 1px solid #e7dad4; border-radius: 13px; color: var(--plum); background: #fff; outline: none; }
.service-profile-field textarea { width: 100%; min-height: 96px; resize: vertical; padding: 12px 13px; border: 1px solid #e7dad4; border-radius: 13px; color: var(--plum); background: #fff; font: inherit; line-height: 1.55; outline: none; }
.service-profile-count { margin-top: -4px; color: var(--muted); font-size: 10px; font-weight: 600; text-align: right; }
.service-completion-live { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 6px; margin: -2px 0 2px !important; color: var(--muted) !important; font-size: 10px !important; }
.service-completion-live b { color: #e6781d; font-size: 11px; }.service-completion-live > span { grid-column: 1 / 3; height: 6px; overflow: hidden; border-radius: 999px; background: #f3e7df; }.service-completion-live i { height: 100%; display: block; border-radius: inherit; background: linear-gradient(90deg,#ff9d3c,#ea721a); transition: width .2s ease; }
.service-profile-field select { width: 100%; height: 48px; padding: 0 10px; border: 1px solid #e7dad4; border-radius: 13px; color: var(--plum); background: #fff; outline: none; }
.service-profile-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 9px; margin-top: 12px; }
.service-profile-field input:focus,.service-profile-field textarea:focus,.service-profile-field select:focus { border-color: var(--berry); box-shadow: 0 0 0 3px rgba(167,15,63,.08); }
.account-service-card { display: grid; gap: 9px; }
.account-service-card div,.account-service-card button { width: 100%; min-height: 50px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 13px; border: 0; border-radius: 13px; color: var(--plum); background: #fff; text-align: left; }
.account-service-card span { color: var(--muted); font-size: 12px; }.account-service-card strong { max-width: 68%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
.account-service-logout { margin-top: 5px; }
.feedback-form label { display: block; margin: 16px 0 8px; font-size: 13px; font-weight: 800; }
.feedback-form textarea { width: 100%; min-height: 150px; resize: vertical; padding: 14px; border: 1px solid #eadbd8; border-radius: 14px; color: var(--plum); background: #fff; font: inherit; line-height: 1.55; outline: none; }
.feedback-form textarea:focus { border-color: var(--berry); box-shadow: 0 0 0 3px rgba(191,15,76,.1); }
.feedback-success { padding: 42px 20px; text-align: center; }
.feedback-success span { display: grid; width: 58px; height: 58px; place-items: center; margin: 0 auto 18px; border-radius: 50%; color: #fff; background: #20b777; font-size: 30px; font-weight: 900; }
.feedback-success h3 { margin-bottom: 8px; font-size: 22px; }
.language-options { display: grid; gap: 9px; }
.language-options button { min-height: 48px; display: flex; align-items: center; justify-content: space-between; padding: 0 14px; border: 1px solid #e8dcda; border-radius: 14px; color: var(--plum); background: #fff; font-weight: 750; }
.language-options button.is-active { border-color: var(--berry); color: var(--berry); background: #fff3f6; }
.language-options button i { font-style: normal; }

.signup-prompt { position: fixed; z-index: 95; inset: 0; display: grid; place-items: center; padding: 18px; background: rgba(31,23,27,.52); }.signup-prompt[hidden]{display:none}.signup-prompt-card { position: relative; width: min(100%,400px); padding: 31px 18px 17px; border-radius: 22px; background: #fff; text-align: center; box-shadow: 0 25px 70px rgba(0,0,0,.24); }.signup-close{position:absolute;right:12px;top:10px;width:32px;height:32px;border:0;background:transparent;font-size:27px}.signup-alert{display:block;color:#e01d31;font-size:15px}.signup-faces{display:flex;justify-content:center;align-items:center;margin:14px 0 15px}.signup-face{position:relative;width:68px;height:68px;flex:0 0 68px;margin-left:-9px;border:3px solid #fff;border-radius:50%;background-color:#eee;background-repeat:no-repeat;box-shadow:0 4px 12px rgba(55,22,35,.13)}.signup-face:first-child{margin-left:0}.signup-face-m1{background-image:url("assets/people/male-01-1.webp");background-size:260% auto;background-position:43% 9%}.signup-face-m2{background-image:url("assets/people/male-02-1.webp");background-size:220% auto;background-position:50% 55%}.signup-face-f1{background-image:url("assets/people/female-01-1.webp");background-size:250% auto;background-position:50% 38%}.signup-face-f2{background-image:url("assets/people/female-02-1.webp");background-size:250% auto;background-position:50% 2%}.signup-faces i{position:relative;z-index:2;display:grid;width:31px;height:31px;flex:0 0 31px;place-items:center;margin:0 -2px;color:#e64a66;background:#fff;border-radius:50%;font-size:18px;font-style:normal}.signup-prompt h2{margin:0;font-size:22px;line-height:1.25}.signup-prompt p{margin:10px 0 13px;color:#50474a;font-size:12px;line-height:1.5}.signup-prompt .button{width:100%}
.guide-route .guide-dialog { position: fixed; z-index: 80; inset: 46px 0 0; width: min(100%, 460px); max-height: calc(100dvh - 46px); margin: 0 auto; border-radius: 0; }
.toast { position: fixed; z-index: 100; left: 50%; bottom: calc(93px + env(safe-area-inset-bottom)); transform: translate(-50%, 20px); width: max-content; max-width: calc(100% - 34px); padding: 11px 16px; border-radius: 999px; color: #fff; background: rgba(42, 19, 28, .92); font-size: 12px; opacity: 0; pointer-events: none; transition: .25s; }
.toast.is-visible { opacity: 1; transform: translate(-50%, 0); }
.radar-screen { position: fixed; z-index: 70; inset: 0; width: min(100%, 460px); margin: 0 auto; padding: calc(54px + env(safe-area-inset-top)) 28px 30px; background: radial-gradient(circle at center 48%, #fff 0, #fff9f5 42%, #f5ebe6 100%); text-align: center; }
.radar-brand { font-size: 29px; color: var(--berry-dark); font-weight: 900; }
.radar-brand span { color: var(--sand); font-size: 16px; }
.radar { width: 290px; height: 290px; max-width: 80vw; max-height: 80vw; position: relative; margin: 55px auto 35px; border-radius: 50%; background: repeating-radial-gradient(circle, rgba(22,128,76,.12) 0 2px, transparent 2px 42px); }
.radar::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 0deg, rgba(22,128,76,.34), transparent 25%); animation: sweep 1.7s linear infinite; }
.radar img { position: absolute; z-index: 2; width: 78px; height: 78px; object-fit: cover; border-radius: 50%; left: 50%; top: 50%; transform: translate(-50%,-50%); border: 5px solid #fff; box-shadow: 0 6px 22px rgba(18,86,52,.25); }
.radar i { position: absolute; z-index: 3; width: 12px; height: 12px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 6px rgba(22,128,76,.12); }
.radar i:nth-child(1) { top: 22%; left: 29%; }.radar i:nth-child(2) { top: 31%; right: 15%; }.radar i:nth-child(3) { bottom: 16%; left: 24%; }.radar i:nth-child(4) { bottom: 26%; right: 26%; }
@keyframes sweep { to { transform: rotate(360deg); } }
.radar-screen h1 { margin: 0 0 8px; font-size: 26px; }
.radar-screen p { margin: 0; color: var(--muted); font-size: 13px; }
.radar-count { margin-top: 22px; color: var(--green); font-weight: 800; }
.radar-count strong { font-size: 27px; margin-right: 3px; }

@media (min-width: 760px) {
  body { padding: 24px 0; }
  body.has-preview-toolbar { padding-top: 70px; }
  .app-shell { min-height: calc(100dvh - 48px); border-radius: 34px; border: 7px solid rgba(255,255,255,.8); }
  body.has-preview-toolbar .app-shell { min-height: calc(100dvh - 94px); }
  .app-view { min-height: calc(100dvh - 62px); }
  .topbar { top: 0; }
  .bottom-nav { bottom: 24px; width: 446px; border-radius: 0 0 27px 27px; }
  .guide-dialog, .form-dialog { border-radius: 28px; margin: auto; }
  .radar-screen { top: 24px; bottom: 24px; border-radius: 28px; }
  body.has-preview-toolbar .radar-screen { top: 70px; }
  .guide-route .guide-dialog { top: 70px; max-height: calc(100dvh - 94px); border-radius: 28px; }
}
@media (max-width: 370px) {
  .feature-card { height: clamp(430px, calc(100dvh - 285px), 560px); }
  .topbar { padding-left: 11px; padding-right: 11px; grid-template-columns: 48px 1fr 78px; }
  .brand strong { font-size: 24px; }
  .gallery-card { min-height: 190px; }
}
@media (pointer: coarse) {
  .carousel-arrow { display: none; }
}

body.has-preview-toolbar .feature-card { height: clamp(390px, calc(100dvh - 355px), 520px); }
body.has-preview-toolbar .content { padding-bottom: calc(122px + env(safe-area-inset-bottom)); }

/* Production Arabic layout. Chinese review previews keep the original LTR flow. */
html[dir="rtl"] body { font-family: Tahoma, Arial, "Noto Sans Arabic", sans-serif; }
html[dir="rtl"] .app-shell,
html[dir="rtl"] dialog { direction: rtl; }
html[dir="rtl"] .profile-copy,
html[dir="rtl"] .message-copy,
html[dir="rtl"] .account-menu-list,
html[dir="rtl"] .service-detail-card,
html[dir="rtl"] .guide-dialog,
html[dir="rtl"] .form-dialog { text-align: right; }
html[dir="rtl"] input[type="email"],
html[dir="rtl"] input[type="tel"] { direction: ltr; text-align: left; }
html[dir="rtl"] .phone-field { direction: ltr; }
html[dir="rtl"] .swipe-stamp.nope::after { content: "تخطي"; }

@media (max-width: 759px) {
  input:not([type="range"]):not([type="file"]),
  select,
  textarea { font-size: 16px !important; }
}