:root {
  --bg1: #fff5f8;
  --bg2: #f7f1ff;
  --ink: #17213a;
  --muted: #81899d;
  --card: rgba(255,255,255,.82);
  --card-solid: #ffffff;
  --line: rgba(169, 151, 204, .18);
  --violet: #9368e8;
  --violet-2: #c8afff;
  --pink: #f0699d;
  --pink-soft: #ffe1ec;
  --shadow: 0 24px 70px rgba(82, 64, 106, .12);
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { min-height: 100%; }
body {
  margin: 0;
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, Arial, sans-serif;
  background:
    radial-gradient(circle at 84% 8%, rgba(255, 178, 198, .38), transparent 24%),
    radial-gradient(circle at 10% 18%, rgba(214, 194, 255, .32), transparent 30%),
    linear-gradient(135deg, var(--bg1), var(--bg2));
}
button, input { font: inherit; }
button { cursor: pointer; }

.app-shell {
  width: min(100%, 760px);
  margin: 0 auto;
  min-height: 100vh;
  padding: calc(8px + var(--safe-top)) 18px calc(100px + var(--safe-bottom));
  position: relative;
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 70;
  display: grid;
  grid-template-columns: 48px 1fr 48px;
  align-items: center;
  gap: 8px;
  padding: 6px 0 12px;
  backdrop-filter: blur(18px);
}
.top-title { text-align: center; line-height: 1.1; }
.top-title strong { display: block; font-size: 17px; font-weight: 800; }
.top-title span { display: block; font-size: 12px; color: var(--muted); margin-top: 3px; }
.round-btn {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.56);
  background: rgba(255,255,255,.72);
  color: #3c485d;
  box-shadow: 0 10px 26px rgba(78, 58, 101, .10);
  font-size: 30px;
  line-height: 36px;
}
.back-btn { color: #5c7e50; }
.menu-btn { font-size: 22px; }

.screen { display: none; animation: screenIn .24s ease; }
.screen.active { display: block; }
@keyframes screenIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

.page-head { margin-top: 10px; }
.page-head h1,
#screenComposer h1,
#screenTopics h1,
.pair-created-card h1,
.done-card h1 {
  margin: 0 0 10px;
  color: #192341;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(40px, 9vw, 70px);
  line-height: .95;
  letter-spacing: -.02em;
}
.page-head h1 { font-family: inherit; font-size: clamp(31px, 6vw, 42px); font-weight: 850; }
.page-head h1 span { color: var(--pink); }
.page-head p,
.lead,
.pair-created-card p { margin: 0 0 20px; color: var(--muted); font-size: 18px; line-height: 1.36; }

.segmented {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  margin: 22px 0 22px;
  padding: 6px;
  border-radius: 24px;
  background: rgba(240, 231, 245, .72);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.5);
}
.seg {
  min-height: 62px;
  border: 0;
  border-radius: 19px;
  background: transparent;
  color: #61687c;
  font-weight: 750;
  font-size: 17px;
}
.seg.active {
  background: rgba(255,255,255,.92);
  color: var(--pink);
  box-shadow: 0 10px 30px rgba(95, 72, 115, .09);
}
.home-view { display: none; }
.home-view.active { display: block; animation: screenIn .2s ease; }
.section-label {
  margin: 12px 4px 14px;
  color: #596176;
  font-size: 17px;
  font-weight: 800;
}
.section-title-row { display: flex; align-items: center; justify-content: space-between; }
.new-label { margin-top: 30px; }

