:root {
  color-scheme: dark;
  --bg: #06191c;
  --card: rgba(9, 35, 39, 0.74);
  --card-strong: rgba(7, 29, 34, 0.96);
  --line: rgba(196, 239, 220, 0.15);
  --text: #f4f6dc;
  --muted: #a7beb4;
  --purple: #7ea4dd;
  --purple-light: #bfdbdc;
  --cyan: #7ed9bd;
  --danger: #ed827e;
  --success: #a9e279;
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }

body {
  min-width: 320px;
  min-height: 100vh;
  margin: 0;
  overflow-x: hidden;
  color: var(--text);
  background:
    radial-gradient(circle at 70% -10%, rgba(104, 164, 187, 0.23), transparent 34%),
    radial-gradient(circle at 10% 100%, rgba(39, 110, 83, 0.25), transparent 39%),
    linear-gradient(155deg, #061d26 0%, #09272d 42%, #061b1b 100%);
}

button, input, select { font: inherit; }
button { color: inherit; }

.background-glow {
  position: fixed;
  z-index: -1;
  width: 360px;
  height: 360px;
  border-radius: 999px;
  filter: blur(110px);
  opacity: 0.2;
  pointer-events: none;
}

.glow-one { top: 10%; left: -160px; background: #3e81ab; }
.glow-two { right: -140px; bottom: 3%; background: #4a9d6e; }

.page-shell {
  width: min(1400px, calc(100% - 64px));
  min-height: 100vh;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
}

.topbar {
  min-height: 88px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--line);
}

.brand {
  display: inline-flex;
  gap: 12px;
  align-items: center;
  color: var(--text);
  font-size: 18px;
  font-weight: 800;
  text-decoration: none;
}

.brand-mark {
  width: 38px;
  height: 38px;
  border-radius: 50% 45% 50% 42%;
  display: flex;
  gap: 3px;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #b2d77a, #5ba989);
  box-shadow: 0 10px 30px rgba(62, 148, 105, 0.28);
}

.brand-mark span { width: 3px; border-radius: 5px; background: white; }
.brand-mark span:nth-child(1) { height: 10px; }
.brand-mark span:nth-child(2) { height: 19px; }
.brand-mark span:nth-child(3) { height: 14px; }

.topbar-meta { display: flex; align-items: center; gap: 18px; }
.achievements-button { width: 32px; height: 32px; display: grid; place-items: center; padding: 0; border: 1px solid rgba(226,204,255,.2); border-radius: 11px; cursor: pointer; color: #e5c5ff; background: rgba(133,79,196,.13); transition: transform .18s ease, background .18s ease, border-color .18s ease; }.achievements-button:hover { border-color: rgba(226,185,255,.6); background: rgba(159,92,229,.26); transform: translateY(-2px); }.achievements-button svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.test-badge { padding: 8px 12px; border: 1px solid rgba(193, 230, 184, 0.22); border-radius: 999px; color: #c1e6b8; background: rgba(130, 185, 116, 0.08); font-size: 12px; }
.online { color: var(--muted); font-size: 13px; }
.online b { color: var(--text); font-weight: 600; }
.online i { display: inline-block; width: 7px; height: 7px; margin-right: 7px; border-radius: 50%; background: var(--success); box-shadow: 0 0 14px var(--success); }

.setup-layout {
  flex: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(460px, 0.82fr);
  gap: clamp(62px, 8vw, 132px);
  align-items: center;
  padding: 68px 0 76px;
}

.intro-copy { position: relative; max-width: 620px; }
.eyebrow, .step-label { color: #bde3bd; font-size: 11px; font-weight: 800; letter-spacing: 0.13em; text-transform: uppercase; }
.intro-copy h1 { margin: 19px 0 24px; font-family: ui-rounded, "Trebuchet MS", system-ui, sans-serif; font-size: clamp(48px, 5.3vw, 78px); line-height: 1.02; letter-spacing: -0.06em; }
.intro-copy h1 em { color: #b9e2a2; font-style: normal; text-shadow: 0 0 30px rgba(174, 220, 128, 0.18); }
.intro-copy > p { max-width: 620px; margin: 0; color: var(--muted); font-size: 18px; line-height: 1.75; }

.benefits { display: grid; gap: 14px; margin: 33px 0 0; padding: 0; list-style: none; color: #c8cede; font-size: 15px; }
.benefits span { display: inline-grid; width: 22px; height: 22px; margin-right: 9px; place-items: center; border-radius: 50% 50% 45% 50%; color: #cce9a9; background: rgba(137, 204, 119, 0.11); font-size: 11px; font-weight: 800; }

.night-vibe {
  position: relative;
  width: min(100%, 560px);
  height: 168px;
  margin-top: 26px;
  overflow: hidden;
  border: 1px solid rgba(186, 226, 191, 0.12);
  border-radius: 48% 52% 30% 30% / 36% 37% 20% 20%;
  background:
    radial-gradient(circle at 72% 18%, rgba(189, 219, 181, 0.24) 0 2px, transparent 3px),
    radial-gradient(circle at 30% 35%, rgba(203, 233, 203, 0.22) 0 1px, transparent 2px),
    linear-gradient(180deg, rgba(16, 60, 76, 0.1), rgba(9, 53, 46, 0.6));
}

.night-vibe::before,
.night-vibe::after {
  position: absolute;
  right: -6%;
  bottom: -35px;
  left: -6%;
  height: 84px;
  border-radius: 50% 50% 0 0;
  content: "";
}

.night-vibe::before { background: #0a3c36; transform: rotate(-2deg); }
.night-vibe::after { bottom: -48px; background: #082b2a; transform: rotate(3deg); }
.moon { position: absolute; top: 21px; right: 58px; width: 16px; height: 16px; border-radius: 50%; background: #cfe7bd; box-shadow: 0 0 20px rgba(205, 234, 182, 0.75); }
.star { position: absolute; z-index: 1; width: 3px; height: 3px; border-radius: 50%; background: #daefd1; box-shadow: 0 0 9px #d0ebbd; }
.star-one { top: 37px; left: 19%; }.star-two { top: 17px; left: 48%; }.star-three { top: 51px; right: 25%; }
.flower { position: absolute; z-index: 3; bottom: 17px; width: 13px; height: 13px; border: 4px dotted #e4f6e5; border-radius: 50%; background: #d6c96c; box-shadow: 0 0 12px rgba(212, 244, 219, 0.55); }
.flower::after { position: absolute; bottom: -19px; left: 2px; width: 2px; height: 22px; background: #74ac79; content: ""; transform: rotate(8deg); transform-origin: top; }
.flower-one { left: 12%; }.flower-two { right: 14%; bottom: 33px; transform: scale(0.7); }.flower-three { right: 37%; bottom: 20px; transform: scale(0.56); }.flower-four { left: 35%; bottom: 30px; transform: scale(0.48); }
.cat { position: absolute; z-index: 4; bottom: 16px; left: 48%; width: 69px; height: 55px; border-radius: 46% 46% 40% 40%; background: #071414; box-shadow: 0 10px 20px rgba(0, 0, 0, 0.45); transform: translateX(-50%); }
.cat-ear { position: absolute; top: -20px; width: 28px; height: 30px; border-radius: 8px 90% 10px 90%; background: #071414; }
.ear-left { left: 2px; transform: rotate(-22deg); }.ear-right { right: 2px; transform: scaleX(-1) rotate(-22deg); }
.cat-eye { position: absolute; top: 23px; width: 10px; height: 8px; border-radius: 50%; background: #cde38e; box-shadow: 0 0 9px #cde38e; }
.eye-left { left: 16px; }.eye-right { right: 16px; }.cat-nose { position: absolute; top: 35px; left: 31px; width: 6px; height: 4px; border-radius: 50%; background: #53706d; }

.glass-card { border: 1px solid var(--line); border-radius: 28px 23px 30px 24px; background: var(--card); box-shadow: 0 28px 80px rgba(0, 13, 15, 0.36); backdrop-filter: blur(22px); }
.profile-card { padding: 34px; }
.card-heading, .section-heading { display: flex; align-items: flex-start; justify-content: space-between; }
.card-heading h2, .section-heading h2 { margin: 6px 0 0; font-size: 27px; letter-spacing: -0.03em; }
.age-badge { display: grid; width: 43px; height: 43px; place-items: center; border-radius: 50% 50% 40% 50%; background: rgba(169, 226, 121, 0.12); color: #d1eba8; font-size: 13px; font-weight: 800; }

.photo-picker-wrap { position: relative; margin: 28px 0; }.photo-picker { display: flex; gap: 16px; align-items: center; margin: 0; padding: 16px; border: 1px dashed rgba(185, 167, 255, 0.28); border-radius: 18px; cursor: pointer; transition: 0.2s ease; }
.photo-picker:hover { border-color: #b7dfa9; background: rgba(146, 205, 126, 0.07); }
.photo-picker input { display: none; }
.photo-preview { width: 64px; height: 64px; flex: 0 0 auto; display: grid; place-items: center; overflow: hidden; border-radius: 17px; background: rgba(255, 255, 255, 0.06); background-position: center; background-size: cover; }
.photo-preview svg { width: 25px; fill: none; stroke: var(--muted); stroke-width: 1.7; stroke-linecap: round; }
.photo-picker b, .photo-picker small { display: block; }
.photo-picker b { margin-bottom: 4px; font-size: 13px; }
.photo-picker small { color: var(--muted); font-size: 11px; }
.remove-photo-button { position: absolute; right: 10px; bottom: 9px; padding: 4px 7px; border: 0; border-radius: 8px; cursor: pointer; color: #e7d6ff; background: rgba(39, 17, 70, .72); font-size: 9px; font-weight: 800; }.remove-photo-button:hover { color: #fff; background: rgba(188, 95, 142, .55); }

.field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
.field-wide { grid-column: 1 / -1; }
.field { display: grid; gap: 8px; }
.field > span, .age-filter > span { color: #c7cede; font-size: 12px; font-weight: 600; }
.field input, .field select, .field textarea, .age-inputs label { width: 100%; min-height: 54px; border: 1px solid var(--line); border-radius: 15px; outline: none; color: var(--text); background: rgba(5, 9, 18, 0.48); transition: 0.2s ease; }
.field input, .field select { padding: 0 14px; }
.field textarea { min-height: 70px; padding: 12px 14px; resize: vertical; font: inherit; line-height: 1.45; }
.field input:focus, .field select:focus, .field textarea:focus, .age-inputs label:focus-within { border-color: #a1d28f; box-shadow: 0 0 0 3px rgba(161, 210, 143, 0.13); }
.bio-field > span { display: flex; align-items: center; justify-content: space-between; }.bio-field small { color: var(--muted); font-size: 10px; font-weight: 700; }.bio-field small.limit { color: #ff8097; }
select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, #8f98ad 50%), linear-gradient(135deg, #8f98ad 50%, transparent 50%) !important; background-position: calc(100% - 18px) 20px, calc(100% - 13px) 20px !important; background-size: 5px 5px, 5px 5px !important; background-repeat: no-repeat !important; }

.agreement { display: flex; gap: 10px; align-items: flex-start; margin: 20px 0; color: var(--muted); font-size: 11px; line-height: 1.55; cursor: pointer; }
.agreement input { width: 16px; height: 16px; margin: 1px 0 0; accent-color: #9ed279; }

.primary-button, .search-button { border: 0; cursor: pointer; font-weight: 800; transition: transform 0.2s ease, box-shadow 0.2s ease; }
.primary-button { width: 100%; min-height: 53px; display: flex; align-items: center; justify-content: center; gap: 8px; border-radius: 18px 15px 19px 16px; background: linear-gradient(135deg, #a9d879, #62ac8d); box-shadow: 0 14px 32px rgba(70, 151, 100, 0.28); color: #123027; }
.primary-button:hover, .search-button:hover { transform: translateY(-2px); }
.primary-button svg { width: 18px; fill: none; stroke: currentColor; stroke-width: 2; }
.privacy-note { margin: 12px 0 0; text-align: center; color: #727d93; font-size: 10px; }

.chat-layout { flex: 1; display: grid; grid-template-columns: 285px minmax(0, 1fr); gap: 24px; align-items: stretch; padding: 34px 0; }
.filters-card { align-self: start; padding: 24px; }
.filters-card .section-heading { margin-bottom: 24px; }
.filters-card .section-heading h2 { font-size: 20px; }
.filters-card > .field { margin-bottom: 20px; }
.age-filter { display: grid; gap: 9px; }
.age-inputs { display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px; align-items: center; }
.age-inputs > span { color: #68738a; }
.age-inputs label { min-width: 0; display: flex; align-items: center; padding: 0 10px; }
.age-inputs small { margin-right: 5px; color: #737e92; font-size: 10px; }
.age-inputs input { width: 100%; min-width: 0; border: 0; outline: 0; color: var(--text); background: transparent; }

.safety-box { display: flex; gap: 11px; margin-top: 26px; padding: 14px; border-radius: 18px 14px 19px 15px; background: rgba(163, 215, 122, 0.08); }
.safety-box svg { width: 22px; flex: 0 0 auto; fill: none; stroke: var(--success); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.safety-box b, .safety-box small { display: block; }
.safety-box b { margin-bottom: 4px; color: #bdebd3; font-size: 11px; }
.safety-box small { color: #79958a; font-size: 9px; line-height: 1.4; }
.auto-skip { display: flex; align-items: center; justify-content: space-between; margin-top: 18px; padding: 3px 2px; cursor: pointer; user-select: none; }.auto-skip span { color: #e9ddf8; font-size: 12px; font-weight: 800; }.auto-skip input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }.auto-skip i { position: relative; width: 42px; height: 25px; flex: 0 0 auto; border-radius: 999px; background: #4a4156; box-shadow: inset 0 1px 2px rgba(0,0,0,.36); transition: background .22s ease; }.auto-skip i::after { position: absolute; top: 3px; left: 3px; width: 19px; height: 19px; border-radius: 50%; content: ""; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.38); transition: transform .22s cubic-bezier(.2,.9,.3,1.15); }.auto-skip input:checked + i { background: #a36dff; }.auto-skip input:checked + i::after { transform: translateX(17px); }.auto-skip:focus-within i { outline: 2px solid rgba(207, 145, 255, .55); outline-offset: 2px; }

.call-card { min-height: 610px; display: flex; flex-direction: column; overflow: hidden; }
.call-topline { min-height: 78px; display: flex; align-items: center; justify-content: space-between; padding: 15px 23px; border-bottom: 1px solid var(--line); }
.status-pill { display: inline-flex; align-items: center; gap: 8px; padding: 8px 11px; border-radius: 999px; color: var(--muted); background: rgba(255, 255, 255, 0.04); font-size: 11px; }
.status-pill i { width: 7px; height: 7px; border-radius: 50%; background: #68738a; }
.status-pill.searching i { background: #f5bd63; box-shadow: 0 0 10px #f5bd63; }
.status-pill.connected i { background: var(--success); box-shadow: 0 0 10px var(--success); }
.status-pill.error i { background: var(--danger); }

.profile-chip { min-height: 42px; display: flex; align-items: center; padding: 0 17px; border: 1px solid rgba(224, 202, 255, .18); border-radius: 13px; cursor: pointer; color: #eadcff; background: rgba(113, 74, 158, .13); font-size: 11px; font-weight: 800; transition: transform .18s ease, background .18s ease, border-color .18s ease; }.profile-chip:hover { border-color: rgba(222, 177, 255, .55); background: rgba(159, 99, 228, .2); transform: translateY(-1px); }
.mini-avatar { width: 46px; height: 46px; display: grid; place-items: center; overflow: hidden; border: 2px solid rgba(239, 211, 255, 0.35); border-radius: 50%; background: linear-gradient(135deg, #8dcf7d, #3d918a); background-position: center 38%; background-size: cover; box-shadow: 0 6px 17px rgba(10, 2, 25, 0.35); font-size: 12px; font-weight: 800; }
.mini-avatar.has-photo { filter: brightness(1.14) saturate(1.08); }
.profile-chip b, .profile-chip small { display: block; }
.profile-chip b { max-width: 100px; overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.profile-chip small { margin-top: 2px; color: var(--muted); font-size: 8px; }

.conversation-stage { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 35px 20px; }
.search-visual { position: relative; width: 210px; height: 210px; display: grid; flex: 0 0 auto; place-items: center; margin: -7px 0 18px; isolation: isolate; }
.search-aura { position: absolute; inset: 18px; z-index: -2; border-radius: 50%; opacity: .36; background: radial-gradient(circle, rgba(225, 152, 255, .34), rgba(148, 88, 255, .13) 42%, transparent 70%); filter: blur(12px); transition: opacity .5s ease, transform .5s ease; }
.search-orbit { position: absolute; border: 1px solid rgba(223, 182, 255, .18); border-radius: 50%; transition: border-color .5s ease, transform .5s ease; }
.orbit-one { width: 105px; height: 105px; }.orbit-two { width: 150px; height: 150px; }.orbit-three { width: 197px; height: 197px; }
.orbit-spark { position: absolute; z-index: 2; width: 8px; height: 8px; border-radius: 50%; opacity: .25; background: #f1d2ff; box-shadow: 0 0 12px #e7a9ff; transition: opacity .35s ease; }
.spark-one { top: 27px; left: 47px; }.spark-two { right: 22px; bottom: 56px; }.spark-three { bottom: 28px; left: 69px; }
.search-radar { position: relative; z-index: 1; width: 108px; height: 108px; overflow: hidden; border: 1px solid rgba(220, 195, 255, .38); border-radius: 50%; background: radial-gradient(circle at center, rgba(219, 183, 255, .12) 0 3px, transparent 4px), repeating-radial-gradient(circle at center, transparent 0 24px, rgba(220, 195, 255, .18) 25px 26px); box-shadow: inset 0 0 26px rgba(187, 126, 255, .1), 0 0 0 10px rgba(187, 126, 255, .035); }
.radar-line { position: absolute; top: 50%; left: 50%; width: 50%; height: 1px; transform-origin: left center; background: linear-gradient(90deg, rgba(240, 214, 255, .9), transparent); box-shadow: 0 0 12px rgba(220, 160, 255, .85); animation: radar-scan 2.4s linear infinite; }
.radar-point { position: absolute; width: 5px; height: 5px; border-radius: 50%; background: #f2d4ff; box-shadow: 0 0 12px #df9dff; animation: radar-ping 1.8s ease-in-out infinite; }.point-one { top: 25px; left: 64px; }.point-two { top: 66px; left: 31px; animation-delay: .55s; }.point-three { top: 78px; left: 79px; animation-delay: 1.05s; }
.partner-photo { position: absolute; z-index: 3; width: 118px; height: 118px; overflow: hidden; border: 2px solid transparent; border-radius: 50%; opacity: 0; background-color: #241442; background-position: center; background-repeat: no-repeat; background-size: cover; box-shadow: 0 17px 38px rgba(10, 3, 28, .46); cursor: zoom-in; transform: scale(.72) rotate(-7deg); transition: opacity .35s ease, transform .55s cubic-bezier(.18,.88,.31,1.24), border-color .25s ease, box-shadow .25s ease; }
.has-partner-photo .partner-photo { opacity: 1; transform: scale(1) rotate(0deg); }.has-partner-photo .search-radar { opacity: 0; transform: scale(.58); pointer-events: none; }.search-visual.has-partner-photo.speaking .partner-photo { border-color: #f3d5ff; box-shadow: 0 0 0 6px rgba(231, 160, 255, .12), 0 0 28px rgba(226, 141, 255, .88), 0 18px 38px rgba(10, 3, 28, .46); animation: partner-speak .9s ease-in-out infinite; }
.search-visual.has-partner-photo.connected .partner-photo { border-color: rgba(232, 205, 255, .55); }
.search-visual.aura-bronze .partner-photo { border-color: #e6a16c; box-shadow: 0 0 0 5px rgba(152,82,42,.3), 0 0 28px rgba(214,125,66,.7), 0 18px 38px rgba(10,3,28,.46); }
.search-visual.aura-silver .partner-photo { border-color: #e8f1ff; box-shadow: 0 0 0 5px rgba(156,183,212,.27), 0 0 31px rgba(200,226,255,.78), 0 18px 38px rgba(10,3,28,.46); }
.search-visual.aura-gold .partner-photo { border-color: #ffe172; box-shadow: 0 0 0 5px rgba(210,145,28,.3), 0 0 34px rgba(255,192,51,.88), 0 18px 38px rgba(10,3,28,.46); }
.search-visual.aura-diamond .partner-photo { border-color: #a3f4ff; box-shadow: 0 0 0 5px rgba(83,199,255,.25), 0 0 36px rgba(101,229,255,.92), 0 18px 38px rgba(10,3,28,.46); }
.search-visual.aura-brilliant .partner-photo { border-color: #fff; box-shadow: 0 0 0 5px rgba(224,178,255,.35), 0 0 20px rgba(255,255,255,.9), 0 0 46px rgba(195,106,255,.95), 0 18px 38px rgba(10,3,28,.46); animation: aura-shimmer 1.8s ease-in-out infinite; }
.search-scan { position: absolute; z-index: 1; width: 193px; height: 193px; border: 2px solid transparent; border-top-color: rgba(249, 216, 255, .86); border-right-color: rgba(249, 216, 255, .3); border-radius: 50%; opacity: 0; transform: rotate(-40deg); }
.search-visual.searching .search-aura, .search-visual.connecting .search-aura { opacity: .88; animation: search-breathe 1.7s ease-in-out infinite; }
.search-visual.searching .search-orbit { border-color: rgba(232, 184, 255, .47); animation: orbit-turn 4s linear infinite; }.search-visual.searching .orbit-two { animation-duration: 6s; animation-direction: reverse; }.search-visual.searching .orbit-three { animation-duration: 8s; }
.search-visual.searching .orbit-spark { opacity: 1; animation: spark-pop 1.55s ease-in-out infinite; }.search-visual.searching .spark-two { animation-delay: .5s; }.search-visual.searching .spark-three { animation-delay: 1s; }
.search-visual.connecting .search-aura { opacity: 1; background: radial-gradient(circle, rgba(255, 206, 247, .55), rgba(176, 113, 255, .22) 46%, transparent 70%); animation-duration: .8s; }.search-visual.connecting .search-orbit { border-color: rgba(255, 213, 249, .68); animation: orbit-turn 1.35s linear infinite; }.search-visual.connecting .orbit-two { animation-direction: reverse; }.search-visual.connecting .orbit-three { animation-duration: 2.1s; }.search-visual.connecting .orbit-spark { opacity: 1; animation: spark-pop .7s ease-in-out infinite; }.search-visual.connecting .search-radar { transform: scale(1.08); box-shadow: inset 0 0 35px rgba(220, 150, 255, .25), 0 0 44px rgba(216, 111, 255, .38); }.search-visual.connecting .search-scan { opacity: 1; animation: scan-turn .8s linear infinite; }
.search-visual.connected .search-aura { opacity: .65; background: radial-gradient(circle, rgba(211, 175, 255, .42), rgba(126, 93, 223, .16) 45%, transparent 70%); }.search-visual.connected .search-orbit { border-color: rgba(213, 190, 255, .36); }.search-visual.connected .orbit-two { transform: scale(.84); }.search-visual.connected .orbit-three { transform: scale(.72); }.search-visual.connected .orbit-spark { opacity: .7; }.search-visual.connected .search-radar { transform: scale(.92); opacity: .72; }
@keyframes search-breathe { 50% { transform: scale(1.13); opacity: .55; } } @keyframes orbit-turn { to { transform: rotate(360deg); } } @keyframes spark-pop { 50% { transform: scale(1.8); opacity: .35; } } @keyframes radar-scan { to { transform: rotate(360deg); } } @keyframes radar-ping { 50% { opacity: .18; transform: scale(.55); } } @keyframes scan-turn { to { transform: rotate(320deg); } } @keyframes partner-speak { 50% { transform: scale(1.035) rotate(.7deg); } } @keyframes aura-shimmer { 50% { filter: brightness(1.24); } }

.partner-copy { min-height: 84px; text-align: center; }
.partner-copy h1 { margin: 0 0 7px; font-size: 25px; letter-spacing: -0.035em; }
.partner-copy p { margin: 0; color: var(--muted); font-size: 12px; }
.partner-copy .partner-bio { max-width: 420px; margin: 9px auto 0; color: var(--text); font-size: 13px; font-weight: 700; line-height: 1.35; }

.single-tab-overlay { position: fixed; z-index: 100; inset: 0; display: grid; place-items: center; padding: 24px; background: rgba(4, 4, 9, .76); backdrop-filter: blur(12px); }.single-tab-card { width: min(100%, 390px); padding: 31px 29px; border: 1px solid rgba(236, 220, 255, .2); border-radius: 26px; text-align: center; color: var(--text); background: linear-gradient(145deg, rgba(42, 29, 69, .98), rgba(14, 14, 24, .98)); box-shadow: 0 30px 90px rgba(0,0,0,.45); }.single-tab-icon { width: 48px; height: 48px; display: grid; place-items: center; margin: 0 auto 15px; border-radius: 16px; color: #1b1028; background: linear-gradient(135deg, #efdbff, #ab7aed); font-size: 28px; font-weight: 900; }.single-tab-card h2 { margin: 0 0 10px; font-size: 23px; letter-spacing: -.03em; }.single-tab-card p { margin: 0; color: var(--muted); line-height: 1.55; font-size: 14px; }.single-tab-card small { display: block; margin-top: 16px; color: #d5b7f3; font-size: 12px; }
.call-timer { display: inline-block; margin-top: 8px; color: var(--success); font-size: 12px; font-variant-numeric: tabular-nums; }

.conversation-actions { width: min(100%, 760px); display: grid; grid-template-columns: 112px minmax(220px, 280px) 184px; gap: 12px; align-items: center; justify-content: center; margin-top: 20px; }.conversation-actions:not(.in-call) { position: relative; display: block; width: 280px; }.conversation-actions:not(.in-call) .mic-monitor { position: absolute; top: 0; right: calc(100% + 12px); width: 112px; }.conversation-actions:not(.in-call) .search-button { width: 100%; }.search-button { min-width: 0; min-height: 54px; display: flex; gap: 9px; align-items: center; justify-content: center; margin-top: 0; padding: 0 24px; border-radius: 16px; background: linear-gradient(135deg, #b5df82, #66ad8e); box-shadow: 0 14px 30px rgba(79, 154, 103, 0.3); color: #112d25; }
.search-button.stop { color: #d6dbe8; background: rgba(255, 255, 255, 0.08); box-shadow: none; }
.search-button.hidden { display: none; }
.search-button svg { width: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.conversation-actions.in-call { grid-template-columns: 112px minmax(260px, 420px); }.conversation-actions.in-call .quick-actions { grid-column: 2; }.quick-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }.quick-control { min-height: 54px; display: flex; flex-direction: column; gap: 3px; align-items: center; justify-content: center; padding: 5px 7px; border: 1px solid transparent; border-radius: 14px; cursor: pointer; color: #1a1c18; font-size: 10px; font-weight: 900; transition: transform .18s ease, filter .18s ease, opacity .18s ease; }.quick-control svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }.next-control { background: linear-gradient(135deg, #b7ed91, #56ba8a); box-shadow: 0 11px 24px rgba(63, 177, 117, .22); }.end-control { color: #fff; background: linear-gradient(135deg, #ff8299, #d94366); box-shadow: 0 11px 24px rgba(214, 48, 88, .2); }.quick-control:hover:not(:disabled) { transform: translateY(-2px); filter: brightness(1.08); }.quick-control:disabled { cursor: not-allowed; opacity: .28; }

.call-controls { min-height: 100px; display: flex; gap: clamp(16px, 5vw, 40px); align-items: center; justify-content: center; padding: 15px 20px; border-top: 1px solid var(--line); background: rgba(5, 9, 18, 0.2); }
.round-control { min-width: 58px; display: grid; justify-items: center; gap: 5px; border: 0; outline: 0; cursor: pointer; background: transparent; color: #aeb6c8; font-size: 8px; }
.round-control svg { width: 43px; height: 43px; padding: 12px; border-radius: 50%; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; background: rgba(255, 255, 255, 0.06); transition: 0.2s ease; }
.round-control:hover:not(:disabled) svg { transform: translateY(-2px); background: rgba(255, 255, 255, 0.1); }
.round-control.accent:not(:disabled) svg { color: #102e27; background: rgba(169, 226, 121, 0.88); }
.round-control.danger:not(:disabled) svg { color: white; background: rgba(255, 94, 120, 0.72); }
.round-control:disabled { cursor: not-allowed; opacity: 0.32; }
.round-control.is-muted svg { color: var(--danger); background: rgba(255, 94, 120, 0.12); }
.round-control.is-enabled svg { color: #32124d; background: rgba(218, 169, 255, .9); box-shadow: 0 0 18px rgba(205, 135, 255, .26); }

footer { min-height: 56px; display: flex; align-items: center; justify-content: space-between; border-top: 1px solid var(--line); color: #667188; font-size: 10px; }
footer a, .agreement a { color: inherit; text-decoration-color: currentColor; text-underline-offset: 3px; }
.privacy-agreement { align-items: flex-start; margin-top: -8px; }
.privacy-agreement a { color: var(--purple-light); font-weight: 800; }

.policy-page { min-height: 100vh; color: #f2f1f6; background: radial-gradient(circle at 88% 0%, rgba(125, 69, 190, .23), transparent 32%), linear-gradient(145deg, #07070b, #14111d 55%, #08080d); }
.policy-shell { width: min(900px, calc(100% - 32px)); min-height: 100vh; margin: 0 auto; padding: 34px 0 70px; }
.policy-topbar { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-bottom: 25px; border-bottom: 1px solid rgba(255,255,255,.13); }
.policy-back { color: #d7c4f2; font-size: 13px; font-weight: 800; text-decoration: none; }.policy-back:hover { color: #fff; }
.policy-card { margin-top: 32px; padding: clamp(24px, 5vw, 56px); border: 1px solid rgba(235,226,255,.16); border-radius: 28px; background: rgba(20,18,29,.86); box-shadow: 0 28px 90px rgba(0,0,0,.28); }
.policy-card h1 { margin: 0; font-size: clamp(30px, 5vw, 48px); letter-spacing: -.045em; }.policy-updated { margin: 10px 0 34px; color: #aca8b6; font-size: 13px; }
.policy-card h2 { margin: 35px 0 12px; color: #e9d7ff; font-size: 20px; letter-spacing: -.025em; }.policy-card p, .policy-card li { color: #d0cdd7; line-height: 1.65; font-size: 15px; }.policy-card ul { padding-left: 21px; }.policy-card a { color: #e0b8ff; }
.policy-notice { padding: 15px 17px; border: 1px solid rgba(224,159,255,.24); border-radius: 15px; color: #eadcf5 !important; background: rgba(125,70,177,.13); }.policy-contact { margin-top: 34px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.12); color: #aaa5b6 !important; font-size: 13px !important; }
.toast { position: fixed; left: 50%; bottom: 30px; z-index: 10; max-width: min(420px, calc(100% - 36px)); padding: 12px 18px; border: 1px solid var(--line); border-radius: 13px; opacity: 0; pointer-events: none; background: var(--card-strong); box-shadow: 0 15px 45px rgba(0, 0, 0, 0.4); color: #d8ddea; font-size: 12px; transform: translate(-50%, 12px); transition: 0.25s ease; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.toast.error { border-color: rgba(255, 94, 120, 0.3); }
.achievements-modal { position: fixed; z-index: 40; inset: 0; display: grid; place-items: center; padding: 20px; background: rgba(5,4,12,.74); backdrop-filter: blur(11px); }.achievements-card { position: relative; width: min(100%, 430px); padding: 32px; border: 1px solid rgba(235,215,255,.2); border-radius: 26px; background: linear-gradient(145deg, rgba(48,29,76,.98), rgba(13,12,21,.98)); box-shadow: 0 30px 90px rgba(0,0,0,.52); }.achievements-card h2 { margin: 4px 0 7px; font-size: 30px; letter-spacing: -.045em; }.achievements-summary { margin: 0 0 22px; color: var(--muted); font-size: 12px; }.close-achievements { position: absolute; top: 16px; right: 16px; width: 32px; height: 32px; border: 1px solid rgba(255,255,255,.22); border-radius: 50%; cursor: pointer; color: #fff; background: rgba(255,255,255,.07); font-size: 24px; line-height: 1; }.close-achievements:hover { background: rgba(255,255,255,.14); }.achievements-list { display: grid; gap: 9px; }.achievement { min-height: 70px; display: flex; gap: 13px; align-items: center; padding: 12px; border: 1px solid rgba(255,255,255,.11); border-radius: 16px; }.achievement > span { width: 38px; height: 38px; display: grid; flex: 0 0 auto; place-items: center; border-radius: 13px; font-size: 19px; }.achievement b, .achievement small { display: block; }.achievement b { font-size: 14px; }.achievement small { margin-top: 3px; color: var(--muted); font-size: 11px; }.achievement.unlocked { border-color: rgba(223,173,255,.38); background: rgba(163,97,229,.13); }.achievement.unlocked > span { color: #301247; background: linear-gradient(135deg, #f0c6ff, #a973ef); box-shadow: 0 0 20px rgba(202,124,255,.24); }.achievement.locked { opacity: .55; }.achievement.locked > span { color: #aaa6b0; background: rgba(255,255,255,.07); }
.photo-modal { position: fixed; inset: 0; z-index: 30; display: grid; place-items: center; padding: 16px; background: rgba(5, 2, 12, .93); backdrop-filter: blur(16px); }.photo-modal-content { position: relative; display: inline-grid; place-items: center; max-width: 96vw; max-height: 92vh; }.photo-modal img { max-width: 96vw; max-height: 92vh; border: 1px solid rgba(238, 213, 255, .4); border-radius: 0; background: #1b0b31; box-shadow: 0 24px 80px rgba(0,0,0,.6); object-fit: contain; }.close-photo-modal { position: absolute; z-index: 1; top: -19px; right: -19px; width: 38px; height: 38px; display: grid; place-items: center; padding: 0; border: 1px solid rgba(255,255,255,.32); border-radius: 50%; cursor: pointer; color: #fff; background: #2a1b39; }.close-photo-modal svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.3; stroke-linecap: round; }.close-photo-modal:hover { background: #4a2b66; }
.hidden { display: none !important; }

/* MEOWCORD: мягкая фиолетовая тема */
:root {
  --bg: #130923;
  --card: rgba(37, 19, 65, 0.78);
  --card-strong: rgba(34, 16, 60, 0.97);
  --line: rgba(218, 190, 255, 0.17);
  --text: #fbf7ff;
  --muted: #c3b6df;
  --purple: #a36dff;
  --purple-light: #e3c9ff;
  --cyan: #d889f5;
  --danger: #ff8caa;
  --success: #c8a6ff;
}

body {
  background:
    radial-gradient(circle at 78% -8%, rgba(188, 104, 250, 0.32), transparent 35%),
    radial-gradient(circle at 6% 92%, rgba(103, 69, 194, 0.29), transparent 41%),
    linear-gradient(152deg, #10051d 0%, #20103d 48%, #16092d 100%);
}

.glow-one { background: #8959e8; }
.glow-two { background: #d774d8; }
.brand-mark { background: linear-gradient(135deg, #d695ff, #8a63ed); box-shadow: 0 10px 30px rgba(170, 90, 250, 0.35); }
.test-badge { border-color: rgba(230, 194, 255, 0.28); background: rgba(185, 124, 248, 0.12); color: #e9ccff; }
.theme-switcher { display: inline-flex; gap: 7px; align-items: center; padding: 5px 8px; border: 1px solid rgba(230, 205, 255, .18); border-radius: 999px; background: rgba(18, 7, 39, .22); }
.theme-switcher-label { margin-right: 2px; color: var(--muted); font-size: 9px; font-weight: 700; }
.theme-dot { width: 15px; height: 15px; padding: 0; border: 1px solid rgba(255,255,255,.45); border-radius: 50%; cursor: pointer; background: #9c6af3; box-shadow: 0 0 0 0 transparent; transition: transform .18s ease, box-shadow .18s ease; }.theme-dot:hover { transform: scale(1.14); }.theme-dot.active { box-shadow: 0 0 0 2px var(--card-strong), 0 0 0 3px currentColor; }.theme-dot.black { color: #c9b3e5; background: #101015; }
.eyebrow, .step-label { color: #dfbcff; }
.intro-copy h1 em { color: #e6b7ff; text-shadow: 0 0 30px rgba(226, 152, 255, 0.25); }
.benefits span { color: #f0d5ff; background: rgba(200, 146, 255, 0.13); }
.glass-card { background: linear-gradient(145deg, rgba(52, 28, 90, 0.82), rgba(28, 15, 53, 0.78)); border-color: rgba(227, 202, 255, 0.15); }
.age-badge { background: rgba(214, 159, 255, 0.15); color: #efd4ff; }
.photo-picker { border-color: rgba(223, 185, 255, 0.3); }
.photo-picker:hover { border-color: #e2b6ff; background: rgba(197, 126, 246, 0.1); }
.field input, .field select, .age-inputs label { border-color: rgba(226, 205, 255, 0.16); background: rgba(16, 6, 33, 0.46); }
.field input:focus, .field select:focus, .age-inputs label:focus-within { border-color: #c787ff; box-shadow: 0 0 0 3px rgba(198, 124, 255, 0.16); }
.agreement input { accent-color: #c282ff; }
.primary-button, .search-button { background: linear-gradient(135deg, #d697ff, #8e68ed); box-shadow: 0 14px 32px rgba(161, 87, 243, 0.3); color: #250b3c; }
.safety-box { background: rgba(187, 133, 255, 0.1); }
.safety-box svg { stroke: #d7b1ff; }.safety-box b { color: #eedaff; }.safety-box small { color: #c4a8d7; }
.mini-avatar { background: linear-gradient(135deg, #d591ff, #725bd7); }
.sound-ring { border-color: rgba(217, 162, 255, 0.3); }
.avatar-wrap.connected .sound-ring { border-color: rgba(220, 178, 255, 0.55); }
.search-button.stop { color: #e5d8f5; background: rgba(236, 214, 255, 0.11); }
.round-control.accent:not(:disabled) svg { color: #2a0d43; background: rgba(213, 151, 255, 0.9); }
.night-vibe { border-color: rgba(226, 193, 255, 0.17); background: linear-gradient(180deg, rgba(83, 40, 130, 0.27), rgba(47, 23, 81, 0.68)); }
.night-vibe::before { background: #2a1452; }.night-vibe::after { background: #1c0b3b; }
.moon { background: #ecd7ff; box-shadow: 0 0 20px rgba(234, 190, 255, 0.8); }.star { background: #f1ddff; box-shadow: 0 0 9px #e2c5ff; }
.flower { border-color: #f5dcff; background: #c486f3; box-shadow: 0 0 12px rgba(226, 167, 255, 0.62); }.flower::after { background: #8e69ca; }
.cat { background: #12081f; }.cat-ear { background: #12081f; }.cat-eye { background: #e0b6ff; box-shadow: 0 0 9px #e0b6ff; }.cat-nose { background: #a57aa7; }

.native-gender-select { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.gender-choice-field { position: relative; }
.gender-pills { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.gender-pill {
  min-height: 47px;
  display: inline-flex;
  gap: 6px;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(229, 203, 255, 0.18);
  border-radius: 999px;
  cursor: pointer;
  color: #d9cce8;
  background: rgba(24, 10, 49, 0.54);
  font-size: 11px;
  font-weight: 700;
  transition: transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
}
.gender-pill:hover { transform: translateY(-1px); border-color: #cf91ff; }
.gender-pill i { display: grid; width: 19px; height: 19px; place-items: center; border-radius: 50%; color: #f1d7ff; background: rgba(216, 150, 255, 0.16); font-style: normal; }
.gender-pill.wide { grid-column: 1 / -1; }
.gender-pill.selected { border-color: #d69aff; color: #fff9ff; background: linear-gradient(135deg, rgba(206, 135, 255, 0.34), rgba(126, 86, 225, 0.28)); box-shadow: inset 0 0 0 1px rgba(239, 207, 255, 0.12), 0 0 22px rgba(185, 101, 253, 0.13); }
.gender-pill.selected i { color: #42175e; background: #ecd0ff; }
.filter-pills { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; padding: 5px; border: 1px solid rgba(229, 203, 255, .14); border-radius: 18px; background: rgba(17, 7, 37, .28); }.filter-pills .gender-pill { min-width: 0; min-height: 48px; gap: 4px; border: 0; border-radius: 13px; background: transparent; font-size: 10px; }.filter-pills .gender-pill i { width: 17px; height: 17px; font-size: 10px; }.filter-pills .gender-pill.selected { box-shadow: 0 7px 17px rgba(128, 65, 200, .17); }

.mic-monitor { position: relative; min-height: 54px; display: flex; align-items: center; justify-content: center; gap: 7px; overflow: hidden; padding: 9px 8px; border: 1px solid rgba(229, 203, 255, 0.2); border-radius: 15px 8px 15px 8px; background: linear-gradient(135deg, rgba(93, 52, 147, .25), rgba(25, 10, 49, .34)); box-shadow: inset 0 0 0 1px rgba(229, 203, 255, .035); }.mic-monitor::after { position: absolute; right: -12px; bottom: -12px; width: 34px; height: 34px; border: 1px solid rgba(213, 151, 255, .3); border-radius: 50%; content: ""; }.meter-caption { position: absolute; top: 6px; left: 9px; color: #bca5d9; font-family: ui-monospace, monospace; font-size: 7px; letter-spacing: .12em; text-transform: uppercase; }.meter-bars { height: 24px; display: flex; align-items: center; gap: 3px; margin-top: 8px; }.meter-bars i { width: 3px; height: 100%; border-radius: 999px; background: #8562c9; transform-origin: center; transition: transform .09s ease, background .2s ease; }.mic-monitor.active .meter-bars i { background: linear-gradient(#f0a2ff, #9e75ff); box-shadow: 0 0 8px rgba(218, 138, 255, 0.42); }

/* Дополнительные цветовые темы MEOWCORD */
body[data-theme="black"] { --bg: #08080d; --card: rgba(21, 21, 30, .84); --card-strong: #15151e; --line: rgba(238,238,255,.16); --text: #f5f4fa; --muted: #aaa9b6; --success: #d7d5ff; background: radial-gradient(circle at 80% -10%, rgba(95, 70, 142, .2), transparent 34%), linear-gradient(150deg, #07070b, #12111a 52%, #07070b); }
body[data-theme="black"] .glass-card { border-color: rgba(242,240,255,.14); background: linear-gradient(145deg, rgba(29,29,41,.9), rgba(12,12,18,.88)); } body[data-theme="black"] .brand-mark, body[data-theme="black"] .primary-button, body[data-theme="black"] .search-button { color: #111019; background: linear-gradient(135deg, #f1effa, #aaa7bd); } body[data-theme="black"] .night-vibe { background: linear-gradient(180deg, rgba(83,82,112,.25), rgba(18,18,28,.9)); } body[data-theme="black"] .night-vibe::before { background: #20202d; } body[data-theme="black"] .night-vibe::after { background: #101017; } body[data-theme="black"] .gender-pill.selected { color: #191724; border-color: #efedfb; background: #e9e6f5; } body[data-theme="black"] .gender-pill.selected i { color: #fff; background: #30303e; }

/* Скрытая тема VOID: холодный монохром и единственный красный акцент. */
body[data-theme="void"] { --bg: #09090b; --card: rgba(17,17,20,.91); --card-strong: #17171b; --line: rgba(244,244,244,.18); --text: #f4f4f3; --muted: #9d9d9f; --purple: #e5e5e5; --purple-light: #f4f4f3; --cyan: #d7d7d7; --success: #e8e8e8; --danger: #e63946; background: radial-gradient(circle at 82% 17%, rgba(180,0,25,.15), transparent 19%), radial-gradient(circle at 12% 88%, rgba(255,255,255,.055), transparent 32%), linear-gradient(145deg, #050506, #141416 52%, #080809); }
body[data-theme="void"]::before { position: fixed; inset: 0; z-index: 20; opacity: .14; pointer-events: none; content: ""; background-image: repeating-linear-gradient(0deg, rgba(255,255,255,.14) 0 1px, transparent 1px 4px), repeating-linear-gradient(90deg, transparent 0 19%, rgba(201,17,41,.12) 19.3% 19.8%, transparent 20% 47%); background-size: auto, 480px 100%; mix-blend-mode: overlay; animation: void-scan 7s steps(2, end) infinite; }
body[data-theme="void"] .background-glow { opacity: .11; filter: blur(82px) grayscale(.9); animation-timing-function: steps(1, end); animation-iteration-count: infinite; }
body[data-theme="void"] .glow-one { background: #d3112b; animation-name: void-glitch-left; animation-duration: 8s; }
body[data-theme="void"] .glow-two { background: #e7e7e7; animation-name: void-glitch-right; animation-duration: 11s; }
body[data-theme="void"] .glass-card { border-color: rgba(255,255,255,.18); background: linear-gradient(145deg, rgba(27,27,31,.95), rgba(9,9,11,.93)); box-shadow: 0 22px 70px rgba(0,0,0,.45); }
body[data-theme="void"] .brand-mark { color: #fff; background: linear-gradient(135deg, #f4f4f4, #777); box-shadow: 0 0 24px rgba(255,255,255,.14); }
body[data-theme="void"] .eyebrow, body[data-theme="void"] .step-label, body[data-theme="void"] .intro-copy h1 em { color: #f0f0f0; text-shadow: none; }
body[data-theme="void"] .intro-copy h1 em { text-decoration: underline; text-decoration-color: #c21428; text-underline-offset: .13em; }
body[data-theme="void"] .primary-button, body[data-theme="void"] .search-button { color: #f7f7f7; background: linear-gradient(135deg, #aa1125, #630711); box-shadow: 0 14px 34px rgba(184,0,29,.32); }
body[data-theme="void"] .gender-pill.selected { color: #fff; border-color: #ce2738; background: linear-gradient(135deg, rgba(178,12,34,.5), rgba(55,7,13,.72)); box-shadow: 0 0 24px rgba(177,0,29,.16); }
body[data-theme="void"] .gender-pill.selected i { color: #3b050b; background: #f3e9eb; }
body[data-theme="void"] .field input, body[data-theme="void"] .field select, body[data-theme="void"] .field textarea, body[data-theme="void"] .age-inputs label { border-color: rgba(255,255,255,.18); background: rgba(0,0,0,.36); }
body[data-theme="void"] .field input:focus, body[data-theme="void"] .field select:focus, body[data-theme="void"] .field textarea:focus, body[data-theme="void"] .age-inputs label:focus-within { border-color: #c31b31; box-shadow: 0 0 0 3px rgba(195,27,49,.15); }
body[data-theme="void"] .age-badge, body[data-theme="void"] .test-badge { color: #f6edef; border-color: rgba(204,39,57,.44); background: rgba(132,12,29,.26); }
body[data-theme="void"] .night-vibe { filter: grayscale(1) contrast(1.15); border-color: rgba(255,255,255,.18); background: linear-gradient(180deg, #212125, #0b0b0d); }
body[data-theme="void"] .cat-eye, body[data-theme="void"] .flower { background: #cb1830; box-shadow: 0 0 12px rgba(202,24,48,.7); }
body[data-theme="void"] .mic-monitor.active .meter-bars i { background: linear-gradient(#f3f3f3, #c4162c); box-shadow: 0 0 8px rgba(196,22,44,.45); }
body[data-theme="void"] { background-size: 100% 100%, 100% 100%, 180% 180%; animation: void-background-drift 16s ease-in-out infinite alternate; }
body[data-theme="void"] .search-radar { width: 108px; height: 108px; overflow: hidden; border-color: rgba(244, 74, 94, .7); background: radial-gradient(circle at center, rgba(255,226,228,.45) 0 3px, transparent 4px), repeating-radial-gradient(circle at center, transparent 0 24px, rgba(231, 40, 62, .34) 25px 26px); box-shadow: inset 0 0 26px rgba(198, 9, 31, .2), 0 0 0 10px rgba(193, 12, 35, .055), 0 0 30px rgba(214, 13, 42, .16); }
body[data-theme="void"] .radar-line { display: block; background: linear-gradient(90deg, rgba(255,224,228,.96), transparent); box-shadow: 0 0 14px rgba(231, 25, 51, .94); }
body[data-theme="void"] .radar-point { display: block; background: #ffd8de; box-shadow: 0 0 12px #ed1535; }
body[data-theme="void"] .search-visual.searching .search-radar { opacity: 1; animation: none; box-shadow: inset 0 0 32px rgba(216, 11, 39, .32), 0 0 38px rgba(209, 7, 34, .3); }
body[data-theme="void"] .search-visual.connecting .search-radar { opacity: 1; animation: none; }
body[data-theme="void"] .search-visual.connected .search-radar { opacity: .76; transform: scale(.92); animation: none; }
body[data-theme="void"] .search-visual.has-partner-photo .search-radar { opacity: 0; transform: scale(.58); pointer-events: none; }
body[data-theme="void"] .partner-photo { width: 102px; height: 102px; border: 3px solid rgba(250,250,250,.9); border-radius: 50%; background-size: cover; box-shadow: 0 0 0 5px rgba(13,13,15,.82), 0 0 0 7px rgba(196, 15, 37, .78), 0 17px 38px rgba(0,0,0,.58); cursor: zoom-in; }
body[data-theme="void"] .search-visual.has-partner-photo.speaking .partner-photo { border-color: #fff; box-shadow: 0 0 0 5px rgba(13,13,15,.82), 0 0 0 8px rgba(224, 24, 48, .94), 0 0 32px rgba(204, 10, 35, .74); }
body[data-theme="void"] .photo-modal { padding: 16px; background: rgba(3,3,5,.96); backdrop-filter: blur(19px) grayscale(.25); }
body[data-theme="void"] .photo-modal-content { max-width: 96vw; max-height: 92vh; }
body[data-theme="void"] .photo-modal img { max-width: 96vw; max-height: 92vh; border-color: rgba(229,229,229,.5); border-radius: 0; background: #0d0d10; object-fit: contain; box-shadow: 0 30px 100px rgba(0,0,0,.82); }
body[data-theme="void"] .close-photo-modal { top: -19px; right: -19px; color: #fff; border-color: rgba(236,236,236,.55); background: #b8132a; }
body[data-theme="void"] .close-photo-modal:hover { background: #e11b37; }

.void-flash { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; color: #ed1732; font-family: Impact, "Arial Black", sans-serif; font-size: clamp(72px, 18vw, 280px); letter-spacing: -.075em; line-height: 1; opacity: 0; pointer-events: none; text-shadow: 0 0 22px rgba(231,0,27,.6), 0 0 80px rgba(231,0,27,.3); transform: scale(.78); }
.void-flash.show { animation: void-flash 1.25s cubic-bezier(.16,.84,.23,1) both; }
@keyframes void-flash { 0% { opacity: 0; transform: scale(.78); filter: blur(14px); } 18% { opacity: 1; transform: scale(1.06); filter: blur(0); } 58% { opacity: .96; transform: scale(1); } 100% { opacity: 0; transform: scale(1.18); filter: blur(8px); } }
@keyframes void-scan { 0%, 82%, 100% { background-position: 0 0, 0 0; } 83% { background-position: 0 0, 74px 0; } 84% { background-position: 0 0, -42px 0; } 85% { background-position: 0 0, 0 0; } }
@keyframes void-glitch-left { 0%, 78%, 100% { transform: translate3d(0, 0, 0) scale(1); } 79% { transform: translate3d(68px, -14px, 0) scale(1.12); } 81% { transform: translate3d(-28px, 9px, 0) scale(.94); } 83% { transform: translate3d(0, 0, 0) scale(1); } }
@keyframes void-glitch-right { 0%, 68%, 100% { transform: translate3d(0, 0, 0) scale(1); } 69% { transform: translate3d(-55px, 16px, 0) scale(1.15); } 71% { transform: translate3d(24px, -8px, 0) scale(.93); } 73% { transform: translate3d(0, 0, 0) scale(1); } }
@keyframes void-background-drift { 0% { background-position: 0 0, 0 0, 0% 0%; } 50% { background-position: 0 0, 0 0, 72% 45%; } 100% { background-position: 0 0, 0 0, 100% 100%; } }



@media (max-width: 900px) {
  .setup-layout { grid-template-columns: 1fr; gap: 38px; }
  .intro-copy { max-width: 730px; }
  .profile-card { width: min(100%, 560px); justify-self: center; }
  .chat-layout { grid-template-columns: 1fr; }
  .filters-card { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; width: 100%; }
  .filters-card .section-heading, .auto-skip { grid-column: 1 / -1; }
  .filters-card > .field { margin: 0; }
  .safety-box { margin-top: 0; }
}

@media (max-width: 600px) {
  .page-shell { width: min(100% - 24px, 1180px); }
  .topbar { min-height: 72px; }
  .test-badge { display: none; }
  .intro-copy h1 { font-size: 40px; }
  .intro-copy > p { font-size: 15px; }
  .night-vibe { height: 115px; }
  .setup-layout { padding-top: 36px; }
  .profile-card { padding: 22px; }
  .field-grid, .filters-card { grid-template-columns: 1fr; }
  .field-wide, .filters-card .section-heading, .auto-skip { grid-column: auto; }
  .call-card { min-height: 580px; }
  .call-topline { padding: 13px; }
  .status-pill { max-width: 150px; }
  .call-controls { gap: 8px; padding-inline: 8px; }
  .conversation-actions { grid-template-columns: 72px minmax(130px, 1fr) 142px; gap: 7px; }.conversation-actions:not(.in-call) { width: min(100%, 280px); padding-top: 60px; }.conversation-actions:not(.in-call) .mic-monitor { top: 0; right: auto; left: 50%; width: 112px; transform: translateX(-50%); }.conversation-actions.in-call { grid-template-columns: 72px minmax(210px, 1fr); }.quick-actions { gap: 5px; }.quick-control { min-height: 52px; font-size: 9px; }
  .round-control { min-width: 61px; }
  footer { flex-direction: column; justify-content: center; gap: 5px; text-align: center; }
}