:root {
  --ink: #18162a;
  --muted: #716e82;
  --surface: #fff;
  --canvas: #f2eef7;
  --lavender: #e9e1ff;
  --violet: #7559ef;
  --violet-dark: #5d43d9;
  --acid: #cbfa58;
  --peach: #ffddca;
  --mint: #c9f0de;
  --line: #e9e5ef;
  --shadow: 0 24px 70px rgba(36, 26, 76, .18);
  --ease: cubic-bezier(.2,.8,.2,1);
}

* { box-sizing: border-box; }
html { min-width: 320px; background: #ebe7ef; }
body { margin: 0; min-height: 100vh; color: var(--ink); font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; -webkit-font-smoothing: antialiased; }
button { color: inherit; font: inherit; }
button, .match-card { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
.icon-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.stage { min-height: 100vh; display: grid; grid-template-columns: minmax(420px, 1fr) minmax(520px, .95fr); background: #f5f2f7; }
.brief-panel { min-height: 100vh; padding: clamp(32px, 5vw, 76px); display: flex; flex-direction: column; justify-content: space-between; background: var(--ink); color: white; overflow: hidden; position: relative; }
.brief-panel::before { content: ""; position: absolute; width: 430px; height: 430px; border: 1px solid rgba(255,255,255,.08); border-radius: 50%; top: -210px; right: -180px; box-shadow: 0 0 0 70px rgba(255,255,255,.018), 0 0 0 140px rgba(255,255,255,.012); }
.brand-lockup { display: flex; align-items: center; gap: 10px; font-size: 22px; font-weight: 800; letter-spacing: -.04em; position: relative; z-index: 1; }
.brand-mark { width: 32px; height: 32px; display: grid; place-items: center; background: var(--acid); color: var(--ink); border-radius: 10px; transform: rotate(-5deg); }
.brand-mark svg { width: 18px; height: 18px; fill: currentColor; stroke-width: 0; }
.brief-copy { max-width: 620px; position: relative; z-index: 1; padding: 10vh 0 5vh; }
.eyebrow { display: inline-flex; padding: 8px 12px; border: 1px solid rgba(255,255,255,.16); border-radius: 99px; color: #c4bfd1; font-size: 12px; font-weight: 650; letter-spacing: .04em; }
.brief-copy h1 { font-size: clamp(48px, 5vw, 80px); line-height: .98; letter-spacing: -.065em; margin: 28px 0 24px; max-width: 680px; }
.brief-copy h1 span { color: var(--acid); }
.brief-copy > p { color: #aaa5b8; line-height: 1.65; font-size: clamp(16px, 1.4vw, 20px); max-width: 570px; margin: 0 0 48px; }
.feature-list { display: grid; gap: 1px; border-top: 1px solid rgba(255,255,255,.12); }
.feature-list > div { display: grid; grid-template-columns: 46px 1fr; gap: 14px; align-items: center; padding: 18px 0; border-bottom: 1px solid rgba(255,255,255,.12); }
.feature-list > div > span { color: var(--acid); font: 650 11px/1 monospace; }
.feature-list p { margin: 0; display: grid; gap: 5px; }
.feature-list strong { font-size: 15px; }
.feature-list small { color: #858093; font-size: 13px; }
.prototype-hint { display: flex; gap: 12px; align-items: flex-start; max-width: 460px; color: #908b9f; font-size: 12px; line-height: 1.55; position: relative; z-index: 1; }
.prototype-hint svg { flex: 0 0 18px; width: 18px; height: 18px; color: var(--acid); }
.prototype-hint p { margin: 0; }

.device-wrap { min-height: 100vh; display: grid; place-items: center; padding: 44px 32px; position: relative; overflow: hidden; background: radial-gradient(circle at 50% 35%, #fff 0, #f6f2fa 45%, #eae4f0 100%); }
.ambient { position: absolute; border-radius: 999px; filter: blur(2px); opacity: .75; }
.ambient-one { width: 210px; height: 210px; background: var(--acid); top: 5%; right: 4%; }
.ambient-two { width: 260px; height: 260px; background: #cfc1ff; bottom: 3%; left: 2%; }
.phone { position: relative; z-index: 2; width: 390px; height: min(844px, calc(100vh - 44px)); min-height: 690px; background: #f8f6fb; border: 8px solid #16131d; border-radius: 44px; overflow: hidden; box-shadow: var(--shadow), 0 0 0 1px rgba(255,255,255,.9) inset; }
.telegram-bar { height: 56px; padding: 8px 14px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; background: #fff; border-bottom: 1px solid #eeeaf2; font-size: 12px; position: relative; z-index: 20; }
.telegram-bar > div { text-align: center; display: grid; gap: 1px; }
.telegram-bar strong { font-size: 13px; letter-spacing: -.01em; }
.telegram-bar small { color: #9995a3; font-size: 9px; }
.telegram-bar button { border: 0; background: transparent; color: #278ce5; min-width: 44px; min-height: 44px; }
.tg-close { justify-self: start; padding: 0; }
.tg-more { justify-self: end; font-weight: 800; letter-spacing: 1px; padding: 0 4px; }
.app-shell { position: relative; height: calc(100% - 56px); overflow: hidden; }
.screen { display: none; height: 100%; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; padding: 0 16px 100px; background: #f8f6fb; }
.screen::-webkit-scrollbar { display: none; }
.screen.active { display: block; animation: screen-in .24s var(--ease); }
@keyframes screen-in { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }

.app-header { height: 60px; display: flex; align-items: center; justify-content: space-between; }
.mini-brand { display: flex; align-items: center; gap: 6px; font-size: 18px; font-weight: 850; letter-spacing: -.05em; }
.mini-brand span { width: 24px; height: 24px; display: grid; place-items: center; color: var(--ink); background: var(--acid); border-radius: 7px; transform: rotate(-5deg); }
.mini-brand svg { width: 14px; height: 14px; fill: currentColor; stroke-width: 0; }
.balance-pill { min-width: 76px; height: 38px; padding: 0 12px; border: 0; display: flex; align-items: center; justify-content: center; gap: 5px; border-radius: 99px; background: #ebe5fa; transition: background .2s, box-shadow .2s; }
.balance-pill:hover { background: #dfd6f6; }
.balance-pill:focus-visible { outline: 3px solid rgba(117,89,239,.3); }
.balance-pill svg { width: 14px; height: 14px; fill: var(--violet); stroke-width: 0; }
.balance-pill strong { font-size: 14px; }
.balance-pill span { color: var(--violet); font-size: 11px; font-weight: 750; }
.feed-intro { display: flex; justify-content: space-between; align-items: flex-end; margin: 5px 0 14px; }
.overline, .simple-header p { color: var(--violet); font-size: 9px; letter-spacing: .11em; font-weight: 800; margin: 0 0 5px; }
.feed-intro h2, .simple-header h2 { margin: 0; font-size: 27px; line-height: 1.03; letter-spacing: -.05em; }
.feed-intro h2 span { color: #8a8496; font-weight: 500; }
.filter-button, .icon-button { width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 14px; background: white; display: grid; place-items: center; transition: background .2s; }
.filter-button:hover, .icon-button:hover { background: #f0ebf7; }
.filter-button svg, .icon-button svg { width: 19px; height: 19px; }
.daily-progress { margin: 0 0 14px; }
.progress-copy { display: flex; justify-content: space-between; align-items: center; margin-bottom: 7px; }
.progress-copy span { font-size: 11px; font-weight: 750; }
.progress-copy small { color: #918c9d; font-size: 9px; }
.progress-track { height: 4px; background: #e6e0eb; border-radius: 99px; overflow: hidden; }
.progress-track i { display: block; width: 10%; height: 100%; background: var(--violet); border-radius: inherit; transition: width .35s var(--ease); }
.card-zone { position: relative; height: 296px; perspective: 1000px; }
.match-card { position: absolute; inset: 0; padding: 15px; border: 1px solid #ded8e7; border-radius: 24px; background: white; box-shadow: 0 14px 35px rgba(40,29,75,.09); user-select: none; touch-action: pan-y; transform-origin: 50% 100%; transition: transform .28s var(--ease), opacity .28s var(--ease), box-shadow .2s; overflow: hidden; }
.match-card:not(.card-back):hover { box-shadow: 0 18px 40px rgba(40,29,75,.13); }
.match-card.card-back { height: 98%; pointer-events: none; box-shadow: none; }
.back-one { transform: translateY(8px) scale(.965); background: #e8e0fa; border-color: #ddd2f3; }
.back-two { transform: translateY(15px) scale(.925); background: #dcd0f6; border-color: #d5c8f2; }
.match-card.dragging { transition: none; }
.match-card.exit-left { transform: translateX(-130%) rotate(-16deg); opacity: 0; }
.match-card.exit-right { transform: translateX(130%) rotate(16deg); opacity: 0; }
.swipe-label { position: absolute; z-index: 4; top: 70px; padding: 7px 11px; border: 2px solid; border-radius: 8px; font-size: 12px; font-weight: 850; letter-spacing: .05em; opacity: 0; }
.swipe-no { right: 22px; color: #e36475; transform: rotate(8deg); }
.swipe-save { left: 22px; color: #5eab85; transform: rotate(-8deg); }
.card-topline { display: flex; justify-content: space-between; align-items: center; }
.match-kind { display: flex; align-items: center; gap: 6px; padding: 7px 9px; border-radius: 99px; background: #f1ecfb; color: #514968; font-size: 9px; font-weight: 750; text-transform: uppercase; letter-spacing: .04em; }
.match-kind i { width: 6px; height: 6px; border-radius: 50%; background: var(--violet); box-shadow: 0 0 0 3px rgba(117,89,239,.12); }
.match-score { display: flex; align-items: center; gap: 3px; color: #746f80; font-size: 9px; }
.match-score svg { width: 13px; height: 13px; color: var(--violet); fill: rgba(117,89,239,.1); }
.match-score strong { color: var(--violet); }
.identity-row { display: grid; grid-template-columns: 58px 1fr; gap: 12px; align-items: center; margin: 11px 0 9px; }
.masked-avatar { width: 58px; height: 58px; border-radius: 18px; position: relative; overflow: hidden; background: linear-gradient(145deg, #ffd8c8, #b7a4f7 70%); }
.masked-avatar::before { content: ""; position: absolute; width: 38px; height: 38px; border-radius: 50%; background: #2c2743; top: 7px; left: 10px; filter: blur(6px); opacity: .85; }
.masked-avatar::after { content: ""; position: absolute; width: 54px; height: 36px; border-radius: 60% 60% 20% 20%; background: #57506d; top: 36px; left: 2px; filter: blur(4px); opacity: .86; }
.masked-avatar i, .masked-avatar b { position: absolute; inset: 0; backdrop-filter: blur(5px); z-index: 2; }
.masked-avatar b { background: repeating-linear-gradient(100deg, transparent 0 7px, rgba(255,255,255,.12) 8px 9px); mix-blend-mode: overlay; }
.match-code { color: #9691a1; font-size: 9px; font-weight: 650; text-transform: uppercase; letter-spacing: .05em; }
.identity-row h3 { margin: 3px 0 0; font-size: 18px; line-height: 1.03; letter-spacing: -.04em; }
.signal-row { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 9px; }
.signal-row span { padding: 5px 7px; background: #f5f3f7; border-radius: 8px; color: #676273; font-size: 8px; font-weight: 650; }
.why-box { min-height: 65px; padding: 10px; display: grid; grid-template-columns: 27px 1fr; gap: 8px; background: linear-gradient(135deg, #f0ebff, #f7f3ff); border: 1px solid #e5dcfb; border-radius: 14px; }
.why-icon { width: 27px; height: 27px; background: var(--violet); color: white; border-radius: 9px; display: grid; place-items: center; box-shadow: 0 6px 14px rgba(117,89,239,.2); }
.why-icon svg { width: 14px; height: 14px; }
.why-box span { color: var(--violet); font-size: 8px; letter-spacing: .07em; font-weight: 850; }
.why-box p { margin: 3px 0 0; color: #504b5c; font-size: 9px; line-height: 1.35; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
.card-footer { display: grid; grid-template-columns: 1fr 116px; gap: 8px; align-items: center; margin-top: 9px; }
.contact-preview > small { display: none; }
.contact-preview > div { display: flex; align-items: center; }
.contact-preview span { width: 29px; height: 29px; display: grid; place-items: center; background: #f2eef7; border: 2px solid white; border-radius: 50%; margin-right: -5px; }
.contact-preview svg { width: 14px; height: 14px; color: #555061; }
.contact-preview b { margin-left: 10px; color: #666171; font-size: 9px; font-weight: 650; }
.reveal-button { height: 43px; padding: 0 11px; border: 0; border-radius: 14px; display: flex; align-items: center; justify-content: center; gap: 6px; color: white; background: var(--ink); box-shadow: 0 8px 18px rgba(24,22,42,.18); transition: background .2s, transform .15s; }
.reveal-button:hover { background: #302c46; }
.reveal-button:active { transform: scale(.98); }
.reveal-button > svg { width: 14px; height: 14px; }
.reveal-button > span { font-size: 11px; font-weight: 750; }
.reveal-button > b { padding-left: 6px; border-left: 1px solid rgba(255,255,255,.18); display: flex; align-items: center; gap: 2px; font-size: 10px; }
.reveal-button b svg { width: 10px; height: 10px; fill: var(--acid); color: var(--acid); stroke-width: 0; }
.swipe-actions { height: 58px; display: flex; align-items: center; justify-content: center; gap: 22px; }
.round-action { width: 48px; height: 48px; border: 1px solid var(--line); background: white; display: grid; place-items: center; border-radius: 50%; box-shadow: 0 7px 15px rgba(40,29,75,.06); transition: border .2s, background .2s, transform .15s; }
.round-action:active { transform: scale(.94); }
.round-action svg { width: 20px; height: 20px; }
.round-action.reject { color: #dc7180; }
.round-action.reject:hover { background: #fff1f3; border-color: #f2b9c1; }
.round-action.save { color: #5bad84; }
.round-action.save:hover { background: #edf9f3; border-color: #a8d9c0; }
.swipe-actions p { display: grid; text-align: center; margin: 0; }
.swipe-actions span { color: #8e8999; font-size: 9px; font-weight: 750; letter-spacing: .06em; text-transform: uppercase; }
.swipe-actions small { color: #b3afba; font-size: 8px; margin-top: 2px; }

.simple-header { min-height: 94px; display: flex; justify-content: space-between; align-items: center; }
.simple-header h2 { font-size: 28px; }
.simple-header > span:not(.plan-badge) { width: 35px; height: 35px; border-radius: 50%; background: var(--acid); display: grid; place-items: center; font-weight: 800; font-size: 12px; }
.saved-filter { display: flex; gap: 7px; margin: 0 0 18px; overflow-x: auto; }
.saved-filter button { min-height: 38px; padding: 0 14px; border: 1px solid var(--line); border-radius: 99px; background: white; color: #777281; font-size: 10px; font-weight: 700; white-space: nowrap; }
.saved-filter button.active { color: white; background: var(--ink); border-color: var(--ink); }
.saved-list { display: grid; gap: 10px; }
.saved-item { width: 100%; min-height: 83px; padding: 12px; display: grid; grid-template-columns: 52px 1fr 22px; align-items: center; gap: 12px; text-align: left; background: white; border: 1px solid var(--line); border-radius: 18px; transition: border .2s, transform .2s; }
.saved-item:hover { border-color: #cfc5e6; transform: translateY(-1px); }
.saved-avatar { width: 52px; height: 52px; display: grid; place-items: center; border-radius: 16px; font-weight: 800; font-size: 14px; }
.avatar-a { background: var(--peach); }.avatar-b { background: var(--lavender); filter: blur(.35px); }
.saved-copy { display: grid; min-width: 0; }
.saved-copy small { color: var(--violet); font-size: 7px; font-weight: 800; letter-spacing: .05em; }
.saved-copy strong { font-size: 12px; margin: 4px 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.saved-copy em { color: #8c8796; font-size: 9px; font-style: normal; }
.saved-item > svg { width: 16px; height: 16px; color: #918c9c; }
.empty-collection { margin: 24px auto 0; max-width: 250px; display: flex; gap: 10px; align-items: center; color: #9994a1; font-size: 10px; line-height: 1.45; }
.empty-collection svg { width: 18px; height: 18px; flex: 0 0 18px; }
.empty-collection p { margin: 0; }

.profile-hero { min-height: 75px; padding: 11px; display: grid; grid-template-columns: 52px 1fr auto; align-items: center; gap: 12px; background: white; border: 1px solid var(--line); border-radius: 19px; }
.profile-avatar { width: 52px; height: 52px; display: grid; place-items: center; border-radius: 16px; background: var(--acid); font-size: 20px; font-weight: 800; }
.profile-hero > div { display: grid; gap: 4px; }
.profile-hero strong { font-size: 14px; }.profile-hero small { color: #96919f; font-size: 9px; }
.profile-ready { display: flex; align-items: center; gap: 5px; color: #36825f; background: #e7f7ee; padding: 6px 8px; border-radius: 99px; font-size: 8px; font-weight: 750; }
.profile-ready i { width: 5px; height: 5px; background: #43a879; border-radius: 50%; }
.profile-card, .looking-card { padding: 17px; margin-top: 12px; background: white; border: 1px solid var(--line); border-radius: 20px; }
.profile-card > p, .looking-card > p { margin: 0 0 11px; color: #9792a1; font-size: 8px; font-weight: 800; letter-spacing: .08em; }
.profile-card h3 { font-size: 16px; line-height: 1.38; letter-spacing: -.02em; margin: 0 0 15px; }
.profile-card > div { display: flex; flex-wrap: wrap; gap: 6px; }
.profile-card > div span { padding: 7px 9px; background: #eee8fd; color: #6652b5; border-radius: 8px; font-size: 9px; font-weight: 700; }
.looking-card label { min-height: 55px; display: flex; align-items: center; gap: 11px; border-top: 1px solid #f0edf2; }
.looking-card label > span { width: 25px; height: 25px; display: grid; place-items: center; background: var(--acid); border-radius: 8px; }
.looking-card label svg { width: 14px; height: 14px; stroke-width: 2.4; }
.looking-card label div { display: grid; gap: 3px; }
.looking-card label strong { font-size: 11px; }.looking-card label small { color: #9792a0; font-size: 9px; }
.primary-wide { width: 100%; min-height: 50px; margin-top: 12px; border: 0; border-radius: 16px; background: var(--ink); color: white; display: flex; justify-content: center; align-items: center; gap: 8px; font-size: 11px; font-weight: 750; }
.primary-wide svg { width: 16px; height: 16px; }

.plan-badge { padding: 6px 9px; border-radius: 8px; background: var(--acid); font-size: 8px; font-weight: 900; letter-spacing: .06em; transform: rotate(2deg); }
.balance-card { min-height: 112px; padding: 18px; display: grid; grid-template-columns: 1fr 1px 1fr; align-items: center; gap: 18px; color: white; background: var(--ink); border-radius: 22px; overflow: hidden; position: relative; }
.balance-card::after { content: ""; position: absolute; width: 130px; height: 130px; border: 18px solid rgba(203,250,88,.08); border-radius: 50%; right: -75px; top: -55px; }
.balance-card > i { width: 1px; height: 53px; background: rgba(255,255,255,.14); }
.balance-card > div { display: grid; gap: 7px; }
.balance-card span, .balance-card small { color: #aaa5b8; font-size: 8px; }
.balance-card strong { display: flex; align-items: center; gap: 5px; font-size: 20px; letter-spacing: -.04em; }
.balance-card strong svg { width: 16px; height: 16px; fill: var(--acid); color: var(--acid); stroke-width: 0; }
.balance-card strong b { font-size: inherit; }
.plan-card { padding: 19px; margin-top: 13px; background: white; border: 1px solid var(--line); border-radius: 21px; }
.plan-name { display: grid; gap: 4px; }.plan-name span { color: #9994a2; font-size: 8px; text-transform: uppercase; letter-spacing: .07em; font-weight: 800; }.plan-name b { font-size: 17px; }
.plan-price { display: flex; align-items: baseline; gap: 4px; margin: 18px 0; }.plan-price strong { font-size: 36px; letter-spacing: -.06em; }.plan-price span { color: #8f8a99; font-size: 10px; }
.plan-card ul { list-style: none; display: grid; gap: 11px; padding: 0; margin: 0 0 18px; }
.plan-card li { display: flex; align-items: center; gap: 9px; color: #575261; font-size: 10px; }
.plan-card li svg { width: 16px; height: 16px; padding: 3px; border-radius: 50%; background: #e7f7ee; color: #31825d; stroke-width: 2.5; }
.plan-card button { width: 100%; min-height: 44px; border: 1px solid var(--line); border-radius: 14px; background: #f8f6fa; font-size: 10px; font-weight: 750; }
.billing-note { padding: 0 8px; display: flex; gap: 8px; color: #8c8796; font-size: 9px; line-height: 1.45; }
.billing-note svg { width: 15px; height: 15px; flex: 0 0 15px; color: var(--violet); }

.bottom-nav { position: absolute; z-index: 12; left: 0; right: 0; bottom: 0; height: 75px; padding: 7px 18px max(9px, env(safe-area-inset-bottom)); display: grid; grid-template-columns: repeat(4, 1fr); background: rgba(255,255,255,.94); border-top: 1px solid rgba(225,220,231,.8); backdrop-filter: blur(16px); }
.bottom-nav button { min-width: 54px; min-height: 52px; padding: 4px 2px; border: 0; background: transparent; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; color: #9c97a5; position: relative; transition: color .18s; }
.bottom-nav svg { width: 20px; height: 20px; stroke-width: 1.8; }
.bottom-nav span { font-size: 8px; font-weight: 650; }
.bottom-nav button.active { color: var(--ink); }
.bottom-nav button.active svg { stroke-width: 2.3; }
.bottom-nav i { position: absolute; top: 1px; right: 12px; min-width: 16px; height: 16px; padding: 0 4px; display: grid; place-items: center; border: 2px solid white; border-radius: 99px; background: var(--violet); color: white; font-style: normal; font-size: 7px; font-weight: 800; }

.scrim { position: absolute; z-index: 29; inset: 0; background: rgba(20,17,30,.54); opacity: 0; pointer-events: none; transition: opacity .25s; backdrop-filter: blur(2px); }
.scrim.open { opacity: 1; pointer-events: auto; }
.bottom-sheet { position: absolute; z-index: 30; left: 0; right: 0; bottom: 0; padding: 10px 20px max(22px, env(safe-area-inset-bottom)); background: white; border-radius: 26px 26px 0 0; transform: translateY(105%); opacity: 0; visibility: hidden; pointer-events: none; transition: transform .32s var(--ease), opacity .2s, visibility 0s linear .32s; text-align: center; }
.bottom-sheet.open { transform: translateY(0); opacity: 1; visibility: visible; pointer-events: auto; transition-delay: 0s; }
.sheet-handle { display: block; width: 46px; height: 22px; border: 0; background: transparent; margin: -7px auto 7px; position: relative; }
.sheet-handle::after { content: ""; position: absolute; width: 37px; height: 4px; background: #d9d5df; border-radius: 99px; left: 50%; top: 8px; transform: translateX(-50%); }
.sheet-icon { width: 47px; height: 47px; margin: 0 auto 10px; display: grid; place-items: center; background: var(--lavender); color: var(--violet); border-radius: 15px; }
.sheet-icon svg { width: 21px; height: 21px; }
.bottom-sheet h2 { margin: 0 0 8px; font-size: 21px; letter-spacing: -.04em; }
.bottom-sheet h2:focus { outline: none; }
.bottom-sheet > p { max-width: 305px; margin: 0 auto; color: #817c8c; font-size: 10px; line-height: 1.5; }
.unlock-summary { min-height: 61px; padding: 10px 15px; margin: 16px 0 12px; display: grid; grid-template-columns: 1fr 1px 1fr; align-items: center; background: #f5f2f8; border-radius: 15px; }
.unlock-summary > i { width: 1px; height: 31px; background: #dfd9e5; }
.unlock-summary > div { display: grid; gap: 4px; }
.unlock-summary span { color: #8c8795; font-size: 8px; }.unlock-summary strong { display: flex; align-items: center; justify-content: center; gap: 4px; font-size: 13px; }.unlock-summary svg { width: 11px; height: 11px; fill: var(--violet); color: var(--violet); stroke-width: 0; }
.confirm-unlock { width: 100%; min-height: 52px; padding: 0 14px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; color: var(--ink); background: var(--acid); border: 0; border-radius: 16px; font-size: 11px; font-weight: 800; transition: background .2s, transform .15s; }
.confirm-unlock span { grid-column: 2; }.confirm-unlock b { grid-column: 3; justify-self: end; display: flex; align-items: center; gap: 3px; }.confirm-unlock svg { width: 12px; height: 12px; fill: currentColor; stroke-width: 0; }.confirm-unlock:active { transform: scale(.985); }
.sheet-cancel { min-height: 44px; padding: 0 16px; border: 0; background: transparent; color: #837e8d; font-size: 10px; }
.revealed-sheet { text-align: left; }
.revealed-head { display: grid; grid-template-columns: 60px 1fr; gap: 13px; align-items: center; }
.person-avatar { width: 60px; height: 60px; display: grid; place-items: center; background: var(--peach); border-radius: 19px; font-size: 16px; font-weight: 850; }
.revealed-head > div { min-width: 0; }
.revealed-head > div > span { display: flex; align-items: center; gap: 4px; color: var(--violet); font-size: 8px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }.revealed-head > div > span svg { width: 12px; height: 12px; }
.revealed-head h2 { margin: 5px 0 3px; }.revealed-head p { color: #817c8c; font-size: 9px; margin: 0; }
.revealed-fit { padding: 12px; margin: 14px 0 10px; background: #f0ebfd; border-radius: 14px; }.revealed-fit span { color: var(--violet); font-size: 8px; text-transform: uppercase; letter-spacing: .05em; font-weight: 800; }.revealed-fit p { font-size: 10px; line-height: 1.45; margin: 5px 0 0; }
.contact-buttons { display: grid; gap: 7px; }
.contact-buttons button { min-height: 52px; padding: 8px 10px; display: grid; grid-template-columns: 35px 1fr 18px; align-items: center; gap: 10px; text-align: left; border: 1px solid var(--line); background: white; border-radius: 14px; }
.contact-buttons button > span { width: 35px; height: 35px; display: grid; place-items: center; background: #f1edf6; border-radius: 10px; }.contact-buttons button > span svg { width: 17px; height: 17px; }
.contact-buttons button div { display: grid; gap: 2px; }.contact-buttons button small { color: #9893a0; font-size: 7px; letter-spacing: .06em; }.contact-buttons button strong { font-size: 10px; }.contact-buttons button > svg { width: 15px; height: 15px; color: #9d98a5; }
.ai-message { width: 100%; min-height: 48px; margin-top: 10px; border: 0; border-radius: 14px; background: var(--ink); color: white; display: flex; justify-content: center; align-items: center; gap: 7px; font-size: 10px; font-weight: 750; }.ai-message svg { width: 15px; height: 15px; }
.toast { position: absolute; z-index: 50; left: 50%; bottom: 88px; width: max-content; max-width: calc(100% - 30px); min-height: 42px; padding: 9px 14px; display: flex; align-items: center; gap: 8px; color: white; background: var(--ink); border-radius: 13px; box-shadow: 0 10px 30px rgba(24,22,42,.28); font-size: 9px; font-weight: 650; transform: translate(-50%, 18px); opacity: 0; pointer-events: none; transition: opacity .22s, transform .22s var(--ease); }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.toast svg { width: 15px; height: 15px; color: var(--acid); stroke-width: 2.5; }

button:focus-visible, .match-card:focus-visible { outline: 3px solid rgba(117,89,239,.36); outline-offset: 2px; }

@media (max-width: 950px) {
  .stage { display: block; background: #f8f6fb; }
  .brief-panel { display: none; }
  .device-wrap { min-height: 100svh; padding: 0; background: #f8f6fb; }
  .ambient { display: none; }
  .phone { width: 100%; max-width: 480px; height: 100svh; min-height: 650px; border: 0; border-radius: 0; box-shadow: none; }
}

@media (max-height: 760px) and (min-width: 951px) {
  .phone { width: 350px; min-height: 0; height: calc(100vh - 24px); border-radius: 36px; }
  .device-wrap { padding: 12px; }
  .telegram-bar { height: 48px; }
  .app-shell { height: calc(100% - 48px); }
  .app-header { height: 50px; }
  .feed-intro { margin-top: 0; }
  .feed-intro h2 { font-size: 23px; }
  .card-zone { height: 292px; }
  .swipe-actions { height: 58px; }
  .bottom-nav { height: 68px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* Dark product theme — layered surfaces, high contrast, 8px rhythm */
:root {
  --app-bg: #0d0c13;
  --surface-1: #15131d;
  --surface-2: #1c1925;
  --surface-3: #25212f;
  --surface-hover: #2b2637;
  --dark-line: #322d3e;
  --text: #f7f5fb;
  --text-soft: #b4afbf;
  --text-muted: #837e90;
  --violet: #8e75ff;
  --violet-dark: #7359ea;
  --acid: #c7fb63;
  --ink: #17141f;
  --shadow: 0 28px 90px rgba(0, 0, 0, .5);
}

html, body { background: #09080d; }
body { color: var(--text); }
.stage { background: #0c0a10; }
.brief-panel { background: #0a090e; }
.brief-panel::before { border-color: rgba(199,251,99,.07); box-shadow: 0 0 0 70px rgba(199,251,99,.018), 0 0 0 140px rgba(142,117,255,.016); }
.brief-copy > p { color: #aaa5b4; }
.feature-list > div { border-color: rgba(255,255,255,.1); }
.feature-list small, .prototype-hint { color: #8f899b; }

.device-wrap { background: radial-gradient(circle at 48% 36%, #25202f 0, #17131f 48%, #0c0a10 100%); }
.ambient-one { background: #9bd338; opacity: .42; box-shadow: 0 0 80px rgba(199,251,99,.2); }
.ambient-two { background: #684dce; opacity: .4; box-shadow: 0 0 90px rgba(142,117,255,.26); }
.phone { background: var(--app-bg); border-color: #050407; box-shadow: var(--shadow), 0 0 0 1px rgba(255,255,255,.08) inset; }
.telegram-bar { color: var(--text); background: #111019; border-color: #24212d; }
.telegram-bar small { color: var(--text-muted); }
.telegram-bar button { color: #9e8dff; }
.app-shell, .screen { background: var(--app-bg); }

.app-header { height: 64px; }
.mini-brand { color: var(--text); }
.balance-pill { color: var(--text); background: #211c31; box-shadow: inset 0 0 0 1px rgba(142,117,255,.12); }
.balance-pill:hover { background: #2b2440; }
.balance-pill span, .balance-pill svg { color: #a995ff; }
.feed-intro { margin: 7px 0 18px; }
.feed-intro h2, .simple-header h2 { color: var(--text); }
.feed-intro h2 span { color: #888293; }
.overline, .simple-header p { color: #a995ff; }
.filter-button, .icon-button { color: var(--text-soft); background: var(--surface-2); border-color: var(--dark-line); }
.filter-button:hover, .icon-button:hover { color: var(--text); background: var(--surface-hover); }
.daily-progress { margin-bottom: 18px; }
.progress-copy span { color: var(--text-soft); }
.progress-copy small { color: var(--text-muted); }
.progress-track { background: #282430; }
.progress-track i { background: linear-gradient(90deg, var(--violet), #b598ff); box-shadow: 0 0 10px rgba(142,117,255,.48); }

.card-zone { height: 328px; }
.match-card { padding: 18px; color: var(--text); background: linear-gradient(155deg, #1d1a26 0%, #17151e 100%); border-color: #35303f; border-radius: 25px; box-shadow: 0 20px 48px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.035); }
.match-card:not(.card-back):hover { box-shadow: 0 23px 56px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.05); }
.back-one { background: #251f36; border-color: #3b3154; }
.back-two { background: #2b2342; border-color: #493b69; }
.match-kind { color: #c5b8ff; background: rgba(142,117,255,.13); box-shadow: inset 0 0 0 1px rgba(142,117,255,.1); }
.match-kind i { background: #a995ff; box-shadow: 0 0 0 3px rgba(142,117,255,.15), 0 0 12px rgba(142,117,255,.5); }
.match-score { color: var(--text-muted); }
.match-score strong, .match-score svg { color: #b19fff; }
.identity-row { grid-template-columns: 62px 1fr; gap: 14px; margin: 14px 0 12px; }
.masked-avatar { width: 62px; height: 62px; border-radius: 19px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), 0 8px 18px rgba(0,0,0,.24); }
.masked-avatar::before { width: 40px; height: 40px; top: 8px; left: 11px; }
.masked-avatar::after { width: 58px; height: 39px; top: 39px; }
.match-code { color: var(--text-muted); }
.identity-row h3 { color: var(--text); font-size: 19px; line-height: 1.06; }
.signal-row { gap: 6px; margin-bottom: 11px; }
.signal-row span { padding: 6px 8px; color: #b5afc0; background: #25222d; box-shadow: inset 0 0 0 1px rgba(255,255,255,.025); }
.why-box { min-height: 72px; padding: 11px; grid-template-columns: 29px 1fr; gap: 10px; background: linear-gradient(135deg, rgba(142,117,255,.14), rgba(106,80,202,.07)); border-color: rgba(142,117,255,.22); border-radius: 15px; }
.why-icon { width: 29px; height: 29px; background: linear-gradient(145deg, #9279ff, #6e52dd); box-shadow: 0 7px 18px rgba(111,82,221,.3); }
.why-box span { color: #b4a5ff; }
.why-box p { margin-top: 4px; color: #c2bdca; font-size: 10px; line-height: 1.4; }
.card-footer { grid-template-columns: 1fr 120px; gap: 12px; margin-top: 12px; }
.contact-preview span { width: 31px; height: 31px; color: var(--text-soft); background: #282430; border-color: #1a1721; }
.contact-preview svg { color: #c0bac9; }
.contact-preview b { color: var(--text-soft); }
.reveal-button { height: 45px; color: #16121d; background: linear-gradient(135deg, #d4ff7f, #b8f14a); box-shadow: 0 10px 24px rgba(167,221,58,.16); }
.reveal-button:hover { color: #0d0b11; background: #d8ff8d; }
.reveal-button b { border-color: rgba(23,20,31,.16); }
.reveal-button b svg { color: #342a17; fill: #342a17; }

.swipe-actions { height: 68px; gap: 28px; }
.round-action { color: var(--text-soft); background: var(--surface-2); border-color: var(--dark-line); box-shadow: 0 9px 24px rgba(0,0,0,.24); }
.round-action.reject { color: #ff8999; }
.round-action.reject:hover { color: #ffadba; background: #2e1d26; border-color: #63323e; }
.round-action.save { color: #8ae0b5; }
.round-action.save:hover { color: #a9f1cc; background: #172c24; border-color: #285844; }
.swipe-actions span { color: #8f8999; }
.swipe-actions small { color: #625d6b; }

.simple-header > span:not(.plan-badge), .profile-avatar, .looking-card label > span { color: #17141f; background: var(--acid); }
.saved-filter button { color: var(--text-soft); background: var(--surface-2); border-color: var(--dark-line); }
.saved-filter button { min-height: 44px; }
.saved-filter button.active { color: #17141f; background: var(--acid); border-color: var(--acid); }
.saved-item, .profile-hero, .profile-card, .looking-card, .plan-card { color: var(--text); background: var(--surface-1); border-color: var(--dark-line); }
.saved-item:hover { background: var(--surface-2); border-color: #4b445b; }
.saved-copy strong, .profile-card h3, .looking-card label strong, .plan-name b { color: var(--text); }
.saved-copy em, .profile-hero small, .looking-card label small, .empty-collection, .plan-price span, .billing-note { color: var(--text-muted); }
.avatar-a, .person-avatar { color: #201b25; background: #e5ae87; }
.avatar-b { color: #201b25; background: #9781df; }
.profile-ready { color: #8ce2b7; background: #172b23; }
.profile-card > div span { color: #c2b7ff; background: #27213a; }
.looking-card label { border-color: #2b2734; }
.primary-wide { color: #17141f; background: var(--acid); }
.plan-badge { color: #17141f; }
.balance-card { background: linear-gradient(145deg, #211b31, #16131f); border: 1px solid #332b47; }
.balance-card span, .balance-card small { color: var(--text-muted); }
.plan-card button { color: var(--text-soft); background: var(--surface-2); border-color: var(--dark-line); }
.plan-card li { color: var(--text-soft); }
.plan-card li svg { color: #80dbaa; background: #172a22; }

.bottom-nav { background: rgba(15,14,21,.94); border-color: #292531; box-shadow: 0 -12px 32px rgba(0,0,0,.18); }
.bottom-nav button { color: #716c7a; }
.bottom-nav button.active { color: var(--text); }
.bottom-nav i { color: white; background: var(--violet); border-color: #0f0e15; }
.scrim { background: rgba(0,0,0,.7); }
.bottom-sheet { color: var(--text); background: #181620; border: 1px solid #35303f; border-bottom: 0; box-shadow: 0 -24px 70px rgba(0,0,0,.5); }
.sheet-handle::after { background: #494451; }
.sheet-icon { color: #b5a3ff; background: #29213f; }
.bottom-sheet > p { color: var(--text-soft); }
.unlock-summary { background: #211e29; border: 1px solid #2e2938; }
.unlock-summary > i { background: #383240; }
.unlock-summary span { color: var(--text-muted); }
.confirm-unlock { color: #17141f; background: var(--acid); }
.sheet-cancel { color: var(--text-muted); }
.revealed-head p { color: var(--text-muted); }
.revealed-fit { background: rgba(142,117,255,.12); border: 1px solid rgba(142,117,255,.18); }
.revealed-fit span { color: #b7a8ff; }
.revealed-fit p { color: var(--text-soft); }
.contact-buttons button { color: var(--text); background: var(--surface-2); border-color: var(--dark-line); }
.contact-buttons button > span { color: var(--text-soft); background: #282430; }
.contact-buttons button small, .contact-buttons button > svg { color: var(--text-muted); }
.ai-message { color: #17141f; background: var(--acid); }
.toast { color: #17141f; background: var(--acid); box-shadow: 0 12px 34px rgba(0,0,0,.45); }
.toast svg { color: #31551b; }

@media (max-width: 950px) {
  .stage, .device-wrap { background: var(--app-bg); }
}

@media (max-height: 760px) and (min-width: 951px) {
  .card-zone { height: 318px; }
}

/* Telegram Mini App layout: generous spacing without a tall card */
.screen { padding-left: 20px; padding-right: 20px; }
.app-header { height: 72px; }
.feed-intro { margin: 14px 0 22px; }
.feed-intro h2 { font-size: 29px; line-height: 1.05; }
.daily-progress { padding: 11px 13px; margin-bottom: 20px; background: rgba(28,25,37,.7); border: 1px solid #292531; border-radius: 14px; }
.progress-copy { margin-bottom: 9px; }
.card-zone { height: 350px; }
.match-card { padding: 20px; }
.identity-row { grid-template-columns: 64px 1fr; gap: 14px; margin: 16px 0 14px; }
.masked-avatar { width: 64px; height: 64px; }
.signal-row { margin-bottom: 13px; }
.why-box { min-height: 76px; padding: 12px; }
.card-footer { margin-top: 14px; }
.swipe-actions { height: 72px; }

.onboarding-link { width: 100%; min-height: 46px; margin-top: 8px; display: flex; align-items: center; justify-content: center; gap: 8px; color: var(--text-soft); background: transparent; border: 1px solid var(--dark-line); border-radius: 15px; font-size: 10px; font-weight: 700; }
.onboarding-link:hover { color: var(--text); background: var(--surface-2); }
.onboarding-link svg { width: 16px; height: 16px; }

.app-shell.onboarding-active .bottom-nav { opacity: 0; transform: translateY(100%); pointer-events: none; }
.app-shell.onboarding-active { overflow-anchor: none; }
.screen-onboarding { padding: 0 20px 16px; background: var(--app-bg); }
.screen-onboarding.active { display: flex; flex-direction: column; }
.onboarding-topbar { min-height: 68px; display: grid; grid-template-columns: 54px 1fr 74px; align-items: center; gap: 10px; flex: 0 0 auto; }
.onboarding-close { width: 44px; height: 44px; border: 1px solid var(--dark-line); border-radius: 14px; display: grid; place-items: center; color: var(--text-soft); background: var(--surface-1); }
.onboarding-close svg { width: 18px; height: 18px; }
.onboarding-progress { display: grid; gap: 7px; }
.onboarding-progress > span { color: var(--text-soft); font-size: 9px; font-weight: 750; text-align: center; letter-spacing: .04em; }
.onboarding-progress > div { height: 4px; overflow: hidden; background: #292530; border-radius: 99px; }
.onboarding-progress i { display: block; width: 25%; height: 100%; background: linear-gradient(90deg, var(--violet), #ba9dff); border-radius: inherit; transition: width .3s var(--ease); }
.onboarding-skip { min-height: 44px; padding: 0; border: 0; color: var(--text-muted); background: transparent; font-size: 9px; font-weight: 650; }
.onboarding-body { flex: 1 0 auto; }
.onboarding-step { display: none; padding: 22px 0 12px; animation: screen-in .24s var(--ease); }
.onboarding-step.active { display: block; }
.onboarding-step h2 { margin: 8px 0 12px; color: var(--text); font-size: 30px; line-height: 1.04; letter-spacing: -.055em; }
.onboarding-step h2:focus { outline: none; }
.onboarding-kicker { margin: 0; color: #a995ff; font-size: 9px; font-weight: 850; letter-spacing: .1em; }
.onboarding-lead { max-width: 325px; margin: 0 0 22px; color: var(--text-soft); font-size: 12px; line-height: 1.55; }
.onboarding-visual { width: 114px; height: 114px; margin: 4px auto 28px; position: relative; display: grid; place-items: center; }
.onboarding-visual i, .onboarding-visual b { position: absolute; border: 1px solid rgba(142,117,255,.2); border-radius: 50%; }
.onboarding-visual i { inset: 0; box-shadow: 0 0 50px rgba(142,117,255,.13); }
.onboarding-visual b { inset: 16px; border-color: rgba(199,251,99,.18); }
.onboarding-visual span { width: 55px; height: 55px; z-index: 2; display: grid; place-items: center; color: #17141f; background: var(--acid); border-radius: 18px; box-shadow: 0 14px 32px rgba(174,225,70,.18); transform: rotate(-5deg); }
.onboarding-visual svg { width: 27px; height: 27px; fill: currentColor; stroke-width: 0; }
.telegram-user-card { min-height: 76px; padding: 11px 13px; display: grid; grid-template-columns: 52px 1fr 30px; align-items: center; gap: 12px; background: var(--surface-1); border: 1px solid var(--dark-line); border-radius: 19px; }
.telegram-user-avatar { width: 52px; height: 52px; display: grid; place-items: center; color: #17141f; background: linear-gradient(145deg, #d8ff86, #aee638); border-radius: 16px; font-size: 18px; font-weight: 850; }
.telegram-user-card > div { display: grid; gap: 3px; }
.telegram-user-card small { color: #9b8df0; font-size: 7px; font-weight: 850; letter-spacing: .07em; }
.telegram-user-card strong { color: var(--text); font-size: 13px; }
.telegram-user-card em { color: var(--text-muted); font-size: 9px; font-style: normal; }
.telegram-connected { width: 27px; height: 27px; display: grid; place-items: center; color: #17141f; background: var(--acid); border-radius: 50%; }
.telegram-connected svg { width: 14px; height: 14px; stroke-width: 2.5; }
.privacy-note { margin-top: 14px; padding: 11px 12px; display: flex; align-items: flex-start; gap: 9px; color: var(--text-muted); background: rgba(255,255,255,.025); border-radius: 13px; }
.privacy-note svg { width: 15px; height: 15px; flex: 0 0 15px; color: #9889e6; }
.privacy-note p { margin: 0; font-size: 9px; line-height: 1.5; }
.privacy-note strong { color: var(--text-soft); }

.activity-field { display: grid; padding: 14px; background: var(--surface-1); border: 1px solid var(--dark-line); border-radius: 19px; }
.activity-field > span, .prompt-suggestions > span, .setup-title > span { color: #938ba1; font-size: 8px; font-weight: 850; letter-spacing: .08em; }
.activity-field textarea { width: 100%; min-height: 132px; padding: 11px 0; resize: none; color: var(--text); background: transparent; border: 0; outline: 0; font-family: inherit; font-size: 13px; font-weight: 500; line-height: 1.55; }
.activity-field:focus-within { border-color: #6f5bb8; box-shadow: 0 0 0 3px rgba(142,117,255,.1); }
.activity-field small { padding-top: 10px; display: flex; align-items: center; gap: 6px; color: #9f95aa; border-top: 1px solid #2b2733; font-size: 8px; }
.activity-field small svg { width: 13px; height: 13px; color: #aa98ff; }
.prompt-suggestions { margin-top: 17px; display: flex; flex-wrap: wrap; gap: 7px; }
.prompt-suggestions > span { width: 100%; margin-bottom: 2px; }
.prompt-suggestions button, .market-tags button { min-height: 44px; padding: 0 12px; color: var(--text-soft); background: var(--surface-2); border: 1px solid var(--dark-line); border-radius: 11px; font-size: 9px; font-weight: 650; }
.prompt-suggestions button.used { color: #17141f; background: var(--acid); border-color: var(--acid); }

.goal-choices { display: grid; gap: 10px; }
.goal-choice { width: 100%; min-height: 72px; padding: 11px 13px; display: grid; grid-template-columns: 42px 1fr 28px; align-items: center; gap: 12px; text-align: left; color: var(--text); background: var(--surface-1); border: 1px solid var(--dark-line); border-radius: 18px; transition: border-color .2s, background .2s; }
.goal-choice > span { width: 42px; height: 42px; display: grid; place-items: center; color: #a998f5; background: #27223a; border-radius: 13px; }
.goal-choice > span svg { width: 19px; height: 19px; }
.goal-choice > div { display: grid; gap: 4px; }
.goal-choice strong { font-size: 12px; }
.goal-choice small { color: var(--text-muted); font-size: 9px; }
.goal-choice > i { width: 25px; height: 25px; display: grid; place-items: center; color: #635e6c; border: 1px solid #46404f; border-radius: 8px; }
.goal-choice > i svg { width: 14px; height: 14px; opacity: 0; }
.goal-choice.selected { background: #1d1928; border-color: #625198; }
.goal-choice.selected > i { color: #17141f; background: var(--acid); border-color: var(--acid); }
.goal-choice.selected > i svg { opacity: 1; }

.setup-block { padding: 15px; margin-bottom: 12px; background: var(--surface-1); border: 1px solid var(--dark-line); border-radius: 18px; }
.setup-title { display: flex; align-items: center; justify-content: space-between; margin-bottom: 13px; }
.setup-title small { color: var(--text-muted); font-size: 8px; }
.daily-segments { display: grid; grid-template-columns: repeat(3,1fr); gap: 7px; }
.daily-segments button { min-height: 44px; color: var(--text-soft); background: var(--surface-2); border: 1px solid var(--dark-line); border-radius: 12px; font-size: 11px; font-weight: 750; }
.daily-segments button.active { color: #17141f; background: var(--acid); border-color: var(--acid); }
.market-tags { display: flex; flex-wrap: wrap; gap: 7px; }
.market-tags button { min-height: 40px; }
.market-tags button.active { color: #c9bdff; background: #29223e; border-color: #5a4a8c; }
.setup-summary { min-height: 68px; padding: 12px; display: grid; grid-template-columns: 38px 1fr; align-items: center; gap: 11px; background: rgba(142,117,255,.1); border: 1px solid rgba(142,117,255,.18); border-radius: 16px; }
.setup-summary > div { width: 38px; height: 38px; display: grid; place-items: center; color: #b6a6ff; background: #2b2441; border-radius: 12px; }
.setup-summary svg { width: 18px; height: 18px; }
.setup-summary p { margin: 0; display: grid; gap: 4px; }
.setup-summary strong { font-size: 11px; }.setup-summary span { color: var(--text-muted); font-size: 8px; }

.onboarding-footer { position: sticky; bottom: 0; z-index: 4; min-height: 76px; padding: 14px 0 12px; display: flex; gap: 9px; align-items: flex-end; background: linear-gradient(180deg, rgba(13,12,19,0), var(--app-bg) 26%); }
.onboarding-back { min-width: 88px; min-height: 50px; display: flex; align-items: center; justify-content: center; gap: 5px; color: var(--text-soft); background: var(--surface-1); border: 1px solid var(--dark-line); border-radius: 16px; font-size: 10px; font-weight: 750; }
.onboarding-back[hidden] { display: none; }
.onboarding-back svg { width: 15px; height: 15px; transform: rotate(180deg); }
.onboarding-next { flex: 1; min-height: 50px; padding: 0 16px; display: flex; align-items: center; justify-content: center; gap: 8px; color: #17141f; background: var(--acid); border: 0; border-radius: 16px; box-shadow: 0 10px 25px rgba(161,216,56,.12); font-size: 11px; font-weight: 850; }
.onboarding-next svg { width: 16px; height: 16px; }

@media (max-height: 700px) {
  .app-header { height: 66px; }
  .feed-intro { margin: 8px 0 15px; }
  .daily-progress { padding: 9px 11px; margin-bottom: 14px; }
  .card-zone { height: 330px; }
  .match-card { padding: 18px; }
  .onboarding-step { padding-top: 13px; }
  .onboarding-visual { width: 88px; height: 88px; margin-bottom: 18px; }
  .onboarding-lead { margin-bottom: 16px; }
}