.chat-list, .pairs-list { display: grid; gap: 14px; }
.chat-card, .pair-card, .join-card, .create-pair-card, .chat-head-card, .slider-card, .hint-card, .flower-panel, .section-card, .topic-footer, .done-card, .pair-created-card {
  background: var(--card);
  border: 1px solid rgba(255,255,255,.58);
  box-shadow: var(--shadow);
  backdrop-filter: blur(12px);
}
.chat-card {
  display: grid;
  grid-template-columns: 86px 1fr auto;
  gap: 16px;
  align-items: center;
  min-height: 142px;
  border-radius: 30px;
  padding: 18px 16px;
  text-align: left;
  width: 100%;
}
.avatar {
  width: 78px;
  height: 78px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  overflow: hidden;
  font-size: 34px;
  background: radial-gradient(circle at 50% 45%, #fff, #ffd4e2 40%, #ffb08d);
}
.avatar.sun { background: linear-gradient(145deg, #ffd0a0, #fb7f75 48%, #5a448f); }
.avatar.moon { background: linear-gradient(145deg, #384083, #7f62cb 55%, #ffc2d8); }
.avatar.cloud { background: linear-gradient(145deg, #ffd4e6, #bca9ff 58%, #7eb5ff); }
.avatar.big { width: 86px; height: 86px; }
.chat-main h3, .pair-main h3 {
  margin: 0 0 8px;
  font-size: 23px;
  line-height: 1.1;
}
.chat-main p, .pair-main p {
  margin: 0;
  color: #6f768b;
  font-size: 16px;
  line-height: 1.35;
}
.chat-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; color: #737b8f; font-size: 14px; }
.unread-dot { width: 18px; height: 18px; border-radius: 50%; background: var(--violet); box-shadow: 0 0 0 6px rgba(147, 104, 232, .10); }
.unread-count { min-width: 32px; height: 32px; padding: 0 10px; border-radius: 16px; display: grid; place-items: center; background: rgba(30, 33, 45, .07); color: #596176; font-weight: 750; }

.join-card { border-radius: 30px; padding: 18px; }
.join-card label { display: block; margin-bottom: 12px; color: #2e3853; font-weight: 800; }
.join-card p { margin: 12px 0 0; color: var(--muted); line-height: 1.35; }
.join-row { display: grid; grid-template-columns: 1fr auto; gap: 10px; }
.join-row input {
  min-width: 0;
  height: 62px;
  border-radius: 18px;
  border: 1px solid rgba(211, 203, 226, .72);
  background: rgba(255,255,255,.88);
  padding: 0 16px;
  outline: none;
  color: var(--ink);
}
.join-row input:focus { border-color: rgba(147, 104, 232, .62); box-shadow: 0 0 0 4px rgba(147,104,232,.10); }
.join-row button {
  height: 62px;
  border: 0;
  border-radius: 18px;
  padding: 0 18px;
  color: white;
  font-weight: 800;
  background: linear-gradient(135deg, #a780f4, #7c4bd9);
}
.plus-btn {
  width: 54px;
  height: 54px;
  border: 0;
  border-radius: 50%;
  background: rgba(255,255,255,.86);
  box-shadow: var(--shadow);
  font-size: 32px;
  color: #17213a;
}
.pair-card {
  display: grid;
  grid-template-columns: 76px 1fr auto auto;
  align-items: center;
  gap: 12px;
  min-height: 108px;
  border-radius: 26px;
  padding: 14px;
}
.pair-code { color: var(--pink); font-weight: 850; letter-spacing: .03em; }
.copy-btn {
  width: 48px;
  height: 48px;
  border: 0;
  border-radius: 16px;
  background: rgba(255,255,255,.90);
  color: #596176;
  font-size: 22px;
}
.close-pair-btn {
  width: 48px;
  height: 48px;
  border: 0;
  border-radius: 16px;
  background: rgba(255, 224, 234, .86);
  color: #dd5d86;
  font-size: 28px;
  line-height: 42px;
}
.close-pair-btn:active { transform: scale(.96); }
.pair-card.pending {
  background: linear-gradient(135deg, rgba(255,255,255,.88), rgba(255,238,246,.78));
}
.subsection-label {
  margin: 8px 4px 4px;
  color: #8a73c7;
  font-size: 15px;
  font-weight: 850;
}
.empty-card {
  min-height: 138px;
  border-radius: 28px;
  padding: 22px;
  display: grid;
  place-items: center;
  text-align: center;
  gap: 8px;
  color: var(--muted);
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(255,255,255,.58);
  box-shadow: var(--shadow);
}
.empty-card b {
  display: block;
  color: var(--ink);
  font-size: 20px;
}
.empty-card span {
  max-width: 300px;
  line-height: 1.35;
}
.empty-icon {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(238, 226, 255, .88);
  font-size: 28px;
}
.arrow { color: #a0a8ba; font-size: 30px; }
.create-pair-card {
  width: 100%;
  min-height: 132px;
  border: 0;
  border-radius: 28px;
  display: grid;
  grid-template-columns: 66px 1fr auto;
  gap: 16px;
  align-items: center;
  padding: 18px;
  text-align: left;
  color: white;
  background: linear-gradient(135deg, #d7a6f2, #f0aed2 55%, #ffd0a6);
}
.create-plus {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(255,255,255,.92);
  color: var(--pink);
  font-size: 36px;
}
.create-pair-card b { display: block; font-size: 22px; margin-bottom: 4px; }
.create-pair-card small { display: block; font-size: 16px; line-height: 1.3; opacity: .92; }
.create-pair-card i { font-style: normal; font-size: 36px; opacity: .8; }

.chat-head-card {
  display: flex;
  gap: 16px;
  align-items: center;
  border-radius: 30px;
  padding: 18px;
  margin-bottom: 18px;
}
.chat-head-card h2 { margin: 0 0 4px; font-size: 27px; }
.chat-head-card p { margin: 0; color: var(--muted); }
.message-list { display: grid; gap: 14px; margin-bottom: 20px; }
.day-separator { text-align: center; color: var(--muted); font-size: 13px; margin: 4px 0; }
.message {
  max-width: 82%;
  border-radius: 24px;
  padding: 14px 16px;
  box-shadow: 0 12px 28px rgba(76, 61, 99, .08);
}
.message.partner { justify-self: start; background: rgba(255,255,255,.88); }
.message.me { justify-self: end; background: linear-gradient(135deg, #e5d8ff, #ffd7e7); }
.message .kind { display: block; font-size: 13px; color: var(--violet); font-weight: 800; margin-bottom: 6px; }
.message .text { font-size: 18px; line-height: 1.32; }
.message .time { display: block; margin-top: 7px; font-size: 12px; color: #7c8498; text-align: right; }
.chat-actions {
  position: sticky;
  bottom: calc(84px + var(--safe-bottom));
  z-index: 50;
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  padding-top: 8px;
}
.primary-btn, .secondary-btn {
  min-height: 62px;
  border: 0;
  border-radius: 999px;
  font-weight: 850;
  font-size: 18px;
}
.primary-btn { background: linear-gradient(90deg, #d7c5ff, #bda3ff); color: white; }
.primary-btn:disabled { opacity: .55; cursor: default; }
.secondary-btn { padding: 0 20px; background: rgba(255,255,255,.86); color: #596176; box-shadow: 0 12px 28px rgba(78, 58, 101, .10); }

.hero-heart {
  width: 112px;
  height: 112px;
  border-radius: 50%;
  margin: 10px 0 0 auto;
  display: grid;
  place-items: center;
  color: white;
  font-size: 42px;
  background: radial-gradient(circle at 48% 42%, #ffbfd0, #f388a8 68%, #f7b5c7 100%);
  box-shadow: 0 0 0 18px rgba(255,255,255,.30), 0 20px 46px rgba(244, 142, 175, .20);
}
.hero-heart.small { width: 84px; height: 84px; font-size: 34px; }
#screenComposer h1, #screenTopics h1 { margin-top: -76px; }
.flower-panel { margin-top: 14px; border-radius: 36px; padding: 18px 8px 12px; }
.flower-selector {
  --flower-size: min(76vw, 510px);
  --center-size: calc(var(--flower-size) * .39);
  --petal-size: calc(var(--flower-size) * .30);
  --petal-radius: calc(var(--flower-size) * .30);
  position: relative;
  width: var(--flower-size);
  height: var(--flower-size);
  margin: 0 auto;
}
.flower-core, .flower-petal {
  position: absolute;
  left: 50%;
  top: 50%;
  border: 6px solid rgba(255,255,255,.74);
  border-radius: 50%;
  text-align: center;
  will-change: transform, opacity, background;
}
.flower-core {
  width: var(--center-size);
  height: var(--center-size);
  transform: translate(-50%, -50%) scale(var(--core-scale, 1));
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--core-bg, linear-gradient(135deg, #e4d5ff, #bb9dff));
  box-shadow: 0 18px 40px rgba(130, 103, 199, .26), 0 0 0 12px rgba(236, 226, 255, .68);
  z-index: 3;
  transition: background .28s ease, transform .22s ease;
}
.flower-core .core-inner { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 14px; }
.core-icon { font-size: clamp(24px, 5vw, 34px); color: rgba(255,255,255,.94); line-height: 1; }
.core-title { font-size: clamp(22px, 4.6vw, 34px); font-weight: 850; color: #17213a; }
.flower-petal {
  width: var(--petal-size);
  height: var(--petal-size);
  transform: translate(-50%, -50%) rotate(var(--angle)) translateY(calc(var(--petal-radius) * -1)) rotate(calc(var(--angle) * -1)) scale(var(--petal-scale, 1));
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px;
  box-shadow: 0 12px 28px rgba(100, 89, 118, .10);
  color: #30405a;
  opacity: var(--petal-opacity, 1);
  background: var(--petal-bg, #f2e8ff);
  transition: transform .25s cubic-bezier(.2,.8,.2,1), opacity .25s ease, background .28s ease, box-shadow .18s ease, filter .18s ease;
}
.flower-petal:hover { filter: saturate(1.08); box-shadow: 0 18px 36px rgba(115, 95, 153, .18); }
.petal-content { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; width: 100%; }
.petal-icon { font-size: clamp(21px, 4.8vw, 32px); line-height: 1; }
.petal-title { font-size: clamp(15px, 3vw, 20px); line-height: 1.12; font-weight: 750; max-width: 10ch; }

.slider-card { margin-top: 18px; border-radius: 30px; padding: 22px 18px 18px; }
.slider-card h2 { margin: 0 0 14px; font-size: clamp(23px, 5vw, 31px); text-align: center; }
.soft-slider {
  width: 100%;
  appearance: none;
  -webkit-appearance: none;
  height: 12px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--violet) 0%, #caa8ff 0%, #dad8e3 0%, #dad8e3 100%);
  outline: none;
}
.soft-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #ffffff;
  border: 8px solid var(--violet);
  box-shadow: 0 8px 20px rgba(128, 94, 196, .22);
}
.soft-slider::-moz-range-thumb {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #ffffff;
  border: 8px solid var(--violet);
  box-shadow: 0 8px 20px rgba(128, 94, 196, .22);
}
.chips { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px; margin-top: 18px; }
.chip {
  min-height: 56px;
  border-radius: 20px;
  border: 1px solid rgba(214, 208, 232, .55);
  background: rgba(255,255,255,.74);
  color: var(--muted);
  font-size: clamp(15px, 3vw, 20px);
  font-weight: 750;
  padding: 10px 12px;
}
.chip.active { background: linear-gradient(135deg, #eadcff, #d6c0ff); color: var(--ink); border-color: rgba(172, 136, 243, .42); }
.hint-card { margin-top: 18px; border-radius: 28px; display: flex; align-items: center; gap: 14px; padding: 18px; color: var(--muted); font-size: 18px; line-height: 1.35; }
.hint-icon, .section-mark { width: 48px; height: 48px; min-width: 48px; border-radius: 50%; display: grid; place-items: center; background: #efe6ff; color: #9d7df3; font-size: 22px; }
.summary-block { margin-top: 6px; color: var(--muted); font-size: clamp(21px, 4vw, 26px); line-height: 1.34; }
.summary-block b { color: #7562c7; }
.sections { display: grid; gap: 18px; margin-top: 16px; }
.section-card { border-radius: 30px; padding: 18px 14px 14px; }
.section-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.section-head h3 { margin: 0; font-family: Georgia, "Times New Roman", serif; font-size: clamp(24px, 5vw, 34px); }
.topic-list { display: grid; gap: 12px; }
.topic-btn {
  display: grid;
  grid-template-columns: 56px 1fr 22px;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 72px;
  border-radius: 24px;
  border: 1px solid rgba(232, 224, 244, .72);
  background: rgba(255,255,255,.90);
  text-align: left;
  padding: 8px 16px 8px 10px;
  transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.topic-btn.is-active { transform: translateY(-1px); border-color: rgba(164,128,239,.46); box-shadow: 0 14px 24px rgba(123,103,158,.10); }
.topic-icon { width: 48px; height: 48px; border-radius: 16px; display: grid; place-items: center; background: linear-gradient(135deg, #f0e6ff, #ffffff); color: #9b7af5; font-size: 24px; }
.topic-main { display: flex; flex-direction: column; gap: 2px; }
.topic-title { font-size: clamp(18px, 3.8vw, 22px); color: var(--ink); }
.topic-hint { font-size: 14px; color: var(--muted); }
.topic-arrow { color: #a1a8b9; font-size: 26px; }
.topic-footer { margin-top: 18px; border-radius: 28px; padding: 16px; }
.helper-note { text-align: center; margin-top: 12px; color: var(--muted); font-size: 15px; }

.done-card, .pair-created-card { margin-top: 28px; border-radius: 34px; padding: 28px 20px 24px; text-align: center; }
.done-icon, .pair-icon { width: 88px; height: 88px; border-radius: 50%; margin: 0 auto 14px; display: grid; place-items: center; background: linear-gradient(135deg, #ffd9e7, #ccb3ff); color: white; font-size: 42px; }
.big-code {
  margin: 18px auto;
  padding: 18px 14px;
  border-radius: 24px;
  background: rgba(255,255,255,.88);
  color: var(--pink);
  font-weight: 900;
  font-size: clamp(25px, 6vw, 36px);
  letter-spacing: .04em;
}

.bottom-nav {
  position: fixed;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  z-index: 80;
  width: min(100%, 760px);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  padding: 10px 18px calc(10px + var(--safe-bottom));
  background: rgba(255, 251, 253, .78);
  border-top: 1px solid rgba(200, 184, 214, .18);
  backdrop-filter: blur(22px);
}
.nav-item {
  border: 0;
  background: transparent;
  color: #737b8f;
  min-height: 58px;
  border-radius: 22px;
  display: grid;
  gap: 2px;
  place-items: center;
}
.nav-item span { font-size: 24px; line-height: 1; }
.nav-item b { font-size: 12px; }
.nav-item.active { color: var(--pink); background: rgba(255,255,255,.56); }

@media (max-width: 640px) {
  .flower-selector { --flower-size: min(88vw, 390px); --center-size: calc(var(--flower-size) * .42); --petal-size: calc(var(--flower-size) * .34); --petal-radius: calc(var(--flower-size) * .31); }
  .flower-panel { padding-left: 0; padding-right: 0; }
  .chat-card { grid-template-columns: 76px 1fr auto; }
  .avatar { width: 70px; height: 70px; }
}
@media (max-width: 420px) {
  .app-shell { padding-left: 14px; padding-right: 14px; }
  .page-head h1 { font-size: 30px; }
  #screenComposer h1, #screenTopics h1 { margin-top: -62px; font-size: 54px; }
  .lead { font-size: 16px; }
  .seg { font-size: 15px; min-height: 56px; }
  .chat-card { min-height: 126px; padding: 15px 13px; grid-template-columns: 66px 1fr auto; gap: 12px; }
  .avatar { width: 62px; height: 62px; }
  .chat-main h3, .pair-main h3 { font-size: 20px; }
  .chat-main p, .pair-main p { font-size: 14px; }
  .join-row { grid-template-columns: 1fr; }
  .pair-card { grid-template-columns: 62px 1fr auto; }
  .pair-card .arrow { display: none; }
  .chips { gap: 10px; }
  .chip { min-height: 52px; font-size: 15px; }
  .flower-selector { --flower-size: min(90vw, 348px); --center-size: calc(var(--flower-size) * .44); --petal-size: calc(var(--flower-size) * .35); --petal-radius: calc(var(--flower-size) * .305); }
  .petal-title { font-size: 14px; }
  .chat-actions { grid-template-columns: 1fr; }
}

@media (max-width: 420px) {
  .pair-card {
    grid-template-columns: 62px 1fr 44px 44px;
    gap: 8px;
  }
  .copy-btn,
  .close-pair-btn {
    width: 44px;
    height: 44px;
    border-radius: 14px;
  }
}

/* v6: CSS also embedded inline in index.html for Telegram WebView cache/404 fallback. */


/* v7: chat usernames + reliable hide action */
.chat-user-line {
  display: block;
  color: #737b8f;
  line-height: 1.35;
  font-size: 14px;
}
.chat-user-line b { color: #596176; }
.message .author {
  display: block;
  margin-bottom: 4px;
  color: #596176;
  font-size: 13px;
  font-weight: 850;
}
.message.system {
  justify-self: center;
  max-width: 92%;
  background: rgba(255,255,255,.68);
  color: #737b8f;
  text-align: center;
}
.message.system .time { text-align: center; }
.close-pair-btn {
  position: relative;
  z-index: 5;
}


/* v8: названия пар, Telegram-ник рядом, переименование */
.chat-main h3 small,
.pair-main h3 small {
  display: block;
  margin-top: 4px;
  color: #8b6ed8;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 14px;
  font-weight: 800;
}

.rename-pair-btn {
  width: 48px;
  height: 48px;
  border: 0;
  border-radius: 16px;
  background: rgba(238, 226, 255, .92);
  color: #7b55d9;
  font-size: 22px;
  font-weight: 900;
}

.rename-chat-btn {
  margin-top: 10px;
  min-height: 38px;
  border: 0;
  border-radius: 999px;
  padding: 0 14px;
  background: rgba(238, 226, 255, .86);
  color: #7458c8;
  font-size: 14px;
  font-weight: 850;
}

.pair-card {
  grid-template-columns: 76px 1fr auto auto auto;
}

@media (max-width: 420px) {
  .pair-card {
    grid-template-columns: 62px 1fr 40px 40px 40px;
  }
  .rename-pair-btn {
    width: 40px;
    height: 40px;
    border-radius: 13px;
    font-size: 18px;
  }
}

/* v9: polling без мерцания, пустой fallback без демо-пар, корректное определение партнёра. */

/* v10: убраны фантомные generic-сигналы, одно переименование, доставка сигнала с code+sender, партнёр учится из входящих сообщений. */

/* v11: фильтр ghost-пар из старой БД: короткие legacy-коды скрываются, если пользователь их не создавал/не вводил. */

/* === hotfix v14 pairs render === */
.hotfix-pairs-container {
  margin: 12px 16px 20px;
  display: grid;
  gap: 12px;
}

.hotfix-pair-card {
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid rgba(150, 120, 190, 0.16);
  border-radius: 24px;
  padding: 16px;
  box-shadow: 0 18px 40px rgba(95, 69, 140, 0.10);
}

.hotfix-pair-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.hotfix-pair-title {
  font-weight: 900;
  font-size: 16px;
  color: #16214a;
}

.hotfix-pair-subtitle {
  margin-top: 5px;
  font-size: 13px;
  color: #7d8198;
}

.hotfix-copy-code {
  border: 0;
  border-radius: 999px;
  padding: 10px 14px;
  font-weight: 800;
  background: linear-gradient(135deg, #d985f4, #8957e8);
  color: white;
}

.hotfix-empty {
  padding: 16px;
  border-radius: 22px;
  background: rgba(255,255,255,0.55);
  color: #7d8198;
  font-weight: 700;
}

/* === hotfix v16 persistent pairs === */
.hotfix-v16-pairs-root {
  margin: 16px 24px 24px;
  display: grid;
  gap: 12px;
}

.hotfix-v16-section-title {
  margin: 10px 4px 4px;
  font-size: 15px;
  font-weight: 900;
  color: #4a4f68;
}

.hotfix-v16-card {
  display: flex;
  align-items: center;
  gap: 12px;
  border-radius: 24px;
  padding: 14px;
  background: rgba(255, 255, 255, 0.86);
  border: 1px solid rgba(170, 130, 210, 0.16);
  box-shadow: 0 18px 42px rgba(104, 70, 150, 0.10);
}

.hotfix-v16-icon {
  width: 48px;
  height: 48px;
  border-radius: 18px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, #ffd5e6, #d9b3ff);
  font-size: 24px;
  flex: 0 0 auto;
}

.hotfix-v16-body {
  flex: 1;
  min-width: 0;
}

.hotfix-v16-title {
  font-size: 16px;
  font-weight: 900;
  color: #14204a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hotfix-v16-subtitle {
  margin-top: 4px;
  font-size: 13px;
  font-weight: 700;
  color: #858aa3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hotfix-v16-copy {
  border: 0;
  border-radius: 16px;
  padding: 11px 14px;
  font-size: 14px;
  font-weight: 900;
  color: white;
  background: linear-gradient(135deg, #d985f4, #8957e8);
}

.hotfix-v16-empty {
  border-radius: 22px;
  padding: 16px;
  background: rgba(255,255,255,0.62);
  color: #747b97;
  font-weight: 800;
}

/* === hotfix v17 clean pairs home === */
#hotfix-active-chats,
#hotfix-invite-pairs,
#hotfix-v16-pairs-root {
  display: none !important;
}

#relationship-home-v17 {
  margin: 18px 16px 110px;
}

.v17-layout {
  display: grid;
  gap: 18px;
}

.v17-room {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px;
  border-radius: 28px;
  background: rgba(255,255,255,0.88);
  box-shadow: 0 18px 44px rgba(109, 77, 150, 0.12);
  border: 1px solid rgba(170, 130, 210, 0.16);
}

.v17-room-icon {
  width: 58px;
  height: 58px;
  border-radius: 22px;
  display: grid;
  place-items: center;
  font-size: 28px;
  background: linear-gradient(135deg, #ffd5e8, #d7b2ff);
  flex: 0 0 auto;
}

.v17-room-body {
  flex: 1;
  min-width: 0;
}

.v17-room-title {
  font-size: 20px;
  font-weight: 950;
  color: #13204b;
}

.v17-room-subtitle,
.v17-pair-subtitle {
  margin-top: 4px;
  color: #8288a3;
  font-size: 13px;
  font-weight: 750;
}

.v17-code {
  margin-top: 8px;
  display: inline-block;
  padding: 7px 10px;
  border-radius: 12px;
  background: rgba(139, 87, 232, 0.10);
  color: #7152cc;
  font-weight: 900;
  letter-spacing: .4px;
}

.v17-section {
  display: grid;
  gap: 10px;
}

.v17-section-title {
  margin-left: 4px;
  font-size: 16px;
  font-weight: 950;
  color: #4b506c;
}

.v17-pair-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 15px;
  border-radius: 24px;
  background: rgba(255,255,255,0.82);
  box-shadow: 0 14px 36px rgba(109, 77, 150, 0.10);
  border: 1px solid rgba(170, 130, 210, 0.14);
}

.v17-pair-icon {
  width: 48px;
  height: 48px;
  border-radius: 18px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, #f8c8ee, #d8b5ff);
  font-size: 22px;
  flex: 0 0 auto;
}

.v17-pair-body {
  flex: 1;
  min-width: 0;
}

.v17-pair-title {
  color: #13204b;
  font-size: 16px;
  font-weight: 950;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.v17-copy,
.v17-open,
#v17JoinBtn {
  border: 0;
  border-radius: 16px;
  padding: 11px 14px;
  color: white;
  font-weight: 950;
  background: linear-gradient(135deg, #d985f4, #8957e8);
}

.v17-empty {
  padding: 15px;
  border-radius: 22px;
  background: rgba(255,255,255,0.62);
  color: #747b97;
  font-weight: 800;
}

.v17-join {
  display: flex;
  gap: 10px;
  padding: 12px;
  border-radius: 24px;
  background: rgba(255,255,255,0.66);
}

.v17-join input {
  flex: 1;
  min-width: 0;
  border: 1px solid rgba(150, 130, 190, 0.28);
  border-radius: 17px;
  padding: 13px 14px;
  font-size: 15px;
  outline: none;
  background: white;
}

.v17-create {
  border: 0;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px;
  border-radius: 28px;
  background: linear-gradient(135deg, #df90eb, #ffc49b);
  color: white;
  text-align: left;
  box-shadow: 0 18px 44px rgba(194, 116, 180, 0.18);
}

.v17-create span {
  width: 52px;
  height: 52px;
  border-radius: 20px;
  display: grid;
  place-items: center;
  background: rgba(255,255,255,0.72);
  color: #ff6faa;
  font-size: 30px;
  flex: 0 0 auto;
}

.v17-create b {
  display: block;
  font-size: 19px;
  font-weight: 950;
}

.v17-create small {
  display: block;
  margin-top: 4px;
  font-size: 13px;
  opacity: .92;
}

/* === hotfix v17 clean pairs home === */
#hotfix-active-chats,
#hotfix-invite-pairs,
#hotfix-v16-pairs-root {
  display: none !important;
}

#relationship-home-v17 {
  margin: 18px 16px 110px;
}

.v17-layout {
  display: grid;
  gap: 18px;
}

.v17-room {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px;
  border-radius: 28px;
  background: rgba(255,255,255,0.88);
  box-shadow: 0 18px 44px rgba(109, 77, 150, 0.12);
  border: 1px solid rgba(170, 130, 210, 0.16);
}

.v17-room-icon {
  width: 58px;
  height: 58px;
  border-radius: 22px;
  display: grid;
  place-items: center;
  font-size: 28px;
  background: linear-gradient(135deg, #ffd5e8, #d7b2ff);
  flex: 0 0 auto;
}

.v17-room-body {
  flex: 1;
  min-width: 0;
}

.v17-room-title {
  font-size: 20px;
  font-weight: 950;
  color: #13204b;
}

.v17-room-subtitle,
.v17-pair-subtitle {
  margin-top: 4px;
  color: #8288a3;
  font-size: 13px;
  font-weight: 750;
}

.v17-code {
  margin-top: 8px;
  display: inline-block;
  padding: 7px 10px;
  border-radius: 12px;
  background: rgba(139, 87, 232, 0.10);
  color: #7152cc;
  font-weight: 900;
  letter-spacing: .4px;
}

.v17-section {
  display: grid;
  gap: 10px;
}

.v17-section-title {
  margin-left: 4px;
  font-size: 16px;
  font-weight: 950;
  color: #4b506c;
}

.v17-pair-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 15px;
  border-radius: 24px;
  background: rgba(255,255,255,0.82);
  box-shadow: 0 14px 36px rgba(109, 77, 150, 0.10);
  border: 1px solid rgba(170, 130, 210, 0.14);
}

.v17-pair-icon {
  width: 48px;
  height: 48px;
  border-radius: 18px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, #f8c8ee, #d8b5ff);
  font-size: 22px;
  flex: 0 0 auto;
}

.v17-pair-body {
  flex: 1;
  min-width: 0;
}

.v17-pair-title {
  color: #13204b;
  font-size: 16px;
  font-weight: 950;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.v17-copy,
.v17-open,
#v17JoinBtn {
  border: 0;
  border-radius: 16px;
  padding: 11px 14px;
  color: white;
  font-weight: 950;
  background: linear-gradient(135deg, #d985f4, #8957e8);
}

.v17-empty {
  padding: 15px;
  border-radius: 22px;
  background: rgba(255,255,255,0.62);
  color: #747b97;
  font-weight: 800;
}

.v17-join {
  display: flex;
  gap: 10px;
  padding: 12px;
  border-radius: 24px;
  background: rgba(255,255,255,0.66);
}

.v17-join input {
  flex: 1;
  min-width: 0;
  border: 1px solid rgba(150, 130, 190, 0.28);
  border-radius: 17px;
  padding: 13px 14px;
  font-size: 15px;
  outline: none;
  background: white;
}

.v17-create {
  border: 0;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px;
  border-radius: 28px;
  background: linear-gradient(135deg, #df90eb, #ffc49b);
  color: white;
  text-align: left;
  box-shadow: 0 18px 44px rgba(194, 116, 180, 0.18);
}

.v17-create span {
  width: 52px;
  height: 52px;
  border-radius: 20px;
  display: grid;
  place-items: center;
  background: rgba(255,255,255,0.72);
  color: #ff6faa;
  font-size: 30px;
  flex: 0 0 auto;
}

.v17-create b {
  display: block;
  font-size: 19px;
  font-weight: 950;
}

.v17-create small {
  display: block;
  margin-top: 4px;
  font-size: 13px;
  opacity: .92;
}

/* === hotfix v18 tabs and chat === */
#relationship-home-v17,
#hotfix-active-chats,
#hotfix-invite-pairs,
#hotfix-v16-pairs-root {
  display: none !important;
}

#relationship-main-v18 {
  margin: 18px 16px 110px;
}

.v18-tabs {
  display: flex;
  gap: 8px;
  padding: 6px;
  border-radius: 26px;
  background: rgba(255,255,255,0.42);
  margin-bottom: 18px;
}

.v18-tabs button {
  flex: 1;
  border: 0;
  border-radius: 21px;
  padding: 14px 12px;
  background: transparent;
  color: #596078;
  font-weight: 950;
}

.v18-tabs button.active {
  background: white;
  color: #ff68a3;
  box-shadow: 0 12px 28px rgba(117, 80, 150, 0.10);
}

.v18-section {
  display: grid;
  gap: 11px;
  margin-bottom: 20px;
}

.v18-section-title {
  margin-left: 5px;
  color: #4b506c;
  font-size: 16px;
  font-weight: 950;
}

.v18-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 15px;
  border-radius: 24px;
  background: rgba(255,255,255,0.86);
  box-shadow: 0 14px 36px rgba(109, 77, 150, 0.10);
  border: 1px solid rgba(170, 130, 210, 0.14);
}

.v18-icon {
  width: 50px;
  height: 50px;
  border-radius: 18px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, #f8c8ee, #d8b5ff);
  font-size: 23px;
  flex: 0 0 auto;
}

.v18-body {
  flex: 1;
  min-width: 0;
}

.v18-title {
  color: #13204b;
  font-size: 16px;
  font-weight: 950;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.v18-subtitle {
  margin-top: 4px;
  color: #8288a3;
  font-size: 13px;
  font-weight: 750;
}

.v18-code {
  margin-top: 7px;
  display: inline-block;
  padding: 6px 9px;
  border-radius: 12px;
  background: rgba(139, 87, 232, 0.10);
  color: #7152cc;
  font-weight: 900;
  letter-spacing: .35px;
}

.v18-btn,
#v18JoinBtn,
.v18-send button {
  border: 0;
  border-radius: 16px;
  padding: 11px 14px;
  color: white;
  font-weight: 950;
  background: linear-gradient(135deg, #d985f4, #8957e8);
}

.v18-empty {
  padding: 15px;
  border-radius: 22px;
  background: rgba(255,255,255,0.62);
  color: #747b97;
  font-weight: 800;
}

.v18-join {
  display: flex;
  gap: 10px;
  padding: 12px;
  border-radius: 24px;
  background: rgba(255,255,255,0.66);
}

.v18-join input,
.v18-send input {
  flex: 1;
  min-width: 0;
  border: 1px solid rgba(150, 130, 190, 0.28);
  border-radius: 17px;
  padding: 13px 14px;
  font-size: 15px;
  outline: none;
  background: white;
}

.v18-create {
  border: 0;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px;
  border-radius: 28px;
  background: linear-gradient(135deg, #df90eb, #ffc49b);
  color: white;
  text-align: left;
  box-shadow: 0 18px 44px rgba(194, 116, 180, 0.18);
}

.v18-create span {
  width: 52px;
  height: 52px;
  border-radius: 20px;
  display: grid;
  place-items: center;
  background: rgba(255,255,255,0.72);
  color: #ff6faa;
  font-size: 30px;
  flex: 0 0 auto;
}

.v18-create b {
  display: block;
  font-size: 19px;
  font-weight: 950;
}

.v18-create small {
  display: block;
  margin-top: 4px;
  font-size: 13px;
  opacity: .92;
}

.v18-chat {
  display: grid;
  gap: 14px;
}

.v18-chat-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  border-radius: 24px;
  background: rgba(255,255,255,0.86);
  box-shadow: 0 12px 32px rgba(109, 77, 150, 0.10);
}

.v18-back-chat {
  border: 0;
  width: 44px;
  height: 44px;
  border-radius: 16px;
  background: rgba(139, 87, 232, 0.10);
  color: #7354d2;
  font-size: 22px;
  font-weight: 900;
}

.v18-chat-title {
  color: #13204b;
  font-size: 18px;
  font-weight: 950;
}

.v18-chat-subtitle {
  color: #8288a3;
  font-size: 13px;
  font-weight: 750;
}

.v18-messages {
  min-height: 340px;
  display: grid;
  align-content: start;
  gap: 10px;
}

.v18-msg {
  max-width: 82%;
  padding: 12px 14px;
  border-radius: 18px;
  font-weight: 750;
  box-shadow: 0 10px 24px rgba(109, 77, 150, 0.08);
}

.v18-msg.mine {
  justify-self: end;
  background: linear-gradient(135deg, #d985f4, #8957e8);
  color: white;
  border-bottom-right-radius: 6px;
}

.v18-msg.their {
  justify-self: start;
  background: white;
  color: #13204b;
  border-bottom-left-radius: 6px;
}

.v18-msg small {
  display: block;
  margin-top: 5px;
  opacity: .72;
  font-size: 11px;
}

.v18-send {
  display: flex;
  gap: 10px;
  padding: 10px;
  border-radius: 24px;
  background: rgba(255,255,255,0.72);
  position: sticky;
  bottom: 86px;
}

/* === hotfix v19 single clean layer === */
#relationship-home-v17,
#relationship-main-v18,
#hotfix-active-chats,
#hotfix-invite-pairs,
#hotfix-v16-pairs-root {
  display: none !important;
}

#relationship-main-v19 {
  margin: 18px 16px 110px;
}

.v19-tabs {
  display: flex;
  gap: 8px;
  padding: 6px;
  border-radius: 26px;
  background: rgba(255,255,255,0.42);
  margin-bottom: 18px;
}

.v19-tabs button {
  flex: 1;
  border: 0;
  border-radius: 21px;
  padding: 14px 12px;
  background: transparent;
  color: #596078;
  font-weight: 950;
}

.v19-tabs button.active {
  background: white;
  color: #ff68a3;
  box-shadow: 0 12px 28px rgba(117, 80, 150, 0.10);
}

.v19-section {
  display: grid;
  gap: 11px;
  margin-bottom: 20px;
}

.v19-section-title {
  margin-left: 5px;
  color: #4b506c;
  font-size: 16px;
  font-weight: 950;
}

.v19-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 15px;
  border-radius: 24px;
  background: rgba(255,255,255,0.86);
  box-shadow: 0 14px 36px rgba(109, 77, 150, 0.10);
  border: 1px solid rgba(170, 130, 210, 0.14);
}

.v19-icon {
  width: 50px;
  height: 50px;
  border-radius: 18px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, #f8c8ee, #d8b5ff);
  font-size: 23px;
  flex: 0 0 auto;
}

.v19-body {
  flex: 1;
  min-width: 0;
}

.v19-title {
  color: #13204b;
  font-size: 16px;
  font-weight: 950;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.v19-subtitle {
  margin-top: 4px;
  color: #8288a3;
  font-size: 13px;
  font-weight: 750;
}

.v19-code {
  margin-top: 7px;
  display: inline-block;
  padding: 6px 9px;
  border-radius: 12px;
  background: rgba(139, 87, 232, 0.10);
  color: #7152cc;
  font-weight: 900;
  letter-spacing: .35px;
}

.v19-btn,
#v19JoinBtn,
.v19-send button {
  border: 0;
  border-radius: 16px;
  padding: 11px 14px;
  color: white;
  font-weight: 950;
  background: linear-gradient(135deg, #d985f4, #8957e8);
}

.v19-empty {
  padding: 15px;
  border-radius: 22px;
  background: rgba(255,255,255,0.62);
  color: #747b97;
  font-weight: 800;
}

.v19-join,
.v19-send {
  display: flex;
  gap: 10px;
  padding: 12px;
  border-radius: 24px;
  background: rgba(255,255,255,0.66);
}

.v19-join input,
.v19-send input {
  flex: 1;
  min-width: 0;
  border: 1px solid rgba(150, 130, 190, 0.28);
  border-radius: 17px;
  padding: 13px 14px;
  font-size: 15px;
  outline: none;
  background: white;
}

.v19-create {
  border: 0;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px;
  border-radius: 28px;
  background: linear-gradient(135deg, #df90eb, #ffc49b);
  color: white;
  text-align: left;
  box-shadow: 0 18px 44px rgba(194, 116, 180, 0.18);
}

.v19-create span {
  width: 52px;
  height: 52px;
  border-radius: 20px;
  display: grid;
  place-items: center;
  background: rgba(255,255,255,0.72);
  color: #ff6faa;
  font-size: 30px;
  flex: 0 0 auto;
}

.v19-create b {
  display: block;
  font-size: 19px;
  font-weight: 950;
}

.v19-create small {
  display: block;
  margin-top: 4px;
  font-size: 13px;
  opacity: .92;
}

.v19-chat {
  display: grid;
  gap: 14px;
}

.v19-chat-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  border-radius: 24px;
  background: rgba(255,255,255,0.86);
}

.v19-back {
  border: 0;
  width: 44px;
  height: 44px;
  border-radius: 16px;
  background: rgba(139, 87, 232, 0.10);
  color: #7354d2;
  font-size: 22px;
  font-weight: 900;
}

.v19-chat-title {
  color: #13204b;
  font-size: 18px;
  font-weight: 950;
}

.v19-chat-subtitle {
  color: #8288a3;
  font-size: 13px;
  font-weight: 750;
}

.v19-messages {
  min-height: 340px;
  display: grid;
  align-content: start;
  gap: 10px;
}

.v19-msg {
  max-width: 82%;
  padding: 12px 14px;
  border-radius: 18px;
  font-weight: 750;
}

.v19-msg.mine {
  justify-self: end;
  background: linear-gradient(135deg, #d985f4, #8957e8);
  color: white;
  border-bottom-right-radius: 6px;
}

.v19-msg.their {
  justify-self: start;
  background: white;
  color: #13204b;
  border-bottom-left-radius: 6px;
}

.v19-msg small {
  display: block;
  margin-top: 5px;
  opacity: .72;
  font-size: 11px;
}

.v19-send {
  position: sticky;
  bottom: 86px;
}

/* === v20: hide duplicated v19 tabs === */
#relationship-main-v19 .v19-tabs {
  display: none !important;
}

/* === hotfix v21 native tab visual state === */
.native-tabs-v21 .native-tab-active-v21 {
  background: #ffffff !important;
  color: #ff68a3 !important;
  box-shadow: 0 12px 28px rgba(117, 80, 150, 0.10) !important;
  border-radius: 22px !important;
}

.native-tabs-v21 .native-tab-inactive-v21 {
  background: transparent !important;
  color: #596078 !important;
  box-shadow: none !important;
}

/* === hotfix v23 bottom menu only === */

/* Скрываем верхнее меню нашего нового слоя */
#relationship-main-v19 .v19-tabs {
  display: none !important;
}

/* Нижнее меню оставляем главным */
.bottom-nav-v23 {
  display: flex !important;
}

.bottom-nav-v23 .bottom-nav-active-v23 {
  color: #ff68a3 !important;
  font-weight: 950 !important;
}

#relationship-main-v19 {
  margin-top: 12px !important;
}

/* === clean app v24 === */
.v24-hidden-old,
#relationship-home-v17,
#relationship-main-v18,
#relationship-main-v19,
#hotfix-active-chats,
#hotfix-invite-pairs,
#hotfix-v16-pairs-root {
  display: none !important;
}

#relationship-clean-v24 {
  position: fixed;
  left: 0;
  right: 0;
  top: 64px;
  bottom: 76px;
  z-index: 30;
  overflow-y: auto;
  padding: 18px 22px 28px;
  background:
    radial-gradient(circle at 80% 0%, rgba(255, 210, 225, 0.92), transparent 38%),
    linear-gradient(180deg, #fff2fb 0%, #fbf4ff 100%);
}

#relationship-clean-v24 * {
  box-sizing: border-box;
}

#relationship-clean-v24 .v24-section {
  display: grid;
  gap: 12px;
  margin-bottom: 22px;
}

#relationship-clean-v24 h2 {
  margin: 0 0 2px;
  color: #4b506c;
  font-size: 17px;
  font-weight: 950;
}

.v24-card {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 16px;
  border-radius: 26px;
  background: rgba(255,255,255,0.9);
  border: 1px solid rgba(170, 130, 210, 0.14);
  box-shadow: 0 16px 38px rgba(109, 77, 150, 0.10);
}

.v24-icon {
  width: 52px;
  height: 52px;
  border-radius: 19px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, #f8c8ee, #d8b5ff);
  font-size: 23px;
  flex: 0 0 auto;
}

.v24-card-body {
  flex: 1;
  min-width: 0;
}

.v24-card-title,
.v24-chat-title {
  color: #13204b;
  font-size: 17px;
  font-weight: 950;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.v24-card-subtitle {
  margin-top: 4px;
  color: #8288a3;
  font-size: 13px;
  font-weight: 750;
}

.v24-code {
  margin-top: 8px;
  display: inline-block;
  padding: 6px 10px;
  border-radius: 12px;
  background: rgba(139, 87, 232, 0.10);
  color: #7152cc;
  font-weight: 950;
  letter-spacing: .35px;
}

.v24-primary,
#v24JoinBtn,
.v24-send button {
  border: 0;
  border-radius: 17px;
  padding: 12px 15px;
  color: white;
  font-weight: 950;
  background: linear-gradient(135deg, #d985f4, #8957e8);
}

.v24-empty {
  padding: 16px;
  border-radius: 23px;
  background: rgba(255,255,255,0.7);
  color: #747b97;
  font-weight: 850;
}

.v24-join,
.v24-send {
  display: flex;
  gap: 10px;
  padding: 12px;
  border-radius: 25px;
  background: rgba(255,255,255,0.72);
}

.v24-join input,
.v24-send input {
  flex: 1;
  min-width: 0;
  border: 1px solid rgba(150, 130, 190, 0.28);
  border-radius: 18px;
  padding: 14px 15px;
  font-size: 15px;
  outline: none;
  background: white;
}

.v24-create {
  border: 0;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px;
  border-radius: 29px;
  background: linear-gradient(135deg, #df90eb, #ffc49b);
  color: white;
  text-align: left;
  box-shadow: 0 18px 44px rgba(194, 116, 180, 0.18);
}

.v24-create span {
  width: 52px;
  height: 52px;
  border-radius: 20px;
  display: grid;
  place-items: center;
  background: rgba(255,255,255,0.72);
  color: #ff6faa;
  font-size: 30px;
  flex: 0 0 auto;
}

.v24-create b {
  display: block;
  font-size: 19px;
  font-weight: 950;
}

.v24-create small {
  display: block;
  margin-top: 4px;
  font-size: 13px;
  opacity: .92;
}

.v24-profile {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px;
  border-radius: 26px;
  background: rgba(255,255,255,0.9);
}

.v24-profile-icon {
  width: 56px;
  height: 56px;
  border-radius: 20px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, #ffd5e8, #d7b2ff);
  color: #ff68a3;
  font-size: 28px;
}

.v24-chat {
  display: grid;
  gap: 14px;
}

.v24-chat-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 15px;
  border-radius: 25px;
  background: rgba(255,255,255,0.9);
}

.v24-back {
  border: 0;
  width: 44px;
  height: 44px;
  border-radius: 16px;
  background: rgba(139, 87, 232, 0.10);
  color: #7354d2;
  font-size: 22px;
  font-weight: 900;
}

.v24-messages {
  min-height: 360px;
  display: grid;
  align-content: start;
  gap: 10px;
}

.v24-msg {
  max-width: 82%;
  padding: 12px 14px;
  border-radius: 18px;
  font-weight: 750;
  box-shadow: 0 10px 26px rgba(109, 77, 150, 0.08);
}

.v24-msg.mine {
  justify-self: end;
  background: linear-gradient(135deg, #d985f4, #8957e8);
  color: white;
  border-bottom-right-radius: 6px;
}

.v24-msg.their {
  justify-self: start;
  background: white;
  color: #13204b;
  border-bottom-left-radius: 6px;
}

.v24-msg small {
  display: block;
  margin-top: 5px;
  opacity: .72;
  font-size: 11px;
}

.v24-send {
  position: sticky;
  bottom: 0;
}

.v24-bottom-active {
  color: #ff68a3 !important;
  font-weight: 950 !important;
}

/* === clean app v25 bottom navigation === */
#relationship-bottom-nav-v25 {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 82px;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: space-around;
  gap: 8px;
  padding: 10px 14px 12px;
  background: rgba(255, 255, 255, 0.92);
  border-top: 1px solid rgba(180, 150, 210, 0.18);
  box-shadow: 0 -14px 34px rgba(80, 55, 120, 0.08);
  backdrop-filter: blur(18px);
}

#relationship-bottom-nav-v25 button {
  border: 0;
  background: transparent;
  min-width: 92px;
  height: 58px;
  border-radius: 22px;
  display: grid;
  place-items: center;
  gap: 3px;
  color: #737992;
  font-weight: 900;
}

#relationship-bottom-nav-v25 button span {
  font-size: 22px;
  line-height: 1;
}

#relationship-bottom-nav-v25 button b {
  font-size: 12px;
}

#relationship-bottom-nav-v25 button.active {
  background: rgba(255, 255, 255, 0.96);
  color: #ff68a3;
  box-shadow: 0 12px 28px rgba(117, 80, 150, 0.10);
}

#relationship-clean-v24 {
  bottom: 82px !important;
}


/* === clean app v30 visual design === */
body > *:not(#app):not(#relationship-clean-v24):not(#relationship-bottom-nav-v25):not(script):not(style) { display: none !important; }
#relationship-clean-v24 {
  position: fixed;
  left: 0; right: 0; top: 50px; bottom: 82px;
  z-index: 40; overflow-y: auto;
  padding: 24px 22px 30px;
  background: radial-gradient(circle at 82% 0%, rgba(255,210,225,.92), transparent 38%), linear-gradient(180deg,#fff2fb 0%,#fbf4ff 100%);
}
#app { display:block !important; }
#relationship-clean-v24:empty,
#relationship-bottom-nav-v25:empty { display:none !important; }
#relationship-bottom-nav-v25 {
  position: fixed; left: 0; right: 0; bottom: 0; height: 82px; z-index: 9999;
  display: flex; align-items: center; justify-content: space-around; gap: 8px;
  padding: 10px 14px 12px; background: rgba(255,255,255,.94);
  border-top: 1px solid rgba(180,150,210,.18); box-shadow: 0 -14px 34px rgba(80,55,120,.08); backdrop-filter: blur(18px);
}
#relationship-bottom-nav-v25 button { border:0; background:transparent; min-width:92px; height:58px; border-radius:22px; display:grid; place-items:center; gap:3px; color:#737992; font-weight:900; }
#relationship-bottom-nav-v25 button span { font-size:22px; line-height:1; }
#relationship-bottom-nav-v25 button b { font-size:12px; }
#relationship-bottom-nav-v25 button.active { background:#fff; color:#ff68a3; box-shadow:0 12px 28px rgba(117,80,150,.10); }
.v30-section { display:grid; gap:14px; margin-bottom:24px; }
.v30-section h2 { margin:0; color:#4b506c; font-size:18px; font-weight:950; }
.v30-pair-card, .v30-feed-head, .v30-wizard-card, .v30-profile { border-radius:30px; background:rgba(255,255,255,.90); box-shadow:0 18px 44px rgba(109,77,150,.12); border:1px solid rgba(170,130,210,.14); }
.v30-pair-card { display:flex; align-items:center; gap:14px; padding:16px; }
.v30-pair-icon, .v30-profile-icon { width:58px; height:58px; border-radius:22px; display:grid; place-items:center; background:linear-gradient(135deg,#f8c8ee,#d8b5ff); font-size:25px; flex:0 0 auto; }
.v30-pair-body { flex:1; min-width:0; }
.v30-pair-title, .v30-screen-title { color:#13204b; font-size:18px; font-weight:950; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.v30-pair-subtitle, .v30-screen-subtitle { margin-top:4px; color:#8288a3; font-size:13px; font-weight:750; }
.v30-pair-actions { display:flex; gap:8px; }
.v30-primary-btn, .v30-secondary-btn, #v30JoinBtn, .v30-wide, .v30-actions button, .v30-floating-signal { border:0; border-radius:18px; padding:13px 16px; color:#fff; font-weight:950; background:linear-gradient(135deg,#d985f4,#8957e8); }
.v30-secondary-btn, .v30-actions button:first-child { color:#7354d2; background:rgba(139,87,232,.10); }
.v30-code, .v30-summary { margin-top:8px; display:inline-block; padding:7px 10px; border-radius:13px; background:rgba(139,87,232,.10); color:#7152cc; font-weight:950; letter-spacing:.35px; }
.v30-empty { padding:18px; border-radius:24px; background:rgba(255,255,255,.72); color:#747b97; font-weight:850; line-height:1.4; }
.v30-join { display:flex; gap:10px; padding:12px; border-radius:25px; background:rgba(255,255,255,.72); }
.v30-join input { flex:1; min-width:0; border:1px solid rgba(150,130,190,.28); border-radius:18px; padding:14px 15px; font-size:15px; outline:none; background:white; }
.v30-create { border:0; width:100%; display:flex; align-items:center; gap:16px; padding:18px; border-radius:29px; background:linear-gradient(135deg,#df90eb,#ffc49b); color:white; text-align:left; box-shadow:0 18px 44px rgba(194,116,180,.18); }
.v30-create span { width:52px; height:52px; border-radius:20px; display:grid; place-items:center; background:rgba(255,255,255,.72); color:#ff6faa; font-size:30px; flex:0 0 auto; }
.v30-create b { display:block; font-size:19px; font-weight:950; }
.v30-create small { display:block; margin-top:4px; font-size:13px; opacity:.92; }
.v30-profile { display:flex; align-items:center; gap:14px; padding:18px; }
.v30-feed-head { display:flex; align-items:center; gap:14px; padding:16px; margin-bottom:18px; }
.v30-back { border:0; width:50px; height:50px; border-radius:18px; background:rgba(139,87,232,.10); color:#7354d2; font-size:23px; font-weight:900; }
.v30-feed-list { display:grid; gap:14px; }
.v30-signal-card { position:relative; display:flex; gap:16px; padding:18px; border-radius:30px; background:rgba(255,255,255,.90); box-shadow:0 18px 44px rgba(109,77,150,.10); border:1px solid rgba(170,130,210,.14); }
.v30-signal-icon { position:absolute; top:14px; left:16px; width:28px; height:28px; border-radius:50%; display:grid; place-items:center; background:rgba(139,87,232,.10); color:#7354d2; font-weight:900; }
.v30-signal-orb { width:92px; height:92px; border-radius:50%; display:grid; place-items:center; flex:0 0 auto; font-size:34px; background:radial-gradient(circle,rgba(217,133,244,.28),rgba(255,255,255,.78)); box-shadow:inset 0 0 26px rgba(217,133,244,.14); margin-top:18px; }
.v30-signal-body { flex:1; min-width:0; padding-top:20px; }
.v30-signal-title { color:#13204b; font-size:22px; font-weight:950; }
.v30-signal-text { margin-top:10px; color:#586079; font-size:15px; font-weight:750; line-height:1.45; }
.v30-signal-meta { margin-top:12px; color:#8a8fa8; font-size:12px; font-weight:850; }
.v30-floating-signal { width:100%; margin-top:18px; }
.v30-screen { display:grid; gap:16px; }
.v30-wizard-card { --accent:#8957e8; padding:20px; }
.v30-wizard-card h2 { margin:14px 0 6px; color:#13204b; font-size:23px; font-weight:950; }
.v30-wizard-card p { margin:0 0 18px; color:#747b97; font-size:14px; font-weight:750; line-height:1.4; }
.v30-flower { height:230px; display:grid; place-items:center; border-radius:28px; background:radial-gradient(circle at 50% 45%,rgba(255,255,255,.96),transparent 28%),radial-gradient(circle at 36% 36%,rgba(120,170,255,.22),transparent 26%),radial-gradient(circle at 64% 36%,rgba(255,180,120,.24),transparent 26%),radial-gradient(circle at 36% 66%,rgba(255,120,180,.20),transparent 26%),radial-gradient(circle at 64% 66%,rgba(120,220,150,.22),transparent 26%),linear-gradient(135deg,rgba(255,240,250,.92),rgba(243,238,255,.92)); }
.v30-flower-center { width:130px; height:130px; border-radius:50%; display:grid; place-items:center; text-align:center; padding:16px; background:white; color:var(--accent); box-shadow:0 18px 40px rgba(95,70,150,.16); }
.v30-flower-center span { font-size:34px; }
.v30-flower-center b { font-size:15px; font-weight:950; }
.v30-range { width:100%; accent-color:var(--accent); }
.v30-range-labels { display:flex; justify-content:space-between; color:#858aa3; font-size:12px; font-weight:850; margin-top:8px; }
.v30-wide { width:100%; margin-top:20px; }
.v30-bubble-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.v30-bubble, .v30-list-item { border:1px solid rgba(170,130,210,.14); border-radius:24px; padding:15px; background:rgba(255,255,255,.84); color:#13204b; font-weight:950; text-align:left; box-shadow:0 10px 24px rgba(109,77,150,.08); }
.v30-bubble { min-height:98px; display:grid; align-content:center; gap:8px; }
.v30-bubble span { font-size:27px; }
.v30-bubble.active, .v30-list-item.active { border-color:rgba(137,87,232,.48); background:linear-gradient(135deg,rgba(217,133,244,.24),rgba(137,87,232,.16)); }
.v30-list { display:grid; gap:10px; }
.v30-list-item { display:flex; align-items:center; gap:12px; }
.v30-list-item span { font-size:23px; }
.v30-actions { display:flex; gap:12px; margin-top:18px; }
.v30-actions button { flex:1; }
.v30-textarea { width:100%; min-height:130px; resize:vertical; border:1px solid rgba(150,130,190,.28); border-radius:22px; padding:15px; font-size:15px; outline:none; background:white; color:#13204b; }
.v30-success { text-align:center; }
.v30-success-icon { width:76px; height:76px; border-radius:28px; display:grid; place-items:center; margin:0 auto 12px; font-size:36px; background:linear-gradient(135deg,#ffd5e8,#d7b2ff); }
@media (max-width: 420px) { .v30-pair-card { align-items:flex-start; } .v30-pair-actions { flex-direction:column; } .v30-bubble-grid { grid-template-columns:1fr; } .v30-flower { height:180px; } }

/* === signal clean v37: fixed pair send + stable screens + clean history === */
.sig37-page { width:min(100%, 760px); margin:0 auto; padding:14px clamp(8px,3.8vw,16px) calc(128px + env(safe-area-inset-bottom, 0px)); padding:clamp(10px,2.2svh,18px) clamp(8px,3.8vw,16px) calc(128px + env(safe-area-inset-bottom, 0px)); }
.sig37-head { display:flex; align-items:center; gap:14px; padding:12px 18px; padding:clamp(10px,1.8svh,14px) 18px; margin-bottom:14px; margin-bottom:clamp(10px,2svh,18px); border-radius:28px; background:rgba(255,255,255,.92); box-shadow:0 18px 44px rgba(130,90,160,.08); }
.sig37-back { width:52px; height:52px; border:0; border-radius:18px; background:#efe8fb; color:#7b55e8; font-size:28px; font-weight:900; }
.sig37-title { color:#071e55; font-size:20px; font-weight:950; line-height:1.15; }
.sig37-sub { margin-top:6px; color:#858aa5; font-size:13px; font-weight:850; }
.sig37-card, .sig37-history-card { padding:clamp(14px,3.2vw,20px); border-radius:30px; background:rgba(255,255,255,.92); box-shadow:0 18px 44px rgba(130,90,160,.08); }
.sig37-flower { position:relative; width:min(88vw,540px); height:min(88vw,540px); width:clamp(292px, min(88vw, 48svh), 540px); height:clamp(292px, min(88vw, 48svh), 540px); margin:0 auto 14px; margin:0 auto clamp(12px,2svh,18px); border-radius:32px; background:radial-gradient(circle at 35% 25%,rgba(218,195,255,.26),transparent 31%),radial-gradient(circle at 65% 30%,rgba(255,210,218,.24),transparent 33%),radial-gradient(circle at 58% 75%,rgba(204,241,220,.24),transparent 30%); transition:background .35s ease, width .2s ease, height .2s ease; }
.sig37-petal { position:absolute; width:36%; height:36%; border:0; border-radius:52% 52% 46% 46%; background:linear-gradient(180deg,rgba(255,255,255,.68),rgba(255,255,255,.42)),radial-gradient(circle at 50% 55%,color-mix(in srgb,var(--c) 24%,white),transparent 72%); box-shadow:inset 0 0 0 5px rgba(255,255,255,.56),0 14px 34px rgba(155,120,190,.12); display:flex; flex-direction:column; justify-content:center; align-items:center; gap:8px; gap:clamp(5px,1.2svh,10px); transition:transform .28s ease, box-shadow .28s ease, filter .28s ease, background .28s ease; }
.sig37-petal.active { transform:scale(1.06); box-shadow:inset 0 0 0 6px rgba(255,255,255,.78),0 20px 44px rgba(145,95,220,.22); filter:saturate(1.15); }
.sig37-petal-icon { font-size:clamp(24px,5.8vw,36px); color:var(--c); line-height:1; }
.sig37-petal-text { color:#08215a; font-size:clamp(12px,2.9vw,16px); font-weight:950; line-height:1.08; max-width:86%; overflow-wrap:anywhere; }
.sig37-petal-1 { left:32%; top:2%; } .sig37-petal-2 { right:3%; top:22%; } .sig37-petal-3 { right:10%; bottom:9%; } .sig37-petal-4 { left:32%; bottom:0; } .sig37-petal-5 { left:10%; bottom:9%; } .sig37-petal-6 { left:3%; top:22%; }
.sig37-center { position:absolute; left:50%; top:50%; width:34%; height:34%; transform:translate(-50%,-50%); border-radius:50%; background:rgba(255,255,255,.96); box-shadow:0 20px 44px rgba(145,95,220,.16); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:clamp(4px,.9svh,7px); text-align:center; transition:transform .28s ease, box-shadow .28s ease; }
.sig37-center-icon { color:#9a78f2; font-size:clamp(24px,5.4vw,32px); font-weight:900; line-height:1; } .sig37-center-title { color:#08215a; font-size:clamp(17px,4.6vw,22px); font-weight:950; line-height:1.05; max-width:88%; overflow-wrap:anywhere; } .sig37-center-sub { color:#8a8fa7; font-size:clamp(10px,2.5vw,13px); font-weight:750; line-height:1.18; }
.sig37-slider-box { padding:clamp(14px,3.4vw,20px); border-radius:26px; background:rgba(255,255,255,.88); box-shadow:inset 0 0 0 1px rgba(145,110,180,.08); } .sig37-slider-title { display:flex; align-items:baseline; justify-content:space-between; gap:12px; color:#08215a; font-size:clamp(17px,4.4vw,18px); font-weight:950; margin-bottom:16px; } .sig37-slider-current { color:#8d57ef; font-size:clamp(12px,3.1vw,14px); white-space:nowrap; }
.sig37-slider { width:100%; appearance:none; height:10px; border-radius:999px; background:linear-gradient(90deg,#83a1ff,#d781f0,#f6b74d); outline:none; } .sig37-slider::-webkit-slider-thumb { appearance:none; width:34px; height:34px; border-radius:50%; background:white; border:4px solid #eadff8; box-shadow:0 8px 22px rgba(147,91,230,.28); } .sig37-slider::-moz-range-thumb { width:34px; height:34px; border-radius:50%; background:white; border:4px solid #eadff8; box-shadow:0 8px 22px rgba(147,91,230,.28); }
.sig37-scale { display:grid; grid-template-columns:repeat(5, minmax(0,1fr)); gap:4px; margin-top:14px; color:#858aa5; font-size:clamp(10px,2.55vw,14px); font-weight:850; line-height:1.12; text-align:center; }
.sig37-scale span:first-child { text-align:left; }
.sig37-scale span:last-child { text-align:right; }
.sig37-primary, .sig37-secondary { width:100%; min-height:58px; border:0; border-radius:22px; font-size:17px; font-weight:950; } .sig37-primary { margin-top:18px; background:linear-gradient(90deg,rgba(218,204,241,.72),rgba(230,218,247,.72)); color:#b5aacd; } .sig37-primary.ready { background:linear-gradient(90deg,#d97be8,#8e58f0); color:white; box-shadow:0 14px 30px rgba(146,91,230,.22); } .sig37-secondary { background:#efe8fb; color:#7d55e9; margin-top:12px; }
.sig37-note { margin-top:16px; text-align:center; color:#9995aa; font-size:14px; font-weight:750; }
.sig37-picked { display:inline-flex; flex-direction:column; gap:4px; padding:14px 18px; margin-bottom:18px; border-radius:22px; background:rgba(239,232,251,.82); } .sig37-picked span { color:#9292aa; font-size:12px; font-weight:850; } .sig37-picked b { color:#7d55e9; font-size:18px; font-weight:950; }
.sig37-section-title { color:#08215a; font-size:20px; font-weight:950; margin-bottom:16px; }
.sig37-list { display:flex; flex-direction:column; gap:12px; } .sig37-choice { width:100%; min-height:74px; border:0; border-radius:24px; background:rgba(255,255,255,.94); box-shadow:inset 0 0 0 1px rgba(140,110,180,.09),0 10px 28px rgba(130,90,160,.06); display:grid; grid-template-columns:44px 1fr 28px; align-items:center; gap:12px; padding:14px 18px; text-align:left; } .sig37-choice.active { background:linear-gradient(90deg,rgba(232,216,255,.96),rgba(255,232,247,.92)); box-shadow:inset 0 0 0 2px rgba(147,91,230,.24),0 14px 34px rgba(147,91,230,.13); } .sig37-choice span { font-size:26px; } .sig37-choice b { color:#08215a; font-size:17px; font-weight:950; } .sig37-choice i { color:#8d57ef; font-size:32px; font-style:normal; }
.sig37-actions { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:18px; } .sig37-actions .sig37-primary, .sig37-actions .sig37-secondary { margin-top:0; }
.sig37-textarea { width:100%; min-height:140px; resize:vertical; border:0; border-radius:24px; padding:18px; background:rgba(255,255,255,.94); box-shadow:inset 0 0 0 1px rgba(140,110,180,.14); color:#08215a; font-size:16px; font-weight:750; outline:none; }
.sig37-summary { display:flex; flex-direction:column; gap:12px; } .sig37-summary div { padding:14px 16px; border-radius:20px; background:rgba(255,255,255,.88); } .sig37-summary span { display:block; color:#9292aa; font-size:12px; font-weight:850; margin-bottom:5px; } .sig37-summary b { color:#08215a; font-size:17px; font-weight:950; }
.sig37-success { text-align:center; } .sig37-success-icon { font-size:54px; margin:14px 0; } .sig37-success p { color:#858aa5; font-weight:800; }
.sig37-loading, .sig37-empty { padding:28px; text-align:center; color:#858aa5; font-weight:850; }
.sig37-signal-item { display:flex; gap:14px; padding:16px; border-radius:24px; background:rgba(255,255,255,.94); box-shadow:0 10px 28px rgba(130,90,160,.06); margin-bottom:12px; } .sig37-signal-avatar { width:58px; height:58px; border-radius:22px; background:#f1e7fb; display:flex; align-items:center; justify-content:center; font-size:28px; flex:0 0 auto; } .sig37-signal-main { flex:1; min-width:0; } .sig37-signal-top { display:flex; justify-content:space-between; gap:10px; align-items:flex-start; } .sig37-signal-top b { color:#08215a; font-size:18px; font-weight:950; } .sig37-signal-top span { color:#9b98ad; font-size:12px; font-weight:850; white-space:nowrap; } .sig37-signal-line { color:#555f88; font-size:14px; font-weight:850; margin-top:5px; } .sig37-signal-body { color:#08215a; font-size:15px; font-weight:750; margin-top:10px; padding:10px 12px; border-radius:16px; background:#fbf8ff; } .sig37-signal-from { color:#9b98ad; font-size:12px; font-weight:850; margin-top:8px; }
@media(max-width:680px){ .sig37-page{padding:10px 8px calc(118px + env(safe-area-inset-bottom, 0px))}.sig37-title{font-size:17px}.sig37-actions{gap:10px}.sig37-choice b{font-size:15px}.sig37-signal-top{flex-direction:column;gap:2px} }
@media(max-height:760px){ .sig37-head{padding:8px 10px;margin-bottom:8px;border-radius:22px}.sig37-back{width:42px;height:42px;border-radius:15px;font-size:23px}.sig37-sub{display:none}.sig37-page{padding-top:8px}.sig37-flower{width:min(86vw,430px);height:min(86vw,430px);width:clamp(270px, min(86vw, 42svh), 430px);height:clamp(270px, min(86vw, 42svh), 430px)}.sig37-slider-box{padding:14px}.sig37-primary,.sig37-secondary{min-height:52px}.sig37-note{margin-top:10px} }
@media(max-height:680px){ .sig37-flower{width:min(84vw,360px);height:min(84vw,360px);width:clamp(244px, min(84vw, 38svh), 360px);height:clamp(244px, min(84vw, 38svh), 360px)}.sig37-petal{box-shadow:inset 0 0 0 3px rgba(255,255,255,.56),0 10px 24px rgba(155,120,190,.10)}.sig37-slider-title{margin-bottom:10px}.sig37-scale{margin-top:10px}.sig37-primary{margin-top:12px} }

/* v49: single-controller UI helpers */
body.rs-loading::after {
  content: "";
  position: fixed;
  right: 18px;
  bottom: calc(76px + env(safe-area-inset-bottom, 0px));
  z-index: 9998;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 3px solid rgba(130, 138, 160, .25);
  border-top-color: rgba(240, 105, 157, .9);
  animation: rsSpin .75s linear infinite;
}

@keyframes rsSpin { to { transform: rotate(360deg); } }

.empty-state {
  padding: 22px;
  border-radius: 24px;
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(255,255,255,.62);
  box-shadow: 0 18px 50px rgba(82, 64, 106, .08);
}

.empty-state h3 {
  margin: 0 0 8px;
  font-size: 20px;
  line-height: 1.15;
}

.empty-state p {
  margin: 0 0 16px;
  color: #747c91;
  line-height: 1.35;
}

.pair-card {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 14px;
  align-items: center;
  border-radius: 24px;
  padding: 16px;
}

.pair-code {
  display: inline-flex;
  margin-top: 12px;
  padding: 8px 12px;
  border-radius: 14px;
  background: rgba(147, 104, 232, .1);
  color: #4e5570;
  font-weight: 800;
}

.pair-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 118px;
}

.pair-actions .rename-pair-btn {
  width: auto;
  height: 48px;
  padding: 0 16px;
  font-size: 14px;
  white-space: nowrap;
}

.message-card {
  margin: 0 0 12px;
  padding: 16px;
  border-radius: 22px;
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(255,255,255,.62);
  box-shadow: 0 14px 40px rgba(82, 64, 106, .08);
}

.message-card strong,
.message-card span {
  display: block;
}

.message-card span {
  margin-top: 4px;
  color: #f0699d;
  font-weight: 800;
}

.message-card p {
  margin: 10px 0 0;
  color: #646d82;
}

.topic-grid {
  display: grid;
  gap: 10px;
}

.topic-choice {
  width: 100%;
  min-height: 54px;
  border: 1px solid rgba(211, 203, 226, .72);
  border-radius: 18px;
  background: rgba(255,255,255,.78);
  color: #29324c;
  font-weight: 800;
  text-align: left;
  padding: 12px 14px;
}

.topic-choice.active {
  border-color: rgba(240, 105, 157, .65);
  background: rgba(255, 231, 240, .95);
  color: #c94880;
}

.flower-petal.active {
  box-shadow: 0 18px 36px rgba(240,105,157,.16);
}

@media (max-width: 430px) {
  .app-shell {
    padding-left: 10px;
    padding-right: 10px;
  }

  .pair-card {
    grid-template-columns: 1fr;
  }

  .pair-actions {
    display: flex;
    flex-direction: column;
    min-width: 0;
  }

  .pair-actions .rename-pair-btn {
    height: 48px;
    padding: 0 12px;
    font-size: 13px;
  }
}