:root {
  --ink: #221927;
  --muted: #746b7b;
  --paper: #f8f6fb;
  --cream: #eee8f3;
  --line: #ded6e6;
  --wine: #19101f;
  --wine-2: #100a16;
  --coral: #ff5d70;
  --coral-dark: #ec405b;
  --lime: #caffbd;
  --violet: #b98aff;
  --violet-soft: #eee3ff;
  --white: #fff;
  --shadow: 0 24px 70px rgba(84, 23, 51, .14);
  --radius: 28px;
}

* { box-sizing: border-box; }
/* Safety net: the native [hidden] behavior (display:none) is a User-Agent-stylesheet rule,
   the lowest-priority origin in the cascade, so any component rule below that sets an explicit
   display value (e.g. .button, .flow-success, .privacy-form) silently overrides it and the
   "hidden" element stays visible. This single !important rule guarantees [hidden] always wins,
   regardless of where a future rule sets display. (Per-selector [hidden] overrides added earlier
   for .flow-success/.privacy-form/.referral-body stay in place too; they're now redundant but harmless.) */
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; -webkit-font-smoothing: antialiased; }
button, input, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; }
button { color: inherit; }
.shell { width: min(1220px, calc(100% - 48px)); margin: 0 auto; }
.section { padding: 112px 0; }
.skip-link { position: fixed; z-index: 1000; left: 16px; top: -80px; padding: 12px 16px; color: #fff; background: var(--wine); border-radius: 8px; }
.skip-link:focus { top: 16px; }
:focus-visible { outline: 3px solid rgba(255, 116, 95, .5); outline-offset: 3px; }

.topbar { position: sticky; top: 0; z-index: 40; background: rgba(255, 250, 245, .88); border-bottom: 1px solid rgba(84, 23, 51, .08); backdrop-filter: blur(18px); }
.topbar-inner { min-height: 80px; display: flex; align-items: center; justify-content: space-between; gap: 32px; }
.brand { display: inline-flex; align-items: center; gap: 11px; min-width: max-content; }
.brand-mark { width: 41px; height: 41px; display: grid; place-items: center; color: var(--coral); background: var(--wine); border-radius: 14px; box-shadow: 0 8px 18px rgba(84, 23, 51, .16); }
.brand-mark svg { width: 28px; fill: currentColor; }
.brand > span:last-child { display: grid; line-height: 1; }
.brand strong { font-size: 20px; letter-spacing: -.04em; }
.brand small { margin-top: 4px; color: var(--muted); font-size: 10px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.product-nav { display: flex; align-items: center; gap: 30px; margin-left: auto; }
.product-nav a { color: #5f5359; font-size: 14px; font-weight: 650; transition: color .2s ease; }
.product-nav a:hover { color: var(--wine); }
.topbar-actions { display: flex; align-items: center; gap: 10px; }
.text-button { min-height: 44px; padding: 0 12px; border: 0; background: transparent; font-weight: 750; cursor: pointer; }
.account-button { min-height: 44px; display: inline-flex; align-items: center; gap: 9px; padding: 4px 13px 4px 5px; border: 1px solid var(--line); border-radius: 999px; background: #fff; font-size: 12px; cursor: pointer; }
.account-button span { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: var(--wine); font-weight: 850; }
.account-button[hidden] { display: none; }
.button { min-height: 50px; display: inline-flex; align-items: center; justify-content: center; padding: 0 23px; border: 1px solid var(--coral); border-radius: 14px; color: #fff; background: var(--coral); font-weight: 800; cursor: pointer; box-shadow: 0 10px 24px rgba(255, 116, 95, .25); transition: transform .2s ease, background .2s ease, box-shadow .2s ease; }
.button:hover { transform: translateY(-2px); background: var(--coral-dark); box-shadow: 0 14px 28px rgba(255, 116, 95, .28); }
.button-small { min-height: 44px; padding: 0 18px; font-size: 14px; }
.button-large { min-height: 58px; padding-inline: 28px; }
.button-ghost { color: var(--wine); background: rgba(255, 255, 255, .68); border-color: rgba(84, 23, 51, .16); box-shadow: none; }
.button-ghost:hover { color: #fff; background: var(--wine); }
.button-dark { background: var(--wine); border-color: var(--wine); box-shadow: 0 12px 24px rgba(84, 23, 51, .18); }
.button-light { color: var(--wine); background: #fff; border-color: #fff; box-shadow: 0 12px 26px rgba(34, 10, 23, .17); }
.button-light:hover { color: #fff; background: var(--coral); border-color: var(--coral); }

.hero { position: relative; min-height: 720px; display: grid; align-items: center; overflow: hidden; padding: 76px 0 84px; background: radial-gradient(circle at 5% 15%, #ffe9de 0, transparent 32%), linear-gradient(135deg, #fffaf5 0%, #f8eee9 100%); }
.hero-orb { position: absolute; border-radius: 50%; filter: blur(2px); opacity: .55; pointer-events: none; }
.orb-one { width: 420px; height: 420px; right: -170px; top: 30px; background: #ffd1c8; }
.orb-two { width: 180px; height: 180px; left: 38%; bottom: -80px; background: #e8f8c9; }
.hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: .88fr 1.12fr; gap: 64px; align-items: center; }
.eyebrow, .section-kicker { display: inline-flex; align-items: center; gap: 9px; color: var(--wine); font-size: 12px; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; }
.eyebrow span { width: 9px; height: 9px; border-radius: 50%; background: var(--coral); box-shadow: 0 0 0 6px rgba(255, 116, 95, .13); }
.hero h1 { max-width: 650px; margin: 24px 0 20px; font-size: clamp(48px, 5vw, 74px); line-height: .98; letter-spacing: -.065em; }
.hero h1 em { color: var(--coral); font-family: Georgia, serif; font-weight: 500; }
.hero-copy > p { max-width: 590px; margin: 0; color: #66575e; font-size: 19px; line-height: 1.58; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.trust-list { display: flex; flex-wrap: wrap; gap: 10px 20px; margin: 26px 0 0; padding: 0; list-style: none; color: #6d6065; font-size: 13px; }
.trust-list i { width: 19px; height: 19px; display: inline-grid; place-items: center; margin-right: 4px; color: var(--wine); background: var(--lime); border-radius: 50%; font-style: normal; font-weight: 900; }
.hero-visual { position: relative; min-height: 570px; overflow: hidden; border-radius: 36px 36px 36px 10px; box-shadow: var(--shadow); background: var(--cream); }
.hero-visual::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 54%, rgba(33, 13, 22, .24)); pointer-events: none; }
.hero-visual img { width: 100%; height: 100%; position: absolute; inset: 0; object-fit: cover; object-position: 58% center; }
.match-toast { position: absolute; z-index: 2; left: 22px; bottom: 24px; display: flex; align-items: center; gap: 13px; padding: 13px 16px 13px 13px; color: var(--ink); background: rgba(255,255,255,.94); border: 1px solid rgba(255,255,255,.68); border-radius: 18px; box-shadow: 0 12px 34px rgba(34, 13, 24, .18); backdrop-filter: blur(14px); }
.toast-icon { width: 38px; height: 38px; display: grid; place-items: center; color: #fff; background: var(--coral); border-radius: 12px; }
.match-toast span:last-child { display: grid; gap: 3px; }
.match-toast small { color: var(--muted); font-size: 11px; }
.match-toast strong { font-size: 13px; }
.online-pill { position: absolute; z-index: 2; top: 22px; right: 22px; display: flex; align-items: center; gap: 7px; padding: 9px 12px; color: #fff; background: rgba(34, 13, 24, .62); border: 1px solid rgba(255,255,255,.22); border-radius: 999px; font-size: 12px; font-weight: 700; backdrop-filter: blur(10px); }
.online-pill i { width: 8px; height: 8px; background: #aaf082; border-radius: 50%; box-shadow: 0 0 0 4px rgba(170,240,130,.15); }

.live-strip { color: #fff; background: var(--wine); }
.live-strip-inner { min-height: 126px; display: flex; align-items: center; justify-content: space-between; gap: 40px; }
.live-strip p { display: grid; gap: 5px; margin: 0; }
.live-strip p strong { font-size: 18px; }
.live-strip p span, .live-strip dd { color: rgba(255,255,255,.62); }
.live-strip dl { display: flex; gap: 54px; margin: 0; }
.live-strip dl div { display: grid; gap: 3px; }
.live-strip dt { font-size: 24px; font-weight: 850; letter-spacing: -.04em; }
.live-strip dd { margin: 0; font-size: 12px; }

.section-heading { display: grid; grid-template-columns: 1.25fr .75fr; gap: 80px; align-items: end; margin-bottom: 54px; }
.section-heading h2, .games h2, .premium h2, .safety h2, .final-cta h2 { margin: 16px 0 0; font-size: clamp(38px, 4vw, 58px); line-height: 1.05; letter-spacing: -.055em; }
.section-heading > p { margin: 0 0 7px; color: var(--muted); font-size: 17px; line-height: 1.65; }
.section-heading.compact { grid-template-columns: 1fr; }
.app-surface { display: grid; grid-template-columns: 208px minmax(0,1fr); overflow: hidden; border: 1px solid var(--line); border-radius: 30px; background: #fff; box-shadow: 0 26px 80px rgba(59, 26, 42, .1); }
.app-sidebar { padding: 24px 16px; color: rgba(255,255,255,.74); background: var(--wine-2); }
.mini-brand { display: flex; align-items: center; gap: 8px; padding: 0 9px 24px; color: #fff; font-size: 19px; font-weight: 850; }
.mini-brand span { color: var(--coral); }
.app-sidebar nav { display: grid; gap: 5px; }
.app-sidebar nav button { width: 100%; min-height: 45px; display: grid; grid-template-columns: 24px 1fr auto; align-items: center; padding: 0 10px; border: 0; border-radius: 12px; color: inherit; background: transparent; text-align: left; font-size: 13px; font-weight: 700; cursor: pointer; }
.app-sidebar nav button.active, .app-sidebar nav button:hover { color: #fff; background: rgba(255,255,255,.1); }
.app-sidebar nav b { min-width: 20px; padding: 3px 5px; border-radius: 99px; color: var(--wine); background: var(--coral); font-size: 10px; text-align: center; }
.sidebar-profile { width: 100%; display: flex; align-items: center; gap: 9px; margin-top: 145px; padding: 12px 8px; border: 0; border-top: 1px solid rgba(255,255,255,.12); color: inherit; background: transparent; text-align: left; cursor: pointer; }
.sidebar-profile > span { width: 35px; height: 35px; display: grid; place-items: center; border-radius: 50%; color: var(--wine); background: var(--lime); font-weight: 900; }
.sidebar-profile p { display: grid; gap: 3px; margin: 0; }
.sidebar-profile strong { color: #fff; font-size: 11px; }
.sidebar-profile small { font-size: 9px; }
.app-content { min-width: 0; padding: 28px; background: #fbf7f4; }
.app-toolbar { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 22px; }
.app-toolbar > div:first-child { display: grid; gap: 4px; }
.toolbar-label { color: var(--muted); font-size: 11px; }
.app-toolbar strong { font-size: 20px; }
.filter-row { display: flex; align-items: center; gap: 7px; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; }
.filter-row::-webkit-scrollbar { display: none; }
.chip, .filter-button { min-height: 36px; padding: 0 12px; white-space: nowrap; border: 1px solid var(--line); border-radius: 999px; background: #fff; font-size: 11px; font-weight: 750; cursor: pointer; }
.chip.active { color: #fff; border-color: var(--wine); background: var(--wine); }
.filter-button { width: 36px; padding: 0; border-radius: 50%; }
.profile-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; }
.profile-card { overflow: hidden; border: 1px solid #eaded9; border-radius: 20px; background: #fff; transition: transform .25s ease, box-shadow .25s ease; }
.profile-card:hover { transform: translateY(-4px); box-shadow: 0 16px 36px rgba(59, 26, 42, .12); }
.profile-photo { position: relative; aspect-ratio: 4/4.6; display: grid; place-items: center; overflow: hidden; color: rgba(255,255,255,.88); background: linear-gradient(145deg, var(--profile-one, #7d3153), var(--profile-two, #f28a72)); font-family: Georgia, serif; font-size: 72px; }
.profile-photo::after { content: ""; position: absolute; width: 78%; aspect-ratio: 1; right: -25%; bottom: -28%; border-radius: 50%; background: rgba(255,255,255,.12); }
.profile-photo.has-photo::after { display: none; }
/* §11.3 ТЗ: рамка анкеты — платная косметика, чисто визуальное кольцо вокруг фото. */
.profile-photo.profile-frame-gold, .profile-main-photo.profile-frame-gold { box-shadow: inset 0 0 0 4px #e8c15e, 0 0 18px rgba(232,193,94,.55); }
.profile-photo.profile-frame-violet, .profile-main-photo.profile-frame-violet { box-shadow: inset 0 0 0 4px #a978e8, 0 0 18px rgba(169,120,232,.55); }
.profile-photo.profile-frame-coral, .profile-main-photo.profile-frame-coral { box-shadow: inset 0 0 0 4px #f0836a, 0 0 18px rgba(240,131,106,.55); }
.profile-photo > img { width: 100%; height: 100%; position: absolute; inset: 0; object-fit: cover; }
.save-profile { position: absolute; z-index: 4; top: 12px; left: 12px; width: 36px; height: 36px; display: grid; place-items: center; padding: 0; border: 1px solid rgba(255,255,255,.35); border-radius: 50%; color: #fff; background: rgba(18,10,24,.5); box-shadow: 0 8px 22px rgba(0,0,0,.18); backdrop-filter: blur(12px); font-size: 21px; cursor: pointer; transition: transform .2s ease, background .2s ease; }
.save-profile:hover { transform: translateY(-2px); background: rgba(18,10,24,.75); }
.save-profile.saved { color: #25151e; background: var(--lime); border-color: rgba(255,255,255,.7); }
.save-profile:disabled { opacity: .55; cursor: wait; }
.verified { position: absolute; top: 12px; right: 12px; width: 25px; height: 25px; display: grid; place-items: center; color: #fff; background: #3b8ddd; border: 2px solid rgba(255,255,255,.85); border-radius: 50%; font-size: 12px; font-weight: 900; }
.profile-tags { position: absolute; left: 10px; bottom: 10px; display: flex; gap: 5px; }
.profile-tags span { padding: 5px 7px; color: #fff; background: rgba(37, 20, 28, .62); border: 1px solid rgba(255,255,255,.22); border-radius: 99px; font-size: 8px; font-weight: 750; backdrop-filter: blur(8px); }
.profile-body { padding: 16px; }
.profile-title { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.profile-title h3 { margin: 0; font-size: 19px; letter-spacing: -.03em; }
.profile-title > span { color: var(--muted); font-size: 8px; }
.profile-body > p { min-height: 51px; margin: 9px 0; color: #6c5e64; font-size: 10px; line-height: 1.55; }
.interests { display: flex; flex-wrap: wrap; gap: 5px; }
.interests span { padding: 5px 7px; color: var(--wine); background: #f8eee9; border-radius: 6px; font-size: 8px; font-weight: 750; }
.profile-body blockquote { min-height: 48px; margin: 11px 0; padding: 9px 10px; border-left: 2px solid var(--coral); color: #4c3e44; background: #fff9f5; font-size: 9px; line-height: 1.45; }
.card-actions { display: grid; grid-template-columns: 34px 1fr 34px; gap: 7px; }
.round, .spark-action { min-height: 34px; border: 1px solid var(--line); background: #fff; cursor: pointer; }
.round { border-radius: 50%; color: var(--muted); font-size: 18px; }
.spark-action { display: flex; align-items: center; justify-content: center; border: 0; border-radius: 10px; color: #fff; background: var(--coral); font-size: 9px; font-weight: 850; }
.spark-action span { margin-right: 3px; }
.game { color: var(--wine); }
.profile-safety { display: flex; justify-content: flex-end; gap: 12px; margin-top: 10px; }
.profile-safety button { padding: 0; border: 0; color: #9a8c92; background: transparent; font-size: 9px; cursor: pointer; }
.profile-safety button:hover { color: #a3293d; }
.mobile-app-nav { display: none; gap: 6px; margin-bottom: 14px; overflow-x: auto; }
.mobile-app-nav button { min-height: 38px; padding: 0 13px; white-space: nowrap; border: 1px solid var(--line); border-radius: 999px; background: #fff; font-size: 11px; font-weight: 750; cursor: pointer; }
.mobile-app-nav button.active { color: #fff; border-color: var(--wine); background: var(--wine); }
.empty-state { grid-column: 1 / -1; min-height: 430px; display: grid; align-content: center; justify-items: center; padding: 40px; border: 1px dashed #d9c7cf; border-radius: 20px; color: var(--muted); background: #fff; text-align: center; }
.empty-state > span { width: 62px; height: 62px; display: grid; place-items: center; margin-bottom: 18px; border-radius: 20px; color: #fff; background: var(--coral); font-size: 25px; }
.empty-state h3 { margin: 0 0 9px; color: var(--ink); font-size: 23px; }
.empty-state p { max-width: 450px; margin: 0 0 20px; line-height: 1.55; }
.match-card .card-actions { grid-template-columns: 1fr; }
.saved-card .card-actions { grid-template-columns: minmax(76px,.45fr) 1fr; }
.saved-remove { min-height: 34px; padding: 0 12px; border: 1px solid var(--line); border-radius: 10px; color: var(--muted); background: #fff; font-size: 11px; font-weight: 750; cursor: pointer; }
.saved-remove:hover { color: var(--ink); border-color: #b9a7bf; }
.match-card .spark-action { min-height: 38px; }

.how { background: #fff; }
.steps { display: grid; grid-template-columns: repeat(4,1fr); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.steps article { position: relative; min-height: 300px; padding: 28px 28px 34px 0; }
.steps article + article { padding-left: 28px; border-left: 1px solid var(--line); }
.steps article > span { color: #b7a9ae; font-size: 11px; font-weight: 800; }
.step-icon { width: 58px; height: 58px; display: grid; place-items: center; margin: 50px 0 26px; color: var(--wine); background: var(--cream); border-radius: 18px; font-size: 22px; }
.steps article:nth-child(2) .step-icon { color: #fff; background: var(--coral); }
.steps h3 { margin: 0 0 10px; font-size: 19px; letter-spacing: -.025em; }
.steps p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.55; }

.games { overflow: hidden; color: #fff; background: var(--wine); }
.games-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 80px; align-items: center; }
.section-kicker.light { color: #ffc9bf; }
.games-copy p { max-width: 490px; margin: 22px 0 30px; color: rgba(255,255,255,.67); font-size: 17px; line-height: 1.65; }
.game-deck { position: relative; min-height: 420px; }
.game-card { position: absolute; width: 330px; min-height: 390px; padding: 28px; border-radius: 28px; box-shadow: 0 28px 60px rgba(26, 8, 17, .26); }
.game-card > span, .game-card-top { font-size: 11px; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; }
.game-card > strong { display: block; margin-top: 95px; font-family: Georgia, serif; font-size: 32px; font-weight: 500; line-height: 1.05; }
.card-back { right: 0; top: 5px; transform: rotate(9deg); color: var(--wine); background: var(--lime); }
.card-middle { right: 80px; top: 8px; transform: rotate(-4deg); color: var(--wine); background: #f3d9c7; }
.card-front { z-index: 2; left: 20px; top: 18px; color: var(--wine); background: #fff; }
.game-card-top { display: flex; align-items: center; justify-content: space-between; }
.game-card-top i { padding: 6px 8px; border-radius: 99px; color: #fff; background: var(--coral); font-size: 8px; font-style: normal; }
.card-front > strong { display: block; margin: 74px 0 30px; font-family: Georgia, serif; font-size: 34px; font-weight: 500; line-height: 1.06; }
.choice-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.choice-row button { min-height: 48px; border: 1px solid var(--line); border-radius: 12px; color: var(--wine); background: #fff8f3; font-weight: 800; cursor: pointer; }
.choice-row button:hover { color: #fff; background: var(--coral); border-color: var(--coral); }
.choice-row button.selected { color: #fff; background: var(--coral); border-color: var(--coral); }
.card-front > small { display: block; margin-top: 14px; color: var(--muted); font-size: 9px; text-align: center; }

.premium { background: #f5ebe4; }
.premium-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 80px; align-items: center; }
.premium-copy p { max-width: 470px; margin: 20px 0 28px; color: var(--muted); font-size: 17px; line-height: 1.62; }
.premium-panel { padding: 34px; border: 1px solid rgba(84,23,51,.12); border-radius: 28px; background: #fff; box-shadow: var(--shadow); }
.premium-head { display: flex; align-items: center; gap: 13px; padding-bottom: 24px; border-bottom: 1px solid var(--line); }
.premium-logo { width: 48px; height: 48px; display: grid; place-items: center; color: #fff; background: var(--wine); border-radius: 15px; font-size: 19px; }
.premium-head > div { display: grid; }
.premium-head div small { color: var(--muted); font-size: 11px; }
.premium-head div strong { color: var(--wine); font-size: 23px; }
.premium-price { margin-left: auto; font-size: 18px; font-weight: 850; }
.premium-price small { color: var(--muted); font-size: 10px; font-weight: 600; }
.premium-panel ul { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.premium-panel li { display: flex; align-items: center; gap: 17px; padding: 17px 0; border-bottom: 1px solid var(--line); }
.premium-panel li > span { color: var(--coral); font-size: 10px; font-weight: 850; }
.premium-panel li p { display: grid; gap: 4px; margin: 0; }
.premium-panel li strong { font-size: 14px; }
.premium-panel li small { color: var(--muted); font-size: 11px; }
.premium-ethics { margin: 18px 0 0; color: var(--muted); font-size: 10px; text-align: center; }

.safety { background: #fff; }
.safety-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 100px; }
.safety-list { display: grid; }
.safety-list article { display: grid; grid-template-columns: 52px 1fr; gap: 20px; padding: 22px 0; border-top: 1px solid var(--line); }
.safety-list article:last-child { border-bottom: 1px solid var(--line); }
.safety-list article > span { width: 48px; height: 48px; display: grid; place-items: center; color: var(--wine); background: var(--lime); border-radius: 15px; font-weight: 900; }
.safety-list h3 { margin: 2px 0 7px; font-size: 18px; }
.safety-list p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.55; }
.final-cta { padding: 80px 0; color: #fff; background: var(--coral); }
.final-cta-inner { display: flex; align-items: end; justify-content: space-between; gap: 50px; }
.final-cta .section-kicker { color: #fff2ed; }
.final-cta h2 { margin-top: 12px; }

.footer { padding: 52px 0 22px; color: rgba(255,255,255,.66); background: #24101b; }
.footer-grid { display: grid; grid-template-columns: .5fr 1fr .7fr; gap: 80px; align-items: start; }
.footer-brand .brand-mark { color: var(--coral); background: rgba(255,255,255,.09); box-shadow: none; }
.footer-brand strong { color: #fff; }
.footer-brand small { color: rgba(255,255,255,.52); }
.footer-grid > p { max-width: 520px; margin: 4px 0; font-size: 13px; line-height: 1.65; }
.footer-links { display: grid; justify-items: start; gap: 10px; font-size: 13px; }
.footer-links button { padding: 0; border: 0; color: inherit; background: transparent; cursor: pointer; }
.footer-bottom { display: flex; justify-content: space-between; margin-top: 44px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.1); font-size: 10px; }
/* popover сбрасывает inset/margin/border/overflow браузерных дефолтов, чтобы наши
   left/bottom/transform работали как обычно. */
.toast { position: fixed; z-index: 120; inset: auto; margin: 0; border: 0; overflow: visible; left: 50%; bottom: 28px; transform: translateX(-50%); max-width: min(420px, calc(100% - 32px)); padding: 14px 18px; color: #fff; background: var(--wine); border-radius: 14px; box-shadow: 0 18px 50px rgba(32, 8, 21, .3); font-size: 13px; font-weight: 750; }
.toast:not(:popover-open) { display: none; }

dialog { color: var(--ink); }
dialog::backdrop { background: rgba(35, 13, 25, .66); backdrop-filter: blur(7px); }
.flow-dialog, .info-dialog, .support-dialog, .login-dialog, .chat-dialog, .account-dialog, .edit-dialog, .report-dialog, .delete-dialog, .plans-dialog, .events-dialog, .daily-dialog, .clubs-dialog, .profile-dialog { width: min(680px, calc(100% - 24px)); max-height: calc(100vh - 24px); margin: auto; padding: 0; overflow: auto; border: 0; border-radius: 30px; background: var(--paper); box-shadow: 0 30px 100px rgba(31, 8, 21,.38); }
.flow-dialog[open], .info-dialog[open], .support-dialog[open], .login-dialog[open], .chat-dialog[open], .account-dialog[open], .edit-dialog[open], .report-dialog[open], .delete-dialog[open], .plans-dialog[open], .events-dialog[open], .daily-dialog[open], .clubs-dialog[open], .profile-dialog[open] { animation: dialog-in .22s ease-out; }
@keyframes dialog-in { from { opacity: 0; transform: translateY(15px) scale(.98); } }
.dialog-close { position: absolute; z-index: 2; top: 15px; right: 15px; width: 40px; height: 40px; border: 1px solid var(--line); border-radius: 50%; color: var(--muted); background: rgba(255,255,255,.88); font-size: 23px; cursor: pointer; }
.dialog-brand { display: flex; align-items: center; gap: 8px; padding: 23px 28px; color: var(--wine); border-bottom: 1px solid var(--line); font-weight: 850; }
.dialog-brand span { color: var(--coral); }
.flow-dialog form { padding: 28px; }
.flow-progress { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 30px; color: var(--muted); font-size: 11px; }
.flow-progress i { height: 5px; flex: 1; overflow: hidden; border-radius: 99px; background: var(--line); }
.flow-progress i::after { content: ""; display: block; width: var(--progress, 33.333%); height: 100%; border-radius: inherit; background: var(--coral); transition: width .25s ease; }
.flow-step, .flow-success { min-height: 470px; }
.flow-step:not(.active) { display: none; }
.flow-kicker { color: var(--coral-dark); font-size: 11px; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; }
.flow-step h2, .flow-success h2, .info-dialog h2 { margin: 10px 0 8px; font-size: 36px; line-height: 1.05; letter-spacing: -.045em; }
.flow-step > p, .flow-success > p, .info-dialog > p { margin: 0 0 24px; color: var(--muted); line-height: 1.55; }
.choice-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0 0 24px; padding: 0; border: 0; }
.choice-grid legend, .interest-picks legend { width: 100%; margin-bottom: 9px; color: var(--muted); font-size: 11px; font-weight: 750; }
.choice-grid label { cursor: pointer; }
.choice-grid input { position: absolute; opacity: 0; pointer-events: none; }
.choice-grid label > span { min-height: 94px; display: grid; grid-template-columns: 32px 1fr; align-content: center; column-gap: 9px; padding: 13px; border: 1px solid var(--line); border-radius: 15px; background: #fff; transition: border-color .2s ease, background .2s ease; }
.choice-grid i { grid-row: 1 / 3; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 9px; color: var(--wine); background: var(--cream); font-style: normal; }
.choice-grid strong { align-self: end; font-size: 13px; }
.choice-grid small { align-self: start; margin-top: 3px; color: var(--muted); font-size: 10px; line-height: 1.35; }
.choice-grid input:checked + span { border-color: var(--coral); background: #fff5f1; box-shadow: inset 0 0 0 1px var(--coral); }
.choice-grid input:focus-visible + span { outline: 3px solid rgba(255,116,95,.4); outline-offset: 2px; }
.field-row { display: grid; gap: 12px; }
.field-row.two { grid-template-columns: 1fr 1fr; }
.field, .field-row label { display: grid; gap: 7px; margin-bottom: 15px; }
.field > span, .field-row label > span { color: var(--muted); font-size: 11px; font-weight: 750; }
.field input, .field-row input, .field select, .field textarea { width: 100%; min-height: 50px; padding: 0 13px; border: 1px solid var(--line); border-radius: 12px; color: var(--ink); background: #fff; }
.field textarea { padding-block: 12px; resize: vertical; }
.interest-picks { display: flex; flex-wrap: wrap; gap: 7px; margin: 6px 0 25px; padding: 0; border: 0; }
.interest-picks input { position: absolute; opacity: 0; }
.interest-picks label span { display: block; padding: 8px 11px; border: 1px solid var(--line); border-radius: 99px; background: #fff; font-size: 11px; font-weight: 750; cursor: pointer; }
.interest-picks input:checked + span { color: #fff; border-color: var(--wine); background: var(--wine); }
.interest-picks input:focus-visible + span { outline: 3px solid rgba(255,116,95,.4); outline-offset: 2px; }
.flow-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 8px; }
.back-button { min-height: 50px; padding: 0 18px; border: 0; color: var(--muted); background: transparent; font-weight: 750; cursor: pointer; }
.consent { display: grid; grid-template-columns: 20px 1fr; gap: 9px; align-items: start; margin: 4px 0 25px; color: var(--muted); font-size: 10px; line-height: 1.45; }
.consent input { width: 18px; height: 18px; accent-color: var(--wine); }
.form-error { min-height: 18px; margin: 0 0 8px; color: #b82942; font-size: 11px; font-weight: 700; }
.flow-success { display: grid; align-content: center; justify-items: center; text-align: center; }
.flow-success[hidden] { display: none !important; }
.success-icon, .dialog-symbol { width: 68px; height: 68px; display: grid; place-items: center; margin-bottom: 19px; color: #fff; background: var(--coral); border-radius: 22px; font-size: 27px; box-shadow: 0 15px 30px rgba(255,116,95,.25); }
.flow-success > p { max-width: 470px; }
.info-dialog { width: min(480px, calc(100% - 24px)); padding: 38px; text-align: center; }
.info-dialog .dialog-symbol { margin-inline: auto; }
.info-dialog .button { margin-top: 8px; }
.login-dialog { width: min(470px, calc(100% - 24px)); }
.login-dialog form { padding: 36px; }
.login-dialog h2 { margin: 10px 0 8px; font-size: 36px; letter-spacing: -.045em; }
.login-dialog form > p:not(.form-error) { margin: 0 0 24px; color: var(--muted); }
.login-dialog .button { width: 100%; }
.login-create { width: 100%; margin-top: 9px; padding: 12px; border: 0; color: var(--wine); background: transparent; font-weight: 750; cursor: pointer; }
.account-dialog { width: min(720px, calc(100% - 24px)); padding: 34px; text-align: center; }
.account-dialog .dialog-symbol { margin-inline: auto; }
.account-dialog h2 { margin: 0 0 8px; font-size: 36px; letter-spacing: -.045em; }
.account-dialog > p { color: var(--muted); }
.account-tabs { position: sticky; z-index: 3; top: 0; display: grid; grid-template-columns: repeat(5,1fr); gap: 6px; margin: 22px 0 16px; padding: 6px; border: 1px solid #e2d9e7; border-radius: 16px; background: rgba(248,246,251,.94); backdrop-filter: blur(14px); }
.account-tabs button { min-height: 42px; padding: 0 12px; border: 0; border-radius: 11px; color: #827487; background: transparent; font-size: 11px; font-weight: 800; cursor: pointer; }
.account-tabs button.active { color: #fff; background: #211526; box-shadow: 0 9px 22px rgba(33,21,38,.17); }
.account-panel { text-align: left; animation: account-panel-in .18s ease-out; }
.account-panel[hidden] { display: none !important; }
@keyframes account-panel-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
.account-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 20px; padding-top: 18px; border-top: 1px solid #e5dce8; }
.membership-pill { width: 100%; display: flex; justify-content: space-between; align-items: center; margin-top: 20px; padding: 13px 15px; border: 1px solid rgba(109,33,71,.14); border-radius: 14px; color: var(--wine); background: linear-gradient(120deg, #fff6ef, #f6edf7); cursor: pointer; }
.membership-pill span { color: var(--muted); font-size: 11px; }
.membership-pill strong { font-size: 13px; }
.boost-card { display: grid; grid-template-columns: 44px 1fr auto; gap: 12px; align-items: center; margin-top: 10px; padding: 13px; border: 1px solid #dfd3e5; border-radius: 15px; background: #fff; }
.boost-symbol { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 14px; color: #fff; background: linear-gradient(135deg, var(--coral), var(--violet)); font-size: 21px; font-weight: 900; }
.boost-card > div { min-width: 0; display: grid; gap: 3px; }
.boost-card strong { font-size: 13px; }
.boost-card p { margin: 0; color: var(--muted); font-size: 10px; line-height: 1.35; }
.boost-card button { min-height: 36px; padding: 0 12px; border: 0; border-radius: 10px; color: #fff; background: #211526; font-size: 10px; font-weight: 800; cursor: pointer; }
.boost-card button:disabled { color: #8f8493; background: #eee8f0; cursor: default; }
.boost-card.active { border-color: rgba(255,93,112,.38); background: linear-gradient(120deg, #fff8f5, #f8f1ff); }
.boost-card.active .boost-symbol { box-shadow: 0 0 0 7px rgba(255,93,112,.11); }
.privacy-card { display: grid; grid-template-columns: 44px 1fr auto; gap: 12px; align-items: center; margin-top: 10px; padding: 13px; border: 1px solid #dfd3e5; border-radius: 15px; background: #fff; }
.privacy-symbol { background: linear-gradient(135deg, #6d2147, #372a63); }
.privacy-card > div { min-width: 0; display: grid; gap: 3px; }
.privacy-card strong { font-size: 13px; }
.privacy-card p { margin: 0; color: var(--muted); font-size: 10px; line-height: 1.35; }
.privacy-card button { min-height: 36px; padding: 0 12px; border: 0; border-radius: 10px; color: #fff; background: #211526; font-size: 10px; font-weight: 800; cursor: pointer; }
.privacy-form { display: grid; gap: 10px; margin-top: 10px; padding: 13px; border: 1px solid #dfd3e5; border-radius: 15px; background: #fff; }
.privacy-form[hidden] { display: none !important; }
.privacy-toggle { display: flex; align-items: center; gap: 10px; font-size: 11px; color: var(--wine); line-height: 1.4; cursor: pointer; }
.privacy-toggle input { width: 17px; height: 17px; flex: 0 0 auto; accent-color: #6d2147; }
.privacy-form .field input { width: 100%; min-height: 38px; padding: 0 12px; border: 1px solid #dfd3e5; border-radius: 10px; font-size: 12px; }
.read-receipts-row { display: flex; align-items: center; gap: 10px; margin-top: 10px; padding: 13px; border: 1px solid #dfd3e5; border-radius: 15px; background: #fff; font-size: 11px; color: var(--wine); line-height: 1.4; cursor: pointer; }
.read-receipts-row input { width: 17px; height: 17px; flex: 0 0 auto; accent-color: #6d2147; }
.read-receipts-row input:disabled { opacity: .5; }
.privacy-hint { margin: 0; color: var(--muted); font-size: 10px; line-height: 1.35; }
.visits-history-hint { margin: -4px 12px 12px 42px; }
.progress-card { display: grid; gap: 9px; margin-top: 10px; padding: 13px; border: 1px solid #dfd3e5; border-radius: 15px; background: #fff; }
.achievement-list { display: grid; gap: 6px; }
.achievement-row { display: grid; grid-template-columns: 22px 1fr auto; gap: 9px; align-items: center; font-size: 12px; }
.achievement-row span:first-child { width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; background: #f1ecf5; color: var(--muted); font-size: 11px; }
.achievement-row.earned span:first-child { background: var(--lime); color: #1d5b34; }
.achievement-row.earned strong { font-weight: 700; }
.achievement-row small { color: var(--muted); font-size: 10px; }
.spark-spend { display: flex; flex-wrap: wrap; gap: 8px; }
.spark-spend button { min-height: 34px; padding: 0 12px; border: 1px solid var(--line); border-radius: 10px; background: #fff; font-size: 11px; font-weight: 700; cursor: pointer; }
.spark-spend button:disabled { opacity: .5; cursor: default; }
/* §6.3 ТЗ: мешаем сохранить оригинал фотографии через интерфейс. ТЗ прямо оговаривает,
   что абсолютной защиты быть не может — это именно затруднение, а не гарантия. */
.profile-main-photo img, .profile-thumb img, .profile-card-photo img, .daily-answer-avatar img, .plan-row img {
  -webkit-user-drag: none; user-select: none; pointer-events: none;
}
.daily-answer-card.mine { border-color: var(--violet); background: #faf7ff; }
.daily-answer-card.mine header small { color: var(--violet); }
.content-react { width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; background: rgba(255,255,255,.92); color: var(--coral); font-size: 15px; cursor: pointer; }
.content-react:hover { border-color: var(--coral); background: #fff; }
.profile-main-photo .content-react { position: absolute; right: 12px; bottom: 12px; z-index: 2; }
.content-react.inline { width: 24px; height: 24px; display: inline-grid; margin-left: 6px; vertical-align: middle; font-size: 12px; }
.interest-chip { display: inline-flex; align-items: center; gap: 2px; }
.interest-chip > button:first-child { border: 0; background: transparent; color: inherit; font: inherit; cursor: pointer; }
.interest-hide { padding: 0 4px; border: 0; background: transparent; color: var(--muted); font-size: 13px; line-height: 1; cursor: pointer; opacity: .55; }
.interest-hide:hover { opacity: 1; color: var(--coral); }
.profile-answer { position: relative; }
/* Шапка игры: тот же тёмный стол, что и на сцене броска, — вход в игру
   и сама игра выглядят одним целым. */
#dice-dialog .play-head, #streams-dialog .play-head { background: radial-gradient(circle at 88% 0%, rgba(255,93,112,.35), transparent 42%), linear-gradient(135deg, #1d1428, #3a1f3f); }
#dice-dialog .play-symbol, #streams-dialog .play-symbol { color: #fff; background: linear-gradient(135deg, var(--coral), #ff8f66); border-color: rgba(255,255,255,.28); box-shadow: 0 10px 24px rgba(255,93,112,.35); }
#dice-dialog .play-body, #streams-dialog .play-body, #blind-dialog .play-body { background: linear-gradient(180deg, #fbf9fd, #f5f1f9); }
/* «Слепой диалог» — фиолетовый акцент вместо коралла «Костей»/трансляций: та же
   тёмная сцена, но свой цвет отличает анонимный формат от голоса и живого эфира. */
#blind-dialog .play-head { background: radial-gradient(circle at 88% 0%, rgba(185,138,255,.38), transparent 42%), linear-gradient(135deg, #1d1428, #2a1f42); }
#blind-dialog .play-symbol { color: #fff; background: linear-gradient(135deg, var(--violet), #8f6ce0); border-color: rgba(255,255,255,.28); box-shadow: 0 10px 24px rgba(138,99,220,.35); }

/* «Бросить кости»: игра начинается с самого нажатия — кубик настоящий, трёхмерный,
   и он действительно катится. Ниже — сцена броска, радар ожидания, экран разговора
   и экран «что дальше». Всё движение выключается при prefers-reduced-motion. */
.dice-scene, .dice-call { display: grid; gap: 14px; justify-items: center; text-align: center; padding: 4px 0 2px; }
.dice-title { margin: 0; font-size: 22px; letter-spacing: -.03em; }
.dice-lead { max-width: 420px; margin: 0; color: var(--muted); font-size: 14px; line-height: 1.55; }
.streams-connecting-spinner { width: 46px; height: 46px; border: 3px solid rgba(255,255,255,.25); border-top-color: var(--coral); border-radius: 50%; animation: streams-spin .8s linear infinite; }
@keyframes streams-spin { to { transform: rotate(360deg); } }
.dice-note { max-width: 440px; margin: 4px 0 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
.dice-note .plain-action { padding: 0; border: 0; background: none; font-size: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }

/* Сцена броска: тёмный «стол» с мягким светом сверху. */
.dice-stage {
  position: relative; width: 100%; max-width: 420px; height: 190px; display: grid; place-items: center;
  border-radius: 24px; overflow: hidden;
  background:
    radial-gradient(120% 90% at 50% -10%, rgba(202, 255, 189, .22), transparent 55%),
    radial-gradient(90% 80% at 80% 110%, rgba(185, 138, 255, .3), transparent 60%),
    linear-gradient(160deg, #1d1428, #100a16 70%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07);
  perspective: 700px;
}
.dice-shadow {
  position: absolute; bottom: 34px; width: 96px; height: 16px; border-radius: 50%;
  background: rgba(0, 0, 0, .45); filter: blur(9px); animation: dice-shadow 3.6s ease-in-out infinite;
}

/* Кубик: шесть настоящих граней. */
.dice3d { width: 88px; height: 88px; transform-style: preserve-3d; }
.dice3d-box {
  position: relative; width: 100%; height: 100%; transform-style: preserve-3d;
  animation: dice-float 3.6s ease-in-out infinite;
}
.dice3d.is-rolling .dice3d-box { animation: dice-throw .85s cubic-bezier(.22, .8, .25, 1) forwards; }
.dice3d-face {
  position: absolute; inset: 0; display: grid; padding: 13%; gap: 6%;
  grid-template-areas: "a . c" "d e f" "g . i";
  grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr);
  border-radius: 16px; background: linear-gradient(150deg, #fffdfb, #efe7f6);
  box-shadow: inset 0 0 0 1px rgba(31, 8, 21, .07), inset 0 -6px 14px rgba(31, 8, 21, .12);
  backface-visibility: hidden;
}
.dice3d-face i { width: 100%; aspect-ratio: 1; border-radius: 50%; background: #1d1428; box-shadow: inset 0 -1px 2px rgba(255,255,255,.25); }
.dice3d-f1 { transform: translateZ(44px); }
.dice3d-f6 { transform: rotateY(180deg) translateZ(44px); }
.dice3d-f2 { transform: rotateY(90deg) translateZ(44px); }
.dice3d-f5 { transform: rotateY(-90deg) translateZ(44px); }
.dice3d-f3 { transform: rotateX(90deg) translateZ(44px); }
.dice3d-f4 { transform: rotateX(-90deg) translateZ(44px); }
.dice3d-f1 i { grid-area: e; }
.dice3d-f2 i:nth-child(1) { grid-area: a; } .dice3d-f2 i:nth-child(2) { grid-area: i; }
.dice3d-f3 i:nth-child(1) { grid-area: a; } .dice3d-f3 i:nth-child(2) { grid-area: e; } .dice3d-f3 i:nth-child(3) { grid-area: i; }
.dice3d-f4 i:nth-child(1) { grid-area: a; } .dice3d-f4 i:nth-child(2) { grid-area: c; }
.dice3d-f4 i:nth-child(3) { grid-area: g; } .dice3d-f4 i:nth-child(4) { grid-area: i; }
.dice3d-f5 i:nth-child(1) { grid-area: a; } .dice3d-f5 i:nth-child(2) { grid-area: c; } .dice3d-f5 i:nth-child(3) { grid-area: e; }
.dice3d-f5 i:nth-child(4) { grid-area: g; } .dice3d-f5 i:nth-child(5) { grid-area: i; }
.dice3d-f6 i:nth-child(1) { grid-area: a; } .dice3d-f6 i:nth-child(2) { grid-area: c; } .dice3d-f6 i:nth-child(3) { grid-area: d; }
.dice3d-f6 i:nth-child(4) { grid-area: f; } .dice3d-f6 i:nth-child(5) { grid-area: g; } .dice3d-f6 i:nth-child(6) { grid-area: i; }
.dice3d-sm { width: 54px; height: 54px; }
.dice3d-sm .dice3d-face { border-radius: 11px; padding: 15%; }
.dice3d-sm .dice3d-f1 { transform: translateZ(27px); }
.dice3d-sm .dice3d-f6 { transform: rotateY(180deg) translateZ(27px); }
.dice3d-sm .dice3d-f2 { transform: rotateY(90deg) translateZ(27px); }
.dice3d-sm .dice3d-f5 { transform: rotateY(-90deg) translateZ(27px); }
.dice3d-sm .dice3d-f3 { transform: rotateX(90deg) translateZ(27px); }
.dice3d-sm .dice3d-f4 { transform: rotateX(-90deg) translateZ(27px); }

@keyframes dice-float {
  0%, 100% { transform: translateY(-4px) rotateX(-22deg) rotateY(28deg); }
  50% { transform: translateY(4px) rotateX(-14deg) rotateY(46deg); }
}
@keyframes dice-throw {
  0% { transform: translateY(0) rotateX(-20deg) rotateY(30deg) scale(1); }
  35% { transform: translateY(-46px) rotateX(340deg) rotateY(400deg) scale(.92); }
  70% { transform: translateY(6px) rotateX(680deg) rotateY(760deg) scale(1.04); }
  85% { transform: translateY(-6px) rotateX(700deg) rotateY(790deg) scale(.99); }
  100% { transform: translateY(0) rotateX(calc(720deg + var(--dice-end-x, 0deg))) rotateY(calc(720deg + var(--dice-end-y, 0deg))) scale(1); }
}
@keyframes dice-shadow {
  0%, 100% { transform: scale(1); opacity: .5; }
  50% { transform: scale(1.14); opacity: .32; }
}

/* Выбор радиуса — чипсами: видно все варианты сразу, без выпадающего списка. */
.dice-radius { display: grid; gap: 9px; justify-items: center; }
.dice-radius-label { color: var(--muted); font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.dice-chips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.dice-chip {
  padding: 9px 15px; border: 1px solid var(--line); border-radius: 999px; background: var(--white);
  color: var(--ink); font-size: 13px; font-weight: 650; cursor: pointer; transition: transform .12s, border-color .16s, background .16s;
}
.dice-chip:hover { transform: translateY(-1px); border-color: var(--violet); }
.dice-chip.is-on { border-color: transparent; color: #fff; background: linear-gradient(135deg, #2b1a3c, #17101f); }
.dice-chip-wide { padding: 11px 20px; }

/* Главная кнопка: заметная, с бликом — её и нужно нажать. */
.dice-throw {
  display: inline-flex; align-items: center; gap: 9px; position: relative; overflow: hidden;
  margin-top: 2px; padding: 14px 28px; border: 0; border-radius: 999px;
  color: #fff; background: linear-gradient(135deg, var(--coral), #ff8360);
  font-size: 15px; font-weight: 800; cursor: pointer;
  box-shadow: 0 14px 30px rgba(255, 93, 112, .34);
  transition: transform .14s, box-shadow .2s, filter .2s;
}
.dice-throw:hover { transform: translateY(-2px); box-shadow: 0 20px 40px rgba(255, 93, 112, .4); }
.dice-throw:active { transform: translateY(0); }
.dice-throw[disabled] { filter: saturate(.6); cursor: default; transform: none; }
.dice-throw::after {
  content: ""; position: absolute; inset: 0 auto 0 -60%; width: 45%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.45), transparent);
  animation: dice-sheen 2.8s ease-in-out infinite;
}
.dice-throw[disabled]::after { animation: none; }
.dice-throw-small { padding: 11px 20px; font-size: 14px; background: linear-gradient(135deg, #2b1a3c, #17101f); box-shadow: 0 12px 26px rgba(23,16,31,.28); }
.dice-throw-small:hover { box-shadow: 0 16px 32px rgba(23,16,31,.34); }
.dice-throw-icon svg { width: 18px; height: 18px; fill: currentColor; stroke: none; display: block; }
@keyframes dice-sheen { 0%, 60% { left: -60%; } 100% { left: 130%; } }

/* Ожидание — радар: волны расходятся ровно настолько, насколько широк поиск. */
.dice-radar {
  position: relative; width: 100%; max-width: 420px; height: 200px; display: grid; place-items: center;
  border-radius: 24px; overflow: hidden; perspective: 700px;
  background: radial-gradient(85% 80% at 50% 50%, rgba(185,138,255,.28), transparent 62%), linear-gradient(160deg, #1d1428, #100a16 72%);
}
.dice-ping {
  position: absolute; width: 92px; height: 92px; border-radius: 50%;
  border: 1px solid rgba(202, 255, 189, .55); animation: dice-ping 3s ease-out infinite;
}
.dice-ping:nth-child(2) { animation-delay: 1s; }
.dice-ping:nth-child(3) { animation-delay: 2s; }
.dice-ping { border-color: rgba(202, 255, 189, .75); box-shadow: 0 0 22px rgba(202, 255, 189, .18) inset; }
@keyframes dice-ping {
  0% { transform: scale(.6); opacity: .85; }
  100% { transform: scale(3.4); opacity: 0; }
}
.dice-live { display: inline-flex; align-items: center; gap: 8px; margin: 0; color: var(--muted); font-size: 13px; }
.dice-live-dot { width: 8px; height: 8px; border-radius: 50%; background: #3ec98a; box-shadow: 0 0 0 0 rgba(62,201,138,.6); animation: dice-live 1.8s ease-out infinite; }
@keyframes dice-live { 70% { box-shadow: 0 0 0 9px rgba(62,201,138,0); } 100% { box-shadow: 0 0 0 0 rgba(62,201,138,0); } }
.dice-hint { display: grid; gap: 3px; max-width: 420px; padding: 13px 17px; border-radius: 16px; background: #eee7f4; color: #5a4863; font-size: 13px; line-height: 1.5; }
.dice-hint strong { color: var(--ink); }
.dice-hint-good { background: #e9f8ef; color: #2f6a4a; }

/* Разговор. */
.dice-call-stage {
  position: relative; width: 100%; max-width: 420px; min-height: 220px; display: grid; place-items: center;
  border-radius: 24px; overflow: hidden; padding: 18px;
  background: radial-gradient(85% 80% at 50% 20%, rgba(185,138,255,.3), transparent 62%), linear-gradient(160deg, #1d1428, #100a16 72%);
}
.dice-call-stage.has-video { padding: 10px; }
.dice-orb { position: relative; width: 128px; height: 128px; display: grid; place-items: center; --dice-level: 0; }
.dice-orb-face {
  position: relative; z-index: 2; width: 96px; height: 96px; display: grid; place-items: center; border-radius: 50%;
  color: #fff; background: linear-gradient(140deg, var(--coral), #ff9a6a); font-size: 34px; font-weight: 850;
  box-shadow: 0 12px 34px rgba(255, 93, 112, .4);
}
/* Кольцо дышит по громкости собеседника — сразу видно, что звук идёт. */
.dice-orb-ring {
  position: absolute; inset: 0; border-radius: 50%; border: 2px solid rgba(202, 255, 189, .7);
  transform: scale(calc(1 + var(--dice-level) * .28)); opacity: calc(.35 + var(--dice-level) * .65);
  transition: transform .09s linear, opacity .09s linear;
}
.dice-orb-ring-2 { inset: -16px; border-color: rgba(185, 138, 255, .45); transform: scale(calc(1 + var(--dice-level) * .16)); }
.dice-call-meta { display: grid; gap: 2px; }
.dice-call-meta strong { font-size: 17px; letter-spacing: -.02em; }
.dice-call-meta small { color: var(--muted); font-size: 13px; }
.dice-conn { display: inline-flex; align-items: center; gap: 10px; margin: 0; color: var(--muted); font-size: 13px; }
#dice-timer { padding: 3px 9px; border-radius: 8px; background: #efe9f5; color: var(--ink); font-variant-numeric: tabular-nums; font-weight: 700; }
.dice-video { display: grid; grid-template-columns: 1fr; gap: 10px; width: 100%; position: relative; }
.dice-video video { width: 100%; border-radius: 16px; background: #191021; aspect-ratio: 4 / 3; object-fit: cover; }
.dice-video video[hidden] { display: none !important; }
.dice-video-pair { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
.dice-person-tile { position: relative; min-width: 0; aspect-ratio: 3 / 4; display: grid; place-items: center; overflow: hidden; border: 1px solid rgba(255,255,255,.12); border-radius: 18px; background: radial-gradient(circle at 50% 30%,rgba(185,138,255,.2),transparent 48%),#191021; }
.dice-person-tile video { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; border-radius: 0; object-fit: cover; }
.dice-person-placeholder { position: relative; width: 82px; height: 82px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: linear-gradient(140deg,var(--coral),#ff9a6a); box-shadow: 0 12px 34px rgba(255,93,112,.3); }
.dice-person-placeholder strong { position: relative; z-index: 2; font-size: 28px; }
.dice-person-placeholder .dice-orb-ring { inset: -10px; }
.dice-person-placeholder .dice-orb-ring-2 { inset: -22px; }
.dice-person-me { background: linear-gradient(140deg,var(--violet),#8f6ce0); box-shadow: 0 12px 34px rgba(143,108,224,.28); }
.dice-person-tile.has-camera .dice-person-placeholder { display: none; }
.dice-person-label { position: absolute; z-index: 3; left: 10px; bottom: 10px; max-width: calc(100% - 20px); padding: 5px 9px; overflow: hidden; border-radius: 999px; color: #fff; background: rgba(20,12,28,.72); backdrop-filter: blur(8px); font-size: 11px; font-weight: 750; text-overflow: ellipsis; white-space: nowrap; }

/* Управление разговором — круглые кнопки, как в обычном звонке. */
.dice-bar { display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; margin-top: 2px; }
.dice-ctl { display: grid; gap: 6px; justify-items: center; width: 72px; padding: 0; border: 0; background: none; color: var(--muted); font-size: 11px; line-height: 1.25; cursor: pointer; }
.dice-ctl-icon { width: 52px; height: 52px; display: grid; place-items: center; border-radius: 50%; background: #ece5f3; color: var(--ink); transition: transform .12s, background .16s, color .16s; }
.dice-ctl svg { width: 23px; height: 23px; }
.dice-ctl:hover .dice-ctl-icon { transform: translateY(-2px); background: #e0d6ec; }
.dice-ctl.is-off .dice-ctl-icon, .dice-ctl.is-on .dice-ctl-icon { color: #fff; background: linear-gradient(135deg, #2b1a3c, #17101f); }
.dice-ctl.is-danger .dice-ctl-icon { color: #fff; background: linear-gradient(135deg, var(--coral), var(--coral-dark)); box-shadow: 0 10px 22px rgba(255,93,112,.34); }
.dice-ctl-label { max-width: 78px; }

/* Экран после разговора. */
.dice-ended-card {
  display: flex; align-items: center; gap: 13px; width: 100%; max-width: 420px; padding: 14px 16px;
  border: 1px solid var(--line); border-radius: 20px; background: var(--white); text-align: left;
  box-shadow: 0 12px 30px rgba(31, 8, 21, .07);
}
.dice-ended-face { width: 52px; height: 52px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 50%; color: #fff; background: var(--wine); font-size: 19px; font-weight: 850; }
.dice-ended-card strong { display: block; font-size: 15px; }
.dice-ended-card small { color: var(--muted); font-size: 12px; }
.dice-ended-time { margin-left: auto; padding: 5px 11px; border-radius: 999px; background: var(--violet-soft); color: #5b3d8a; font-size: 13px; font-weight: 750; font-variant-numeric: tabular-nums; }
.dice-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: center; }

@media (max-width: 620px) {
  .dice-stage, .dice-radar { height: 168px; }
  .dice-bar { gap: 10px; }
  .dice-ctl { width: 64px; }
  .dice-ctl-icon { width: 48px; height: 48px; }
  .dice-call-stage.has-video { padding: 8px; }
  .dice-video-pair { gap: 7px; }
  .dice-person-placeholder { width: 62px; height: 62px; }
  .dice-person-placeholder strong { font-size: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .dice3d-box, .dice-shadow, .dice-ping, .dice-live-dot, .dice-throw::after { animation: none !important; }
  .dice3d-box { transform: rotateX(-20deg) rotateY(30deg); }
  .dice-orb-ring { transition: none; }
}
/* Трансляции: список, экран настройки, студия хоста, экран зрителя. Тёмная
   стеклянная сцена и .dice-bar/.dice-ctl переиспользуются из «Костей» — единый
   визуальный язык вместо второго с нуля. */
.streams-scene { display: grid; gap: 14px; padding: 4px 0 2px; width: 100%; }

.streams-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
.stream-card {
  position: relative; cursor: pointer; border: 0; border-radius: 20px; overflow: hidden; text-align: left;
  background: linear-gradient(160deg, #1d1428, #100a16 72%);
  box-shadow: 0 14px 30px rgba(31, 8, 21, .2);
  transition: transform .18s ease, box-shadow .18s ease;
}
.stream-card:hover { transform: translateY(-3px); box-shadow: 0 20px 42px rgba(31, 8, 21, .3); }
.stream-card-media {
  position: relative; aspect-ratio: 3/4; display: grid; place-items: center;
  background: radial-gradient(120% 90% at 50% -10%, rgba(202, 255, 189, .18), transparent 55%),
    radial-gradient(90% 80% at 80% 110%, rgba(185, 138, 255, .3), transparent 60%);
}
.stream-card-media > span, .stream-card-media > img {
  width: 30%; aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; overflow: hidden;
  color: #fff; font-weight: 800; font-size: 15px; background: linear-gradient(135deg, var(--coral), var(--violet)); object-fit: cover;
}
.stream-card-live, .streams-live-badge {
  position: absolute; top: 10px; left: 10px; z-index: 1; display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 9px 4px 7px; border-radius: 999px; color: #fff; background: rgba(255, 93, 112, .94);
  font-size: 10px; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; backdrop-filter: blur(6px);
}
.stream-card-live i, .streams-live-badge i { width: 6px; height: 6px; border-radius: 50%; background: #fff; animation: streams-live-pulse 1.7s ease-in-out infinite; }
@keyframes streams-live-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
.stream-card-viewers { position: absolute; top: 10px; right: 10px; padding: 4px 9px; border-radius: 999px; color: #fff; background: rgba(16, 10, 22, .55); font-size: 10px; font-weight: 700; backdrop-filter: blur(6px); }
.stream-card-copy { padding: 11px 13px 13px; color: #fff; }
.stream-card-copy strong { display: block; font-size: 12.5px; }
.stream-card-copy p { margin: 3px 0 0; color: rgba(255, 255, 255, .74); font-size: 11.5px; line-height: 1.35; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }

/* Экран «Выйти в эфир»: название обязательно, ничего не начинается без него. */
.streams-setup { display: grid; gap: 14px; justify-items: center; text-align: center; max-width: 420px; margin: 0 auto; padding: 6px 0 2px; }
.streams-setup-symbol { width: 52px; height: 52px; display: grid; place-items: center; border-radius: 18px; color: #fff; background: linear-gradient(135deg, var(--coral), var(--violet)); font-size: 22px; }
.streams-setup h3 { margin: 0; font-size: 22px; letter-spacing: -.03em; }
.streams-setup .field { width: 100%; text-align: left; }
.streams-setup-actions { display: flex; gap: 10px; width: 100%; }
.streams-setup-actions button { flex: 1; min-height: 48px; }

.streams-title-field input { font-weight: 700; }
.streams-stat-row { margin: 0; color: var(--muted); font-size: 12px; text-align: center; }
.streams-end-button { width: 100%; background: linear-gradient(135deg, #ff526b, #ff765d); }

.streams-host-row { display: flex; align-items: center; gap: 10px; }
.streams-host-row > div { min-width: 0; }
.streams-host-row strong { display: block; font-size: 14px; }
.streams-host-row p { margin: 1px 0; color: var(--muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.streams-host-row small { color: var(--muted); font-size: 11px; }
.streams-host-avatar, .streams-viewer-avatar {
  flex: 0 0 auto; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; overflow: hidden;
  color: #fff; font-size: 13px; font-weight: 800; background: linear-gradient(135deg, var(--coral), var(--violet));
}
.streams-viewer-avatar { width: 28px; height: 28px; font-size: 11px; background: var(--violet); }
.streams-host-avatar img, .streams-viewer-avatar img { width: 100%; height: 100%; object-fit: cover; }

.streams-viewer-list { display: grid; gap: 8px; max-height: 160px; overflow-y: auto; }
.streams-viewer-row { display: flex; align-items: center; gap: 8px; padding: 7px 8px 7px 7px; border: 1px solid var(--line); border-radius: 30px; font-size: 12px; }
.streams-viewer-row strong { flex: 1; min-width: 0; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.streams-viewer-row .plain-action { flex: 0 0 auto; font-size: 11px; }

/* Видео (у .dice-call-stage раньше не было размеров для video — рендерился в
   дефолтном браузерном размере, отсюда и «убогий» вид первой версии). */
.streams-stage { min-height: 220px; }
.dice-call-stage.streams-stage.has-video { padding: 0; }
.streams-stage video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* Чат трансляции — жанр Twitch/YouTube (построчная лента, не переписка), но с
   премиальной отделкой: объёмный фон с фирменным свечением, аватарки, хавер по
   строкам, лёгкая анимация появления — плоский чёрный текст на чёрном читался
   дёшево, даже будучи структурно правильным. */
.streams-chat-panel {
  display: flex; flex-direction: column; gap: 2px; height: 210px; overflow-y: auto;
  padding: 10px 12px; border-radius: 18px; text-align: left; scroll-behavior: smooth;
  background:
    radial-gradient(130% 90% at 100% 0%, rgba(185, 138, 255, .16), transparent 55%),
    radial-gradient(90% 70% at 0% 100%, rgba(255, 93, 112, .1), transparent 60%),
    linear-gradient(165deg, #1d1428, #100a16 80%);
  border: 1px solid rgba(255, 255, 255, .07);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05);
}
.streams-chat-empty { margin: auto; color: rgba(255, 255, 255, .48); font-size: 12px; text-align: center; }
.streams-chat-message { display: flex; align-items: flex-start; gap: 8px; padding: 4px 6px; border-radius: 10px; animation: streams-msg-in .22s ease-out; }
.streams-chat-message:hover { background: rgba(255, 255, 255, .05); }
@keyframes streams-msg-in { from { opacity: 0; transform: translateY(4px); } }
.streams-chat-avatar {
  flex: 0 0 auto; width: 20px; height: 20px; margin-top: 2px; display: grid; place-items: center; border-radius: 50%; overflow: hidden;
  color: #fff; font-size: 8.5px; font-weight: 800;
}
.streams-chat-avatar img { width: 100%; height: 100%; object-fit: cover; }
.streams-chat-line { min-width: 0; margin: 0; color: rgba(255, 255, 255, .92); font-size: 13.5px; line-height: 1.5; word-break: break-word; }
.streams-chat-line strong { margin-right: 6px; font-weight: 800; }

.streams-chat-form { display: flex; align-items: center; gap: 8px; padding: 4px; border-radius: 999px; background: #f1ecf7; }
.streams-chat-form input { flex: 1; min-height: 42px; padding: 0 16px; border: 0; background: transparent; font-size: 13px; }
.streams-chat-form input:disabled { color: var(--muted); }
.streams-chat-form input:focus { outline: none; }
.streams-send-button {
  flex: 0 0 auto; width: 38px; height: 38px; display: grid; place-items: center; border: 0; border-radius: 50%;
  color: #fff; background: linear-gradient(135deg, var(--coral), #ff8f66); cursor: pointer;
  box-shadow: 0 6px 16px rgba(255, 93, 112, .3); transition: transform .15s ease;
}
.streams-send-button:hover { transform: scale(1.06); }
.streams-send-button svg { width: 16px; height: 16px; }

@media (max-width: 560px) {
  .streams-setup { gap: 11px; }
  .streams-setup-symbol { width: 44px; height: 44px; font-size: 19px; }
  .streams-setup h3 { font-size: 19px; }
  .streams-setup-actions { flex-direction: column-reverse; }
  .streams-setup-actions button { width: 100%; }
  .streams-grid { grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: 10px; }
  .streams-stage { min-height: 190px; }
  .streams-chat-panel { height: 170px; }
  .streams-host-row p { max-width: 44vw; }
}

/* «Слепой диалог»: здесь ровно два собеседника и это настоящая переписка —
   в отличие от чата трансляции (много людей, жанр Twitch), тут пузыри 1:1
   уместны и правильны. */
.blind-topic { padding: 14px 16px; border-radius: 16px; background: linear-gradient(135deg, var(--violet-soft, #f4f1ff), #fff); text-align: center; }
.blind-topic strong { display: block; margin-bottom: 4px; color: var(--wine); font-size: 15px; }
.blind-topic p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.4; }
.blind-timer { align-self: center; padding: 4px 14px; border-radius: 999px; color: #fff; background: linear-gradient(135deg, var(--violet), #8f6ce0); font-size: 13px; font-weight: 800; font-variant-numeric: tabular-nums; }
.blind-chat { height: 260px; }
.blind-message { max-width: 78%; margin-bottom: 6px; }
.blind-message p { margin: 0; padding: 8px 13px; border-radius: 16px 16px 16px 4px; color: #fff; background: rgba(255, 255, 255, .1); font-size: 13.5px; line-height: 1.45; word-break: break-word; }
.blind-message.is-me { margin-left: auto; }
.blind-message.is-me p { border-radius: 16px 16px 4px 16px; background: linear-gradient(135deg, var(--violet), #8f6ce0); }
.blind-reveal-card { display: grid; gap: 6px; justify-items: center; text-align: center; padding: 20px; border-radius: 20px; background: #faf7ff; }
.blind-reveal-avatar {
  width: 64px; height: 64px; display: grid; place-items: center; border-radius: 50%; overflow: hidden;
  color: #fff; font-size: 20px; font-weight: 800; background: linear-gradient(135deg, var(--violet), #8f6ce0);
}
.blind-reveal-avatar img { width: 100%; height: 100%; object-fit: cover; }
.blind-reveal-card span:last-child { color: var(--muted); font-size: 13px; }

/* Полноценная студия трансляций: широкая видеосцена и независимый чат. */
#streams-dialog { width: min(1180px, calc(100% - 28px)); border-radius: 26px; }
#streams-dialog .play-head { padding: 17px 24px; }
#streams-dialog .play-head h2 { font-size: 26px; }
#streams-dialog .play-symbol { width: 46px; height: 46px; border-radius: 15px; }
#streams-dialog .play-body { min-height: 0; padding: 18px; }
.streams-live-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 14px; align-items: stretch; }
.streams-video-column { min-width: 0; display: flex; flex-direction: column; gap: 11px; }
.streams-stage, .dice-call-stage.streams-stage { max-width: none; min-height: 410px; aspect-ratio: 16 / 9; border-radius: 20px; background: radial-gradient(circle at 50% 20%, #392550, #130d19 67%); box-shadow: 0 18px 48px rgba(31, 8, 21, .23); }
.streams-live-badge { top: 14px; left: 14px; padding: 6px 11px 6px 8px; font-size: 11px; }
.streams-live-meta, .streams-watch-footer, .streams-action-row, .streams-watch-actions { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.streams-live-meta, .streams-watch-footer { min-height: 58px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 16px; background: rgba(255, 255, 255, .74); }
.streams-live-meta > div:first-child { flex: 1; min-width: 0; }
.streams-live-kicker { display: block; color: var(--muted); font-size: 9px; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; }
.streams-title-field { display: block; }
.streams-title-field input { width: 100%; padding: 2px 0; border: 0; outline: 0; color: var(--ink); background: transparent; font-size: 18px; font-weight: 820; }
.streams-connection { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 7px; padding: 7px 10px; border-radius: 999px; color: #6f6375; background: #eee8f1; font-size: 10px; font-weight: 780; }
.streams-connection i { width: 7px; height: 7px; border-radius: 50%; background: #aa9eb0; box-shadow: 0 0 0 4px rgba(170, 158, 176, .14); }
.streams-connection.is-online { color: #24704f; background: #e1f6eb; }
.streams-connection.is-online i { background: #35bf7e; box-shadow: 0 0 0 4px rgba(53, 191, 126, .15); }
.streams-connection.is-error { color: #a54653; background: #ffe5e8; }
.streams-connection.is-error i { background: #ff5d70; }
.streams-action-row { min-height: 58px; }
.streams-action-row .dice-bar, .streams-watch-actions .dice-bar { justify-content: flex-start; gap: 8px; }
.streams-action-row .dice-ctl, .streams-watch-actions .dice-ctl { width: 64px; }
.streams-action-row .dice-ctl-icon, .streams-watch-actions .dice-ctl-icon { width: 42px; height: 42px; }
.streams-stat-row { display: flex; gap: 7px; margin-left: auto; }
.streams-stat-row b { padding: 7px 10px; border-radius: 999px; color: #6b5b73; background: #eee8f1; font-size: 11px; }
.streams-end-button { width: auto; min-height: 42px; padding: 0 16px; }
.streams-watch-footer .streams-host-row { flex: 1; min-width: 0; }
.streams-watch-footer .streams-host-row small b { color: var(--wine); }
.streams-heart-tap { border: 0; padding: 0; margin: 0; background: none; color: var(--wine); font: inherit; font-weight: 800; cursor: pointer; transition: transform .12s ease; }
.streams-heart-tap:hover, .streams-heart-tap:active { transform: scale(1.12); }

.streams-chat-column { position: relative; min-height: 0; display: flex; flex-direction: column; overflow: hidden; border-radius: 20px; color: #fff; background: linear-gradient(165deg, #1d1428, #100a16 82%); box-shadow: 0 18px 48px rgba(31, 8, 21, .22); }
.streams-chat-head { min-height: 68px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 15px; border-bottom: 1px solid rgba(255, 255, 255, .08); background: rgba(255, 255, 255, .025); }
.streams-chat-head div { min-width: 0; }
.streams-chat-head div > span { display: block; margin-bottom: 3px; color: var(--lime); font-size: 9px; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; }
.streams-chat-head strong { display: block; overflow: hidden; color: #fff; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.streams-audience { flex: 0 0 auto; padding: 5px 8px; border-radius: 999px; color: rgba(255, 255, 255, .72); background: rgba(255, 255, 255, .07); font-size: 10px; font-weight: 750; }
.streams-chat-column .streams-chat-panel { flex: 1; height: auto; min-height: 310px; padding: 10px 8px; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.streams-chat-message { position: relative; padding: 6px 7px; }
.streams-chat-message.is-mine { background: rgba(185, 138, 255, .07); }
.streams-chat-avatar { width: 26px; height: 26px; font-size: 9px; }
.streams-chat-copy { flex: 1; min-width: 0; }
.streams-chat-meta { display: flex; align-items: center; gap: 5px; margin: 0 0 2px; }
.streams-chat-meta strong { min-width: 0; overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.streams-chat-meta > span { padding: 2px 5px; border-radius: 4px; color: #17101f; background: var(--lime); font-size: 7px; font-weight: 850; letter-spacing: .04em; text-transform: uppercase; }
.streams-chat-meta time { margin-left: auto; color: rgba(255, 255, 255, .34); font-size: 9px; }
.streams-chat-meta button { width: 20px; height: 20px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; color: rgba(255, 255, 255, .42); background: transparent; cursor: pointer; }
.streams-chat-meta button:hover { color: #fff; background: rgba(255, 93, 112, .65); }
.streams-chat-line { font-size: 12px; line-height: 1.42; }
.streams-chat-quick { display: flex; align-items: center; gap: 5px; padding: 7px 10px 0; border-top: 1px solid rgba(255, 255, 255, .07); }
.streams-chat-quick button { width: 28px; height: 28px; padding: 0; border: 1px solid rgba(255, 255, 255, .1); border-radius: 9px; color: #fff; background: rgba(255, 255, 255, .05); cursor: pointer; }
.streams-chat-quick button:hover { transform: translateY(-1px); background: rgba(255, 255, 255, .12); }
.streams-chat-quick span { margin-left: auto; color: rgba(255, 255, 255, .36); font-size: 8.5px; }
.streams-chat-column .streams-chat-form { margin: 7px 9px 9px; background: rgba(255, 255, 255, .1); }
.streams-chat-column .streams-chat-form input { color: #fff; }
.streams-chat-column .streams-chat-form input::placeholder { color: rgba(255, 255, 255, .44); }
.streams-chat-unread { position: absolute; right: 14px; bottom: 93px; z-index: 2; padding: 6px 10px; border: 0; border-radius: 999px; color: #17101f; background: var(--lime); font-size: 9px; font-weight: 800; box-shadow: 0 7px 20px rgba(0, 0, 0, .3); cursor: pointer; }
.streams-chat-unread[hidden] { display: none; }
.streams-viewers-box { overflow: hidden; border: 1px solid var(--line); border-radius: 16px; background: rgba(255, 255, 255, .66); }
.streams-viewers-box summary { display: flex; align-items: center; gap: 8px; padding: 12px 14px; font-size: 12px; font-weight: 780; cursor: pointer; }
.streams-viewers-box summary span { min-width: 22px; padding: 3px 7px; border-radius: 999px; color: var(--violet); background: var(--violet-soft); text-align: center; }
.streams-viewers-box .streams-viewer-list { padding: 0 10px 10px; }
.streams-heart-bursts { position: fixed; inset: 0; z-index: 8; overflow: hidden; pointer-events: none; }
.streams-heart-bursts span { position: absolute; left: var(--heart-x); bottom: 110px; color: var(--coral); font-size: 32px; filter: drop-shadow(0 6px 10px rgba(255, 93, 112, .35)); animation: streams-heart-float 1.3s ease-out forwards; }
@keyframes streams-heart-float { to { opacity: 0; transform: translateY(-190px) rotate(15deg) scale(1.6); } }

@media (max-width: 820px) {
  #streams-dialog { width: min(720px, calc(100% - 14px)); max-height: calc(100vh - 14px); border-radius: 22px; }
  #streams-dialog .play-head { padding: 14px 16px; }
  #streams-dialog .play-body { padding: 12px; }
  .streams-live-layout { grid-template-columns: 1fr; }
  .streams-stage, .dice-call-stage.streams-stage { min-height: 0; aspect-ratio: 16 / 10; }
  .streams-chat-column .streams-chat-panel { min-height: 250px; max-height: 42vh; }
  .streams-action-row { flex-wrap: wrap; }
}
@media (max-width: 520px) {
  #streams-dialog .play-symbol { width: 40px; height: 40px; }
  #streams-dialog .play-head h2 { font-size: 21px; }
  .streams-live-meta, .streams-watch-footer { align-items: flex-start; flex-direction: column; }
  .streams-connection { align-self: flex-start; }
  .streams-action-row { justify-content: center; }
  .streams-action-row .streams-stat-row { order: -1; width: 100%; justify-content: center; margin: 0; }
  .streams-end-button { width: 100%; }
  .streams-chat-quick span { display: none; }
  .streams-chat-column .streams-chat-panel { min-height: 220px; }
}

/* Обновлённый экран эфира: видео — главный объект, чат — самостоятельная
   панель рядом на большом экране и под видео на телефоне. */
.streams-scene-list { gap: 18px; }
.streams-discovery-head { display: flex; align-items: end; justify-content: space-between; gap: 20px; }
.streams-discovery-head > div { display: grid; gap: 4px; }
.streams-discovery-head span { color: var(--coral); font-size: 10px; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; }
.streams-discovery-head strong { font-size: clamp(22px, 3vw, 31px); letter-spacing: -.04em; }
.streams-discovery-head p { max-width: 370px; margin: 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
.streams-categories { display: flex; gap: 7px; max-width: 100%; overflow-x: auto; padding: 1px 1px 5px; scrollbar-width: none; }
.streams-categories::-webkit-scrollbar { display: none; }
.streams-categories button { flex: 0 0 auto; min-height: 34px; padding: 0 14px; border: 1px solid var(--line); border-radius: 999px; color: #615568; background: #fff; font-size: 11px; font-weight: 780; cursor: pointer; }
.streams-categories button.active { color: #fff; border-color: transparent; background: linear-gradient(135deg, var(--coral), var(--violet)); }
.streams-grid { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.stream-card-media { aspect-ratio: 16 / 9; }
.stream-card-media > span, .stream-card-media > img { width: 25%; }
.stream-card-copy { display: grid; grid-template-columns: auto 1fr; column-gap: 8px; align-items: center; }
.stream-card-copy > span { grid-row: 1 / 3; align-self: start; padding: 4px 7px; border-radius: 999px; color: var(--lime); background: rgba(202, 255, 189, .08); font-size: 8px; font-weight: 800; }
.stream-card-copy strong, .stream-card-copy p { min-width: 0; }

.streams-setup { max-width: 760px; align-items: start; justify-items: stretch; text-align: left; }
.streams-setup-heading { display: flex; align-items: center; gap: 12px; }
.streams-setup-heading h3, .streams-setup-heading p { margin: 0; }
.streams-setup-heading p { margin-top: 3px; color: var(--muted); font-size: 12px; }
.streams-preview { position: relative; min-height: 300px; aspect-ratio: 16 / 9; display: grid; place-items: center; overflow: hidden; border-radius: 22px; color: rgba(255,255,255,.68); background: radial-gradient(circle at 50% 20%, #402951, #130d19 70%); }
.streams-preview video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scaleX(-1); }
.streams-preview-label { position: absolute; left: 13px; bottom: 13px; padding: 6px 10px; border-radius: 999px; color: #fff; background: rgba(15,8,20,.58); font-size: 10px; font-weight: 780; backdrop-filter: blur(8px); }
.streams-preview-controls { display: flex; justify-content: center; gap: 10px; margin-top: -39px; z-index: 2; }
.streams-preview-controls .dice-ctl-icon { border-color: rgba(255,255,255,.2); background: rgba(20,12,27,.78); backdrop-filter: blur(9px); }
.streams-preview-controls .dice-ctl-label { color: var(--muted); }
.streams-setup-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.streams-check { display: flex; align-items: center; gap: 8px; color: #5a4863; font-size: 12px; font-weight: 750; }
.streams-check input { accent-color: var(--coral); }
.streams-mini-control { width: 64px; display: inline-flex; flex-direction: column; align-items: center; gap: 4px; padding: 0; border: 0; color: #5f5266; background: transparent; font-size: 21px; font-weight: 800; cursor: pointer; }
.streams-mini-control span { font-size: 9px; font-weight: 760; }
.streams-preview-controls .streams-mini-control { color: #fff; }

.streams-live-layout.is-chat-closed { grid-template-columns: minmax(0, 1fr); }
.streams-stage { position: relative; }
.streams-stage-tools { position: absolute; right: 13px; bottom: 13px; z-index: 2; display: flex; gap: 7px; }
.streams-stage-tools button { width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.16); border-radius: 50%; color: #fff; background: rgba(15,8,20,.55); font-size: 16px; cursor: pointer; backdrop-filter: blur(8px); }
.streams-watch-actions { justify-content: flex-start; flex-wrap: wrap; }
.streams-action-pill { min-height: 38px; display: inline-flex; align-items: center; gap: 7px; padding: 0 13px; border: 1px solid var(--line); border-radius: 999px; color: #594c60; background: #fff; font-size: 11px; font-weight: 780; cursor: pointer; }
.streams-action-pill:hover { border-color: var(--violet); color: var(--violet); }
.streams-action-pill.is-heart { color: #c53355; background: #fff1f4; }
.streams-action-pill.is-danger { margin-left: auto; color: #b33349; }
.streams-host-settings { display: flex; align-items: center; flex-wrap: wrap; gap: 9px 16px; padding: 10px 13px; border: 1px solid var(--line); border-radius: 14px; color: var(--muted); background: rgba(255,255,255,.72); font-size: 10px; font-weight: 720; }
.streams-host-settings label { display: inline-flex; align-items: center; gap: 6px; }
.streams-host-settings input { accent-color: var(--coral); }
.streams-host-settings select { padding: 4px 7px; border: 1px solid var(--line); border-radius: 8px; color: var(--ink); background: #fff; font-size: 10px; }
.streams-host-settings > span { margin-left: auto; }
.streams-chat-close { display: none; width: 30px; height: 30px; place-items: center; border: 0; border-radius: 50%; color: rgba(255,255,255,.7); background: rgba(255,255,255,.07); cursor: pointer; }
.streams-pinned { position: relative; display: grid; grid-template-columns: auto 1fr; gap: 2px 7px; padding: 10px 34px 10px 13px; border-bottom: 1px solid rgba(255,255,255,.08); background: rgba(202,255,189,.07); }
.streams-pinned > span { grid-column: 1 / -1; color: var(--lime); font-size: 8px; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; }
.streams-pinned strong { color: #fff; font-size: 10px; }
.streams-pinned p { min-width: 0; margin: 0; overflow: hidden; color: rgba(255,255,255,.7); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.streams-pinned button { position: absolute; right: 8px; top: 11px; width: 24px; height: 24px; border: 0; border-radius: 50%; color: rgba(255,255,255,.65); background: transparent; cursor: pointer; }
.streams-send-button:disabled { opacity: .42; cursor: default; }

@media (max-width: 820px) {
  #streams-dialog[data-stream-view="host"], #streams-dialog[data-stream-view="watch"] { width: 100%; height: 100dvh; max-height: 100dvh; border-radius: 0; }
  #streams-dialog[data-stream-view="host"] .play-head, #streams-dialog[data-stream-view="watch"] .play-head { position: sticky; top: 0; z-index: 6; min-height: 58px; padding: 9px 14px; }
  #streams-dialog[data-stream-view="host"] .play-symbol, #streams-dialog[data-stream-view="watch"] .play-symbol { width: 36px; height: 36px; border-radius: 12px; }
  #streams-dialog[data-stream-view="host"] .play-head h2, #streams-dialog[data-stream-view="watch"] .play-head h2 { margin-top: 1px; font-size: 18px; }
  #streams-dialog[data-stream-view="host"] .dialog-close, #streams-dialog[data-stream-view="watch"] .dialog-close { top: 9px; right: 10px; width: 38px; height: 38px; }
  #streams-dialog[data-stream-view="host"] .play-body, #streams-dialog[data-stream-view="watch"] .play-body { padding: 0 0 max(10px, env(safe-area-inset-bottom)); background: #f7f4f9; }
  .streams-live-layout { gap: 0; }
  .streams-stage, .dice-call-stage.streams-stage { aspect-ratio: 16 / 9; border-radius: 0; box-shadow: none; }
  .streams-live-meta, .streams-watch-footer { border-width: 0 0 1px; border-radius: 0; padding: 10px 13px; background: #fff; }
  .streams-action-row, .streams-watch-actions { padding: 9px 11px; overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; background: #fff; }
  .streams-action-row::-webkit-scrollbar, .streams-watch-actions::-webkit-scrollbar { display: none; }
  .streams-action-pill { flex: 0 0 auto; }
  .streams-action-pill.is-danger { margin-left: 0; }
  .streams-action-row .dice-bar { flex: 0 0 auto; }
  .streams-host-settings { margin: 8px 10px; }
  .streams-chat-column { min-height: 330px; max-height: calc(100dvh - 345px); border-radius: 0; box-shadow: none; }
  .streams-chat-column .streams-chat-panel { min-height: 190px; max-height: none; }
  .streams-chat-close { display: grid; }
}

@media (max-width: 560px) {
  .streams-discovery-head { display: grid; gap: 7px; }
  .streams-grid { grid-template-columns: 1fr; }
  .stream-card { display: grid; grid-template-columns: 42% 1fr; border-radius: 16px; }
  .stream-card-media { aspect-ratio: 16 / 10; }
  .stream-card-copy { padding: 10px; align-content: center; }
  .streams-setup { padding: 0; }
  .streams-setup-heading { padding-right: 44px; }
  .streams-preview { min-height: 0; margin-inline: -12px; border-radius: 0; }
  .streams-setup-row { grid-template-columns: 1fr; }
  .streams-preview-controls { margin-top: -31px; }
  .streams-watch-footer { flex-direction: row; align-items: center; }
  .streams-watch-footer .streams-connection { display: none; }
  .streams-host-row p { max-width: 68vw; }
  .streams-host-settings > span { width: 100%; margin-left: 0; }
  .streams-chat-column { min-height: 310px; max-height: calc(100dvh - 315px); }
  .streams-chat-column .streams-chat-panel { min-height: 170px; }
}
.quick-match:empty { display: none; }
.quick-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.quick-head strong { font-size: 13px; }
.quick-progress { color: var(--muted); font-size: 10px; font-weight: 700; }
.quick-question { margin: 0; font-size: 13px; font-weight: 650; }
.quick-options { display: flex; flex-wrap: wrap; gap: 8px; }
.quick-options button { min-height: 36px; padding: 0 14px; border: 1px solid var(--line); border-radius: 11px; background: #fff; font-size: 12px; font-weight: 700; cursor: pointer; }
.quick-options button:hover:not(:disabled) { border-color: var(--violet); color: var(--violet); }
.quick-options button:disabled { opacity: .5; cursor: default; }
.quick-shared, .quick-note { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.4; }
.calendar-card { display: grid; grid-template-columns: 1fr auto; gap: 14px; align-items: center; margin-bottom: 14px; padding: 15px 17px; border: 1px solid #e2dcf0; border-radius: 18px; background: linear-gradient(135deg, #f4f1ff, #fff); }
.calendar-main { min-width: 0; display: grid; gap: 3px; }
.calendar-kicker { color: var(--muted); font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.calendar-card strong { font-size: 14px; }
.calendar-card p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.4; }
.calendar-slots { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.calendar-slots button { min-height: 34px; padding: 0 13px; border: 1px solid var(--line); border-radius: 10px; background: #fff; font-size: 11px; font-weight: 700; cursor: pointer; }
.calendar-slots button:hover { border-color: var(--violet); color: var(--violet); }
.calendar-card.friday .calendar-kicker { color: var(--coral); }
.plan-form { display: grid; gap: 10px; margin-bottom: 14px; }
.plan-row { display: grid; grid-template-columns: 42px 1fr auto; gap: 11px; align-items: center; padding: 11px 13px; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
.plan-row > span:first-child { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; background: var(--violet-soft); color: var(--violet); font-weight: 800; }
.plan-row div { min-width: 0; display: grid; gap: 2px; }
.plan-row strong { font-size: 13px; }
.plan-row p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.4; }
.plan-row small { color: var(--muted); font-size: 10px; }
@media (max-width: 760px) { .calendar-card { grid-template-columns: 1fr; } .calendar-slots { justify-content: flex-start; } }
.onboarding-card { display: grid; grid-template-columns: 38px 1fr auto; gap: 13px; align-items: center; margin-bottom: 16px; padding: 15px 17px; border: 1px solid #e5d8ef; border-radius: 18px; background: linear-gradient(135deg, #fbf6ff, #fff); box-shadow: 0 10px 26px rgba(84,23,51,.07); }
.onboarding-symbol { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: var(--violet); font-size: 17px; }
.onboarding-card > div:first-of-type { min-width: 0; display: grid; gap: 3px; }
.onboarding-card strong { font-size: 14px; }
.onboarding-card p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.4; }
.onboarding-actions { display: flex; align-items: center; gap: 8px; }
@media (max-width: 760px) { .onboarding-card { grid-template-columns: 38px 1fr; } .onboarding-actions { grid-column: 1 / -1; } }
.quiet-hours-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.quiet-hours-row input:disabled { opacity: .5; }
.notification-item.digest .notification-avatar { background: var(--violet-soft); color: var(--violet); }
.hidden-interests-card { display: grid; gap: 8px; margin-top: 10px; padding: 13px; border: 1px solid #dfd3e5; border-radius: 15px; background: #fff; }
.hidden-interests-list { display: flex; flex-wrap: wrap; gap: 6px; }
.hidden-interests-list button { min-height: 30px; padding: 0 11px; border: 1px solid #dfd3e5; border-radius: 999px; background: #f7f3f9; color: var(--wine); font-size: 11px; cursor: pointer; }
.hidden-interests-list button:hover { border-color: var(--coral); color: var(--coral); }
.interest-chip { border: 0; font: inherit; cursor: pointer; }
.profile-detail-more { min-height: 44px; padding: 0 14px; border: 1px solid var(--line); border-radius: 12px; background: #fff; font-size: 12px; font-weight: 700; cursor: pointer; }
.profile-detail-more:hover { border-color: var(--violet); color: var(--violet); }
.moderation-notice, .reach-notice { display: grid; grid-template-columns: 30px 1fr; gap: 11px; align-items: start; margin-top: 10px; padding: 13px; border: 1px solid #f0cfae; border-radius: 15px; background: #fdf6ee; }
.moderation-notice > div { min-width: 0; display: grid; gap: 4px; }
.moderation-notice strong { font-size: 13px; }
.moderation-notice p { margin: 0; color: #7a5a35; font-size: 11px; line-height: 1.4; }
.reach-symbol { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: #d98634; font-weight: 850; }
.reach-notice > div { min-width: 0; display: grid; gap: 4px; }
.reach-notice strong { font-size: 13px; }
.reach-notice p { margin: 0; color: #7a5a35; font-size: 11px; line-height: 1.4; }
.reach-notice small { color: var(--muted); font-size: 10px; line-height: 1.4; }
.inbox-card { display: grid; gap: 8px; margin-top: 10px; padding: 13px; border: 1px solid #dfd3e5; border-radius: 15px; background: #fff; }
.inbox-card .read-receipts-row { margin-top: 0; padding: 0; border: 0; border-radius: 0; background: transparent; }
.inbox-head { display: grid; gap: 3px; }
.inbox-head strong { font-size: 13px; }
.inbox-head p { margin: 0; color: var(--muted); font-size: 10px; line-height: 1.35; }
.inbox-threshold-field input { max-width: 120px; }
.inbox-threshold-field input:disabled { opacity: .5; }
.privacy-form button[type="submit"] { justify-self: start; }
.selfie-card { display: grid; grid-template-columns: 44px 1fr auto; gap: 12px; align-items: center; margin-top: 10px; padding: 13px; border: 1px solid #dfd3e5; border-radius: 15px; background: #fff; }
.selfie-symbol { background: linear-gradient(135deg, #2d6d47, #1f4d84); }
.selfie-card > div { min-width: 0; display: grid; gap: 3px; }
.selfie-card strong { font-size: 13px; }
.selfie-card p { margin: 0; color: var(--muted); font-size: 10px; line-height: 1.35; }
.selfie-card p.status-approved { color: #2d6d47; font-weight: 700; }
.selfie-card p.status-rejected { color: #a3283b; }
.selfie-upload-button { min-height: 36px; padding: 0 12px; display: grid; place-items: center; border: 0; border-radius: 10px; color: #fff; background: #211526; font-size: 10px; font-weight: 800; cursor: pointer; }
.selfie-upload-button.is-disabled { background: #eee8f0; color: #8f8493; cursor: default; }
.security-card, .password-form { display: grid; gap: 13px; margin-top: 10px; padding: 16px; border: 1px solid #dfd3e5; border-radius: 17px; background: #fff; }
.security-card-head { display: grid; grid-template-columns: 44px 1fr; gap: 12px; align-items: center; }
.security-card-head > div { min-width: 0; display: grid; gap: 3px; }
.security-card-head strong { font-size: 13px; }
.security-card-head p { margin: 0; color: var(--muted); font-size: 10px; line-height: 1.4; }
.security-symbol { background: linear-gradient(135deg,#244d6f,#7b5aa7); }
.security-card > button { width: 100%; }
.password-form .field { margin: 0; }
.password-form > .button { width: 100%; margin-top: 2px; }
.blocked-card { display: grid; gap: 12px; margin-top: 10px; padding: 16px; border: 1px solid #dfd3e5; border-radius: 17px; background: #fff; }
.blocked-list { display: grid; gap: 8px; }
.blocked-person { display: grid; grid-template-columns: 42px minmax(0,1fr) auto; gap: 11px; align-items: center; padding: 10px; border: 1px solid #eee3f0; border-radius: 14px; background: #fbf8fc; }
.blocked-avatar { width: 42px; height: 42px; display: grid; place-items: center; overflow: hidden; border-radius: 50%; background: linear-gradient(135deg,#f6a08e,#7b5aa7); color: #fff; font-weight: 850; }
.blocked-avatar img { width: 100%; height: 100%; object-fit: cover; }
.blocked-copy { min-width: 0; display: grid; gap: 3px; }
.blocked-copy strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
.blocked-copy p { margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-size: 10px; }
.blocked-unblock { min-height: 36px; padding: 0 11px; font-size: 10px; }
.blocked-empty { margin: 0; padding: 13px; border: 1px dashed #dfd3e5; border-radius: 13px; color: var(--muted); font-size: 11px; line-height: 1.45; }
div.blocked-empty { display: grid; grid-template-columns: 28px 1fr; gap: 10px; align-items: center; }
div.blocked-empty > span { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: #e8f5ed; color: #2d6d47; font-weight: 850; }
div.blocked-empty strong { color: var(--wine); font-size: 12px; }
div.blocked-empty p { margin: 2px 0 0; }
@media (max-width: 520px) {
  .blocked-person { grid-template-columns: 42px minmax(0,1fr); }
  .blocked-unblock { grid-column: 1 / -1; width: 100%; }
}
.referral-card { display: grid; grid-template-columns: 44px 1fr; gap: 12px; align-items: center; margin-top: 10px; padding: 13px; border: 1px solid #dfd3e5; border-radius: 15px; background: #fff; }
.referral-symbol { background: linear-gradient(135deg, #c77b1a, #6d2147); }
.referral-card > div { min-width: 0; display: grid; gap: 3px; }
.referral-card strong { font-size: 13px; }
.referral-card p { margin: 0; color: var(--muted); font-size: 10px; line-height: 1.35; }
.referral-body { display: grid; gap: 10px; margin-top: 10px; padding: 13px; border: 1px solid #dfd3e5; border-radius: 15px; background: #fff; }
.referral-body[hidden] { display: none !important; }
.referral-link-row { display: flex; gap: 8px; }
.referral-link-row input { flex: 1; min-width: 0; min-height: 38px; padding: 0 12px; border: 1px solid #dfd3e5; border-radius: 10px; font-size: 11px; color: var(--wine); background: #fbf8fc; }
.referral-link-row button { flex: 0 0 auto; }

.promo-form { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 2px 0 0; }
.promo-form .field { flex: 1; min-width: 160px; margin: 0; }
.promo-form .field input { width: 100%; min-height: 38px; padding: 0 12px; border: 1px solid #dfd3e5; border-radius: 10px; font-size: 12px; text-transform: uppercase; }
.promo-form button { flex: 0 0 auto; }
.promo-form .form-error { flex-basis: 100%; margin: 0; }
.referral-invited-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.referral-invited-list li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 10px; border: 1px solid #eee3f0; border-radius: 10px; font-size: 11px; color: var(--wine); }
.referral-invited-list li.referral-empty { justify-content: flex-start; color: var(--muted); border-style: dashed; }
.referral-item-status { font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); }
.referral-item-status-rewarded { color: #2d6d47; }
.referral-item-status-pending { color: #8f8493; }
.referral-item-status-ineligible { color: #a3283b; }
.plain-action { min-height: 44px; border: 1px solid var(--line); border-radius: 12px; background: #fff; font-weight: 750; cursor: pointer; }
.plain-action.danger { color: #a3293d; }
.delete-dialog { width: min(520px, calc(100% - 24px)); }
.delete-dialog form { display: grid; gap: 17px; padding: 38px; text-align: center; }
.delete-dialog h2 { margin: 0; font-size: 34px; letter-spacing: -.045em; }
.delete-dialog form > p:not(.form-error) { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.55; }
.delete-symbol { width: 66px; height: 66px; display: grid; place-items: center; margin: 0 auto; border-radius: 21px; color: #fff; background: #a3293d; font-size: 30px; box-shadow: 0 15px 32px rgba(163,41,61,.22); }
.delete-confirm { text-align: left; }
.delete-confirm input { text-transform: uppercase; }
.delete-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.delete-forever { border-color: #a3293d; background: #a3293d; }
.plans-dialog { width: min(920px, calc(100% - 24px)); padding: 38px; }
.plans-head { display: grid; grid-template-columns: 64px 1fr; gap: 17px; align-items: start; }
.plans-head .premium-logo { width: 58px; height: 58px; display: grid; place-items: center; border-radius: 18px; color: #fff; background: var(--wine); font-size: 24px; }
.plans-head h2 { margin: 3px 0 7px; font-size: 36px; letter-spacing: -.045em; }
.plans-head p, .payment-note { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.55; }
.current-plan { width: fit-content; margin: 22px 0 14px; padding: 8px 12px; border-radius: 999px; color: var(--wine); background: var(--cream); font-size: 11px; font-weight: 800; }
.plan-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 11px; }
.plan-card { min-height: 100%; display: flex; flex-direction: column; padding: 20px; border: 1px solid var(--line); border-radius: 18px; background: #fff; }
.plan-card.featured { color: #fff; border-color: var(--wine); background: var(--wine); box-shadow: 0 18px 38px rgba(109,33,71,.18); }
.plan-card.active { outline: 3px solid rgba(255,116,95,.26); }
.plan-card header { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.plan-card h3 { margin: 0; font-size: 20px; }
.plan-card header span { font-size: 10px; font-weight: 800; }
.plan-card ul { display: grid; gap: 9px; margin: 17px 0; padding: 0; list-style: none; }
.plan-card li { font-size: 11px; line-height: 1.4; }
.plan-card li::before { content: '✓'; margin-right: 7px; color: var(--coral); font-weight: 900; }
.plan-card footer { margin-top: auto; }
.plan-request, .plan-current-mark { width: 100%; min-height: 42px; display: grid; place-items: center; border-radius: 12px; font-size: 10px; font-weight: 850; }
.plan-request { border: 0; color: #fff; background: #211526; cursor: pointer; }
.plan-request:hover { transform: translateY(-1px); }
.plan-card.featured .plan-request { color: #211526; background: linear-gradient(135deg,#ffcf73,#ff7180); }
.plan-current-mark { color: #5d5361; background: #f2edf4; }
.plan-card.featured .plan-current-mark { color: rgba(255,255,255,.8); background: rgba(255,255,255,.1); }
.payment-note { margin-top: 17px; padding: 13px 15px; border-radius: 13px; background: var(--cream); }
.locked-inbox { grid-column: 1 / -1; display: grid; justify-items: center; padding: 28px 0 10px; text-align: center; }
.locked-inbox h3 { margin: 14px 0 6px; font-size: 25px; letter-spacing: -.035em; }
.locked-inbox p { max-width: 450px; margin: 0 0 17px; color: var(--muted); font-size: 12px; line-height: 1.5; }
.masked-stack { display: flex; margin-bottom: 4px; }
.masked-person { width: 74px; height: 74px; display: grid; place-items: center; margin-left: -12px; border: 4px solid var(--paper); border-radius: 50%; color: #fff; background: linear-gradient(145deg, var(--wine), var(--coral)); font-size: 24px; filter: blur(4px); }
.masked-person:first-child { margin-left: 0; }
.priority-mark { display: inline-flex; margin-bottom: 9px; padding: 5px 8px; border-radius: 999px; color: var(--wine); background: var(--cream); font-size: 9px; font-weight: 850; }
.priority-mark.superlike-mark { margin-right: 6px; color: #fff; background: linear-gradient(135deg, var(--coral), #a46ce0); }
.promoted-mark { position: absolute; z-index: 4; right: 12px; bottom: 48px; padding: 6px 9px; border: 1px solid rgba(255,255,255,.3); border-radius: 99px; color: #fff; background: rgba(25,14,31,.66); backdrop-filter: blur(12px); font-family: Inter, Arial, sans-serif; font-size: 8px; font-weight: 850; letter-spacing: .04em; text-transform: uppercase; }
.events-dialog { width: min(1060px, calc(100% - 24px)); padding: 36px; }
.events-head { display: grid; grid-template-columns: 64px 1fr; gap: 17px; align-items: start; }
.events-symbol { width: 58px; height: 58px; display: grid; place-items: center; border-radius: 19px; color: #201329; background: var(--lime); font-size: 26px; font-weight: 900; }
.events-head h2 { margin: 3px 0 7px; font-size: 36px; letter-spacing: -.045em; }
.events-head p { max-width: 690px; margin: 0; color: var(--muted); font-size: 12px; line-height: 1.55; }
.events-layout { display: grid; grid-template-columns: minmax(0,1.1fr) minmax(330px,.9fr); gap: 18px; margin-top: 25px; }
.events-list-wrap, .event-create-form { min-width: 0; padding: 20px; border: 1px solid var(--line); border-radius: 21px; background: #fff; }
.events-list-heading { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 13px; }
.events-list-heading strong { font-size: 14px; }
.events-list-heading > span { min-width: 28px; height: 28px; display: grid; place-items: center; border-radius: 999px; color: #fff; background: var(--wine); font-size: 10px; font-weight: 850; }
.events-nearby-toggle { display: flex; align-items: center; gap: 6px; margin-left: auto; color: var(--muted); font-size: 11px; font-weight: 750; cursor: pointer; }
.event-nearby-badge { color: #fff !important; background: linear-gradient(135deg, var(--coral), #a46ce0) !important; }
.events-list { display: grid; gap: 10px; max-height: 570px; overflow-y: auto; padding-right: 3px; }
.event-card { padding: 16px; border: 1px solid #e5ddea; border-radius: 17px; background: #fbf9fc; }
.event-card.mine { border-color: rgba(255,93,112,.28); background: #fff8f7; }
.event-card-top { display: flex; justify-content: space-between; gap: 12px; }
.event-card h4 { margin: 0; font-size: 16px; letter-spacing: -.025em; }
.event-card time { color: var(--wine); font-size: 10px; font-weight: 850; white-space: nowrap; }
.event-card-meta { display: flex; flex-wrap: wrap; gap: 6px; margin: 9px 0; }
.event-card-meta span { padding: 5px 7px; border-radius: 8px; color: #6b4877; background: #f0e7f5; font-size: 9px; font-weight: 750; }
.event-card > p { margin: 0; color: #6f6474; font-size: 11px; line-height: 1.5; }
.event-card-bottom { display: flex; justify-content: space-between; gap: 12px; align-items: center; margin-top: 13px; }
.event-card-bottom small { color: var(--muted); font-size: 9px; }
.event-card-bottom button { min-height: 36px; padding: 0 12px; border: 1px solid var(--wine); border-radius: 10px; color: #fff; background: var(--wine); font-size: 10px; font-weight: 800; cursor: pointer; }
.event-card-bottom button.leave, .event-card-bottom button.cancel { color: #8d3244; border-color: #e1bdc5; background: #fff; }
.event-card-bottom button:disabled { color: var(--muted); border-color: var(--line); background: #f1edf2; cursor: default; }
.event-create-form { display: grid; align-content: start; gap: 10px; background: #f5eff8; }
.event-create-form h3 { margin: 0 0 5px; font-size: 22px; letter-spacing: -.035em; }
.event-create-form .field, .event-create-form .field-row { margin: 0; }
.event-create-form .button { width: 100%; }
.events-empty { display: grid; justify-items: center; padding: 44px 20px; color: var(--muted); text-align: center; }
.events-empty span { font-size: 27px; }
.events-empty strong { margin: 10px 0 5px; color: var(--ink); }
.events-empty p { margin: 0; font-size: 11px; line-height: 1.5; }
.daily-dialog { width: min(980px, calc(100% - 24px)); padding: 36px; }
.daily-head { display: grid; grid-template-columns: 64px 1fr; gap: 17px; align-items: start; }
.daily-symbol { width: 58px; height: 58px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: linear-gradient(135deg, var(--coral), var(--violet)); font-size: 25px; font-weight: 900; }
.daily-head h2 { margin: 3px 0 7px; font-size: 36px; letter-spacing: -.045em; }
.daily-head p { margin: 0; color: var(--muted); font-size: 12px; }
.daily-question { margin-top: 23px; padding: 22px 24px; border-radius: 20px; color: #fff; background: linear-gradient(130deg, #19101f, #4b2b5e); font-size: clamp(21px,3vw,31px); font-weight: 780; line-height: 1.15; letter-spacing: -.035em; box-shadow: 0 20px 45px rgba(25,16,31,.16); }
.daily-layout { display: grid; grid-template-columns: minmax(290px,.82fr) minmax(0,1.18fr); gap: 17px; margin-top: 17px; }
.daily-answer-form, .daily-feed { min-width: 0; padding: 20px; border: 1px solid var(--line); border-radius: 20px; background: #fff; }
.daily-answer-form { display: grid; align-content: start; gap: 10px; }
.daily-answer-form .field { margin: 0; }
.daily-answer-form .field small { justify-self: end; color: var(--muted); font-size: 9px; }
.daily-answer-form > p:not(.form-error) { margin: 0; color: var(--muted); font-size: 10px; line-height: 1.5; }
.daily-answer-form .button { width: 100%; }
.daily-feed-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.daily-feed-head strong { font-size: 14px; }
.daily-feed-head span { min-width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: var(--coral); font-size: 10px; font-weight: 850; }
.daily-answer-list { display: grid; gap: 9px; max-height: 440px; overflow-y: auto; padding-right: 3px; }
.daily-answer-card { display: grid; grid-template-columns: 43px minmax(0,1fr) auto; gap: 10px; align-items: start; padding: 13px; border: 1px solid #e7dfea; border-radius: 16px; background: #fbf9fc; }
.daily-answer-avatar { width: 43px; height: 43px; display: grid; place-items: center; overflow: hidden; border-radius: 50%; color: #fff; background: linear-gradient(135deg, #7d4b83, #ed7881); font-size: 12px; font-weight: 850; }
.daily-answer-avatar img { width: 100%; height: 100%; object-fit: cover; }
.daily-answer-copy { min-width: 0; }
.daily-answer-copy header { display: flex; flex-wrap: wrap; gap: 5px; align-items: baseline; }
.daily-answer-copy strong { font-size: 12px; }
.daily-answer-copy small { color: var(--muted); font-size: 9px; }
.daily-answer-copy p { margin: 7px 0 0; color: #594e5d; font-size: 11px; line-height: 1.5; }
.daily-like { min-width: 42px; min-height: 36px; display: inline-flex; align-items: center; justify-content: center; gap: 4px; padding: 0 8px; border: 1px solid #e4d9e8; border-radius: 11px; color: #8d7d92; background: #fff; font-size: 10px; cursor: pointer; }
.daily-like.liked { color: #fff; border-color: var(--coral); background: var(--coral); }
.clubs-dialog { width: min(1050px, calc(100% - 24px)); padding: 36px; }
.clubs-head { display: grid; grid-template-columns: 64px 1fr; gap: 17px; align-items: start; }
.clubs-symbol { width: 58px; height: 58px; display: grid; place-items: center; border-radius: 19px; color: #fff; background: linear-gradient(135deg, #35203f, #8f61a8); font-size: 29px; font-weight: 900; }
.clubs-head h2 { margin: 3px 0 7px; font-size: 36px; letter-spacing: -.045em; }
.clubs-head p { margin: 0; color: var(--muted); font-size: 12px; }
.clubs-layout { min-height: 570px; display: grid; grid-template-columns: 300px minmax(0,1fr); gap: 15px; margin-top: 23px; }
.clubs-list-panel, .club-detail { min-width: 0; border: 1px solid var(--line); border-radius: 21px; background: #fff; }
.clubs-list-panel { padding: 14px 10px; }
.clubs-list-head { display: flex; justify-content: space-between; align-items: center; padding: 4px 7px 12px; }
.clubs-list-head strong { font-size: 12px; }
.clubs-list-head button { min-height: 32px; border: 0; border-radius: 9px; color: #fff; background: var(--wine); font-size: 9px; font-weight: 800; cursor: pointer; }
.clubs-list { display: grid; gap: 6px; }
.club-list-item { width: 100%; display: grid; gap: 5px; padding: 13px; border: 0; border-radius: 14px; background: #f7f3f8; text-align: left; cursor: pointer; }
.club-list-item.active, .club-list-item:hover { background: var(--violet-soft); }
.club-list-item strong { font-size: 12px; }
.club-list-item span { color: var(--muted); font-size: 9px; }
.club-detail { overflow: hidden; }
.club-create, .club-view { height: 100%; padding: 22px; }
.club-create { display: grid; align-content: start; gap: 10px; }
.club-create h3, .club-view h3 { margin: 0 0 6px; font-size: 24px; letter-spacing: -.035em; }
.club-create .field, .club-create .field-row { margin: 0; }
.club-create .button { width: 100%; }
.club-view { display: grid; grid-template-rows: auto minmax(0,1fr) auto; gap: 14px; }
.club-view-head { display: grid; gap: 8px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.club-view-head p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.5; }
.club-view-meta { display: flex; flex-wrap: wrap; gap: 6px; }
.club-view-meta span { padding: 5px 7px; border-radius: 8px; color: #674574; background: var(--violet-soft); font-size: 9px; font-weight: 750; }
.club-head-actions { display: flex; gap: 7px; }
.club-head-actions button { min-height: 35px; padding: 0 11px; border: 1px solid var(--wine); border-radius: 10px; color: #fff; background: var(--wine); font-size: 9px; font-weight: 800; cursor: pointer; }
.club-head-actions button.leave, .club-head-actions button.close { color: #93384a; border-color: #e2bdc5; background: #fff; }
.club-posts { display: grid; align-content: start; gap: 8px; overflow-y: auto; }
.club-post { display: grid; grid-template-columns: 38px minmax(0,1fr); gap: 9px; padding: 11px; border-radius: 14px; background: #f8f5f9; }
.club-post-avatar { width: 38px; height: 38px; display: grid; place-items: center; overflow: hidden; border-radius: 50%; color: #fff; background: linear-gradient(135deg,#76507e,#ef7c83); font-size: 10px; font-weight: 850; }
.club-post-avatar img { width: 100%; height: 100%; object-fit: cover; }
.club-post header { display: flex; gap: 6px; align-items: baseline; }
.club-post strong { font-size: 10px; }
.club-post small { color: var(--muted); font-size: 8px; }
.club-post p { margin: 5px 0 0; color: #5c515f; font-size: 10px; line-height: 1.5; }
.club-post-form { display: grid; grid-template-columns: 1fr auto; gap: 8px; padding-top: 12px; border-top: 1px solid var(--line); }
.club-post-form textarea { min-height: 48px; max-height: 110px; resize: vertical; padding: 10px; border: 1px solid var(--line); border-radius: 12px; }
.club-post-form button { min-width: 105px; border: 0; border-radius: 12px; color: #fff; background: var(--wine); font-size: 10px; font-weight: 800; cursor: pointer; }
.chat-dialog { width: min(980px, calc(100% - 24px)); overflow: hidden; }
.chat-layout { min-height: min(680px, calc(100vh - 24px)); display: grid; grid-template-columns: 320px 1fr; }
.match-list { padding: 28px 18px; border-right: 1px solid var(--line); background: #fff; }
.match-list h2 { margin: 8px 0 24px; font-size: 25px; letter-spacing: -.04em; }
.match-list-item { width: 100%; display: grid; grid-template-columns: 42px 1fr; gap: 10px; align-items: center; padding: 10px; border: 0; border-radius: 13px; background: transparent; text-align: left; cursor: pointer; }
.match-list-item:hover, .match-list-item.active { background: var(--cream); }
.match-list-item > span { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: var(--wine); font-weight: 850; }
.match-list-item p { display: grid; gap: 3px; margin: 0; min-width: 0; }
.match-list-item strong { font-size: 13px; }
.match-list-item small { overflow: hidden; color: var(--muted); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.conversation { min-width: 0; display: grid; grid-template-rows: auto 1fr auto; background: #fbf7f4; }
.conversation-empty { grid-row: 1 / -1; display: grid; align-content: center; justify-items: center; color: var(--muted); text-align: center; }
.conversation-empty > span { width: 60px; height: 60px; display: grid; place-items: center; margin-bottom: 14px; border-radius: 20px; color: var(--wine); background: var(--cream); font-size: 25px; }
.conversation-empty p { margin: 5px 0; font-size: 12px; }
.conversation-head { display: flex; align-items: center; gap: 10px; min-height: 72px; padding: 12px 20px; border-bottom: 1px solid var(--line); background: #fff; }
.conversation-head > span { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: var(--coral); font-weight: 850; }
.conversation-head p { display: grid; gap: 2px; margin: 0; }
.conversation-head small { color: var(--muted); font-size: 10px; }
.message-list { display: flex; flex-direction: column; gap: 8px; overflow-y: auto; padding: 22px; }
.message { max-width: 76%; padding: 10px 13px; border-radius: 15px 15px 15px 4px; background: #fff; box-shadow: 0 4px 12px rgba(59,26,42,.06); font-size: 13px; line-height: 1.45; }
.message.mine { align-self: flex-end; color: #fff; border-radius: 15px 15px 4px 15px; background: var(--wine); }
.message .flagged-reveal { display: block; width: 100%; padding: 0; border: 0; background: transparent; color: inherit; font: inherit; text-align: left; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; opacity: .82; cursor: pointer; text-decoration: underline dotted; }
.message .flagged-reveal:hover { opacity: 1; }
.message .flagged-note { margin-left: 4px; font-size: 12px; opacity: .8; cursor: help; }
.message-form { display: grid; grid-template-columns: 1fr auto; gap: 8px; padding: 14px; border-top: 1px solid var(--line); background: #fff; }
.message-form input { min-height: 46px; padding: 0 13px; border: 1px solid var(--line); border-radius: 12px; }
.message-form button { min-width: 48px; border: 0; border-radius: 12px; color: #fff; background: var(--coral); font-size: 19px; cursor: pointer; }
.edit-dialog { width: min(720px, calc(100% - 24px)); }
.edit-dialog form { padding: 28px; }
.edit-dialog h2, .report-dialog h2 { margin: 10px 0 24px; font-size: 36px; letter-spacing: -.045em; }
.edit-dialog form > .button, .report-dialog form > .button { width: 100%; }
.photo-editor { display: grid; grid-template-columns: 108px 1fr; gap: 18px; align-items: center; margin-bottom: 24px; }
.photo-pick { display: grid; gap: 4px; cursor: pointer; }
.photo-pick input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.photo-pick strong { width: fit-content; padding: 10px 13px; border: 1px solid var(--line); border-radius: 11px; background: #fff; font-size: 12px; }
.photo-pick small { color: var(--muted); font-size: 10px; }
.report-dialog { width: min(500px, calc(100% - 24px)); padding: 36px; }
.report-dialog .dialog-symbol { margin: 0 auto 18px; }
.report-dialog form { text-align: center; }
.report-dialog form > p:not(.form-error) { color: var(--muted); font-size: 13px; line-height: 1.5; }
.report-dialog .field { text-align: left; }
.support-dialog { width: min(520px, calc(100% - 24px)); padding: 36px; }
.support-dialog .dialog-symbol { margin: 0 auto 18px; }
.support-dialog form { text-align: center; }
.support-dialog h2 { margin: 10px 0 8px; font-size: 36px; letter-spacing: -.045em; }
.support-dialog form > p:not(.form-error) { margin: 0 0 24px; color: var(--muted); font-size: 13px; line-height: 1.5; }
.support-dialog .field { text-align: left; }
.support-dialog form > .button { width: 100%; }
.profile-dialog { width: min(1080px, calc(100% - 24px)); height: min(760px, calc(100vh - 24px)); overflow: hidden; background: #f8f5fa; }
.profile-dialog-close { position: fixed; }
.profile-detail { min-height: 100%; }
.profile-detail-loading { min-height: 520px; display: grid; place-content: center; justify-items: center; gap: 12px; color: var(--muted); }
.profile-detail-loading span { width: 54px; height: 54px; display: grid; place-items: center; border-radius: 18px; color: #fff; background: linear-gradient(135deg, var(--coral), var(--violet)); font-size: 22px; }
.profile-detail-shell { min-height: 100%; display: grid; grid-template-columns: minmax(360px,.9fr) minmax(420px,1.1fr); }
.profile-gallery { position: sticky; top: 0; height: min(760px, calc(100vh - 24px)); display: grid; grid-template-rows: 1fr auto; min-width: 0; overflow: hidden; color: #fff; background: #17101e; }
.profile-main-photo { position: relative; min-height: 0; display: grid; place-items: center; overflow: hidden; background: linear-gradient(145deg, var(--profile-one, #392342), var(--profile-two, #b26985)); font-family: Georgia,serif; font-size: 110px; }
.profile-main-photo img { width: 100%; height: 100%; object-fit: cover; }
.profile-main-photo::after { content: ""; position: absolute; inset: auto 0 0; height: 38%; pointer-events: none; background: linear-gradient(transparent,rgba(12,7,17,.55)); }
.profile-photo-count { position: absolute; z-index: 2; right: 16px; bottom: 15px; padding: 7px 10px; border: 1px solid rgba(255,255,255,.24); border-radius: 99px; background: rgba(18,10,24,.58); backdrop-filter: blur(12px); font-family: Inter,Arial,sans-serif; font-size: 9px; font-weight: 800; }
.profile-thumbnails { display: flex; gap: 7px; min-height: 78px; padding: 10px; overflow-x: auto; background: #17101e; }
.profile-thumbnails button { width: 58px; min-width: 58px; height: 58px; overflow: hidden; padding: 0; border: 2px solid transparent; border-radius: 11px; background: #2b2033; cursor: pointer; opacity: .62; }
.profile-thumbnails button.active { border-color: var(--coral); opacity: 1; }
.profile-thumbnails img { width: 100%; height: 100%; object-fit: cover; }
.profile-detail-copy { min-width: 0; overflow-y: auto; padding: 54px 46px 120px; background: #fff; }
.profile-detail-topline { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 13px; }
.profile-detail-topline span { padding: 6px 9px; border-radius: 99px; color: #6f626f; background: #f1ecf3; font-size: 9px; font-weight: 800; }
.profile-detail-topline .online { color: #315f3f; background: #e7f5e8; }
.profile-detail-copy h2 { margin: 0; font-size: clamp(40px,5vw,64px); line-height: .95; letter-spacing: -.065em; }
.profile-detail-copy > p { color: #615661; font-size: 15px; line-height: 1.7; }
.profile-overlap { display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0; }
.profile-overlap span { padding: 8px 11px; border-radius: 99px; color: #6c3a8e; background: var(--violet-soft); font-size: 10px; font-weight: 750; }
.profile-overlap span.common { color: #284f36; background: #e4f4e2; }
.profile-story { display: grid; gap: 10px; margin: 24px 0; }
.profile-story article { padding: 17px; border: 1px solid #e7dfe9; border-radius: 17px; background: #fbf9fc; }
.profile-story span { color: #9b56d6; font-size: 9px; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.profile-story p { margin: 8px 0 0; color: #382f3a; line-height: 1.55; }
.profile-lifestyle { display: flex; flex-wrap: wrap; gap: 8px; margin: 20px 0; }
.profile-lifestyle span { padding: 8px 11px; border: 1px solid #e5dce7; border-radius: 11px; color: #6c606d; background: #fff; font-size: 10px; }
.profile-detail-actions { position: sticky; z-index: 5; right: 0; bottom: -120px; left: 0; display: grid; grid-template-columns: auto 1fr; gap: 9px; margin: 32px -12px -98px; padding: 12px; border: 1px solid #e8dfe9; border-radius: 18px; background: rgba(255,255,255,.91); box-shadow: 0 18px 50px rgba(35,20,42,.14); backdrop-filter: blur(18px); }
.profile-detail-actions button { min-height: 48px; border-radius: 13px; cursor: pointer; font-weight: 800; }
.profile-detail-save { min-width: 120px; border: 1px solid #d9cddd; color: #6c3a8e; background: #fff; }
.profile-detail-save.saved { color: #22301e; border-color: #c8dfbf; background: var(--lime); }
.profile-detail-like { border: 0; color: #fff; background: linear-gradient(135deg,var(--coral),#e75d85); }
.profile-detail-safety { display: flex; gap: 16px; margin-top: 24px; }
.profile-detail-safety button { padding: 0; border: 0; color: #9a8e9d; background: transparent; font-size: 10px; cursor: pointer; }
.profile-detail-safety button:hover { color: #a3293d; }
.profile-open { width: 100%; margin: 4px 0 10px; padding: 8px 0; border: 0; color: #7c42a5; background: transparent; font-size: 10px; font-weight: 800; cursor: pointer; text-align: left; }
.profile-open:hover { color: var(--coral); }

@media (max-width: 1100px) {
  .product-nav { display: none; }
  .hero-grid { gap: 32px; }
  .hero h1 { font-size: 56px; }
  .app-surface { grid-template-columns: 1fr; }
  .app-sidebar { display: none; }
  .mobile-app-nav { display: flex; }
  .profile-body > p, .profile-body blockquote { min-height: 0; }
  .games-grid, .premium-grid, .safety-grid { gap: 48px; }
  .game-card { width: 285px; }
}
@media (max-width: 700px) {
  .plans-dialog { padding: 26px 18px; }
  .plans-head { grid-template-columns: 1fr; }
  .plans-head h2 { font-size: 29px; }
  .plan-grid { grid-template-columns: 1fr; }
  .delete-actions { grid-template-columns: 1fr; }
  .events-dialog { padding: 26px 17px; }
  .events-head { grid-template-columns: 1fr; }
  .events-head h2 { font-size: 29px; }
  .events-layout { grid-template-columns: 1fr; }
  .events-list { max-height: none; }
  .daily-dialog { padding: 26px 17px; }
  .daily-head { grid-template-columns: 1fr; }
  .daily-head h2 { font-size: 29px; }
  .daily-layout { grid-template-columns: 1fr; }
  .daily-answer-list { max-height: none; }
  .clubs-dialog { padding: 26px 17px; }
  .clubs-head { grid-template-columns: 1fr; }
  .clubs-head h2 { font-size: 29px; }
  .clubs-layout { grid-template-columns: 1fr; }
  .clubs-list-panel { max-height: 260px; overflow-y: auto; }
  .club-detail { min-height: 520px; }
  .club-post-form { grid-template-columns: 1fr; }
}

/* Подарки и события поверх прямого эфира */
.streams-action-pill.is-gift { color: #6d4010; border-color: rgba(255,190,80,.38); background: linear-gradient(135deg,#fff4c8,#ffd79a); }
.streams-gift-overlay { position: absolute; z-index: 4; inset: auto 14px 16px 14px; display: grid; justify-items: start; gap: 7px; pointer-events: none; }
.streams-gift-burst { display: flex; align-items: center; gap: 10px; padding: 9px 14px 9px 9px; border: 1px solid rgba(255,255,255,.24); border-radius: 999px; color: #fff; background: rgba(20,11,26,.72); box-shadow: 0 12px 38px rgba(0,0,0,.3); backdrop-filter: blur(14px); animation: streams-gift-arrive 3.6s ease forwards; }
.streams-gift-burst > b { width: 37px; height: 37px; display: grid; place-items: center; border-radius: 50%; color: #321c16; background: linear-gradient(135deg,#fff1a6,#ffad78); font-size: 21px; }
.streams-gift-burst span { display: grid; font-size: 10px; }
.streams-gift-burst span strong { font-size: 12px; }
@keyframes streams-gift-arrive { 0% { opacity: 0; transform: translateX(-22px) scale(.88); } 10%,78% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(-18px) scale(1.04); } }
.streams-gift-ticker { display: grid; gap: 5px; padding: 7px 9px 0; }
.streams-gift-ticker > div { display: flex; align-items: center; gap: 8px; padding: 7px 9px; border-radius: 11px; color: #fff; background: linear-gradient(135deg,rgba(255,190,80,.17),rgba(255,93,112,.08)); }
.streams-gift-ticker > div > span { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; color: #2d1913; background: #ffe5a5; font-size: 15px; }
.streams-gift-ticker p { display: grid; gap: 1px; margin: 0; font-size: 9px; }
.streams-gift-ticker p strong { font-size: 10px; }
.streams-gift-ticker p small { color: rgba(255,255,255,.48); }
.streams-gift-menu { display: grid; gap: 12px; padding: 14px; border: 1px solid rgba(86,48,94,.13); border-radius: 18px; background: linear-gradient(145deg,#fff,#fff8f3); box-shadow: 0 18px 55px rgba(49,22,45,.16); animation: streams-menu-in .2s ease-out; }
@keyframes streams-menu-in { from { opacity: 0; transform: translateY(7px); } }
.streams-gift-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.streams-gift-head > div { display: grid; gap: 2px; }
.streams-gift-head span { color: var(--coral); font-size: 9px; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; }
.streams-gift-head strong { font-size: 14px; }
.streams-gift-head > button { width: 30px; height: 30px; border: 0; border-radius: 50%; color: var(--muted); background: #f1eaf3; cursor: pointer; }
.streams-gift-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 8px; }
.streams-gift-grid button { min-width: 0; display: grid; justify-items: center; gap: 3px; padding: 10px 5px; border: 1px solid var(--line); border-radius: 14px; color: var(--ink); background: #fff; cursor: pointer; transition: transform .16s ease,border-color .16s ease,box-shadow .16s ease; }
.streams-gift-grid button:hover { transform: translateY(-2px); border-color: rgba(255,93,112,.35); }
.streams-gift-grid button.is-selected { border-color: var(--coral); box-shadow: 0 0 0 3px rgba(255,93,112,.12); }
.streams-gift-grid b { font-size: 23px; }
.streams-gift-grid span { max-width: 100%; overflow: hidden; font-size: 9px; font-weight: 750; text-overflow: ellipsis; white-space: nowrap; }
.streams-gift-grid small { color: #9a6572; font-size: 9px; font-weight: 800; }
.streams-gift-menu > input { min-height: 42px; padding: 0 13px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.streams-gift-menu > p { margin: 0; color: var(--muted); font-size: 10px; text-align: center; }

@media (max-width: 700px) {
  #streams-dialog[data-stream-view="watch"], #streams-dialog[data-stream-view="host"] { width: 100%; height: 100dvh; max-height: 100dvh; border-radius: 0; }
  #streams-dialog[data-stream-view="watch"] .play-head, #streams-dialog[data-stream-view="host"] .play-head { min-height: 58px; padding: 8px 12px; }
  #streams-dialog[data-stream-view="watch"] .play-head p, #streams-dialog[data-stream-view="host"] .play-head p { display: none; }
  #streams-dialog[data-stream-view="watch"] .play-body, #streams-dialog[data-stream-view="host"] .play-body { padding: 0 0 18px; }
  #streams-dialog[data-stream-view="watch"] .streams-live-layout, #streams-dialog[data-stream-view="host"] .streams-live-layout { gap: 0; }
  #streams-dialog[data-stream-view="watch"] .streams-stage, #streams-dialog[data-stream-view="host"] .streams-stage { position: sticky; top: 0; z-index: 5; border-radius: 0; aspect-ratio: 16 / 9; }
  #streams-dialog[data-stream-view="watch"] .streams-watch-footer, #streams-dialog[data-stream-view="host"] .streams-live-meta { margin: 0; padding: 11px 13px; border-inline: 0; border-radius: 0; }
  .streams-watch-actions { justify-content: flex-start; padding: 8px 10px; }
  .streams-watch-actions .streams-action-pill { min-height: 38px; }
  .streams-gift-menu { margin: 0 10px 10px; }
  .streams-chat-column { margin-top: 4px; border-radius: 18px 18px 0 0; box-shadow: none; }
  .streams-gift-overlay { right: 8px; bottom: 8px; left: 8px; }
  .streams-gift-burst { padding-block: 6px; }
  .streams-gift-grid { gap: 6px; }
  .streams-gift-grid button { padding-inline: 2px; }
  .streams-host-settings, .streams-action-row { margin-inline: 10px; }
}

/* Интерактив прямого эфира */
.streams-action-pill.is-active { color: #21131f; border-color: transparent; background: linear-gradient(135deg, #dfff75, #aef2c0); }
.streams-poll-card { margin: 8px 9px 2px; padding: 13px; border: 1px solid rgba(255,255,255,.13); border-radius: 15px; color: #fff; background: linear-gradient(145deg,rgba(255,255,255,.11),rgba(255,255,255,.045)); }
.streams-poll-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.streams-poll-heading span { color: rgba(255,255,255,.55); font-size: 9px; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; }
.streams-poll-heading button { padding: 3px 7px; border: 0; border-radius: 8px; color: #ffb7be; background: rgba(255,255,255,.08); font-size: 9px; cursor: pointer; }
.streams-poll-card > strong { display: block; margin-bottom: 10px; font-size: 13px; line-height: 1.35; }
.streams-poll-options { display: grid; gap: 6px; }
.streams-poll-options button { position: relative; min-height: 36px; display: flex; align-items: center; justify-content: space-between; gap: 9px; overflow: hidden; padding: 0 10px; border: 1px solid rgba(255,255,255,.13); border-radius: 10px; color: #fff; background: rgba(13,8,18,.38); cursor: pointer; }
.streams-poll-options button:disabled { cursor: default; opacity: 1; }
.streams-poll-options button i { position: absolute; inset: 0 auto 0 0; min-width: 0; background: rgba(255,93,112,.2); }
.streams-poll-options button.is-selected { border-color: rgba(223,255,117,.65); }
.streams-poll-options button.is-selected i { background: rgba(223,255,117,.18); }
.streams-poll-options button span, .streams-poll-options button b { position: relative; z-index: 1; font-size: 10px; }
.streams-poll-card > small { display: block; margin-top: 8px; color: rgba(255,255,255,.46); font-size: 9px; }
.streams-poll-compose { display: grid; gap: 7px; }
.streams-poll-compose input { min-height: 36px; padding: 0 10px; border: 1px solid rgba(255,255,255,.13); border-radius: 10px; color: #fff; background: rgba(13,8,18,.38); font-size: 10px; }
.streams-poll-compose input::placeholder { color: rgba(255,255,255,.38); }
.streams-poll-compose .button { justify-self: stretch; margin-top: 2px; }
.streams-chat-message.is-question { margin: 3px 5px; padding: 8px; border: 1px solid rgba(223,255,117,.25); border-radius: 12px; background: rgba(223,255,117,.07); }
.streams-question-label { color: #20121d !important; background: #dfff75 !important; }
.streams-question-mode.active { color: #20121d; background: #dfff75 !important; }

@media (max-width: 700px) {
  .streams-poll-card { margin-inline: 7px; padding: 11px; }
  .streams-watch-actions { overflow-x: auto; overscroll-behavior-inline: contain; scrollbar-width: none; }
  .streams-watch-actions::-webkit-scrollbar { display: none; }
  .streams-watch-actions .streams-action-pill { flex: 0 0 auto; }
}

.mode-presets { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 14px 0 18px; }
.mode-presets > span { flex: 0 0 100%; color: var(--muted, #746c7a); font-size: 12px; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }
.mode-presets button { min-height: 36px; padding: 8px 12px; border: 1px solid rgba(109, 75, 128, .2); border-radius: 999px; background: rgba(255,255,255,.82); color: inherit; font: inherit; font-size: 13px; cursor: pointer; transition: transform .18s ease, border-color .18s ease, background .18s ease; }
.mode-presets button:hover { transform: translateY(-1px); border-color: #a46ce0; background: #fff; }
.mode-presets button:focus-visible { outline: 3px solid rgba(164,108,224,.28); outline-offset: 2px; }

/* Поиск и карточная подборка */
.search-workspace { margin-bottom: 18px; }
.search-workspace[hidden] { display: none !important; }
.search-panel { padding: 20px; border: 1px solid rgba(54,31,65,.1); border-radius: 24px; background: linear-gradient(145deg,#fff 0%,#fff9f6 100%); box-shadow: 0 14px 40px rgba(47,26,57,.06); }
.search-panel-heading { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 17px; }
.search-panel-heading div { display: grid; gap: 4px; }
.search-panel-heading span { color: #a34c73; font-size: 10px; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; }
.search-panel-heading strong { font-size: clamp(19px,2.1vw,28px); line-height: 1.08; }
.search-panel-heading > button { border: 0; color: #806f7f; background: transparent; font-weight: 750; cursor: pointer; }
.search-fields { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 10px; }
.search-fields label { display: grid; gap: 6px; }
.search-fields label > span { color: #786978; font-size: 9px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.search-fields input,.search-fields select { width: 100%; height: 45px; padding: 0 12px; border: 1px solid #e5d9e5; border-radius: 12px; color: var(--ink); background: #fff; font: inherit; font-size: 12px; }
.search-options { display: flex; align-items: center; gap: 18px; margin-top: 14px; }
.search-options label { display: flex; align-items: center; gap: 7px; color: #625561; font-size: 11px; font-weight: 700; }
.search-options .button { margin-left: auto; }
.district-map { height: 220px; margin-top: 16px; border-radius: 16px; overflow: hidden; background: #f0e9f0; }
.district-map[hidden] { display: none; }
.district-map .leaflet-popup-content { margin: 9px 11px; font: inherit; font-size: 11px; }
.district-cloud { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 16px; padding-top: 15px; border-top: 1px solid #eee4ec; }
.district-cloud[hidden] { display: none; }
.district-cloud button { display: flex; gap: 7px; align-items: center; padding: 8px 11px; border: 1px solid #e5d8e4; border-radius: 99px; color: #5c4c59; background: #fff; font-size: 10px; cursor: pointer; }
.district-cloud button.active { border-color: var(--coral); color: #8e294f; background: #fff0f1; }
.district-cloud b { min-width: 19px; height: 19px; display: grid; place-items: center; border-radius: 50%; background: #f4edf4; font-size: 8px; }
.search-note { margin: 12px 0 0; color: #887a88; font-size: 10px; }
.privacy-inline { margin: 8px 0 16px; padding: 10px 12px; border-left: 2px solid rgba(157,80,182,.38); color: #756674; background: rgba(157,80,182,.045); font-size: 10px; line-height: 1.5; }
.profile-grid.swipe-mode { display: block; }
.swipe-deck { position: relative; width: min(100%,680px); margin: 0 auto; padding: 4px 70px 0; perspective: 1200px; }
.swipe-deck::before,.swipe-deck::after { content: ''; position: absolute; z-index: 0; top: 20px; right: 92px; left: 92px; height: calc(100% - 70px); border: 1px solid rgba(57,34,67,.08); border-radius: 25px; background: #fff; box-shadow: 0 12px 35px rgba(48,26,58,.06); transform: translateY(10px) scale(.97); }
.swipe-deck::after { transform: translateY(20px) scale(.93); opacity: .55; }
.swipe-deck .profile-card { position: relative; z-index: 2; width: 100%; max-width: 520px; margin: 0 auto; box-shadow: 0 25px 70px rgba(45,24,56,.16); will-change: transform; }
.swipe-deck .profile-photo { min-height: 390px; touch-action: none; cursor: grab; }
.swipe-deck .profile-card.is-dragging { transition: none; cursor: grabbing; }
.swipe-away-left { transform: translate3d(-120vw,0,0) rotate(-25deg) !important; opacity: 0; }
.swipe-away-right { transform: translate3d(120vw,0,0) rotate(25deg) !important; opacity: 0; }
.swipe-badge { position: absolute; z-index: 5; top: 42px; padding: 9px 14px; border: 2px solid currentColor; border-radius: 10px; background: rgba(255,255,255,.91); font-size: 14px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; opacity: 0; transition: opacity .14s ease; pointer-events: none; }
.swipe-badge-pass { left: 88px; color: #8c7f8d; transform: rotate(-8deg); }
.swipe-badge-like { right: 88px; color: #e2446b; transform: rotate(8deg); }
.swipe-deck.intent-pass .swipe-badge-pass,.swipe-deck.intent-like .swipe-badge-like { opacity: 1; }
.swipe-guide { position: relative; z-index: 3; display: flex; justify-content: space-between; gap: 10px; width: min(100%,520px); margin: 12px auto 0; color: #877987; font-size: 9px; font-weight: 750; text-transform: uppercase; }
.swipe-deck > p { position: relative; z-index: 3; margin: 8px 0 0; color: #968a97; font-size: 10px; text-align: center; }
@media (max-width: 900px) { .search-fields { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width: 560px) {
  .search-panel { padding: 15px; border-radius: 18px; }
  .search-fields { grid-template-columns: 1fr 1fr; }
  .search-options { align-items: stretch; flex-wrap: wrap; gap: 10px; }
  .search-options .button { width: 100%; margin-left: 0; }
  .swipe-deck { padding: 2px 0 0; }
  .swipe-deck::before,.swipe-deck::after { right: 18px; left: 18px; }
  .swipe-deck .profile-photo { min-height: 350px; }
  .swipe-badge-pass { left: 14px; }
  .swipe-badge-like { right: 14px; }
  .swipe-guide { padding: 0 8px; }
}

@media (max-width: 820px) {
  .shell { width: min(100% - 32px, 720px); }
  .section { padding: 78px 0; }
  .hero { min-height: auto; padding: 56px 0 70px; }
  .hero-grid, .section-heading, .games-grid, .premium-grid, .safety-grid { grid-template-columns: 1fr; }
  .hero-copy { text-align: center; }
  .eyebrow { justify-content: center; }
  .hero h1 { max-width: 690px; margin-inline: auto; font-size: clamp(45px, 10vw, 68px); }
  .hero-copy > p { margin-inline: auto; }
  .hero-actions, .trust-list { justify-content: center; }
  .hero-visual { min-height: 500px; }
  .live-strip-inner { padding: 24px 0; }
  .live-strip p { display: none; }
  .live-strip dl { width: 100%; justify-content: space-between; gap: 18px; }
  .section-heading { gap: 20px; margin-bottom: 34px; }
  .profile-grid { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .steps article:nth-child(3) { border-left: 0; border-top: 1px solid var(--line); }
  .steps article:nth-child(4) { border-top: 1px solid var(--line); }
  .games-copy { text-align: center; }
  .games-copy p { margin-inline: auto; }
  .game-deck { width: min(100%, 560px); margin: 0 auto; }
  .game-card { width: 300px; }
  .premium-copy { text-align: center; }
  .premium-copy p { margin-inline: auto; }
  .safety-grid { gap: 35px; }
  .final-cta-inner { display: grid; text-align: center; justify-items: center; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 30px; }
  .footer-grid > p { grid-column: 1 / -1; grid-row: 2; }
  .chat-layout { grid-template-columns: 240px 1fr; }
}

@media (max-width: 560px) {
  .shell { width: min(100% - 24px, 520px); }
  .topbar-inner { min-height: 68px; }
  .brand-mark { width: 36px; height: 36px; border-radius: 12px; }
  .brand strong { font-size: 18px; }
  .brand small { font-size: 8px; }
  .text-button { display: none; }
  .button-small { min-height: 40px; padding-inline: 12px; font-size: 12px; }
  .hero { padding-top: 42px; }
  .hero h1 { font-size: 45px; }
  .hero-copy > p { font-size: 16px; }
  .hero-actions { display: grid; }
  .button-large { width: 100%; }
  .trust-list { display: grid; justify-content: start; width: fit-content; margin-inline: auto; text-align: left; }
  .hero-visual { min-height: 410px; border-radius: 26px 26px 26px 8px; }
  .hero-visual img { object-position: 62% center; }
  .match-toast { right: 12px; left: 12px; bottom: 12px; }
  .online-pill { top: 12px; right: 12px; }
  .live-strip dt { font-size: 18px; }
  .live-strip dd { font-size: 9px; }
  .section-heading h2, .games h2, .premium h2, .safety h2, .final-cta h2 { font-size: 38px; }
  .app-content { padding: 14px; }
  .app-toolbar { display: grid; }
  .profile-grid { grid-template-columns: 1fr; }
  .profile-photo { aspect-ratio: 4/4.2; }
  .profile-body > p { font-size: 12px; }
  .profile-body blockquote { font-size: 11px; }
  .spark-action { font-size: 11px; }
  .steps { grid-template-columns: 1fr; }
  .steps article, .steps article + article { min-height: 250px; padding: 25px 0; border-left: 0; border-top: 1px solid var(--line); }
  .steps article:first-child { border-top: 0; }
  .step-icon { margin: 30px 0 18px; }
  .game-deck { min-height: 390px; transform: scale(.85); transform-origin: left top; width: 118%; }
  .card-back { right: 0; }
  .card-middle { right: 35px; }
  .card-front { left: 0; }
  .premium-panel { padding: 23px 18px; }
  .premium-head { flex-wrap: wrap; }
  .premium-price { width: 100%; margin: 4px 0 0 61px; }
  .footer-grid { grid-template-columns: 1fr; }
  .footer-grid > p { grid-column: auto; grid-row: auto; }
  .footer-bottom { display: grid; gap: 7px; }
  .flow-dialog form { padding: 22px 16px; }
  .dialog-brand { padding-inline: 18px; }
  .flow-step h2, .flow-success h2, .info-dialog h2 { font-size: 30px; }
  .choice-grid, .field-row.two { grid-template-columns: 1fr; }
  .choice-grid label > span { min-height: 76px; }
  .flow-actions { display: grid; grid-template-columns: .7fr 1.3fr; }
  .flow-actions .button { padding-inline: 12px; }
  .info-dialog { padding: 32px 22px; }
  .edit-dialog form { padding: 24px 16px; }
  .edit-dialog h2, .report-dialog h2, .support-dialog h2 { font-size: 30px; }
  .photo-editor { grid-template-columns: 86px 1fr; }
  .report-dialog, .support-dialog { padding: 30px 18px; }
  .login-dialog form { padding: 30px 20px; }
  .chat-layout { min-height: calc(100vh - 24px); grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .match-list { max-height: 210px; overflow-y: auto; border-right: 0; border-bottom: 1px solid var(--line); }
  .match-list h2 { margin-bottom: 12px; }
  .match-list #match-list { display: flex; gap: 6px; overflow-x: auto; }
  .match-list-item { min-width: 155px; }
  .conversation { min-height: 430px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; }
}

/* Games inside a match */
.play-dialog { width: min(620px, calc(100% - 24px)); max-height: calc(100vh - 24px); margin: auto; padding: 0; overflow: auto; border: 0; border-radius: 30px; color: var(--ink); background: #f8f5fa; box-shadow: 0 30px 100px rgba(31,8,21,.38); }
.play-dialog[open] { animation: dialog-in .22s ease-out; }
.play-head { display: flex; align-items: center; gap: 16px; padding: 25px 28px; color: #fff; background: radial-gradient(circle at 85% 10%, rgba(185,138,255,.32), transparent 35%), linear-gradient(135deg, #17101f, #362044); }
.play-head h2 { margin: 5px 0 0; font-size: 32px; letter-spacing: -.045em; }
.play-head .flow-kicker { color: var(--lime); }
.play-symbol { width: 58px; height: 58px; display: grid; place-items: center; flex: 0 0 auto; border: 1px solid rgba(255,255,255,.2); border-radius: 19px; color: #17101f; background: var(--lime); font-size: 25px; }
.play-body { min-height: 350px; padding: 28px; }
.play-match-picker { display: grid; grid-template-columns: repeat(auto-fit,minmax(140px,1fr)); gap: 10px; margin-top: 18px; }
.play-match-picker button { min-height: 54px; padding: 10px 14px; border: 1px solid #e1d6e9; border-radius: 15px; color: var(--ink); background: #fff; font-weight: 800; cursor: pointer; }
.play-match-picker button:hover { border-color: var(--coral); }
.play-question { display: grid; gap: 20px; }
.play-question-meta { display: flex; justify-content: space-between; gap: 12px; color: var(--muted); font-size: 12px; }
.play-question h3 { max-width: 500px; margin: 0; font-size: clamp(27px,5vw,38px); line-height: 1.05; letter-spacing: -.045em; }
.play-options { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.play-option { min-height: 125px; padding: 20px; border: 1px solid #ddcfe7; border-radius: 22px; color: #281830; background: #fff; font-size: 18px; font-weight: 850; cursor: pointer; transition: transform .18s ease,border-color .18s ease,background .18s ease; }
.play-option:hover { transform: translateY(-3px); border-color: var(--coral); }
.play-option.selected { color: #fff; border-color: transparent; background: linear-gradient(135deg,var(--coral),#a46ce0); }
.play-status { padding: 16px 18px; border-radius: 16px; color: #5a4863; background: #eee7f4; font-size: 13px; line-height: 1.5; }
.play-result { display: grid; gap: 16px; text-align: center; }
.play-result-mark { width: 76px; height: 76px; display: grid; place-items: center; margin: 0 auto; border-radius: 24px; color: #17101f; background: var(--lime); font-size: 30px; }
.play-result h3 { margin: 0; font-size: 34px; letter-spacing: -.045em; }
.play-reveal { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.play-reveal div { padding: 16px; border: 1px solid #dfd3e7; border-radius: 17px; background: #fff; }
.play-reveal span { display: block; margin-bottom: 5px; color: var(--muted); font-size: 11px; }
.play-next { justify-self: center; }
.play-tabs { display: flex; flex-wrap: wrap; gap: 8px; max-width: 100%; margin-bottom: 20px; }
.play-tab { padding: 9px 16px; border: 1px solid #ddcfe7; border-radius: 30px; color: #5a4863; background: #fff; font-size: 13px; font-weight: 800; cursor: pointer; transition: border-color .18s ease,color .18s ease,background .18s ease; }
.play-tab:hover { border-color: var(--coral); }
.play-tab.active { color: #fff; border-color: transparent; background: linear-gradient(135deg,var(--coral),#a46ce0); }
.daily-game-intro { padding: 24px; border: 1px solid #dfd2e8; border-radius: 24px; background: radial-gradient(circle at 100% 0,rgba(185,138,255,.18),transparent 38%),#fff; }
.daily-game-progress { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: center; }
.daily-game-progress > span { color: var(--muted); font-size: 11px; font-weight: 850; }
.daily-game-progress > div { display: grid; grid-template-columns: repeat(5,1fr); gap: 5px; }
.daily-game-progress i { height: 5px; border-radius: 99px; background: #e4dbe9; }
.daily-game-progress i.done { background: var(--lime); }
.daily-game-progress i.current { background: linear-gradient(90deg,var(--coral),var(--violet)); }
.daily-game-reveal { display: grid; gap: 10px; padding: 16px; border: 1px solid #dcd0e5; border-radius: 18px; background: linear-gradient(135deg,#fff8f7,#f7f1fc); }
.daily-game-reveal > span { color: #8b4ab7; font-size: 10px; font-weight: 850; letter-spacing: .06em; text-transform: uppercase; }
.daily-game-reveal > strong { font-size: 14px; }
.daily-game-reveal > div { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.daily-game-reveal p { display: grid; gap: 4px; margin: 0; padding: 10px; border-radius: 12px; background: #fff; font-size: 11px; line-height: 1.4; }
.daily-game-reveal small { color: var(--muted); font-size: 9px; font-weight: 800; }
.daily-game-reveal em { color: #5d426a; font-size: 11px; line-height: 1.45; }
.daily-game-refresh { justify-self: start; padding: 9px 13px; border: 1px solid #d9cce0; border-radius: 99px; color: #68407a; background: #fff; font-size: 10px; font-weight: 800; cursor: pointer; }
.daily-game-result > p { margin: 0; color: var(--muted); font-size: 12px; }
.daily-game-topics { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; text-align: left; }
.daily-game-topics li { padding: 13px 15px; border: 1px solid #dfd3e7; border-radius: 14px; background: #fff; font-size: 12px; font-weight: 700; }

.photo-story-form { display: grid; gap: 14px; text-align: left; }
.photo-story-picker { display: grid; grid-template-columns: repeat(auto-fill,minmax(74px,1fr)); gap: 8px; }
.photo-story-thumb { position: relative; display: block; aspect-ratio: 1; border: 2px solid transparent; border-radius: 14px; overflow: hidden; cursor: pointer; }
.photo-story-thumb input { position: absolute; opacity: 0; }
.photo-story-thumb img { width: 100%; height: 100%; display: block; object-fit: cover; }
.photo-story-thumb.selected { border-color: var(--coral); }
.photo-story-form label { display: grid; gap: 6px; color: var(--muted); font-size: 12px; font-weight: 800; }
.photo-story-form textarea { min-height: 90px; padding: 12px 14px; border: 1px solid #ddcfe7; border-radius: 16px; color: var(--ink); font: inherit; resize: vertical; }
.photo-story-reveal { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; text-align: left; }
.photo-story-reveal > div { padding: 12px; border: 1px solid #dfd3e7; border-radius: 18px; background: #fff; }
.photo-story-reveal img { width: 100%; aspect-ratio: 1; display: block; border-radius: 12px; margin-bottom: 10px; object-fit: cover; }
.photo-story-reveal p { margin: 0 0 6px; font-size: 13px; line-height: 1.4; }
.photo-story-reveal span { color: var(--muted); font-size: 11px; }
.music-genre-picker { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 16px; }
.music-shared-row { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 4px 0; }
.music-shared-chip { padding: 6px 14px; border-radius: 999px; color: #fff; background: linear-gradient(135deg, var(--coral), #a46ce0); font-size: 12px; font-weight: 800; }
.daily-game-result .button { justify-self: center; }
.ttal-form { display: grid; gap: 14px; }
.ttal-form label { display: grid; gap: 6px; font-size: 13px; font-weight: 750; color: #5a4863; }
.ttal-form input[type="text"] { padding: 13px 15px; border: 1px solid #ddcfe7; border-radius: 14px; font-size: 15px; color: var(--ink); background: #fff; }
.ttal-lie-picker { display: flex; gap: 8px; flex-wrap: wrap; }
.ttal-lie-picker label { display: inline-flex; align-items: center; gap: 6px; padding: 8px 13px; border: 1px solid #ddcfe7; border-radius: 30px; font-weight: 700; cursor: pointer; }
.ttal-lie-picker input { accent-color: var(--coral); }
.ttal-options { display: grid; gap: 10px; }
.ttal-option { min-height: 64px; padding: 16px 18px; border: 1px solid #ddcfe7; border-radius: 18px; color: #281830; background: #fff; font-size: 16px; font-weight: 750; text-align: left; cursor: pointer; transition: transform .18s ease,border-color .18s ease,background .18s ease; }
.ttal-option:hover { transform: translateY(-2px); border-color: var(--coral); }
.ttal-option.is-lie { border-color: transparent; background: linear-gradient(135deg,var(--coral),#a46ce0); color: #fff; }
.ttal-option.is-guess:not(.is-lie) { border-color: #b98aff; }
.ttal-waiting-list { display: grid; gap: 10px; }
.ttal-waiting-list div { padding: 14px 16px; border: 1px solid #dfd3e7; border-radius: 15px; background: #fff; font-size: 15px; font-weight: 700; }
@media (max-width: 640px) {
  .play-tabs { flex-wrap: wrap; }
  .daily-game-reveal > div { grid-template-columns: 1fr; }
}
.chat-tools { display: flex; gap: 8px; padding: 10px 14px 0; border-top: 1px solid var(--line); background: #fff; }
.chat-game-button { padding: 8px 12px; border: 1px solid #ddcfe7; border-radius: 99px; color: #63328b; background: #f6f0fb; font-size: 12px; font-weight: 800; cursor: pointer; }
.conversation:has(.chat-tools) { grid-template-rows: auto 1fr auto auto; }

@media (max-width: 560px) {
  .play-body { padding: 22px 16px; }
  .play-head { padding: 22px 18px; }
  .play-options { grid-template-columns: 1fr; }
  .play-option { min-height: 88px; }
}

/* Personal intros and conversation starters */
.intro-dialog { width: min(590px, calc(100% - 24px)); max-height: calc(100vh - 24px); margin: auto; padding: 0; overflow: auto; border: 0; border-radius: 30px; color: var(--ink); background: var(--paper); box-shadow: 0 30px 100px rgba(31,8,21,.38); }
.intro-dialog[open] { animation: dialog-in .22s ease-out; }
.intro-dialog form { padding: 30px; }
.intro-dialog h2 { margin: 10px 0 9px; font-size: 34px; line-height: 1.05; letter-spacing: -.045em; }
.intro-dialog form > p:not(.form-error) { margin: 0 0 20px; color: var(--muted); font-size: 14px; line-height: 1.55; }
.intro-suggestions { display: grid; gap: 8px; margin-bottom: 19px; }
.intro-suggestions button { padding: 11px 13px; border: 1px solid #e0d3e8; border-radius: 13px; color: #4e3659; background: #faf7fc; font-size: 12px; line-height: 1.4; text-align: left; cursor: pointer; }
.intro-suggestions button:hover { border-color: var(--violet); background: var(--violet-soft); }
.intro-dialog .field small { align-self: end; margin-top: 6px; color: var(--muted); font-size: 11px; }
.intro-actions { display: grid; grid-template-columns: 1fr 1fr; grid-template-areas: "without superlike" "submit submit"; gap: 10px; margin-top: 20px; }
.intro-actions [data-like-without-intro] { grid-area: without; }
.intro-actions .superlike-action { grid-area: superlike; color: var(--coral); border-color: var(--coral); }
.intro-actions [type="submit"] { grid-area: submit; }
.incoming-intro { margin: 2px 0 15px; padding: 14px 15px; border: 1px solid rgba(185,138,255,.35); border-radius: 15px; background: linear-gradient(135deg,#faf6ff,#fff7f4); }
.incoming-intro span { color: #8a55b3; font-size: 10px; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.incoming-intro p { margin: 6px 0 0; color: #3c2945; font-size: 13px; line-height: 1.5; }
.chat-starters { padding: 11px 14px 0; border-top: 1px solid var(--line); background: #fff; }
.chat-starters > span { display: block; margin-bottom: 7px; color: var(--muted); font-size: 10px; font-weight: 800; text-transform: uppercase; }
.chat-starters > div { display: flex; gap: 7px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; }
.chat-starters button { min-width: 190px; max-width: 230px; padding: 8px 10px; border: 1px solid #e0d3e8; border-radius: 12px; color: #513161; background: #faf7fc; font-size: 10px; line-height: 1.35; text-align: left; cursor: pointer; }
.conversation:has(.chat-starters) { grid-template-rows: auto 1fr auto auto auto; }

@media (max-width: 560px) {
  .intro-dialog form { padding: 25px 17px; }
  .intro-dialog h2 { font-size: 29px; }
  .intro-actions { grid-template-columns: 1fr; grid-template-areas: "without" "superlike" "submit"; }
}

/* Profile quality and photo gallery */
.quality-card { display: grid; grid-template-columns: 66px 1fr; gap: 14px; align-items: center; margin: 22px 0; padding: 15px; border: 1px solid #e1d5e8; border-radius: 18px; background: linear-gradient(135deg,#faf7fd,#fff8f5); text-align: left; }
.quality-ring { --quality: 0deg; width: 62px; height: 62px; display: grid; place-content: center; grid-template-columns: auto auto; border-radius: 50%; background: radial-gradient(circle at center,#fff 59%,transparent 61%),conic-gradient(var(--coral) var(--quality),#eadff0 0); }
.quality-ring strong { font-size: 19px; }
.quality-ring span { align-self: center; font-size: 9px; }
.quality-card > div:last-child > strong { font-size: 13px; }
.quality-card p { margin: 4px 0 0; color: var(--muted); font-size: 11px; line-height: 1.4; }
.profile-completeness { margin-bottom: 22px; padding: 18px; border-radius: 18px; color: #fff; background: linear-gradient(135deg,#19101f,#3c234a); }
.profile-completeness > div { display: flex; align-items: center; justify-content: space-between; font-size: 13px; }
.profile-completeness > div strong { color: var(--lime); font-size: 20px; }
.profile-completeness > i { display: block; height: 7px; margin: 12px 0 9px; overflow: hidden; border-radius: 99px; background: rgba(255,255,255,.14); }
.profile-completeness > i span { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg,var(--coral),var(--violet),var(--lime)); transition: width .35s ease; }
.profile-completeness p { margin: 0; color: rgba(255,255,255,.67); font-size: 11px; line-height: 1.45; }
.photo-gallery { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; margin-bottom: 12px; }
.own-photo { position: relative; min-height: 170px; overflow: hidden; border: 2px solid transparent; border-radius: 17px; background: #eadfea; }
.own-photo.primary { border-color: var(--coral); }
.own-photo img { width: 100%; height: 100%; min-height: 170px; object-fit: cover; }
.own-photo > div { position: absolute; right: 7px; bottom: 7px; left: 7px; display: flex; justify-content: space-between; gap: 5px; }
.own-photo button { min-height: 29px; padding: 5px 8px; border: 0; border-radius: 9px; color: #fff; background: rgba(20,10,25,.76); font-size: 9px; font-weight: 800; cursor: pointer; backdrop-filter: blur(6px); }
.own-photo button:last-child { width: 29px; padding: 0; font-size: 16px; }
.own-photo button:disabled { color: #17101f; background: var(--lime); cursor: default; }
.photo-empty { grid-column: 1 / -1; min-height: 130px; display: grid; place-items: center; align-content: center; gap: 5px; border: 1px dashed #ccb9d6; border-radius: 17px; color: var(--muted); text-align: center; }
.photo-empty span { font-size: 25px; }
.photo-empty strong { color: var(--ink); font-size: 13px; }
.photo-empty small { font-size: 10px; }
.photo-add { display: flex; margin-bottom: 24px; padding: 15px 18px; border: 1px solid #ddcee6; border-radius: 15px; background: #faf7fc; }
.voice-intro-card { display: grid; gap: 10px; margin-bottom: 24px; padding: 15px 18px; border: 1px solid #ddcee6; border-radius: 15px; background: #faf7fc; }
.voice-intro-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.voice-intro-head strong { font-size: 12px; }
.voice-intro-head span { color: var(--muted); font-size: 10px; }
.voice-intro-card audio { width: 100%; }
.voice-intro-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.voice-intro-actions button { min-height: 36px; padding: 0 14px; border: 1px solid #d9cce0; border-radius: 10px; color: #67536f; background: #fff; font-size: 10px; font-weight: 800; cursor: pointer; }
.voice-intro-actions #voice-record-button { color: #fff; border-color: transparent; background: #6d2147; }
.voice-intro-actions #voice-stop-button { color: #fff; border-color: transparent; background: #a3283b; }
.profile-voice-intro { margin: 16px 0; padding: 15px 17px; border: 1px solid #e7dfe9; border-radius: 17px; background: #fbf9fc; }
.profile-voice-intro span { display: block; margin-bottom: 8px; color: #9b56d6; font-size: 9px; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.profile-voice-intro audio { width: 100%; }
.lifestyle-fields { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; margin: 22px 0; padding: 0; border: 0; }
.lifestyle-fields legend { grid-column: 1 / -1; margin-bottom: 4px; font-size: 12px; font-weight: 850; }
.lifestyle-fields label { display: grid; gap: 6px; color: var(--muted); font-size: 10px; }
.lifestyle-fields select, .lifestyle-fields input { min-width: 0; min-height: 43px; padding: 0 8px; border: 1px solid var(--line); border-radius: 11px; color: var(--ink); background: #fff; font-size: 11px; font: inherit; }
.profile-details { display: flex; flex-wrap: wrap; gap: 6px; margin: 11px 0; }
.profile-details span { padding: 6px 8px; border: 1px solid #e3d8e9; border-radius: 99px; color: #695671; font-size: 9px; }
.ideal-date { margin: 12px 0; padding: 12px 14px; border-radius: 14px; background: #fff6f4; }
.ideal-date span { color: #c3495e; font-size: 9px; font-weight: 850; letter-spacing: .06em; text-transform: uppercase; }
.ideal-date p { margin: 5px 0 0; color: #553a47; font-size: 12px; line-height: 1.45; }

@media (max-width: 560px) {
  .photo-gallery { grid-template-columns: repeat(2,1fr); }
  .own-photo, .own-photo img { min-height: 150px; }
  .lifestyle-fields { grid-template-columns: 1fr; }
}

/* Discovery filters and private pass feedback */
.filter-more { color: #60317f; border-color: #d9c5e7; background: #f7f0fb; }
.undo-pass { color: #173d2b; border-color: #bfe7c9; background: #eaffea; }
.filter-dialog, .pass-dialog { width: min(540px, calc(100% - 24px)); max-height: calc(100vh - 24px); margin: auto; padding: 0; overflow: auto; border: 0; border-radius: 30px; color: var(--ink); background: var(--paper); box-shadow: 0 30px 100px rgba(31,8,21,.38); }
.filter-dialog[open], .pass-dialog[open] { animation: dialog-in .22s ease-out; }
.filter-dialog form, .pass-dialog form { padding: 30px; }
.filter-dialog h2, .pass-dialog h2 { margin: 9px 0; font-size: 34px; line-height: 1.05; letter-spacing: -.045em; }
.filter-dialog form > p, .pass-dialog form > p { margin: 0 0 22px; color: var(--muted); font-size: 13px; line-height: 1.5; }
.age-filter { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0 0 18px; padding: 0; border: 0; }
.age-filter legend { grid-column: 1 / -1; margin-bottom: 2px; font-size: 12px; font-weight: 850; }
.age-filter label { display: grid; gap: 6px; color: var(--muted); font-size: 10px; }
.age-filter input { min-height: 45px; padding: 0 12px; border: 1px solid var(--line); border-radius: 12px; color: var(--ink); background: #fff; font: inherit; }
.filter-check { margin: 18px 0; }
.filter-actions { display: grid; grid-template-columns: .8fr 1.2fr; gap: 10px; margin-top: 22px; }
.pass-reasons { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.pass-reasons input { position: absolute; opacity: 0; pointer-events: none; }
.pass-reasons span { min-height: 48px; display: grid; place-items: center; padding: 9px; border: 1px solid #dfd2e7; border-radius: 13px; background: #fff; font-size: 12px; font-weight: 800; cursor: pointer; }
.pass-reasons input:checked + span { color: #fff; border-color: #211429; background: #211429; }

@media (max-width: 560px) {
  .filter-dialog form, .pass-dialog form { padding: 26px 17px; }
  .filter-dialog h2, .pass-dialog h2 { font-size: 29px; }
  .filter-actions, .pass-reasons { grid-template-columns: 1fr; }
}

/* ISKRA / HUMAN FUTURE */
body { background: var(--paper); }
.topbar { color: #fff; background: rgba(16, 10, 22, .86); border-bottom-color: rgba(255,255,255,.09); backdrop-filter: blur(24px) saturate(140%); }
.topbar::after { content: ""; position: absolute; right: 0; bottom: -1px; left: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(255,93,112,.65), rgba(185,138,255,.5), transparent); opacity: .5; }
.topbar.is-scrolled { background: rgba(13,8,18,.94); box-shadow: 0 16px 45px rgba(0,0,0,.18); }
.brand-mark { width: 46px; height: 46px; padding: 0; overflow: visible; border-radius: 0; background: transparent; box-shadow: none; }
.brand-mark img { width: 100%; height: 100%; display: block; }
.brand strong { color: #fff; font-size: 21px; letter-spacing: -.05em; }
.brand small { color: rgba(255,255,255,.48); letter-spacing: .16em; }
.product-nav a { color: rgba(255,255,255,.62); }
.product-nav a:hover { color: #fff; }
.topbar .text-button { color: rgba(255,255,255,.82); }
.topbar .account-button { color: #fff; border-color: rgba(255,255,255,.15); background: rgba(255,255,255,.08); }
.topbar .account-button span { color: var(--wine); background: linear-gradient(135deg, var(--coral), #ff9d7c); }
.button { border-color: transparent; background: linear-gradient(135deg, #ff526b, #ff765d); box-shadow: 0 16px 36px rgba(255,82,107,.24); }
.button:hover { background: linear-gradient(135deg, #ff6c7d, #ff8a70); box-shadow: 0 18px 44px rgba(255,82,107,.32); }
.button-ghost { color: #fff; border-color: rgba(255,255,255,.17); background: rgba(255,255,255,.06); backdrop-filter: blur(14px); }
.button-ghost:hover { color: #17101f; border-color: #fff; background: #fff; }

.hero { --mx: 65%; --my: 28%; min-height: 760px; color: #fff; background:
  radial-gradient(circle at var(--mx) var(--my), rgba(185,138,255,.19), transparent 24%),
  radial-gradient(circle at 13% 22%, rgba(255,93,112,.16), transparent 26%),
  linear-gradient(145deg, #0f0915 0%, #18101f 48%, #120b1a 100%); }
.hero::before { content: ""; position: absolute; inset: 0; opacity: .16; pointer-events: none; background-image: linear-gradient(rgba(255,255,255,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px); background-size: 72px 72px; mask-image: linear-gradient(to bottom, #000, transparent 88%); }
.hero::after { content: ""; position: absolute; z-index: 0; width: 600px; height: 600px; left: -390px; bottom: -290px; border: 1px solid rgba(255,255,255,.12); border-radius: 50%; box-shadow: 0 0 0 80px rgba(255,255,255,.025), 0 0 0 160px rgba(255,255,255,.018); }
.hero-grid { grid-template-columns: .94fr 1.06fr; gap: 72px; }
.hero .eyebrow { color: #e3d5f7; }
.hero .eyebrow span { background: var(--coral); box-shadow: 0 0 0 6px rgba(255,93,112,.14), 0 0 22px rgba(255,93,112,.58); }
.hero h1 { max-width: 680px; margin-top: 28px; font-size: clamp(55px, 5.3vw, 82px); line-height: .95; letter-spacing: -.07em; }
.hero h1 em { display: block; color: transparent; background: linear-gradient(100deg, #ff806f 0%, #ff5d70 42%, #c496ff 100%); -webkit-background-clip: text; background-clip: text; font-family: inherit; font-style: normal; font-weight: 760; }
.hero-copy > p { max-width: 620px; color: rgba(255,255,255,.64); font-size: 18px; }
.trust-list { color: rgba(255,255,255,.56); }
.trust-list i { color: #15101b; background: var(--lime); }
.hero-orb { display: none; }
.hero-visual { min-height: 598px; overflow: visible; border: 1px solid rgba(255,255,255,.14); border-radius: 34px 34px 34px 8px; background: #1f1626; box-shadow: 0 40px 110px rgba(0,0,0,.44), 0 0 0 8px rgba(255,255,255,.025); transition: transform .5s cubic-bezier(.2,.8,.2,1), box-shadow .5s ease; }
.hero-visual:hover { transform: translateY(-7px) rotateX(1deg) rotateY(-1deg); box-shadow: 0 52px 130px rgba(0,0,0,.5), 0 0 0 8px rgba(255,255,255,.035); }
.hero-visual img { border-radius: inherit; filter: saturate(.82) contrast(1.02); }
.hero-visual::before { content: ""; position: absolute; z-index: 1; inset: 0; border-radius: inherit; background: linear-gradient(135deg, rgba(18,11,25,.08), transparent 45%, rgba(18,11,25,.44)); pointer-events: none; }
.hero-visual::after { border-radius: inherit; background: linear-gradient(180deg, transparent 48%, rgba(14,8,18,.52)); }
.match-toast { left: -34px; bottom: 30px; padding: 12px 16px 12px 11px; border-color: rgba(255,255,255,.14); color: #fff; background: rgba(20,12,27,.82); box-shadow: 0 22px 50px rgba(0,0,0,.3); }
.toast-icon { width: 42px; height: 42px; padding: 0; overflow: visible; background: transparent; }
.toast-icon img { width: 100%; height: 100%; position: static; border-radius: 0; }
.match-toast small { color: #c9bcd2; }
.online-pill { top: 18px; right: 18px; background: rgba(15,9,21,.68); }
.human-signal { position: absolute; z-index: 3; top: 82px; right: -30px; display: grid; min-width: 128px; padding: 14px 16px; border: 1px solid rgba(255,255,255,.14); border-radius: 17px; color: #fff; background: rgba(24,15,32,.78); box-shadow: 0 20px 45px rgba(0,0,0,.24); backdrop-filter: blur(18px); }
.human-signal span { color: var(--lime); font-size: 24px; font-weight: 850; letter-spacing: -.05em; }
.human-signal small { color: rgba(255,255,255,.57); font-size: 9px; }
.signal-rings { position: absolute; z-index: 0; width: 260px; height: 260px; top: -88px; left: -92px; pointer-events: none; }
.signal-rings i { position: absolute; inset: 0; border: 1px solid rgba(255,93,112,.35); border-radius: 50%; animation: signal-wave 4s ease-out infinite; }
.signal-rings i:nth-child(2) { animation-delay: 1.2s; }
.signal-rings i:nth-child(3) { animation-delay: 2.4s; }
@keyframes signal-wave { 0% { opacity: 0; transform: scale(.35); } 20% { opacity: .65; } 100% { opacity: 0; transform: scale(1.15); } }

.live-strip { background: linear-gradient(90deg, #ff526a, #f66272 52%, #a776ea); }
.live-strip-inner { min-height: 112px; }
.live-strip p span, .live-strip dd { color: rgba(255,255,255,.75); }
.live-strip dt { font-variant-numeric: tabular-nums; }

.discover { background: linear-gradient(180deg, #f8f6fb 0%, #f2edf7 100%); }
.section-kicker { color: #8c4dcc; }
.section-kicker::before { content: ""; width: 20px; height: 1px; background: currentColor; }
.section-heading h2, .games h2, .premium h2, .safety h2, .final-cta h2 { letter-spacing: -.06em; }
.app-surface { border-color: rgba(35,23,43,.12); border-radius: 34px; box-shadow: 0 36px 100px rgba(50,29,64,.13); }
.app-sidebar { background: linear-gradient(180deg, #17101e 0%, #0e0913 100%); }
.mini-brand { gap: 10px; }
.mini-brand img { width: 32px; height: 32px; border-radius: 0; }
.mini-brand span { color: var(--coral); }
.app-sidebar nav button.active { background: linear-gradient(90deg, rgba(255,93,112,.18), rgba(185,138,255,.1)); box-shadow: inset 2px 0 0 var(--coral); }
.app-sidebar nav b { color: #17101f; background: var(--lime); }
.app-content { background: #f8f5fa; }
.chip.active { border-color: #1a1121; background: #1a1121; }
.profile-card { border-color: rgba(43,27,53,.11); border-radius: 23px; box-shadow: 0 10px 30px rgba(45,25,57,.045); transform: perspective(900px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)) translateY(var(--lift, 0px)); transform-style: preserve-3d; transition: transform .18s ease, box-shadow .25s ease, border-color .25s ease; }
.profile-card:hover { --lift: -7px; border-color: rgba(255,93,112,.28); box-shadow: 0 24px 54px rgba(49,27,62,.15); }
.profile-photo { background: linear-gradient(150deg, var(--profile-one, #392342), var(--profile-two, #b26985)); }
.profile-photo::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(16,9,22,.42)); pointer-events: none; }
.profile-tags { z-index: 2; }
.profile-tags span { background: rgba(18,10,24,.64); }
.profile-body { background: rgba(255,255,255,.92); }
.interests span { color: #6a368f; background: var(--violet-soft); }
.profile-body blockquote { border-left-color: var(--violet); background: #faf7fe; }
.spark-action { background: linear-gradient(135deg, #ff536b, #ec5f86); box-shadow: 0 8px 18px rgba(255,83,107,.17); }
.empty-state { border-color: #d9cbe4; background: rgba(255,255,255,.72); }

.how { position: relative; overflow: hidden; background: #fff; }
.how::after { content: ""; position: absolute; width: 440px; height: 440px; right: -300px; top: 80px; border: 1px solid #e8ddf0; border-radius: 50%; box-shadow: 0 0 0 70px #faf7fc, 0 0 0 140px #fdfbfe; pointer-events: none; }
.how .shell { position: relative; z-index: 1; }
.step-icon { color: #6a368f; background: var(--violet-soft); }
.steps article:nth-child(2) .step-icon { background: linear-gradient(135deg, var(--coral), #db6cad); box-shadow: 0 14px 30px rgba(255,93,112,.22); }

.games { background:
  radial-gradient(circle at 80% 30%, rgba(185,138,255,.2), transparent 25%),
  linear-gradient(145deg, #100a16 0%, #1c1026 100%); }
.games::before { content: ""; position: absolute; inset: 0; opacity: .12; background-image: radial-gradient(circle, #fff 1px, transparent 1px); background-size: 28px 28px; mask-image: linear-gradient(90deg, transparent, #000); }
.games-grid { position: relative; z-index: 1; }
.card-back { background: var(--lime); }
.card-middle { background: #d9c1ff; }
.card-front { box-shadow: 0 32px 80px rgba(0,0,0,.34); }
.choice-row button:hover, .choice-row button.selected { background: linear-gradient(135deg, var(--coral), #b777e9); }

.premium { background: linear-gradient(135deg, #eee7f5, #f8f3f0); }
.premium-panel { border-color: rgba(54,31,65,.1); box-shadow: 0 30px 80px rgba(55,31,67,.12); }
.premium-logo { background: linear-gradient(135deg, #19101f, #4c2c60); }
.premium-panel li > span { color: #9b57d7; }
.safety-list article > span { color: #211527; background: var(--lime); }
.final-cta { position: relative; overflow: hidden; background: linear-gradient(105deg, #f64d67 0%, #e75d85 48%, #a16de0 100%); }
.final-cta::after { content: ""; position: absolute; width: 420px; height: 420px; right: -100px; top: -280px; border: 1px solid rgba(255,255,255,.35); border-radius: 50%; box-shadow: 0 0 0 60px rgba(255,255,255,.06), 0 0 0 120px rgba(255,255,255,.035); }
.final-cta-inner { position: relative; z-index: 1; }
.footer { background: #0f0914; }
.footer-brand .brand-mark { background: transparent; }

.reveal-on-scroll { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.8,.2,1); }
.reveal-on-scroll.is-visible { opacity: 1; transform: none; }

@media (max-width: 1100px) {
  .hero-grid { gap: 42px; }
  .hero h1 { font-size: 60px; }
  .human-signal { right: 14px; }
  .match-toast { left: 18px; }
}

@media (max-width: 820px) {
  .hero { min-height: auto; }
  .hero h1 { font-size: clamp(49px, 11vw, 68px); }
  .hero h1 em { display: inline; }
  .hero-visual { min-height: 520px; margin-top: 12px; }
  .match-toast { left: 16px; }
  .human-signal { right: 16px; }
}

@media (max-width: 560px) {
  .topbar .brand-mark { width: 38px; height: 38px; }
  .topbar .brand small { display: none; }
  .hero h1 { font-size: 45px; }
  .hero-visual { min-height: 430px; }
  .human-signal { top: 64px; min-width: 112px; }
  .human-signal span { font-size: 20px; }
  .match-toast { right: 12px; left: 12px; }
  .section-kicker::before { width: 13px; }
}

@media (prefers-reduced-motion: reduce) {
  .signal-rings i { animation: none !important; }
  .hero-visual, .profile-card, .reveal-on-scroll { transform: none !important; opacity: 1 !important; }
}

/* Главный экран входа и рабочее пространство */
.auth-home { min-height: calc(100vh - 80px); display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(430px, .75fr); background: #130c19; }
.auth-story { position: relative; min-height: calc(100vh - 80px); overflow: hidden; color: #fff; }
.auth-story > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 58% center; filter: saturate(.78) contrast(1.03); }
.auth-story-shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(15,8,20,.88), rgba(15,8,20,.28) 62%, rgba(15,8,20,.12)), linear-gradient(0deg, rgba(15,8,20,.82), transparent 60%); }
.auth-story::after { content: ""; position: absolute; width: 460px; height: 460px; left: -260px; bottom: -260px; border: 1px solid rgba(255,255,255,.15); border-radius: 50%; box-shadow: 0 0 0 70px rgba(255,255,255,.035), 0 0 0 140px rgba(255,255,255,.02); }
.auth-story-copy { position: absolute; z-index: 2; right: 8%; bottom: 8%; left: 8%; max-width: 760px; }
.auth-signal { display: inline-flex; align-items: center; gap: 10px; color: rgba(255,255,255,.76); font-size: 12px; font-weight: 850; letter-spacing: .14em; text-transform: uppercase; }
.auth-signal i { width: 9px; height: 9px; border-radius: 50%; background: #ff6274; box-shadow: 0 0 0 7px rgba(255,98,116,.14), 0 0 28px rgba(255,98,116,.78); }
.auth-story h1 { margin: 25px 0 20px; font-size: clamp(54px, 5vw, 84px); line-height: .94; letter-spacing: -.07em; }
.auth-story h1 em { color: transparent; background: linear-gradient(100deg, #ff856f, #ff6378 45%, #cda7ff); -webkit-background-clip: text; background-clip: text; font-style: normal; }
.auth-story-copy > p { max-width: 650px; margin: 0; color: rgba(255,255,255,.7); font-size: 18px; line-height: 1.6; }
.auth-proof { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 28px; }
.auth-proof span { padding: 9px 12px; border: 1px solid rgba(255,255,255,.17); border-radius: 999px; color: rgba(255,255,255,.78); background: rgba(20,12,27,.48); font-size: 11px; font-weight: 750; backdrop-filter: blur(12px); }
.auth-entry { display: grid; place-items: center; min-width: 0; padding: 48px; background: radial-gradient(circle at 100% 0, rgba(185,138,255,.15), transparent 31%), #f8f5fa; }
.auth-card { width: min(420px, 100%); }
.auth-card-kicker { color: #9b56d6; font-size: 11px; font-weight: 850; letter-spacing: .13em; text-transform: uppercase; }
.auth-card h2 { margin: 13px 0 8px; font-size: 42px; line-height: 1; letter-spacing: -.055em; }
.auth-card > p { margin: 0 0 29px; color: var(--muted); line-height: 1.55; }
.auth-card .field { margin-bottom: 13px; }
.auth-card .field > span { margin-bottom: 8px; }
.auth-card input { min-height: 54px; border-radius: 14px; background: #fff; }
.auth-submit { width: 100%; min-height: 56px; margin-top: 2px; }
.auth-divider { display: flex; align-items: center; gap: 12px; margin: 21px 0; color: #a197a6; font-size: 11px; }
.auth-divider::before, .auth-divider::after { content: ""; height: 1px; flex: 1; background: #e0d9e5; }
.auth-create { width: 100%; min-height: 66px; display: grid; place-items: center; gap: 3px; border: 1px solid #d9cfdf; border-radius: 15px; background: #fff; cursor: pointer; transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease; }
.auth-create:hover { transform: translateY(-2px); border-color: #b893d5; box-shadow: 0 14px 34px rgba(52,30,65,.09); }
.auth-create strong { font-size: 14px; }
.auth-create small { color: var(--muted); font-size: 10px; }
.auth-terms { margin: 18px 0 0 !important; text-align: center; font-size: 10px; }
.auth-help { display: block; margin: 12px auto 0; padding: 4px 8px; border: 0; color: #815d91; background: transparent; font-size: 11px; font-weight: 700; cursor: pointer; }
.auth-help:hover { color: var(--coral-dark); }
.guest-nav-note { color: rgba(255,255,255,.53); font-size: 12px; font-weight: 650; }
.member-nav { display: none; align-items: center; gap: 6px; }
.member-nav a, .member-nav button { min-height: 40px; display: inline-flex; align-items: center; padding: 0 14px; border: 0; border-radius: 11px; color: rgba(255,255,255,.62); background: transparent; font-size: 13px; font-weight: 750; cursor: pointer; }
.member-nav a:hover, .member-nav button:hover, .member-nav .active { color: #fff; background: rgba(255,255,255,.08); }
.sidebar-nav-link { width: 100%; min-height: 45px; display: grid; grid-template-columns: 24px 1fr auto; align-items: center; padding: 0 10px; border-radius: 12px; color: inherit; font-size: 13px; font-weight: 700; }
.sidebar-nav-link:hover { color: #fff; background: rgba(255,255,255,.1); }
.sidebar-nav-link b { min-width: 20px; padding: 3px 5px; border-radius: 99px; color: #17101f; background: var(--lime); font-size: 10px; text-align: center; }
.mobile-app-nav a { min-height: 38px; display: inline-flex; align-items: center; padding: 0 13px; white-space: nowrap; border: 1px solid var(--line); border-radius: 999px; background: #fff; font-size: 11px; font-weight: 750; }
.account-actions a.plain-action { display: grid; place-items: center; }

.hero, .live-strip, .how, .games, .premium, .safety, .final-cta, .footer { display: none; }
body:not(.signed-in) .discover { display: none; }
body:not(.signed-in) .topbar-actions { display: none; }
body.signed-in .auth-home, body.signed-in .guest-nav-note { display: none; }
body.signed-in .member-nav { display: flex; }
body.signed-in .discover { display: block; min-height: calc(100vh - 80px); padding: 0; }
body.signed-in .discover > .shell { width: 100%; }
body.signed-in .discover .section-heading { display: none; }
body.signed-in .app-surface { min-height: calc(100vh - 80px); border: 0; border-radius: 0; box-shadow: none; }
body.signed-in .app-sidebar { display: flex; flex-direction: column; }
body.signed-in .sidebar-profile { margin-top: auto; }
body.signed-in .app-content { padding: 30px clamp(22px, 3vw, 48px) 48px; }

@media (max-width: 900px) {
  body.signed-in .app-sidebar { display: none; }
  body.signed-in .mobile-app-nav { display: flex; }
  .auth-home { grid-template-columns: 1fr; }
  .auth-story { min-height: 44vh; }
  .auth-story-copy { bottom: 11%; }
  .auth-story h1 { font-size: clamp(45px, 9vw, 68px); }
  .auth-entry { padding: 42px 24px 58px; }
}

@media (max-width: 680px) {
  .auth-home { min-height: calc(100vh - 64px); }
  .auth-story { min-height: 39vh; }
  .auth-story h1 { margin-block: 17px 13px; font-size: 43px; }
  .auth-story-copy > p { font-size: 14px; }
  .auth-proof { display: none; }
  .auth-entry { padding: 34px 18px 48px; }
  .auth-card h2 { font-size: 36px; }
  .guest-nav-note, .member-nav button { display: none; }
  .member-nav { gap: 0; }
  .member-nav a { padding-inline: 9px; font-size: 11px; }
  body.signed-in .discover { min-height: calc(100vh - 64px); }
  body.signed-in .app-surface { min-height: calc(100vh - 64px); }
}

/* Цельная навигация в шапке */
.topbar-inner { position: relative; min-height: 72px; gap: 20px; }
.product-nav { flex: 1; justify-content: center; min-width: 0; margin-left: 0; }
.member-nav { align-items: center; justify-content: center; gap: 4px; }
.member-nav a, .member-nav button { min-height: 40px; padding: 0 13px; border-radius: 12px; }
.member-nav .active { color: #fff; background: rgba(255,255,255,.11); }
.topbar-actions { position: relative; flex: 0 0 auto; }
body:not(.signed-in) .topbar-actions { display: flex; }
.notification-button { position: relative; width: 42px; height: 42px; display: grid; place-items: center; padding: 0; border: 1px solid rgba(255,255,255,.15); border-radius: 50%; color: #fff; background: rgba(255,255,255,.08); cursor: pointer; }
.notification-button > span { font-size: 19px; line-height: 1; }
.notification-button b { position: absolute; top: -4px; right: -4px; min-width: 19px; height: 19px; display: grid; place-items: center; padding: 0 5px; border: 2px solid #140c1a; border-radius: 99px; color: #21121c; background: var(--lime); font-size: 9px; }
.notification-button[hidden], .notification-button b[hidden], .menu-toggle[hidden], .notification-panel[hidden], .mobile-menu[hidden], .more-menu[hidden] { display: none !important; }
.notification-panel { position: absolute; z-index: 80; top: calc(100% + 10px); right: 0; width: min(410px, calc(100vw - 24px)); overflow: hidden; border: 1px solid rgba(52,30,65,.13); border-radius: 20px; color: var(--ink); background: #fff; box-shadow: 0 26px 80px rgba(16,9,22,.28); }
.notification-panel > header { min-height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 15px 17px; border-bottom: 1px solid var(--line); }
.notification-panel > header div { display: grid; gap: 3px; }
.notification-panel > header strong { font-size: 17px; }
.notification-panel > header span { color: var(--muted); font-size: 10px; }
.notification-panel > header button { padding: 7px 0; border: 0; color: #7e3aad; background: transparent; font-size: 10px; font-weight: 800; cursor: pointer; }
.notification-list { max-height: min(480px, calc(100vh - 150px)); overflow-y: auto; }
.notification-item { width: 100%; display: grid; grid-template-columns: 42px 1fr auto; gap: 11px; align-items: center; padding: 13px 16px; border: 0; border-bottom: 1px solid #f0eaf2; color: inherit; background: #fff; text-align: left; cursor: pointer; }
.notification-item:hover { background: #faf7fc; }
.notification-item.unread { background: #fff8f7; }
.notification-avatar { width: 42px; height: 42px; display: grid; place-items: center; overflow: hidden; border-radius: 50%; color: #fff; background: linear-gradient(135deg, var(--coral), var(--violet)); font-size: 14px; font-weight: 850; }
.notification-avatar img { width: 100%; height: 100%; object-fit: cover; }
.notification-copy { min-width: 0; display: grid; gap: 3px; }
.notification-copy strong { font-size: 12px; }
.notification-copy span { overflow: hidden; color: #6f646f; font-size: 11px; line-height: 1.4; text-overflow: ellipsis; }
.notification-item time { color: #a497a6; font-size: 9px; white-space: nowrap; }
.notification-empty { display: grid; justify-items: center; gap: 7px; padding: 42px 24px; color: var(--muted); text-align: center; }
.notification-empty span { font-size: 28px; }
.notification-empty strong { color: var(--ink); font-size: 14px; }
.menu-toggle { width: 42px; height: 42px; display: none; place-content: center; gap: 4px; padding: 0; border: 1px solid rgba(255,255,255,.15); border-radius: 12px; background: rgba(255,255,255,.08); cursor: pointer; }
.menu-toggle i { width: 17px; height: 2px; display: block; border-radius: 3px; background: #fff; transition: transform .2s ease, opacity .2s ease; }
.menu-toggle[aria-expanded="true"] i:first-child { transform: translateY(6px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] i:nth-child(2) { opacity: 0; }
.menu-toggle[aria-expanded="true"] i:last-child { transform: translateY(-6px) rotate(-45deg); }
.mobile-menu { position: absolute; z-index: 75; top: calc(100% + 8px); right: 0; left: 0; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 7px; padding: 11px; border: 1px solid rgba(255,255,255,.11); border-radius: 18px; background: rgba(19,11,25,.98); box-shadow: 0 24px 70px rgba(0,0,0,.32); }
.mobile-menu a, .mobile-menu button { min-height: 48px; display: flex; align-items: center; gap: 9px; padding: 0 13px; border: 0; border-radius: 12px; color: rgba(255,255,255,.82); background: rgba(255,255,255,.055); font-size: 12px; font-weight: 750; text-align: left; cursor: pointer; }
.mobile-menu a:hover, .mobile-menu button:hover, .mobile-menu .active { color: #fff; background: rgba(255,93,112,.16); }
.mobile-menu span { width: 20px; color: var(--coral); text-align: center; }
.more-toggle span { width: auto; margin-left: 3px; transition: transform .2s ease; }
.more-toggle[aria-expanded="true"] span { transform: rotate(180deg); }
.more-menu { position: absolute; z-index: 76; top: calc(100% + 8px); right: 132px; width: 310px; display: grid; gap: 5px; padding: 10px; border: 1px solid rgba(255,255,255,.11); border-radius: 18px; background: rgba(19,11,25,.98); box-shadow: 0 24px 70px rgba(0,0,0,.32); }
.more-menu button { min-height: 58px; display: grid; grid-template-columns: 30px 1fr; grid-template-rows: auto auto; align-items: center; column-gap: 9px; padding: 8px 11px; border: 0; border-radius: 12px; color: #fff; background: transparent; text-align: left; cursor: pointer; }
.more-menu button:hover, .more-menu button.active { background: rgba(255,93,112,.13); }
.more-menu button > span { grid-row: 1 / 3; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 9px; color: var(--coral); background: rgba(255,255,255,.07); }
.more-menu button > strong { align-self: end; font-size: 12px; }
.more-menu button > small { align-self: start; color: rgba(255,255,255,.47); font-size: 9px; }
.mobile-menu-label { grid-column: 1 / -1; padding: 7px 7px 2px; color: rgba(255,255,255,.4); font-size: 9px; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; }

@media (min-width: 981px) {
  body.signed-in .product-nav { display: flex; }
}

@media (min-width: 1101px) {
  /* Above this width the app-sidebar (inside #people) is visible too, and it already lists
     every one of these destinations (plus their unread counts) — showing the same links a
     second time in the top bar was pure duplication. Keep the "Ещё" toggle: it still reaches
     Гости, which the sidebar doesn't list. */
  body.signed-in .member-nav > button[data-view],
  body.signed-in .member-nav > a { display: none; }
}

@media (max-width: 980px) {
  .product-nav { display: none; }
  body.signed-in .mobile-app-nav { display: none; }
  body.signed-in .menu-toggle:not([hidden]) { display: grid; }
  body.signed-in .mobile-menu:not([hidden]) { display: grid; }
  .account-button strong { display: none; }
  .account-button { padding-right: 5px; }
}

.search-advanced { margin-top: 14px; border: 1px solid rgba(54,31,65,.1); border-radius: 16px; background: rgba(255,255,255,.64); }
.search-advanced summary { min-height: 54px; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 11px 15px; cursor: pointer; list-style: none; }
.search-advanced summary::-webkit-details-marker { display: none; }
.search-advanced summary span { font-size: 13px; font-weight: 800; }
.search-advanced summary small { color: var(--muted); font-size: 10px; text-align: right; }
.search-advanced summary::after { content: '+'; width: 25px; height: 25px; flex: 0 0 25px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: var(--wine); font-size: 17px; }
.search-advanced[open] summary::after { content: '−'; }
.search-advanced[open] summary { border-bottom: 1px solid rgba(54,31,65,.08); }
.search-advanced-fields { padding: 15px 15px 0; }
.search-advanced .search-languages { margin: 12px 15px 15px; }
.mode-next-action { margin-top: 14px; }

@media (max-width: 560px) {
  .search-advanced summary { align-items: flex-start; }
  .search-advanced summary small { display: none; }
}
@media (max-width: 560px) {
  .topbar-inner { min-height: 64px; gap: 8px; }
  .topbar-actions { gap: 6px; }
  body:not(.signed-in) .topbar .text-button { padding-inline: 6px; font-size: 11px; }
  body:not(.signed-in) .topbar .button-small { min-height: 40px; padding-inline: 11px; font-size: 10px; }
  .notification-panel { position: fixed; top: 72px; right: 8px; left: 8px; width: auto; }
  .mobile-menu { right: 8px; left: 8px; }
  .boost-card { grid-template-columns: 40px 1fr; }
  .boost-card button { grid-column: 1 / -1; }
  .account-dialog { width: 100%; height: 100%; max-height: none; padding: 28px 16px 24px; border-radius: 0; }
  .account-tabs { grid-template-columns: repeat(5,minmax(88px,1fr)); margin-inline: -4px; overflow-x: auto; }
  .account-actions { grid-template-columns: 1fr; }
}

@media (max-width: 700px) {
  .profile-dialog { width: 100%; height: 100%; max-height: none; border-radius: 0; }
  .profile-detail-shell { grid-template-columns: 1fr; }
  .profile-gallery { position: relative; height: min(68vh,590px); }
  .profile-detail-copy { overflow: visible; padding: 34px 20px 110px; }
  .profile-detail-copy h2 { font-size: 44px; }
  .profile-detail-actions { position: fixed; right: 10px; bottom: 10px; left: 10px; margin: 0; }
  .profile-dialog-close { position: fixed; top: 12px; right: 12px; color: #fff; background: rgba(20,12,27,.58); }
}

/* Просмотр трансляции: информационная иерархия как у больших видеосервисов. */
.streams-watch-footer { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 11px 18px; align-items: center; }
.streams-watch-title { min-width: 0; }
.streams-watch-title h3 { margin: 0; overflow: hidden; color: var(--ink); font-size: 17px; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; }
.streams-watch-title p { margin: 3px 0 0; color: var(--muted); font-size: 10px; }
.streams-watch-footer .streams-host-row { min-width: 0; }
.streams-watch-footer .streams-host-row > div { display: grid; gap: 2px; }
.streams-watch-footer .streams-host-row small { color: var(--muted); font-size: 9px; }
.streams-subscribe { min-height: 34px; margin-left: 6px; padding: 0 14px; border: 0; border-radius: 999px; color: #fff; background: #ff375f; font-size: 10px; font-weight: 820; cursor: pointer; }
.streams-subscribe.is-active { color: #4b424c; background: #ece8ed; }
.streams-chat-handle { display: none; }

@media (max-width: 700px) {
  #streams-dialog[data-stream-view="watch"] { overflow: hidden; color: #f1f1f1; background: #0f0f0f; }
  #streams-dialog[data-stream-view="watch"]::backdrop { background: #000; }
  #streams-dialog[data-stream-view="watch"] .play-head { display: none; }
  #streams-dialog[data-stream-view="watch"] > .dialog-close { position: fixed; z-index: 40; top: max(10px,env(safe-area-inset-top)); right: 10px; width: 38px; height: 38px; border: 1px solid rgba(255,255,255,.18); color: #fff; background: rgba(15,15,15,.66); backdrop-filter: blur(9px); }
  #streams-dialog[data-stream-view="watch"] .play-body { height: 100dvh; padding: 0 0 env(safe-area-inset-bottom); overflow-x: hidden; overflow-y: auto; color: #f1f1f1; background: #0f0f0f !important; overscroll-behavior: contain; }
  #streams-dialog[data-stream-view="watch"] .streams-scene-watch,
  #streams-dialog[data-stream-view="watch"] .streams-live-layout,
  #streams-dialog[data-stream-view="watch"] .streams-video-column { gap: 0; background: #0f0f0f; }
  #streams-dialog[data-stream-view="watch"] .streams-stage,
  #streams-dialog[data-stream-view="watch"] .dice-call-stage.streams-stage { position: sticky; z-index: 12; top: 0; width: 100%; min-height: 0; aspect-ratio: 16/9; border: 0; border-radius: 0; background: #000; box-shadow: none; }
  #streams-dialog[data-stream-view="watch"] .streams-stage video { object-fit: contain; background: #000; }
  #streams-dialog[data-stream-view="watch"] .streams-live-badge { top: 10px; left: 10px; padding: 5px 9px 5px 7px; }
  #streams-dialog[data-stream-view="watch"] .streams-stage-tools { right: 55px; bottom: 9px; }
  #streams-dialog[data-stream-view="watch"] .streams-stage-tools button { width: 34px; height: 34px; background: rgba(15,15,15,.66); }
  #streams-dialog[data-stream-view="watch"] .streams-watch-footer { display: grid; grid-template-columns: minmax(0,1fr); gap: 0; margin: 0; padding: 0; border: 0; color: #f1f1f1; background: #0f0f0f; }
  #streams-dialog[data-stream-view="watch"] .streams-watch-title { padding: 14px 14px 11px; }
  #streams-dialog[data-stream-view="watch"] .streams-watch-title h3 { display: -webkit-box; overflow: hidden; color: #f1f1f1; font-size: 16px; line-height: 1.35; white-space: normal; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
  #streams-dialog[data-stream-view="watch"] .streams-watch-title p { margin-top: 5px; color: #aaa; font-size: 11px; }
  #streams-dialog[data-stream-view="watch"] .streams-host-row { width: auto; min-height: 62px; padding: 9px 14px; border-top: 1px solid #272727; }
  #streams-dialog[data-stream-view="watch"] .streams-host-avatar { width: 38px; height: 38px; }
  #streams-dialog[data-stream-view="watch"] .streams-host-row strong { color: #f1f1f1; font-size: 13px; }
  #streams-dialog[data-stream-view="watch"] .streams-host-row small { color: #aaa; }
  #streams-dialog[data-stream-view="watch"] .streams-subscribe { margin-left: auto; min-height: 36px; padding-inline: 15px; background: #f1f1f1; color: #0f0f0f; font-size: 10px; }
  #streams-dialog[data-stream-view="watch"] .streams-subscribe.is-active { color: #f1f1f1; background: #272727; }
  #streams-dialog[data-stream-view="watch"] .streams-connection { display: none; }
  #streams-dialog[data-stream-view="watch"] .streams-watch-actions { min-height: 58px; justify-content: flex-start; gap: 8px; padding: 8px 12px 10px; overflow-x: auto; border-bottom: 1px solid #272727; background: #0f0f0f; scroll-snap-type: x proximity; scrollbar-width: none; }
  #streams-dialog[data-stream-view="watch"] .streams-watch-actions::-webkit-scrollbar { display: none; }
  #streams-dialog[data-stream-view="watch"] .streams-action-pill { flex: 0 0 auto; min-height: 36px; padding-inline: 13px; border: 0; border-radius: 18px; color: #f1f1f1; background: #272727; font-size: 10px; scroll-snap-align: start; }
  #streams-dialog[data-stream-view="watch"] .streams-action-pill.is-heart { color: #ffd7df; background: #382027; }
  #streams-dialog[data-stream-view="watch"] .streams-action-pill.is-gift { color: #ffe4a3; background: #362b19; }
  #streams-dialog[data-stream-view="watch"] .streams-action-pill.is-danger { color: #ffb6c0; background: #352126; }
  #streams-dialog[data-stream-view="watch"] .streams-chat-column { min-height: 390px; height: min(54dvh,520px); max-height: none; margin: 10px 0 0; overflow: hidden; border: 1px solid #303030; border-width: 1px 0 0; border-radius: 18px 18px 0 0; color: #f1f1f1; background: #0f0f0f; box-shadow: none; }
  #streams-dialog[data-stream-view="watch"] .streams-chat-handle { width: 38px; height: 4px; display: block; flex: 0 0 auto; margin: 8px auto 1px; border-radius: 999px; background: #555; }
  #streams-dialog[data-stream-view="watch"] .streams-chat-head { min-height: 54px; padding: 7px 12px 9px 14px; border-bottom: 1px solid #272727; background: #0f0f0f; }
  #streams-dialog[data-stream-view="watch"] .streams-chat-head div { display: grid; gap: 2px; }
  #streams-dialog[data-stream-view="watch"] .streams-chat-head strong { color: #f1f1f1; font-size: 13px; }
  #streams-dialog[data-stream-view="watch"] .streams-chat-head div > span { margin: 0; color: #aaa; font-size: 9px; font-weight: 500; letter-spacing: 0; text-transform: none; }
  #streams-dialog[data-stream-view="watch"] .streams-audience { margin-left: auto; padding: 0; color: #aaa; background: transparent; font-size: 9px; font-weight: 500; }
  #streams-dialog[data-stream-view="watch"] .streams-chat-close { width: 34px; height: 34px; margin-left: 4px; color: #f1f1f1; background: #272727; font-size: 19px; }
  #streams-dialog[data-stream-view="watch"] .streams-chat-panel { flex: 1; min-height: 210px; max-height: none; padding: 8px 7px 10px; background: #0f0f0f; }
  #streams-dialog[data-stream-view="watch"] .streams-chat-message { gap: 10px; padding: 7px 8px; border-radius: 7px; }
  #streams-dialog[data-stream-view="watch"] .streams-chat-message.is-mine { background: #1d1d1d; }
  #streams-dialog[data-stream-view="watch"] .streams-chat-avatar { width: 28px; height: 28px; margin-top: 1px; }
  #streams-dialog[data-stream-view="watch"] .streams-chat-meta { margin-bottom: 2px; }
  #streams-dialog[data-stream-view="watch"] .streams-chat-meta strong { font-size: 11px; }
  #streams-dialog[data-stream-view="watch"] .streams-chat-meta time { color: #717171; font-size: 8px; }
  #streams-dialog[data-stream-view="watch"] .streams-chat-line { color: #f1f1f1; font-size: 13px; line-height: 1.4; }
  #streams-dialog[data-stream-view="watch"] .streams-chat-quick { min-height: 42px; padding: 6px 10px; overflow-x: auto; border-top: 1px solid #272727; background: #0f0f0f; }
  #streams-dialog[data-stream-view="watch"] .streams-chat-quick button { flex: 0 0 30px; width: 30px; height: 30px; border: 0; border-radius: 15px; background: #272727; }
  #streams-dialog[data-stream-view="watch"] .streams-chat-quick span { color: #aaa; }
  #streams-dialog[data-stream-view="watch"] .streams-chat-form { flex: 0 0 auto; margin: 0 10px max(10px,env(safe-area-inset-bottom)); padding: 4px 4px 4px 13px; border: 1px solid #3f3f3f; border-radius: 24px; background: #212121; }
  #streams-dialog[data-stream-view="watch"] .streams-chat-form input { min-height: 38px; padding: 0; color: #f1f1f1; font-size: 13px; }
  #streams-dialog[data-stream-view="watch"] .streams-send-button { width: 36px; height: 36px; background: #f1f1f1; color: #0f0f0f; box-shadow: none; }
  #streams-dialog[data-stream-view="watch"] .streams-pinned { background: #1c241b; }
  #streams-dialog[data-stream-view="watch"] .streams-poll-card { background: #212121; }
  #streams-dialog[data-stream-view="watch"] .streams-gift-ticker > div { background: #292318; }
  #streams-dialog[data-stream-view="watch"] .streams-gift-menu { position: fixed; z-index: 32; right: 0; bottom: 0; left: 0; max-height: 72dvh; margin: 0; padding: 18px 14px max(16px,env(safe-area-inset-bottom)); overflow-y: auto; border: 1px solid #3f3f3f; border-width: 1px 0 0; border-radius: 22px 22px 0 0; color: #f1f1f1; background: #212121; box-shadow: 0 -18px 55px rgba(0,0,0,.5); }
  #streams-dialog[data-stream-view="watch"] .streams-gift-head strong { color: #f1f1f1; }
  #streams-dialog[data-stream-view="watch"] .streams-gift-head > button { color: #f1f1f1; background: #3f3f3f; }
  #streams-dialog[data-stream-view="watch"] .streams-gift-grid button { border-color: #3f3f3f; color: #f1f1f1; background: #272727; }
  #streams-dialog[data-stream-view="watch"] .streams-gift-menu > input { border-color: #3f3f3f; color: #f1f1f1; background: #272727; }
#streams-dialog[data-stream-view="watch"] .streams-gift-menu > p { color: #aaa; }
}

/* Главная Искры 5.0: ясный вход и личный центр знакомств */
.auth-home {
  grid-template-columns: minmax(0,1.22fr) minmax(410px,.78fr);
  background: #120b18;
}
.auth-story > img { object-position: 55% center; filter: saturate(.82) contrast(1.06); transform: scale(1.01); }
.auth-story-shade {
  background:
    linear-gradient(90deg,rgba(13,7,18,.88) 0%,rgba(13,7,18,.5) 48%,rgba(13,7,18,.2) 100%),
    linear-gradient(0deg,rgba(13,7,18,.92) 0%,rgba(13,7,18,.12) 70%);
}
.auth-story-copy { right: clamp(28px,6vw,88px); bottom: clamp(34px,6vh,72px); left: clamp(28px,6vw,88px); max-width: 880px; }
.auth-story h1 { max-width: 850px; margin: 24px 0 18px; font-size: clamp(58px,5.7vw,92px); }
.auth-story-copy > p { max-width: 720px; font-size: clamp(16px,1.35vw,20px); line-height: 1.55; }
.auth-feature-grid { max-width: 820px; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; margin-top: 30px; }
.auth-feature-grid article { min-height: 126px; display: grid; grid-template-rows: auto auto 1fr; gap: 7px; padding: 16px; border: 1px solid rgba(255,255,255,.15); border-radius: 18px; background: rgba(18,10,24,.48); box-shadow: inset 0 1px rgba(255,255,255,.07); backdrop-filter: blur(15px); }
.auth-feature-grid b { color: #ff7182; font-size: 10px; letter-spacing: .13em; }
.auth-feature-grid strong { color: #fff; font-size: 14px; line-height: 1.25; }
.auth-feature-grid span { color: rgba(255,255,255,.62); font-size: 11px; line-height: 1.45; }
.auth-entry { padding: clamp(28px,4vw,60px); background: radial-gradient(circle at 100% 0,rgba(185,138,255,.2),transparent 34%),radial-gradient(circle at 0 100%,rgba(255,93,112,.09),transparent 30%),#f7f3f8; }
.auth-card { width: min(454px,100%); padding: clamp(28px,3vw,42px); border: 1px solid rgba(69,39,78,.1); border-radius: 30px; background: rgba(255,255,255,.9); box-shadow: 0 30px 90px rgba(34,16,44,.15); backdrop-filter: blur(16px); }
.auth-card-brand { display: flex; align-items: center; gap: 11px; margin-bottom: 28px; }
.auth-card-brand img { width: 43px; height: 43px; padding: 7px; border-radius: 14px; background: #1a1020; box-shadow: 0 9px 24px rgba(26,16,32,.2); }
.auth-card-brand span { display: grid; line-height: 1; }
.auth-card-brand strong { font-size: 18px; letter-spacing: -.04em; }
.auth-card-brand small { margin-top: 4px; color: #877b8b; font-size: 8px; font-weight: 850; letter-spacing: .15em; text-transform: uppercase; }
.auth-card-kicker { color: #9c4cd2; }
.auth-card h2 { margin-top: 12px; font-size: clamp(36px,3.3vw,48px); }
.auth-card input { border-color: #ddd3e1; box-shadow: inset 0 1px 2px rgba(34,16,44,.03); }
.auth-card input:focus { border-color: #a16dd2; box-shadow: 0 0 0 4px rgba(161,109,210,.11); }
.auth-submit { border-color: #ff5069; background: linear-gradient(135deg,#ff5069,#ee4165); box-shadow: 0 13px 30px rgba(238,65,101,.27); }

body.signed-in .topbar { border-color: rgba(255,255,255,.08); background: rgba(20,12,27,.94); }
body.signed-in .brand strong { color: #fff; }
body.signed-in .brand small { color: rgba(255,255,255,.48); }
body.signed-in .app-surface { grid-template-columns: 220px minmax(0,1fr); background: #f6f3f7; }
body.signed-in .app-sidebar { position: sticky; top: 72px; height: calc(100vh - 72px); padding: 22px 14px 18px; overflow-y: auto; background: linear-gradient(180deg,#160c1d,#0f0915); }
body.signed-in .app-sidebar nav { gap: 3px; }
body.signed-in .app-sidebar nav button,
body.signed-in .sidebar-nav-link { min-height: 42px; border-radius: 11px; }
body.signed-in .app-sidebar nav button.active { color: #1e1018; background: linear-gradient(135deg,#ff7b83,#ff5b75); }
body.signed-in .app-sidebar nav button.active b { background: #fff; }
body.signed-in .app-content { max-width: 1480px; width: 100%; display: flex; flex-direction: column; margin-inline: auto; padding: 24px clamp(20px,3vw,46px) 50px; background: #f6f3f7; }
.member-home { order: 0; }
.home-actions { order: 1; }
.app-toolbar { order: 2; }
.mobile-app-nav { order: 3; }
.search-workspace { order: 4; }
.profile-grid { order: 5; }
.calendar-card { order: 6; margin-top: 18px; }
.onboarding-card { order: 7; margin-top: 12px; }
body.signed-in .swipe-deck .profile-photo { height: 400px; min-height: 400px; aspect-ratio: auto; }

.member-home { position: relative; min-height: 148px; display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 28px; margin-bottom: 12px; padding: 24px clamp(22px,3vw,38px); overflow: hidden; border: 1px solid rgba(255,255,255,.08); border-radius: 26px; color: #fff; background: radial-gradient(circle at 78% 5%,rgba(193,137,255,.3),transparent 27%),radial-gradient(circle at 100% 100%,rgba(255,91,117,.23),transparent 34%),linear-gradient(125deg,#1b0e24,#32133a 58%,#24102d); box-shadow: 0 18px 45px rgba(38,16,47,.16); }
.member-home::after { content: "♡"; position: absolute; right: 35%; bottom: -68px; color: rgba(255,255,255,.045); font-family: Georgia,serif; font-size: 210px; line-height: 1; transform: rotate(-9deg); pointer-events: none; }
.member-home-copy { position: relative; z-index: 1; min-width: 0; }
.member-home-copy > span { color: #ff94a2; font-size: 10px; font-weight: 850; letter-spacing: .14em; text-transform: uppercase; }
.member-home-copy h1 { max-width: 620px; margin: 8px 0 6px; font-size: clamp(27px,2.6vw,40px); line-height: 1; letter-spacing: -.055em; }
.member-home-copy p { max-width: 620px; margin: 0; color: rgba(255,255,255,.63); font-size: 12px; line-height: 1.5; }
.member-home-stats { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(3,94px); gap: 7px; }
.member-home-stats > * { min-height: 88px; display: grid; place-content: center; gap: 3px; padding: 8px; border: 1px solid rgba(255,255,255,.12); border-radius: 17px; color: #fff; background: rgba(255,255,255,.07); text-align: center; cursor: pointer; backdrop-filter: blur(10px); }
.member-home-stats > *:hover { background: rgba(255,255,255,.13); }
.member-home-stats b { font-size: 25px; line-height: 1; }
.member-home-stats span { color: rgba(255,255,255,.62); font-size: 9px; font-weight: 750; }

.home-actions { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 9px; margin: 0 0 18px; }
.home-actions > * { min-width: 0; min-height: 78px; display: grid; grid-template-columns: 38px minmax(0,1fr); grid-template-rows: auto auto; align-content: center; column-gap: 10px; padding: 11px 13px; border: 1px solid #e2dbe5; border-radius: 17px; color: #24182a; background: rgba(255,255,255,.88); box-shadow: 0 8px 24px rgba(45,25,52,.05); text-align: left; cursor: pointer; }
.home-actions > *:hover { border-color: #cdbbd5; transform: translateY(-2px); box-shadow: 0 12px 28px rgba(45,25,52,.09); }
.home-actions > * > span { grid-row: 1 / 3; width: 38px; height: 38px; display: grid; place-items: center; align-self: center; border-radius: 12px; color: #6d307c; background: #f0e5f5; font-size: 19px; }
.home-actions strong { align-self: end; overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.home-actions small { align-self: start; overflow: hidden; color: #837789; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.home-actions .home-action-primary { border-color: transparent; color: #fff; background: linear-gradient(135deg,#f4516d,#d93d67); }
.home-actions .home-action-primary > span { color: #fff; background: rgba(255,255,255,.18); }
.home-actions .home-action-primary small { color: rgba(255,255,255,.7); }
body.signed-in .member-home:not([hidden]) ~ .app-toolbar { align-items: center; margin-bottom: 14px; padding: 0 2px; }
body.signed-in .member-home:not([hidden]) ~ .app-toolbar > div:first-child { display: none; }
body.signed-in .member-home:not([hidden]) ~ .app-toolbar .filter-row { width: 100%; }
body.signed-in .member-home:not([hidden]) ~ .app-toolbar .filter-more { margin-left: auto; }

@media (max-width: 1180px) {
  .member-home-stats { grid-template-columns: repeat(3,82px); }
  .home-actions > * { grid-template-columns: 34px minmax(0,1fr); padding-inline: 10px; }
  .home-actions > * > span { width: 34px; height: 34px; }
  .home-actions small { display: none; }
}

@media (max-width: 900px) {
  .auth-home { grid-template-columns: 1fr; }
  .auth-story { min-height: 55vh; }
  .auth-story h1 { font-size: clamp(48px,9vw,72px); }
  .auth-feature-grid { margin-top: 22px; }
  .auth-entry { padding-block: 34px 54px; }
  .auth-card { width: min(520px,100%); }
  body.signed-in .app-content { padding: 16px 14px 38px; }
  body.signed-in .app-surface { grid-template-columns: minmax(0,1fr); }
}

@media (max-width: 680px) {
  .auth-story { min-height: 410px; }
  .auth-story-copy { right: 20px; bottom: 23px; left: 20px; }
  .auth-story h1 { margin: 15px 0 12px; font-size: clamp(40px,11.7vw,54px); line-height: .97; }
  .auth-story-copy > p { font-size: 13px; line-height: 1.45; }
  .auth-feature-grid { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 6px; margin-top: 17px; }
  .auth-feature-grid article { min-height: 74px; align-content: center; gap: 4px; padding: 9px; border-radius: 13px; }
  .auth-feature-grid b { font-size: 8px; }
  .auth-feature-grid strong { font-size: 10px; }
  .auth-feature-grid span { display: none; }
  .auth-entry { padding: 22px 12px 38px; }
  .auth-card { padding: 24px 20px 22px; border-radius: 24px; }
  .auth-card-brand { margin-bottom: 22px; }
  .auth-card h2 { font-size: 34px; }

  body.signed-in .app-content { padding: 12px 10px 32px; }
  .member-home { min-height: 0; grid-template-columns: 1fr; gap: 16px; margin-bottom: 9px; padding: 20px 17px 16px; border-radius: 21px; }
  .member-home-copy h1 { max-width: 290px; margin-top: 7px; font-size: 28px; line-height: 1.03; }
  .member-home-copy p { font-size: 11px; }
  .member-home-stats { grid-template-columns: repeat(3,1fr); gap: 6px; }
  .member-home-stats > * { min-height: 61px; border-radius: 13px; }
  .member-home-stats b { font-size: 20px; }
  .member-home::after { right: -12px; bottom: 24px; font-size: 128px; }
  .home-actions { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 128px; gap: 7px; margin: 0 -10px 12px; padding: 0 10px 4px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .home-actions::-webkit-scrollbar { display: none; }
  .home-actions > * { min-height: 66px; grid-template-columns: 32px minmax(0,1fr); padding: 9px; border-radius: 15px; scroll-snap-align: start; }
  .home-actions > * > span { width: 32px; height: 32px; border-radius: 10px; font-size: 16px; }
  .home-actions strong { font-size: 11px; }
  body.signed-in .swipe-deck .profile-photo { height: 350px; min-height: 350px; }
  body.signed-in .member-home:not([hidden]) ~ .app-toolbar { margin-bottom: 10px; }
  body.signed-in .member-home:not([hidden]) ~ .app-toolbar .filter-more { margin-left: 0; }
}