/* Dating MGIMO — design system v8.1 «Liquid».
   Neutral surfaces, widgets of liquid glass with a lit edge, a soft colour glow at the top of every screen.
   Colour: gifts, Gold, approve/decline and the three goals (networking / serious / casual).
   The theme follows Telegram and the phone unless chosen. No italics. Built from tools/css/*.css by tools/build-css.sh. */
@font-face { font-family: 'Geologica'; src: url('/fonts/geologica.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }

:root {
  color-scheme: dark;
  --font: 'Geologica', -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', system-ui, sans-serif;
  --display: var(--font);
  --mono: ui-monospace, SFMono-Regular, Menlo, monospace;

  /* surfaces */
  --bg: #0b0b0c;
  --bar-bg: rgba(14, 14, 16, .82); --bar-solid: #0e0e10;
  --s1: #161617; --s2: #212123; --s3: #2c2c2f;
  --surface: var(--s1); --surface-2: var(--s2); --surface-3: var(--s3);
  --line: rgba(255, 255, 255, .08); --line-2: rgba(255, 255, 255, .15);
  /* text */
  --ink: #f4f4f5; --ink-2: #a4a4aa; --ink-3: #7b7b82;
  --pri: #ffffff; --on-pri: #0b0b0c; --on-ink: #0b0b0c;
  --crush: var(--ink); --crush-soft: rgba(255, 255, 255, .09); --crush-ink: var(--on-pri);
  /* decisions: the only colour besides gifts and Gold */
  --ok: #39d37c; --ok-bg: rgba(57, 211, 124, .16); --ok-ink: #052a14;
  --danger: #ff5e55; --danger-bg: rgba(255, 94, 85, .16);
  --pass-red: var(--danger); --like-green: var(--ok);
  /* Gold */
  --gold: #e9b850; --gold-hi: #fff1c4; --gold-mid: #f0c25e; --gold-lo: #b9801f; --gold-ink: #3a2600; --gold-deep: #e9b850;
  --gold-bg: rgba(240, 190, 90, .14);
  --ok-rgb: 57, 211, 124; --danger-rgb: 255, 94, 85; --gold-rgb: 233, 184, 80; --bg-rgb: 11, 11, 12;
  /* glass */
  --blur: 24px;
  --bf: blur(var(--blur)) saturate(1.5) brightness(.72);   /* the glass darkens what is behind it a little, so it stays readable over white bubbles and photos */
  --gl-bg: rgba(255, 255, 255, .07);
  --gl-bg-2: rgba(255, 255, 255, .11);
  --gl-shadow: 0 12px 32px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .2), inset 0 0 20px rgba(255, 255, 255, .03);
  --gl-edge: linear-gradient(160deg, rgba(255, 255, 255, .55), rgba(255, 255, 255, .06) 32%, rgba(255, 255, 255, .03) 68%, rgba(255, 255, 255, .24));
  --chip: rgba(255, 255, 255, .08); --chip-2: rgba(255, 255, 255, .14);
  --sheet: rgba(24, 24, 26, .82);
  --sheet-solid: #161618;
  --scrim: rgba(0, 0, 0, .55);
  /* widgets: translucent cards over the static top glow, a lit 1px edge, no live blur (cheap to scroll) */
  --card: rgba(255, 255, 255, .055); --card-2: rgba(255, 255, 255, .085);
  --card-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
  --card-edge: linear-gradient(165deg, rgba(255, 255, 255, .24), rgba(255, 255, 255, .05) 30%, rgba(255, 255, 255, .025) 70%, rgba(255, 255, 255, .12));
  --gl-hi: rgba(255, 255, 255, .16);
  /* the three goals */
  --net: #ffd23f; --net-rgb: 255, 210, 63; --net-fill: #ffd23f; --net-on: #2a2000;
  --blue: #5e9fff; --blue-rgb: 94, 159, 255;
  --serious: #ff5274; --serious-rgb: 255, 82, 116;
  --night: #ab7dff; --night-rgb: 171, 125, 255;
  --shadow-sm: none;
  --shadow-md: 0 10px 28px -10px rgba(0, 0, 0, .6);
  --shadow-lg: 0 28px 70px -24px rgba(0, 0, 0, .85);
  --glow: 0 0 34px rgba(255, 255, 255, .14);
  /* light play: soft light coming from the top-right, a warm reflection, a cool floor glow */
  --fx: radial-gradient(70% 300px at 8% -60px, rgba(124, 108, 255, .30), transparent 72%), radial-gradient(64% 280px at 96% -50px, rgba(255, 112, 176, .18), transparent 72%), radial-gradient(60% 240px at 50% -90px, rgba(150, 210, 255, .16), transparent 74%);
  --amb: radial-gradient(closest-side, rgba(255, 240, 220, .06), transparent);
  --glow-t: var(--fx);

  /* motion */
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-quart: cubic-bezier(.25, 1, .5, 1);
  --ease-io: cubic-bezier(.65, 0, .35, 1);
  /* v8.18: the release of a press settles without a bounce (a strong ease-out): calm, never cartoonish */
  --settle: cubic-bezier(.23, 1, .32, 1);
  --settle-soft: cubic-bezier(.22, 1, .36, 1);

  /* shape */
  --r-sm: 12px; --r-md: 18px; --r-lg: 24px; --r-xl: 34px;
  --tabbar-h: 54px; --tabbar-gap: 0px;
  --safe-b: max(env(safe-area-inset-bottom, 0px), var(--tg-safe-area-inset-bottom, 0px));
  --safe-t: max(env(safe-area-inset-top, 0px), var(--tg-content-safe-area-inset-top, 0px), var(--tg-fs-top, 0px));
  --safe-l: max(env(safe-area-inset-left, 0px), var(--tg-safe-area-inset-left, 0px), var(--tg-content-safe-area-inset-left, 0px));
  --safe-r: max(env(safe-area-inset-right, 0px), var(--tg-safe-area-inset-right, 0px), var(--tg-content-safe-area-inset-right, 0px));
  --head-h: 56px;
  --dock-h: calc(var(--tabbar-h) + var(--tabbar-gap) + var(--safe-b));

  /* rarity backdrops of gifts (colour is allowed here) */
  --r1: #4a4a52; --r2: #26262b;
}

/* «Молоко» — the light theme */
:root[data-theme='light'] {
  color-scheme: light;
  --bg: #f2f2f7;
  --bar-bg: rgba(249, 249, 251, .86); --bar-solid: #f9f9fb;
  --s1: #ffffff; --s2: #e9e9ef; --s3: #dcdce3;
  --line: rgba(20, 20, 50, .08); --line-2: rgba(20, 20, 50, .15);
  --ink: #0b0b12; --ink-2: #555561; --ink-3: #868692;
  --pri: #0d0d0e; --on-pri: #ffffff; --on-ink: #ffffff;
  --crush-soft: rgba(0, 0, 0, .06);
  --ok: #1fa95b; --ok-bg: rgba(31, 169, 91, .12); --ok-ink: #ffffff;
  --danger: #e9453c; --danger-bg: rgba(233, 69, 60, .1);
  --ok-rgb: 31, 169, 91; --danger-rgb: 233, 69, 60; --gold-rgb: 185, 128, 31; --bg-rgb: 242, 242, 247;
  --gold: #b9801f; --gold-deep: #8f6212; --gold-bg: rgba(200, 140, 30, .13); --gold-ink: #3a2600;
  --bf: blur(var(--blur)) saturate(1.6) brightness(1.04);
  --gl-bg: rgba(255, 255, 255, .66);
  --gl-bg-2: rgba(255, 255, 255, .82);
  --gl-shadow: 0 10px 30px rgba(20, 20, 30, .12), 0 0 0 .5px rgba(0, 0, 0, .08), inset 0 1px 0 rgba(255, 255, 255, .95);
  --gl-edge: linear-gradient(160deg, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, 0) 60%, rgba(255, 255, 255, .9));
  --chip: rgba(30, 30, 70, .06); --chip-2: rgba(30, 30, 70, .1);
  --sheet: rgba(255, 255, 255, .86);
  --sheet-solid: #f2f2f7;
  --scrim: rgba(16, 16, 40, .32);
  --card: #ffffff; --card-2: #f7f7fb;
  --card-shadow: 0 1px 1px rgba(16, 16, 50, .04), 0 10px 26px -16px rgba(30, 30, 80, .22);
  --card-edge: linear-gradient(165deg, #fff, rgba(255, 255, 255, 0) 40%);
  --gl-hi: #ffffff;
  --net: #8f6b00; --net-rgb: 245, 186, 0; --net-fill: #ffc800; --net-on: #2a2000;
  --blue: #2f6fe4; --blue-rgb: 47, 111, 228;
  --serious: #b0173f; --serious-rgb: 176, 23, 63;
  --night: #7646e0; --night-rgb: 118, 70, 224;
  --shadow-md: 0 10px 28px -10px rgba(20, 20, 30, .22);
  --shadow-lg: 0 28px 70px -24px rgba(20, 20, 30, .35);
  --glow: 0 8px 22px rgba(13, 13, 14, .22);
  /* a soft aurora at the top (lavender, pink, sky), the rest of the screen is clean */
  --fx: radial-gradient(80% 340px at 0% -40px, rgba(178, 150, 255, .62), transparent 70%), radial-gradient(76% 320px at 100% -40px, rgba(255, 168, 210, .55), transparent 70%), radial-gradient(70% 260px at 50% -70px, rgba(150, 205, 255, .55), transparent 72%);
  --amb: radial-gradient(closest-side, rgba(255, 224, 190, .38), transparent);
  --r1: #f0f0f3; --r2: #d9d9df;
}

/* Low-power devices and people who asked for less transparency: same look, no blur */
:root.lite { --blur: 0px; --bf: none; --sheet: rgba(24, 24, 26, .97); --gl-bg: rgba(44, 44, 47, .92); --gl-bg-2: rgba(58, 58, 62, .94); --card: #19191b; --card-2: #202023; }
:root.lite[data-theme='light'] { --sheet: rgba(255, 255, 255, .98); --gl-bg: rgba(250, 250, 251, .96); --gl-bg-2: rgba(255, 255, 255, .98); }
@media (prefers-reduced-transparency: reduce) {
  :root { --blur: 0px; --bf: none; --sheet: rgba(24, 24, 26, .97); --gl-bg: rgba(44, 44, 47, .92); --gl-bg-2: rgba(58, 58, 62, .94); }
  :root[data-theme='light'] { --sheet: rgba(255, 255, 255, .98); --gl-bg: rgba(250, 250, 251, .96); --gl-bg-2: rgba(255, 255, 255, .98); }
}

/* ---------- base ---------- */
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
:where(*) { touch-action: pan-x pan-y; }            /* no pinch, no double-tap zoom anywhere; components that need more say so themselves */
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--ink); overscroll-behavior: none; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; overflow: hidden; max-width: 100%; }
body { font: 400 16px/1.5 var(--font); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-optical-sizing: auto; -webkit-touch-callout: none; }
button, input, textarea, select { font: inherit; color: inherit; }
button { border: 0; background: none; padding: 0; cursor: pointer; }
img { display: block; max-width: 100%; -webkit-user-drag: none; }
h1, h2, h3 { margin: 0; text-wrap: balance; letter-spacing: -.02em; }
p { margin: 0; text-wrap: pretty; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 10px; }
::selection { background: var(--chip-2); }
a { color: inherit; }
input, textarea, select { font-size: max(16px, 1em); }   /* iOS never zooms into a field */
.disp { font-weight: 700; letter-spacing: -.02em; }
.muted { color: var(--ink-2); } .faint { color: var(--ink-3); }
.small { font-size: .875rem; line-height: 1.45; } .xs { font-size: .75rem; line-height: 1.4; }
.num { font-variant-numeric: tabular-nums; }
.caps { text-transform: uppercase; letter-spacing: .08em; font-size: .6875rem; font-weight: 650; color: var(--ink-3); }
.hidden { display: none !important; }
.lc { text-transform: none; letter-spacing: 0; font-weight: 400; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.danger-t { color: var(--danger) !important; }
h1, h2, h3, b, p, .rt b, .rt span { overflow-wrap: anywhere; }
.ico { width: 22px; height: 22px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.ico.fill { fill: currentColor; stroke: none; }
.ico.thick { stroke-width: 2.1; }
.aurora-text { color: var(--ink); }
.aurora-bg { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(70% 45% at 22% 0%, rgba(255, 255, 255, .16), transparent 70%), radial-gradient(60% 40% at 85% 100%, rgba(255, 236, 210, .10), transparent 72%); animation: amb-drift 14s ease-in-out infinite alternate; }
@keyframes amb-drift { from { transform: translate3d(-3%, -2%, 0) scale(1); } to { transform: translate3d(3%, 2%, 0) scale(1.06); } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } }

/* the app frame: a phone-shaped column, light comes from the top */
#app { position: fixed; inset: 0; max-width: 540px; margin: 0 auto; display: flex; flex-direction: column; background: var(--bg); overflow: hidden; overflow: clip; }
#app::before { content: ''; position: absolute; inset: 0; background: var(--fx); pointer-events: none; z-index: 0; }
#app::after { content: ''; position: absolute; left: -35%; top: -22%; width: 170%; height: 62%; background: var(--amb); pointer-events: none; z-index: 0; animation: amb 22s ease-in-out infinite alternate; will-change: transform; }
@keyframes amb { from { transform: translate3d(-6%, 0, 0) scale(1); opacity: .8; } to { transform: translate3d(8%, 6%, 0) scale(1.12); opacity: 1; } }
:root.lite #app::after { animation: none; }
@media (min-width: 560px) { #app { box-shadow: 0 0 0 1px var(--line); } }
.shell { z-index: 1; }


/* ---------- glass recipe ---------- */
.gl, .glass { position: relative; background: var(--gl-bg); -webkit-backdrop-filter: var(--bf); backdrop-filter: var(--bf); box-shadow: var(--gl-shadow); }
/* the lit edge: a 1px gradient ring that is bright where light hits and almost gone elsewhere */
.gl::after, .glass::after, .edge::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: var(--gl-edge); pointer-events: none;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
.edge { position: relative; }

/* ---------- press: light follows the finger, the control sinks and springs back ---------- */
.lit { position: relative; overflow: hidden; isolation: isolate; }
.lit::before { content: ''; position: absolute; inset: 0; border-radius: inherit; z-index: -1; pointer-events: none; opacity: 0; transition: opacity .5s var(--ease-out);
  background: radial-gradient(130px circle at var(--px, 50%) var(--py, 50%), rgba(255, 255, 255, .34), transparent 70%); }
:root[data-theme='light'] .lit::before { background: radial-gradient(130px circle at var(--px, 50%) var(--py, 50%), rgba(255, 255, 255, .55), transparent 70%); }
.lit:active::before { opacity: 1; transition-duration: .06s; }

/* ---------- buttons ---------- */
.btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; padding: 0 clamp(14px, 4.6vw, 22px); border-radius: 999px; font-weight: 650; font-size: clamp(.8125rem, 4.4vw, 1rem); line-height: 1.2; text-align: center;
  background: var(--pri); color: var(--on-pri); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55); overflow: hidden; isolation: isolate; white-space: normal;
  transition: transform .55s var(--settle), background-color .2s, opacity .2s, box-shadow .3s, filter .2s; }
.btn::before { content: ''; position: absolute; inset: 0; border-radius: inherit; z-index: -1; pointer-events: none; opacity: 0; transition: opacity .5s var(--ease-out); background: radial-gradient(130px circle at var(--px, 50%) var(--py, 50%), rgba(255, 255, 255, .55), transparent 70%); }
:root[data-theme='light'] .btn::before { background: radial-gradient(130px circle at var(--px, 50%) var(--py, 50%), rgba(255, 255, 255, .3), transparent 70%); }
.btn:active { transform: scale(.955); filter: brightness(.94); transition-duration: .1s, .2s, .2s, .3s, .1s; }
.btn:active::before { opacity: 1; transition-duration: .05s; }
.btn[disabled], .btn.is-disabled { opacity: .38; pointer-events: none; }
.btn.block { width: 100%; }
.btn.sm { min-height: 40px; padding: 0 clamp(12px, 4vw, 16px); font-size: clamp(.75rem, 3.8vw, .875rem); }
.btn.xs { min-height: 32px; padding: 0 13px; font-size: .8125rem; }
.btn .ico { width: 20px; height: 20px; stroke-width: 1.9; }
.btn.sm .ico, .btn.xs .ico { width: 17px; height: 17px; }
.btn.crush { box-shadow: var(--glow), inset 0 1px 0 rgba(255, 255, 255, .7); }
.btn.ghost, .btn.glass { background: var(--chip); color: var(--ink); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08); }
.btn.ghost::before, .btn.glass::before { background: radial-gradient(130px circle at var(--px, 50%) var(--py, 50%), rgba(255, 255, 255, .16), transparent 70%); }
:root[data-theme='light'] .btn.ghost { box-shadow: none; }
.btn.line { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-2); }
.btn.dim { background: transparent; color: var(--ink-2); box-shadow: none; }
.btn.ok { background: var(--ok); color: var(--ok-ink); box-shadow: 0 0 30px rgba(var(--ok-rgb), 0.32), inset 0 1px 0 rgba(255, 255, 255, .4); }
.btn.no, .btn.red { background: var(--danger-bg); color: var(--danger); box-shadow: inset 0 0 0 1px rgba(var(--danger-rgb), 0.38); }
.btn.light { background: #fff; color: #0b0b0c; box-shadow: 0 0 30px rgba(255, 255, 255, .2); }
.btn .spin { width: 18px; height: 18px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: spin .7s linear infinite; }
.btn.is-loading > :not(.spin) { opacity: 0; } .btn.is-loading .spin { position: absolute; }
.btn.nowrap { white-space: nowrap; }
/* Gold: molten gold with a real highlight running across */
.btn.gold { background: linear-gradient(180deg, #fbe2a0, #e6ad42 58%, #c98a1e); color: var(--gold-ink); box-shadow: 0 0 40px rgba(240, 190, 90, .32), inset 0 1px 0 rgba(255, 255, 255, .7), inset 0 -2px 0 rgba(120, 70, 0, .22); }
.btn.gold::after, .gold-sheen::after { content: ''; position: absolute; top: -20%; bottom: -20%; left: 0; width: 46%; z-index: 1; pointer-events: none; transform: translateX(-160%) skewX(-22deg);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .0) 8%, rgba(255, 252, 236, .85) 50%, rgba(255, 255, 255, 0) 92%, transparent); mix-blend-mode: soft-light; animation: gold-run 3.6s cubic-bezier(.5, 0, .2, 1) infinite; }
@keyframes gold-run { 0%, 34% { transform: translateX(-160%) skewX(-22deg); } 72%, 100% { transform: translateX(340%) skewX(-22deg); } }
.btn.super-btn { background: var(--chip); color: var(--gold); box-shadow: inset 0 0 0 1px rgba(var(--gold-rgb), 0.4); }
:root.lite .btn.gold::after, :root.lite .gold-sheen::after { animation: none; display: none; }

.icon-btn { position: relative; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; color: var(--ink); flex: none; overflow: hidden; isolation: isolate;
  transition: transform .55s var(--settle), background-color .2s, opacity .2s; }
.icon-btn::before { content: ''; position: absolute; inset: 0; border-radius: inherit; z-index: -1; opacity: 0; background: var(--chip); transition: opacity .3s var(--ease-out); }
.icon-btn:active { transform: scale(.88); transition-duration: .1s, .2s, .2s; }
.icon-btn:active::before { opacity: 1; transition-duration: .05s; }
.icon-btn .ico { width: 22px; height: 22px; }
.icon-btn.sm { width: 34px; height: 34px; } .icon-btn.sm .ico { width: 18px; height: 18px; }
/* glass orbs float over content in headers */
.icon-btn.orb, .page-head .icon-btn, .topbar .icon-btn, .discover-head .icon-btn { background: var(--gl-bg); -webkit-backdrop-filter: var(--bf); backdrop-filter: var(--bf); box-shadow: var(--gl-shadow); overflow: visible; }
.icon-btn.orb::after, .page-head .icon-btn::after, .topbar .icon-btn::after, .discover-head .icon-btn::after { content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: var(--gl-edge); pointer-events: none;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
.icon-btn.plain { background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.icon-btn.plain::after { display: none; }
.icon-btn.spinning .ico { animation: spin .8s var(--ease-io); }
.link { color: var(--ink); font-weight: 650; text-decoration: underline; text-decoration-color: var(--ink-3); text-underline-offset: 3px; }
.link-btn { display: inline-flex; align-items: center; gap: 2px; color: var(--ink); font-weight: 650; font-size: .8125rem; margin-left: auto; opacity: .9; }
.link-btn .ico { width: 15px; height: 15px; }
.dot { position: absolute; top: 9px; right: 9px; min-width: 9px; height: 9px; border-radius: 99px; background: var(--pri); box-shadow: 0 0 0 2px var(--bg); }
.badge { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 99px; background: var(--pri); color: var(--on-pri); font-size: .6875rem; font-weight: 700; display: inline-grid; place-items: center; line-height: 1; font-variant-numeric: tabular-nums; }
.badge.dot-only { min-width: 9px; width: 9px; height: 9px; padding: 0; }
.unread-n { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 99px; background: var(--pri); color: var(--on-pri); font-size: .6875rem; font-weight: 700; display: inline-grid; place-items: center; line-height: 1; }

/* ---------- chips / tags ---------- */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 36px; padding: 0 14px; border-radius: 999px; background: var(--chip); color: var(--ink); font-size: .875rem; font-weight: 550; line-height: 1.2; text-align: center;
  box-shadow: inset 0 0 0 1px transparent; transition: transform .55s var(--settle), background-color .22s, color .22s, box-shadow .22s; }
.chip:active { transform: scale(.94); transition-duration: .1s, .22s, .22s, .22s; }
.chip[aria-pressed='true'] { background: var(--pri); color: var(--on-pri); font-weight: 650; }
.chip.shared { background: var(--chip-2); box-shadow: inset 0 0 0 1px var(--line-2); }
.chip.static { pointer-events: none; }
.chip.sm-c { min-height: 30px; padding: 0 11px; font-size: .8125rem; }
.chip .e { font-size: 1rem; line-height: 1; }
.chip .ico { width: 16px; height: 16px; color: var(--ink-2); }
.chip[aria-pressed='true'] .ico { color: inherit; }
.chip.more-chip { background: transparent; box-shadow: inset 0 0 0 1px var(--line-2); color: var(--ink-2); }
.ghost-chip { background: transparent; box-shadow: none; border: 1px dashed var(--line-2); }
.chips.scroll-x { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-left: -20px; margin-right: -20px; padding: 0 20px; }
.chips.scroll-x::-webkit-scrollbar { display: none; }
.chips.scroll-x .chip { flex: none; }
.page-body .chips.scroll-x { margin-left: -16px; margin-right: -16px; padding: 0 16px; }
.sheet-body .chips.scroll-x { margin-left: -18px; margin-right: -18px; padding: 0 18px; }
.chip-av { width: 20px; height: 20px; border-radius: 50%; object-fit: cover; margin-left: -4px; }
.tag { display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 10px; border-radius: 13px; font-size: .75rem; font-weight: 650; background: var(--chip); color: var(--ink); white-space: nowrap; }
.tag .ico { width: 14px; height: 14px; }
.tag.mini { height: 20px; padding: 0 7px; font-size: .65rem; margin-left: 6px; vertical-align: middle; }
.tag.net, .tag.serious, .tag.night, .tag.plain { background: var(--chip); color: var(--ink); }
.tag.serious { background: var(--pri); color: var(--on-pri); }
.tag.gold { background: linear-gradient(180deg, #fbe2a0, #e6ad42); color: var(--gold-ink); }
.rar-tag { background: var(--chip); color: var(--ink-2); }
.rar-tag.rare { background: rgba(90, 160, 255, .18); color: #8ec1ff; }
.rar-tag.epic { background: rgba(170, 110, 255, .2); color: #c9a3ff; }
.rar-tag.legendary { background: rgba(240, 190, 90, .2); color: #f2c661; }
.rar-tag.mythic { background: linear-gradient(120deg, rgba(255, 110, 160, .28), rgba(255, 200, 100, .28)); color: #ffb3cf; }
:root[data-theme='light'] .rar-tag.rare { color: #2a68c4; } :root[data-theme='light'] .rar-tag.epic { color: #6b3fc4; }
:root[data-theme='light'] .rar-tag.legendary { color: #8f6212; } :root[data-theme='light'] .rar-tag.mythic { color: #b02a63; }
.swatch { width: 14px; height: 14px; border-radius: 5px; flex: none; background: var(--chip-2); }
.status-pill { font-size: .6875rem; font-weight: 700; padding: 3px 9px; border-radius: 99px; background: var(--chip); color: var(--ink-2); }
.status-pill.pending { background: var(--gold-bg); color: var(--gold); }
.status-pill.live { background: var(--ok-bg); color: var(--ok); }
.status-pill.rejected { background: var(--danger-bg); color: var(--danger); }

/* ---------- forms ---------- */
.field { display: grid; gap: 8px; } .field > label { font-weight: 600; font-size: .9375rem; }
.input, .select, .textarea { width: 100%; min-height: 50px; padding: 12px 16px; border-radius: 16px; background: var(--s1); border: 1px solid var(--line); outline: none; color: var(--ink); -webkit-appearance: none; appearance: none;
  transition: border-color .2s, box-shadow .3s var(--ease-out), background-color .2s; }
.input::placeholder, .textarea::placeholder { color: var(--ink-3); }
.input:focus, .select:focus, .textarea:focus { border-color: var(--line-2); background: var(--s2); box-shadow: 0 0 0 3px var(--chip), 0 0 28px rgba(255, 255, 255, .06); }
.input.big { min-height: 58px; font-size: 1.25rem; font-weight: 600; }
.textarea { resize: none; min-height: 96px; line-height: 1.45; }
.select { padding-right: 38px; background-image: linear-gradient(45deg, transparent 50%, var(--ink-3) 50%), linear-gradient(135deg, var(--ink-3) 50%, transparent 50%); background-position: calc(100% - 21px) 50%, calc(100% - 15px) 50%; background-size: 6px 6px; background-repeat: no-repeat; }
.select option { background: var(--s1); color: var(--ink); }
.counter { font-size: .75rem; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.warn-inline { font-size: .75rem; color: var(--ink-3); } .warn-inline.err { color: var(--danger); }
.err { color: var(--danger); font-size: .875rem; }
/* switch: a span inside clickable rows (never a nested button) */
.switch { display: inline-block; vertical-align: middle; position: relative; flex: none; width: 48px; height: 29px; border-radius: 99px; background: var(--s3); box-shadow: inset 0 0 0 1px var(--line); pointer-events: none; transition: background-color .3s var(--ease-out); }
.switch::after { content: ''; position: absolute; top: 3px; left: 3px; width: 23px; height: 23px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, .35), inset 0 -1px 0 rgba(0, 0, 0, .06); transition: transform .5s var(--settle); }
.switch[aria-checked='true'] { background: var(--pri); box-shadow: 0 0 20px rgba(255, 255, 255, .14); }
:root[data-theme='light'] .switch[aria-checked='true'] { box-shadow: none; }
:root[data-theme='light'] .switch[aria-checked='true']::after { background: #fff; }
.switch[aria-checked='true']::after { transform: translateX(19px); background: var(--on-pri); }
:root[data-theme='dark'] .switch[aria-checked='true']::after { background: #0b0b0c; }
.row .switch { margin-left: auto; }
.set-row.bool { cursor: pointer; padding: 6px 0; -webkit-user-select: none; user-select: none; }
.set-row.bool:active { opacity: .7; }
.set-row.bool > label { cursor: pointer; }
/* checkbox: consent screen and forms */
.check { position: relative; width: 24px; height: 24px; border-radius: 8px; flex: none; background: transparent; box-shadow: inset 0 0 0 1.5px var(--line-2); display: grid; place-items: center; transition: background-color .25s, box-shadow .25s, transform .5s var(--settle); }
.check .ico { width: 15px; height: 15px; stroke-width: 3; color: var(--on-pri); transform: scale(0); transition: transform .45s var(--settle); }
[aria-checked='true'] > .check, .check.on { background: var(--pri); box-shadow: 0 0 18px rgba(255, 255, 255, .18); }
[aria-checked='true'] > .check .ico, .check.on .ico { transform: scale(1); }
.range { position: relative; height: 34px; touch-action: none; }
.range .rail { position: absolute; top: 15px; left: 14px; right: 14px; height: 4px; border-radius: 4px; background: var(--s3); }
.range .fill { position: absolute; top: 15px; height: 4px; border-radius: 4px; background: var(--pri); }
.range .knob { position: absolute; top: 7px; width: 20px; height: 20px; margin-left: -10px; border-radius: 50%; background: #fff; box-shadow: 0 2px 8px rgba(0, 0, 0, .4); touch-action: none; transition: transform .3s var(--settle); }
:root[data-theme='light'] .range .knob { background: #fff; box-shadow: 0 2px 8px rgba(0, 0, 0, .3), 0 0 0 1px var(--line-2); }
.range .knob:active { transform: scale(1.2); }
.range-val { font-variant-numeric: tabular-nums; color: var(--ink); font-weight: 700; }
.seg { position: relative; display: flex; background: var(--s2); border-radius: 999px; padding: 3px; box-shadow: inset 0 0 0 1px var(--line); }
.seg button { flex: 1; min-height: 36px; border-radius: 999px; font-weight: 600; font-size: .875rem; color: var(--ink-2); position: relative; z-index: 1; transition: color .25s; line-height: 1.1; padding: 0 6px; }
.seg button[aria-selected='true'] { color: var(--on-pri); }
.seg .thumb { position: absolute; top: 3px; left: 3px; bottom: 3px; width: 50%; border-radius: 999px; background: var(--pri); box-shadow: 0 2px 10px rgba(0, 0, 0, .3), inset 0 1px 0 rgba(255, 255, 255, .5); transition: transform .5s var(--settle-soft), width .3s var(--ease-out); }
.spin { display: inline-block; width: 22px; height: 22px; border-radius: 50%; border: 2.5px solid var(--ink); border-right-color: transparent; animation: spin .7s linear infinite; }
.spin.xs { width: 11px; height: 11px; border-width: 1.6px; border-color: #fff; border-right-color: transparent; }
@keyframes spin { to { transform: rotate(1turn); } }
.skel { background: linear-gradient(100deg, var(--s1) 40%, var(--s2) 50%, var(--s1) 60%); background-size: 200% 100%; animation: shimmer 1.5s infinite; border-radius: var(--r-md); }
@keyframes shimmer { from { background-position: 150% 0; } to { background-position: -50% 0; } }
.fade-in { animation: fade-in .4s var(--ease-out); } @keyframes fade-in { from { opacity: 0; } }
.rise-in { animation: rise-in .55s var(--ease-out) backwards; animation-delay: calc(var(--i, 0) * 45ms); }
@keyframes rise-in { from { opacity: 0; transform: translateY(14px); } }
@keyframes fade-up { from { opacity: 0; transform: translateY(8px); } }
@keyframes pop-in { from { transform: scale(.6); opacity: 0; } }
@keyframes pop { 40% { transform: scale(1.25); } }
@keyframes blink { 50% { opacity: .25; } }
@keyframes float { 50% { transform: translateY(-8px); } }
@keyframes flash { 0%, 50% { box-shadow: 0 0 0 3px var(--line-2), 0 0 26px rgba(255, 255, 255, .2); } }

/* ---------- lists ---------- */
.rows { border-radius: 22px; background: var(--s1); box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; }
.row { position: relative; display: flex; align-items: center; gap: 14px; width: 100%; padding: 13px 16px; text-align: left; transition: background-color .2s; }
.row:active { background: var(--chip); transition-duration: .05s; }
.row + .row::before { content: ''; position: absolute; left: 60px; right: 0; top: 0; height: 1px; background: var(--line); }
.row .ri { width: 36px; height: 36px; border-radius: 12px; display: grid; place-items: center; background: var(--chip); color: var(--ink); flex: none; }
.row .ri .ico { width: 20px; height: 20px; }
.row .rt { flex: 1; min-width: 0; display: grid; gap: 1px; grid-template-columns: minmax(0, 1fr); }
.row .rt b { font-weight: 600; font-size: .9375rem; } .row .rt span { font-size: .8125rem; color: var(--ink-3); }
.row .chev, .chev { color: var(--ink-3); display: inline-flex; } .chev .ico { width: 18px; height: 18px; }
.row .rv { color: var(--ink-3); font-weight: 600; font-variant-numeric: tabular-nums; font-size: .875rem; }
.row.danger .rt b, .row.danger .ri { color: var(--danger); }
.row.attn .ri { background: var(--danger-bg); color: var(--danger); }
.rows.compact .row { padding: 10px 12px; }
.pad-rows { margin: 0; }
.opts { display: grid; gap: 10px; }
.opts.two { grid-template-columns: 1fr 1fr; }
.opt { position: relative; display: flex; align-items: center; gap: 14px; width: 100%; padding: 14px 16px; border-radius: 20px; background: var(--s1); box-shadow: inset 0 0 0 1px var(--line); text-align: left;
  transition: box-shadow .25s, background-color .25s, transform .55s var(--settle); }
.opt:active { transform: scale(.975); transition-duration: .1s, .25s, .25s; }
.opt[aria-pressed='true'] { box-shadow: inset 0 0 0 1.5px var(--ink), 0 0 30px rgba(255, 255, 255, .07); background: var(--s2); }
.opt .t { font-weight: 600; } .opt .d { font-size: .8125rem; color: var(--ink-3); margin-top: 2px; }
.opt .mk { margin-left: auto; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--s3); color: transparent; flex: none; transition: background-color .25s, color .25s, transform .5s var(--settle); }
.opt[aria-pressed='true'] .mk { background: var(--pri); color: var(--on-pri); }
.opt .mk .ico { width: 14px; height: 14px; stroke-width: 3; }
.opt .price { margin-left: auto; font-weight: 700; white-space: nowrap; }
.opt-ic { width: 38px; height: 38px; border-radius: 13px; display: grid; place-items: center; background: var(--chip); color: var(--ink); flex: none; }
.opt-ic.super { color: var(--gold); }
.opt-ic .ico { width: 20px; height: 20px; }
.opts.two .opt { flex-direction: column; align-items: flex-start; gap: 8px; padding: 12px 12px 13px; min-height: 64px; justify-content: center; }
.opts.two .opt .mk { position: absolute; top: 10px; right: 10px; width: 22px; height: 22px; }
.opts.two .opt > div { padding-right: 24px; }
.note { font-size: .8125rem; color: var(--ink-2); background: var(--chip); padding: 10px 14px; border-radius: 14px; }
.quote { padding: 10px 14px; border-radius: 14px; background: var(--chip); font-size: .875rem; color: var(--ink-2); }
.mono { font-family: var(--mono); font-size: .8125rem; }
.stack { display: grid; gap: 18px; } .stack-sm { display: grid; gap: 10px; }
.privacy-line { display: flex; align-items: flex-start; gap: 7px; margin-top: 12px; font-size: .75rem; line-height: 1.4; color: var(--ink-3); }
.privacy-line .ico { width: 14px; height: 14px; flex: none; margin-top: 1px; }
.privacy-line.center { justify-content: center; text-align: center; }
.kv { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 7px 14px; margin: 12px 0; font-size: .875rem; }
.kv dt { color: var(--ink-3); } .kv dd { margin: 0; overflow-wrap: anywhere; }
.ice { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.pill-row { display: flex; align-items: center; gap: 9px; }
/* buttons that sit side by side never break their label into two lines */
.sheet-actions .btn, .me-btns .btn, .rc-acts .btn, .pact .btn, .gi-own .btn { white-space: nowrap; padding-inline: 12px; min-width: 0; }

/* ---------- splash & wordmark ---------- */
.splash { position: absolute; inset: 0; display: grid; place-items: center; background: var(--bg); z-index: 50; transition: opacity .5s var(--ease-out), visibility .5s; }
.splash::before { content: ''; position: absolute; inset: 0; background: var(--fx); }
.splash.out { opacity: 0; visibility: hidden; }
.wordmark { position: relative; display: flex; align-items: baseline; gap: 7px; user-select: none; -webkit-user-select: none; }
.wordmark .w1 { font-weight: 400; font-size: 1.15rem; letter-spacing: -.02em; color: var(--ink-2); }
.wordmark .w2 { font-weight: 800; font-size: 1.3rem; letter-spacing: .01em; color: var(--ink); }
.splash .wordmark .w1 { font-size: 1.9rem; } .splash .wordmark .w2 { font-size: 2.3rem; }

/* ---------- sheets ---------- */
.backdrop { position: fixed; inset: 0; background: var(--scrim); opacity: 0; transition: opacity .4s var(--ease-out); z-index: 40; }
.backdrop.on { opacity: 1; }
.sheet { position: fixed; left: 0; right: 0; bottom: 0; max-width: 540px; margin: 0 auto; display: flex; flex-direction: column; z-index: 41;
  max-height: calc(100% - 48px - var(--safe-t)); border-radius: 34px 34px 0 0;
  background: var(--sheet); -webkit-backdrop-filter: blur(34px) saturate(1.5); backdrop-filter: blur(34px) saturate(1.5);
  box-shadow: 0 -20px 60px rgba(0, 0, 0, .4), inset 0 1px 0 rgba(255, 255, 255, .2);
  transform: translateY(104%); transition: transform .55s cubic-bezier(.32, .72, 0, 1); will-change: transform; }
:root[data-theme='light'] .sheet { box-shadow: 0 -20px 60px rgba(20, 20, 30, .18), inset 0 1px 0 #fff, 0 0 0 .5px rgba(0, 0, 0, .06); }
.sheet::after { content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none; background: linear-gradient(180deg, rgba(255, 255, 255, .5), rgba(255, 255, 255, .04) 30%, rgba(255, 255, 255, 0));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
:root[data-theme='light'] .sheet::after { background: linear-gradient(180deg, #fff, rgba(255, 255, 255, 0) 40%); }
.sheet.on { transform: translateY(0); } .sheet.out { transform: translateY(104%); transition-duration: .4s; }
.sheet.dragging { transition: none; }
.sheet.full { height: calc(100% - 48px - var(--safe-t)); }
.sheet .grab { width: 100%; padding: 9px 0 8px; display: grid; place-items: center; flex: none; touch-action: none; }
.sheet .grab::before { content: ''; width: 38px; height: 5px; border-radius: 5px; background: var(--line-2); }
.sheet-body { padding: 4px 20px calc(18px + var(--safe-b)); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; flex: 1 1 auto; min-height: 0; }
.sheet-body::-webkit-scrollbar { display: none; }
.sheet-foot { padding: 10px 20px calc(14px + var(--safe-b)); display: grid; gap: 10px; flex: none; }
.sheet-foot:empty, .page-foot:empty { display: none; }
.sheet-foot:not(:empty) ~ * { }
.sheet:has(.sheet-foot:not(:empty)) .sheet-body { padding-bottom: 12px; }
.sheet-title { font-weight: 700; font-size: 1.4rem; line-height: 1.18; letter-spacing: -.025em; margin: 2px 0 6px; }
.sheet-sub { color: var(--ink-2); font-size: .9375rem; line-height: 1.45; }
.sheet-actions { display: flex; gap: 10px; } .sheet-actions .btn { flex: 1; }
.sheet-actions.sub { margin-top: -2px; }

/* ---------- pages ---------- */
.page { position: fixed; inset: 0; max-width: 540px; margin: 0 auto; background: var(--bg); z-index: 38; display: flex; flex-direction: column; transform: translateX(100%); transition: transform .5s cubic-bezier(.32, .72, 0, 1); box-shadow: -20px 0 60px rgba(0, 0, 0, .3); will-change: transform; overflow: hidden; }
.page::before { content: ''; position: absolute; inset: 0; background: var(--fx); pointer-events: none; z-index: 0; }
.page > * { position: relative; z-index: 1; }
.page.on { transform: translateX(0); } .page.out { transform: translateX(100%); transition-duration: .4s; }
.page-head { position: relative; display: flex; align-items: center; gap: 10px; padding: calc(8px + var(--safe-t)) 14px 8px; flex: none; min-height: calc(56px + var(--safe-t)); z-index: 3; transition: background-color .25s; }
.page-head h2 { flex: 1; font-weight: 650; font-size: 1.0625rem; letter-spacing: -.01em; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.page-head.scrolled { background: rgba(var(--bg-rgb), 0.78); -webkit-backdrop-filter: var(--bf); backdrop-filter: var(--bf); box-shadow: 0 1px 0 var(--line); }
.page-body { flex: 1; overflow-y: auto; padding: 4px 16px calc(20px + var(--safe-b)); overscroll-behavior: contain; scrollbar-width: none; min-height: 0; }
.page-body::-webkit-scrollbar { display: none; }
.page-foot { padding: 10px 16px calc(14px + var(--safe-b)); display: grid; gap: 10px; }

/* ---------- toasts, banners ---------- */
.toasts { position: fixed; top: calc(10px + var(--safe-t)); left: 0; right: 0; display: grid; justify-items: center; gap: 8px; z-index: 9000; pointer-events: none; }
.toast { display: flex; align-items: center; gap: 10px; max-width: 90%; padding: 11px 18px; border-radius: 999px; background: var(--gl-bg-2); -webkit-backdrop-filter: var(--bf); backdrop-filter: var(--bf); color: var(--ink); font-size: .875rem; font-weight: 550; line-height: 1.3;
  box-shadow: var(--gl-shadow); animation: toast-in .5s var(--settle); position: relative; }
.toast::after { content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: var(--gl-edge); pointer-events: none; -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
.toast.err { color: var(--danger); background: linear-gradient(var(--danger-bg), var(--danger-bg)), var(--gl-bg-2); }
.toast img { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; }
.toast.out { opacity: 0; transform: translateY(-10px) scale(.96); transition: .3s var(--ease-out); }
@keyframes toast-in { from { opacity: 0; transform: translateY(-16px) scale(.9); } }
.nbanner { position: fixed; left: 50%; top: calc(8px + var(--safe-t)); width: min(94vw, 500px); z-index: 9100; display: flex; align-items: center; gap: 12px; padding: 10px 14px 10px 10px; border-radius: 24px; background: var(--gl-bg-2); -webkit-backdrop-filter: var(--bf); backdrop-filter: var(--bf); box-shadow: var(--gl-shadow);
  transform: translate(-50%, -150%); opacity: 0; transition: transform .55s var(--settle-soft), opacity .3s; cursor: pointer; }
.nbanner::after { content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: var(--gl-edge); pointer-events: none; -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
.nbanner.on { transform: translate(-50%, 0); opacity: 1; }
.nbanner.out { transform: translate(-50%, -150%); opacity: 0; transition-duration: .35s; }
.nb-av { width: 42px; height: 42px; border-radius: 50%; overflow: hidden; flex: none; display: grid; place-items: center; background: var(--chip-2); color: var(--ink); }
.nb-av.sq { border-radius: 13px; background: radial-gradient(circle, var(--r1), var(--r2)); }
.nb-av img { width: 100%; height: 100%; object-fit: cover; }
.nb-av.sq img { object-fit: contain; padding: 4px; }
.nb-ic .ico { width: 20px; height: 20px; }
.nb-tx { min-width: 0; display: grid; gap: 1px; grid-template-columns: minmax(0, 1fr); }
.nb-tx b { font-size: .875rem; font-weight: 650; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.nb-tx span { font-size: .8125rem; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.netbar { position: fixed; top: calc(6px + var(--safe-t)); left: 50%; transform: translateX(-50%); z-index: 9100; padding: 7px 14px; border-radius: 99px; background: var(--gl-bg-2); -webkit-backdrop-filter: var(--bf); backdrop-filter: var(--bf); box-shadow: var(--gl-shadow); font-size: .75rem; font-weight: 650; animation: toast-in .4s var(--settle); }
.netbar.ok { color: var(--ok); }

.fatal { margin: auto; display: grid; gap: 14px; justify-items: center; text-align: center; padding: 30px; position: relative; z-index: 2; }
.fatal h2 { font-weight: 750; font-size: 1.5rem; }
.fatal p { color: var(--ink-2); }
.empty { margin: 40px auto; display: grid; gap: 10px; justify-items: center; text-align: center; padding: 0 24px; max-width: 360px; }
.empty h3 { font-weight: 750; font-size: 1.25rem; }
.empty p { color: var(--ink-2); font-size: .9375rem; }
.empty .ds-ico, .deck-state .ds-ico { width: 64px; height: 64px; border-radius: 22px; display: grid; place-items: center; background: var(--gl-bg); box-shadow: var(--gl-shadow); margin-bottom: 6px; position: relative; }
.empty .ds-ico .ico, .deck-state .ds-ico .ico { width: 28px; height: 28px; }
.act-empty { padding: 30px 10px; text-align: center; color: var(--ink-3); }
.ptr { height: 0; overflow: hidden; display: grid; place-items: center; transition: height .35s var(--ease-out); }
.ptr .ptr-i { width: 36px; height: 36px; border-radius: 50%; background: var(--gl-bg); box-shadow: var(--gl-shadow); display: grid; place-items: center; color: var(--ink-2); }
.ptr.ready .ptr-i { color: var(--ink); transform: rotate(180deg); transition: transform .3s var(--settle); }
.ptr .ptr-i .ico { width: 18px; height: 18px; }

/* ---------- screens + the floating glass tab bar ---------- */
.screens { flex: 1; position: relative; overflow: hidden; }
.screen { position: absolute; inset: 0; display: flex; flex-direction: column; opacity: 0; transform: translateY(6px) scale(.992); pointer-events: none; visibility: hidden; transition: opacity .32s var(--ease-out), transform .45s var(--ease-out), visibility 0s .32s; }
.screen.on { opacity: 1; transform: none; pointer-events: auto; visibility: visible; transition-delay: 0s; }
.screen .scroll { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding-bottom: calc(var(--dock-h) + 18px); scrollbar-width: none; min-height: 0; }
.screen .scroll::-webkit-scrollbar { display: none; }
/* ---------- the tab bar: docked and quiet, like the system bars of the best apps ----------
   One translucent strip under a hairline. The current tab is simply full ink with a slightly firmer stroke; the others
   recede to grey. No pill, no lens, no bounce: a tap answers with a short dip in opacity. */
.tabbar { position: absolute; left: 0; right: 0; bottom: 0; z-index: 20; display: flex; height: calc(var(--tabbar-h) + var(--safe-b));
  padding: 0 max(4px, var(--safe-r)) var(--safe-b) max(4px, var(--safe-l)); background: var(--bar-bg);
  -webkit-backdrop-filter: blur(22px) saturate(160%); backdrop-filter: blur(22px) saturate(160%); box-shadow: inset 0 .5px 0 var(--line-2);
  -webkit-user-select: none; user-select: none; }
.tabbar button { position: relative; flex: 1; display: grid; place-items: center; align-content: center; gap: 3px; padding-top: 1px; color: var(--ink-3);
  font-size: .65625rem; font-weight: 550; letter-spacing: .01em; line-height: 1.1; transition: color .2s var(--ease-out), opacity .25s var(--ease-out); }
.tabbar button[aria-selected='true'] { color: var(--ink); }
.tabbar button .ico { width: 25px; height: 25px; stroke-width: 1.65; transition: stroke-width .2s var(--ease-out); }
.tabbar button[aria-selected='true'] .ico { stroke-width: 2.15; }
.tabbar button:active { opacity: .5; transition-duration: .05s; }
.tabbar .badge { position: absolute; top: 5px; left: calc(50% + 7px); right: auto; box-shadow: 0 0 0 2px var(--bar-solid); }
.tabbar .badge.dot-only { top: 7px; left: calc(50% + 9px); }
:root.lite .tabbar { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--bar-solid); }
@media (prefers-reduced-transparency: reduce) { .tabbar { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--bar-solid); } }

.topbar { display: flex; align-items: center; gap: 10px; padding: calc(10px + var(--safe-t)) 16px 8px; min-height: calc(56px + var(--safe-t)); }
.topbar h1 { font-size: 1.75rem; font-weight: 700; letter-spacing: -.03em; } .topbar .sp { flex: 1; }
.discover-head { display: flex; align-items: center; gap: 8px; padding: calc(8px + var(--safe-t)) 14px 6px 18px; min-height: calc(56px + var(--safe-t)); }
.discover-head .sp { flex: 1; }
.bell-btn .badge { position: absolute; top: 2px; right: 0; min-width: 17px; height: 17px; font-size: .625rem; box-shadow: 0 0 0 2px var(--bg); pointer-events: none; }
.bell-btn.ring .ico { animation: bell-ring 3.2s var(--ease-out) 1; transform-origin: 50% 12%; }
@keyframes bell-ring { 0%, 60%, 100% { transform: rotate(0); } 64% { transform: rotate(12deg); } 70% { transform: rotate(-10deg); } 76% { transform: rotate(6deg); } 82% { transform: rotate(-3deg); } }
.section-title { margin: 22px 20px 10px; }
.caps.section-title { color: var(--ink-3); }
.rows.mg { margin: 0 16px; }

/* ---------- swipe deck ---------- */
.deck-wrap { flex: 1; display: flex; flex-direction: column; min-height: 0; padding: 4px 12px calc(var(--dock-h) + 2px); position: relative; }
.deck { position: relative; flex: 1 1 auto; min-height: 0; width: 100%; max-width: 440px; margin: 0 auto; }
.dcard { position: absolute; inset: 0; border-radius: 34px; overflow: hidden; background: var(--s2); color: #fff; touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
  transform-origin: 50% 88%; will-change: transform; contain: layout paint style; cursor: grab;
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .7), 0 0 0 1px rgba(255, 255, 255, .09), inset 0 1px 0 rgba(255, 255, 255, .18); }
:root[data-theme='light'] .dcard { box-shadow: 0 24px 50px -20px rgba(20, 20, 30, .45), 0 0 0 1px rgba(0, 0, 0, .06); }
.dcard.dragging { cursor: grabbing; }
.dcard.under { pointer-events: none; will-change: auto; }
.dcard.skel { box-shadow: none; }
.dcard.gold-frame { box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .7), 0 0 0 2px var(--gold), 0 0 32px rgba(240, 190, 90, .25); }
.dcard.bump-l { animation: bump-l .38s var(--ease-out); } .dcard.bump-r { animation: bump-r .38s var(--ease-out); }
@keyframes bump-l { 40% { transform: translateX(10px) rotate(.8deg); } } @keyframes bump-r { 40% { transform: translateX(-10px) rotate(-.8deg); } }
.dc-media { position: absolute; inset: 0; background: #111; overflow: hidden; }
.dc-media.skel { border-radius: 0; }
.dc-slide { position: absolute; inset: 0; opacity: 0; transition: opacity .32s var(--ease-out); overflow: hidden; }
.dc-slide.on { opacity: 1; }
/* the blurred copy is rendered small and scaled up: the same softness for a fraction of the GPU work */
.dc-bg { position: absolute; left: 0; top: 0; width: 25%; height: 25%; transform: scale(4); transform-origin: 0 0; object-fit: cover; filter: blur(7px) saturate(1.2) brightness(.72); pointer-events: none; }
.dc-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: 50% 0; pointer-events: none; }
.dc-shade { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to top, rgba(0, 0, 0, .94) 0%, rgba(0, 0, 0, .7) 24%, rgba(0, 0, 0, 0) 52%), linear-gradient(to bottom, rgba(0, 0, 0, .4), rgba(0, 0, 0, 0) 20%); }
.dc-bars { position: absolute; top: 12px; left: 16px; right: 16px; display: flex; gap: 5px; z-index: 3; pointer-events: none; }
.dc-bars i { flex: 1; height: 3px; border-radius: 3px; background: rgba(255, 255, 255, .3); transition: background-color .3s, box-shadow .3s; }
.dc-bars i.on { background: #fff; box-shadow: 0 0 8px rgba(255, 255, 255, .6); }
.dc-top { position: absolute; top: 24px; left: 14px; right: 14px; display: flex; gap: 6px; align-items: center; z-index: 3; pointer-events: none; }
.dc-top .cbadges { margin-left: auto; display: flex; gap: 6px; pointer-events: auto; }
.netflag { padding: 5px 11px; border-radius: 999px; background: rgba(0, 0, 0, .45); color: #fff; font-size: .75rem; font-weight: 650; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22); }
/* badges on a moving photo are flat translucent (a blur behind a dragged card would be recomputed every frame) */
.cbadge { position: relative; display: inline-flex; align-items: center; gap: 5px; height: 32px; padding: 0 12px 0 10px; border-radius: 999px; background: rgba(20, 20, 22, .5); color: #fff; font-size: .75rem;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), inset 0 0 0 1px rgba(255, 255, 255, .14); transition: transform .5s var(--settle); }
.cbadge:active { transform: scale(.92); transition-duration: .08s; }
.cbadge .ico { width: 16px; height: 16px; stroke-width: 1.9; }
.cbadge b { font-size: .8125rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.cbadge.perfect { background: #fff; color: #0b0b0c; box-shadow: 0 0 22px rgba(255, 255, 255, .5), inset 0 1px 0 #fff; }
.compat-s { color: var(--ink); font-weight: 700; }
.dc-tint { position: absolute; inset: 0; z-index: 2; opacity: 0; pointer-events: none; will-change: opacity; }
.dc-tint.like { background: radial-gradient(90% 70% at 100% 50%, rgba(var(--ok-rgb), 0.55), transparent 70%); }
.dc-tint.pass { background: radial-gradient(90% 70% at 0% 50%, rgba(var(--danger-rgb), 0.55), transparent 70%); }
.stamp { position: absolute; top: 15%; z-index: 4; padding: 6px 14px; border-radius: 12px; font-weight: 800; font-size: 1.25rem; letter-spacing: .06em; opacity: 0; pointer-events: none; border: 3px solid currentColor; text-transform: uppercase; background: rgba(0, 0, 0, .2); will-change: opacity; }
.stamp.like { left: 18px; color: var(--ok); transform: rotate(-12deg); box-shadow: 0 0 24px rgba(var(--ok-rgb), 0.45), inset 0 0 14px rgba(var(--ok-rgb), 0.25); }
.stamp.pass { right: 18px; color: var(--danger); transform: rotate(12deg); box-shadow: 0 0 24px rgba(var(--danger-rgb), 0.45), inset 0 0 14px rgba(var(--danger-rgb), 0.25); }
.dc-info { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; display: grid; gap: 7px; padding: 40px 18px 18px; pointer-events: auto; cursor: pointer; }
.dc-name { display: flex; align-items: center; gap: 9px; min-width: 0; padding-right: 48px; }
.dc-name h2 { font-size: 1.85rem; font-weight: 700; letter-spacing: -.03em; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; text-shadow: 0 2px 16px rgba(0, 0, 0, .5); }
.dc-name .age { font-size: 1.6rem; color: rgba(255, 255, 255, .74); font-weight: 400; flex: none; letter-spacing: -.02em; }
.dc-name .vf { width: 21px; height: 21px; color: #fff; flex: none; --on-verified: #0b0b0c; }
.dc-name .onl, .onl-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--ok); flex: none; box-shadow: 0 0 0 2px rgba(0, 0, 0, .35), 0 0 12px var(--ok); }
.dc-name .zod { font-size: .75rem; color: rgba(255, 255, 255, .7); margin-left: auto; flex: none; }
.dc-meta { font-size: .9375rem; color: rgba(255, 255, 255, .8); font-weight: 450; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dc-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.dc-tags:empty { display: none; }
.dc-tags .tag { background: rgba(255, 255, 255, .16); color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); }
.dc-tags .tag.serious { background: #fff; color: #0b0b0c; }
.dc-chips { display: flex; gap: 6px; flex-wrap: nowrap; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent); mask-image: linear-gradient(90deg, #000 88%, transparent); }
.cchip { flex: none; font-size: .75rem; padding: 5px 11px; border-radius: 999px; background: rgba(255, 255, 255, .13); color: rgba(255, 255, 255, .88); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); }
.cchip.shared { background: rgba(255, 255, 255, .24); color: #fff; font-weight: 600; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .28); }
.dc-gifts { display: flex; gap: 6px; align-items: center; }
.dg { width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; background: radial-gradient(circle at 50% 38%, var(--r1), var(--r2)); flex: none; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 0 0 1px rgba(255, 255, 255, .12); transition: transform .5s var(--settle); }
.dg:active { transform: scale(.88); transition-duration: .08s; }
.dg img { width: 78%; height: 78%; object-fit: contain; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .3)); }
.dg.more { background: rgba(255, 255, 255, .16); color: #fff; font-size: .6875rem; font-weight: 700; }
.dc-bio { font-size: .875rem; color: rgba(255, 255, 255, .82); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.dc-more { position: absolute; right: 14px; top: 34px; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: rgba(255, 255, 255, .16); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), inset 0 0 0 1px rgba(255, 255, 255, .14); transition: transform .5s var(--settle), background-color .2s; }
.dc-more:active { transform: scale(.88); transition-duration: .08s; }
.dc-more .ico { width: 20px; height: 20px; }
.dcard.ad .dc-info h2 { font-size: 1.35rem; }
.dcard.ad .dc-info .btn { justify-self: start; }
.dcard.placeholder { display: grid; place-items: center; background: var(--s1); color: var(--ink); }
.dcard.placeholder .grid-bg { position: absolute; inset: 0; background-image: radial-gradient(var(--line-2) 1px, transparent 1px); background-size: 20px 20px; }
.dcard.placeholder .dc-info.ph-in { position: relative; inset: auto; background: none; text-align: center; justify-items: center; gap: 8px; padding: 24px; }
.dcard.placeholder h2 { font-size: 1.3rem; font-weight: 700; }
.dcard.placeholder .caps, .dcard.placeholder p { color: var(--ink-2); }
.adl { position: absolute; top: 18px; left: 16px; z-index: 3; background: rgba(0, 0, 0, .45); color: #fff; }
.deck-state { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 10px; text-align: center; padding: 20px; }
.deck-state h2 { font-size: 1.45rem; font-weight: 700; }
.deck-state p { max-width: 300px; }
.deck-state .btns { display: grid; gap: 10px; margin-top: 12px; width: min(300px, 100%); }
.gold-ring { box-shadow: 0 0 0 2px var(--gold), 0 0 24px rgba(240, 190, 90, .28) !important; }

/* buttons under the card: decisions are the only coloured controls */
.actions { flex: none; display: flex; justify-content: center; align-items: center; gap: 11px; padding: 14px 0 4px; min-height: 84px; transition: opacity .3s; }
.actions.off { visibility: hidden; }
.act { position: relative; width: 50px; height: 50px; border-radius: 50%; display: grid; place-items: center; flex: none; color: var(--ink); background: var(--gl-bg); -webkit-backdrop-filter: var(--bf); backdrop-filter: var(--bf); box-shadow: var(--gl-shadow);
  transition: transform .55s var(--settle), opacity .2s, box-shadow .3s, background-color .25s; }
.act::after { content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: var(--gl-edge); pointer-events: none; -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
.act:active, .act.pressed { transform: scale(.88); transition-duration: .08s, .2s, .3s, .25s; }
.act .ico { width: 23px; height: 23px; }
.act > span { display: none; }
.act:disabled { opacity: .35; pointer-events: none; }
.act.pass, .act.like { width: 66px; height: 66px; }
.act.pass .ico, .act.like .ico { width: 30px; height: 30px; stroke-width: 2.2; }
.act.pass { color: var(--danger); background: var(--danger-bg); box-shadow: inset 0 0 0 1px rgba(var(--danger-rgb), 0.38), 0 0 26px rgba(var(--danger-rgb), 0.16); }
.act.like { color: var(--ok); background: var(--ok-bg); box-shadow: inset 0 0 0 1px rgba(var(--ok-rgb), 0.4), 0 0 26px rgba(var(--ok-rgb), 0.18); }
.act.pass::after, .act.like::after { display: none; }
.act.super { color: var(--ink); } .act.super .ico { fill: none; stroke: currentColor; }
.act.rewind { color: var(--ink-2); } .act.rewind.locked { opacity: .55; }
.act.gift .ico { width: 24px; height: 24px; }
.actions[data-dir='pass'] .act.pass { transform: scale(1.12); box-shadow: inset 0 0 0 1.5px var(--danger), 0 0 34px rgba(var(--danger-rgb), 0.4); }
.actions[data-dir='like'] .act.like { transform: scale(1.12); box-shadow: inset 0 0 0 1.5px var(--ok), 0 0 34px rgba(var(--ok-rgb), 0.42); }
.act-tip { position: fixed; z-index: 9200; transform: translate(-50%, -90%) scale(.9); opacity: 0; padding: 6px 12px; border-radius: 12px; background: var(--gl-bg-2); -webkit-backdrop-filter: var(--bf); backdrop-filter: var(--bf); box-shadow: var(--gl-shadow); color: var(--ink); font-size: .75rem; font-weight: 650; white-space: nowrap; pointer-events: none; transition: opacity .16s, transform .3s var(--settle); }
.act-tip.on { opacity: 1; transform: translate(-50%, -100%) scale(1); }
@media (max-height: 700px) { .dc-chips, .dc-tags { display: none; } .dc-name h2 { font-size: 1.6rem; } .actions { min-height: 78px; padding-top: 10px; } .act.pass, .act.like { width: 60px; height: 60px; } .act { width: 46px; height: 46px; } }
@media (max-height: 620px) { .dc-gifts { display: none; } }

/* coach marks: a tap anywhere goes on, the card always fits the screen */
.coach { position: fixed; inset: 0; z-index: 7000; opacity: 0; transition: opacity .3s; -webkit-tap-highlight-color: transparent; }
.coach.on { opacity: 1; } .coach.out { opacity: 0; pointer-events: none; }
.coach-hole { position: absolute; border-radius: 30px; box-shadow: 0 0 0 200vmax rgba(0, 0, 0, .7), inset 0 0 0 1.5px rgba(255, 255, 255, .5); transition: left .45s var(--ease-out), top .45s var(--ease-out), width .45s var(--ease-out), height .45s var(--ease-out); pointer-events: none; }
.coach-hand { position: absolute; width: 44px; height: 44px; border-radius: 50%; background: rgba(255, 255, 255, .92); box-shadow: 0 0 0 10px rgba(255, 255, 255, .2), 0 0 30px rgba(255, 255, 255, .4); pointer-events: none; transition: left .45s var(--ease-out), top .45s var(--ease-out); will-change: transform; }
.coach-hand.h { animation: hand-h 1.8s ease-in-out infinite; } .coach-hand.lr { animation: hand-lr 2.2s ease-in-out infinite; } .coach-hand.tap { animation: hand-tap 1.3s ease-in-out infinite; }
@keyframes hand-h { 0%, 100% { transform: translateX(50px); } 50% { transform: translateX(-50px); } }
@keyframes hand-lr { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(70px) rotate(8deg); } 75% { transform: translateX(-70px) rotate(-8deg); } }
@keyframes hand-tap { 50% { transform: scale(.8); } }
.coach-card { position: absolute; left: 16px; right: 16px; max-width: 400px; margin: 0 auto; padding: 16px 16px 14px; border-radius: 26px; background: var(--sheet-solid); box-shadow: inset 0 1px 0 var(--gl-hi), inset 0 0 0 1px var(--line), var(--shadow-lg); display: grid; gap: 6px; transition: top .45s var(--ease-out); }
.coach-card b { font-size: 1.05rem; } .coach-card p { font-size: .875rem; color: var(--ink-2); }
.coach-card .cc-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 6px; }
.coach-card .cc-dots { display: flex; gap: 5px; } .coach-card .cc-dots i { width: 6px; height: 6px; border-radius: 3px; background: var(--line-2); transition: width .35s var(--ease-out), background-color .3s; } .coach-card .cc-dots i.on { width: 18px; background: var(--ink); }
.coach-card .cc-btns { display: flex; gap: 8px; align-items: center; }

/* super / limit / compat sheets */
.super-head { display: flex; gap: 14px; align-items: flex-start; }
.sh-ico { width: 48px; height: 48px; border-radius: 16px; display: grid; place-items: center; flex: none; background: var(--gold-bg); color: var(--gold); box-shadow: inset 0 0 0 1px rgba(var(--gold-rgb), 0.34); }
.sh-ico .ico { width: 24px; height: 24px; }
.sh-ico.boost, .sh-ico.date, .sh-ico.q { background: var(--chip); color: var(--ink); box-shadow: none; }
.limit-hero { display: grid; justify-items: center; text-align: center; gap: 6px; padding-top: 6px; }
.lh-ico { width: 60px; height: 60px; border-radius: 20px; display: grid; place-items: center; background: var(--gl-bg); box-shadow: var(--gl-shadow); margin-bottom: 4px; }
.lh-ico .ico { width: 28px; height: 28px; }
.limit-clock { font-size: 2.4rem; font-weight: 600; letter-spacing: -.03em; margin: 6px 0 4px; font-variant-numeric: tabular-nums; }
.compat-sheet .cx-card { margin-top: 12px; padding: 16px; border-radius: 22px; background: var(--s1); box-shadow: inset 0 0 0 1px var(--line); transition: box-shadow .4s; }
.compat-sheet .cx-card.focus { box-shadow: inset 0 0 0 1.5px var(--ink), 0 0 30px rgba(255, 255, 255, .06); }
.cx-h { display: flex; align-items: center; gap: 10px; }
.cx-h b { flex: 1; font-size: .9375rem; }
.cx-e { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 10px; background: var(--chip); } .cx-e .ico { width: 18px; height: 18px; }
.cx-p { font-weight: 750; font-size: 1.25rem; font-variant-numeric: tabular-nums; }
.cx-bar { display: block; height: 6px; margin-top: 12px; border-radius: 6px; background: var(--s3); overflow: hidden; }
.cx-bar i { display: block; height: 100%; background: var(--pri); border-radius: 6px; transform-origin: left; animation: grow-x .9s var(--ease-out); box-shadow: 0 0 12px rgba(255, 255, 255, .4); }
@keyframes grow-x { from { transform: scaleX(0); } }
.cx-rs { display: grid; gap: 9px; margin-top: 14px; }
.cx-r { display: flex; gap: 10px; align-items: center; font-size: .875rem; color: var(--ink-2); }
.cx-r .ico { width: 18px; height: 18px; color: var(--ink); }
.cx-z { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 12px; }
.cx-sign { padding: 8px 16px; border-radius: 14px; background: var(--chip); font-weight: 650; font-size: .9375rem; }
.cx-x { color: var(--ink-3); font-weight: 700; }

/* match: a night with two photos and a glass heart */
.match { position: fixed; inset: 0; z-index: 6100; display: grid; place-items: center; align-content: center; gap: 14px; padding: 24px; background: rgba(6, 6, 7, .9); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); color: #fff; opacity: 0; transition: opacity .45s var(--ease-out); overflow: hidden; }
:root[data-theme='light'] .match { background: rgba(6, 6, 7, .88); }
.match.on { opacity: 1; } .match.out { opacity: 0; }
.match .pair { position: relative; display: flex; align-items: center; margin-bottom: 8px; }
.match .pair img, .match .pair .anon-av { width: 124px; height: 124px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 3px rgba(255, 255, 255, .9), 0 0 40px rgba(255, 255, 255, .25), var(--shadow-lg); }
.match .pair .p1 { transform: rotate(-6deg); animation: pair-l .8s var(--settle-soft) backwards; }
.match .pair .p2 { margin-left: -28px; transform: rotate(6deg); animation: pair-r .8s var(--settle-soft) backwards; }
@keyframes pair-l { from { transform: translateX(-90px) rotate(-18deg); opacity: 0; } }
@keyframes pair-r { from { transform: translateX(90px) rotate(18deg); opacity: 0; } }
.match .heart { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 54px; height: 54px; border-radius: 50%; background: var(--gl-bg-2); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); display: grid; place-items: center; color: #fff; box-shadow: var(--gl-shadow), 0 0 30px rgba(255, 255, 255, .35); animation: heart-pop .8s var(--settle) .3s backwards; z-index: 2; }
.match .heart .ico { width: 24px; height: 24px; }
@keyframes heart-pop { from { transform: translate(-50%, -50%) scale(0); } }
.match h1 { font-weight: 750; font-size: 2.2rem; text-align: center; letter-spacing: -.03em; animation: fade-up .7s var(--ease-out) .35s backwards; }
.match p { color: rgba(255, 255, 255, .72); text-align: center; animation: fade-up .7s var(--ease-out) .45s backwards; }
.match .btns { display: grid; gap: 10px; width: 100%; max-width: 320px; margin-top: 12px; animation: fade-up .7s var(--ease-out) .55s backwards; }
.match .btn.dim { color: rgba(255, 255, 255, .7); }
.match .match-x { position: absolute; top: calc(10px + var(--safe-t)); right: 12px; color: #fff; z-index: 3; }
.anon-av { display: grid; place-items: center; background: var(--s3); color: var(--ink-3); }

/* ---------- top ---------- */
.top-ctl { display: grid; gap: 12px; padding: 4px 16px 14px; }
.top-hero { position: relative; margin: 0 14px; aspect-ratio: 16 / 12.5; border-radius: 32px; overflow: hidden; background: var(--s2); color: #fff; box-shadow: 0 24px 50px -20px rgba(0, 0, 0, .7), 0 0 0 1px rgba(255, 255, 255, .09), inset 0 1px 0 rgba(255, 255, 255, .18); }
.top-hero img { width: 100%; height: 100%; object-fit: cover; }
.top-hero .shade, .tp .shade { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0, 0, 0, .9), rgba(0, 0, 0, .35) 42%, transparent 66%), linear-gradient(to bottom, rgba(0, 0, 0, .35), transparent 30%); }
.top-hero .rk { position: absolute; top: 12px; left: 18px; font-weight: 800; font-size: 2.6rem; letter-spacing: -.04em; color: #fff; text-shadow: 0 2px 20px rgba(0, 0, 0, .55); line-height: 1; }
.top-hero .inf { position: absolute; left: 18px; right: 14px; bottom: 16px; display: flex; align-items: flex-end; gap: 8px; color: #fff; }
.top-hero .inf h3 { font-size: 1.5rem; font-weight: 700; letter-spacing: -.03em; }
.top-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 10px 14px 0; }
.tp { position: relative; aspect-ratio: 3 / 3.5; border-radius: 26px; overflow: hidden; background: var(--s2); color: #fff; box-shadow: 0 0 0 1px rgba(255, 255, 255, .08), inset 0 1px 0 rgba(255, 255, 255, .16); }
.tp img { width: 100%; height: 100%; object-fit: cover; }
.tp .rk { position: absolute; top: 8px; left: 14px; font-weight: 800; font-size: 1.8rem; color: #fff; text-shadow: 0 2px 14px rgba(0, 0, 0, .55); letter-spacing: -.04em; }
.tp .inf { position: absolute; left: 12px; right: 10px; bottom: 11px; color: #fff; }
.tp .inf b { font-size: 1rem; font-weight: 650; }
.tp-gifts, .tp .tp-gifts { display: inline-flex; gap: 2px; max-width: 100%; overflow: hidden; vertical-align: middle; }
.tp-gifts img, .lb-row .nm .tp-gifts img { width: 18px !important; height: 18px !important; border-radius: 0 !important; box-shadow: none !important; flex: none; object-fit: contain; filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .4)); }
.on-photo .stat, .on-photo .stat .ico { color: rgba(255, 255, 255, .92); }
.lb { margin: 16px 14px 0; background: var(--s1); border-radius: 26px; box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; }
.lb-row { position: relative; display: flex; align-items: center; gap: 12px; padding: 11px 14px; }
.lb-row + .lb-row::before { content: ''; position: absolute; left: 92px; right: 0; top: 0; height: 1px; background: var(--line); }
.lb-row .rk { width: 26px; font-weight: 700; font-size: 1rem; color: var(--ink-3); text-align: center; flex: none; font-variant-numeric: tabular-nums; }
.lb-row img, .lb-row .ph { width: 50px; height: 50px; border-radius: 50%; object-fit: cover; flex: none; background: var(--s3); }
.lb-row .nm { display: grid; gap: 1px; min-width: 0; grid-template-columns: minmax(0, 1fr); text-align: left; }
.lb-row .nm b { font-size: .9375rem; font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: flex; align-items: center; gap: 6px; min-width: 0; }
.lb-row .nm > span { font-size: .75rem; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stat { display: inline-flex; align-items: center; gap: 4px; font-size: .75rem; font-variant-numeric: tabular-nums; }
.stat .ico { width: 14px; height: 14px; }
.stat.gv { color: var(--gold); font-weight: 700; }
.heart-btn { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .16); color: #fff; flex: none; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), inset 0 0 0 1px rgba(255, 255, 255, .14); transition: transform .55s var(--settle), background-color .25s, color .25s; }
.heart-btn:active { transform: scale(.85); transition-duration: .08s; }
.lb-row .heart-btn, .pv-name .heart-btn { background: var(--chip); color: var(--ink-3); box-shadow: none; }
.heart-btn[aria-pressed='true'] { color: #0b0b0c; background: #fff; box-shadow: 0 0 22px rgba(255, 255, 255, .45); }
.heart-btn[aria-pressed='true'] .ico { fill: currentColor; }
.lb-row .heart-btn[aria-pressed='true'], .pv-name .heart-btn[aria-pressed='true'] { color: var(--on-pri); background: var(--pri); }
.heart-btn.pop { animation: pop .5s var(--settle); }
.banner { width: calc(100% - 28px); margin: 12px 14px; display: flex; align-items: center; gap: 13px; padding: 12px 14px; border-radius: 24px; background: var(--s1); box-shadow: inset 0 0 0 1px var(--line); text-align: left; position: relative; overflow: hidden; transition: transform .55s var(--settle); }
.banner:active { transform: scale(.98); transition-duration: .1s; }
.banner img { width: 56px; height: 56px; border-radius: 16px; object-fit: cover; flex: none; }
.banner .bt { flex: 1; min-width: 0; display: grid; gap: 2px; grid-template-columns: minmax(0, 1fr); }
.banner .bt b { font-size: .9375rem; } .banner .bt span { font-size: .8125rem; color: var(--ink-3); }
.banner.placeholder { background: transparent; box-shadow: none; border: 1px dashed var(--line-2); }
.banner .ph-ico { width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; background: var(--chip); color: var(--ink-3); flex: none; }
.banner .adl { position: static; margin-left: auto; background: none; color: var(--ink-3); }

/* ---------- Ищу тебя ---------- */
.lf-intro { padding: 2px 20px 14px; color: var(--ink-2); font-size: .9375rem; }
.lf-secbar { flex: none; padding: 0 16px 8px; }
.lf-secbar:empty { display: none; }
.lf-secs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 2px 16px; }
.lf-secs::-webkit-scrollbar { display: none; }
.lf-secs .chip { flex: none; }
.lf-secs .chip .ico, .lf-sec-one .ico { width: 15px; height: 15px; }
.lf-sec-one { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: var(--chip); font-size: .8125rem; font-weight: 600; }
.feed { display: grid; gap: 16px; padding: 0 14px; }
.post { display: flex; gap: 10px; animation: rise-in .55s var(--ease-out) backwards; animation-delay: calc(var(--i, 0) * 40ms); min-width: 0; }
.post > div { min-width: 0; flex: 1; }
.post > button, .post > .av { flex: none; align-self: flex-start; }
.post .av, .av { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; flex: none; background: var(--s3); }
.post .head { display: flex; align-items: center; gap: 6px; margin-bottom: 5px; min-width: 0; }
.post .head b { font-size: .875rem; font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.post .bubble { position: relative; background: var(--gl-bg); box-shadow: var(--gl-shadow); border-radius: 6px 22px 22px 22px; padding: 12px 16px; font-size: .9375rem; line-height: 1.45; white-space: pre-wrap; word-break: break-word; }
.post.mine .bubble { border-radius: 22px 6px 22px 22px; }
.post.pinned .bubble { box-shadow: var(--gl-shadow), 0 0 0 1.5px var(--gold), 0 0 26px rgba(240, 190, 90, .14); }
.post .pact { display: flex; align-items: center; gap: 8px; margin-top: 8px; flex-wrap: wrap; row-gap: 6px; min-width: 0; }
.post .pact .itsme { max-width: 100%; }
.itsme { display: inline-flex; align-items: center; gap: 7px; min-height: 36px; padding: 0 16px; border-radius: 999px; background: var(--pri); color: var(--on-pri); font-weight: 650; font-size: .8125rem; transition: transform .55s var(--settle), background-color .25s; box-shadow: var(--glow); }
.itsme:active { transform: scale(.94); transition-duration: .08s; }
.itsme[aria-pressed='true'], .itsme.wait { background: var(--chip); color: var(--ink-2); box-shadow: none; }
.itsme.ok { background: var(--ok); color: var(--ok-ink); box-shadow: 0 0 24px rgba(var(--ok-rgb), 0.3); }
.itsme.no { color: var(--ink-3); background: transparent; box-shadow: inset 0 0 0 1px var(--line); }
.itsme .ico { width: 16px; height: 16px; }
.pact .btn .badge { margin-left: 4px; background: var(--on-pri); color: var(--pri); }
.pact .btn.xs .ico { width: 16px; height: 16px; }
.anon-av .ico { width: 20px; height: 20px; }
.fab { position: absolute; right: 16px; bottom: calc(var(--dock-h) + 8px); display: inline-flex; align-items: center; gap: 8px; min-height: 52px; padding: 0 22px; border-radius: 999px; background: var(--pri); color: var(--on-pri); font-weight: 650; box-shadow: var(--glow), 0 14px 30px -10px rgba(0, 0, 0, .6), inset 0 1px 0 rgba(255, 255, 255, .6);
  transition: transform .55s var(--settle), opacity .3s; z-index: 5; overflow: hidden; }
.fab:active { transform: scale(.94); transition-duration: .08s; }
.fab.away { transform: translateY(120px); opacity: 0; }
.lf-more { display: grid; place-items: center; padding: 18px; }
.lf-meta { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 6px; min-height: 18px; }
.lf-meta .err { color: var(--danger); }
.btn.is-disabled-soft { opacity: .45; }
.claim-post { margin: 4px 0 0; padding: 14px 16px; border-radius: 6px 22px 22px 22px; background: var(--gl-bg); box-shadow: var(--gl-shadow); font-size: .9375rem; white-space: pre-wrap; quotes: none; }
.claim-card { display: flex; gap: 12px; padding: 12px; border-radius: 26px; background: var(--s1); box-shadow: inset 0 0 0 1px var(--line); margin-bottom: 10px; animation: rise-in .5s var(--ease-out) backwards; }
.cc-ph { width: 86px; height: 112px; border-radius: 18px; overflow: hidden; flex: none; background: var(--s2); display: grid; place-items: center; }
.cc-ph img { width: 100%; height: 100%; object-fit: cover; }
.cc-body { flex: 1; min-width: 0; display: grid; gap: 3px; align-content: start; grid-template-columns: minmax(0, 1fr); }
.cc-name { display: flex; align-items: baseline; gap: 6px; text-align: left; min-width: 0; }
.cc-name b { font-size: 1.0625rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cc-name .age { color: var(--ink-2); }
.cc-name .vf-ico { width: 16px; height: 16px; align-self: center; }
.claim-card .sheet-actions { margin-top: 8px; gap: 8px; }
.claim-card .sheet-actions .btn { min-height: 42px; font-size: .875rem; padding: 0 12px; white-space: nowrap; }
.claim-card .sheet-actions .btn .ico { width: 17px; height: 17px; }
.claim-st { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; font-size: .875rem; font-weight: 650; color: var(--ink-3); }
.claim-st.accepted { color: var(--ok); }
.claim-st .ico { width: 16px; height: 16px; }

/* reactions (Telegram model: small pills under a message, one reaction per person) */
.rxs, .prx { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.rx { display: inline-flex; align-items: center; gap: 4px; height: 32px; padding: 0 11px; border-radius: 99px; background: var(--chip); font-size: .9375rem; line-height: 1; transition: transform .5s var(--settle), background-color .25s, box-shadow .25s; }
.rx:active { transform: scale(.88); transition-duration: .08s; }
.rx i { font-style: normal; font-size: .75rem; font-weight: 700; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.rx.mine { background: var(--chip-2); box-shadow: inset 0 0 0 1.5px var(--ink); }
.rx.mine i { color: var(--ink); }
.rx.add { padding: 0 8px; color: var(--ink-3); } .rx.add .ico { width: 17px; height: 17px; }
.rx.pop { animation: rx-pop .5s var(--settle); }
@keyframes rx-pop { 0% { transform: scale(.6); } 60% { transform: scale(1.2); } }
.pcm { display: flex; align-items: center; gap: 8px; width: 100%; margin-top: 8px; padding: 0 14px; min-height: 40px; border-radius: 16px; background: var(--chip); color: var(--ink); font-size: .8125rem; font-weight: 600; text-align: left; transition: background-color .2s, transform .55s var(--settle); }
.pcm:active { transform: scale(.985); background: var(--chip-2); transition-duration: .06s; }
.pcm .ico { width: 18px; height: 18px; color: var(--ink-2); }
.pcm .pcm-t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pcm .pcm-n { font-variant-numeric: tabular-nums; color: var(--ink-2); }
.pcm .chev { margin-left: auto; }

/* the discussion page of a post */
.thread-page .page-body { padding: 4px 12px 8px; display: flex; flex-direction: column; }
.th-post { padding: 6px 2px 4px; }
.th-post .post { animation: none; }
.th-sep { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 14px 0 10px; font-size: .75rem; font-weight: 650; color: var(--ink-3); }
.th-sep::before, .th-sep::after { content: ''; height: 1px; background: var(--line); flex: 1; }
.cm { display: flex; gap: 8px; margin-top: 8px; align-items: flex-end; min-width: 0; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.cm.g-cont { margin-top: 2px; }
.cm > button.cm-av, .cm > .cm-av { flex: none; width: 34px; height: 34px; }
.cm .cm-av img, .cm .cm-av .anon-av { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; }
.cm.g-cont .cm-av { visibility: hidden; }
.cm .cb { position: relative; max-width: min(84%, 420px); min-width: 0; padding: 8px 13px 7px; border-radius: 6px 20px 20px 20px; background: var(--gl-bg); box-shadow: var(--gl-shadow); transition: transform .5s var(--settle); }
.cm.mine { flex-direction: row-reverse; }
.cm.mine .cb { background: var(--pri); color: var(--on-pri); border-radius: 20px 6px 20px 20px; box-shadow: var(--glow); }
.cm.g-cont .cb { border-top-left-radius: 20px; } .cm.mine.g-cont .cb { border-top-right-radius: 20px; }
.cm .cb:active { transform: scale(.985); transition-duration: .06s; }
.cm .cn { display: flex; align-items: center; gap: 6px; font-size: .75rem; font-weight: 700; margin-bottom: 2px; color: var(--ink-2); }
.cm .cn .tag { height: 18px; padding: 0 6px; font-size: .625rem; }
.cm.mine .cn { display: none; }
.cm .ct { font-size: .9375rem; line-height: 1.38; white-space: pre-wrap; overflow-wrap: anywhere; }
.cm .cmeta { display: flex; justify-content: flex-end; gap: 6px; margin-top: 2px; font-size: .6875rem; opacity: .6; font-variant-numeric: tabular-nums; }
.cm .rq { margin: 1px 0 5px; }
.cm .rxs { margin-top: 5px; }
.cm.mine .rx { background: rgba(127, 127, 127, .22); } .cm.mine .rx i { color: inherit; }
.cm.mine .rx.mine { box-shadow: inset 0 0 0 1.5px currentColor; }
.cm.flash .cb { animation: flash 1.2s var(--ease-out); }
.cm.gone { opacity: 0; transform: scale(.94); transition: .25s; }
.thread-page .page-foot { padding: 0; display: block; }
.th-comp { padding: 8px 12px calc(10px + var(--safe-b)); background: rgba(var(--bg-rgb), 0.7); -webkit-backdrop-filter: var(--bf); backdrop-filter: var(--bf); }
.th-off { padding: 14px; text-align: center; color: var(--ink-3); font-size: .875rem; }

/* ---------- chats list ---------- */
.chat-list-title { display: flex; align-items: center; gap: 8px; padding: 14px 20px 8px; }
.strip { display: flex; gap: 14px; padding: 6px 20px 6px; overflow-x: auto; scrollbar-width: none; }
.strip::-webkit-scrollbar { display: none; }
.liker { display: grid; justify-items: center; gap: 7px; font-size: .75rem; color: var(--ink-2); flex: none; font-weight: 550; max-width: 72px; }
.liker > span:last-child { max-width: 72px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.liker .ring { position: relative; width: 68px; height: 68px; border-radius: 50%; padding: 3px; background: linear-gradient(140deg, rgba(255, 255, 255, .9), rgba(255, 255, 255, .25) 40%, rgba(255, 255, 255, .6)); box-shadow: 0 0 22px rgba(255, 255, 255, .22); display: block; transition: transform .55s var(--settle); }
.liker:active .ring { transform: scale(.92); transition-duration: .08s; }
.liker.super .ring { background: linear-gradient(140deg, #fbe2a0, #e6ad42 55%, #fff1c4); box-shadow: 0 0 24px rgba(240, 190, 90, .4); }
.liker .ring img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2.5px var(--bg); }
.liker .ring .blur { display: block; width: 100%; height: 100%; border-radius: 50%; background: var(--s3); filter: blur(2px); box-shadow: 0 0 0 2.5px var(--bg); }
.liker .k { position: absolute; right: -2px; bottom: -2px; width: 24px; height: 24px; border-radius: 50%; background: var(--pri); color: var(--on-pri); display: grid; place-items: center; box-shadow: 0 0 0 2.5px var(--bg); z-index: 1; }
.liker.super .k { background: linear-gradient(180deg, #fbe2a0, #e6ad42); color: var(--gold-ink); }
.liker .k .ico { width: 13px; height: 13px; }
.conv { position: relative; display: flex; gap: 14px; align-items: center; width: 100%; padding: 10px 20px; text-align: left; transition: background-color .2s, transform .55s var(--settle); }
.conv + .conv::before { content: ''; position: absolute; left: 88px; right: 0; top: 0; height: 1px; background: var(--line); }
.conv:active { background: var(--chip); transition-duration: .05s; }
.conv .av { width: 56px; height: 56px; position: relative; flex: none; }
.conv .av img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; background: var(--s3); }
.conv .av .on { position: absolute; right: 1px; bottom: 1px; width: 14px; height: 14px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 2.5px var(--bg), 0 0 10px var(--ok); }
.conv .ct { flex: 1; min-width: 0; display: grid; gap: 2px; grid-template-columns: minmax(0, 1fr); }
.conv .l1 { display: flex; align-items: center; gap: 6px; min-width: 0; }
.conv .l1 b { font-size: 1rem; font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.conv .tm { margin-left: auto; font-size: .75rem; color: var(--ink-3); flex: none; font-variant-numeric: tabular-nums; }
.conv .l2 { display: flex; align-items: center; gap: 8px; min-width: 0; }
.conv .pv { flex: 1; min-width: 0; font-size: .875rem; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.conv .pv.hi { color: var(--ink-2); }
.conv.unread .pv { color: var(--ink); font-weight: 550; }
.conv.unread .tm { color: var(--ink); }
.vf-ico, .vf { width: 16px; height: 16px; flex: none; --on-verified: var(--bg); }

/* ---------- activity ---------- */
.notif-page .page-body { padding-top: 0; }
.notif-seg { position: sticky; top: 0; z-index: 3; padding: 4px 0 12px; background: transparent; }
.nt-dot { position: absolute; top: 10px; right: 18%; width: 8px; height: 8px; border-radius: 50%; background: var(--pri); box-shadow: 0 0 0 2px var(--bg); }
.act-item { position: relative; display: flex; gap: 13px; align-items: center; width: 100%; padding: 12px 20px; text-align: left; transition: background-color .2s; }
.act-item:active { background: var(--chip); transition-duration: .05s; }
.act-item.unread { background: linear-gradient(90deg, var(--chip), transparent); }
.act-item .av { width: 48px; height: 48px; position: relative; flex: none; }
.act-item .av img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.act-item .av .sys { width: 100%; height: 100%; border-radius: 50%; background: var(--chip); display: grid; place-items: center; color: var(--ink-2); }
.act-item .av .k { position: absolute; right: -3px; bottom: -3px; width: 22px; height: 22px; border-radius: 50%; background: var(--pri); color: var(--on-pri); display: grid; place-items: center; box-shadow: 0 0 0 2px var(--bg); }
.act-item .av .k .ico { width: 12px; height: 12px; }
.act-item .tx { flex: 1; min-width: 0; font-size: .9375rem; display: grid; gap: 2px; grid-template-columns: minmax(0, 1fr); }
.act-item .tx q { display: block; color: var(--ink-2); font-size: .8125rem; quotes: '«' '»'; }
.act-item .tx small { color: var(--ink-3); font-size: .75rem; }
.act-item .act-gift { width: 42px; height: 42px; object-fit: contain; }
.unread-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--pri); flex: none; box-shadow: 0 0 10px rgba(255, 255, 255, .5); }
.act-hint { display: block; margin-top: 3px; font-size: .8125rem; color: var(--ink-2); line-height: 1.4; }
.notif-page .act-item { margin: 0 -16px; width: calc(100% + 32px); }
.rec-teaser { display: flex; align-items: center; gap: 12px; width: 100%; margin: 2px 0 12px; padding: 12px 14px; border-radius: 22px; text-align: left; background: var(--gl-bg); box-shadow: var(--gl-shadow); transition: transform .55s var(--settle); }
.rec-teaser:active { transform: scale(.98); transition-duration: .08s; }
.rec-teaser .rt-ic { width: 40px; height: 40px; border-radius: 14px; display: grid; place-items: center; background: var(--pri); color: var(--on-pri); flex: none; box-shadow: var(--glow); }
.rec-teaser > span:nth-child(2) { flex: 1; min-width: 0; display: grid; gap: 1px; grid-template-columns: minmax(0, 1fr); }
.rec-teaser b { font-size: .9375rem; } .rec-teaser span span { font-size: .8125rem; color: var(--ink-2); }
.rec-intro { display: flex; gap: 8px; align-items: center; margin: 0 0 12px; }
.rec-intro .ico { width: 16px; height: 16px; }
.rec-card { border-radius: 30px; overflow: hidden; background: var(--s1); box-shadow: inset 0 0 0 1px var(--line), var(--shadow-md); margin-bottom: 14px; animation: rise-in .5s var(--ease-out) backwards; }
.rec-card.skel { background: var(--s2); box-shadow: none; }
.rc-media { position: relative; display: block; width: 100%; aspect-ratio: 4 / 4.2; max-height: 60vh; overflow: hidden; background: #111; }
.rc-bg { position: absolute; left: 0; top: 0; width: 25%; height: 25%; transform: scale(4); transform-origin: 0 0; object-fit: cover; filter: blur(7px) brightness(.75); }
.rc-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.rc-score { position: absolute; left: 12px; top: 12px; display: grid; justify-items: start; gap: 0; padding: 7px 13px; border-radius: 16px; background: #fff; color: #0b0b0c; box-shadow: 0 0 26px rgba(255, 255, 255, .35); }
.rc-score span { font-size: .625rem; text-transform: uppercase; letter-spacing: .08em; font-weight: 700; opacity: .65; }
.rc-score b { font-size: 1.4rem; line-height: 1.1; font-weight: 750; letter-spacing: -.03em; }
.rc-body { padding: 14px 16px 16px; display: grid; gap: 4px; }
.rc-name { display: flex; align-items: baseline; gap: 7px; min-width: 0; }
.rc-name h3 { font-size: 1.3rem; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rc-name .age { color: var(--ink-2); font-size: 1.05rem; }
.rc-name .vf-ico { width: 17px; height: 17px; align-self: center; }
.rc-badges { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
.rc-acts { display: flex; gap: 8px; margin-top: 12px; }
.rc-acts .btn { flex: 1; min-width: 0; }
.rc-acts .btn.line:first-child { flex: 0 0 48px; padding: 0; color: var(--danger); box-shadow: inset 0 0 0 1px rgba(var(--danger-rgb), 0.4); }
.rec-gold { display: flex; align-items: center; gap: 12px; width: 100%; padding: 14px; border-radius: 22px; text-align: left; position: relative; overflow: hidden; background: linear-gradient(120deg, rgba(240, 190, 90, .22), rgba(240, 190, 90, .06)); box-shadow: inset 0 0 0 1px rgba(240, 190, 90, .35); color: var(--ink); }
.rec-gold .rg-ic { width: 42px; height: 42px; border-radius: 14px; display: grid; place-items: center; background: linear-gradient(180deg, #fbe2a0, #e6ad42); color: var(--gold-ink); flex: none; }
.rec-gold > span:nth-child(2) { flex: 1; min-width: 0; display: grid; gap: 1px; grid-template-columns: minmax(0, 1fr); }
.rec-gold span span { font-size: .8125rem; color: var(--ink-2); }

/* ---------- chat: a glass messenger ---------- */
.chat2 { background: var(--bg); --dock: 84px; }
.chat2 .page-head { padding-bottom: 6px; gap: 8px; }
.chat2 .page-body { padding: 0; display: flex; flex-direction: column; position: relative; overflow: hidden; }
.page-head .who { flex: 1; min-width: 0; height: 48px; display: flex; align-items: center; gap: 10px; text-align: left; padding: 0 16px 0 5px; border-radius: 24px; background: var(--gl-bg); -webkit-backdrop-filter: var(--bf); backdrop-filter: var(--bf); box-shadow: var(--gl-shadow); position: relative; transition: transform .55s var(--settle); }
.page-head .who::after { content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: var(--gl-edge); pointer-events: none; -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
.page-head .who:active { transform: scale(.975); transition-duration: .08s; }
.page-head .who img, .page-head .who .anon-av { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; background: var(--s3); flex: none; }
.page-head .wt { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr); line-height: 1.15; }
.page-head .wt b { font-size: .9375rem; font-weight: 650; display: flex; align-items: center; gap: 5px; min-width: 0; }
.page-head .wt b .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.page-head .wt b .vf-ico { flex: none; }
.page-head .wt b .streak { flex: none; font-size: .6875rem; font-weight: 750; padding: 1px 7px; border-radius: 99px; background: var(--chip-2); color: var(--ink); display: inline-flex; align-items: center; gap: 3px; }
.page-head .wt b .streak .ico { width: 12px; height: 12px; }
.page-head .ws { font-size: .75rem; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-flex; align-items: center; gap: 4px; }
.page-head .ws.on { color: var(--ok); }
.page-head .ws.typing-t { color: var(--ink-2); }
.tdots.sm i { width: 4px; height: 4px; background: currentColor; }
.msgs2 { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; overflow-anchor: none; scrollbar-width: none; }
.msgs2::-webkit-scrollbar { display: none; }
.msgs-in { min-height: 100%; display: flex; flex-direction: column; justify-content: flex-end; padding: 6px 12px calc(var(--dock) + 8px); }
.mlist { display: flex; flex-direction: column; }
.mload { display: grid; place-items: center; padding: 30px 0; } .mload.top { padding: 10px 0; }
.chat-dock { position: absolute; left: 0; right: 0; bottom: 0; z-index: 8; display: flex; flex-direction: column; pointer-events: none; }
.chat-dock > * { pointer-events: auto; }
.chat-intro2 { text-align: center; padding: 14px 10px 18px; display: grid; justify-items: center; gap: 6px; }
.ci-ph { position: relative; }
.ci-ph img { width: 92px; height: 92px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 3px rgba(255, 255, 255, .85), 0 0 34px rgba(255, 255, 255, .2), var(--shadow-md); }
:root[data-theme='light'] .ci-ph img { box-shadow: 0 0 0 3px #fff, 0 10px 30px rgba(20, 20, 30, .2); }
.ci-heart { position: absolute; right: -4px; bottom: -4px; width: 32px; height: 32px; border-radius: 50%; background: var(--pri); color: var(--on-pri); display: grid; place-items: center; box-shadow: 0 0 0 3px var(--bg), var(--glow); }
.ci-heart .ico { width: 16px; height: 16px; }
.chat-intro2 h3 { font-size: 1.3rem; font-weight: 700; overflow-wrap: anywhere; }
.note2 { margin-top: 6px; font-size: .8125rem; color: var(--ink-2); background: var(--chip); border-radius: 14px; padding: 8px 14px; }
.note2.priv { display: flex; gap: 6px; align-items: flex-start; text-align: left; font-size: .75rem; max-width: 320px; }
.note2.priv .ico { width: 13px; height: 13px; flex: none; margin-top: 2px; }
.day-sep { position: sticky; top: 6px; z-index: 3; display: grid; place-items: center; margin: 12px 0 4px; pointer-events: none; }
.day-sep span { font-size: .6875rem; font-weight: 650; color: var(--ink-2); background: var(--gl-bg); padding: 4px 12px; border-radius: 99px; box-shadow: var(--gl-shadow); }
.msys { display: grid; place-items: center; margin: 8px 0; }
.msys span { font-size: .75rem; font-weight: 600; color: var(--ink-2); background: var(--chip); padding: 6px 14px; border-radius: 99px; text-align: center; max-width: 88%; }

/* message row */
.m { --sx: 0px; display: flex; position: relative; margin-top: 2px; touch-action: pan-y; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.m.g-top { margin-top: 9px; }
.m.me { justify-content: flex-end; }
.m .mcol { display: flex; flex-direction: column; max-width: min(80%, 440px); min-width: 0; transform: translateX(var(--sx)); transition: transform .5s var(--settle-soft); }
.m.me .mcol { align-items: flex-end; } .m.them .mcol { align-items: flex-start; }
.m.swiping .mcol { transition: none; }
.m .swipe-ic { position: absolute; right: 2px; top: 50%; width: 30px; height: 30px; margin-top: -15px; border-radius: 50%; background: var(--chip-2); color: var(--ink); display: grid; place-items: center; opacity: 0; transform: scale(.4); transition: opacity .15s, transform .5s var(--settle); pointer-events: none; }
.m .swipe-ic .ico { width: 16px; height: 16px; }
.m.swiping .swipe-ic { opacity: calc(min(1, var(--sx) / -40px)); }
.m.armed .swipe-ic { opacity: 1; transform: scale(1); background: var(--pri); color: var(--on-pri); }
.m.pop .mcol { animation: msg-pop .5s var(--settle-soft); }
@keyframes msg-pop { from { opacity: 0; transform: translateY(12px) scale(.94); } }
.m.gone { opacity: 0; transform: scale(.94); transition: .22s; }
.m .bub { position: relative; padding: 8px 13px 7px; border-radius: 20px; font-size: .9375rem; line-height: 1.38; overflow-wrap: anywhere; word-break: break-word; min-width: 0; max-width: 100%; }
/* incoming: clear glass (a lit edge, no blur per bubble — blur is reserved for a handful of big surfaces) */
.m.them .bub { background: var(--gl-bg); color: var(--ink); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), inset 0 0 0 1px var(--line); }
:root[data-theme='light'] .m.them .bub { background: var(--s1); box-shadow: inset 0 0 0 1px var(--line); }
/* outgoing: bright, like the send button */
.m.me .bub { background: var(--pri); color: var(--on-pri); box-shadow: 0 6px 22px -8px rgba(255, 255, 255, .35), inset 0 1px 0 rgba(255, 255, 255, .6); }
:root[data-theme='light'] .m.me .bub { box-shadow: 0 6px 18px -8px rgba(13, 13, 14, .5), inset 0 1px 0 rgba(255, 255, 255, .2); }
.m.them:not(.g-top) .bub { border-top-left-radius: 7px; } .m.them:not(.g-end) .bub { border-bottom-left-radius: 7px; }
.m.me:not(.g-top) .bub { border-top-right-radius: 7px; } .m.me:not(.g-end) .bub { border-bottom-right-radius: 7px; }
.m.them.g-end .bub { border-bottom-left-radius: 6px; } .m.me.g-end .bub { border-bottom-right-radius: 6px; }
.m .bub p { margin: 0; white-space: pre-wrap; }
.m .bub a { color: inherit; text-decoration: underline; text-underline-offset: 2px; -webkit-user-select: text; user-select: text; }
.m.jumbo .bub { background: none !important; box-shadow: none !important; padding: 0 2px; color: var(--ink); }
.m.jumbo .bub p { font-size: 2.7rem; line-height: 1.15; }
.m.jumbo.j3 .bub p { font-size: 2.1rem; }
.m.jumbo .mmeta { color: var(--ink-3); float: none; display: flex; justify-content: flex-end; }
.m.flash .bub, .m.flash .mcircle { animation: flash 1.2s var(--ease-out); }
.m.failed .bub { opacity: .75; }
.retry { margin-top: 3px; font-size: .6875rem; color: var(--danger); font-weight: 650; }
.mmeta { display: inline-flex; align-items: center; gap: 3px; float: right; position: relative; top: 5px; margin: -6px -3px 0 10px; font-size: .6875rem; line-height: 1.6; opacity: .62; white-space: nowrap; font-variant-numeric: tabular-nums; pointer-events: none; }
.m.me .mmeta { opacity: .7; }
.mmeta .ed { opacity: .85; }
.mmeta.on-media { position: absolute; float: none; right: 7px; bottom: 7px; top: auto; margin: 0; padding: 1px 8px; border-radius: 99px; background: rgba(0, 0, 0, .5); color: #fff; opacity: 1; }
.tk { display: inline-flex; align-items: center; }
.tki { width: 15px; height: 11px; } .tki.w { width: 19px; }
.tk .tki[viewBox="0 0 16 16"] { width: 12px; height: 12px; }
.m.them .tk { display: none; }
.tk.rd { opacity: 1; }
.tk:not(.rd) { opacity: .55; }
.tk.fail { color: var(--danger); font-weight: 800; }
.rq { display: grid; gap: 1px; width: 100%; min-width: 120px; text-align: left; padding: 5px 10px; margin: 1px 0 5px; border-radius: 10px; background: rgba(127, 127, 127, .16); box-shadow: inset 2.5px 0 0 currentColor; font-size: .8125rem; line-height: 1.3; }
.rq b { font-size: .75rem; }
.rq span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; opacity: .85; }
.cwrap .rq { background: var(--s1); color: var(--ink); max-width: 220px; }
.m .rxs { margin-top: 4px; }
.m.me .rxs { justify-content: flex-end; }

/* photo */
.m.k-photo .bub { padding: 3px; }
.m.k-photo .bub p { padding: 4px 9px 3px; }
.m.k-photo .rq { margin: 3px 3px 4px; width: auto; }
.mphoto { position: relative; width: min(260px, 64vw); border-radius: 17px; overflow: hidden; background: var(--s3); }
.mphoto img { display: block; width: 100%; height: 100%; object-fit: cover; cursor: zoom-in; }
.upl { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(0, 0, 0, .35); }
.upl svg { width: 52px; height: 52px; transform: rotate(-90deg); }
.upl circle { fill: none; stroke-width: 2.6; } .upl .bg { stroke: rgba(255, 255, 255, .3); } .upl .fg { stroke: #fff; stroke-dasharray: 94.2; stroke-linecap: round; transition: stroke-dashoffset .2s; }
.upl .upl-x { position: absolute; width: 30px; height: 30px; display: grid; place-items: center; color: #fff; }
.upl .upl-x .ico { width: 16px; height: 16px; }
.vplay .upl { position: static; background: none; } .vplay .upl svg { width: 40px; height: 40px; position: absolute; inset: 0; }

/* circle */
.cwrap { position: relative; display: flex; flex-direction: column; align-items: inherit; }
.mcircle { position: relative; width: min(230px, 60vw); aspect-ratio: 1; border-radius: 50%; overflow: hidden; isolation: isolate; -webkit-mask-image: -webkit-radial-gradient(white, black); background: #000; cursor: pointer; transform: translateZ(0); transition: width .5s var(--settle-soft); box-shadow: 0 0 0 1px var(--line-2); }
.mcircle.big { width: min(300px, 78vw); }
.mcircle video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.mcircle .ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); pointer-events: none; }
.mcircle .ring .fg { fill: none; stroke: #fff; stroke-width: 2.2; stroke-linecap: round; opacity: 0; transition: opacity .2s; }
.mcircle.playing .ring .fg { opacity: .95; }
.mcircle .cplay { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; transition: opacity .2s; pointer-events: none; }
.mcircle .cplay .ico { width: 44px; height: 44px; padding: 11px; border-radius: 50%; background: rgba(0, 0, 0, .45); fill: #fff; stroke: none; }
.mcircle.playing .cplay { opacity: 0; }
.mcircle.buffering .cplay { opacity: 1; }
.mcircle .cdur { position: absolute; bottom: 12%; left: 50%; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 5px; font-size: .6875rem; color: #fff; background: rgba(0, 0, 0, .5); padding: 2px 9px; border-radius: 99px; font-variant-numeric: tabular-nums; pointer-events: none; }
.mcircle .cmute { display: inline-grid; place-items: center; } .mcircle .cmute .ico { width: 12px; height: 12px; }
.mcircle.playing .cmute { display: none; }
.cwrap .mmeta.on-media { right: 50%; transform: translateX(50%); bottom: -6px; position: relative; margin-top: 4px; background: var(--chip-2); color: var(--ink-2); }

/* voice */
.m.k-voice .bub { padding: 9px 12px 7px 9px; min-width: 214px; }
.mvoice { display: flex; align-items: center; gap: 10px; }
.vplay { position: relative; width: 40px; height: 40px; border-radius: 50%; flex: none; display: grid; place-items: center; background: var(--pri); color: var(--on-pri); box-shadow: var(--glow); transition: transform .5s var(--settle); }
.vplay:active { transform: scale(.88); transition-duration: .08s; }
.m.me .vplay { background: var(--on-pri); color: var(--pri); box-shadow: none; }
.vplay .ico { width: 18px; height: 18px; fill: currentColor; stroke: none; }
.vplay .spin { width: 18px; height: 18px; border-color: currentColor; border-right-color: transparent; }
.vwave { flex: 1; display: flex; align-items: center; gap: 2px; height: 28px; min-width: 110px; cursor: pointer; touch-action: none; }
.vwave i { flex: 1; min-width: 2px; max-width: 3px; border-radius: 2px; background: currentColor; opacity: .3; transition: opacity .12s; }
.vwave i.on { opacity: 1; }
.vinfo { position: absolute; left: 58px; bottom: 5px; display: flex; gap: 6px; align-items: center; font-size: .6875rem; opacity: .75; font-variant-numeric: tabular-nums; }
.vspd { font-size: .625rem; font-weight: 750; padding: 0 6px; border-radius: 99px; background: rgba(127, 127, 127, .25); color: inherit; }
.m.k-voice .mvoice { padding-bottom: 12px; }

/* gift in a chat: a glass card with a lit backdrop, like a Telegram service gift */
.m.k-gift .bub { padding: 0; background: none !important; box-shadow: none !important; }
.m.k-gift .mcol { max-width: min(76%, 280px); }
.gmsg { position: relative; display: grid; justify-items: center; gap: 4px; min-width: 210px; padding: 16px 16px 12px; border-radius: 26px; cursor: pointer; text-align: center; overflow: hidden; isolation: isolate;
  background: var(--gl-bg); box-shadow: var(--gl-shadow); color: var(--ink); transition: transform .55s var(--settle); }
.gmsg:active { transform: scale(.97); transition-duration: .08s; }
.gmsg::before { content: ''; position: absolute; left: 50%; top: -30px; width: 240px; height: 210px; margin-left: -120px; z-index: -1; background: radial-gradient(closest-side, var(--gc, rgba(255, 190, 140, .5)), transparent); }
.gmsg .gimg { position: relative; width: 104px; height: 104px; display: grid; place-items: center; border-radius: 30px; }
.gmsg .gimg img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 10px 12px rgba(0, 0, 0, .4)); animation: float 4.5s ease-in-out infinite; }
.gmsg .gimg.has-bd { background: radial-gradient(circle at 50% 44%, var(--bd1), var(--bd2)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35); }
.gmsg .gb { display: grid; gap: 2px; min-width: 0; justify-items: center; }
.gmsg .gb b { font-size: 1.0625rem; font-weight: 700; }
.gmsg .gb .gs { font-size: .75rem; color: var(--ink-2); }
.gmsg .gn { font-size: .875rem; color: var(--ink); margin-top: 4px; }
.m.k-gift .mmeta { float: none; display: flex; justify-content: flex-end; margin: 4px 6px 0 0; top: 0; color: var(--ink-3); }
.rar-rare { --gc: rgba(90, 160, 255, .45); } .rar-epic { --gc: rgba(170, 110, 255, .5); } .rar-legendary { --gc: rgba(255, 190, 80, .55); } .rar-mythic { --gc: rgba(255, 110, 170, .5); }
.rar-common { --gc: rgba(255, 255, 255, .22); }

/* date invitation + question cards */
.m.k-question .bub, .m.k-date .bub { min-width: 226px; }
.qcard { display: grid; gap: 4px; min-width: 200px; padding: 2px 0; }
.qcard .q-ic { display: none; }
.qcard .q-l { font-size: .6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; opacity: .65; }
.qcard p { font-size: 1rem; font-weight: 600; line-height: 1.35; }
.qcard.big { margin-top: 14px; padding: 20px; border-radius: 24px; background: var(--gl-bg); box-shadow: var(--gl-shadow); text-align: center; min-height: 110px; display: grid; place-items: center; }
.qcard.big p { font-size: 1.15rem; }
.q-ans { justify-self: start; display: inline-flex; align-items: center; gap: 4px; margin-top: 4px; padding: 6px 12px; border-radius: 99px; background: var(--chip-2); color: inherit; font-size: .75rem; font-weight: 650; }
.m.me .q-ans { background: rgba(127, 127, 127, .25); }
.q-ans .ico { width: 13px; height: 13px; }
.dcard2 { display: grid; gap: 5px; min-width: 226px; padding: 4px 2px 2px; }
.dc2-top { display: flex; align-items: center; gap: 6px; font-size: .6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; opacity: .75; }
.dc2-ic .ico { width: 16px; height: 16px; }
.dc2-st { margin-left: auto; text-transform: none; letter-spacing: 0; font-weight: 650; font-size: .6875rem; padding: 2px 9px; border-radius: 99px; background: rgba(127, 127, 127, .22); }
.dcard2.st-accepted .dc2-st { background: var(--ok); color: var(--ok-ink); }
.dcard2.st-declined, .dcard2.st-cancelled { opacity: .7; }
.dc2-when { font-size: 1rem; font-weight: 700; text-transform: none; }
.dc2-when::first-letter { text-transform: uppercase; }
.dc2-place { font-size: .8125rem; opacity: .8; }
.dc2-note { font-size: .875rem; }
.dc2-acts { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
.m.me .dc2-acts .btn.ghost { background: rgba(127, 127, 127, .25); color: inherit; }
.dc2-prep { display: grid; gap: 4px; margin-top: 8px; padding: 9px 11px; border-radius: 13px; background: rgba(127, 127, 127, .16); font-size: .8125rem; line-height: 1.35; }
.dc2-prep .ico { width: 14px; height: 14px; vertical-align: -2px; margin-right: 4px; }
.safety-hint { display: flex; gap: 10px; align-items: flex-start; margin: 8px 2px; padding: 12px 14px; border-radius: 20px; background: var(--chip); color: var(--ink); animation: fade-up .3s var(--ease-out); }
.safety-hint > span .ico { width: 20px; height: 20px; }
.safety-hint > div { flex: 1; } .safety-hint b { font-size: .8125rem; } .safety-hint p { font-size: .75rem; color: var(--ink-2); }
.gnudge { display: flex; align-items: center; gap: 11px; margin: 8px 2px; padding: 12px 13px; border-radius: 24px; background: linear-gradient(120deg, rgba(240, 190, 90, .16), rgba(240, 190, 90, .05)); box-shadow: inset 0 0 0 1px rgba(240, 190, 90, .35); animation: fade-up .35s var(--ease-out); }
.gnudge .gn-ico { width: 42px; height: 42px; border-radius: 14px; background: linear-gradient(180deg, #fbe2a0, #e6ad42); color: var(--gold-ink); display: grid; place-items: center; flex: none; }
.gnudge b { font-size: .875rem; }

/* typing */
.m.typing .bub { padding: 13px 16px; }
.tdots { display: inline-flex; gap: 4px; }
.tdots i { width: 7px; height: 7px; border-radius: 50%; background: var(--ink-3); animation: tdots 1.2s infinite; }
.tdots i:nth-child(2) { animation-delay: .15s; } .tdots i:nth-child(3) { animation-delay: .3s; }
@keyframes tdots { 30% { transform: translateY(-3px); opacity: 1; } 60% { opacity: .5; } }

/* pin, search, floating date, scroll-down */
.pinbar { display: flex; align-items: center; gap: 4px; margin: 2px 12px 4px; padding: 5px 6px 5px 14px; border-radius: 20px; background: var(--gl-bg); box-shadow: var(--gl-shadow); flex: none; animation: fade-up .25s var(--ease-out); }
.pinbar .pb-main { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; text-align: left; }
.pinbar .pb-ic { width: 3px; align-self: stretch; border-radius: 3px; background: var(--ink); }
.pinbar .pb-ic .ico { display: none; }
.pinbar .pb-t { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr); } .pinbar .pb-t b { font-size: .75rem; } .pinbar .pb-t span { font-size: .8125rem; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-search { position: relative; display: flex; align-items: center; gap: 8px; margin: 2px 12px 4px; padding: 4px 6px 4px 14px; border-radius: 20px; background: var(--gl-bg); box-shadow: var(--gl-shadow); flex: none; z-index: 7; }
.chat-search .cs-ic .ico { width: 18px; height: 18px; color: var(--ink-3); }
.cs-in { flex: 1; min-width: 0; border: 0; outline: none; background: transparent; padding: 8px 0; }
.cs-res { position: absolute; top: calc(100% + 6px); left: 0; right: 0; max-height: 50vh; overflow-y: auto; background: var(--sheet); -webkit-backdrop-filter: blur(30px) saturate(1.5); backdrop-filter: blur(30px) saturate(1.5); box-shadow: var(--shadow-lg), inset 0 0 0 1px var(--line); border-radius: 22px; }
.cs-item { display: grid; grid-template-columns: auto 1fr auto; gap: 8px; align-items: baseline; width: 100%; padding: 11px 16px; text-align: left; font-size: .8125rem; }
.cs-item + .cs-item { box-shadow: inset 0 1px 0 var(--line); }
.cs-item span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-2); } .cs-item small { color: var(--ink-3); font-size: .6875rem; }
.unread-sep { display: grid; place-items: center; margin: 14px 0 6px; }
.unread-sep span { padding: 5px 14px; border-radius: 99px; background: var(--chip-2); font-size: .75rem; font-weight: 650; color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--line); }
.date-pill { position: absolute; top: 8px; left: 50%; z-index: 5; transform: translate(-50%, -8px); opacity: 0; pointer-events: none; padding: 5px 13px; border-radius: 999px; background: var(--gl-bg); -webkit-backdrop-filter: var(--bf); backdrop-filter: var(--bf); box-shadow: var(--gl-shadow); font-size: .75rem; font-weight: 650; transition: opacity .25s, transform .4s var(--ease-out); }
.date-pill.on { opacity: 1; transform: translate(-50%, 0); }
.pinbar:not([hidden]) ~ .chat-search[hidden] ~ .msgs2 ~ .date-pill { top: 62px; }
.to-bottom { position: absolute; right: 14px; bottom: calc(var(--dock) + 12px); z-index: 6; width: 44px; height: 44px; border-radius: 50%; background: var(--gl-bg); -webkit-backdrop-filter: var(--bf); backdrop-filter: var(--bf); color: var(--ink); display: grid; place-items: center; box-shadow: var(--gl-shadow); animation: pop-in .4s var(--settle); }
.to-bottom .ico { width: 22px; height: 22px; }
.tb-n { position: absolute; top: -7px; left: 50%; transform: translateX(-50%); min-width: 20px; height: 20px; padding: 0 6px; border-radius: 99px; background: var(--pri); color: var(--on-pri); font-size: .6875rem; font-weight: 700; display: grid; place-items: center; }

/* reply bar + composer (floating glass) */
.replybar { display: flex; align-items: center; gap: 10px; margin: 0 12px 6px; padding: 7px 6px 7px 14px; border-radius: 22px; background: var(--gl-bg); -webkit-backdrop-filter: var(--bf); backdrop-filter: var(--bf); box-shadow: var(--gl-shadow); flex: none; animation: fade-up .25s var(--ease-out); }
.replybar .rb-ic { color: var(--ink); display: grid; } .replybar .rb-ic .ico { width: 20px; height: 20px; }
.replybar .rb-bar { width: 2.5px; align-self: stretch; border-radius: 3px; background: var(--ink); }
.replybar .rb-bar.edit { background: var(--gold); }
.replybar b { font-size: .75rem; display: block; }
.replybar p { font-size: .8125rem; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.composer2 { position: relative; display: flex; align-items: flex-end; gap: 8px; padding: 6px 12px calc(10px + var(--safe-b)); flex: none; }
.composer2 .attach { flex: none; width: 46px; height: 46px; }
.cmp-field { position: relative; flex: 1; min-width: 0; display: flex; align-items: flex-end; border-radius: 23px; background: var(--gl-bg); -webkit-backdrop-filter: var(--bf); backdrop-filter: var(--bf); box-shadow: var(--gl-shadow); transition: box-shadow .3s; }
.cmp-field::after { content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: var(--gl-edge); pointer-events: none; -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
.cmp-field:focus-within { box-shadow: var(--gl-shadow), 0 0 0 1.5px var(--line-2), 0 0 30px rgba(255, 255, 255, .08); }
.composer2 textarea { flex: 1; min-width: 0; resize: none; border: 0; background: transparent; border-radius: 23px; padding: 12px 46px 12px 17px; min-height: 46px; max-height: 132px; outline: none; font-size: 1rem; line-height: 1.38; color: var(--ink); overflow-y: auto; scrollbar-width: none; }
.composer2 textarea::placeholder { color: var(--ink-3); }
.gift-btn, .emo-btn { position: absolute; right: 5px; bottom: 5px; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; color: var(--ink-2); transition: color .2s, transform .55s var(--settle), background-color .2s; }
.gift-btn:active, .emo-btn:active { transform: scale(.85); transition-duration: .08s; background: var(--chip); }
.gift-btn .ico, .emo-btn .ico { width: 22px; height: 22px; }
.emo-btn.on { color: var(--ink); }
.send-btn, .mic-btn { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; flex: none; transition: transform .55s var(--settle), opacity .2s, background .2s; touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.send-btn { background: var(--pri); color: var(--on-pri); box-shadow: var(--glow), inset 0 1px 0 rgba(255, 255, 255, .6); animation: pop-in .4s var(--settle); }
.send-btn:active { transform: scale(.86); transition-duration: .08s; }
.send-btn[disabled] { opacity: .4; }
.send-btn .ico { width: 21px; height: 21px; stroke-width: 2.3; }
.mic-btn { color: var(--ink); position: relative; background: var(--gl-bg); -webkit-backdrop-filter: var(--bf); backdrop-filter: var(--bf); box-shadow: var(--gl-shadow); }
.mic-btn .ico { width: 23px; height: 23px; }
.mic-btn.flip { animation: flip .4s var(--ease-out); }
@keyframes flip { 50% { transform: rotateY(90deg) scale(.8); } }
.composer2.recording .mic-btn { background: var(--danger); color: #fff; transform: scale(1.3); box-shadow: 0 0 0 calc(var(--lvl, 0) * 20px) rgba(var(--danger-rgb), 0.26), 0 0 30px rgba(var(--danger-rgb), 0.4); transition: box-shadow .1s, transform .3s var(--settle); }
.composer2.rec-locked .mic-btn { transform: none; }
.composer2.rec-locked .mic-btn .ico { display: none; }
.composer2.rec-locked .mic-btn::after { content: ''; width: 18px; height: 18px; background: #fff; clip-path: polygon(0 0, 100% 50%, 0 100%); margin-left: 3px; }
.composer2.recording .attach, .composer2.recording .cmp-field { visibility: hidden; }
.rec-bar { position: absolute; left: 12px; right: 68px; top: 6px; height: 46px; display: flex; align-items: center; gap: 10px; padding: 0 12px; border-radius: 23px; background: var(--gl-bg); box-shadow: var(--gl-shadow); font-variant-numeric: tabular-nums; }
.rec-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--danger); animation: blink 1s infinite; box-shadow: 0 0 10px var(--danger); }
.rec-time { font-weight: 650; min-width: 40px; }
.rec-cancel { flex: 1; text-align: center; color: var(--ink-3); font-size: .875rem; display: inline-flex; align-items: center; justify-content: center; gap: 4px; animation: nudge-c 1.4s ease-in-out infinite; }
.rec-cancel .ico { width: 16px; height: 16px; }
@keyframes nudge-c { 50% { translate: -6px 0; } }
.rec-del { margin-left: auto; width: 40px; height: 40px; display: grid; place-items: center; color: var(--danger); }
.rec-lock { position: absolute; right: 14px; bottom: calc(76px + var(--safe-b)); width: 36px; padding: 9px 0; border-radius: 99px; background: var(--gl-bg-2); -webkit-backdrop-filter: var(--bf); backdrop-filter: var(--bf); box-shadow: var(--gl-shadow); display: grid; justify-items: center; gap: 2px; color: var(--ink-2); animation: fade-up .25s var(--ease-out); }
.rec-lock .ico { width: 16px; height: 16px; }
.rec-lock span .ico { width: 14px; height: 14px; animation: nudge-u 1.2s ease-in-out infinite; }
@keyframes nudge-u { 50% { translate: 0 -3px; } }
.rec-ov { position: fixed; inset: 0; z-index: 6000; display: grid; place-items: center; align-content: center; gap: 18px; background: rgba(0, 0, 0, .55); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); opacity: 0; transition: opacity .25s; pointer-events: none; }
.rec-ov.on { opacity: 1; }
.rec-circle { position: relative; width: min(78vw, 320px); aspect-ratio: 1; border-radius: 50%; overflow: hidden; -webkit-mask-image: -webkit-radial-gradient(white, black); transform: scale(.85); transition: transform .5s var(--settle-soft); background: #000; box-shadow: 0 0 60px rgba(255, 255, 255, .15); }
.rec-ov.on .rec-circle { transform: none; }
.rec-circle video { width: 100%; height: 100%; object-fit: cover; transform: scaleX(-1); }
.rec-circle svg { position: absolute; inset: 0; transform: rotate(-90deg); }
.rec-circle svg circle { fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; transition: stroke-dashoffset .1s linear; }
.rec-hint { color: #fff; font-size: .875rem; opacity: .9; text-align: center; padding: 0 30px; }
.composer2.recording { z-index: 6001; }

/* attach sheet */
.attach-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; row-gap: 16px; padding: 8px 0 6px; }
.attach-grid button { display: grid; justify-items: center; gap: 8px; font-size: .75rem; padding: 4px 0; }
.attach-grid b { font-weight: 600; text-align: center; line-height: 1.2; }
.ag-ic { width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; color: var(--ink); background: var(--gl-bg-2); box-shadow: var(--gl-shadow); transition: transform .55s var(--settle); position: relative; }
.attach-grid button:active .ag-ic { transform: scale(.88); transition-duration: .08s; }
.ag-ic .ico { width: 24px; height: 24px; }
.ag-ic.a4 { color: var(--gold); }
.attach-prev { border-radius: 22px; overflow: hidden; margin: 6px 0 12px; max-height: 52vh; display: grid; place-items: center; background: var(--s2); }
.attach-prev img { max-width: 100%; max-height: 52vh; object-fit: contain; display: block; }

/* emoji panel */
.emoji-panel { flex: none; height: 232px; margin: 0 12px 8px; border-radius: 26px; background: var(--sheet); -webkit-backdrop-filter: blur(30px) saturate(1.5); backdrop-filter: blur(30px) saturate(1.5); box-shadow: var(--gl-shadow); overflow-y: auto; overscroll-behavior: contain; animation: fade-up .3s var(--ease-out); order: 10; scrollbar-width: none; }
.chat2.emo-on .emoji-panel { margin-bottom: calc(8px + var(--safe-b)); }
.chat2.emo-on .composer2 { padding-bottom: 8px; }
.emo-grid { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 2px; padding: 10px 8px; }
.emo-grid button { aspect-ratio: 1; font-size: 1.6rem; line-height: 1; border-radius: 12px; display: grid; place-items: center; transition: transform .5s var(--settle), background-color .12s; }
.emo-grid button:active { transform: scale(.78); background: var(--chip); transition-duration: .06s; }

/* context menu: the message lifts, the rest blurs */
.cmenu { position: fixed; inset: 0; z-index: 6500; }
.cm-bd { position: absolute; inset: 0; background: rgba(0, 0, 0, .3); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); opacity: 0; transition: opacity .25s; }
.cmenu.on .cm-bd { opacity: 1; }
.cm-clone { position: absolute; overflow: hidden; pointer-events: none; transition: transform .4s var(--settle); }
.cmenu.on .cm-clone { transform: scale(1.03); }
.cm-clone > * { max-width: none !important; }
.cm-clone .bub { font-size: .9375rem; line-height: 1.38; padding: 8px 13px 7px; border-radius: 20px; overflow-wrap: anywhere; white-space: pre-wrap; }
.cm-clone .bub p { margin: 0; }
.cm-clone .m.me .bub, .cm-clone .bub { box-shadow: none; }
.cm-rx, .cm-list { position: absolute; opacity: 0; transform: scale(.88); transition: opacity .2s, transform .45s var(--settle); }
.cm-rx.r, .cm-list.r { transform-origin: right center; } .cm-rx.l, .cm-list.l { transform-origin: left center; }
.cmenu.on .cm-rx, .cmenu.on .cm-list { opacity: 1; transform: none; }
.cmenu.out .cm-rx, .cmenu.out .cm-list, .cmenu.out .cm-bd { opacity: 0; }
.cm-rx { display: flex; gap: 2px; padding: 5px; border-radius: 99px; background: var(--sheet); -webkit-backdrop-filter: blur(30px) saturate(1.5); backdrop-filter: blur(30px) saturate(1.5); box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255, 255, 255, .2), inset 0 0 0 1px var(--line); max-width: calc(100vw - 16px); overflow-x: auto; scrollbar-width: none; }
.cm-rx button { width: 42px; height: 42px; border-radius: 50%; font-size: 1.45rem; display: grid; place-items: center; flex: none; transition: transform .45s var(--settle), background-color .2s; }
.cm-rx button:active { transform: scale(1.35); transition-duration: .1s; }
.cm-rx button.mine { background: var(--chip-2); }
.cm-list { min-width: 214px; border-radius: 22px; background: var(--sheet); -webkit-backdrop-filter: blur(30px) saturate(1.5); backdrop-filter: blur(30px) saturate(1.5); box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255, 255, 255, .2), inset 0 0 0 1px var(--line); overflow: hidden; }
.cm-list button { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 13px 16px; font-size: .9375rem; text-align: left; }
.cm-list button + button { box-shadow: inset 0 1px 0 var(--line); }
.cm-list button .ico { width: 19px; height: 19px; color: var(--ink-2); }
.cm-list button.danger, .cm-list button.danger .ico { color: var(--danger); }
.cm-list button:active { background: var(--chip); }

/* fullscreen photo viewer + emoji effects */
.pview { --o: 1; position: fixed; inset: 0; z-index: 6400; background: rgba(0, 0, 0, calc(.95 * var(--o))); display: block; opacity: 0; transition: opacity .3s; touch-action: none; }
.pview.on { opacity: 1; } .pview.out { opacity: 0; }
.pview .pv-strip { position: absolute; inset: 0; display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; touch-action: pan-x; }
.pview .pv-strip::-webkit-scrollbar { display: none; }
.pview .pv-slide { flex: 0 0 100%; height: 100%; display: grid; place-items: center; scroll-snap-align: center; overflow: hidden; }
.pview .pv-slide img { max-width: 100%; max-height: 100%; object-fit: contain; transition: transform .35s var(--ease-out); -webkit-user-drag: none; }
.pview .pv-x { position: absolute; top: calc(10px + var(--safe-t)); right: 12px; color: #fff; background: rgba(255, 255, 255, .14); }
.pview .pv-count { position: absolute; top: calc(18px + var(--safe-t)); left: 50%; transform: translateX(-50%); color: #fff; font-size: .8125rem; font-weight: 650; background: rgba(255, 255, 255, .14); padding: 4px 12px; border-radius: 99px; }
.fx { position: fixed; inset: 0; z-index: 6900; pointer-events: none; overflow: hidden; }
.fx span { position: absolute; bottom: -40px; animation: fx-up 2.2s cubic-bezier(.2, .7, .3, 1) forwards; opacity: 0; will-change: transform, opacity; }
@keyframes fx-up { 0% { opacity: 0; transform: translate(0, 0) scale(.6); } 15% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--dx), -95vh) scale(1.15) rotate(12deg); } }

/* chat themes: a soft tint of the light, chosen together by both people */
[data-theme='violet'] { --chat-bg: radial-gradient(90% 60% at 100% 0%, rgba(150, 110, 255, .24), transparent 70%), radial-gradient(80% 50% at 0% 100%, rgba(120, 80, 255, .16), transparent 70%); --me-bub: linear-gradient(135deg, #e8deff, #b9a2ff); }
[data-theme='apricot'] { --chat-bg: radial-gradient(90% 60% at 100% 0%, rgba(255, 190, 120, .26), transparent 70%), radial-gradient(80% 50% at 0% 100%, rgba(255, 150, 100, .16), transparent 70%); --me-bub: linear-gradient(135deg, #ffe7cc, #ffb877); }
[data-theme='night'] { --chat-bg: radial-gradient(70% 50% at 80% 0%, rgba(90, 100, 255, .3), transparent 70%), linear-gradient(180deg, rgba(20, 22, 60, .6), rgba(6, 6, 20, .6)); --me-bub: linear-gradient(135deg, #cfd3ff, #8d94ff); }
[data-theme='rose'] { --chat-bg: radial-gradient(90% 60% at 100% 0%, rgba(255, 130, 170, .26), transparent 70%), radial-gradient(80% 50% at 0% 100%, rgba(255, 150, 120, .14), transparent 70%); --me-bub: linear-gradient(135deg, #ffdbe7, #ff9fbf); }
[data-theme='mint'] { --chat-bg: radial-gradient(90% 60% at 100% 0%, rgba(90, 220, 180, .24), transparent 70%), radial-gradient(80% 50% at 0% 100%, rgba(120, 220, 140, .14), transparent 70%); --me-bub: linear-gradient(135deg, #d5f7ea, #7fe0c0); }
[data-theme='sky'] { --chat-bg: radial-gradient(90% 60% at 100% 0%, rgba(90, 170, 255, .28), transparent 70%), radial-gradient(80% 50% at 0% 100%, rgba(100, 210, 255, .16), transparent 70%); --me-bub: linear-gradient(135deg, #d6ebff, #86c1ff); }
.msgs2[data-theme]:not([data-theme='default']) { background: var(--chat-bg); }
.chat2[data-chat-theme]:not([data-chat-theme='default']) .m.me .bub { background: var(--me-bub); color: #101012; }
.chat2[data-chat-theme]:not([data-chat-theme='default']) .m.me .vplay { background: #101012; color: #fff; }
.theme-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 14px; }
.theme-sw { display: grid; gap: 7px; justify-items: center; font-size: .75rem; font-weight: 550; }
.theme-sw .ts-prev { width: 100%; aspect-ratio: 1.1; border-radius: 20px; display: grid; align-content: end; gap: 5px; padding: 9px; background: var(--chat-bg, none), var(--s1); box-shadow: inset 0 0 0 1px var(--line); transition: box-shadow .25s, transform .55s var(--settle); }
.theme-sw:active .ts-prev { transform: scale(.94); transition-duration: .08s; }
.theme-sw[aria-pressed='true'] .ts-prev { box-shadow: inset 0 0 0 2px var(--ink), 0 0 26px rgba(255, 255, 255, .1); }
.theme-sw .ts-prev i { height: 12px; border-radius: 8px; }
.theme-sw .ts-prev i:first-child { width: 68%; background: var(--gl-bg-2); }
.theme-sw .ts-prev i:last-child { width: 58%; justify-self: end; background: var(--me-bub, var(--pri)); }

/* the dock floats over bubbles of any brightness: its glass is tinted darker (lighter in the light theme) so controls stay readable */
.chat-dock, .to-bottom, .chat2 .page-head { --gl-bg: rgba(20, 20, 22, .5); --bf: blur(var(--blur)) saturate(1.4) brightness(.5); }
:root[data-theme='light'] .chat-dock, :root[data-theme='light'] .to-bottom, :root[data-theme='light'] .chat2 .page-head { --gl-bg: rgba(255, 255, 255, .78); --bf: blur(var(--blur)) saturate(1.6) brightness(1.2); }
:root.lite .chat-dock, :root.lite .to-bottom, :root.lite .chat2 .page-head { --bf: none; --gl-bg: rgba(40, 40, 43, .94); }
:root.lite[data-theme='light'] .chat-dock, :root.lite[data-theme='light'] .to-bottom, :root.lite[data-theme='light'] .chat2 .page-head { --gl-bg: rgba(250, 250, 251, .96); }

/* ---------- gifts: the colour lives here ---------- */
.rar-common { --r1: #5b5b64; --r2: #26262b; --rt: #a4a4aa; }
.rar-rare { --r1: #5ea9ff; --r2: #1d4a9e; --rt: #8ec1ff; }
.rar-epic { --r1: #b585ff; --r2: #562aa8; --rt: #c9a3ff; }
.rar-legendary { --r1: #ffd374; --r2: #a95f0e; --rt: #f2c661; }
.rar-mythic { --r1: #ff80ad; --r2: #6b25c8; --rt: #ffa3c6; }
:root[data-theme='light'] .rar-common { --r1: #f3f3f6; --r2: #d3d3da; --rt: #6a6a71; }
:root[data-theme='light'] .rar-rare { --r1: #d6ebff; --r2: #7db6ff; --rt: #2a68c4; }
:root[data-theme='light'] .rar-epic { --r1: #e6d6ff; --r2: #a67cff; --rt: #6b3fc4; }
:root[data-theme='light'] .rar-legendary { --r1: #fff0c4; --r2: #f0b84a; --rt: #8f6212; }
:root[data-theme='light'] .rar-mythic { --r1: #ffdbe9; --r2: #d68cff; --rt: #b02a63; }
.rar-t { color: var(--rt); font-weight: 700; }
.rar-chip[aria-pressed='true'] { background: var(--r2); color: #fff; }
.gift-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.gift-grid.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.gift-grid > * { min-width: 0; }
.gift-card { position: relative; display: grid; align-content: start; grid-auto-rows: min-content; gap: 4px; padding: 0 0 10px; border-radius: 22px; background: var(--s1); box-shadow: inset 0 0 0 1px var(--line); text-align: center; overflow: hidden; isolation: isolate; transition: transform .55s var(--settle), box-shadow .25s; }
.gift-card:active { transform: scale(.95); transition-duration: .08s; }
.gift-card.soldout { opacity: .5; }
.gift-card.skel { aspect-ratio: .78; box-shadow: none; }
.gift-card .gc-bg { position: absolute; left: 0; right: 0; top: 0; height: 66%; background: radial-gradient(circle at 50% 42%, var(--r1), var(--r2)); z-index: -1; overflow: hidden; }
.gift-card .gc-bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255, 255, 255, .28), transparent 45%); }
.gift-card .gc-img { position: relative; aspect-ratio: 1.25; padding: 10px 14% 4px; display: grid; place-items: center; }
.gc-img img, .gd-img img, .gr-gift img, .gd-x-img img, .gw-img img, .gimg img { width: 100%; height: 100%; max-width: 100%; max-height: 100%; object-fit: contain; display: block; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .35)); }
.gift-card b { font-size: .8125rem; font-weight: 650; padding: 0; margin: 5px 6px 0; line-height: 1.35; min-height: 1.35em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; position: relative; }
.gift-card .gc-price { justify-self: center; font-size: .75rem; font-weight: 750; padding: 3px 10px; border-radius: 99px; background: var(--chip); color: var(--ink); font-variant-numeric: tabular-nums; }
.gc-left, .gc-new { position: absolute; top: 7px; font-size: .5625rem; font-weight: 750; padding: 2px 7px; border-radius: 99px; background: rgba(0, 0, 0, .5); color: #fff; letter-spacing: .02em; }
.gc-left { left: 7px; } .gc-new { right: 7px; background: #fff; color: #0b0b0c; }
.gift-card.picked { box-shadow: inset 0 0 0 2px var(--ink), 0 0 26px rgba(255, 255, 255, .12); }
.gc-check { position: absolute; top: 7px; right: 7px; width: 22px; height: 22px; border-radius: 50%; background: var(--pri); color: var(--on-pri); display: grid; place-items: center; z-index: 2; }
.gc-check .ico { width: 14px; height: 14px; stroke-width: 3; }
.gtiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.gtile { position: relative; aspect-ratio: 1; border-radius: 20px; overflow: hidden; display: grid; place-items: center; background: radial-gradient(circle at 50% 42%, var(--r1), var(--r2)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), inset 0 0 0 1px rgba(255, 255, 255, .08); isolation: isolate; transition: transform .55s var(--settle); }
.gtile:active { transform: scale(.93); transition-duration: .08s; }
.gtile::before, .gi-hero::before { content: ''; position: absolute; inset: 0; z-index: -1; background-image: var(--pat); background-size: 20px 20px; background-repeat: space; opacity: .16; filter: grayscale(1) brightness(3); -webkit-mask-image: radial-gradient(circle at 50% 45%, transparent 32%, #000 78%); mask-image: radial-gradient(circle at 50% 45%, transparent 32%, #000 78%); }
.gtile img { width: 68%; height: 68%; object-fit: contain; filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .35)); }
.gtile.is-hidden { opacity: .45; }
.gtile.has-bd, .gi-hero.has-bd { background: radial-gradient(circle at 50% 44%, var(--bd1), var(--bd2)); }
.gt-n { position: absolute; left: 0; right: 0; bottom: 3px; text-align: center; font-size: .5625rem; font-weight: 800; color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, .55); letter-spacing: .02em; }
.gt-pin { position: absolute; top: 5px; right: 5px; width: 20px; height: 20px; border-radius: 50%; background: rgba(255, 255, 255, .9); color: #0b0b0c; display: grid; place-items: center; }
.gt-pin .ico { width: 11px; height: 11px; }
.gt-mini { width: 40px; height: 40px; border-radius: 13px; display: grid; place-items: center; background: radial-gradient(circle at 50% 40%, var(--r1), var(--r2)); flex: none; }
.gt-mini img { width: 78%; height: 78%; object-fit: contain; }
.gift-sum { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 16px; }
.gift-sum > div { background: var(--s1); border-radius: 20px; padding: 13px 8px; display: grid; justify-items: center; gap: 2px; box-shadow: inset 0 0 0 1px var(--line); }
.gift-sum b { font-weight: 750; font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.gift-sum span { font-size: .6875rem; color: var(--ink-3); text-align: center; }
.gift-wall { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 14px; border-radius: 22px; background: var(--s1); box-shadow: inset 0 0 0 1px var(--line); }
.gw-imgs { display: flex; }
.gw-img { width: 40px; height: 40px; border-radius: 13px; display: grid; place-items: center; background: radial-gradient(80% 80% at 50% 20%, var(--r1), var(--r2)); margin-left: -8px; box-shadow: 0 0 0 2px var(--s1); }
.gw-img:first-child { margin-left: 0; }
.gw-img img { max-width: 82%; max-height: 82%; }
.gd-to { display: flex; align-items: center; gap: 12px; width: 100%; margin: 14px 0 0; padding: 12px 14px; border-radius: 22px; background: var(--s1); box-shadow: inset 0 0 0 1px var(--line); }
.gd-to .av { width: 42px; height: 42px; }
.gd-to.center { justify-content: center; background: rgba(255, 255, 255, .1); color: inherit; }
.ug-card { position: relative; display: grid; gap: 6px; padding: 13px; border-radius: 22px; background: var(--s1); box-shadow: inset 0 0 0 1px var(--line); text-align: center; overflow: hidden; }
.ug-card.is-hidden { opacity: .55; }
.ug-acts { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; margin-top: 4px; }
.ug-from { display: inline-flex; align-items: center; gap: 6px; justify-content: center; }
.xs-av { width: 22px; height: 22px; }
.av.sm { width: 36px; height: 36px; }

/* one gift: a lit stage, the gift sits in the light */
.gift-sheet .sheet-body { padding-top: 0; }
.gi-hero { position: relative; height: 200px; margin: 0 -20px; display: grid; place-items: center; overflow: hidden; background: radial-gradient(circle at 50% 46%, var(--r1), var(--r2)); isolation: isolate; border-radius: 0; }
.gi-hero::before { background-size: 34px 34px; opacity: .18; }
.gi-hero.skel { background: var(--s2); }
.gi-hero img { position: relative; height: 150px; width: 150px; object-fit: contain; filter: drop-shadow(0 16px 22px rgba(0, 0, 0, .45)); animation: gi-float 5s ease-in-out infinite; }
@keyframes gi-float { 0%, 100% { transform: translateY(0) rotate(-1.5deg); } 50% { transform: translateY(-8px) rotate(1.5deg); } }
.gi-hero .gi-glow { position: absolute; inset: 14% 22%; border-radius: 50%; background: radial-gradient(circle, rgba(255, 255, 255, .5), transparent 70%); z-index: 0; }
.gi-hero::after { content: ''; position: absolute; top: -20%; bottom: -20%; left: 0; width: 34%; transform: translateX(-200%) skewX(-20deg); background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .28), transparent); animation: gi-sweep 5s ease-in-out infinite 1s; pointer-events: none; }
@keyframes gi-sweep { 0%, 55% { transform: translateX(-200%) skewX(-20deg); } 100% { transform: translateX(520%) skewX(-20deg); } }
.gi-hero.mini { height: 50px; width: 50px; margin: 0; border-radius: 15px; flex: none; }
.gi-hero.mini img { width: 38px; height: 38px; animation: none; height: 38px; }
.gi-hero.mini::before, .gi-hero.mini::after, .gi-hero.mini .gi-glow { display: none; }
.gi-hero.reveal { width: 220px; height: 200px; margin: 6px 0; border-radius: 28px; }
.gi-title { text-align: center; margin-top: 14px; }
.gi-name { display: flex; align-items: center; justify-content: center; gap: 2px; margin: 14px auto 0; font-weight: 750; font-size: 1.35rem; letter-spacing: -.025em; color: var(--ink); }
.gi-name .ico { width: 18px; height: 18px; color: var(--ink-3); }
.gi-sub { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.gi-desc { text-align: center; margin-top: 8px; }
.gi-note { margin: 14px 0 0; padding: 11px 15px; border-radius: 20px 20px 20px 6px; background: var(--chip); font-size: .9375rem; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; }
.gi-note small { display: flex; align-items: center; gap: 4px; margin-top: 4px; font-size: .6875rem; color: var(--ink-3); }
.gi-note small .ico { width: 12px; height: 12px; }
.gi-table { margin-top: 14px; border-radius: 22px; background: var(--s1); box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; }
.gi-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 16px; font-size: .875rem; position: relative; }
.gi-row + .gi-row::before { content: ''; position: absolute; left: 16px; right: 0; top: 0; height: 1px; background: var(--line); }
.gi-row > span { color: var(--ink-3); flex: none; }
.gi-row > b { font-weight: 600; text-align: right; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.gi-row.go { cursor: pointer; } .gi-row.go:active { background: var(--chip); }
.gi-user { display: inline-flex; align-items: center; gap: 6px; }
.gi-user .ico { width: 15px; height: 15px; color: var(--ink-3); }
.gi-own { display: flex; gap: 6px; } .gi-own .btn { flex: 1; padding: 0 6px; }
.bd-dot { display: inline-block; width: 12px; height: 12px; margin-right: 6px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, var(--bd1), var(--bd2)); vertical-align: -1px; box-shadow: 0 0 0 1px rgba(255, 255, 255, .15); }
.wish-tog { position: relative; z-index: 2; display: flex; align-items: center; gap: 6px; width: max-content; margin: -36px auto 12px; padding: 8px 14px; border-radius: 999px; background: rgba(0, 0, 0, .5); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); color: #fff; font-size: .8125rem; font-weight: 650; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), inset 0 0 0 1px rgba(255, 255, 255, .14); transition: transform .55s var(--settle); }
.wish-tog:active { transform: scale(.94); transition-duration: .08s; }
.wish-tog .ico { width: 16px; height: 16px; }
.wish-tog.on { background: #fff; color: #0b0b0c; }
.wish-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 8px; }
.wish { display: grid; justify-items: center; gap: 4px; padding: 8px 6px 10px; border-radius: 20px; background: var(--s1); box-shadow: inset 0 0 0 1px var(--line); text-align: center; min-width: 0; transition: transform .55s var(--settle); }
.wish:active { transform: scale(.94); transition-duration: .08s; }
.wish[disabled] { opacity: .45; }
.wi-img { width: 58px; height: 58px; border-radius: 17px; display: grid; place-items: center; background: radial-gradient(circle at 50% 42%, var(--r1), var(--r2)); }
.wi-img img { width: 78%; height: 78%; object-fit: contain; filter: drop-shadow(0 3px 6px rgba(0, 0, 0, .35)); }
.wish b { font-size: .75rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.wi-p { font-size: .6875rem; color: var(--ink-3); font-weight: 650; }
.pv-gift-img { width: 54px; height: 54px; object-fit: contain; flex: none; }
.gift-empty { display: flex; align-items: center; gap: 10px; width: 100%; padding: 13px 14px; border-radius: 20px; border: 1px dashed var(--line-2); color: var(--ink-2); font-size: .875rem; text-align: left; }
.gift-empty .ico { color: var(--ink); }

/* ---------- the moment a gift arrives (Telegram-style card) ---------- */
.gmagic { position: fixed; inset: 0; z-index: 8000; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; color: var(--ink); -webkit-user-select: none; user-select: none; touch-action: none; }
.gm-scrim { position: absolute; inset: 0; background: rgba(0, 0, 0, .62); opacity: 0; transition: opacity .35s var(--ease-out); }
.gmagic.on .gm-scrim { opacity: 1; }
.gm-sheet { position: relative; width: 100%; max-width: 540px; border-radius: 34px 34px 0 0; overflow: hidden; background: var(--sheet-solid); box-shadow: 0 -20px 60px rgba(0, 0, 0, .45), inset 0 1px 0 var(--gl-hi);
  transform: translateY(105%); transition: transform .6s cubic-bezier(.22, 1.12, .36, 1); will-change: transform; }
.gmagic.on .gm-sheet { transform: none; }
.gmagic.out .gm-scrim { opacity: 0; transition-duration: .4s; }
.gmagic.out:not(.fly) .gm-sheet { transform: translateY(105%); transition: transform .42s cubic-bezier(.4, 0, .8, .4); }
.gmagic.fly .gm-sheet { background: transparent; box-shadow: none; transition: background-color .3s; }
.gmagic.fly .gm-bgl, .gmagic.fly .gm-cap, .gmagic.fly .gm-x, .gmagic.fly .gm-halo { opacity: 0; transition: opacity .3s; }
.gm-hero { position: relative; height: clamp(230px, 38vh, 330px); display: grid; place-items: center; overflow: hidden; isolation: isolate; perspective: 800px; }
.gm-bgl { position: absolute; inset: 0; z-index: -2; background: radial-gradient(70% 80% at 50% 52%, var(--bd1, var(--r1)), var(--bd2, var(--r2))); }
.gm-bgl::before { content: ''; position: absolute; inset: 0; background-image: var(--pat); background-size: 30px 30px; background-repeat: space; opacity: .14; filter: grayscale(1) brightness(3);
  -webkit-mask-image: radial-gradient(circle at 50% 52%, transparent 26%, #000 72%); mask-image: radial-gradient(circle at 50% 52%, transparent 26%, #000 72%); }
.gm-bgl::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255, 255, 255, .14), transparent 40%, transparent 70%, rgba(0, 0, 0, .18)); }
.gm-cv { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.gm-halo { position: absolute; z-index: -1; left: 50%; top: 52%; width: 240px; height: 240px; margin: -120px 0 0 -120px; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 255, 255, .55), rgba(255, 255, 255, 0)); opacity: 0; transform: scale(.4); }
.gmagic.open .gm-halo { animation: gm-halo 1.2s var(--ease-out) forwards; }
@keyframes gm-halo { 0% { opacity: 0; transform: scale(.4); } 30% { opacity: .9; } 100% { opacity: .45; transform: scale(1); } }
.gm-card { position: relative; z-index: 1; width: clamp(130px, 22vh, 190px); height: clamp(130px, 22vh, 190px); margin-top: 8px; transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .6s var(--ease-out); will-change: transform; }
.gm-card.touch { transition: transform .12s linear; }
.gm-gift { width: 100%; height: 100%; object-fit: contain; opacity: 0; transform: scale(.4) rotate(-10deg); filter: drop-shadow(0 18px 24px rgba(0, 0, 0, .35)); }
.gmagic.open .gm-gift { animation: gm-in .9s cubic-bezier(.2, 1.4, .4, 1) forwards; }
@keyframes gm-in { 0% { opacity: 0; transform: scale(.4) rotate(-10deg); } 40% { opacity: 1; } 100% { opacity: 1; transform: none; } }
.gm-x { position: absolute; top: 12px; right: 12px; z-index: 3; color: #fff; background: rgba(0, 0, 0, .24) !important; }
.gm-cap { display: grid; justify-items: center; gap: 8px; padding: 18px 22px calc(18px + var(--safe-b)); text-align: center; opacity: 0; transform: translateY(10px); transition: opacity .5s var(--ease-out) .25s, transform .6s var(--ease-out) .25s; }
.gmagic.on .gm-cap { opacity: 1; transform: none; }
.gm-cap > b { font-size: 1.5rem; font-weight: 750; letter-spacing: -.03em; }
.gm-tags { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.gm-tags .bd-dot { width: 10px; height: 10px; margin-right: 4px; }
.gm-who { font-size: .9375rem; color: var(--ink-2); }
.gm-note { max-width: 340px; font-size: .9375rem; line-height: 1.45; padding: 11px 16px; border-radius: 20px; background: var(--card); box-shadow: var(--card-shadow); quotes: '«' '»'; }
.gm-acts { display: grid; gap: 8px; width: min(340px, 100%); margin-top: 6px; }
.gm-acts .btn.dim { color: var(--ink-2); }
.gm-tap { font-size: .8125rem; color: var(--ink-3); margin-top: 2px; }
@media (prefers-reduced-motion: reduce) { .gm-gift { opacity: 1; transform: none; animation: none !important; } .gm-halo { display: none; } }

/* ---------- profile = the person's questionnaire (анкета) ---------- */
.profile-sheet .sheet-body { padding: 0 0 calc(16px + var(--safe-b)); }
.profile-sheet .pv-strip { display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 2px 16px 0; scroll-padding: 0 16px; touch-action: pan-x pan-y; }
.profile-sheet .pv-strip::-webkit-scrollbar { display: none; }
.profile-sheet .pv-card { position: relative; flex: none; width: 78%; height: clamp(300px, 54vh, 500px); border-radius: 30px; overflow: hidden; background: #111; scroll-snap-align: center; transition: width .35s var(--ease-out), transform .55s var(--settle); box-shadow: 0 20px 40px -18px rgba(0, 0, 0, .7), 0 0 0 1px rgba(255, 255, 255, .09), inset 0 1px 0 rgba(255, 255, 255, .16); }
.profile-sheet .pv-card:active { transform: scale(.985); transition-duration: .08s; }
.profile-sheet .pv-strip.one .pv-card { width: 100%; }
.profile-sheet .pv-card.skel { width: 100%; }
.pv-card .pv-bg { position: absolute; left: 0; top: 0; width: 25%; height: 25%; transform: scale(4); transform-origin: 0 0; object-fit: cover; filter: blur(7px) brightness(.75); }
.pv-card .pv-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.pv-card.fit .pv-bg { opacity: 0; }
.pv-dots { display: flex; justify-content: center; gap: 5px; margin-top: 10px; }
.pv-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--line-2); transition: background-color .25s, width .35s var(--settle); }
.pv-dots i.on { width: 18px; border-radius: 4px; background: var(--ink); }
.pv-pad { padding: 0 20px; }
.pv-name { display: flex; align-items: center; gap: 9px; margin-top: 16px; min-width: 0; }
.pv-name h2 { font-weight: 700; font-size: 1.9rem; letter-spacing: -.03em; line-height: 1.1; overflow-wrap: anywhere; }
.pv-name .age { font-size: 1.6rem; font-weight: 400; color: var(--ink-2); flex: none; }
.pv-name .vf-ico { width: 21px; height: 21px; }
.onl-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 2px var(--bg), 0 0 10px var(--ok); flex: none; }
.pv-meta { display: flex; align-items: center; gap: 7px; color: var(--ink-2); font-size: .9375rem; margin-top: 6px; }
.pv-meta .ico { width: 17px; height: 17px; color: var(--ink-3); flex: none; }
.pv-stats { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 10px; color: var(--ink-3); }
.pv-compat { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.pv-compat .cbadge { background: var(--chip); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); height: 34px; padding: 0 13px 0 11px; }
.pv-compat .cbadge .cl { font-size: .6875rem; font-weight: 600; opacity: .7; }
.pv-why { display: inline-flex; align-items: center; gap: 2px; font-size: .8125rem; font-weight: 650; color: var(--ink-2); margin-left: auto; }
.pv-why .ico { width: 14px; height: 14px; }
.pv-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.pv-tags:empty { display: none; }
.pv-section { margin-top: 22px; display: grid; gap: 9px; }
.sec-h { display: flex; align-items: center; gap: 8px; }
.pv-bio { line-height: 1.55; white-space: pre-wrap; word-break: break-word; font-size: 1rem; }
.pv-books { line-height: 1.5; white-space: pre-wrap; word-break: break-word; }
.pv-crush { display: flex; gap: 12px; align-items: center; margin-top: 16px; padding: 14px 16px; border-radius: 22px; background: var(--gl-bg); box-shadow: var(--gl-shadow); border: 0; width: 100%; text-align: left; }
.pv-crush > div { display: grid; gap: 2px; min-width: 0; }
.pv-crush .pc-ic { color: var(--ink); display: grid; }
.pv-crush.super { box-shadow: var(--gl-shadow), inset 0 0 0 1px rgba(var(--gold-rgb), 0.5); background: linear-gradient(120deg, rgba(240, 190, 90, .16), var(--gl-bg)); }
.pv-crush.super .pc-ic { color: var(--gold); }
.pv-crush.gift { box-shadow: var(--gl-shadow), inset 0 0 0 1px rgba(var(--gold-rgb), 0.45); }
.pv-crush q { display: block; color: var(--ink-2); margin-top: 2px; quotes: '«' '»'; font-size: .875rem; }
.comment { display: flex; gap: 10px; align-items: flex-start; }
.comment img, .comment .anon-av { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; background: var(--s3); flex: none; }
.comment p { font-size: .875rem; }
.composer.inline { display: flex; gap: 8px; align-items: flex-end; padding: 10px 0 0; }
.composer.inline textarea { flex: 1; resize: none; border: 1px solid var(--line); border-radius: 22px; padding: 11px 16px; background: var(--s1); outline: none; font-size: 1rem; }
.composer.inline .send-btn { width: 44px; height: 44px; }
.safety-note { display: flex; gap: 6px; align-items: flex-start; margin-top: 16px; }
.safety-note .ico { width: 13px; height: 13px; flex: none; margin-top: 2px; }
.profile-sheet .rows { margin-top: 22px; }
.profile-sheet .sheet-foot { padding-top: 12px; }

/* ---------- Me ---------- */
.me-card { display: flex; gap: 14px; align-items: center; margin: 4px 16px 0; padding: 14px; border-radius: 28px; background: var(--gl-bg); box-shadow: var(--gl-shadow); position: relative; }
.me-card.gold-frame { box-shadow: var(--gl-shadow), 0 0 0 1.5px var(--gold), 0 0 30px rgba(240, 190, 90, .18); }
.me-ava { position: relative; width: 78px; height: 78px; flex: none; border-radius: 50%; transition: transform .55s var(--settle); }
.me-ava:active { transform: scale(.94); transition-duration: .08s; }
.me-ava img, .me-ava .anon-av { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: grid; place-items: center; box-shadow: 0 0 0 2px rgba(255, 255, 255, .8), 0 0 22px rgba(255, 255, 255, .15); }
:root[data-theme='light'] .me-ava img { box-shadow: 0 0 0 2px #fff, 0 8px 20px rgba(20, 20, 30, .2); }
.me-vf { position: absolute; right: -3px; bottom: -3px; width: 26px; height: 26px; border-radius: 50%; background: var(--bg); display: grid; place-items: center; }
.me-vf .ico { width: 21px; height: 21px; }
.me-info { min-width: 0; display: grid; gap: 4px; grid-template-columns: minmax(0, 1fr); }
.me-info h2 { font-size: 1.4rem; font-weight: 700; letter-spacing: -.03em; display: flex; align-items: baseline; gap: 7px; min-width: 0; }
.me-info h2 .age { font-weight: 400; color: var(--ink-2); font-size: 1.15rem; }
.me-info .tags { display: flex; gap: 5px; flex-wrap: wrap; }
.me-btns { display: flex; gap: 8px; margin: 12px 16px 0; }
.me-btns .btn { flex: 1; }
.me-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 12px 16px 0; }
.me-stats > div { background: var(--s1); border-radius: 20px; padding: 12px 4px; display: grid; justify-items: center; box-shadow: inset 0 0 0 1px var(--line); }
.me-stats b { font-weight: 750; font-size: 1.1rem; font-variant-numeric: tabular-nums; }
.me-stats span { font-size: .6875rem; color: var(--ink-3); text-align: center; }
.meter { display: grid; gap: 9px; width: calc(100% - 32px); margin: 12px 16px 0; padding: 14px 16px; border-radius: 22px; background: var(--s1); box-shadow: inset 0 0 0 1px var(--line); text-align: left; transition: transform .55s var(--settle); }
.meter:active { transform: scale(.985); transition-duration: .08s; }
.meter > .small { align-items: baseline; }
.meter > .small > b { min-width: 0; }
.meter > .small > span { white-space: nowrap; flex: none; }
.meter .bar { height: 6px; border-radius: 6px; background: var(--s3); overflow: hidden; }
.meter .bar i { display: block; height: 100%; border-radius: 6px; background: var(--pri); box-shadow: 0 0 12px rgba(255, 255, 255, .45); transform-origin: left; transition: transform .9s var(--ease-out); }
.notice { display: flex; gap: 12px; align-items: center; width: calc(100% - 32px); margin: 12px 16px 0; padding: 12px 14px; border-radius: 22px; text-align: left; }
.notice.warn { background: var(--danger-bg); color: var(--ink); box-shadow: inset 0 0 0 1px rgba(var(--danger-rgb), 0.35); }
.notice .n-ic { width: 36px; height: 36px; border-radius: 12px; display: grid; place-items: center; background: var(--danger-bg); color: var(--danger); flex: none; }
.notice > span:nth-child(2) { flex: 1; display: grid; gap: 1px; } .notice b { font-size: .875rem; } .notice > span > span { font-size: .75rem; color: var(--ink-2); }
.vpromo { display: flex; align-items: center; gap: 12px; margin: 12px 16px 0; padding: 12px 14px; border-radius: 22px; width: calc(100% - 32px); text-align: left; background: var(--gl-bg); box-shadow: var(--gl-shadow); transition: transform .55s var(--settle); }
.vpromo:active { transform: scale(.985); transition-duration: .08s; }
.vp-ic { width: 42px; height: 42px; border-radius: 14px; display: grid; place-items: center; background: var(--pri); color: var(--on-pri); flex: none; --on-verified: #fff; box-shadow: var(--glow); }
.vp-ic .ico { width: 24px; height: 24px; }
.vp-tx { flex: 1; min-width: 0; display: grid; gap: 2px; grid-template-columns: minmax(0, 1fr); }
.vp-tx b { font-size: .9375rem; } .vp-tx span { font-size: .8125rem; color: var(--ink-2); }
/* the subscription card: dark gold, with a light strip that runs across it */
.upsell { position: relative; display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; align-items: center; width: calc(100% - 32px); margin: 12px 16px 0; padding: 15px 18px; border-radius: 26px; text-align: left; overflow: hidden; isolation: isolate; color: #fff8e6;
  background: linear-gradient(135deg, #2a1e08, #4a3510 45%, #2a1e08); box-shadow: inset 0 1px 0 rgba(255, 236, 170, .5), inset 0 0 0 1px rgba(240, 190, 90, .38), 0 16px 34px -14px rgba(240, 170, 60, .35); transition: transform .55s var(--settle); }
.upsell:active { transform: scale(.985); transition-duration: .08s; }
.upsell::before { content: ''; position: absolute; inset: 0; z-index: -1; background: radial-gradient(60% 90% at 90% 0%, rgba(255, 220, 130, .35), transparent 70%), repeating-linear-gradient(100deg, rgba(255, 255, 255, .035) 0 1px, transparent 1px 4px); }
.upsell::after { content: ''; position: absolute; top: -30%; bottom: -30%; left: 0; width: 38%; z-index: 0; pointer-events: none; transform: translateX(-180%) skewX(-22deg); background: linear-gradient(90deg, transparent, rgba(255, 244, 205, .5), transparent); animation: gold-run 4.4s cubic-bezier(.5, 0, .2, 1) infinite 1.2s; }
.upsell .caps { grid-column: 1; color: #f0c25e; position: relative; z-index: 1; }
.upsell b { grid-column: 1; font-size: 1.0625rem; position: relative; z-index: 1; }
.upsell > span:not(.caps):not(.go) { grid-column: 1; font-size: .75rem; opacity: .8; position: relative; z-index: 1; }
.upsell .go { grid-column: 2; grid-row: 1 / span 3; width: 36px; height: 36px; border-radius: 50%; background: rgba(255, 236, 170, .18); display: grid; place-items: center; position: relative; z-index: 1; color: #f7dc8f; }
:root.lite .upsell::after { display: none; }
.section-title.caps { margin: 24px 20px 9px; }
.rows-wrap { margin: 0 16px; }
.scroll > .rows { margin: 0 16px; }
.ed-sec { margin-top: 24px; } .ed-sec > h3 { margin-bottom: 10px; }
.ed-sec.flash-sec { animation: flash-sec 1.4s var(--ease-out); border-radius: 22px; }
@keyframes flash-sec { 0%, 40% { box-shadow: 0 0 0 3px var(--line-2), 0 0 30px rgba(255, 255, 255, .12); } 100% { box-shadow: 0 0 0 0 transparent; } }

/* subscriptions */
.paywall-sheet .sheet-body { padding-top: 6px; }
.plan-hero { position: relative; padding: 18px; margin-top: 14px; border-radius: 28px; background: var(--s1); box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; isolation: isolate; }
.plan-hero h3 { font-weight: 750; font-size: 1.3rem; letter-spacing: -.03em; }
.plan-hero .feat { display: grid; gap: 9px; margin-top: 14px; }
.plan-hero .feat div, .feat div { display: flex; align-items: center; gap: 10px; font-size: .9375rem; }
.feat .ico { width: 18px; height: 18px; flex: none; }
.ph-ico2 { width: 42px; height: 42px; border-radius: 14px; background: var(--chip-2); display: grid; place-items: center; margin-bottom: 12px; }
/* Gold: brushed molten gold, a real specular strip travelling across, small glints */
.plan-hero.gold { color: var(--gold-ink); box-shadow: inset 0 1px 0 rgba(255, 250, 225, .85), inset 0 -1px 0 rgba(90, 55, 0, .4), 0 22px 44px -18px rgba(240, 170, 60, .5), 0 0 0 1px rgba(255, 226, 150, .3);
  background: radial-gradient(120% 90% at 0% 0%, rgba(255, 252, 232, .75), transparent 45%), linear-gradient(155deg, #f9e3a0 0%, #e4b04a 24%, #b9821f 46%, #f3d27e 62%, #c9942f 80%, #8a5b12 100%); }
.plan-hero.gold::before { content: ''; position: absolute; inset: 0; z-index: -1; opacity: .5; mix-blend-mode: soft-light; background: repeating-linear-gradient(98deg, rgba(255, 255, 255, .35) 0 1px, transparent 1px 3px), repeating-linear-gradient(82deg, rgba(0, 0, 0, .12) 0 1px, transparent 1px 5px); }
.plan-hero.gold::after { content: ''; position: absolute; top: -25%; bottom: -25%; left: 0; width: 36%; z-index: 0; pointer-events: none; transform: translateX(-180%) skewX(-24deg);
  background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, .0) 10%, rgba(255, 253, 240, .95) 50%, rgba(255, 255, 255, 0) 90%, transparent 100%); mix-blend-mode: overlay; filter: blur(1.5px); animation: gold-run 3.6s cubic-bezier(.5, 0, .2, 1) infinite; }
.plan-hero.gold > * { position: relative; z-index: 1; }
.plan-hero.gold .ph-ico2 { background: rgba(58, 38, 0, .16); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5); color: var(--gold-ink); }
.plan-hero.gold h3 { text-shadow: 0 1px 0 rgba(255, 255, 255, .45); }
.glint { position: absolute; z-index: 2; width: 16px; height: 16px; pointer-events: none; opacity: 0; background: radial-gradient(circle, #fff 0, rgba(255, 255, 255, 0) 60%); }
.glint::before, .glint::after { content: ''; position: absolute; left: 50%; top: 50%; background: linear-gradient(90deg, transparent, #fff, transparent); }
.glint::before { width: 30px; height: 1.5px; margin: -.75px 0 0 -15px; } .glint::after { width: 1.5px; height: 30px; margin: -15px 0 0 -.75px; background: linear-gradient(0deg, transparent, #fff, transparent); }
.glint.g1 { right: 22px; top: 18px; animation: glint 3.6s ease-in-out infinite .4s; } .glint.g2 { left: 40%; bottom: 20px; animation: glint 3.6s ease-in-out infinite 1.6s; } .glint.g3 { right: 34%; top: 46%; animation: glint 3.6s ease-in-out infinite 2.6s; }
@keyframes glint { 0%, 100% { opacity: 0; transform: scale(.3) rotate(0); } 12% { opacity: 1; transform: scale(1) rotate(45deg); } 26% { opacity: 0; transform: scale(.4) rotate(90deg); } }
:root.lite .plan-hero.gold::after, :root.lite .glint { display: none; }
.periods { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; margin-top: 14px; }
.period { position: relative; display: grid; justify-items: center; gap: 2px; padding: 14px 6px; border-radius: 22px; background: var(--s1); box-shadow: inset 0 0 0 1px var(--line); transition: box-shadow .25s, background-color .25s, transform .55s var(--settle); }
.period:active { transform: scale(.95); transition-duration: .08s; }
.period[aria-pressed='true'] { box-shadow: inset 0 0 0 1.5px var(--ink), 0 0 30px rgba(255, 255, 255, .08); background: var(--s2); }
.paywall-sheet[data-plan='gold'] .period[aria-pressed='true'] { box-shadow: inset 0 0 0 1.5px var(--gold), 0 0 30px rgba(240, 190, 90, .16); }
.period b { font-weight: 750; font-size: 1rem; }
.period span { font-size: .75rem; color: var(--ink-3); }
.period .save { position: absolute; top: -9px; right: 6px; height: 19px; font-size: .625rem; }
.renew { padding-top: 4px; }
.renew-feat { display: grid; gap: 8px; margin: 14px 2px; }
.perks-hero { text-align: center; display: grid; justify-items: center; gap: 6px; padding-top: 4px; }
.ph-badge { width: 66px; height: 66px; border-radius: 24px; display: grid; place-items: center; background: var(--pri); color: var(--on-pri); box-shadow: var(--glow), inset 0 1px 0 rgba(255, 255, 255, .6); animation: pop-in .7s var(--settle); --on-verified: #fff; }
.ph-badge .ico { width: 34px; height: 34px; }
.ph-badge.inv { background: linear-gradient(180deg, #fbe2a0, #e6ad42); color: var(--gold-ink); box-shadow: 0 0 34px rgba(240, 190, 90, .4), inset 0 1px 0 rgba(255, 255, 255, .7); }
.perks { display: grid; gap: 12px; margin-top: 18px; }
.perk { display: flex; gap: 13px; align-items: flex-start; }
.pk-ic { width: 38px; height: 38px; border-radius: 13px; display: grid; place-items: center; background: var(--chip); flex: none; color: var(--ink); }
.pk-ic .ico { width: 20px; height: 20px; }
.perk > div { display: grid; gap: 1px; min-width: 0; grid-template-columns: minmax(0, 1fr); }
.perk b { font-size: .9375rem; } .perk span { font-size: .8125rem; color: var(--ink-2); }
.v-bonus { margin-top: 12px; padding: 11px 14px; border-radius: 18px; background: var(--gold-bg); color: var(--gold); font-size: .875rem; font-weight: 600; display: flex; gap: 8px; align-items: center; }
.v-bonus .ico { width: 18px; height: 18px; }
.inv-prog { display: grid; gap: 6px; margin-top: 14px; }
.ip-bar { display: block; height: 8px; border-radius: 8px; background: var(--s3); overflow: hidden; }
.ip-bar i { display: block; height: 100%; background: linear-gradient(90deg, #f0c25e, #fff1c4); transform-origin: left; border-radius: 8px; }
.inv-link { padding: 14px 16px; border-radius: 18px; background: var(--s1); box-shadow: inset 0 0 0 1px var(--line); font-family: var(--mono); font-size: .8125rem; word-break: break-all; margin: 14px 0; }
.gesture { display: grid; place-items: center; font-size: 84px; padding: 22px; }
.selfie { width: 100%; border-radius: 26px; }
.selfie-wrap { position: relative; margin-top: 10px; } .selfie { max-height: 55vh; object-fit: cover; display: block; }
.selfie-g { position: absolute; top: 10px; right: 12px; font-size: 2rem; }

/* verification */
.v-state { display: grid; justify-items: center; text-align: center; gap: 4px; padding-top: 8px; }
.v-big { position: relative; width: 82px; height: 82px; border-radius: 28px; display: grid; place-items: center; margin-bottom: 8px; background: var(--gl-bg); box-shadow: var(--gl-shadow); }
.v-big .ico { width: 40px; height: 40px; }
.v-state.ok .v-big { color: var(--ink); --on-verified: var(--bg); box-shadow: var(--gl-shadow), 0 0 40px rgba(255, 255, 255, .15); }
.v-state.bad .v-big { color: var(--danger); background: var(--danger-bg); box-shadow: inset 0 0 0 1px rgba(var(--danger-rgb), 0.35); }
.v-orbit { position: absolute; inset: -7px; border-radius: 34px; border: 2px solid transparent; border-top-color: var(--ink); animation: spin 1.4s linear infinite; }
.v-timeline { display: grid; gap: 0; margin: 16px 4px 0; }
.v-timeline div { position: relative; display: flex; align-items: center; gap: 12px; padding: 8px 0; font-size: .875rem; color: var(--ink-3); }
.v-timeline i { width: 12px; height: 12px; border-radius: 50%; background: var(--s3); flex: none; }
.v-timeline .done { color: var(--ink); } .v-timeline .done i { background: var(--ok); }
.v-timeline .now { color: var(--ink); font-weight: 650; } .v-timeline .now i { background: var(--pri); box-shadow: 0 0 0 4px var(--chip-2); animation: blink 1.4s infinite; }
.v-fix { display: grid; gap: 8px; margin-top: 14px; } .v-fix > b { font-size: .875rem; }
.v-steps { display: grid; gap: 10px; margin-top: 14px; }
.v-step { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 18px; background: var(--s1); box-shadow: inset 0 0 0 1px var(--line); font-size: .875rem; }
.v-step.dim { opacity: .5; }
.v-n { width: 26px; height: 26px; border-radius: 50%; background: var(--pri); color: var(--on-pri); display: grid; place-items: center; font-weight: 700; font-size: .75rem; flex: none; }
.v-g { margin-left: auto; font-size: 1.8rem; }
.v-compare { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 14px 0 4px; }
.v-compare img, .v-compare .anon-av { width: 66px; height: 66px; border-radius: 20px; object-fit: cover; }
.v-compare .v-arrow { color: var(--ink-3); } .v-gest { font-size: 2.6rem; }
.priv-box { display: flex; gap: 10px; align-items: flex-start; margin-top: 14px; padding: 12px 14px; border-radius: 18px; background: var(--chip); }
.priv-box > .ico { width: 18px; height: 18px; color: var(--ok); flex: none; margin-top: 1px; }
.priv-box > div { display: grid; gap: 2px; } .priv-box b { font-size: .8125rem; } .priv-box span { font-size: .75rem; color: var(--ink-2); line-height: 1.4; }
.priv-sec { display: flex; gap: 12px; align-items: flex-start; padding: 13px 0; position: relative; }
.priv-sec + .priv-sec::before { content: ''; position: absolute; left: 46px; right: 0; top: 0; height: 1px; background: var(--line); }
.priv-sec .ps-ic { width: 34px; height: 34px; border-radius: 12px; display: grid; place-items: center; background: var(--chip); flex: none; }
.priv-sec .ps-ic .ico { width: 18px; height: 18px; }
.priv-sec b { font-size: .9375rem; } .priv-sec p { font-size: .8125rem; color: var(--ink-2); margin-top: 2px; line-height: 1.5; }
.vf-big .ico { width: 88px; height: 88px; }

/* camera */
.cam-box { position: relative; width: 100%; aspect-ratio: 3 / 4; max-height: 60vh; border-radius: 28px; overflow: hidden; background: #000; margin-top: 8px; box-shadow: inset 0 0 0 1px var(--line-2); }
.cam-box video { width: 100%; height: 100%; object-fit: cover; } .cam-box video.mirror { transform: scaleX(-1); }
.cam-wait { position: absolute; inset: 0; display: grid; place-items: center; }
.cam-ov { position: absolute; inset: 0; pointer-events: none; }
.cam-face { position: absolute; left: 20%; right: 20%; top: 14%; bottom: 22%; border: 2px dashed rgba(255, 255, 255, .6); border-radius: 50%; }
.cam-g { position: absolute; top: 12px; right: 12px; font-size: 2.2rem; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .4)); }
.cam-hint { text-align: center; color: var(--ink-2); margin-top: 10px; font-size: .875rem; }
.cam-actions { display: flex; align-items: center; justify-content: space-around; }
.cam-shutter { width: 76px; height: 76px; border-radius: 50%; box-shadow: inset 0 0 0 4px var(--ink), 0 0 30px rgba(255, 255, 255, .12); display: grid; place-items: center; }
.cam-shutter span { width: 60px; height: 60px; border-radius: 50%; background: var(--pri); transition: transform .5s var(--settle); } .cam-shutter:active span { transform: scale(.86); transition-duration: .08s; } .cam-shutter[disabled] { opacity: .4; }
.cam-denied { position: absolute; inset: 0; display: grid; place-items: center; align-content: center; gap: 10px; padding: 24px; text-align: center; color: #fff; } .cam-denied > .ico { width: 40px; height: 40px; }
.tut { display: grid; gap: 10px; margin-top: 12px; } .tut-row { display: flex; align-items: center; gap: 12px; font-size: .9375rem; line-height: 1.4; }
.tut-ic { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; flex: none; background: var(--chip); } .tut-ic .ico { width: 20px; height: 20px; }
.tut-ic.like { background: var(--ok-bg); color: var(--ok); } .tut-ic.pass { background: var(--danger-bg); color: var(--danger); }
.tut-ic.super { background: var(--gold-bg); color: var(--gold); } .tut-ic.match { background: var(--chip-2); } .tut-ic.gift { background: var(--gold-bg); color: var(--gold); }
.done-card { position: relative; border-radius: 30px; overflow: hidden; height: min(52vh, 440px); max-width: 360px; margin: 14px auto; background: var(--s2); box-shadow: 0 24px 50px -20px rgba(0, 0, 0, .7), 0 0 0 1px rgba(255, 255, 255, .09); }
.done-card.compact { height: min(34vh, 280px); }
.done-card img { width: 100%; height: 100%; object-fit: cover; }
.done-card.compact img { object-position: center 30%; }
.done-card .shade { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0, 0, 0, .88), transparent 55%); }
.done-card .info { position: absolute; left: 18px; right: 16px; bottom: 16px; color: #fff; }
.done-card .name { display: flex; align-items: baseline; gap: 8px; }
.done-card .name h2 { font-size: 1.6rem; font-weight: 700; }
.done-card .meta { font-size: .8125rem; opacity: .85; margin-top: 4px; }
.done-card .tags { display: flex; gap: 6px; margin-top: 8px; }

/* ---------- onboarding + consent ---------- */
.ob { position: absolute; inset: 0; display: flex; flex-direction: column; background: var(--bg); z-index: 30; transition: opacity .4s var(--ease-out); overflow: hidden; }
.ob::before { content: ''; position: absolute; inset: 0; background: var(--fx); pointer-events: none; }
.ob-head { display: flex; align-items: center; gap: 12px; padding: calc(8px + var(--safe-t)) 14px 8px; position: relative; z-index: 1; min-height: calc(56px + var(--safe-t)); }
.ob-prog { flex: 1; height: 4px; border-radius: 4px; background: var(--s3); overflow: hidden; }
.ob-prog i { display: block; height: 100%; background: var(--pri); box-shadow: 0 0 12px rgba(255, 255, 255, .5); transform: scaleX(.04); transform-origin: left; transition: transform .7s var(--ease-out); border-radius: 4px; }
.ob-step-n { font-size: .75rem; font-weight: 700; color: var(--ink-3); min-width: 34px; text-align: right; font-variant-numeric: tabular-nums; }
.ob-body { flex: 1; overflow-y: auto; padding: 14px 22px 20px; position: relative; z-index: 1; scrollbar-width: none; overscroll-behavior: contain; }
.ob-body::-webkit-scrollbar { display: none; }
.ob-step { animation: ob-in .55s var(--ease-out); }
.ob-step.back { animation: ob-in-b .55s var(--ease-out); }
@keyframes ob-in { from { opacity: 0; transform: translateX(26px); } }
@keyframes ob-in-b { from { opacity: 0; transform: translateX(-26px); } }
.ob-step h1 { font-weight: 700; font-size: 1.9rem; line-height: 1.12; letter-spacing: -.035em; margin-bottom: 8px; }
.ob-step .lead { color: var(--ink-2); margin-bottom: 20px; font-size: .9375rem; }
.ob-foot { padding: 10px 22px calc(16px + var(--safe-b)); position: relative; z-index: 1; }
.ob-brand { display: flex; justify-content: center; margin: 14px 0 30px; } .ob-brand .wordmark .w1 { font-size: 1.5rem; } .ob-brand .wordmark .w2 { font-size: 1.9rem; }
.lang-opt { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 16px 18px; border-radius: 24px; background: var(--gl-bg); box-shadow: var(--gl-shadow); margin-bottom: 10px; transition: transform .55s var(--settle); }
.lang-opt:active { transform: scale(.975); transition-duration: .08s; }
.lang-opt b { font-weight: 700; font-size: 1.125rem; }
.date3 { display: grid; grid-template-columns: .8fr 1.5fr 1fr; gap: 8px; margin-top: 14px; }
.date3 .select { padding-left: 12px; padding-right: 28px; background-position: calc(100% - 17px) 50%, calc(100% - 11px) 50%; }
.bday-body { margin-top: 14px; }
.zod-line { margin-top: 10px; min-height: 22px; font-weight: 650; }
.fandoms { margin-top: 8px; border-radius: 20px; background: var(--s1); box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; }
.fan-toggle { display: flex; align-items: center; gap: 8px; width: 100%; padding: 11px 14px; font-size: .875rem; font-weight: 650; text-align: left; }
.fan-toggle > span:first-child { flex: 1; display: inline-flex; align-items: center; gap: 7px; } .fan-toggle .ico { width: 16px; height: 16px; transition: transform .35s var(--settle); }
.fandoms.open .fan-toggle .ico { transform: rotate(180deg); }
.fandoms .chips { padding: 0 12px 12px; gap: 6px; }
.ig { margin-bottom: 20px; display: grid; gap: 10px; }
.ph-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }
.ph { position: relative; aspect-ratio: 3 / 4; border-radius: 22px; overflow: hidden; background: var(--s1); display: grid; place-items: center; color: var(--ink-3); box-shadow: inset 0 0 0 1px var(--line); transition: transform .55s var(--settle); }
.ph:active { transform: scale(.96); transition-duration: .08s; }
.ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ph.add { background: transparent; gap: 4px; font-size: .75rem; box-shadow: none; border: 1.5px dashed var(--line-2); align-content: center; justify-items: center; }
.ph.add .ico { width: 26px; height: 26px; }
.ph .lbl { position: absolute; left: 6px; bottom: 6px; background: rgba(0, 0, 0, .55); color: #fff; }
.ph .spin { position: absolute; }
.ph.busy img { opacity: .5; }
.ph-menu { display: grid; place-items: center; } .ph-menu img { max-height: 36vh; border-radius: 22px; object-fit: contain; }
.ob-perks { display: grid; gap: 10px; margin-top: 14px; padding: 16px; border-radius: 24px; background: var(--gl-bg); box-shadow: var(--gl-shadow); }
.ob-perks > b { font-size: .9375rem; }
.ob-perk { display: flex; gap: 11px; align-items: center; font-size: .875rem; }
.ob-perk > span:first-child { width: 28px; height: 28px; border-radius: 9px; background: var(--chip); display: grid; place-items: center; flex: none; }
.ob-perk .ico { width: 16px; height: 16px; }
.ob-perks .xs { display: flex; gap: 5px; align-items: center; margin-top: 2px; }
.ob-perks .xs .ico { width: 13px; height: 13px; }
.dc-vf-ghost { color: #fff; opacity: .9; align-self: center; animation: pop-in .8s var(--settle) .4s backwards; --on-verified: #0b0b0c; }
.dc-vf-ghost .ico { width: 20px; height: 20px; }

/* registration consent: three documents, one tick each (or all at once) */
.consent-list { display: grid; gap: 10px; margin-top: 4px; }
.consent-item { display: flex; align-items: flex-start; gap: 13px; width: 100%; padding: 14px 15px; border-radius: 22px; background: var(--s1); box-shadow: inset 0 0 0 1px var(--line); text-align: left; transition: box-shadow .3s, background-color .3s, transform .55s var(--settle); }
.consent-item:active { transform: scale(.985); transition-duration: .08s; }
.consent-item[aria-checked='true'] { box-shadow: inset 0 0 0 1.5px var(--ink), 0 0 30px rgba(255, 255, 255, .07); background: var(--s2); }
.consent-item .check { margin-top: 1px; }
.consent-item .ci-tx { flex: 1; min-width: 0; display: grid; gap: 4px; }
.consent-item .ci-tx b { font-size: .9375rem; font-weight: 650; line-height: 1.3; }
.consent-item .ci-tx span { font-size: .8125rem; color: var(--ink-2); line-height: 1.4; }
.consent-item .ci-read { display: inline-flex; align-items: center; gap: 3px; margin-top: 4px; font-size: .8125rem; font-weight: 650; color: var(--ink); text-decoration: underline; text-decoration-color: var(--ink-3); text-underline-offset: 3px; justify-self: start; padding: 4px 0; }
.consent-item .ci-read .ico { width: 14px; height: 14px; }
.consent-all { display: flex; align-items: center; gap: 13px; width: 100%; margin-top: 14px; padding: 15px; border-radius: 22px; background: var(--gl-bg); box-shadow: var(--gl-shadow); text-align: left; font-weight: 650; }
.consent-all[aria-checked='true'] { box-shadow: var(--gl-shadow), inset 0 0 0 1.5px var(--ink); }
.consent-note { margin-top: 14px; font-size: .75rem; line-height: 1.5; color: var(--ink-3); }
.consent-gate { position: fixed; inset: 0; z-index: 9500; display: flex; flex-direction: column; background: var(--bg); max-width: 540px; margin: 0 auto; }
.consent-gate::before { content: ''; position: absolute; inset: 0; background: var(--fx); pointer-events: none; }
.consent-gate .ob-body, .consent-gate .ob-foot { position: relative; z-index: 1; }

/* document reader */
.doc-page .page-body { padding: 4px 18px calc(24px + var(--safe-b)); }
.doc-meta { font-size: .75rem; color: var(--ink-3); margin: 4px 0 14px; }
.doc-toc { display: grid; gap: 2px; margin: 0 0 18px; padding: 8px; border-radius: 22px; background: var(--s1); box-shadow: inset 0 0 0 1px var(--line); }
.doc-toc button { display: flex; align-items: center; gap: 8px; padding: 9px 10px; border-radius: 14px; font-size: .8125rem; text-align: left; color: var(--ink-2); transition: background-color .2s; }
.doc-toc button:active { background: var(--chip); }
.doc-sec { margin-bottom: 22px; scroll-margin-top: 70px; }
.doc-sec h3 { font-weight: 700; font-size: 1.0625rem; line-height: 1.3; margin-bottom: 8px; letter-spacing: -.02em; }
.doc-sec p { font-size: .875rem; line-height: 1.6; color: var(--ink-2); margin-bottom: 9px; text-wrap: pretty; -webkit-user-select: text; user-select: text; }
.doc-tabs { position: sticky; top: 0; z-index: 3; padding: 2px 0 12px; }
.doc-end { text-align: center; padding: 20px 0 6px; color: var(--ink-3); font-size: .8125rem; }

/* ---------- admin ---------- */
.adm-tabs { position: relative; z-index: 4; display: flex; gap: 6px; padding: 8px 14px; overflow-x: auto; scrollbar-width: none; flex: none; }
.adm-tabs::-webkit-scrollbar { display: none; }
.adm-tabs button { position: relative; flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 38px; padding: 0 14px; border-radius: 99px; background: var(--chip); color: var(--ink-2); font-size: .8125rem; font-weight: 600; transition: background-color .25s, color .25s, transform .55s var(--settle); }
.adm-tabs button:active { transform: scale(.94); transition-duration: .08s; }
.adm-tabs button[aria-selected='true'] { background: var(--pri); color: var(--on-pri); }
.adm-tabs .ico { width: 16px; height: 16px; }
.adm-tabs .badge { position: absolute; top: -4px; right: -3px; background: var(--danger); color: #fff; }
.adm-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.adm-stat { background: var(--s1); border-radius: 20px; padding: 13px 8px; display: grid; justify-items: center; gap: 2px; box-shadow: inset 0 0 0 1px var(--line); }
.adm-stat b { font-weight: 750; font-size: 1.1rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; font-variant-numeric: tabular-nums; }
.adm-stat span { font-size: .625rem; color: var(--ink-3); text-align: center; }
.kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 8px; }
.kpi { display: grid; gap: 3px; align-content: start; padding: 13px 11px; border-radius: 20px; background: var(--s1); box-shadow: inset 0 0 0 1px var(--line); min-width: 0; }
.kpi b { font-weight: 750; font-size: 1.15rem; line-height: 1.1; font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kpi span { font-size: .6875rem; color: var(--ink-3); line-height: 1.25; }
.kpi.alert { background: var(--danger-bg); box-shadow: inset 0 0 0 1px rgba(var(--danger-rgb), 0.4); }
.kpi.alert b { color: var(--danger); }
.spark { display: block; width: 100%; height: 90px; border-radius: 20px; background: var(--s1); box-shadow: inset 0 0 0 1px var(--line); }
.adm-card { display: grid; gap: 8px; padding: 14px 15px; margin-bottom: 10px; border-radius: 22px; background: var(--s1); box-shadow: inset 0 0 0 1px var(--line); min-width: 0; }
.adm-card .quote { padding: 9px 12px; border-radius: 14px; background: var(--chip); font-size: .875rem; white-space: pre-wrap; overflow-wrap: anywhere; }
.adm-card .btns { display: flex; flex-wrap: wrap; gap: 6px; }
.adm-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.wl { display: flex; align-items: center; gap: 10px; min-width: 0; }
.wl img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; background: var(--s3); flex: none; }
.wl > div { min-width: 0; }
.wl b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adm-photos { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.adm-photos img { width: 110px; height: 140px; object-fit: cover; border-radius: 16px; flex: none; background: var(--s3); }
.adm-user-row { position: relative; width: 100%; display: flex; align-items: center; gap: 11px; padding: 10px 4px; text-align: left; }
.adm-user-row + .adm-user-row::before { content: ''; position: absolute; left: 58px; right: 0; top: 0; height: 1px; background: var(--line); }
.adm-user-row > img, .adm-user-row > .ph { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex: none; background: var(--s3); aspect-ratio: auto; }
.adm-user-row .nm { flex: 1; min-width: 0; display: grid; gap: 2px; grid-template-columns: minmax(0, 1fr); }
.adm-user-row .nm b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .9375rem; }
.adm-user-row .nm > span { font-size: .75rem; color: var(--ink-3); }
.adm-user-row .pill-row { display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; max-width: 40%; }
.slot { display: flex; gap: 13px; align-items: center; width: 100%; padding: 12px 0; text-align: left; }
.slot .th { width: 52px; height: 52px; border-radius: 15px; object-fit: cover; background: var(--s3); display: grid; place-items: center; color: var(--ink-3); flex: none; }
.ad-preview { position: relative; aspect-ratio: 4 / 5; border-radius: 26px; overflow: hidden; background: var(--s2); }
.ad-preview img { width: 100%; height: 100%; object-fit: cover; }
.ad-prev-t { font-weight: 750; font-size: 1.4rem; line-height: 1.1; margin-top: 4px; }
.adm-name { font-weight: 750; font-size: 1.6rem; letter-spacing: -.03em; margin-top: 12px; }
.set-group { margin-top: 18px; padding: 15px; border-radius: 24px; background: var(--s1); box-shadow: inset 0 0 0 1px var(--line); display: grid; gap: 14px; }
.set-group h3 { font-weight: 700; font-size: 1rem; }
.set-row { display: grid; gap: 6px; min-width: 0; }
.set-row > label { font-size: .8125rem; font-weight: 600; color: var(--ink-2); line-height: 1.35; }
.set-row.bool { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; }
.set-row .err { font-size: .75rem; color: var(--danger); }
.save-bar { position: sticky; bottom: 0; z-index: 3; padding: 14px 0 calc(8px + var(--safe-b)); background: linear-gradient(transparent, var(--bg) 40%); margin-top: 12px; }
.sec-row { display: grid; gap: 8px; }
.sec-def { display: flex; align-items: center; gap: 8px; font-size: .8125rem; font-weight: 650; color: var(--ink-2); }
.sec-def input { width: 18px; height: 18px; accent-color: #fff; }
.sec-f { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; align-items: center; }
.sec-f .mono { grid-column: 1 / -1; }
.adm-note { display: flex; gap: 8px; align-items: flex-start; margin: 6px 0 10px; padding: 11px 13px; border-radius: 18px; background: var(--chip); font-size: .75rem; color: var(--ink-2); line-height: 1.45; }
.adm-note .ico { width: 15px; height: 15px; flex: none; margin-top: 1px; }
.adm-chat-row { position: relative; display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 2px; text-align: left; }
.adm-chat-row + .adm-chat-row::before { content: ''; position: absolute; left: 50px; right: 0; top: 0; height: 1px; background: var(--line); }
.adm-pair { display: flex; flex: none; }
.adm-pair img, .adm-pair .ph { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; background: var(--s3); box-shadow: 0 0 0 2px var(--bg); aspect-ratio: auto; }
.adm-pair > :last-child { margin-left: -12px; }
.adm-chat-row .nm { flex: 1; min-width: 0; display: grid; gap: 2px; grid-template-columns: minmax(0, 1fr); }
.adm-chat-row .nm b { font-size: .875rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adm-chat-row .nm > span { font-size: .75rem; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acr-r { display: grid; gap: 4px; justify-items: end; flex: none; }
.adm-hit { width: 100%; text-align: left; }
.am-head { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 4px; }
.am-user { display: flex; gap: 8px; align-items: center; padding: 9px; border-radius: 18px; background: var(--s1); box-shadow: inset 0 0 0 1px var(--line); text-align: left; min-width: 0; }
.am-user img, .am-user .ph { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; flex: none; background: var(--s3); aspect-ratio: auto; }
.am-user > span { display: grid; min-width: 0; } .am-user b { font-size: .8125rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.am-list { display: grid; gap: 6px; }
.am { display: flex; } .am.r { justify-content: flex-end; }
.am-b { position: relative; min-width: 160px; max-width: 84%; padding: 9px 12px; border-radius: 18px; background: var(--s1); box-shadow: inset 0 0 0 1px var(--line); display: grid; gap: 4px; font-size: .875rem; overflow-wrap: anywhere; }
.am.r .am-b { background: var(--s2); }
.am.del .am-b { opacity: .85; box-shadow: none; border: 1.5px dashed var(--danger); }
.am.del p { text-decoration: line-through; text-decoration-color: rgba(var(--danger-rgb), 0.6); }
.am-h { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: .6875rem; color: var(--ink-3); }
.am-h b { color: var(--ink); font-size: .75rem; }
.am-ph { max-width: 220px; border-radius: 14px; cursor: zoom-in; }
.am-circle { width: 160px; height: 160px; border-radius: 50%; object-fit: cover; background: #000; }
.am-b audio { width: 220px; max-width: 100%; }
.am-gift { display: flex; align-items: center; gap: 8px; } .am-gift img { width: 40px; height: 40px; object-fit: contain; }
.am-edits summary { font-size: .6875rem; color: var(--ink-3); cursor: pointer; }
.am-edits div { font-size: .75rem; color: var(--ink-2); padding: 2px 0; }
.am-act { display: flex; justify-content: flex-end; }
.am-sys { text-align: center; font-size: .6875rem; color: var(--ink-3); padding: 4px; }
.am-del { margin-left: auto; width: 28px; height: 28px; border-radius: 9px; display: grid; place-items: center; color: var(--ink-3); }
.am-del:active { background: var(--chip); color: var(--danger); }
.am-del .ico { width: 15px; height: 15px; }
.am-date, .am-q { font-size: .8125rem; color: var(--ink-2); }
.am.flash .am-b { animation: flash 1.4s var(--ease-out); }
.gold-ring { box-shadow: 0 0 0 2px var(--gold), 0 0 24px rgba(240, 190, 90, .25) !important; }
.card2.leaving { pointer-events: none; }
.locked { opacity: .6; }
.ad-sheet .field { margin-top: 12px; }
.doc-toc-btn { display: flex; align-items: center; gap: 10px; width: 100%; padding: 13px 16px; margin-bottom: 14px; border-radius: 20px; background: var(--s1); box-shadow: inset 0 0 0 1px var(--line); font-size: .875rem; font-weight: 600; text-align: left; transition: transform .55s var(--settle); }
.doc-toc-btn:active { transform: scale(.985); transition-duration: .08s; }
.doc-toc-btn > span { flex: 1; } .doc-toc-btn .ico { width: 18px; height: 18px; color: var(--ink-2); transition: transform .35s var(--settle); }
.doc-toc-btn[aria-expanded='true'] > .ico:last-child { transform: rotate(180deg); }

/* ---------- date picker (chat) ---------- */
.dp-row { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 0 -18px; padding: 2px 18px 4px; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; touch-action: pan-x pan-y; }
.page-body .dp-row { margin: 0 -16px; padding-left: 16px; padding-right: 16px; }
.dp-row::-webkit-scrollbar { display: none; }
.dp-day { flex: none; width: 60px; padding: 9px 0 8px; border-radius: 20px; display: grid; justify-items: center; gap: 0; background: var(--s1); box-shadow: inset 0 0 0 1px var(--line); scroll-snap-align: center; transition: background-color .25s, color .25s, transform .55s var(--settle); }
.dp-day span { font-size: .6875rem; font-weight: 650; color: var(--ink-3); text-transform: capitalize; white-space: nowrap; max-width: 54px; overflow: hidden; text-overflow: ellipsis; }
.dp-day b { font-size: 1.15rem; line-height: 1.25; font-variant-numeric: tabular-nums; }
.dp-day small { font-size: .625rem; color: var(--ink-3); }
.dp-time { flex: none; padding: 10px 14px; border-radius: 16px; background: var(--s1); box-shadow: inset 0 0 0 1px var(--line); font-weight: 650; font-size: .9375rem; font-variant-numeric: tabular-nums; scroll-snap-align: center; transition: background-color .25s, color .25s, transform .55s var(--settle); }
.dp-day[aria-pressed='true'], .dp-time[aria-pressed='true'] { background: var(--pri); color: var(--on-pri); box-shadow: var(--glow); }
.dp-day[aria-pressed='true'] span, .dp-day[aria-pressed='true'] small { color: inherit; opacity: .7; }
.dp-day:disabled, .dp-time:disabled { opacity: .3; }
.dp-day:active, .dp-time:active { transform: scale(.93); transition-duration: .08s; }
.dp-sum { display: flex; gap: 8px; align-items: center; margin-top: 14px; padding: 11px 14px; border-radius: 18px; background: var(--chip-2); font-weight: 650; font-size: .875rem; }
.dp-sum .ico { width: 17px; height: 17px; flex: none; }
.date-sheet .privacy-line { margin-top: 8px; }

/* compatibility badges outside the photo (recommendations, profile) */
.cbadge.solid { background: var(--chip); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); height: 34px; padding: 0 13px 0 11px; }
.cbadge .cl { font-size: .6875rem; font-weight: 600; opacity: .7; }
.rc-badges .cbadge { background: var(--chip); }
.circle-proc, .mcircle.proc { opacity: .9; }

/* reaction picker (floats above the "+" pill) */
.rxpick { position: fixed; display: flex; gap: 2px; padding: 5px; border-radius: 99px; background: var(--sheet); -webkit-backdrop-filter: blur(30px) saturate(1.5); backdrop-filter: blur(30px) saturate(1.5); box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255, 255, 255, .2), inset 0 0 0 1px var(--line); max-width: calc(100vw - 16px); overflow-x: auto; scrollbar-width: none; opacity: 0; transform: scale(.85) translateY(6px); transition: opacity .2s, transform .45s var(--settle); }
.rxpick.on { opacity: 1; transform: none; }
.rxpick button { width: 42px; height: 42px; flex: none; border-radius: 50%; font-size: 1.45rem; display: grid; place-items: center; transition: transform .45s var(--settle), background-color .2s; }
.rxpick button:active { transform: scale(1.35); transition-duration: .1s; }
.rxpick button.mine { background: var(--chip-2); }
.cmp-field.shake { animation: shake .45s var(--ease-out); }
@keyframes shake { 15%, 55% { transform: translateX(-6px); } 35%, 75% { transform: translateX(6px); } }
.ag-ic.a8 { color: var(--ink); }
.cc-i { display: inline-flex; align-items: center; gap: 3px; vertical-align: middle; } .cc-i .ico { width: 13px; height: 13px; }
.cc-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.vp-ic .ico, .ph-badge .ico { --on-verified: var(--pri); }
.ob-perk .vf-ico { --on-verified: var(--bg); }
.v-state.ok .v-big .ico { --on-verified: var(--bg); }
.cm-clone .cm { margin: 0; display: block; } .cm-clone .cm .cb { max-width: 100%; }
.cm-clone .cm.mine .cb { margin-left: auto; }
.pv-why { min-height: 34px; padding: 0 2px; }
.range .knob::after { content: ''; position: absolute; inset: -12px; }
@media (max-width: 359px) {
  .discover-head { padding: calc(8px + var(--safe-t)) 10px 6px 14px; gap: 4px; }
  .discover-head .icon-btn, .topbar .icon-btn { width: 40px; height: 40px; }
  .topbar { padding-left: 14px; padding-right: 12px; }
}
.consent-gate .ob-body { padding-top: calc(22px + var(--safe-t)); }

/* =====================================================================
   v8.1 «Liquid»: widgets of glass, a calm static light, nothing moves unless the person moves it.
   ===================================================================== */

/* ---------- performance: nothing animates forever behind the glass ---------- */
#app::after { animation: none; opacity: .9; }
.wordmark .w2 { animation-iteration-count: 1; }
.gmsg .gimg img { animation: none; }
.aurora-text, .aurora-bg { animation: none; }
.gi-hero img { will-change: transform; }
/* sheets and overlays are solid: a moving blur under a full-screen layer costs every frame */
.sheet { background: var(--sheet-solid); -webkit-backdrop-filter: none; backdrop-filter: none; }
.sheet::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 160px; border-radius: inherit; pointer-events: none; background: linear-gradient(180deg, var(--card-2), transparent); opacity: .7; }
.sheet > * { position: relative; }
.match { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(6, 6, 8, .94); }
:root[data-theme='light'] .match { background: rgba(10, 10, 16, .9); }

/* ---------- the light at the top of every screen ---------- */
#app::before, .page::before, .splash::before { background: var(--fx); }
.page { background: var(--bg); }

/* ---------- widgets: grouped cards with a lit edge (Telegram Wallet / ChatGPT) ---------- */
.rows, .lb, .gi-table, .gift-sum > div, .me-stats > div, .meter, .banner, .gift-wall, .gd-to, .wish, .v-step, .inv-link, .plan-hero:not(.gold), .period, .cx-card, .opt, .ug-card, .gift-card {
  background: var(--card); box-shadow: var(--card-shadow); }
.rows, .lb, .gi-table, .meter, .banner, .gift-wall, .plan-hero:not(.gold), .cx-card, .wcard { position: relative; }
.rows::after, .lb::after, .gi-table::after, .meter::after, .banner::after, .gift-wall::after, .cx-card::after, .wcard::after, .opt::after, .period::after, .gift-card::after, .me-stats > div::after, .gift-sum > div::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: var(--card-edge); pointer-events: none; z-index: 2;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
.me-stats > div, .gift-sum > div { position: relative; }
.wcard { display: grid; gap: 10px; padding: 16px; border-radius: 24px; background: var(--card); box-shadow: var(--card-shadow); }
.wcard + .wcard { margin-top: 10px; }
.wcard-h { display: flex; align-items: center; gap: 10px; }
.wcard-h b { flex: 1; font-size: .9375rem; font-weight: 650; }
:root[data-theme='light'] .input, :root[data-theme='light'] .select, :root[data-theme='light'] .textarea { background: #fff; border-color: rgba(20, 20, 50, .1); }
:root[data-theme='light'] .input:focus, :root[data-theme='light'] .textarea:focus, :root[data-theme='light'] .select:focus { background: #fff; border-color: rgba(20, 20, 50, .22); box-shadow: 0 0 0 4px rgba(120, 110, 255, .12); }
:root[data-theme='light'] .seg { background: rgba(30, 30, 70, .07); box-shadow: none; }
:root[data-theme='light'] .seg .thumb { background: #fff; box-shadow: 0 2px 8px rgba(20, 20, 60, .14), 0 0 0 .5px rgba(20, 20, 60, .06); }
:root[data-theme='light'] .seg button[aria-selected='true'] { color: var(--ink); }
:root[data-theme='light'] .opt[aria-pressed='true'] { background: #fff; box-shadow: var(--card-shadow), inset 0 0 0 2px var(--ink); }
:root[data-theme='light'] .chip { background: rgba(30, 30, 70, .065); }
:root[data-theme='light'] .rows .chip, :root[data-theme='light'] .wcard .chip { background: rgba(30, 30, 70, .06); }
:root[data-theme='light'] .btn.ghost { background: rgba(30, 30, 70, .07); }
:root[data-theme='light'] .page-head.scrolled { background: rgba(242, 242, 247, .8); }

/* ---------- liquid glass controls: a specular highlight at the top edge, a soft inner light ---------- */
.icon-btn.orb, .page-head .icon-btn, .topbar .icon-btn, .discover-head .icon-btn, .act:not(.pass):not(.like), .toast, .nbanner {
  background-image: linear-gradient(180deg, rgba(255, 255, 255, .10), rgba(255, 255, 255, 0) 55%); }
:root[data-theme='light'] .icon-btn.orb, :root[data-theme='light'] .page-head .icon-btn, :root[data-theme='light'] .topbar .icon-btn, :root[data-theme='light'] .discover-head .icon-btn, :root[data-theme='light'] .act:not(.pass):not(.like) {
  background-image: linear-gradient(180deg, rgba(255, 255, 255, .9), rgba(255, 255, 255, .35) 60%); }

/* ---------- the three goals have their own colours ---------- */
.tag.it { gap: 5px; padding: 0 10px 0 8px; }
.tag.it .ico { width: 14px; height: 14px; stroke-width: 2; }
.tag.it.net { background: rgba(var(--net-rgb), .16); color: var(--net); box-shadow: inset 0 0 0 1px rgba(var(--net-rgb), .3); }
.tag.it.serious { background: rgba(var(--serious-rgb), .16); color: var(--serious); box-shadow: inset 0 0 0 1px rgba(var(--serious-rgb), .32); }
.tag.it.night { background: rgba(var(--night-rgb), .17); color: var(--night); box-shadow: inset 0 0 0 1px rgba(var(--night-rgb), .32); }
.tag.it .ico.fill { stroke: none; }
/* on photos the colours sit on dark glass so they stay readable */
.dc-tags .tag.it, .done-card .tag.it, .pv-card .tag.it { background: rgba(10, 10, 14, .52); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); }
.dc-tags .tag.it.net, .done-card .tag.it.net { color: #ffdc5e; } .dc-tags .tag.it.serious, .done-card .tag.it.serious { color: #ff8aa2; } .dc-tags .tag.it.night, .done-card .tag.it.night { color: #c7a8ff; }
.it-ic { width: 40px; height: 40px; border-radius: 14px; display: grid; place-items: center; flex: none; }
.it-ic .ico { width: 21px; height: 21px; stroke-width: 1.9; }
.it-ic.net { background: rgba(var(--net-rgb), .15); color: var(--net); }
.it-ic.serious { background: rgba(var(--serious-rgb), .15); color: var(--serious); }
.it-ic.night { background: rgba(var(--night-rgb), .16); color: var(--night); }
.opt.it-opt[aria-pressed='true'] .mk { color: #fff; }
.opt.it-opt.net[aria-pressed='true'] { box-shadow: var(--card-shadow), inset 0 0 0 2px var(--net-fill), 0 0 28px rgba(var(--net-rgb), .2); }
.opt.it-opt.net[aria-pressed='true'] .mk { background: var(--net-fill); color: var(--net-on); }
.opt.it-opt.serious[aria-pressed='true'] { box-shadow: var(--card-shadow), inset 0 0 0 2px var(--serious), 0 0 28px rgba(var(--serious-rgb), .18); }
.opt.it-opt.serious[aria-pressed='true'] .mk { background: var(--serious); }
.opt.it-opt.night[aria-pressed='true'] { box-shadow: var(--card-shadow), inset 0 0 0 2px var(--night), 0 0 28px rgba(var(--night-rgb), .2); }
.opt.it-opt.night[aria-pressed='true'] .mk { background: var(--night); }
.opt.it-opt[aria-pressed='true'] .it-ic { transform: scale(1.06); }
.opt.it-opt .it-ic { transition: transform .5s var(--settle); }
.chip.it-chip[aria-pressed='true'].net { background: var(--net-fill); color: var(--net-on); }
.chip.it-chip[aria-pressed='true'].serious { background: var(--serious); color: #fff; }
.chip.it-chip[aria-pressed='true'].night { background: var(--night); color: #fff; }
.chip.it-chip .ico { width: 15px; height: 15px; }
.chip.it-chip.net .ico { color: var(--net); } .chip.it-chip.serious .ico { color: var(--serious); } .chip.it-chip.night .ico { color: var(--night); }
.chip.it-chip[aria-pressed='true'] .ico { color: #fff; } .chip.it-chip[aria-pressed='true'].net .ico { color: var(--net-on); }

/* ---------- headers: bigger, calmer titles like iOS ---------- */
.topbar h1 { font-size: 1.85rem; letter-spacing: -.035em; }
.discover-head .wordmark .w2 { animation: none; background: none; color: var(--ink); -webkit-background-clip: border-box; background-clip: border-box; }

/* ---------- the profile: a single photo fills the width ---------- */
.profile-sheet .pv-strip.one .pv-card { width: 100% !important; }

/* ---------- Telegram nick: only with Gold ---------- */
.btn.tg-locked { gap: 6px; }
.btn.tg-locked .lk { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: linear-gradient(180deg, #fbe2a0, #e6ad42); color: var(--gold-ink); }
.btn.tg-locked .lk .ico { width: 13px; height: 13px; stroke-width: 2.4; }

/* ---------- Plus / Gold: an emblem in the light, features with coloured icons (Telegram Premium) ---------- */
.paywall-sheet .sheet-body { padding-top: 14px; }
.pw-hero { position: relative; display: grid; justify-items: center; text-align: center; gap: 8px; padding: 22px 0 4px; isolation: isolate; }
.pw-hero::before { content: ''; position: absolute; z-index: -1; top: -6px; left: 50%; width: 300px; height: 210px; margin-left: -150px; pointer-events: none; background: radial-gradient(closest-side, rgba(var(--gold-rgb), .34), transparent); }
.pw-hero.plus::before { background: radial-gradient(closest-side, rgba(120, 140, 255, .32), transparent); }
.pw-hero h3 { font-weight: 750; font-size: 1.45rem; letter-spacing: -.03em; margin-top: 6px; }
.pw-why { font-size: .875rem; color: var(--ink-2); max-width: 300px; }
.pw-emblem { position: relative; width: 92px; height: 92px; border-radius: 30px; display: grid; place-items: center; overflow: hidden; color: #4d3200;
  background: linear-gradient(150deg, #fff6d6 0%, #f6cf68 26%, #d5962a 55%, #f9dd8c 78%, #c08320 100%);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .8), inset 0 -4px 8px rgba(110, 64, 0, .35), 0 20px 44px -14px rgba(233, 168, 48, .7), 0 0 0 1px rgba(255, 230, 160, .4);
  animation: pw-pop .75s var(--settle) backwards; }
.pw-hero.plus .pw-emblem { color: #18206b; background: linear-gradient(150deg, #f3f5ff 0%, #b9c6ff 30%, #7488ff 60%, #d6deff 100%); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .85), inset 0 -4px 8px rgba(30, 40, 140, .3), 0 20px 44px -14px rgba(100, 120, 255, .6), 0 0 0 1px rgba(200, 210, 255, .5); }
.pw-emblem .ico { width: 46px; height: 46px; filter: drop-shadow(0 1px 0 rgba(255, 255, 255, .55)); }
/* one specular pass when it appears, like light on metal (not a loop) */
.pw-emblem::after { content: ''; position: absolute; inset: -20%; background: linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, .75) 50%, transparent 62%); transform: translateX(-110%); animation: pw-spec 1.5s var(--ease-out) .45s forwards; pointer-events: none; }
@keyframes pw-pop { from { transform: scale(.6) rotate(-8deg); opacity: 0; } }
@keyframes pw-spec { to { transform: translateX(110%); } }
.pw-feats { display: grid; gap: 2px; margin-top: 16px; padding: 6px 0; border-radius: 22px; background: var(--card); box-shadow: var(--card-shadow); position: relative; }
.pw-f { display: flex; align-items: center; gap: 13px; padding: 9px 14px; font-size: .9375rem; line-height: 1.3; }
.pf-ic { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; flex: none; color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35); }
.pf-ic .ico { width: 18px; height: 18px; stroke-width: 2; }
.pf-ic.c0 { background: linear-gradient(180deg, #ffb340, #ff8a00); } .pf-ic.c1 { background: linear-gradient(180deg, #ff6a8b, #ff2d55); } .pf-ic.c2 { background: linear-gradient(180deg, #d37cff, #af52de); }
.pf-ic.c3 { background: linear-gradient(180deg, #8e8cff, #5856d6); } .pf-ic.c4 { background: linear-gradient(180deg, #4aa8ff, #007aff); } .pf-ic.c5 { background: linear-gradient(180deg, #5fd0f5, #32ade6); } .pf-ic.c6 { background: linear-gradient(180deg, #58e07c, #28c450); }
.period { padding: 12px 6px 11px; gap: 3px; }
.period .pp { font-size: .75rem; color: var(--ink-3); font-weight: 600; }
.period b { font-size: 1.05rem; }
.save-l { font-size: .6875rem; font-weight: 750; color: var(--ok); min-height: 1em; }
.save-l.gold { color: var(--gold); } .save-l.none { visibility: hidden; }

/* ---------- the gift shop: sections by university, the studio entry ---------- */
.shop-secs { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 0 -16px 12px; padding: 2px 16px 4px; scroll-padding: 0 16px; }
.shop-secs::-webkit-scrollbar { display: none; }
.ss-tab { flex: none; display: inline-flex; align-items: center; gap: 7px; min-height: 40px; padding: 0 16px 0 13px; border-radius: 999px; background: var(--card); box-shadow: var(--card-shadow), inset 0 0 0 1px var(--line); font-weight: 650; font-size: .875rem; color: var(--ink-2); transition: background-color .25s, color .25s, transform .5s var(--settle), box-shadow .25s; }
.ss-tab .ico { width: 17px; height: 17px; }
.ss-tab:active { transform: scale(.94); transition-duration: .08s; }
.ss-tab[aria-selected='true'] { background: var(--pri); color: var(--on-pri); box-shadow: var(--glow); }
.studio-cta { position: relative; display: flex; align-items: center; gap: 12px; width: 100%; margin: 0 0 14px; padding: 12px 14px; border-radius: 22px; text-align: left; overflow: hidden; isolation: isolate;
  background: linear-gradient(120deg, rgba(var(--night-rgb), .22), rgba(var(--net-rgb), .14) 55%, rgba(var(--serious-rgb), .14)); box-shadow: var(--card-shadow), inset 0 0 0 1px rgba(var(--night-rgb), .28); transition: transform .5s var(--settle); }
.studio-cta:active { transform: scale(.98); transition-duration: .08s; }
.sc-ic { width: 42px; height: 42px; border-radius: 14px; display: grid; place-items: center; flex: none; color: #fff; background: linear-gradient(150deg, #b48cff, #6a5cff 55%, #ff7aa8); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 8px 18px -8px rgba(110, 90, 255, .7); }
.sc-ic .ico { width: 22px; height: 22px; }
.sc-ic.sm { width: 32px; height: 32px; border-radius: 11px; } .sc-ic.sm .ico { width: 18px; height: 18px; }
.sc-ic.gold { background: linear-gradient(180deg, #fbe2a0, #e6ad42); color: var(--gold-ink); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6); }
.sc-tx { flex: 1; min-width: 0; display: grid; gap: 2px; } .sc-tx b { font-size: .9375rem; } .sc-tx span { font-size: .8125rem; color: var(--ink-2); line-height: 1.35; }

/* ---------- the studio ---------- */
.st-ul { margin: 0; padding-left: 18px; display: grid; gap: 6px; font-size: .875rem; color: var(--ink-2); line-height: 1.45; }
.st-ul li::marker { color: var(--ink-3); }
.st-stage { margin: 18px 0 16px; display: grid; justify-items: center; gap: 10px; }
.st-prev { position: relative; width: min(230px, 64vw); aspect-ratio: 1; border-radius: 30px; overflow: hidden; display: grid; place-items: center; isolation: isolate;
  background: radial-gradient(circle at 50% 46%, var(--bd1), var(--bd2)); box-shadow: 0 22px 44px -20px rgba(0, 0, 0, .6), inset 0 1px 0 rgba(255, 255, 255, .35), 0 0 0 1px rgba(255, 255, 255, .08); }
.st-pat { position: absolute; inset: 0; z-index: -1; background-image: var(--pat); background-size: 26px 26px; background-repeat: space; opacity: .16; filter: grayscale(1) brightness(3); -webkit-mask-image: radial-gradient(circle at 50% 46%, transparent 32%, #000 78%); mask-image: radial-gradient(circle at 50% 46%, transparent 32%, #000 78%); }
.st-prev > img { width: 66%; height: 66%; object-fit: contain; filter: drop-shadow(0 14px 18px rgba(0, 0, 0, .35)); animation: pop-in .6s var(--settle); }
.st-up { display: grid; justify-items: center; gap: 4px; padding: 16px; color: #fff; text-align: center; border-radius: 22px; background: rgba(0, 0, 0, .2); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .5); border: 0; }
.st-up .ico { width: 30px; height: 30px; } .st-up b { font-size: .9375rem; } .st-up span { font-size: .75rem; opacity: .85; }
.st-up.is-loading, .st-re.is-loading { opacity: .5; pointer-events: none; }
.st-re { position: absolute; right: 10px; bottom: 10px; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: rgba(0, 0, 0, .32); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .3); }
.st-re .ico { width: 18px; height: 18px; }
.st-card-cap { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: center; }
.st-card-cap b { font-size: 1.15rem; font-weight: 750; letter-spacing: -.02em; }
.st-price { font-weight: 750; font-size: .875rem; padding: 3px 10px; border-radius: 99px; background: var(--chip); font-variant-numeric: tabular-nums; }
.st-bds { display: flex; gap: 10px; flex-wrap: wrap; }
.st-bd { width: 40px; height: 40px; border-radius: 50%; background: radial-gradient(circle at 35% 32%, var(--bd1), var(--bd2)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), 0 0 0 1px var(--line); transition: transform .5s var(--settle), box-shadow .25s; }
.st-bd:active { transform: scale(.9); transition-duration: .08s; }
.st-bd[aria-pressed='true'] { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), 0 0 0 2px var(--bg), 0 0 0 4px var(--ink); transform: scale(1.06); }
.st-price-in { display: flex; align-items: center; gap: 8px; } .st-price-in span { font-size: 1.2rem; } .st-price-in .input { max-width: 160px; font-weight: 700; }
.st-share { display: flex; align-items: center; gap: 12px; margin-top: 4px; } .st-share p { flex: 1; color: var(--ink-2); }
.st-row { align-items: center; } .st-row .status-pill { flex: none; }
.st-row .rt span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gt-mini.has-bd { background: radial-gradient(circle at 50% 42%, var(--bd1), var(--bd2)); }
.adm-sgift { display: flex; gap: 12px; align-items: flex-start; } .adm-sgift .gtile { width: 76px; flex: none; } .adm-sgift > div { min-width: 0; display: grid; gap: 3px; }
.st-tips { gap: 12px; }

/* ---------- favourite books among the interests ---------- */
.books-blk { margin-top: 12px; padding: 12px 14px 4px; border-radius: 20px; background: var(--card); box-shadow: var(--card-shadow), inset 0 0 0 1px var(--line); }
.bb-h { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; } .bb-h .ico { width: 18px; height: 18px; color: var(--ink-2); } .bb-h b { flex: 1; font-size: .875rem; font-weight: 650; }
.books-blk .textarea { min-height: 64px; }
.pv-books { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 18px; background: var(--card); box-shadow: var(--card-shadow); }
.pv-books .ico { width: 18px; height: 18px; color: var(--ink-3); margin-top: 2px; flex: none; }

/* ---------- «Ищу тебя»: every post is a widget, its discussion lives inside it ---------- */
.feed { gap: 12px; }
.feed .post { padding: 14px 14px 12px; border-radius: 26px; background: var(--card); box-shadow: var(--card-shadow); position: relative; }
.feed .post::after { content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: var(--card-edge); pointer-events: none; -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
.feed .post .bubble { background: none; box-shadow: none; padding: 2px 0 0; border-radius: 0; font-size: 1rem; line-height: 1.5; }
.feed .post.pinned { box-shadow: var(--card-shadow), 0 0 0 1.5px var(--gold), 0 0 26px rgba(var(--gold-rgb), .14); }
.feed .post.pinned .bubble { box-shadow: none; }
.feed .post .av { width: 40px; height: 40px; }
.pcs { display: grid; gap: 2px; margin: 10px -4px 0; padding-top: 8px; border-top: 1px solid var(--line); }
.pcs-more { display: flex; align-items: center; gap: 7px; min-height: 34px; padding: 0 6px; font-size: .8125rem; font-weight: 650; color: var(--ink-2); border-radius: 12px; }
.pcs-more .ico { width: 16px; height: 16px; }
.pcs-more:active { background: var(--chip); }
.pcs-load { display: grid; place-items: center; padding: 6px; } .pcs-load .spin { width: 18px; height: 18px; }
.pc { display: flex; gap: 9px; padding: 6px; border-radius: 16px; transition: background-color .2s; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; animation: fade-up .3s var(--ease-out); }
.pc:active { background: var(--chip); }
.pc-av { flex: none; } .pc-av .av, .pc-av img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; }
.pc-av .anon-av .ico { width: 15px; height: 15px; }
.pc-b { min-width: 0; flex: 1; display: grid; gap: 1px; }
.pc-h { display: flex; align-items: center; gap: 6px; font-size: .75rem; min-width: 0; }
.pc-h b { font-size: .8125rem; font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pc-h .tag.mini { margin-left: 0; }
.pc-t { font-size: .9rem; line-height: 1.4; white-space: pre-wrap; overflow-wrap: anywhere; }
.pc-q { display: flex; align-items: center; gap: 4px; font-size: .75rem; color: var(--ink-3); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.pc-q .ico { width: 12px; height: 12px; flex: none; } .pc-q b { font-weight: 650; color: var(--ink-2); }
.pc .rxs { margin-top: 4px; } .pc .rx { height: 26px; padding: 0 8px; font-size: .8125rem; }
.pcs-rto { display: flex; align-items: center; gap: 8px; margin-top: 4px; padding: 4px 4px 0 8px; font-size: .75rem; color: var(--ink-2); }
.pcs-rto span { flex: 1; display: inline-flex; align-items: center; gap: 5px; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.pcs-rto .ico { width: 14px; height: 14px; }
.pcs-comp { display: flex; align-items: center; gap: 6px; margin-top: 6px; }
.pcs-in { flex: 1; min-width: 0; height: 40px; padding: 0 14px; border-radius: 20px; border: 1px solid var(--line); background: var(--chip); color: var(--ink); outline: none; font-size: 16px; transition: border-color .2s, background-color .2s; }
.pcs-in:focus { border-color: var(--line-2); background: var(--s2); }
:root[data-theme='light'] .pcs-in { background: #f4f4f8; } :root[data-theme='light'] .pcs-in:focus { background: #fff; }
.pcs-in.shake { animation: shake .4s; }
.pcs-send { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; flex: none; background: var(--pri); color: var(--on-pri); transition: transform .5s var(--settle), opacity .2s; }
.pcs-send:active { transform: scale(.88); transition-duration: .08s; }
.pcs-send .ico { width: 18px; height: 18px; }
.pcs-err:empty { display: none; } .pcs-err { padding: 4px 8px 0; }

/* ---------- chat: dates never stick over messages, the composer has a calm floor ---------- */
.day-sep { position: relative; top: auto; z-index: 1; margin: 14px 0 6px; }
.day-sep span { background: var(--chip); box-shadow: none; color: var(--ink-2); }
:root[data-theme='light'] .day-sep span { background: rgba(255, 255, 255, .85); box-shadow: 0 1px 2px rgba(30, 30, 80, .08); }
.pinbar:not([hidden]) ~ .date-pill { top: 64px; }
.msgs-in { padding-bottom: calc(var(--dock) + 12px); }
.chat-dock::before { content: ''; position: absolute; left: 0; right: 0; top: -18px; bottom: 0; z-index: -1; pointer-events: none; background: linear-gradient(to top, var(--bg) calc(100% - 34px), rgba(var(--bg-rgb), 0)); }
:root[data-theme='light'] .chat-dock::before { background: linear-gradient(to top, #f2f2f7 calc(100% - 34px), rgba(242, 242, 247, 0)); }
.chat2[data-chat-theme]:not([data-chat-theme='default']) .chat-dock::before { background: linear-gradient(to top, rgba(0, 0, 0, .35) calc(100% - 34px), rgba(0, 0, 0, 0)); }
.pinbar { position: relative; z-index: 4; }
.feed .post .pact { margin-top: 10px; }
.feed .post .pact .prx { margin-top: 0; }
.st-tips summary { list-style: none; cursor: pointer; } .st-tips summary::-webkit-details-marker { display: none; }
.st-tips .chev { transition: transform .35s var(--ease-out); } .st-tips[open] .chev { transform: rotate(180deg); }
.st-tips:not([open]) { gap: 0; }

/* the gift hint in a chat: text on top, the button under it, a small close in the corner */
.gnudge { display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; column-gap: 12px; row-gap: 10px; align-items: start; padding: 13px 12px 13px 13px; }
.gnudge .gn-ico { grid-column: 1; grid-row: 1 / span 2; }
.gnudge > div { grid-column: 2; grid-row: 1; }
.gnudge > div p { margin-top: 2px; line-height: 1.4; }
.gnudge > .icon-btn { grid-column: 3; grid-row: 1; width: 32px; height: 32px; margin: -5px -4px 0 0; }
.gnudge > .icon-btn .ico { width: 18px; height: 18px; }
.gnudge > .btn { grid-column: 2 / span 2; grid-row: 2; justify-self: start; white-space: nowrap; }
.kpi { background: var(--card); box-shadow: var(--card-shadow), inset 0 0 0 1px var(--line); }
.kpi b { line-height: 1.3; }
.pcs { grid-template-columns: minmax(0, 1fr); }
.pcs-in { width: 0; flex: 1 1 auto; }
.pc, .pcs-comp { min-width: 0; }
/* gold shines a couple of times when it appears, then rests */
.btn.gold::after, .gold-sheen::after, .upsell::after { animation-iteration-count: 2; }
.glint { display: none; }

/* =====================================================================
   v8.2: Gold, the market, the star balance, support, the ad studio
   ===================================================================== */

/* ---------- the crown and the tick next to a name ---------- */
.bdgs { display: inline-flex; align-items: center; gap: 4px; flex: none; vertical-align: middle; }
.bdg { display: inline-grid; place-items: center; width: 32px; height: 32px; margin: -7px -6px; border-radius: 50%; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: transform .45s var(--settle); }
.bdg:active { transform: scale(.82); transition-duration: .08s; }
.bdg .ico { width: 19px; height: 19px; }
.bdg.crown { color: #f2c14e; }
.bdg.crown .ico { filter: drop-shadow(0 1px 2px rgba(120, 70, 0, .45)); }
:root[data-theme='light'] .bdg.crown { color: #d49a1f; }
.dc-name .bdg .ico { width: 21px; height: 21px; }
.dc-name .bdg.tick .ico { --on-verified: #0b0b0c; color: #fff; }
.pv-name .bdg .ico { width: 22px; height: 22px; }
.bdg-hero { display: grid; place-items: center; padding: 12px 0 6px; }
.bdg-big { width: 84px; height: 84px; border-radius: 28px; display: grid; place-items: center; }
.bdg-big .ico { width: 44px; height: 44px; }
.bdg-hero.gold .bdg-big { color: #4d3200; background: linear-gradient(150deg, #fff6d6, #f6cf68 30%, #d5962a 60%, #f9dd8c); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .8), 0 18px 40px -14px rgba(233, 168, 48, .7); animation: pw-pop .6s var(--settle) backwards; }
.bdg-hero.ver .bdg-big { background: var(--pri); color: var(--on-pri); --on-verified: var(--pri); box-shadow: var(--glow); animation: pw-pop .6s var(--settle) backwards; }
.bdg-perks { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 14px; }
.bdg-perks > div { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 16px; background: var(--card); box-shadow: var(--card-shadow); font-size: .8125rem; line-height: 1.3; }
.bdg-perks .ico { width: 18px; height: 18px; color: var(--gold); flex: none; }
.bdg-note { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 12px; border-radius: 18px; background: var(--gold-bg); color: var(--gold); font-weight: 650; font-size: .9375rem; }
.bdg-note.ok { background: var(--ok-bg); color: var(--ok); }
.bdg-note .ico { width: 18px; height: 18px; }

/* ---------- the gold frame: a slow light running around the edge (compositor-only rotation) ---------- */
.gf-ring { position: absolute; inset: 0; border-radius: inherit; padding: 2px; pointer-events: none; z-index: 6; overflow: hidden;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
.gf-ring::before { content: ''; position: absolute; left: 50%; top: 50%; width: 220%; aspect-ratio: 1; translate: -50% -50%; will-change: transform;
  background: conic-gradient(from 0deg, #8a5a12, #f6d77c 10%, #fff8de 15%, #e3a63a 26%, #8a5a12 42%, #f3cf6f 56%, #fffbe8 62%, #d39a2c 74%, #8a5a12);
  animation: gf-spin 7s linear infinite; }
@keyframes gf-spin { to { rotate: 360deg; } }
.dcard.gold-frame { box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .7), 0 0 34px -4px rgba(240, 190, 90, .35); }
.dcard.gold-frame .gf-ring { padding: 2.5px; }
.pv-card.gold { box-shadow: 0 20px 40px -18px rgba(0, 0, 0, .6), 0 0 30px -6px rgba(240, 190, 90, .4); }
.top-hero .gf-ring { padding: 2.5px; }
.me-ava { position: relative; border-radius: 50%; }
.me-ava.gold img { box-shadow: 0 0 0 3px transparent, 0 0 24px rgba(240, 190, 90, .45); }
.me-ava .gf-ring { inset: -3px; padding: 3px; border-radius: 50%; z-index: 1; }
.who-av { position: relative; display: grid; flex: none; border-radius: 50%; }
.who-av img { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; }
.who-av .gf-ring { inset: -2px; padding: 2px; border-radius: 50%; }
:root.lite .gf-ring::before { animation: none; }
@media (prefers-reduced-motion: reduce) { .gf-ring::before { animation: none; } }

/* ---------- Me: subscription and Gold rows ---------- */
.row .ri.gold { background: var(--gold-bg); color: var(--gold); }
.rv.ok-t { color: var(--ok); }
.pill-cta { flex: none; padding: 6px 12px; border-radius: 99px; background: linear-gradient(180deg, #fbe2a0, #e6ad42); color: var(--gold-ink); font-size: .75rem; font-weight: 750; }
.opt-ic.gold { background: var(--gold-bg); color: var(--gold); }

/* ---------- the star balance ---------- */
.wl-hero { position: relative; display: grid; justify-items: center; text-align: center; gap: 4px; padding: 22px 18px 18px; border-radius: 28px; overflow: hidden; isolation: isolate;
  background: radial-gradient(120% 90% at 50% 0%, rgba(var(--gold-rgb), .26), transparent 60%), var(--card); box-shadow: var(--card-shadow), inset 0 0 0 1px rgba(var(--gold-rgb), .22); }
.wl-ic { width: 56px; height: 56px; border-radius: 19px; display: grid; place-items: center; color: #4d3200; background: linear-gradient(150deg, #fff6d6, #f6cf68 30%, #d5962a 62%, #f9dd8c); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .8), 0 14px 30px -12px rgba(233, 168, 48, .7); }
.wl-ic .ico { width: 28px; height: 28px; }
.wl-n { font-size: 2.6rem; font-weight: 750; letter-spacing: -.04em; line-height: 1.1; margin-top: 6px; font-variant-numeric: tabular-nums; }
.wl-l { font-size: .8125rem; color: var(--ink-2); font-weight: 600; }
.wl-d { font-size: .8125rem; color: var(--ink-2); max-width: 300px; margin-top: 4px; }
.wl-acts { display: flex; gap: 8px; margin-top: 12px; }
.wl-acts .btn[aria-disabled='true'] { opacity: .45; }
.wl-how { margin-top: 12px; }
.wl-tx .ri { overflow: hidden; }
.wl-tx .ri img { width: 100%; height: 100%; object-fit: contain; padding: 4px; }
.wl-tx .ri.in { background: var(--ok-bg); color: var(--ok); }
.wl-amt { flex: none; font-weight: 750; font-variant-numeric: tabular-nums; }
.wl-amt.in { color: var(--ok); } .wl-amt.out { color: var(--ink-2); }

/* ---------- who viewed me ---------- */
.vw-lock { display: grid; justify-items: center; text-align: center; gap: 10px; padding: 24px 8px; }
.vw-faces { display: flex; }
.vw-faces span { width: 52px; height: 52px; border-radius: 50%; margin-left: -12px; background: linear-gradient(135deg, var(--s2), var(--s3)); box-shadow: 0 0 0 3px var(--bg); filter: blur(1.5px); }
.vw-faces span:first-child { margin-left: 0; }
.vw-n { font-size: 2.4rem; font-weight: 750; letter-spacing: -.04em; }
.vw-lock p { color: var(--ink-2); max-width: 300px; }
.vw-lock .btn { max-width: 320px; }

/* ---------- market and gifts ---------- */
.mk-card .gc-new { background: var(--pri); color: var(--on-pri); }
.gt-sale { position: absolute; left: 4px; right: 4px; bottom: 4px; padding: 2px 0; border-radius: 99px; background: rgba(0, 0, 0, .55); color: #fff; font-size: .5625rem; font-weight: 800; text-align: center; }
.mk-strip { display: flex; align-items: center; gap: 8px; width: 100%; margin-top: 12px; padding: 11px 14px; border-radius: 18px; background: var(--card); box-shadow: var(--card-shadow), inset 0 0 0 1px var(--line); text-align: left; font-size: .875rem; }
.mk-strip span { flex: 1; display: inline-flex; align-items: center; gap: 7px; } .mk-strip .ico { width: 16px; height: 16px; } .mk-strip b { font-size: .875rem; }
.mk-own { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 18px; background: var(--gold-bg); color: var(--gold); font-weight: 650; font-size: .875rem; }
.mk-own span { flex: 1; display: inline-flex; align-items: center; gap: 7px; } .mk-own .ico { width: 16px; height: 16px; }
.sell-sheet .gi-hero.mini2 { width: 96px; height: 96px; margin: 4px auto 0; border-radius: 28px; }
.sell-sheet .gi-hero.mini2 img { width: 70px; height: 70px; animation: none; }
.sell-sheet .gi-hero.mini2::after { display: none; }
.sell-price { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 14px auto 10px; max-width: 220px; }
.sell-price span { font-size: 1.6rem; } .sell-price .input { text-align: center; font-weight: 750; }
.sell-calc, .ex-calc { display: grid; gap: 6px; margin-top: 12px; padding: 12px 14px; }
.sell-calc > div, .ex-calc > div { display: flex; justify-content: space-between; gap: 10px; font-size: .875rem; color: var(--ink-2); }
.sell-calc b, .ex-calc b { color: var(--ink); font-variant-numeric: tabular-nums; }
.sell-calc .tot, .ex-calc .tot { padding-top: 7px; border-top: 1px solid var(--line); color: var(--ink); font-weight: 650; }
.sell-calc .tot b, .ex-calc .tot b { font-size: 1.05rem; }
.ex-box, .ex-head { margin-top: 14px; }
.ex-head { margin: 0 0 14px; }
.ex-row { display: flex; align-items: center; gap: 10px; }
.ex-tiles { display: flex; }
.ex-tiles .gt-mini { width: 38px; height: 38px; margin-left: -8px; box-shadow: 0 0 0 2px var(--card); }
.ex-tiles .gt-mini:first-child { margin-left: 0; }
.gt-mini.more { background: var(--chip-2); font-size: .6875rem; font-weight: 750; color: var(--ink); }
.ex-cr { margin-left: auto; font-weight: 750; font-size: .9375rem; }
.ex-calc { padding: 0; margin-top: 4px; }
.ex-sum { display: flex; justify-content: space-between; gap: 10px; font-size: .875rem; color: var(--ink-2); margin-bottom: 4px; }
.ex-sum b { color: var(--ink); }
.ex-pick .gtile.picked { box-shadow: inset 0 0 0 2.5px var(--pri), 0 0 22px rgba(255, 255, 255, .18); }
.ex-pick .gtile .gc-check { top: 5px; right: 5px; width: 20px; height: 20px; }

/* ---------- the studio: custom colour ---------- */
.st-bd.custom { background: conic-gradient(#ff5f5f, #ffd25f, #6dff8f, #5fd8ff, #8a6bff, #ff6bd5, #ff5f5f); }
.st-bd.custom[aria-pressed='true'] { background: radial-gradient(circle at 35% 32%, var(--bd1, #8a6bff), var(--bd2, #3a2a9a)); }
.st-spec { display: grid; gap: 12px; margin-top: 12px; padding: 12px 14px; border-radius: 18px; background: var(--card); box-shadow: var(--card-shadow); }
.st-gate { gap: 14px; }
.slider { -webkit-appearance: none; appearance: none; width: 100%; height: 30px; background: transparent; margin: 0; }
.slider::-webkit-slider-runnable-track { height: 8px; border-radius: 8px; background: var(--s3); }
.slider::-moz-range-track { height: 8px; border-radius: 8px; background: var(--s3); }
.slider::-webkit-slider-thumb { -webkit-appearance: none; width: 26px; height: 26px; margin-top: -9px; border-radius: 50%; background: #fff; box-shadow: 0 2px 8px rgba(0, 0, 0, .35), 0 0 0 .5px rgba(0, 0, 0, .1); }
.slider::-moz-range-thumb { width: 26px; height: 26px; border: 0; border-radius: 50%; background: #fff; box-shadow: 0 2px 8px rgba(0, 0, 0, .35); }
.slider.hue::-webkit-slider-runnable-track { background: linear-gradient(90deg, hsl(0, 78%, 58%), hsl(60, 78%, 58%), hsl(120, 78%, 50%), hsl(180, 78%, 50%), hsl(240, 78%, 62%), hsl(300, 78%, 58%), hsl(359, 78%, 58%)); }
.slider.hue::-moz-range-track { background: linear-gradient(90deg, hsl(0, 78%, 58%), hsl(60, 78%, 58%), hsl(120, 78%, 50%), hsl(180, 78%, 50%), hsl(240, 78%, 62%), hsl(300, 78%, 58%), hsl(359, 78%, 58%)); }
.slider.light::-webkit-slider-runnable-track { background: linear-gradient(90deg, hsl(var(--h, 210), 78%, 30%), hsl(var(--h, 210), 78%, 55%), hsl(var(--h, 210), 78%, 80%)); }
.slider.light::-moz-range-track { background: linear-gradient(90deg, hsl(var(--h, 210), 78%, 30%), hsl(var(--h, 210), 78%, 55%), hsl(var(--h, 210), 78%, 80%)); }

/* ---------- rotating ad banners, the advertiser's button ---------- */
.ad-rot { position: relative; display: grid; }
.ad-rot > .banner { grid-area: 1 / 1; opacity: 0; transform: scale(.985); transition: opacity .6s var(--ease-out), transform .6s var(--ease-out); pointer-events: none; }
.ad-rot > .banner.on { opacity: 1; transform: none; pointer-events: auto; }
.rot-dots { position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); display: flex; gap: 4px; pointer-events: none; }
.rot-dots i { width: 5px; height: 5px; border-radius: 3px; background: var(--line-2); transition: width .4s var(--ease-out), background-color .3s; }
.rot-dots i.on { width: 14px; background: var(--ink-2); }
.banner .bn-cta { flex: none; padding: 7px 12px; border-radius: 99px; background: var(--pri); color: var(--on-pri); font-size: .75rem; font-weight: 750; max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.banner { padding-right: 12px; }
.banner .adl { position: absolute; top: 6px; right: 12px; font-size: .5625rem; }
.ch-ad { margin: 4px 0 6px; }
.ch-ad .banner { margin: 6px 14px; width: calc(100% - 28px); }
.ad-btn-card { gap: 12px; }

/* ---------- the ad studio ---------- */
.adw-places { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.adw-pl { position: relative; display: grid; justify-items: center; gap: 6px; padding: 14px 10px 12px; border-radius: 22px; background: var(--card); box-shadow: var(--card-shadow), inset 0 0 0 1px var(--line); text-align: center; transition: transform .45s var(--settle), box-shadow .25s; }
.adw-pl:active { transform: scale(.96); transition-duration: .08s; }
.adw-pl.on { box-shadow: var(--card-shadow), inset 0 0 0 2px var(--ink); }
.adw-pl b { font-size: .875rem; } .adw-pl > span { font-size: .75rem; color: var(--ink-3); }
.adw-full { position: absolute; top: 8px; right: 8px; padding: 2px 7px; border-radius: 99px; background: var(--danger-bg); color: var(--danger) !important; font-size: .625rem !important; font-weight: 750; }
.pmock { position: relative; display: grid; align-content: start; gap: 4px; width: 46px; height: 70px; padding: 6px 5px; border-radius: 11px; background: var(--s2); box-shadow: inset 0 0 0 1px var(--line); }
.pmock i { display: block; border-radius: 3px; background: var(--s3); }
.pmock .pm-bar { height: 4px; width: 60%; } .pmock .pm-card { height: 36px; } .pmock .pm-acts { height: 6px; width: 70%; justify-self: center; border-radius: 6px; }
.pmock .pm-ban { height: 10px; } .pmock .pm-hero { height: 22px; } .pmock .pm-row { height: 6px; } .pmock .pm-post { height: 14px; }
.pmock .hl { background: linear-gradient(135deg, #f6cf68, #e3a63a); box-shadow: 0 0 10px rgba(240, 190, 90, .5); }
.adw-desc { margin-top: 10px; }
.adw-prev { margin: 10px -16px 0; }
.adw-prev .banner { pointer-events: none; }
.ad-preview.mini { position: relative; height: 150px; margin: 0 16px; border-radius: 24px; overflow: hidden; background: linear-gradient(160deg, var(--s2), var(--s3)); display: grid; place-items: center; }
.ad-preview.mini .ap-img .ico { width: 34px; height: 34px; color: var(--ink-3); }
.ap-cap { position: absolute; left: 14px; right: 14px; bottom: 12px; display: grid; gap: 4px; justify-items: start; color: #fff; text-shadow: 0 1px 8px rgba(0, 0, 0, .4); }
.ap-cap .btn { background: #fff; color: #111; text-shadow: none; }
.adw-aud { display: grid; gap: 14px; margin-top: 14px; padding: 14px; border-radius: 22px; background: var(--card); box-shadow: var(--card-shadow); }
.adw-reach { display: grid; gap: 6px; margin-top: 12px; }
.adw-rbar { height: 8px; border-radius: 8px; background: var(--s3); overflow: hidden; }
.adw-rbar i { display: block; height: 100%; background: linear-gradient(90deg, #7a6cff, #ff7aa8); transform-origin: left; transition: transform .5s var(--ease-out); border-radius: 8px; }
.adw-days { display: grid; gap: 6px; padding: 14px; border-radius: 22px; background: var(--card); box-shadow: var(--card-shadow); }
.adw-days b { font-size: 1.15rem; }
.adw-ticks { display: flex; justify-content: space-between; font-size: .6875rem; color: var(--ink-3); }
.adw-sum { margin-top: 18px; gap: 8px; }
.adw-l { display: flex; justify-content: space-between; gap: 12px; font-size: .875rem; color: var(--ink-2); }
.adw-l b { color: var(--ink); font-variant-numeric: tabular-nums; }
.adw-total { display: flex; justify-content: space-between; align-items: baseline; padding-top: 10px; margin-top: 2px; border-top: 1px solid var(--line); }
.adw-total span { font-weight: 650; } .adw-total b { font-size: 1.5rem; letter-spacing: -.02em; }
.adw-gold { display: flex; align-items: center; justify-content: center; gap: 7px; width: 100%; margin-top: 8px; padding: 10px; border-radius: 16px; background: var(--gold-bg); color: var(--gold); font-weight: 650; font-size: .8125rem; }
.adw-gold .ico { width: 16px; height: 16px; }
.unis-sheet .rows .row .rt span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- the deck: where the profiles come from ---------- */
.deck-scope { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: -2px 16px 6px; padding: 4px 4px 4px 12px; border-radius: 99px; background: var(--card); box-shadow: var(--card-shadow), inset 0 0 0 1px var(--line); font-size: .8125rem; font-weight: 600; animation: fade-up .3s var(--ease-out); }
.deck-scope span { display: inline-flex; align-items: center; gap: 6px; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.deck-scope .ico { width: 15px; height: 15px; }
.deck-scope .icon-btn.sm { width: 30px; height: 30px; }

/* ---------- support ---------- */
.sp-logo { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; flex: none; color: #fff; background: linear-gradient(150deg, #8a7bff, #5b4bdb 55%, #ff7aa8); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45); }
.sp-logo .ico { width: 21px; height: 21px; }
.conv.sup .av { display: grid; place-items: center; background: none; }
.conv.sup .av .sp-logo { width: 54px; height: 54px; }
.conv.sup .av .sp-logo .ico { width: 26px; height: 26px; }
.conv.sup .l1 .vf-ico { width: 16px; height: 16px; }
.support-page .page-head { gap: 8px; }
.sp-head { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; }
.sp-head .wt b { display: flex; align-items: center; gap: 5px; font-size: .9375rem; } .sp-head .wt b .ico { width: 16px; height: 16px; }
.sp-head .ws { font-size: .75rem; color: var(--ink-3); }
.sp-body { display: grid; gap: 8px; padding-bottom: 12px; }
.sp-welcome { display: grid; justify-items: center; text-align: center; gap: 6px; padding: 14px 10px 6px; }
.sp-welcome .sp-logo { width: 64px; height: 64px; margin-bottom: 4px; } .sp-welcome .sp-logo .ico { width: 32px; height: 32px; }
.sp-welcome b { font-size: 1.1rem; } .sp-welcome p { font-size: .875rem; color: var(--ink-2); max-width: 320px; }
.sp-pick { display: grid; gap: 8px; margin-top: 6px; }
.sp-topics { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.sp-topic { display: flex; align-items: center; gap: 10px; padding: 11px 12px; border-radius: 18px; background: var(--card); box-shadow: var(--card-shadow), inset 0 0 0 1px var(--line); text-align: left; font-size: .8125rem; font-weight: 600; line-height: 1.25; transition: transform .45s var(--settle), box-shadow .25s; }
.sp-topic:active { transform: scale(.96); transition-duration: .08s; }
.sp-topic.on { box-shadow: var(--card-shadow), inset 0 0 0 2px var(--ink); }
.sp-ti { width: 32px; height: 32px; border-radius: 11px; display: grid; place-items: center; flex: none; color: #fff; }
.sp-ti .ico { width: 17px; height: 17px; stroke-width: 2; }
.sp-ti.problem { background: #ff6a5f; } .sp-ti.idea { background: #ffb340; } .sp-ti.complaint { background: #ff5f8a; } .sp-ti.refund { background: #34c26a; }
.sp-ti.payment { background: #4aa8ff; } .sp-ti.account { background: #8e8cff; } .sp-ti.moderator { background: #2fbfb0; } .sp-ti.other { background: #8e8e98; }
.sp-m { display: flex; gap: 8px; align-items: flex-end; max-width: 88%; }
.sp-m.me { margin-left: auto; flex-direction: row-reverse; }
.sp-m .sp-logo { width: 28px; height: 28px; } .sp-m .sp-logo .ico { width: 15px; height: 15px; }
.sp-b { display: grid; gap: 4px; padding: 9px 13px 7px; border-radius: 20px 20px 20px 6px; background: var(--card); box-shadow: var(--card-shadow); }
.sp-m.me .sp-b { border-radius: 20px 20px 6px 20px; background: var(--pri); color: var(--on-pri); }
.sp-b p { white-space: pre-wrap; overflow-wrap: anywhere; font-size: .9375rem; line-height: 1.4; }
.sp-tp, .sp-pay { display: inline-flex; align-items: center; gap: 5px; font-size: .6875rem; font-weight: 700; opacity: .75; }
.sp-tp .ico, .sp-pay .ico { width: 13px; height: 13px; }
.sp-tm { justify-self: end; font-size: .625rem; opacity: .6; }
.sp-dock { display: grid; gap: 6px; }
.support-page .page-foot { padding: 6px 0 0; }
.sp-ctx { padding: 0 12px; }
.sp-ctx-row { display: flex; align-items: center; gap: 8px; }
.sp-ctx-row .tag { flex: none; }
.sp-hint { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.sp-pays { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin-top: 6px; }
.sp-pays .chip { flex: none; }
.adm-sp .sp-msgs { display: grid; gap: 8px; margin-top: 12px; }
.sp-th.unread .rt b { font-weight: 750; }
.sp-meta { display: grid; justify-items: end; gap: 4px; flex: none; }
.adm-sub { margin-bottom: 4px; }
.adm-colors { display: flex; gap: 14px; margin-top: 8px; }
.adm-colors input { width: 44px; height: 30px; border: 0; background: none; vertical-align: middle; }

/* ---------- feedback ---------- */
.fb-hero { width: 64px; height: 64px; margin: 6px auto 10px; border-radius: 22px; display: grid; place-items: center; color: #fff; background: linear-gradient(150deg, #b48cff, #6a5cff 55%, #ff7aa8); box-shadow: 0 14px 30px -12px rgba(110, 90, 255, .7); }
.fb-hero .ico { width: 32px; height: 32px; }
.fb-stars { display: flex; justify-content: center; gap: 6px; margin: 16px 0 12px; }
.fb-stars button { width: 44px; height: 44px; display: grid; place-items: center; color: var(--s3); transition: transform .45s var(--settle), color .2s; }
.fb-stars button .ico { width: 32px; height: 32px; }
.fb-stars button.on { color: #f2c14e; }
.fb-stars button:active { transform: scale(.85); transition-duration: .08s; }
.fb-kinds { justify-content: center; }

/* hooks */
.pw-renew { line-height: 1.45; }
.sp-topics.row { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 2px 16px 4px; }
.sp-topics.row::-webkit-scrollbar { display: none; }
.sp-topics.row .sp-topic { flex: none; padding: 6px 12px 6px 6px; border-radius: 99px; font-size: .75rem; white-space: nowrap; }
.sp-topics.row .sp-ti { width: 24px; height: 24px; border-radius: 50%; }
.sp-topics.row .sp-ti .ico { width: 13px; height: 13px; }
/* the actions under one of my gifts: a tidy 2×2 grid, never wider than the screen */
.sheet-foot { grid-template-columns: minmax(0, 1fr); }
.gi-own { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.gi-own .btn { padding: 0 8px; overflow: hidden; text-overflow: ellipsis; }
.ad-preview.mini { aspect-ratio: auto; width: auto; }
.ad-preview.mini .ap-cap b { font-size: 1.05rem; }
/* range knobs: a bigger finger target, the same look */
.range .knob { top: 3px; width: 28px; height: 28px; margin-left: -14px; }
.wl-acts { flex-wrap: wrap; justify-content: center; }
.wl-acts .btn { white-space: nowrap; }
/* ===================== v8.3 ===================== */

/* ---------- gold shine: a sweep of light painted inside the button's own rounded shape (never a square outside it) ---------- */
.btn.gold::after, .gold-sheen::after { top: 0; bottom: 0; left: 0; right: 0; width: auto; border-radius: inherit; transform: none;
  background: linear-gradient(105deg, transparent 38%, rgba(255, 252, 236, .85) 50%, transparent 62%) no-repeat; background-size: 260% 100%; background-position: 160% 0;
  animation: gold-sweep 3.6s cubic-bezier(.5, 0, .2, 1) 2 both; }
.upsell::after { top: 0; bottom: 0; left: 0; right: 0; width: auto; border-radius: inherit; transform: none;
  background: linear-gradient(105deg, transparent 38%, rgba(255, 244, 205, .34) 50%, transparent 62%) no-repeat; background-size: 260% 100%; background-position: 160% 0;
  animation: gold-sweep 4.4s cubic-bezier(.5, 0, .2, 1) 1.2s 2 both; }
@keyframes gold-sweep { 0%, 34% { background-position: 160% 0; } 72%, 100% { background-position: -60% 0; } }

/* ---------- support: the payments row scrolls inside the screen, the field keeps its send button ---------- */
.sp-dock { grid-template-columns: minmax(0, 1fr); }
.sp-ctx, .sp-ctx-row, .sp-pays { min-width: 0; max-width: 100%; }
.sp-pays { overscroll-behavior-x: contain; padding-bottom: 2px; }
.sp-body, .sp-pick { grid-template-columns: minmax(0, 1fr); }
.sp-topics:not(.row) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sp-topics:not(.row) .sp-topic > span:last-child { min-width: 0; overflow-wrap: anywhere; }

/* ---------- a comment under a profile: one capsule with its send button; the action bar hides while typing ---------- */
.sheet.kb .sheet-foot { display: none; }
.pv-cmp { display: flex; align-items: flex-end; gap: 6px; margin-top: 12px; padding: 5px 5px 5px 16px; border-radius: 24px; background: var(--chip); box-shadow: inset 0 0 0 1px var(--line); transition: box-shadow .25s; }
.pv-cmp:focus-within { box-shadow: inset 0 0 0 1.5px var(--line-2); }
.pv-cmp textarea { flex: 1; min-width: 0; resize: none; border: 0; background: transparent; outline: none; font-size: 1rem; line-height: 1.38; padding: 8px 0; max-height: 120px; color: var(--ink); }
.pv-cmp textarea::placeholder { color: var(--ink-3); }
.pv-send { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: var(--pri); color: var(--on-pri); flex: none; transition: transform .4s var(--settle); }
.pv-send:active { transform: scale(.88); }
.pv-send .ico { width: 18px; height: 18px; stroke-width: 2.2; }
.pv-send.is-loading .ico { opacity: 0; }
.pv-send .spin { position: absolute; width: 16px; height: 16px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: spin .7s linear infinite; }

/* ---------- onboarding: five stages on top ---------- */
.ob-stages { flex: 1; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; margin-right: 8px; }
.obs { display: grid; gap: 6px; min-width: 0; }
.obs-bar { height: 4px; border-radius: 4px; background: var(--s3); overflow: hidden; }
:root[data-theme='light'] .obs-bar { background: rgba(20, 20, 50, .1); }
.obs-bar i { display: block; height: 100%; border-radius: inherit; background: var(--pri); transform-origin: left; transition: transform .7s var(--ease-out); }
.obs.now .obs-bar i { box-shadow: 0 0 10px rgba(255, 255, 255, .45); }
.obs-l { font-size: .6875rem; font-weight: 600; letter-spacing: .01em; color: var(--ink-3); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color .35s; }
.obs.done .obs-l { color: var(--ink-2); }
.obs.now .obs-l { color: var(--ink); }

/* ---------- "Ищу тебя": compact posts like a Telegram channel ---------- */
.post2 { position: relative; margin: 0 0 10px; padding: 12px 14px 0; border-radius: 22px; background: var(--card); box-shadow: var(--card-shadow); animation: rise-in .5s var(--ease-out) backwards; animation-delay: calc(var(--i, 0) * 28ms); }
.post2::after { content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none; background: var(--card-edge);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
.post2.pinned { box-shadow: var(--card-shadow), inset 0 0 0 1px rgba(var(--gold-rgb), .4); }
.p2-head { display: flex; align-items: center; gap: 10px; min-width: 0; }
.p2-av { flex: none; }
.p2-av .av, .p2-av img { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; display: grid; place-items: center; }
.p2-av .anon-av .ico { width: 18px; height: 18px; }
.p2-who { flex: 1; min-width: 0; display: grid; line-height: 1.2; }
.p2-who b { font-size: .9375rem; font-weight: 650; display: flex; align-items: center; gap: 6px; min-width: 0; white-space: nowrap; overflow: hidden; }
.p2-who > span { font-size: .75rem; color: var(--ink-3); display: flex; align-items: center; gap: 4px; margin-top: 1px; }
.p2-who > span .ico { width: 12px; height: 12px; }
.p2-who .bdg { width: 32px; height: 32px; margin: -9px -8px; }
.p2-who .bdg .ico { width: 15px; height: 15px; }
.p2-pin { color: var(--gold); display: grid; place-items: center; } .p2-pin .ico { width: 16px; height: 16px; }
.p2-more { margin: -6px -8px -6px 0; color: var(--ink-3); }
.p2-text { margin: 8px 0 0; font-size: .96875rem; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; }
.p2-text.clamp { display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; }
.p2-expand { display: inline-block; font-size: .875rem; font-weight: 600; color: var(--blue); padding: 4px 0 0; }
.p2-acts { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 10px; min-width: 0; flex-wrap: wrap; }
.p2-acts .prx { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.p2-acts .itsme, .p2-acts .btn { flex: none; }
.p2-bar { display: flex; align-items: center; gap: 10px; width: calc(100% + 28px); margin: 10px -14px 0; padding: 10px 14px 11px; border-top: 1px solid var(--line); border-radius: 0 0 22px 22px;
  font-size: .875rem; font-weight: 600; color: var(--blue); text-align: left; transition: background-color .2s; }
.p2-bar:active { background: var(--chip); }
.p2-bt { flex: 1; min-width: 0; }
.p2-bar > .ico { width: 16px; height: 16px; color: var(--ink-3); }
.p2-avs { display: flex; flex: none; }
.p2-avs .pav { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px var(--bg); margin-left: -6px; display: grid; place-items: center; background: var(--s3); }
.p2-avs .pav:first-child { margin-left: 0; }
.p2-avs .pav .ico { width: 12px; height: 12px; }
.p2-bi { display: grid; place-items: center; } .p2-bi .ico { width: 18px; height: 18px; }

/* ---------- Top: one ranking, small cards three in a row ---------- */
.tp-first { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px 0 10px; border-radius: 999px; background: var(--gold-bg); color: var(--gold); font-weight: 650; font-size: .8125rem; margin-right: 2px; white-space: nowrap; transition: transform .45s var(--settle); }
.tp-first .ico { width: 17px; height: 17px; }
.tp-first:active { transform: scale(.94); }
@media (max-width: 350px) { .tp-first span { display: none; } .tp-first { padding: 0 9px; } }
.tp-me { position: relative; display: flex; align-items: center; gap: 12px; width: calc(100% - 32px); margin: 4px 16px 12px; padding: 10px 12px; border-radius: 22px; background: var(--card); box-shadow: var(--card-shadow); text-align: left; overflow: hidden; isolation: isolate; transition: transform .45s var(--settle); }
.tp-me::before { content: ''; position: absolute; inset: 0; z-index: -1; background: radial-gradient(80% 140% at 100% 0%, rgba(var(--gold-rgb), .16), transparent 60%); }
.tp-me:active { transform: scale(.98); }
.tp-me img, .tp-me .anon-av { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex: none; display: grid; place-items: center; background: var(--s3); }
.tm-t { flex: 1; min-width: 0; display: grid; gap: 2px; }
.tm-t b { font-size: 1rem; display: flex; align-items: baseline; gap: 8px; white-space: nowrap; }
.tm-pts { font-size: .8125rem; color: var(--gold); font-weight: 650; }
.tm-t > span { font-size: .8125rem; color: var(--ink-2); }
.tm-go { color: var(--ink-3); display: grid; } .tm-go .ico { width: 18px; height: 18px; }
.tp-gender { padding: 0 16px 12px; }
.tp-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding: 0 12px; margin-bottom: 10px; }
@media (min-width: 560px) { .tp-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.tp-card { position: relative; display: block; aspect-ratio: 3 / 4; border-radius: 18px; overflow: hidden; isolation: isolate; background: var(--s2); transition: transform .45s var(--settle); }
.tp-card:active { transform: scale(.96); }
.tp-card > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tp-card .ph { position: absolute; inset: 0; background: var(--s3); }
.tc-shade { position: absolute; inset: 42% 0 0; background: linear-gradient(transparent, rgba(0, 0, 0, .74)); pointer-events: none; }
.tc-rk { position: absolute; top: 6px; left: 6px; z-index: 2; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; display: grid; place-items: center; font-size: .6875rem; font-weight: 800; color: #fff; background: rgba(0, 0, 0, .42); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); font-variant-numeric: tabular-nums; }
.tc-rk.g1 { background: linear-gradient(150deg, #fff3c4, #f0c25e 45%, #b9801f); color: #3a2600; box-shadow: 0 4px 12px -4px rgba(233, 168, 48, .8); }
.tc-rk.g2 { background: linear-gradient(150deg, #ffffff, #d3d7df 50%, #8e95a3); color: #23262e; }
.tc-rk.g3 { background: linear-gradient(150deg, #ffe0c4, #d99566 50%, #9a5b34); color: #2e1606; }
.tc-me { position: absolute; top: 6px; right: 6px; z-index: 2; padding: 2px 7px; border-radius: 999px; font-size: .625rem; font-weight: 700; background: #ffffff; color: #0b0b0c; }
.tp-card.is-me { box-shadow: 0 0 0 2px var(--pri); }
.tc-inf { position: absolute; left: 7px; right: 7px; bottom: 6px; z-index: 2; display: grid; gap: 1px; color: #fff; text-align: left; }
.tc-inf b { font-size: .8125rem; font-weight: 650; display: flex; align-items: center; gap: 3px; min-width: 0; white-space: nowrap; overflow: hidden; text-shadow: 0 1px 6px rgba(0, 0, 0, .5); }
.tc-crown { width: 12px; height: 12px; color: #f2c14e; flex: none; }
.tc-pts { display: flex; align-items: center; gap: 3px; font-size: .6875rem; font-weight: 600; opacity: .94; font-variant-numeric: tabular-nums; }
.tc-pts .ico { width: 11px; height: 11px; }
.tp-rule { padding: 6px 22px 26px; text-align: center; }
.tp-hero { display: grid; place-items: center; padding: 6px 0 8px; }
.tp-cup { width: 76px; height: 76px; border-radius: 26px; display: grid; place-items: center; color: #4d3200; background: linear-gradient(150deg, #fff6d6, #f6cf68 30%, #d5962a 60%, #f9dd8c); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .8), 0 18px 40px -14px rgba(233, 168, 48, .7); animation: pw-pop .6s var(--settle) backwards; }
.tp-cup .ico { width: 40px; height: 40px; stroke-width: 1.7; }
.tp-rules { display: grid; gap: 8px; margin-top: 14px; }
.tr-row { display: flex; gap: 12px; align-items: flex-start; padding: 12px; border-radius: 18px; background: var(--card); box-shadow: var(--card-shadow); }
.tr-row > div { display: grid; gap: 2px; min-width: 0; }
.tr-row b { font-size: .9375rem; }
.tr-row span { font-size: .8125rem; color: var(--ink-2); line-height: 1.4; }
.tr-ic { width: 36px; height: 36px; border-radius: 12px; display: grid; place-items: center; flex: none; }
.tr-ic .ico { width: 19px; height: 19px; }
.tr-ic.gift { background: rgba(var(--serious-rgb), .16); color: var(--serious); }
.tr-ic.inv { background: rgba(var(--blue-rgb), .16); color: var(--blue); }
.tr-ic.up { background: var(--ok-bg); color: var(--ok); }
.tp-stat { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin-top: 14px; }
.tp-stat > div { display: grid; justify-items: center; gap: 2px; padding: 10px 4px; border-radius: 16px; background: var(--card); box-shadow: var(--card-shadow); min-width: 0; }
.tp-stat b { font-size: 1.0625rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tp-stat span { font-size: .6875rem; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.tp-gapline { display: flex; gap: 8px; align-items: flex-start; margin-top: 12px; padding: 10px 12px; border-radius: 16px; background: var(--chip); font-size: .8125rem; line-height: 1.4; }
.tp-gapline .ico { width: 16px; height: 16px; flex: none; margin-top: 1px; }
.tp-gapline.gold { background: var(--gold-bg); color: var(--gold); font-weight: 600; }
.tp-ways { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
.tp-way { position: relative; display: grid; align-content: start; gap: 4px; padding: 14px 12px 12px; border-radius: 22px; text-align: left; background: var(--card); box-shadow: var(--card-shadow); overflow: hidden; isolation: isolate; min-width: 0; transition: transform .45s var(--settle); }
.tp-way:active { transform: scale(.97); }
.tp-way::before { content: ''; position: absolute; inset: 0; z-index: -1; }
.tp-way.gift::before { background: radial-gradient(120% 80% at 100% 0%, rgba(var(--serious-rgb), .22), transparent 60%); }
.tp-way.inv::before { background: radial-gradient(120% 80% at 100% 0%, rgba(var(--blue-rgb), .22), transparent 60%); }
.tw-ic { width: 38px; height: 38px; border-radius: 13px; display: grid; place-items: center; margin-bottom: 6px; color: #fff; }
.tw-ic .ico { width: 20px; height: 20px; }
.tp-way.gift .tw-ic { background: var(--serious); } .tp-way.inv .tw-ic { background: var(--blue); }
.tp-way b { font-size: 1rem; }
.tw-pts { font-size: .8125rem; font-weight: 700; color: var(--gold); }
.tw-d { font-size: .75rem; color: var(--ink-2); line-height: 1.35; }
.tw-go { display: flex; align-items: center; gap: 4px; margin-top: 8px; font-size: .8125rem; font-weight: 650; }
.tw-go .ico { width: 14px; height: 14px; }
.tp-more { margin-top: 10px; }
.tp-more summary { list-style: none; display: flex; align-items: center; justify-content: center; gap: 6px; font-size: .8125rem; color: var(--ink-2); padding: 8px; cursor: pointer; }
.tp-more summary::-webkit-details-marker { display: none; }
.tp-more summary .ico { width: 14px; height: 14px; transition: transform .3s var(--ease-out); }
.tp-more[open] summary .ico { transform: rotate(180deg); }

/* ---------- gifts: the hub (shop · market · mine), the price story, the actions of one copy ---------- */
.gh-tabs { margin-bottom: 14px; }
.dl { font-size: .6875rem; font-weight: 700; font-variant-numeric: tabular-nums; margin-left: 4px; }
.dl.up { color: var(--ok); } .dl.down { color: var(--danger); }
.gh-note { display: flex; gap: 6px; align-items: flex-start; margin-top: 14px; }
.gh-note .ico { width: 14px; height: 14px; flex: none; margin-top: 1px; }
.gh-sell { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 14px; border-radius: 20px; background: var(--card); box-shadow: var(--card-shadow); text-align: left; transition: transform .45s var(--settle); }
.gh-sell:active { transform: scale(.98); }
.gs-ic { width: 40px; height: 40px; border-radius: 14px; display: grid; place-items: center; background: var(--gold-bg); color: var(--gold); flex: none; }
.gs-ic .ico { width: 20px; height: 20px; }
.gs-t { flex: 1; min-width: 0; display: grid; gap: 1px; }
.gs-t b { font-size: .9375rem; } .gs-t span { font-size: .8125rem; color: var(--ink-2); }
.gh-sell > .ico { width: 18px; height: 18px; color: var(--ink-3); }
.gh-sum { position: relative; display: flex; align-items: center; gap: 12px; padding: 16px; border-radius: 24px; background: var(--card); box-shadow: var(--card-shadow); overflow: hidden; isolation: isolate; }
.gh-sum::before { content: ''; position: absolute; inset: 0; z-index: -1; background: radial-gradient(90% 120% at 100% 0%, rgba(var(--gold-rgb), .18), transparent 60%); }
.gs-v { flex: 1; min-width: 0; display: grid; gap: 2px; }
.gs-v b { font-size: 1.6rem; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.gs-top { display: grid; justify-items: center; gap: 4px; padding: 10px 12px; border-radius: 18px; background: var(--chip); font-size: .75rem; font-weight: 650; color: var(--gold); flex: none; transition: transform .45s var(--settle); }
.gs-top:active { transform: scale(.94); }
.gs-top .ico { width: 22px; height: 22px; }
.gh-acts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 12px 0 14px; }
.gh-acts:has(> :nth-child(3):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.gh-act { display: grid; justify-items: center; gap: 6px; padding: 12px 4px 10px; border-radius: 20px; background: var(--card); box-shadow: var(--card-shadow); font-size: .75rem; font-weight: 650; min-width: 0; transition: transform .45s var(--settle); }
.gh-act:active { transform: scale(.94); }
.ga-ic { width: 40px; height: 40px; border-radius: 14px; display: grid; place-items: center; background: var(--chip); }
.ga-ic .ico { width: 20px; height: 20px; }
.gh-act.sell .ga-ic { background: var(--gold-bg); color: var(--gold); }
.gh-act.exchange .ga-ic { background: rgba(var(--blue-rgb), .14); color: var(--blue); }
.gh-act.create .ga-ic { background: rgba(var(--night-rgb), .16); color: var(--night); }
.gh-act.buy .ga-ic { background: rgba(var(--serious-rgb), .14); color: var(--serious); }
.gh-act > span:last-child, .gi-act > span:last-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.gh-view { margin-bottom: 12px; }
.gi-story { margin-top: 14px; padding: 12px; border-radius: 20px; background: var(--card); box-shadow: var(--card-shadow); }
.gs-cells { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.gs-cells.c3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.gs-cells > div { display: grid; gap: 2px; min-width: 0; }
.gs-cells span { font-size: .6875rem; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gs-cells b { font-size: 1rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.gs-cells i { font-style: normal; font-size: .6875rem; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gs-cells i .dl { margin-left: 0; }
.gi-spark { display: block; width: 100%; height: 46px; margin-top: 10px; overflow: visible; }
.gi-spark.up { color: var(--ok); } .gi-spark.down { color: var(--danger); }
.gs-next { display: flex; gap: 6px; align-items: flex-start; margin-top: 8px; font-size: .75rem; color: var(--ink-2); }
.gs-next .ico { width: 14px; height: 14px; flex: none; margin-top: 1px; }
.gi-worth { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px 8px; margin: 10px auto 0; padding: 8px 14px; border-radius: 999px; background: var(--chip); font-size: .875rem; transition: transform .45s var(--settle); }
.gi-worth:active { transform: scale(.97); }
.gi-worth > span:first-child { color: var(--ink-2); }
.gi-worth b { font-variant-numeric: tabular-nums; }
.gi-worth > .ico { width: 14px; height: 14px; color: var(--ink-3); }
.gw-sale { display: inline-flex; align-items: center; gap: 4px; color: var(--gold); font-weight: 650; }
.gw-sale .ico { width: 13px; height: 13px; }
.gi-acts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin-bottom: 10px; }
.gi-acts.c3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .gi-acts.c2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.gi-act { position: relative; display: grid; justify-items: center; gap: 6px; padding: 4px 0; font-size: .75rem; font-weight: 600; color: var(--ink-2); min-width: 0; transition: transform .45s var(--settle); }
.gi-act:active { transform: scale(.92); }
.gi-act .ga-ic { width: 50px; height: 50px; border-radius: 50%; background: var(--chip); color: var(--ink); }
.gi-act .ga-ic .ico { width: 21px; height: 21px; }
.gi-act.gold .ga-ic { background: linear-gradient(180deg, #fbe2a0, #e6ad42 58%, #c98a1e); color: var(--gold-ink); box-shadow: 0 6px 18px -6px rgba(233, 168, 48, .6); }
.gi-act.on .ga-ic { background: var(--pri); color: var(--on-pri); }
.gi-act.is-loading .ga-ic .ico { opacity: 0; }
.gi-act .spin { position: absolute; top: 20px; left: 50%; margin-left: -9px; width: 18px; height: 18px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: spin .7s linear infinite; }

/* ---------- wallet: taking Stars out ---------- */
.po-sec { margin-top: 14px; padding: 12px; border-radius: 22px; background: var(--card); box-shadow: var(--card-shadow); }
.po-h { display: flex; gap: 12px; align-items: flex-start; }
.po-h > div { display: grid; gap: 2px; min-width: 0; }
.po-h b { font-size: .9375rem; } .po-h span { font-size: .8125rem; color: var(--ink-2); line-height: 1.4; }
.po-ic { width: 38px; height: 38px; border-radius: 13px; display: grid; place-items: center; flex: none; color: #fff; }
.po-ic .ico { width: 20px; height: 20px; }
.po-ic.prem { background: linear-gradient(140deg, #6b8cff, #b56bff 55%, #ff7ab3); }
.po-sec .rows { margin-top: 10px; }
.po-row .rt b { font-size: .875rem; }
.po-row .btn[aria-disabled='true'] { opacity: .45; }
.po-none { margin: 10px 2px 0; }
.po-prem { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 10px; }
.po-pc { display: grid; justify-items: center; gap: 4px; padding: 12px 4px; border-radius: 18px; background: var(--chip); transition: transform .45s var(--settle), opacity .2s; }
.po-pc:active { transform: scale(.95); }
.po-pc b { font-size: .9375rem; } .po-pc span { font-size: .75rem; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.po-pc.off { opacity: .45; } .po-pc.is-loading { opacity: .5; pointer-events: none; }
.po-manual { display: flex; align-items: center; gap: 10px; width: 100%; margin-top: 12px; padding: 12px 14px; border-radius: 18px; background: var(--chip); font-size: .875rem; font-weight: 600; text-align: left; }
.po-manual span { flex: 1; } .po-manual .ico { width: 18px; height: 18px; color: var(--ink-2); flex: none; }

/* ---------- who viewed me: what Gold opens ---------- */
.vw-perks { display: grid; gap: 8px; margin: 14px 0 16px; text-align: left; }
.vw-perks > div { display: flex; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 16px; background: var(--card); box-shadow: var(--card-shadow); font-size: .875rem; line-height: 1.35; }
.vw-perks .ico { width: 18px; height: 18px; color: var(--gold); flex: none; }

/* ---------- Me: one gifts card instead of three rows ---------- */
.me-gifts { position: relative; margin: 14px 16px 0; border-radius: 24px; background: var(--card); box-shadow: var(--card-shadow); overflow: hidden; isolation: isolate; }
.me-gifts::before { content: ''; position: absolute; inset: 0; z-index: -1; background: radial-gradient(90% 120% at 100% 0%, rgba(var(--serious-rgb), .14), transparent 60%); pointer-events: none; }
.mg-h { display: flex; align-items: center; gap: 12px; width: 100%; padding: 14px 14px 10px; text-align: left; }
.mg-ic { width: 40px; height: 40px; border-radius: 14px; display: grid; place-items: center; background: rgba(var(--serious-rgb), .16); color: var(--serious); flex: none; }
.mg-ic .ico { width: 21px; height: 21px; }
.mg-t { flex: 1; min-width: 0; display: grid; gap: 2px; }
.mg-t b { font-size: 1rem; } .mg-t > span { font-size: .8125rem; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mg-h .chev .ico { width: 18px; height: 18px; color: var(--ink-3); }
.mg-acts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; padding: 0 10px 10px; }
.mg-acts button { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 40px; border-radius: 14px; background: var(--chip); font-size: .8125rem; font-weight: 650; min-width: 0; white-space: nowrap; transition: transform .45s var(--settle); }
.mg-acts button:active { transform: scale(.95); }
.mg-acts .ico { width: 16px; height: 16px; flex: none; }
/* ===================== v8.4 ===================== */

/* ---------- light theme: a picked chip is dark with white text (the light chip background used to win, white on white) ---------- */
:root[data-theme='light'] .chip[aria-pressed='true']:not(.it-chip):not(.rar-chip) { background: var(--pri); color: var(--on-pri); }
:root[data-theme='light'] .rar-chip[aria-pressed='true'] { background: var(--ink); color: #ffffff; }

/* ---------- the welcome screen: the MGIMO entrance, a stylish couple, liquid glass ---------- */
.ob.is-welcome .ob-head, .ob.is-welcome .ob-foot { display: none; }
.ob.is-welcome::before { display: none; }
.ob.is-welcome .ob-body { padding: 0; overflow: hidden; }
.ob-welcome { position: absolute; inset: 0; overflow: hidden; isolation: isolate; color: var(--wl-ink);
  --wf: -apple-system, 'SF Pro Display', BlinkMacSystemFont, system-ui, 'Segoe UI Variable Display', 'Segoe UI', Roboto, 'Geologica', sans-serif;
  --wl-ink: #ffffff; --wl-ink2: rgba(236, 234, 255, .72); --wl-glass: rgba(255, 255, 255, .12); --wl-btn: rgba(255, 255, 255, .16); --wl-btn-ink: #ffffff; --wl-arrow: #ffffff; --wl-arrow-ink: #14132a;
  --wl-thumb: #ffffff; --wl-thumb-ink: #121229; --wl-fade: rgba(10, 12, 30, .9); font-family: var(--wf); }
:root[data-theme='light'] .ob-welcome { --wl-ink: #0e1324; --wl-ink2: rgba(14, 19, 36, .64); --wl-glass: rgba(255, 255, 255, .5); --wl-btn: rgba(255, 255, 255, .48); --wl-btn-ink: #0e1324;
  --wl-arrow: #0e1324; --wl-arrow-ink: #ffffff; --wl-thumb: #0e1324; --wl-thumb-ink: #ffffff; --wl-fade: rgba(236, 244, 232, .85); }
.wl-bg { position: absolute; inset: 0; z-index: -2;
  background: radial-gradient(90% 50% at 85% 0%, rgba(150, 120, 255, .30), transparent 70%), radial-gradient(70% 40% at 0% 8%, rgba(255, 110, 170, .16), transparent 70%), linear-gradient(180deg, #060a1c 0%, #0f1438 46%, #231a46 74%, #151126 100%); }
:root[data-theme='light'] .wl-bg { background: radial-gradient(70% 36% at 100% 0%, rgba(255, 196, 222, .5), transparent 70%), linear-gradient(180deg, #8fc0f1 0%, #b9d8f7 32%, #e2eefb 62%, #f3f1ec 100%); }
.wl-art { position: absolute; left: 0; right: 0; bottom: 0; height: calc(100vw * 1.436); max-height: 80%; z-index: 1; pointer-events: none; }
@media (min-width: 600px) { .wl-art { height: 74%; } }
.wart { display: block; width: 100%; height: 100%; }

/* the light layer above the drawing: only transforms and opacity move, nothing behind the button */
.wl-fx { position: absolute; left: 0; right: 0; top: 0; bottom: 36%; z-index: 2; pointer-events: none; overflow: hidden; }
.wl-fx i { position: absolute; display: block; will-change: transform, opacity; }
.wl-fx .pt { left: calc(var(--i) * 16% + 5%); top: -14px; width: 11px; height: 8px; border-radius: 70% 0 70% 0; background: linear-gradient(135deg, #ffd3e2, #f59fbe); opacity: 0; animation: wl-fall 15s linear infinite; animation-delay: calc(var(--i) * -2.6s); }
.wl-fx .ff { left: calc(var(--i) * 13% + 7%); top: calc(56% + (var(--i) * 37% / 7) - 10%); width: 4px; height: 4px; border-radius: 50%; background: #ffe39a; box-shadow: 0 0 10px 3px rgba(255, 220, 140, .55); opacity: 0; animation: wl-fly 7s ease-in-out infinite; animation-delay: calc(var(--i) * -1.1s); }
:root[data-theme='light'] .wl-fx .ff, :root:not([data-theme='light']) .wl-fx .pt { display: none; }
@keyframes wl-fall { 0% { transform: translate3d(0, 0, 0) rotate(0deg); opacity: 0; } 8% { opacity: .9; } 85% { opacity: .8; } 100% { transform: translate3d(90px, 420px, 0) rotate(320deg); opacity: 0; } }
@keyframes wl-fly { 0%, 100% { transform: translate3d(0, 0, 0); opacity: .15; } 50% { transform: translate3d(9px, -14px, 0); opacity: 1; } }

/* top: the brand pill and the language switch, both glass */
.wl-top { position: absolute; top: calc(12px + var(--safe-t)); left: 16px; right: 16px; z-index: 4; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.wl-brand, .wl-langs { background: var(--wl-glass); -webkit-backdrop-filter: blur(18px) saturate(1.8); backdrop-filter: blur(18px) saturate(1.8);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), inset 0 0 0 .6px rgba(255, 255, 255, .35), 0 8px 22px -12px rgba(10, 20, 50, .45); }
.wl-brand { display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 14px 0 11px; border-radius: 999px; font-weight: 700; font-size: .8125rem; letter-spacing: -.01em; }
.wl-brand .ico { width: 15px; height: 15px; color: #ff4f8e; }
.wl-langs { position: relative; display: grid; grid-template-columns: 1fr 1fr; padding: 3px; border-radius: 999px; }
.wl-langs button { position: relative; z-index: 1; min-width: 46px; height: 30px; border-radius: 999px; font: 700 .75rem/1 var(--wf); letter-spacing: .06em; color: var(--wl-ink2); transition: color .35s var(--ease-out); }
.wl-langs button[aria-pressed='true'] { color: var(--wl-thumb-ink); }
.wl-thumb { position: absolute; top: 3px; left: 3px; width: calc(50% - 3px); height: 30px; border-radius: 999px; background: var(--wl-thumb); box-shadow: 0 4px 12px -4px rgba(0, 0, 0, .35); transition: transform .5s cubic-bezier(.2, .9, .25, 1.15); }
.ob-welcome.en .wl-thumb { transform: translateX(100%); }

/* the words: bold and light weights together, one big word in a slowly flowing colour */
.wl-copy { position: relative; z-index: 3; padding: calc(max(78px, 12.5vh) + var(--safe-t)) 22px 0; text-align: center; transition: opacity .17s ease, transform .17s ease; }
.wl-copy.swap { opacity: 0; transform: translateY(4px); }
.wl-title { display: flex; flex-direction: column; align-items: center; color: var(--wl-ink); line-height: 1.02; font-family: var(--wf); }
.wl-title .l1 { font-size: clamp(31px, 9.4vw, 42px); font-weight: 800; letter-spacing: -.04em; }
.wl-title .l2 { font-size: clamp(26px, 7.8vw, 35px); font-weight: 300; letter-spacing: -.03em; margin-top: 2px; }
.wl-title .l3 { font-size: clamp(54px, 16.4vw, 74px); font-weight: 800; letter-spacing: -.06em; line-height: 1; padding: 0 .04em .07em; margin-top: 1px;
  background: linear-gradient(100deg, #ff4f8e 0%, #c64dff 32%, #6f6bff 52%, #ff4f8e 76%, #ffb054 100%); background-size: 230% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: wl-flow 10s ease-in-out infinite alternate; }
:root[data-theme='light'] .wl-title .l3 { background-image: linear-gradient(100deg, #f0306f 0%, #a52be0 32%, #4f4cf0 52%, #f0306f 76%, #f08a1c 100%); }
.wl-title .l4 { font-size: clamp(19px, 5.7vw, 24px); font-weight: 600; letter-spacing: -.025em; margin-top: 3px; }
@keyframes wl-flow { from { background-position: 0% 0; } to { background-position: 100% 0; } }
.wl-sub { margin: 12px auto 0; max-width: 290px; font-size: .9375rem; line-height: 1.42; font-weight: 450; color: var(--wl-ink2); letter-spacing: -.01em; }
.ob-welcome.tight .wl-copy { padding-top: calc(60px + var(--safe-t)); }
.ob-welcome.tight .wl-title .l1 { font-size: 29px; } .ob-welcome.tight .wl-title .l2 { font-size: 24px; } .ob-welcome.tight .wl-title .l3 { font-size: 50px; } .ob-welcome.tight .wl-title .l4 { font-size: 19px; }
.ob-welcome.tight .wl-sub { margin-top: 6px; font-size: .875rem; }
.ob-welcome.tighter .wl-sub { display: none; } .ob-welcome.tighter .wl-copy { padding-top: calc(54px + var(--safe-t)); }

/* the liquid glass button: blur and saturation of what is behind, a rim of light, a highlight that follows the finger */
.wl-cta { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; padding: 30px 20px calc(14px + var(--safe-b)); display: grid; justify-items: center; gap: 10px; }
.wl-cta::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, transparent 8%, var(--wl-fade) 94%); opacity: .7; pointer-events: none; }
.wl-start { position: relative; isolation: isolate; overflow: hidden; width: 100%; max-width: 420px; height: 60px; border-radius: 30px; display: flex; align-items: center; justify-content: center; gap: 12px;
  color: var(--wl-btn-ink); font: 700 1.0625rem/1 var(--wf); letter-spacing: -.015em; background: var(--wl-btn);
  -webkit-backdrop-filter: blur(22px) saturate(1.9) brightness(1.04); backdrop-filter: blur(22px) saturate(1.9) brightness(1.04);
  box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, .85), inset 0 -1px 0 rgba(255, 255, 255, .22), inset 0 0 0 .6px rgba(255, 255, 255, .45), 0 18px 36px -16px rgba(20, 10, 60, .55);
  transform: translateZ(0); will-change: transform; -webkit-tap-highlight-color: transparent; transition: transform .5s cubic-bezier(.2, .9, .25, 1.25), box-shadow .3s ease; }
.wl-start::before { content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1.2px; pointer-events: none;
  background: linear-gradient(140deg, rgba(255, 255, 255, .95), rgba(255, 255, 255, .1) 35%, rgba(255, 255, 255, .04) 65%, rgba(255, 255, 255, .7));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
.wl-start .lg-tint { position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: linear-gradient(120deg, rgba(255, 90, 150, .2), rgba(150, 90, 255, .16) 52%, rgba(80, 160, 255, .14)); }
.wl-start .lg-spec { position: absolute; inset: 0; z-index: -1; border-radius: inherit; opacity: .3; transition: opacity .35s ease; background: radial-gradient(150px 90px at var(--px, 50%) var(--py, 0%), rgba(255, 255, 255, .6), transparent 70%); }
.wl-start.press { transform: scale(.965); box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, .85), inset 0 0 0 .6px rgba(255, 255, 255, .5), 0 10px 22px -14px rgba(20, 10, 60, .5); }
.wl-start.press .lg-spec { opacity: .95; transition-duration: .08s; }
.wl-start .lg-arrow { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--wl-arrow); color: var(--wl-arrow-ink); transition: transform .5s cubic-bezier(.2, .9, .25, 1.4); }
.wl-start .lg-arrow .ico { width: 17px; height: 17px; stroke-width: 2.4; }
.wl-start.press .lg-arrow { transform: translateX(4px); }
.wl-legal { display: flex; align-items: center; gap: 6px; font-size: .75rem; font-weight: 500; color: var(--wl-ink2); }
.wl-legal .ico { width: 13px; height: 13px; flex: none; }

/* entrance: words one by one, the scene settles, the button springs up last */
.ob-welcome .wl-title > *, .ob-welcome .wl-sub, .ob-welcome .wl-top { opacity: 0; transform: translate3d(0, 12px, 0); transition: opacity .9s var(--ease-out), transform .9s var(--ease-out); }
.ob-welcome .wl-art { opacity: 0; transform: translate3d(0, 20px, 0) scale(1.02); transform-origin: 50% 100%; transition: opacity 1.1s var(--ease-out), transform 1.4s var(--ease-out); }
.ob-welcome .wl-cta > * { opacity: 0; transform: translate3d(0, 16px, 0); transition: opacity .8s var(--ease-out) .5s, transform .9s cubic-bezier(.2, .9, .25, 1.15) .5s; }
.ob-welcome.on .wl-title > *, .ob-welcome.on .wl-sub, .ob-welcome.on .wl-top, .ob-welcome.on .wl-art, .ob-welcome.on .wl-cta > * { opacity: 1; transform: none; }
.ob-welcome.on .wl-title > :nth-child(2) { transition-delay: .05s; } .ob-welcome.on .wl-title > :nth-child(3) { transition-delay: .12s; } .ob-welcome.on .wl-title > :nth-child(4) { transition-delay: .18s; }
.ob-welcome.on .wl-sub { transition-delay: .24s; } .ob-welcome.on .wl-art { transition-delay: .06s; }
.ob-welcome.on .wl-cta .wl-start.press { transform: scale(.965); }
@media (prefers-reduced-motion: reduce) { .wl-fx { display: none; } .wl-title .l3 { animation: none; } }
:root.lite .wl-fx { display: none; }

/* the drawing: night by default, day in the light theme */
.wart .bld, .wart .guy, .wart .girl, .wart .trees, .wart .beds { isolation: auto; }
.wart .st { fill: #302d47; } .wart .st-l { fill: #3a3652; } .wart .st-d { fill: #24223a; } .wart .st-dd { fill: #1c1a2c; } .wart .sh { fill: rgba(0, 0, 0, .16); }
.wart .win { fill: #ffd07c; } .wart .w2 { fill: #ffe2a6; } .wart .sill { fill: #302d47; } .wart .glass { fill: #ffc66c; } .wart .mull { fill: #2a2740; }
.wart .emb { fill: none; stroke: #e6c47e; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.wart .stairs { fill: #2b2840; } .wart .step { stroke: #1f1d31; stroke-width: 1.1; fill: none; } .wart .rail { stroke: #4b4868; stroke-width: 1.2; fill: none; }
.wart .pole { fill: #a7acbf; } .wart .flag { opacity: .86; }
.wart .plaza-a { stop-color: #2a2840; } .wart .plaza-b { stop-color: #211f33; } .wart .pl-line { stroke: #1d1b2e; stroke-width: 1; fill: none; }
.wart .hedge { fill: #17322f; } .wart .tr1 { fill: #1b3b37; } .wart .tr2 { fill: #142e2b; } .wart .fir { fill: #12302c; } .wart .fir2 { fill: #0d2623; }
.wart .lamp { fill: #6b6f87; } .wart .lamp-a { fill: none; stroke: #6b6f87; stroke-width: 1.6; stroke-linecap: round; } .wart .lamp-h { fill: #ffe7ad; } .wart .glow { fill: rgba(255, 214, 140, .2); }
.wart .lawn-a { stop-color: #16302d; } .wart .lawn-b { stop-color: #0e211f; } .wart .path-a { stop-color: #322f49; } .wart .path-b { stop-color: #25233a; }
.wart .fence { stroke: #3e3b58; stroke-width: 1.2; fill: none; stroke-linecap: round; }
.wart .bd1 { fill: #1c3a35; } .wart .bd2 { fill: #15302a; } .wart .fl1 { fill: #ff8fb6; } .wart .fl2 { fill: #ece5f4; }
.wart .shadow { fill: rgba(0, 0, 0, .38); }
.wart .trou { fill: #121522; } .wart .shoe { fill: #08090d; } .wart .coat { fill: #161a2b; } .wart .coat-hi { fill: rgba(255, 220, 160, .07); } .wart .seam { stroke: rgba(0, 0, 0, .35); stroke-width: 1; fill: none; }
.wart .watch { fill: #e7b34b; } .wart .skin { fill: #b98e7a; } .wart .collar { fill: #0f111c; } .wart .shirt { fill: #dcdce4; }
.wart .hair-m { fill: #1b130f; } .wart .hair-hi { fill: none; stroke: #4a352b; stroke-width: 1.3; stroke-linecap: round; }
.wart .leg { fill: #bb9482; } .wart .heel { fill: #0b0b10; } .wart .trench { fill: #8e7457; } .wart .trench-hi { fill: rgba(255, 230, 190, .1); } .wart .trench-d { stroke: rgba(30, 18, 8, .35); stroke-width: 1; fill: none; }
.wart .belt { fill: #6f5640; } .wart .chain { fill: none; stroke: #e7b34b; stroke-width: 1.4; stroke-dasharray: 2 1.2; } .wart .chain-c { fill: #e7b34b; } .wart .bag { fill: #101015; } .wart .quilt { stroke: rgba(255, 255, 255, .1); stroke-width: .7; fill: none; }
.wart .hair-g { fill: #3a2418; } .wart .hair-gh { fill: none; stroke: #7e583d; stroke-width: 1.4; stroke-linecap: round; opacity: .85; }
.wart .day { display: none; } .wart .moon { fill: #fff3d6; } .wart .moon-glow { fill: rgba(255, 238, 200, .07); } .wart .star { fill: #ffffff; opacity: .85; }
:root[data-theme='light'] .wart .night, :root[data-theme='light'] .wart .glow { display: none; } :root[data-theme='light'] .wart .day { display: inline; }
:root[data-theme='light'] .wart .cloud path { fill: #ffffff; opacity: .9; }
:root[data-theme='light'] .wart .st { fill: #e6e1d8; } :root[data-theme='light'] .wart .st-l { fill: #efebe4; } :root[data-theme='light'] .wart .st-d { fill: #c9c1b4; } :root[data-theme='light'] .wart .st-dd { fill: #b1a89a; } :root[data-theme='light'] .wart .sh { fill: rgba(120, 100, 80, .1); }
:root[data-theme='light'] .wart .win { fill: #7d93ab; } :root[data-theme='light'] .wart .w2 { fill: #6c839d; } :root[data-theme='light'] .wart .sill { fill: #d6d0c5; } :root[data-theme='light'] .wart .glass { fill: #9db2c8; } :root[data-theme='light'] .wart .mull { fill: #e6e1d8; }
:root[data-theme='light'] .wart .emb { stroke: #3c4049; }
:root[data-theme='light'] .wart .stairs { fill: #ddd7ce; } :root[data-theme='light'] .wart .step { stroke: #c3bcb0; } :root[data-theme='light'] .wart .rail { stroke: #8b9099; }
:root[data-theme='light'] .wart .pole { fill: #f3f5f8; } :root[data-theme='light'] .wart .flag { opacity: 1; }
:root[data-theme='light'] .wart .plaza-a { stop-color: #dcd8d0; } :root[data-theme='light'] .wart .plaza-b { stop-color: #cdc8bf; } :root[data-theme='light'] .wart .pl-line { stroke: #c4beb4; }
:root[data-theme='light'] .wart .hedge { fill: #6d9a61; } :root[data-theme='light'] .wart .tr1 { fill: #79ab6c; } :root[data-theme='light'] .wart .tr2 { fill: #64995a; } :root[data-theme='light'] .wart .fir { fill: #4d7e4b; } :root[data-theme='light'] .wart .fir2 { fill: #3e6d3f; }
:root[data-theme='light'] .wart .lamp { fill: #8a919a; } :root[data-theme='light'] .wart .lamp-a { stroke: #8a919a; } :root[data-theme='light'] .wart .lamp-h { fill: #f2f5f8; }
:root[data-theme='light'] .wart .lawn-a { stop-color: #94c580; } :root[data-theme='light'] .wart .lawn-b { stop-color: #7ab26a; } :root[data-theme='light'] .wart .path-a { stop-color: #ece6db; } :root[data-theme='light'] .wart .path-b { stop-color: #e0d8ca; }
:root[data-theme='light'] .wart .fence { stroke: #b8af9f; }
:root[data-theme='light'] .wart .bd1 { fill: #6ea463; } :root[data-theme='light'] .wart .bd2 { fill: #5c9554; } :root[data-theme='light'] .wart .fl1 { fill: #f4a2c0; } :root[data-theme='light'] .wart .fl2 { fill: #ffffff; }
:root[data-theme='light'] .wart .shadow { fill: rgba(30, 60, 20, .2); }
:root[data-theme='light'] .wart .trou { fill: #1e2233; } :root[data-theme='light'] .wart .shoe { fill: #0c0d12; } :root[data-theme='light'] .wart .coat { fill: #252a3d; } :root[data-theme='light'] .wart .coat-hi { fill: rgba(255, 255, 255, .07); }
:root[data-theme='light'] .wart .skin { fill: #e5b69b; } :root[data-theme='light'] .wart .collar { fill: #1a1e2d; } :root[data-theme='light'] .wart .shirt { fill: #f7f7f7; }
:root[data-theme='light'] .wart .hair-m { fill: #2a1b14; } :root[data-theme='light'] .wart .hair-hi { stroke: #4e382c; }
:root[data-theme='light'] .wart .leg { fill: #ecc6ac; } :root[data-theme='light'] .wart .trench { fill: #c8a279; } :root[data-theme='light'] .wart .trench-hi { fill: rgba(255, 255, 255, .13); } :root[data-theme='light'] .wart .trench-d { stroke: rgba(90, 60, 25, .3); }
:root[data-theme='light'] .wart .belt { fill: #a58057; } :root[data-theme='light'] .wart .hair-g { fill: #4f321f; } :root[data-theme='light'] .wart .hair-gh { stroke: #a9794f; }

/* ---------- "Ищу тебя": short messages, 4–5 on a screen; reactions, comments and "It's me" on one line ---------- */
.lf-intro { padding: 0 20px 8px; font-size: .75rem; line-height: 1.35; }
.post3 { position: relative; margin: 0 0 7px; padding: 8px 12px 8px; border-radius: 20px; background: var(--card); box-shadow: var(--card-shadow); animation: rise-in .45s var(--ease-out) backwards; animation-delay: calc(var(--i, 0) * 22ms); }
.post3::after { content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none; background: var(--card-edge);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
.post3.pinned { box-shadow: var(--card-shadow), inset 0 0 0 1px rgba(var(--gold-rgb), .4); }
.p3-h { display: flex; align-items: center; gap: 8px; min-width: 0; height: 26px; }
.p3-av { flex: none; }
.p3-av .av, .p3-av img { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; display: grid; place-items: center; }
.p3-av .anon-av .ico { width: 15px; height: 15px; }
.p3-n { min-width: 0; display: flex; align-items: center; gap: 5px; font-size: .875rem; font-weight: 650; white-space: nowrap; overflow: hidden; }
.p3-n .bdg { width: 30px; height: 30px; margin: -8px -9px; } .p3-n .bdg .ico { width: 14px; height: 14px; }
.p3-t { flex: none; display: inline-flex; align-items: center; gap: 3px; font-size: .75rem; color: var(--ink-3); }
.p3-t .ico { width: 11px; height: 11px; }
.p3-more { margin: -8px -8px -8px auto; color: var(--ink-3); }
.p3-x { margin: 4px 0 0; font-size: .90625rem; line-height: 1.36; white-space: pre-wrap; overflow-wrap: anywhere; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.p3-x.clamp { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.p3-a { display: flex; align-items: center; gap: 6px; margin-top: 6px; min-width: 0; }
.p3-a .prx { display: flex; gap: 4px; min-width: 0; flex: 0 1 auto; overflow-x: auto; scrollbar-width: none; }
.p3-a .prx::-webkit-scrollbar { display: none; }
.p3-a .rx { height: 26px; padding: 0 8px; font-size: .8125rem; flex: none; }
.p3-c { flex: none; display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 10px; border-radius: 999px; background: var(--chip); color: var(--ink-2); font-size: .8125rem; font-weight: 650; transition: transform .45s var(--settle); }
.p3-c:active { transform: scale(.92); }
.p3-c .ico { width: 15px; height: 15px; }
.p3-sp { flex: 1; }
.p3-a .itsme { flex: none; min-height: 28px; padding: 0 12px; font-size: .8125rem; }
.p3-claims { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 12px; border-radius: 999px; background: var(--chip); font-size: .8125rem; font-weight: 650; }
.p3-claims .ico { width: 15px; height: 15px; } .p3-claims.hot { background: var(--pri); color: var(--on-pri); }
.p3-claims b { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--danger); color: #fff; font-size: .6875rem; display: grid; place-items: center; }

/* ---------- support: the topics are always a list you can see at once ---------- */
.sp-topics.row { flex-wrap: wrap; overflow: visible; margin: 0; padding: 2px 0 4px; }

/* ---------- likes: a gold ring and a crown under the name for Gold people ---------- */
.liker.gold .ring { background: none; }
.liker .ring .gf-ring { inset: 0; padding: 3px; border-radius: 50%; z-index: 1; }
.liker .lk-n { max-width: 72px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.liker .lk-crown { display: grid; place-items: center; margin-top: -5px; color: #f2c14e; }
.liker .lk-crown .ico, .liker .ico.lk-crown { width: 14px; height: 14px; color: #f2c14e; }
:root[data-theme='light'] .liker .lk-crown, :root[data-theme='light'] .liker .ico.lk-crown { color: #d49a1f; }

/* ---------- recommendations: a small photo and a widget with what you have in common ---------- */
.rec2 { position: relative; display: flex; gap: 12px; padding: 10px; margin-bottom: 10px; border-radius: 22px; background: var(--card); box-shadow: var(--card-shadow); }
.rec2.fresh { box-shadow: var(--card-shadow), inset 0 0 0 1.5px rgba(var(--night-rgb), .45); }
.rec2.skel { height: 168px; }
.r2-ph { position: relative; flex: none; width: 104px; aspect-ratio: 3 / 4; border-radius: 16px; overflow: hidden; background: var(--s2); align-self: flex-start; isolation: isolate; }
.r2-ph > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.r2-ph .ph { position: absolute; inset: 0; background: var(--s3); }
.r2-pct { position: absolute; left: 6px; bottom: 6px; z-index: 2; padding: 3px 8px; border-radius: 999px; background: rgba(0, 0, 0, .5); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: #fff; font-size: .8125rem; }
.r2-pct b { font-weight: 800; }
.r2-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.r2-name { display: flex; align-items: center; gap: 6px; min-width: 0; }
.r2-name > b { font-size: 1rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.r2-name .age { font-weight: 450; color: var(--ink-2); }
.r2-name .bdg { width: 30px; height: 30px; margin: -7px -8px; } .r2-name .bdg .ico { width: 15px; height: 15px; }
.r2-meta { font-size: .75rem; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.r2-why { display: grid; gap: 4px; margin-top: 2px; padding: 8px 10px; border-radius: 14px; background: var(--chip); }
.r2-why .caps { font-size: .625rem; color: var(--ink-3); }
.r2-w { display: flex; align-items: flex-start; gap: 6px; font-size: .75rem; line-height: 1.3; color: var(--ink); }
.r2-w .ico { width: 13px; height: 13px; flex: none; margin-top: 1px; color: rgb(var(--night-rgb)); }
.r2-acts { display: flex; gap: 6px; margin-top: auto; padding-top: 4px; }
.r2-b { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 34px; border-radius: 999px; font-size: .8125rem; font-weight: 650; transition: transform .45s var(--settle); }
.r2-b:active { transform: scale(.93); }
.r2-b.no { width: 34px; flex: none; background: var(--danger-bg); color: var(--danger); }
.r2-b.ok { flex: 1; background: var(--ok); color: var(--ok-ink); }
.r2-b .ico { width: 16px; height: 16px; }
.r2-done { display: inline-flex; align-items: center; gap: 5px; font-size: .75rem; color: var(--ink-3); }
.r2-done .ico { width: 14px; height: 14px; }
/* the tab of new picks glows */
.nt-glow { color: var(--ink) !important; }
.nt-glow::after { content: ''; position: absolute; inset: 2px; border-radius: inherit; pointer-events: none; box-shadow: 0 0 0 1.5px rgba(var(--night-rgb), .65), 0 0 18px rgba(var(--night-rgb), .5); animation: nt-pulse 2.2s ease-in-out infinite; }
@keyframes nt-pulse { 0%, 100% { opacity: .45; } 50% { opacity: 1; } }
.nt-new { display: inline-grid; place-items: center; min-width: 18px; height: 18px; margin-left: 6px; padding: 0 5px; border-radius: 999px; background: rgb(var(--night-rgb)); color: #fff; font-size: .6875rem; font-weight: 800; vertical-align: 1px; }
.rec-teaser.hot { box-shadow: var(--card-shadow), 0 0 0 1.5px rgba(var(--night-rgb), .55), 0 0 22px rgba(var(--night-rgb), .3); }
.rec-teaser.hot .rt-ic { animation: nt-pulse 2.2s ease-in-out infinite; }

/* ---------- the gift price chart ---------- */
.gs-chart { display: flex; align-items: center; gap: 8px; width: 100%; margin-top: 10px; padding: 10px 12px; border-radius: 14px; background: var(--chip); font-size: .875rem; font-weight: 650; text-align: left; transition: transform .45s var(--settle); }
.gs-chart:active { transform: scale(.98); }
.gs-chart span { flex: 1; } .gs-chart .ico { width: 17px; height: 17px; } .gs-chart > .ico:last-child { color: var(--ink-3); }
.gc-head { display: flex; align-items: center; gap: 10px; }
.gc-head .gt-mini { width: 44px; height: 44px; }
.gc-ht { flex: 1; min-width: 0; display: grid; gap: 1px; } .gc-ht b { font-size: 1.0625rem; } .gc-ht span { font-size: .75rem; color: var(--ink-3); }
.gc-live { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: 999px; background: var(--ok-bg); color: var(--ok); font-size: .6875rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
.gc-live i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; animation: nt-pulse 1.6s ease-in-out infinite; }
.gc-now { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; margin: 14px 0 12px; }
.gc-now .caps { width: 100%; }
.gc-now b { font-size: 2rem; font-weight: 800; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.gc-now .dl { font-size: .875rem; margin-left: 0; }
.gc-ctl { display: flex; align-items: center; gap: 8px; } .gc-ctl .seg { flex: 1; }
.gc-mode { width: 40px; height: 40px; flex: none; border-radius: 14px; display: grid; place-items: center; background: var(--chip); }
.gc-mode .ico { width: 19px; height: 19px; }
.gc-box { position: relative; margin-top: 12px; padding: 10px 6px 4px 10px; border-radius: 22px; background: var(--card); box-shadow: var(--card-shadow); overflow: hidden; }
.gc-svg { display: block; width: 100%; height: auto; touch-action: pan-y; color: var(--ok); }
.gc-svg.down { color: var(--danger); }
.gc-grid { stroke: var(--line); stroke-width: 1; } .gc-yl, .gc-xl { fill: var(--ink-3); font-size: 10px; font-family: var(--font); font-variant-numeric: tabular-nums; }
.gc-vol { fill: var(--ink-3); opacity: .28; }
.gc-area { fill: url(#gcFill); } .gc-line { fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linejoin: round; stroke-linecap: round; }
.gc-dot { fill: var(--bg); stroke: currentColor; stroke-width: 1.6; } .gc-dot.resale { fill: currentColor; }
.gc-value { fill: none; stroke: rgb(var(--night-rgb)); stroke-width: 1.4; stroke-dasharray: 4 3; opacity: .9; }
.gc-floor { fill: none; stroke: var(--gold); stroke-width: 1.4; stroke-dasharray: 2 3; }
.gc-svg .cu line, .gc-svg .cd line { stroke-width: 1.2; } .gc-svg .cu { fill: var(--ok); stroke: var(--ok); } .gc-svg .cd { fill: var(--danger); stroke: var(--danger); }
.gc-cross { stroke: var(--ink-2); stroke-width: 1; stroke-dasharray: 3 3; } .gc-cdot { fill: currentColor; stroke: var(--bg); stroke-width: 2; }
.gc-tip { position: absolute; top: 8px; z-index: 2; display: grid; gap: 1px; padding: 7px 10px; border-radius: 12px; background: var(--sheet-solid); box-shadow: var(--shadow-md), inset 0 0 0 1px var(--line); pointer-events: none; white-space: nowrap; }
.gc-tip b { font-size: .9375rem; } .gc-tip span { font-size: .6875rem; color: var(--ink-3); }
.gc-empty { position: absolute; left: 16px; right: 16px; top: 40%; text-align: center; font-size: .8125rem; color: var(--ink-2); }
.gc-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 10px 4px 0; font-size: .75rem; color: var(--ink-2); }
.gc-legend span { display: inline-flex; align-items: center; gap: 6px; }
.gc-legend i { width: 16px; height: 0; border-top: 2.2px solid var(--ok); } .gc-legend .lg-floor { border-top: 1.6px dashed var(--gold); } .gc-legend .lg-value { border-top: 1.6px dashed rgb(var(--night-rgb)); }
.gc-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 14px; }
.gc-stats > div { display: grid; gap: 2px; padding: 10px 12px; border-radius: 16px; background: var(--card); box-shadow: var(--card-shadow); min-width: 0; }
.gc-stats span { font-size: .6875rem; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gc-stats b { font-size: .9375rem; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gc-stats b i { font-style: normal; font-weight: 500; color: var(--ink-3); font-size: .75rem; }
.gc-trades .row { min-height: 44px; }
.gc-k { flex: none; min-width: 64px; padding: 3px 8px; border-radius: 999px; font-size: .6875rem; font-weight: 700; text-align: center; background: var(--chip); }
.gc-k.resale { background: var(--gold-bg); color: var(--gold); } .gc-k.exchange { background: rgba(var(--blue-rgb), .14); color: var(--blue); }
.gc-note { display: flex; gap: 6px; align-items: flex-start; margin-top: 14px; } .gc-note .ico { width: 13px; height: 13px; flex: none; margin-top: 1px; }

/* ---------- banner formats and cropping ---------- */
.ad-fmt { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 16px; background: var(--chip); margin-bottom: 8px; }
.ad-fmt > span:last-child { display: grid; gap: 2px; min-width: 0; } .ad-fmt b { font-size: .8125rem; } .ad-fmt > span:last-child > span { font-size: .75rem; color: var(--ink-2); line-height: 1.35; }
.af-shape { flex: none; border-radius: 6px; border: 2px dashed var(--ink-3); } .af-shape.sq { width: 32px; height: 32px; } .af-shape.v { width: 27px; height: 36px; }
.crop-frame { position: relative; width: min(100%, 360px); margin: 14px auto 0; border-radius: 18px; overflow: hidden; background: #000; touch-action: none; cursor: grab; -webkit-mask-image: -webkit-radial-gradient(white, black); }
.crop-frame img { position: absolute; left: 0; top: 0; max-width: none; user-select: none; -webkit-user-select: none; pointer-events: none; opacity: 0; transition: opacity .25s; }
.crop-frame.ready img { opacity: 1; }
.crop-grid { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, transparent 33%, rgba(255, 255, 255, .25) 33.3%, transparent 33.6%, transparent 66.4%, rgba(255, 255, 255, .25) 66.6%, transparent 67%), linear-gradient(transparent 33%, rgba(255, 255, 255, .25) 33.3%, transparent 33.6%, transparent 66.4%, rgba(255, 255, 255, .25) 66.6%, transparent 67%); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .6); border-radius: inherit; }
.crop-zoom { display: block; width: min(100%, 360px); margin: 16px auto 0; }

/* ---------- right after sign-up: Gold next to verification ---------- */
.ob-gold { position: relative; display: flex; align-items: center; gap: 12px; width: 100%; margin-top: 12px; padding: 12px 14px; border-radius: 22px; text-align: left; overflow: hidden; isolation: isolate; color: #fff8e6;
  background: linear-gradient(135deg, #2a2213, #17140c); box-shadow: 0 0 0 1px rgba(var(--gold-rgb), .45), 0 14px 30px -18px rgba(233, 168, 48, .7); transition: transform .45s var(--settle); }
.ob-gold:active { transform: scale(.98); }
.ob-gold::before { content: ''; position: absolute; inset: 0; z-index: -1; background: radial-gradient(60% 120% at 100% 0%, rgba(255, 210, 120, .3), transparent 70%); }
.og-ic { width: 38px; height: 38px; flex: none; border-radius: 13px; display: grid; place-items: center; color: #4d3200; background: linear-gradient(150deg, #fff6d6, #f6cf68 35%, #d5962a 70%, #f9dd8c); }
.og-ic .ico { width: 20px; height: 20px; }
.og-t { flex: 1; min-width: 0; display: grid; gap: 2px; } .og-t b { font-size: .9375rem; } .og-t span { font-size: .75rem; opacity: .78; line-height: 1.35; }
.og-go { flex: none; padding: 7px 12px; border-radius: 999px; background: linear-gradient(180deg, #fbe2a0, #e6ad42 58%, #c98a1e); color: var(--gold-ink); font-size: .75rem; font-weight: 800; }

/* ---------- stars out: the plan from the balance ---------- */
.po-ic.gold { color: #4d3200; background: linear-gradient(150deg, #fff6d6, #f6cf68 35%, #d5962a 70%, #f9dd8c); }

.gc-reft { font-size: 9.5px; font-weight: 700; font-family: var(--font); }
.gc-reft.gc-value-t { fill: rgb(var(--night-rgb)); } .gc-reft.gc-floor-t { fill: var(--gold); }

.gc-skel { display: grid; } .wart .lamp-g { isolation: auto; } .wl-start .lg-label { position: relative; } .gc-legend .lg-line { border-top-color: var(--ok); }
/* compact post buttons stay small on screen but get a finger-sized hit area */
.p3-av, .p3-a .rx, .p3-c, .p3-claims, .p3-a .itsme { position: relative; }
.p3-av::after, .p3-a .rx::after, .p3-c::after, .p3-claims::after, .p3-a .itsme::after { content: ''; position: absolute; inset: -9px -3px; }
/* the error screens (login expired, maintenance, banned) can appear mid-session: they cover the app completely */
.fatal { position: fixed; inset: 0; z-index: 9600; margin: 0; align-content: center; background: var(--bg); padding: 30px max(30px, env(safe-area-inset-right)) 30px max(30px, env(safe-area-inset-left)); }
.fatal p { max-width: 340px; }

/* ===================== v8.5 ===================== */

/* ---------- the swipe card: one clean photo, a tap opens the profile, up = the next person ---------- */
.dc-top { top: 16px; }
.dc-name { padding-right: 0; }
.dcard { cursor: pointer; }
.dc-pcount { display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 10px; border-radius: 99px; color: #fff; font-size: .75rem; font-weight: 700; letter-spacing: .01em;
  background: rgba(18, 18, 22, .26); -webkit-backdrop-filter: blur(14px) saturate(1.7); backdrop-filter: blur(14px) saturate(1.7);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), inset 0 0 0 1px rgba(255, 255, 255, .14), 0 4px 14px rgba(0, 0, 0, .18); }
.dc-pcount .ico { width: 14px; height: 14px; }
.lite .dc-pcount { background: rgba(18, 18, 22, .55); -webkit-backdrop-filter: none; backdrop-filter: none; }
.stamp.next { left: 50%; right: auto; top: auto; bottom: 44%; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 6px; color: #fff; border-color: rgba(255, 255, 255, .85);
  background: rgba(255, 255, 255, .14); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 0 26px rgba(255, 255, 255, .28), inset 0 0 14px rgba(255, 255, 255, .16); }
.stamp.next .ico { width: 20px; height: 20px; stroke-width: 2.6; }
.dc-tint.next { background: linear-gradient(0deg, transparent 35%, rgba(255, 255, 255, .2)); }
.dcard.tap { animation: card-tap .42s var(--settle); }
@keyframes card-tap { 35% { transform: scale(.975); } }
.coach-hand.up { animation: hand-up 1.6s cubic-bezier(.45, 0, .2, 1) infinite; }
@keyframes hand-up { 0%, 100% { transform: translateY(46px); opacity: .9; } 55% { transform: translateY(-64px); opacity: 1; } 75% { transform: translateY(-64px); opacity: 0; } }

/* ---------- profile: the photo flies in from the card, the sheet rises softly under it ---------- */
.sheet.hero { transform: translateY(28px); opacity: 0; transition: transform .52s cubic-bezier(.2, .85, .25, 1), opacity .3s ease; }
.sheet.hero.on { transform: translateY(0); opacity: 1; }
.sheet.hero.out { transform: translateY(104%); opacity: 1; transition: transform .4s cubic-bezier(.32, .72, 0, 1); }
.sheet.hero.dragging { transition: none; }
.hero-fly { position: fixed; overflow: hidden; border-radius: 34px; pointer-events: none; background: #111; box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .6); transition: opacity .2s ease; will-change: left, top, width, height; contain: strict; }
.hero-fly.gone { opacity: 0; }
.hero-fly .hf-bg { position: absolute; left: 0; top: 0; width: 25%; height: 25%; transform: scale(4); transform-origin: 0 0; object-fit: cover; filter: blur(7px) brightness(.75); }
.hero-fly .hf-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.profile-sheet .pv-card { transition: width .35s var(--ease-out), transform .55s var(--settle), opacity .2s ease; }
.profile-sheet .pv-card.hero-wait { opacity: 0; transition: none; }
.pv-zod { display: flex; align-items: center; gap: 6px; margin-top: 6px; color: var(--ink-2); font-size: .875rem; }
.pv-zod .ico { width: 15px; height: 15px; }

/* the bottom of the profile: likes · views · gifts · comments */
.pv-engage { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 8px; margin-top: 26px; }
.pe { position: relative; display: grid; justify-items: center; align-content: center; gap: 2px; min-height: 76px; padding: 10px 2px; border-radius: 22px; text-align: center; color: var(--ink);
  background: var(--s1); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), inset 0 0 0 1px var(--line); transition: transform .5s var(--settle), background-color .25s; }
:root[data-theme='light'] .pe { box-shadow: inset 0 1px 0 #fff, 0 6px 18px -12px rgba(20, 20, 30, .25), inset 0 0 0 1px var(--line); }
button.pe:active { transform: scale(.94); transition-duration: .08s; }
.pe-ic { color: var(--ink-2); line-height: 0; } .pe-ic .ico { width: 21px; height: 21px; }
.pe b { font-size: 1.0625rem; font-weight: 750; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.pe-l { font-size: .65rem; letter-spacing: -.005em; color: var(--ink-3); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 379px) { .pv-engage { grid-auto-flow: row; grid-template-columns: 1fr 1fr; } .pe { min-height: 64px; } }
.pe.like[aria-pressed='true'] .pe-ic { color: var(--danger); }
.pe.like[aria-pressed='true'] .pe-ic .ico { fill: currentColor; animation: pop .5s var(--settle); }
.pe-lock { position: absolute; top: 7px; right: 8px; color: var(--gold); line-height: 0; } .pe-lock .ico { width: 12px; height: 12px; }
.pe-note { display: flex; align-items: center; gap: 6px; margin-top: 8px; } .pe-note .ico { width: 13px; height: 13px; flex: none; }
.pv-gifts { margin-top: 22px; }

/* the Telegram name row: Gold opens it, the chat here stays the main way */
.pv-tg { width: 100%; margin-top: 16px; display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 22px; text-align: left; color: var(--ink);
  background: var(--s1); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), inset 0 0 0 1px var(--line); transition: transform .5s var(--settle); }
.pv-tg:active { transform: scale(.98); transition-duration: .08s; }
.pt-ic { width: 40px; height: 40px; border-radius: 13px; display: grid; place-items: center; flex: none; color: #fff; background: linear-gradient(180deg, #3ec0ff, #1689d6); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), 0 6px 14px -6px rgba(22, 137, 214, .7); }
.pt-ic .ico { width: 20px; height: 20px; }
.pv-tg.locked .pt-ic { background: linear-gradient(180deg, #8a8f98, #5d626b); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3); }
.pt-t { flex: 1; min-width: 0; display: grid; gap: 2px; }
.pt-t b { font-size: .9375rem; } .pt-t span { font-size: .75rem; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pv-tg .tag.mini { flex: none; }

/* "Написать" without a match: a chat bubble with a little gold crown */
.write-btn .wb-crown { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; margin-left: -2px; color: var(--gold-ink); background: linear-gradient(180deg, #fbe2a0, #e6ad42); box-shadow: 0 2px 8px rgba(230, 173, 66, .45); }
.write-btn .wb-crown .ico { width: 11px; height: 11px; }

/* who liked me */
.lk-heart { color: var(--danger); line-height: 0; flex: none; } .lk-heart .ico { width: 18px; height: 18px; }
.vw-faces.lk span { background: linear-gradient(135deg, rgba(var(--danger-rgb), .35), var(--s3)); }

/* ---------- banners: the picture fills the whole 4:1 slot, one glass button on top ---------- */
.banner { display: block; width: calc(100% - 28px); margin: 12px 14px; padding: 0; aspect-ratio: 4 / 1; border-radius: 22px; overflow: hidden; isolation: isolate; background: var(--s2); color: #fff;
  box-shadow: 0 16px 34px -20px rgba(0, 0, 0, .7), inset 0 0 0 1px var(--line); }
:root[data-theme='light'] .banner { box-shadow: 0 14px 30px -20px rgba(20, 20, 30, .45), inset 0 0 0 1px var(--line); }
.banner::after { z-index: 3; }
.banner .bn-img { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 0; object-fit: cover; z-index: 0; }
.banner .bn-shade { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(70% 120% at 0% 100%, rgba(0, 0, 0, .34), transparent 60%); }
.banner .adl { position: absolute; top: 7px; right: 8px; left: auto; z-index: 2; padding: 2px 7px; border-radius: 99px; font-size: .5625rem; font-weight: 750; letter-spacing: .07em; text-transform: uppercase; color: rgba(255, 255, 255, .9);
  background: rgba(10, 10, 14, .32); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.banner .bn-cta { position: absolute; left: 10px; bottom: 9px; z-index: 2; display: inline-flex; align-items: center; gap: 4px; max-width: 62%; height: 30px; padding: 0 11px 0 14px; border-radius: 99px;
  color: #fff; font-size: .78rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  background: rgba(16, 16, 20, .3); -webkit-backdrop-filter: blur(16px) saturate(1.8); backdrop-filter: blur(16px) saturate(1.8);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), inset 0 0 0 1px rgba(255, 255, 255, .24), 0 8px 18px rgba(0, 0, 0, .28); }
.banner .bn-cta .ico { width: 14px; height: 14px; flex: none; }
.lite .banner .bn-cta, .lite .banner .adl { background: rgba(16, 16, 20, .62); -webkit-backdrop-filter: none; backdrop-filter: none; }
.banner .bn-empty { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 8px; color: var(--ink-3); font-size: .75rem; font-weight: 650;
  background: linear-gradient(135deg, var(--s2), var(--s3)); }
.banner .bn-empty .ico { width: 20px; height: 20px; }
.banner.placeholder { display: flex; align-items: center; gap: 12px; padding: 0 16px; color: var(--ink); background: transparent; border: 1.5px dashed var(--line-2); box-shadow: none; }
.banner.placeholder .ph-ico { width: 44px; height: 44px; border-radius: 14px; }
.banner.placeholder .bt { display: grid; gap: 2px; min-width: 0; text-align: left; }
.banner.placeholder .bt b { font-size: .875rem; } .banner.placeholder .bt span { font-size: .6875rem; color: var(--ink-3); line-height: 1.3; }
.ad-rot .rot-dots { bottom: 10px; left: auto; right: 12px; transform: none; z-index: 2; }
.ad-rot .rot-dots i { background: rgba(255, 255, 255, .45); } .ad-rot .rot-dots i.on { background: #fff; }
.lf-ad { margin: 0 -14px; }
.af-shape.wide { width: 44px; height: 11px; border-radius: 4px; }
@media (max-width: 340px) { .banner .bn-cta { height: 26px; font-size: .72rem; padding: 0 9px 0 11px; } .banner.placeholder .ph-ico { width: 36px; height: 36px; } }

/* ===================== v8.6 ===================== */

/* ---------- full-screen photos: any proportion (also 9:16) fits the screen whole, below the close button ---------- */
.pview .pv-slide { position: relative; display: block; }
.pview .pv-slide img { position: absolute; left: 0; top: calc(58px + var(--safe-t)); width: 100%; height: calc(100% - 82px - var(--safe-t) - var(--safe-b));
  max-width: none; max-height: none; object-fit: contain; object-position: 50% 50%; }

/* ---------- the verified tick is always visible: its check takes the colour of what is behind the badge ---------- */
.btn .vf-ico, .bdg-hero.ver .bdg-big .vf-ico, .bdg-hero.ver .bdg-big .ico { --on-verified: var(--pri); }
.btn.line .vf-ico, .btn.ghost .vf-ico, .btn.dim .vf-ico { --on-verified: var(--bg); }
.bdg-hero.ver .bdg-big { color: var(--on-pri); }

/* ---------- compatibility: a titled block that unfolds in place ---------- */
.pv-cx { margin-top: 14px; border-radius: 22px; background: var(--s1); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), inset 0 0 0 1px var(--line); overflow: hidden; }
:root[data-theme='light'] .pv-cx { box-shadow: inset 0 1px 0 #fff, 0 8px 22px -16px rgba(20, 20, 30, .3), inset 0 0 0 1px var(--line); }
.pvx-head { width: 100%; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 8px 10px; padding: 12px 14px; text-align: left; color: var(--ink); transition: background-color .2s; }
.pvx-head:active { background: var(--chip); }
.pvx-t { font-size: .6875rem; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.pvx-chev { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--chip); color: var(--ink-2); transition: transform .5s var(--settle), background-color .2s; }
.pvx-chev .ico { width: 16px; height: 16px; }
.pv-cx.open .pvx-chev { transform: rotate(180deg); }
.pvx-pills { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; }
.pvx-pill { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 13px 0 11px; border-radius: 99px; background: var(--chip); font-size: .8125rem; }
.pvx-pill .ico { width: 16px; height: 16px; color: var(--ink-2); } .pvx-pill b { font-weight: 800; font-variant-numeric: tabular-nums; } .pvx-pill span { font-size: .6875rem; font-weight: 600; color: var(--ink-3); }
.pvx-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .45s cubic-bezier(.2, .85, .25, 1); }
.pv-cx.open .pvx-body { grid-template-rows: 1fr; }
.pvx-in { min-height: 0; overflow: hidden; display: grid; gap: 8px; padding: 0 14px; opacity: 0; transition: opacity .3s ease, padding .45s cubic-bezier(.2, .85, .25, 1); }
.pv-cx.open .pvx-in { padding: 0 14px 14px; opacity: 1; }
.pvx-in .cx-r { display: flex; align-items: flex-start; gap: 9px; font-size: .875rem; line-height: 1.4; color: var(--ink); }
.pvx-in .cx-r .ico { width: 17px; height: 17px; flex: none; margin-top: 1px; color: var(--ink-2); }
.pvx-more { justify-self: start; display: inline-flex; align-items: center; gap: 3px; min-height: 32px; font-size: .8125rem; font-weight: 650; color: var(--ink-2); }
.pvx-more .ico { width: 14px; height: 14px; }

/* ---------- the bottom of a profile: actions that ask for a tap ---------- */
.pv-act { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 26px; }
.pv-act.own { grid-template-columns: 1fr 1fr; }
.pa { position: relative; display: grid; justify-items: center; align-content: center; gap: 3px; min-height: 92px; padding: 12px 4px 10px; border-radius: 24px; text-align: center; color: var(--ink);
  background: var(--s1); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .09), inset 0 0 0 1px var(--line), 0 10px 24px -18px rgba(0, 0, 0, .55);
  transition: transform .55s var(--settle), background-color .25s, box-shadow .3s; overflow: hidden; isolation: isolate; }
:root[data-theme='light'] .pa { box-shadow: inset 0 1px 0 #fff, inset 0 0 0 1px var(--line), 0 10px 24px -16px rgba(20, 20, 30, .28); }
.pa::before { content: ''; position: absolute; inset: 0; z-index: -1; opacity: 0; transition: opacity .45s var(--ease-out); background: radial-gradient(120px circle at var(--px, 50%) var(--py, 30%), rgba(255, 255, 255, .22), transparent 70%); }
.pa:active { transform: scale(.94); transition-duration: .1s; } .pa:active::before { opacity: 1; transition-duration: .05s; }
.pa-ic { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; color: #fff; margin-bottom: 3px; transition: transform .5s var(--settle);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 8px 16px -8px var(--pa-glow, rgba(0, 0, 0, .4)); }
.pa-ic .ico { width: 20px; height: 20px; }
.pa.like .pa-ic { background: linear-gradient(180deg, #ff7a93, #e8385a); --pa-glow: rgba(232, 56, 90, .7); }
.pa.gift .pa-ic { background: linear-gradient(180deg, #ffd978, #e6a93a); color: #4a2f00; --pa-glow: rgba(230, 169, 58, .7); }
.pa.cmt .pa-ic { background: linear-gradient(180deg, #6fc3ff, #2f8fe0); --pa-glow: rgba(47, 143, 224, .7); }
.pa.view .pa-ic { background: linear-gradient(180deg, #b59bff, #7b5be0); --pa-glow: rgba(123, 91, 224, .7); }
.pa > b { font-size: .875rem; font-weight: 750; letter-spacing: -.01em; }
.pa > span:not(.pa-ic) { font-size: .6875rem; color: var(--ink-3); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pa.like[aria-pressed='true'] { background: rgba(var(--danger-rgb), .1); box-shadow: inset 0 0 0 1.5px rgba(var(--danger-rgb), .45); }
.pa.like[aria-pressed='true'] .pa-ic .ico { fill: currentColor; }
.pa.like.pop .pa-ic { animation: pa-pop .55s var(--settle); }
@keyframes pa-pop { 0% { transform: scale(1); } 35% { transform: scale(1.25); } 100% { transform: scale(1); } }
/* my own profile: rows that open the lists */
.pv-act.own .pa { grid-template-columns: auto minmax(0, 1fr) auto; justify-items: start; align-items: center; min-height: 64px; padding: 10px 10px 10px 10px; gap: 10px; text-align: left; }
.pv-act.own .pa-ic { width: 36px; height: 36px; margin: 0; } .pv-act.own .pa-ic .ico { width: 18px; height: 18px; }
.pa-t { display: grid; gap: 1px; min-width: 0; }
.pa-t b { font-size: .8125rem; font-weight: 750; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pa-t span { font-size: .6875rem; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pa-go { color: var(--ink-3); line-height: 0; } .pa-go .ico { width: 15px; height: 15px; }
.pa-lock { position: absolute; top: 6px; right: 8px; color: var(--gold); line-height: 0; } .pa-lock .ico { width: 12px; height: 12px; }
.pa-views { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 10px; font-size: .75rem; color: var(--ink-3); }
.pa-views .ico { width: 14px; height: 14px; }
@media (max-width: 359px) { .pv-act.own { grid-template-columns: 1fr; } .pa > b { font-size: .8125rem; } }

/* ---------- "Здесь может быть ваша реклама": a thin grey-blue glass strip ---------- */
.ad-promo { --adp: 64, 140, 230; display: flex; align-items: center; gap: 10px; width: calc(100% - 28px); height: 44px; margin: 10px 14px; padding: 0 10px 0 6px; border-radius: 16px; text-align: left;
  color: var(--ink); background: linear-gradient(100deg, rgba(var(--adp), .16), rgba(var(--adp), .07) 70%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), inset 0 0 0 1px rgba(var(--adp), .26);
  -webkit-backdrop-filter: blur(14px) saturate(1.5); backdrop-filter: blur(14px) saturate(1.5); overflow: hidden; isolation: isolate;
  transition: transform .5s var(--settle), opacity .35s ease, height .35s ease, margin .35s ease; animation: adp-in .6s var(--ease-out) backwards; }
:root[data-theme='light'] .ad-promo { --adp: 40, 110, 210; background: linear-gradient(100deg, rgba(var(--adp), .12), rgba(var(--adp), .05) 70%); box-shadow: inset 0 1px 0 #fff, inset 0 0 0 1px rgba(var(--adp), .2); }
.ad-promo::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, .16) 45%, transparent 60%); transform: translateX(-100%); animation: adp-shine 5s ease-in-out 1.2s infinite; }
.ad-promo:active { transform: scale(.975); transition-duration: .1s; }
.ad-promo.gone { opacity: 0; height: 0 !important; margin-top: 0; margin-bottom: 0; }
.adp-ic { width: 32px; height: 32px; border-radius: 11px; flex: none; display: grid; place-items: center; color: #fff; background: linear-gradient(180deg, rgb(var(--adp)), rgba(var(--adp), .78)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 6px 14px -6px rgba(var(--adp), .8); }
.adp-ic .ico { width: 17px; height: 17px; }
.adp-t { flex: 1; min-width: 0; font-size: .8125rem; font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adp-go { flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; color: rgb(var(--adp)); background: rgba(var(--adp), .12); }
.adp-go .ico { width: 15px; height: 15px; }
:root:not([data-theme='light']) .adp-go { color: rgb(130, 185, 255); }
.lite .ad-promo { -webkit-backdrop-filter: none; backdrop-filter: none; }
@keyframes adp-in { from { opacity: 0; transform: translateY(-6px); } }
@keyframes adp-shine { 0%, 70% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) { .ad-promo::before { animation: none; } }
.feed > .ad-promo { width: auto; margin: 0 0 12px; }

/* the sheet behind it: where an ad can stand, and two clear actions */
.adp-hero { display: grid; place-items: center; padding: 6px 0 8px; }
.adp-big { width: 74px; height: 74px; border-radius: 26px; display: grid; place-items: center; color: #fff; background: linear-gradient(160deg, #7fb8ff, #2f7fe0); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .5), 0 18px 36px -14px rgba(47, 127, 224, .75); animation: pw-pop .6s var(--settle) backwards; }
.adp-big .ico { width: 36px; height: 36px; }
.adp-places { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 16px; }
.adp-pl { display: grid; justify-items: center; gap: 5px; padding: 10px 4px 9px; border-radius: 18px; background: var(--s1); box-shadow: inset 0 0 0 1px var(--line); text-align: center; transition: transform .5s var(--settle), box-shadow .25s, background-color .25s; }
.adp-pl:active { transform: scale(.95); transition-duration: .1s; }
.adp-pl.on { background: rgba(64, 140, 230, .1); box-shadow: inset 0 0 0 2px rgb(64, 140, 230), 0 10px 24px -14px rgba(64, 140, 230, .7); }
.adp-pl b { font-size: .6875rem; font-weight: 700; line-height: 1.25; }
.adp-pl span { font-size: .625rem; color: var(--ink-3); min-height: 1.2em; }
.adp-pl .pmock { width: 40px; height: 62px; }
.adp-note { display: flex; align-items: center; justify-content: center; gap: 5px; margin-top: 12px; } .adp-note .ico { width: 13px; height: 13px; }
.adp-buy { background: linear-gradient(180deg, #4f9cf5, #2a78d6); color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 12px 26px -14px rgba(42, 120, 214, .9); }
@media (max-width: 359px) { .adp-places { grid-template-columns: 1fr 1fr; } }

/* ---------- a chat started without a match ---------- */
.chat-intro2.direct { padding-top: 6px; }
.dm-card { display: grid; justify-items: center; gap: 8px; margin: 4px auto 0; max-width: 360px; padding: 16px 14px 14px; border-radius: 24px; text-align: center;
  background: var(--s1); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), inset 0 0 0 1px var(--line), 0 14px 30px -20px rgba(0, 0, 0, .6); }
.dm-badge { display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 11px; border-radius: 99px; font-size: .6875rem; font-weight: 750; letter-spacing: .02em;
  color: rgb(47, 127, 224); background: rgba(64, 140, 230, .14); }
:root:not([data-theme='light']) .dm-badge { color: rgb(130, 185, 255); }
.dm-badge .ico { width: 13px; height: 13px; }
.dm-badge.gold { color: var(--gold-ink); background: linear-gradient(180deg, #fbe2a0, #e6ad42); }
.dm-t { font-size: 1rem; font-weight: 750; line-height: 1.3; }
.dm-d { font-size: .8125rem; color: var(--ink-2); line-height: 1.45; }
.dm-prof { width: 100%; display: flex; align-items: center; gap: 11px; padding: 9px 10px 9px 9px; margin-top: 2px; border-radius: 18px; text-align: left; background: var(--chip); transition: transform .5s var(--settle); }
.dm-prof:active { transform: scale(.97); transition-duration: .1s; }
.dm-prof img, .dm-prof .anon-av { width: 46px; height: 46px; border-radius: 15px; object-fit: cover; flex: none; }
.dm-pt { flex: 1; min-width: 0; display: grid; gap: 2px; } .dm-pt b { font-size: .9375rem; } .dm-pt span { font-size: .75rem; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dm-acts { width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 2px; }
.ch-direct { flex: none; height: 18px; padding: 0 7px; border-radius: 99px; display: inline-flex; align-items: center; font-size: .625rem; font-weight: 750; color: rgb(47, 127, 224); background: rgba(64, 140, 230, .14); }
:root:not([data-theme='light']) .ch-direct { color: rgb(130, 185, 255); }

/* ===================== v8.7 ===================== */

/* ---------- the welcome screen: the whole screen is the scene; words on the sky, the glass button over the ledge ---------- */
.ob-welcome { --wf: var(--font); --wl-ink: #ffffff; --wl-ink2: rgba(255, 255, 255, .82); --wl-glass: rgba(255, 255, 255, .16); --wl-thumb: #ffffff; --wl-thumb-ink: #10142a; }
:root[data-theme='light'] .ob-welcome { --wl-ink: #ffffff; --wl-ink2: rgba(255, 255, 255, .86); --wl-glass: rgba(255, 255, 255, .2); --wl-thumb: #ffffff; --wl-thumb-ink: #10142a;
  --wl-btn: rgba(255, 255, 255, .2); --wl-btn-ink: #ffffff; --wl-arrow: #ffffff; --wl-arrow-ink: #10142a; }
.ob-welcome .wl-art { top: 0; height: auto; max-height: none; }
.wl-top { gap: 8px; }
.wl-brand { color: var(--wl-ink); }
.wl-ctl { display: flex; align-items: center; gap: 8px; }
.wl-theme { position: relative; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; color: var(--wl-ink); overflow: hidden;
  background: var(--wl-glass); -webkit-backdrop-filter: blur(18px) saturate(1.8); backdrop-filter: blur(18px) saturate(1.8);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), inset 0 0 0 .6px rgba(255, 255, 255, .35), 0 8px 22px -12px rgba(10, 20, 50, .45);
  transition: transform .16s var(--ease-out); -webkit-tap-highlight-color: transparent; }
.wl-theme.press, .wl-theme:active { transform: scale(.92); }
.wl-theme > span { position: absolute; inset: 0; display: grid; place-items: center; transition: transform .45s cubic-bezier(.2, .9, .25, 1.15), opacity .3s ease; }
.wl-theme .ico { width: 18px; height: 18px; }
/* the sun shows in the dark (tap → light), the moon in the light (tap → dark) */
.wl-theme .wt-moon { opacity: 0; transform: translateY(120%) rotate(-40deg); }
:root[data-theme='light'] .wl-theme .wt-sun { opacity: 0; transform: translateY(-120%) rotate(40deg); }
:root[data-theme='light'] .wl-theme .wt-moon { opacity: 1; transform: none; }

.wl-copy { padding-top: calc(max(84px, 11vh) + var(--safe-t)); }
.wl-title { font-family: var(--font); text-shadow: 0 2px 24px rgba(10, 30, 80, .28); }
.wl-title .l1 { font-weight: 800; letter-spacing: -.035em; }
.wl-title .l2 { font-weight: 300; letter-spacing: -.02em; }
.wl-title .l3 { font-weight: 800; letter-spacing: -.045em; color: #ffffff; background: none; -webkit-background-clip: border-box; background-clip: border-box; animation: none; text-shadow: 0 4px 30px rgba(255, 170, 120, .35); }
:root[data-theme='light'] .wl-title .l3 { background: none; }
.wl-title .l4 { font-weight: 600; letter-spacing: -.02em; }
.ob-welcome.tight .wl-copy { padding-top: calc(64px + var(--safe-t)); }
.ob-welcome.tighter .wl-title .l1 { font-size: 26px; } .ob-welcome.tighter .wl-title .l2 { font-size: 22px; } .ob-welcome.tighter .wl-title .l3 { font-size: 44px; } .ob-welcome.tighter .wl-title .l4 { font-size: 17px; }
/* the bottom: a soft scrim over the ledge so the words and the glass read on any phone */
.wl-cta { padding-top: 56px; gap: 10px; }
.wl-cta::before { opacity: 1; background: linear-gradient(180deg, transparent, rgba(16, 14, 30, .28) 50%, rgba(16, 14, 30, .5)); }
.wl-copy .wl-sub { color: var(--wl-ink2); text-shadow: 0 1px 14px rgba(10, 30, 80, .3); font-weight: 500; }
.wl-legal { color: rgba(255, 255, 255, .78); text-shadow: 0 1px 8px rgba(0, 0, 0, .3); }

/* ---------- the scene: sunset in the light theme ---------- */
.w7 .w7-s0 { stop-color: #2c6ade; } .w7 .w7-s1 { stop-color: #5b9bef; } .w7 .w7-s2 { stop-color: #a9cdf4; } .w7 .w7-s3 { stop-color: #f6d3b0; }
.w7 .w7-sun0 { stop-color: rgba(255, 236, 190, .95); } .w7 .w7-sun1 { stop-color: rgba(255, 196, 140, .42); } .w7 .w7-sun2 { stop-color: rgba(255, 190, 140, 0); }
.w7 .w7-c0 { stop-color: #ffffff; } .w7 .w7-c1 { stop-color: #ffd9c2; }
.w7 .w7-day, .w7 .w7-night { transition: opacity .6s ease; } .w7 .w7-night { opacity: 0; }
.w7 .w7-moon { fill: #fff3d6; } .w7 .w7-moon-c { fill: #182157; } .w7 .w7-moon-g { fill: rgba(255, 238, 200, .08); } .w7 .w7-star { fill: #ffffff; opacity: .85; }
.w7 .w7-stone { fill: #e9e3d8; } .w7 .w7-stone-l { fill: #f4efe7; } .w7 .w7-stone-d { fill: #cfc5b6; } .w7 .w7-shade { fill: rgba(120, 100, 80, .16); } .w7 .w7-panel-sh { fill: rgba(150, 128, 98, .14); }
.w7 .w7-band { fill: #ddd5c8; } .w7 .w7-fin { fill: #f2ede5; }
.w7 .w7-glass { fill: #344458; } .w7 .w7-glass-low { fill: #26354a; } .w7 .w7-lit { fill: #6d8fb6; } .w7 .w7-lit-s { fill: #8fb1d6; } .w7 .w7-mull { fill: #c9c0b2; } .w7 .w7-door { fill: #1f2c40; }
.w7 .w7-emb { fill: #555865; }
.w7 .w7-stairs { fill: #e3dbcf; } .w7 .w7-step { stroke: #c8beae; stroke-width: 1.1; fill: none; } .w7 .w7-rail { stroke: #8d8a86; stroke-width: 1.3; fill: none; }
.w7 .w7-pole { fill: #c9ccd4; } .w7 .w7-flag-sh { fill: rgba(0, 0, 0, .05); }
.w7 .w7-pl0 { stop-color: #ece4d6; } .w7 .w7-pl1 { stop-color: #d6c9b4; } .w7 .w7-pave { stroke: #cdbfa9; stroke-width: 1; fill: none; }
.w7 .w7-fir { fill: #2f5a3b; } .w7 .w7-fir.big { fill: #284f35; } .w7 .w7-fir-sh { fill: rgba(0, 0, 0, .18); } .w7 .w7-trunk { fill: #5a4030; }
.w7 .w7-post { fill: #3a3f4a; } .w7 .w7-post-t { fill: #5a606c; }
.w7 .w7-lamp { fill: #b9bcc4; } .w7 .w7-lamp-a { fill: none; stroke: #b9bcc4; stroke-width: 2.2; stroke-linecap: round; } .w7 .w7-lamp-h { fill: #dcdfe5; } .w7 .w7-glow { fill: rgba(255, 214, 140, 0); }
.w7 .w7-lw0 { stop-color: #86b86f; } .w7 .w7-lw1 { stop-color: #5f9450; } .w7 .w7-hedge { fill: #3f7a45; }
.w7 .w7-fl1 { fill: #ff8fb1; } .w7 .w7-fl2 { fill: #ffffff; } .w7 .w7-fl3 { fill: #ffd166; }
.w7 .w7-fence { stroke: #4a4f5a; stroke-width: 1.6; fill: none; stroke-linecap: round; }
.w7 .w7-lg0 { stop-color: #e6e1da; } .w7 .w7-lg1 { stop-color: #b8b0a6; } .w7 .w7-ledge-top { fill: #f3f0eb; } .w7 .w7-ledge-hi { fill: #ffffff; }
.w7 .w7-vein { stroke: rgba(140, 128, 116, .32); stroke-width: 1.4; fill: none; } .w7 .w7-cshadow { fill: rgba(60, 40, 30, .24); }
.w7 .w7-suit { fill: #1e2840; } .w7 .w7-suit-l { fill: #27324f; } .w7 .w7-suit-d { fill: #161d33; } .w7 .w7-suit-rim { stroke: rgba(255, 196, 140, .75); stroke-width: 2.2; fill: none; stroke-linecap: round; }
.w7 .w7-seam { stroke: rgba(0, 0, 0, .35); stroke-width: 1.1; fill: none; }
.w7 .w7-skin { fill: #e8b896; } .w7 .w7-skin-d { fill: #d9a07e; } .w7 .w7-collar { fill: #141a2c; } .w7 .w7-shirt { fill: #f4f4f6; }
.w7 .w7-hair-m { fill: #3b2a20; } .w7 .w7-lock { fill: #57402f; } .w7 .w7-hair-hi { stroke: #8a6a52; stroke-width: 1.4; fill: none; stroke-linecap: round; opacity: .8; }
.w7 .w7-blz { fill: #f1e9dd; } .w7 .w7-blz-d { fill: #dccfbd; } .w7 .w7-blz-fold { stroke: rgba(150, 128, 98, .35); stroke-width: 1.3; fill: none; stroke-linecap: round; }
.w7 .w7-hair-g { fill: #b9763f; } .w7 .w7-hair-g2 { fill: #93592f; } .w7 .w7-strand { fill: #e2a76a; opacity: .85; } .w7 .w7-hair-hi2 { stroke: #f0c38a; stroke-width: 1.6; fill: none; stroke-linecap: round; opacity: .9; } .w7 .w7-hair-wave { stroke: #7c4a2a; stroke-width: 1.4; fill: none; stroke-linecap: round; }
.w7 .w7-bag-b { fill: #121216; } .w7 .w7-bag-flap { fill: #1c1c22; } .w7 .w7-quilt { stroke: rgba(255, 255, 255, .13); stroke-width: .8; fill: none; } .w7 .w7-clasp { fill: #e6b54a; }
.w7 .w7-chain { stroke: #e6b54a; stroke-width: 1.6; stroke-dasharray: 2.2 1.4; fill: none; } .w7 .w7-bag-hi { stroke: rgba(255, 255, 255, .28); stroke-width: 1; fill: none; }
.w7 .w7-lf1 { fill: #5f9c4c; } .w7 .w7-lf2 { fill: #4c8a3f; } .w7 .w7-lf3 { fill: #79b45a; } .w7 .w7-twig { stroke: #4a3a2a; stroke-width: 2; fill: none; stroke-linecap: round; }

/* ---------- the same place at night (dark theme): lit windows, a moon, the lamps on ---------- */
:root[data-theme='dark'] .w7 .w7-s0, :root:not([data-theme]) .w7 .w7-s0 { stop-color: #070b22; }
:root[data-theme='dark'] .w7 .w7-s1 { stop-color: #131b47; } :root[data-theme='dark'] .w7 .w7-s2 { stop-color: #2a2e66; } :root[data-theme='dark'] .w7 .w7-s3 { stop-color: #4a3a6e; }
:root[data-theme='dark'] .w7 .w7-sun0 { stop-color: rgba(255, 170, 130, .18); } :root[data-theme='dark'] .w7 .w7-sun1 { stop-color: rgba(180, 120, 200, .08); } :root[data-theme='dark'] .w7 .w7-sun2 { stop-color: rgba(0, 0, 0, 0); }
:root[data-theme='dark'] .w7 .w7-day { opacity: 0; } :root[data-theme='dark'] .w7 .w7-night { opacity: 1; }
:root[data-theme='dark'] .w7 .w7-c0 { stop-color: #4a4f8c; } :root[data-theme='dark'] .w7 .w7-c1 { stop-color: #2b2e62; }
:root[data-theme='dark'] .w7 .w7-stone { fill: #3a3854; } :root[data-theme='dark'] .w7 .w7-stone-l { fill: #46435f; } :root[data-theme='dark'] .w7 .w7-stone-d { fill: #2a2840; }
:root[data-theme='dark'] .w7 .w7-shade { fill: rgba(0, 0, 0, .24); } :root[data-theme='dark'] .w7 .w7-panel-sh { fill: rgba(0, 0, 0, .16); }
:root[data-theme='dark'] .w7 .w7-band { fill: #33314c; } :root[data-theme='dark'] .w7 .w7-fin { fill: #4a4766; }
:root[data-theme='dark'] .w7 .w7-glass { fill: #1a1d33; } :root[data-theme='dark'] .w7 .w7-glass-low { fill: #ffcf7a; } :root[data-theme='dark'] .w7 .w7-lit { fill: #ffd07c; } :root[data-theme='dark'] .w7 .w7-lit-s { fill: #ffe0a3; }
:root[data-theme='dark'] .w7 .w7-mull { fill: #2a2840; } :root[data-theme='dark'] .w7 .w7-door { fill: #ffe3a6; } :root[data-theme='dark'] .w7 .w7-emb { fill: #e8c983; }
:root[data-theme='dark'] .w7 .w7-stairs { fill: #343150; } :root[data-theme='dark'] .w7 .w7-step { stroke: #26243a; } :root[data-theme='dark'] .w7 .w7-rail { stroke: #5a5778; } :root[data-theme='dark'] .w7 .w7-pole { fill: #8d91a6; }
:root[data-theme='dark'] .w7 .w7-pl0 { stop-color: #2e2b46; } :root[data-theme='dark'] .w7 .w7-pl1 { stop-color: #24223a; } :root[data-theme='dark'] .w7 .w7-pave { stroke: #262439; }
:root[data-theme='dark'] .w7 .w7-fir { fill: #12302c; } :root[data-theme='dark'] .w7 .w7-fir.big { fill: #0f2a26; } :root[data-theme='dark'] .w7 .w7-trunk { fill: #1d1712; }
:root[data-theme='dark'] .w7 .w7-post { fill: #191a26; } :root[data-theme='dark'] .w7 .w7-post-t { fill: #2d2e3e; }
:root[data-theme='dark'] .w7 .w7-lamp { fill: #6b6f87; } :root[data-theme='dark'] .w7 .w7-lamp-a { stroke: #6b6f87; } :root[data-theme='dark'] .w7 .w7-lamp-h { fill: #ffe7ad; } :root[data-theme='dark'] .w7 .w7-glow { fill: rgba(255, 214, 140, .22); }
:root[data-theme='dark'] .w7 .w7-lw0 { stop-color: #16302d; } :root[data-theme='dark'] .w7 .w7-lw1 { stop-color: #0e211f; } :root[data-theme='dark'] .w7 .w7-hedge { fill: #17322f; }
:root[data-theme='dark'] .w7 .w7-fl1 { fill: #d97a9a; } :root[data-theme='dark'] .w7 .w7-fl2 { fill: #c9c3d8; } :root[data-theme='dark'] .w7 .w7-fl3 { fill: #d4b25a; } :root[data-theme='dark'] .w7 .w7-fence { stroke: #3e3b58; }
:root[data-theme='dark'] .w7 .w7-lg0 { stop-color: #3b384e; } :root[data-theme='dark'] .w7 .w7-lg1 { stop-color: #23213a; } :root[data-theme='dark'] .w7 .w7-ledge-top { fill: #4a4762; } :root[data-theme='dark'] .w7 .w7-ledge-hi { fill: rgba(255, 255, 255, .12); }
:root[data-theme='dark'] .w7 .w7-vein { stroke: rgba(255, 255, 255, .06); } :root[data-theme='dark'] .w7 .w7-cshadow { fill: rgba(0, 0, 0, .45); }
:root[data-theme='dark'] .w7 .w7-suit { fill: #141a2e; } :root[data-theme='dark'] .w7 .w7-suit-l { fill: #1b2340; } :root[data-theme='dark'] .w7 .w7-suit-d { fill: #10152a; } :root[data-theme='dark'] .w7 .w7-suit-rim { stroke: rgba(255, 214, 140, .32); }
:root[data-theme='dark'] .w7 .w7-skin { fill: #b98e7a; } :root[data-theme='dark'] .w7 .w7-skin-d { fill: #a37a66; } :root[data-theme='dark'] .w7 .w7-collar { fill: #0e1222; } :root[data-theme='dark'] .w7 .w7-shirt { fill: #d9d9e2; }
:root[data-theme='dark'] .w7 .w7-hair-m { fill: #1b130f; } :root[data-theme='dark'] .w7 .w7-lock { fill: #2c2018; } :root[data-theme='dark'] .w7 .w7-hair-hi { stroke: #4a352b; }
:root[data-theme='dark'] .w7 .w7-blz { fill: #b9ae9f; } :root[data-theme='dark'] .w7 .w7-blz-d { fill: #9d9283; } :root[data-theme='dark'] .w7 .w7-blz-fold { stroke: rgba(0, 0, 0, .25); }
:root[data-theme='dark'] .w7 .w7-hair-g { fill: #7a4a2a; } :root[data-theme='dark'] .w7 .w7-hair-g2 { fill: #5a341d; } :root[data-theme='dark'] .w7 .w7-strand { fill: #a9784c; opacity: .7; } :root[data-theme='dark'] .w7 .w7-hair-hi2 { stroke: #b9875a; } :root[data-theme='dark'] .w7 .w7-hair-wave { stroke: #4a2a16; }
:root[data-theme='dark'] .w7 .w7-lf1 { fill: #1d3b2e; } :root[data-theme='dark'] .w7 .w7-lf2 { fill: #16302a; } :root[data-theme='dark'] .w7 .w7-lf3 { fill: #24473a; } :root[data-theme='dark'] .w7 .w7-twig { stroke: #1a1410; }
/* while the theme switches on this screen the scene cross-fades its colours (only then: no cost the rest of the time) */
.ob-welcome.theming .w7 * { transition: fill .6s ease, stroke .6s ease, stop-color .6s ease, opacity .6s ease; }
.ob-welcome.theming .wl-bg { transition: background .6s ease; }

/* ---------- after sign-up: verification as its own step ---------- */
.obv-card { position: relative; width: min(200px, 52vw); aspect-ratio: 3 / 4; margin: 6px auto 18px; border-radius: 26px; overflow: hidden; background: var(--s2);
  box-shadow: 0 22px 40px -22px rgba(0, 0, 0, .6), inset 0 0 0 1px var(--line); }
.obv-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.obv-shade { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 50%, rgba(0, 0, 0, .55)); }
.obv-name { position: absolute; left: 14px; right: 14px; bottom: 12px; display: flex; align-items: center; gap: 6px; color: #fff; }
.obv-name b { font-size: 1.125rem; font-weight: 750; letter-spacing: -.02em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .obv-name > span { font-size: 1rem; opacity: .8; }
.obv-tick { display: inline-grid; flex: none; animation: obv-pop .7s cubic-bezier(.2, .9, .25, 1.4) .45s backwards; }
.obv-tick .ico { width: 20px; height: 20px; color: #fff; --on-verified: #0b0b0c; }
@keyframes obv-pop { from { opacity: 0; transform: scale(.6); } }
.obv-rows { display: grid; gap: 10px; margin-top: 16px; }
.obv-r { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; border-radius: 20px; background: var(--s1); box-shadow: inset 0 0 0 1px var(--line); }
.obv-ic { width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; flex: none; background: var(--chip); color: var(--ink); } .obv-ic .ico { width: 18px; height: 18px; }
.obv-t { display: grid; gap: 2px; min-width: 0; } .obv-t b { font-size: .9375rem; } .obv-t span { font-size: .8125rem; color: var(--ink-2); line-height: 1.4; }

/* ---------- after sign-up: the subscription on the whole screen ---------- */
.ob.is-offer .ob-head { display: none; }
.ob.is-offer .ob-body { padding: 0; }
.ob.is-offer .ob-foot { padding-top: 12px; background: linear-gradient(180deg, transparent, var(--bg) 30%); }
.obp { position: relative; min-height: 100%; padding: calc(18px + var(--safe-t)) 20px 12px; isolation: isolate; overflow: hidden; }
.obp-glow { position: absolute; left: -20%; right: -20%; top: -10%; height: 70%; z-index: -1; pointer-events: none;
  background: radial-gradient(60% 50% at 50% 30%, rgba(240, 190, 90, .34), transparent 70%), radial-gradient(40% 40% at 85% 10%, rgba(255, 120, 160, .16), transparent 70%); transition: opacity .4s ease; }
.obp.plus .obp-glow { background: radial-gradient(60% 50% at 50% 30%, rgba(150, 110, 255, .32), transparent 70%), radial-gradient(40% 40% at 15% 10%, rgba(80, 170, 255, .16), transparent 70%); }
.obp-seg { display: flex; justify-content: center; }
.obp-seg .seg { width: min(240px, 70vw); }
.obp-hero { display: grid; justify-items: center; text-align: center; gap: 6px; margin-top: 14px; }
.obp-emb { width: 66px; height: 66px; border-radius: 22px; display: grid; place-items: center; color: #4d3200;
  background: linear-gradient(150deg, #fff6d6, #f6cf68 30%, #d5962a 60%, #f9dd8c); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .8), 0 18px 40px -14px rgba(233, 168, 48, .8); }
.obp.plus .obp-emb { color: #fff; background: linear-gradient(150deg, #b7a4ff, #7a5cf0 45%, #5a3fd6); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .5), 0 18px 40px -14px rgba(110, 80, 240, .8); }
.obp-emb .ico { width: 32px; height: 32px; }
.obp-hero h1 { font-size: clamp(1.4rem, 6.6vw, 1.75rem); font-weight: 800; letter-spacing: -.03em; line-height: 1.12; max-width: 320px; margin-top: 6px; }
.obp-hero p { font-size: .9375rem; color: var(--ink-2); line-height: 1.45; max-width: 320px; }
.obp-feats { display: grid; gap: 7px; margin: 16px auto 0; max-width: 420px; }
.obp-f { display: flex; align-items: center; gap: 12px; font-size: .9375rem; font-weight: 550; }
.obp-fi { width: 32px; height: 32px; border-radius: 10px; flex: none; display: grid; place-items: center; background: var(--chip); color: var(--ink); } .obp-fi .ico { width: 17px; height: 17px; }
.obp.gold .obp-fi { background: rgba(233, 184, 80, .16); color: #c48a1e; } :root:not([data-theme='light']) .obp.gold .obp-fi { color: #f0c25e; }
.ob.first-offer .obp-f { animation: obp-in .45s var(--ease-out) backwards; animation-delay: calc(var(--i) * 45ms + .1s); }
@keyframes obp-in { from { opacity: 0; transform: translateY(8px); } }
.obp-pers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 20px auto 6px; max-width: 420px; }
.obp-per { position: relative; display: grid; justify-items: center; gap: 3px; padding: 18px 4px 12px; border-radius: 20px; background: var(--s1); box-shadow: inset 0 0 0 1px var(--line);
  transition: transform .16s var(--ease-out), box-shadow .25s ease, background-color .25s ease; }
.obp-per:active { transform: scale(.96); }
.obp-per[aria-pressed='true'] { box-shadow: inset 0 0 0 2px var(--gold), 0 12px 28px -18px rgba(233, 168, 48, .8); background: rgba(233, 184, 80, .08); }
.obp.plus .obp-per[aria-pressed='true'] { box-shadow: inset 0 0 0 2px #7a5cf0, 0 12px 28px -18px rgba(110, 80, 240, .8); background: rgba(122, 92, 240, .08); }
.obp-pl { font-size: .75rem; font-weight: 650; color: var(--ink-2); } .obp-per b { font-size: 1rem; font-weight: 800; font-variant-numeric: tabular-nums; } .obp-sv { font-size: .6875rem; font-weight: 700; color: var(--ok); }
.obp-best { position: absolute; top: -9px; left: 50%; transform: translateX(-50%); white-space: nowrap; height: 18px; padding: 0 8px; border-radius: 99px; display: inline-flex; align-items: center;
  font-size: .625rem; font-weight: 800; letter-spacing: .02em; color: #3a2600; background: linear-gradient(180deg, #fbe2a0, #e6ad42); }
.obp.plus .obp-best { color: #fff; background: linear-gradient(180deg, #9a84ff, #6a4fe6); }
.obp-pay { display: flex; justify-content: center; gap: 10px; min-height: 58px; padding: 0 18px; white-space: nowrap; }
.obp-pay-t { font-weight: 750; } .obp-pay-p { font-variant-numeric: tabular-nums; font-weight: 800; } .obp-pay-p s { opacity: .5; font-weight: 600; margin-right: 6px; font-size: .875em; }
.obp-note { margin-top: 8px; text-align: center; font-size: .6875rem; color: var(--ink-3); }
.obp-skip { display: block; margin: 6px auto 0; min-height: 40px; padding: 0 16px; font-size: .875rem; font-weight: 650; color: var(--ink-2); }
@media (max-height: 760px) { .obp-f:nth-child(n+5) { display: none; } }
@media (max-height: 680px) { .obp-hero { margin-top: 8px; } .obp-emb { width: 52px; height: 52px; border-radius: 18px; } .obp-emb .ico { width: 26px; height: 26px; } .obp-hero p { display: none; } .obp-f:nth-child(n+4) { display: none; } }
.w7 .w7-bld, .w7 .w7-guy, .w7 .w7-girl, .w7 .w7-bag, .w7 .w7-lamp-g { isolation: auto; }
.w7 .w7-flag { opacity: .96; } .w7 .w7-leaves { opacity: .96; }

/* ---------- native feel on phones (the mobile-native rules): instant taps, controls never select their text ---------- */
button, a, [role='button'], .chip, .row, .opt, .pa, .act, label, summary { touch-action: manipulation; }
button, [role='button'], .chip, .tabbar, .act, .seg, .pa, .ad-promo { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
/* people who asked the phone for less transparency get solid surfaces instead of glass */
@media (prefers-reduced-transparency: reduce) {
  .sheet, .tabbar, .wl-start, .wl-brand, .wl-langs, .wl-theme, .ad-promo, .dc-pcount, .banner .bn-cta, .nbanner { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
  .sheet { background: var(--bg); }
}
.wl-brand span { white-space: nowrap; }
@media (max-width: 350px) { .wl-brand span { display: none; } .wl-brand { padding: 0 11px; } }

/* ===================== v8.8 ===================== */

/* ---------- «Я»: the four numbers are glass tiles that open their lists ---------- */
.me-stats { gap: 8px; }
.ms { position: relative; isolation: isolate; overflow: hidden; display: grid; justify-items: center; align-content: center; gap: 1px; min-width: 0; min-height: 88px; padding: 12px 4px 10px; border-radius: 22px; color: var(--ink);
  background: var(--s1); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .09), inset 0 0 0 1px var(--line), 0 12px 26px -20px rgba(0, 0, 0, .7);
  transition: transform .5s var(--settle), box-shadow .25s ease; }
:root[data-theme='light'] .ms { box-shadow: inset 0 1px 0 #fff, inset 0 0 0 1px var(--line), 0 12px 24px -18px rgba(20, 20, 40, .32); }
.ms::before { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; background: radial-gradient(120% 80% at 50% -10%, rgba(var(--ms-rgb), .2), transparent 70%); }
.ms::after { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .4s var(--ease-out);
  background: radial-gradient(90px circle at var(--px, 50%) var(--py, 50%), rgba(255, 255, 255, .24), transparent 70%); }
.ms:active { transform: scale(.95); transition-duration: .12s; }
.ms:active::after { opacity: 1; transition-duration: .05s; }
.ms-ic { width: 28px; height: 28px; margin-bottom: 4px; border-radius: 10px; display: grid; place-items: center; color: rgb(var(--ms-rgb)); background: rgba(var(--ms-rgb), .16); }
.ms-ic .ico { width: 16px; height: 16px; }
.ms b { font-size: 1.125rem; font-weight: 780; letter-spacing: -.02em; line-height: 1.15; font-variant-numeric: tabular-nums; }
.me-stats .ms-l { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .6875rem; color: var(--ink-3); }
.ms-lock { position: absolute; top: 7px; right: 7px; width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; box-shadow: 0 2px 6px rgba(0, 0, 0, .25); }
.ms-lock .ico { width: 10px; height: 10px; }
.ms-lock.gold { color: var(--gold-ink); background: linear-gradient(180deg, #fbe2a0, #e6ad42); }
.ms-lock.plus { color: #fff; background: linear-gradient(180deg, #7aa8ff, #3d6bff); }
.ms-views { --ms-rgb: 90, 160, 255; } .ms-hearts { --ms-rgb: 255, 92, 130; } .ms-crushes { --ms-rgb: 255, 146, 64; } .ms-matches { --ms-rgb: 168, 120, 255; }
@media (max-width: 350px) { .ms { min-height: 78px; padding: 10px 2px 8px; } .ms-ic { width: 24px; height: 24px; } .me-stats .ms-l { font-size: min(.625rem, 3vw); letter-spacing: -.01em; } }
.me-gold-rows { margin: 12px 16px 0; }
.row.gold-row .ri { background: var(--gold-bg); color: var(--gold); }

/* ---------- «Моя подписка»: one page — the plan, the term, renewal as a real switch, what is included ---------- */
.sp-hero { position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 14px; margin-top: 4px; padding: 20px; border-radius: 28px; color: #fff;
  background: linear-gradient(135deg, #3b2a0e, #6e4b12 45%, #c99330); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), inset 0 0 0 1px rgba(255, 230, 170, .18), 0 22px 44px -26px rgba(201, 147, 46, .85); }
.sp-hero.plus { background: linear-gradient(135deg, #131d46, #2848b4 50%, #5a8bff); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), inset 0 0 0 1px rgba(170, 200, 255, .2), 0 22px 44px -26px rgba(70, 120, 255, .85); }
.sp-glint { position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(60% 90% at 88% -5%, rgba(255, 255, 255, .32), transparent 70%); }
.sp-emb { width: 54px; height: 54px; border-radius: 18px; display: grid; place-items: center; background: rgba(255, 255, 255, .16); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), inset 0 0 0 1px rgba(255, 255, 255, .2); }
.sp-emb .ico { width: 28px; height: 28px; }
.sp-t { display: grid; gap: 2px; min-width: 0; } .sp-t b { font-size: 1.5rem; font-weight: 800; letter-spacing: -.03em; line-height: 1.1; } .sp-t span { font-size: .875rem; opacity: .86; }
.sp-left { grid-column: 1 / -1; display: grid; gap: 8px; font-size: .8125rem; font-weight: 650; }
.sp-bar { display: block; height: 6px; border-radius: 99px; overflow: hidden; background: rgba(255, 255, 255, .22); }
.sp-bar > i { display: block; height: 100%; border-radius: inherit; background: #fff; transform-origin: 0 50%; }
.sub-page .section-title.caps { margin: 24px 4px 9px; }
.sp-feats { display: grid; gap: 11px; padding: 14px 16px; border-radius: 22px; background: var(--s1); box-shadow: inset 0 0 0 1px var(--line); }
.sp-feats > div { display: flex; align-items: center; gap: 12px; font-size: .875rem; line-height: 1.35; }
.pf-ic { width: 30px; height: 30px; flex: none; border-radius: 10px; display: grid; place-items: center; background: var(--chip); }
.pf-ic .ico { width: 16px; height: 16px; }
.sp-note { margin: 14px 4px 0; text-align: center; }
.row .ri.ok { color: var(--ok); background: rgba(var(--ok-rgb), .14); }
.sp-offer-ic { width: 56px; height: 56px; margin: 6px auto 12px; border-radius: 20px; display: grid; place-items: center; color: #fff; background: linear-gradient(180deg, #fbd36b, #d9962a); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 12px 24px -12px rgba(217, 150, 42, .8); }
.sp-offer-ic.plus { background: linear-gradient(180deg, #7aa8ff, #3d6bff); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 12px 24px -12px rgba(61, 107, 255, .8); }
.sp-offer-ic .ico { width: 26px; height: 26px; }
.sp-offer .sheet-title, .sp-offer .sheet-sub { text-align: center; }

/* ---------- people lists: who crushed, my matches ---------- */
.pl-row .av.sm { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; flex: none; }
.pl-row .rt b { display: flex; align-items: center; gap: 5px; min-width: 0; }
.pl-tag { flex: none; display: inline-flex; align-items: center; gap: 4px; height: 26px; padding: 0 10px; border-radius: 99px; font-size: .75rem; font-weight: 700; }
.pl-tag .ico { width: 12px; height: 12px; }
.pl-tag.ok { color: var(--ok); background: rgba(var(--ok-rgb), .14); }
.pl-tag.hot { color: #ff8a3d; background: rgba(255, 138, 61, .14); }
.pl-go { flex: none; color: var(--ink-3); line-height: 0; } .pl-go .ico { width: 18px; height: 18px; }

/* ---------- chats: swipe left for Pin / Delete (the row follows the finger), a pin mark on pinned chats ---------- */
.cw { position: relative; }
.cw + .cw > .conv::before { content: ''; position: absolute; left: 88px; right: 0; top: 0; height: 1px; background: var(--line); }
.cw > .conv { touch-action: pan-y; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.cw.open > .conv { will-change: transform; }
.cw-acts { position: absolute; top: 0; right: 0; bottom: 0; width: 156px; display: flex; align-items: center; justify-content: flex-end; gap: 8px; padding-right: 12px; clip-path: inset(0 0 0 100%); --p: 0; }
.cw-a { display: grid; justify-items: center; align-content: center; gap: 4px; width: 64px; height: 62px; border-radius: 22px; color: #fff; font-size: .6875rem; font-weight: 700;
  transform: scale(calc(.72 + .28 * var(--p))); opacity: calc(.25 + .75 * var(--p)); transition: transform .18s var(--ease-out);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), inset 0 0 0 1px rgba(255, 255, 255, .12), 0 10px 20px -12px rgba(0, 0, 0, .55); }
.cw-a .cw-i { line-height: 0; } .cw-a .ico { width: 20px; height: 20px; } .cw-a .cw-l { line-height: 1.1; white-space: nowrap; }
.cw-a.pin { background: linear-gradient(180deg, #6aa6ff, #3a74f0); }
.cw-a.del { background: linear-gradient(180deg, #ff6b7a, #e2384e); }
.cw-a:active { transform: scale(.9); transition-duration: .08s; }
.ch-pin { flex: none; color: var(--ink-3); line-height: 0; } .ch-pin .ico { width: 13px; height: 13px; transform: rotate(35deg); }
.ch-acts-sheet .cas-h { display: flex; align-items: center; gap: 12px; } .ch-acts-sheet .cas-h .av.sm { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.ch-acts-sheet .cas-h b { font-size: 1.0625rem; }

/* a confirmation with a title and an icon (deleting for both) */
.confirm-sheet .cf-ic { width: 56px; height: 56px; margin: 6px auto 12px; border-radius: 20px; display: grid; place-items: center; background: var(--chip); color: var(--ink); }
.confirm-sheet .cf-ic.danger { color: var(--danger); background: var(--danger-bg); box-shadow: inset 0 0 0 1px rgba(var(--danger-rgb), .3); }
.confirm-sheet .cf-ic .ico { width: 26px; height: 26px; }
.confirm-sheet .sheet-title, .confirm-sheet .sheet-sub { text-align: center; }

/* ---------- «Ищу тебя»: one even line — reactions with their numbers, comments with theirs, «Это я» on the right ---------- */
.p3-a { gap: 6px; min-height: 32px; }
.p3-a .prx { margin-top: 0; align-items: center; }
.p3-a .rx { height: 30px; padding: 0 9px; gap: 4px; }
.p3-a .rx.add { padding: 0 9px; } .p3-a .rx.add .ico { width: 16px; height: 16px; }
.p3-a .rx i, .p3-c b { font-style: normal; font-size: .75rem; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.rx.add.zero i, .p3-c.zero b { color: var(--ink-3); }
.p3-c { height: 30px; padding: 0 10px; gap: 5px; align-items: center; }
.p3-c .ico { display: block; width: 16px; height: 16px; }
.p3-a .itsme { min-height: 30px; transition: transform .5s var(--settle), background-color .3s ease, color .3s ease, box-shadow .3s ease; }

.btn.ghost, .btn.glass { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), inset 0 0 0 .5px rgba(255, 255, 255, .06); }
:root[data-theme='light'] .btn.ghost, :root[data-theme='light'] .btn.glass { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), inset 0 0 0 .5px rgba(0, 0, 0, .05); }
/* rows and chips also light up where they were touched */
.row::after { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .35s var(--ease-out); background: radial-gradient(160px circle at var(--px, 50%) var(--py, 50%), rgba(255, 255, 255, .07), transparent 70%); }
:root[data-theme='light'] .row::after { background: radial-gradient(160px circle at var(--px, 50%) var(--py, 50%), rgba(0, 0, 0, .035), transparent 70%); }
.row:active::after { opacity: 1; transition-duration: .05s; }
@media (prefers-reduced-motion: reduce) { .ms, .cw-a, .p3-a .itsme { transition-duration: .01s; } }

/* ---------- the first screen: the MGIMO entrance redrawn after the photo (new parts; day, then night) ---------- */
.w8 .w8-glass { fill: url(#w8Glass); }
.w8 .w8-g0 { stop-color: #a9c9ea; } .w8 .w8-g1 { stop-color: #4f6f95; } .w8 .w8-g2 { stop-color: #2a3b55; }
.w8 .w8-transom { fill: rgba(225, 215, 200, .5); } .w8 .w8-mull { fill: #d6cdbf; } .w8 .w8-frame { fill: #cfc6b8; }
.w8 .w8-fin-sh { fill: rgba(120, 100, 80, .14); } .w8 .w8-joint { fill: rgba(120, 100, 80, .17); } .w8 .w8-shade2 { fill: rgba(110, 90, 70, .22); }
.w8 .w8-parapet { fill: #bdb3a5; } .w8 .w8-door-f { fill: #8a7a66; } .w8 .w8-handle { fill: #e2c590; } .w8 .w8-riser { fill: rgba(120, 100, 80, .3); }
.w8 .w7-emb { fill: #2e2b2d; } .w8 .w8-emb-hi { fill: #6e6a68; }
.w8 .w8-flag-sh { fill: url(#w8Wave); } .w8 .w8-ped { fill: #3b3f48; } .w8 .w8-ped-t { fill: #5a5f6b; }
.w8 .w8-warm { fill: url(#w8Warm); pointer-events: none; }
.w8 .w8-wm0 { stop-color: rgba(255, 176, 100, .3); } .w8 .w8-wm1 { stop-color: rgba(255, 190, 120, .05); } .w8 .w8-wm2 { stop-color: rgba(255, 200, 150, .12); }
.w8 .w8-kerb-w { fill: #f3efe8; } .w8 .w8-kerb-d { fill: #4a4d55; } .w8 .w8-road { fill: #d4c8b6; } .w8 .w8-path { fill: #ddd2c2; }
.w8 .w8-bush { fill: #b97a3e; } .w8 .w8-bush2 { fill: #8f6a3a; }
.w8 .w7-rail { stroke-width: 3; } .w8 .w7-rail.thin { stroke-width: 2; } .w8 .w7-pave { stroke-width: 2; } .w8 .w7-fence { stroke-width: 3.2; }
.w8 .w7-lamp-a { stroke-width: 5; } .w8 .w7-twig { stroke-width: 4; } .w8 .w7-fir-sh { fill: rgba(0, 0, 0, .2); }
:root[data-theme='dark'] .w8 .w8-g0 { stop-color: #282d55; } :root[data-theme='dark'] .w8 .w8-g1 { stop-color: #181b38; } :root[data-theme='dark'] .w8 .w8-g2 { stop-color: #10122a; }
:root[data-theme='dark'] .w8 .w8-transom { fill: rgba(0, 0, 0, .35); } :root[data-theme='dark'] .w8 .w8-mull { fill: #2a2840; } :root[data-theme='dark'] .w8 .w8-frame { fill: #2f2d47; }
:root[data-theme='dark'] .w8 .w8-fin-sh { fill: rgba(0, 0, 0, .25); } :root[data-theme='dark'] .w8 .w8-joint { fill: rgba(0, 0, 0, .22); } :root[data-theme='dark'] .w8 .w8-shade2 { fill: rgba(0, 0, 0, .3); }
:root[data-theme='dark'] .w8 .w8-parapet { fill: #26243a; } :root[data-theme='dark'] .w8 .w8-door-f { fill: #3a3550; } :root[data-theme='dark'] .w8 .w8-handle { fill: #ffe3a6; } :root[data-theme='dark'] .w8 .w8-riser { fill: rgba(0, 0, 0, .35); }
:root[data-theme='dark'] .w8 .w8-emb-hi { fill: #f3dfae; } :root[data-theme='dark'] .w8 .w8-ped { fill: #1a1b26; } :root[data-theme='dark'] .w8 .w8-ped-t { fill: #2b2c3c; }
:root[data-theme='dark'] .w8 .w8-wm0, :root[data-theme='dark'] .w8 .w8-wm1, :root[data-theme='dark'] .w8 .w8-wm2 { stop-color: rgba(0, 0, 0, 0); }
:root[data-theme='dark'] .w8 .w8-kerb-w { fill: #4a4762; } :root[data-theme='dark'] .w8 .w8-kerb-d { fill: #1c1b2a; } :root[data-theme='dark'] .w8 .w8-road { fill: #24223a; } :root[data-theme='dark'] .w8 .w8-path { fill: #2c2a42; }
:root[data-theme='dark'] .w8 .w8-bush { fill: #3a2a22; } :root[data-theme='dark'] .w8 .w8-bush2 { fill: #2c2320; }
.w8 .w7-glow, .w8 .w7-moon-g { fill: url(#w8Glow); }
.w8 .w8-gl0, .w8 .w8-gl1, .w8 .w8-gl2 { stop-color: rgba(255, 214, 140, 0); }
:root[data-theme='dark'] .w8 .w8-gl0 { stop-color: rgba(255, 220, 150, .5); } :root[data-theme='dark'] .w8 .w8-gl1 { stop-color: rgba(255, 214, 140, .16); } :root[data-theme='dark'] .w8 .w8-gl2 { stop-color: rgba(255, 214, 140, 0); }

/* ---------- motion polish (skills: nothing grows out of nothing, presses answer at once) ---------- */
.check .ico { transform: scale(.5); opacity: 0; transition: transform .45s var(--settle), opacity .16s var(--ease-out); }
[aria-checked='true'] > .check .ico, .check.on .ico { transform: scale(1); opacity: 1; }
@keyframes heart-pop { from { transform: translate(-50%, -50%) scale(.4); opacity: 0; } }
.page-head .icon-btn:active, .topbar .icon-btn:active { transform: scale(.9); }
.mg-acts button:active, .me-btns .btn:active { transform: scale(.96); }

/* ===================== v8.9: support tickets, the landing outside Telegram ===================== */
:root { --tk: 45, 170, 255; --tk2: 124, 92, 255; }

/* ---------- the support entry on top of the chat list: its own glass card with a "+ Ticket" button ---------- */
.tk-entry { position: relative; isolation: isolate; display: flex; align-items: center; gap: 12px; margin: 10px 14px 6px; padding: 12px 12px 12px 14px; border-radius: 22px; cursor: pointer; color: var(--ink);
  background: linear-gradient(135deg, rgba(var(--tk), .14), rgba(var(--tk2), .1) 60%, transparent), var(--s1);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), inset 0 0 0 1px rgba(var(--tk), .22), 0 14px 30px -24px rgba(var(--tk), .9); transition: transform .5s var(--settle); -webkit-user-select: none; user-select: none; touch-action: manipulation; }
:root[data-theme='light'] .tk-entry { box-shadow: inset 0 1px 0 #fff, inset 0 0 0 1px rgba(var(--tk), .25), 0 14px 26px -22px rgba(var(--tk), .7); }
.tk-entry:active { transform: scale(.98); transition-duration: .1s; }
.tk-entry.hot { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), inset 0 0 0 1.5px rgba(var(--tk), .6), 0 16px 34px -20px rgba(var(--tk), 1); }
.tk-entry-lg { width: 46px; height: 46px; flex: none; border-radius: 16px; display: grid; place-items: center; color: #fff; background: linear-gradient(145deg, rgb(var(--tk)), rgb(var(--tk2)));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 8px 18px -8px rgba(var(--tk2), .8); }
.tk-entry-lg .ico { width: 24px; height: 24px; }
.tk-entry-t { flex: 1; min-width: 0; display: grid; gap: 2px; }
.tk-entry-t b { display: flex; align-items: center; gap: 5px; font-size: 1rem; } .tk-entry-t b .vf-ico { width: 15px; height: 15px; color: rgb(var(--tk)); }
.tk-entry-t > span { font-size: .8125rem; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tk-entry.hot .tk-entry-t > span { color: var(--ink); font-weight: 600; }
.tk-entry-new { position: relative; flex: none; display: inline-flex; align-items: center; gap: 4px; height: 34px; padding: 0 12px 0 9px; border-radius: 999px; font-size: .8125rem; font-weight: 700; color: var(--ink);
  background: var(--gl-bg, rgba(255, 255, 255, .1)); -webkit-backdrop-filter: blur(14px) saturate(1.6); backdrop-filter: blur(14px) saturate(1.6);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), inset 0 0 0 1px rgba(255, 255, 255, .14); transition: transform .45s var(--settle); }
.tk-entry-new::after { content: ''; position: absolute; inset: -8px -4px; }
.tk-entry-new .ico { width: 16px; height: 16px; stroke-width: 2.4; }
.tk-entry-new:active { transform: scale(.92); transition-duration: .08s; }
@media (max-width: 350px) { .tk-entry-new span { display: none; } .tk-entry-new { padding: 0 9px; } }

/* ---------- status chips and topic icons ---------- */
.tk-st { flex: none; display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: 99px; font-size: .6875rem; font-weight: 750; letter-spacing: .01em; white-space: nowrap; }
.tk-st.st-open { background: var(--gold-bg, rgba(233, 184, 80, .16)); color: var(--gold); }
.tk-st.st-progress { background: rgba(var(--tk), .15); color: rgb(var(--tk)); }
.tk-st.st-answered { background: rgba(var(--tk2), .18); color: rgb(var(--tk2)); }
.tk-st.st-resolved { background: var(--ok-bg); color: var(--ok); }
.tk-st.st-closed { background: var(--chip); color: var(--ink-3); }
.tk-ti { --on-verified: var(--tc, #8e95a3); width: 38px; height: 38px; flex: none; border-radius: 13px; display: grid; place-items: center; color: #fff; background: var(--tc, #8e95a3);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), 0 6px 14px -8px var(--tc, #8e95a3); }
.tk-ti .ico { width: 19px; height: 19px; stroke-width: 2; }
.sp-logo.tk-lg { background: linear-gradient(145deg, rgb(var(--tk)), rgb(var(--tk2))); color: #fff; }
.sp-logo.tk-lg.big { width: 54px; height: 54px; border-radius: 18px; } .sp-logo.tk-lg.big .ico { width: 28px; height: 28px; }

/* ---------- the hub ---------- */
.tk-hero { position: relative; isolation: isolate; overflow: hidden; display: grid; gap: 16px; padding: 18px; border-radius: 26px; margin-top: 2px;
  background: radial-gradient(120% 90% at 100% 0%, rgba(var(--tk2), .22), transparent 60%), radial-gradient(100% 80% at 0% 100%, rgba(var(--tk), .16), transparent 60%), var(--s1);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), inset 0 0 0 1px var(--line); }
.tk-hero-top { display: flex; gap: 14px; align-items: center; }
.tk-hero-t h2 { margin: 0; font-size: 1.25rem; font-weight: 800; letter-spacing: -.02em; } .tk-hero-t p { margin: 3px 0 0; font-size: .8125rem; color: var(--ink-2); line-height: 1.4; }
.tk-cta { position: relative; overflow: hidden; display: flex; align-items: center; gap: 12px; width: 100%; min-height: 56px; padding: 0 10px 0 12px; border-radius: 18px; font-weight: 750; font-size: 1rem; color: #fff;
  background: linear-gradient(135deg, rgb(var(--tk)), rgb(var(--tk2))); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 14px 28px -14px rgba(var(--tk2), .9); transition: transform .45s var(--settle), filter .2s; }
.tk-cta::after { content: ''; position: absolute; left: 8%; right: 8%; top: 1px; height: 46%; border-radius: 18px 18px 50% 50% / 18px 18px 100% 100%; background: linear-gradient(rgba(255, 255, 255, .32), transparent); pointer-events: none; }
.tk-cta:active { transform: scale(.97); filter: brightness(.95); transition-duration: .1s; }
.tk-cta-ic { width: 34px; height: 34px; border-radius: 12px; display: grid; place-items: center; background: rgba(255, 255, 255, .22); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4); }
.tk-cta-ic .ico { width: 19px; height: 19px; stroke-width: 2.4; } .tk-cta-l { flex: 1; text-align: left; } .tk-cta-go .ico { width: 18px; height: 18px; opacity: .85; }
.tk-hub .section-title.caps { margin: 22px 4px 9px; }
.tk-list { display: grid; gap: 8px; }
.tk-card { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px; border-radius: 20px; text-align: left; color: var(--ink); background: var(--s1);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), inset 0 0 0 1px var(--line); transition: transform .45s var(--settle), background-color .2s; }
:root[data-theme='light'] .tk-card { box-shadow: inset 0 1px 0 #fff, inset 0 0 0 1px var(--line), 0 8px 20px -18px rgba(20, 20, 40, .35); }
.tk-card:active { transform: scale(.98); transition-duration: .08s; }
.tk-card.unread { box-shadow: inset 0 0 0 1.5px rgba(var(--tk2), .55); }
.tk-card-t { flex: 1; min-width: 0; display: grid; gap: 3px; }
.tk-card-l1 { display: flex; align-items: baseline; gap: 8px; min-width: 0; } .tk-card-l1 b { font-size: .9375rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.tk-no { flex: none; font-size: .75rem; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.tk-card-l2 { font-size: .8125rem; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tk-card.unread .tk-card-l2 { color: var(--ink); font-weight: 550; }
.tk-card-l3 { display: flex; align-items: center; gap: 8px; } .tk-card-l3 .tm { font-size: .6875rem; color: var(--ink-3); }
.tk-card .chev .ico { width: 18px; height: 18px; color: var(--ink-3); }
.tk-empty { display: grid; justify-items: center; gap: 6px; text-align: center; padding: 26px 18px 6px; color: var(--ink-2); }
.tk-empty .ico { width: 34px; height: 34px; color: var(--ink-3); } .tk-empty b { color: var(--ink); } .tk-empty span { font-size: .8125rem; max-width: 300px; line-height: 1.45; }
.tk-more { display: flex; align-items: center; justify-content: space-between; width: 100%; margin-top: 12px; padding: 12px 14px; border-radius: 16px; font-size: .875rem; font-weight: 650; color: var(--ink-2); background: var(--chip); }
.tk-more .ico { width: 16px; height: 16px; } .tk-list.done { margin-top: 8px; opacity: .92; }
.tk-faq { display: grid; gap: 8px; }
.tk-q { border-radius: 18px; background: var(--s1); box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; }
.tk-q summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 13px 14px; font-weight: 650; font-size: .9375rem; cursor: pointer; list-style: none; -webkit-user-select: none; user-select: none; }
.tk-q summary::-webkit-details-marker { display: none; }
.tk-q summary .ico { width: 16px; height: 16px; flex: none; color: var(--ink-3); transition: transform .3s var(--ease-out); }
.tk-q[open] summary .ico { transform: rotate(180deg); }
.tk-q p { margin: 0; padding: 0 14px 14px; font-size: .875rem; line-height: 1.5; color: var(--ink-2); }
.tk-docs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
.tk-docs button { display: grid; justify-items: center; gap: 6px; padding: 12px 6px; border-radius: 16px; background: var(--chip); font-size: .75rem; font-weight: 650; text-align: center; transition: transform .45s var(--settle); }
.tk-docs button .ico { width: 18px; height: 18px; color: var(--ink-2); } .tk-docs button:active { transform: scale(.95); }

/* ---------- a new ticket ---------- */
.tk-step { display: flex; align-items: center; gap: 10px; margin: 6px 2px 10px; } .tk-step + .tk-step { margin-top: 22px; }
.tk-step-n { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: .75rem; font-weight: 800; color: #fff; background: linear-gradient(145deg, rgb(var(--tk)), rgb(var(--tk2))); }
.tk-step b { font-size: 1.0625rem; }
.tk-new .tk-hint + .tk-step, .tk-new [data-hint][hidden] + .tk-step { margin-top: 22px; }
.tk-topics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.tk-topic { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 10px; border-radius: 16px; text-align: left; font-size: .875rem; font-weight: 650; color: var(--ink); background: var(--s1);
  box-shadow: inset 0 0 0 1px var(--line); transition: transform .45s var(--settle), box-shadow .2s, background-color .2s; }
.tk-topic span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.tk-topic .tk-ti { width: 32px; height: 32px; border-radius: 11px; } .tk-topic .tk-ti .ico { width: 17px; height: 17px; }
.tk-topic:active { transform: scale(.96); transition-duration: .08s; }
.tk-topic.on { box-shadow: inset 0 0 0 2px rgb(var(--tk2)), 0 10px 22px -16px rgba(var(--tk2), .9); background: linear-gradient(135deg, rgba(var(--tk2), .1), transparent), var(--s1); }
.tk-topics.nudge .tk-topic { animation: tk-nudge .9s var(--ease-out) both; } .tk-topics.nudge .tk-topic:nth-child(2n) { animation-delay: .04s; }
@keyframes tk-nudge { 40% { box-shadow: inset 0 0 0 1.5px rgba(var(--tk2), .45); } }
.tk-hint { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 10px; padding: 12px; border-radius: 18px; background: rgba(var(--tk), .08); box-shadow: inset 0 0 0 1px rgba(var(--tk), .18); }
.tk-hint .tk-ti { width: 30px; height: 30px; border-radius: 10px; } .tk-hint .tk-ti .ico { width: 16px; height: 16px; }
.tk-hint p { flex: 1; min-width: 160px; margin: 0; font-size: .8125rem; line-height: 1.45; color: var(--ink-2); }
.tk-new .field { margin-top: 12px; position: relative; }
.field .lbl { font-weight: 600; font-size: .9375rem; }
.tk-count { justify-self: end; font-size: .6875rem; color: var(--ink-3); font-variant-numeric: tabular-nums; } .tk-count.warn { color: var(--gold); }
.tk-pays { display: flex; gap: 6px; flex-wrap: wrap; }
.tk-files-h { display: grid; gap: 2px; margin: 16px 2px 8px; } .tk-files-h b { font-size: .9375rem; } .tk-files-h span { font-size: .75rem; color: var(--ink-3); }
.tk-files, .tk-dfiles { display: flex; gap: 8px; flex-wrap: wrap; }
.tk-thumb { position: relative; width: 74px; height: 74px; border-radius: 16px; overflow: hidden; background: var(--s2); box-shadow: inset 0 0 0 1px var(--line); }
.tk-thumb img { width: 100%; height: 100%; object-fit: cover; }
.tk-thumb-x { position: absolute; top: 4px; right: 4px; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: rgba(0, 0, 0, .55); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.tk-thumb-x::after { content: ''; position: absolute; inset: -8px; } .tk-thumb-x .ico { width: 12px; height: 12px; stroke-width: 2.6; }
.tk-add { width: 74px; height: 74px; border-radius: 16px; display: grid; place-items: center; align-content: center; gap: 4px; font-size: .6875rem; font-weight: 650; color: var(--ink-2); background: var(--chip); box-shadow: inset 0 0 0 1.5px var(--line-2, var(--line)); border: 0; }
.tk-add .ico { width: 20px; height: 20px; } .tk-add:active { transform: scale(.95); }
.tk-send .ico { width: 18px; height: 18px; }

/* ---------- a ticket ---------- */
.tk-page .page-head { gap: 8px; }
.tk-head { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; }
.tk-head-t { display: grid; min-width: 0; } .tk-head-t b { font-size: 1rem; font-variant-numeric: tabular-nums; } .tk-head-t span { font-size: .75rem; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tk-body { display: grid; gap: 8px; padding-bottom: 12px; }
.tk-info { display: flex; gap: 12px; align-items: flex-start; padding: 14px; border-radius: 20px; background: var(--s1); box-shadow: inset 0 0 0 1px var(--line); margin-bottom: 4px; }
.tk-info-t { display: grid; gap: 3px; min-width: 0; } .tk-info-t b { font-size: .9375rem; overflow-wrap: anywhere; } .tk-info-t > span { font-size: .75rem; color: var(--ink-3); }
.tk-day { justify-self: center; margin: 6px 0 2px; padding: 3px 10px; border-radius: 99px; font-size: .6875rem; font-weight: 650; color: var(--ink-3); background: var(--chip); }
.tk-m { display: flex; gap: 8px; align-items: flex-end; max-width: 88%; }
.tk-m.me { margin-left: auto; flex-direction: row-reverse; }
.tk-m .sp-logo { width: 28px; height: 28px; flex: none; } .tk-m .sp-logo .ico { width: 15px; height: 15px; }
.tk-b { display: grid; gap: 4px; min-width: 0; padding: 9px 13px 7px; border-radius: 20px 20px 20px 6px; background: var(--s2); box-shadow: inset 0 0 0 1px var(--line); }
.tk-m.me .tk-b { border-radius: 20px 20px 6px 20px; background: var(--pri); color: var(--on-pri); box-shadow: none; }
.tk-m.auto .tk-b { background: rgba(var(--tk), .1); box-shadow: inset 0 0 0 1px rgba(var(--tk), .2); }
.tk-who { font-size: .6875rem; font-weight: 750; color: rgb(var(--tk)); }
.tk-b p { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font-size: .9375rem; line-height: 1.4; }
.tk-tm { justify-self: end; font-size: .625rem; opacity: .6; }
.tk-pay { display: inline-flex; align-items: center; gap: 5px; font-size: .75rem; font-weight: 600; opacity: .85; } .tk-pay .ico { width: 13px; height: 13px; }
.tk-ev { justify-self: center; text-align: center; margin: 4px 0; } .tk-ev span { display: inline-block; padding: 4px 11px; border-radius: 99px; font-size: .6875rem; font-weight: 650; color: var(--ink-2); background: var(--chip); }
.tk-imgs { display: grid; gap: 4px; grid-template-columns: repeat(2, minmax(0, 1fr)); width: min(240px, 62vw); } .tk-imgs.n1 { grid-template-columns: 1fr; }
.tk-img { display: block; padding: 0; border-radius: 12px; overflow: hidden; aspect-ratio: 1; background: rgba(127, 127, 127, .15); } .tk-imgs.n1 .tk-img { aspect-ratio: 4 / 3; }
.tk-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tk-page .page-foot { padding: 6px 0 0; }
.tk-dock { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; min-width: 0; } .tk-dock > * { min-width: 0; } .tk-dock .composer2 textarea { padding-right: 17px; } .tk-dock .composer2 { gap: 6px; padding-left: 8px; }
.tk-dock [data-prompt]:empty, .tk-dfiles:empty { display: none; }
.tk-dfiles { padding: 0 12px; } .tk-dfiles .tk-thumb { width: 56px; height: 56px; border-radius: 12px; }
.tk-att { flex: none; } .tk-att .ico { width: 21px; height: 21px; }
.tk-ask, .tk-rate, .tk-closed, .tk-note { margin: 0 12px; padding: 12px 14px; border-radius: 18px; background: var(--s1); box-shadow: inset 0 0 0 1px var(--line); }
.tk-ask { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .tk-ask > span { flex: 1; min-width: 170px; font-size: .875rem; font-weight: 650; }
.tk-ask-b { display: flex; gap: 6px; } .tk-ask-b .ico { width: 14px; height: 14px; }
.tk-rate { display: grid; gap: 8px; justify-items: center; text-align: center; } .tk-rate b { font-size: .9375rem; }
.tk-stars { display: flex; gap: 6px; } .tk-stars button { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; color: var(--ink-3); background: var(--chip); transition: transform .4s var(--settle), color .2s; }
.tk-stars button .ico { width: 22px; height: 22px; } .tk-stars button.on { color: var(--gold); transform: scale(1.06); } .tk-stars button:active { transform: scale(.9); }
.tk-rate-more { display: flex; gap: 8px; width: 100%; } .tk-rate-more .input { flex: 1; min-height: 42px; }
.tk-closed { display: grid; gap: 6px; text-align: center; } .tk-closed span { font-size: .8125rem; color: var(--ink-2); } .tk-closed .btn { margin-top: 6px; }
.tk-note { font-size: .8125rem; color: var(--ink-2); text-align: center; } .tk-rated { color: var(--gold); letter-spacing: .05em; }
.row .ri.ok { color: var(--ok); background: var(--ok-bg); }

/* ---------- the admin queue ---------- */
.tk-alist { display: grid; gap: 8px; }
.tk-acard { display: grid; gap: 8px; width: 100%; padding: 12px; border-radius: 18px; text-align: left; color: var(--ink); background: var(--s1); box-shadow: inset 0 0 0 1px var(--line); }
.tk-acard.unread { box-shadow: inset 0 0 0 1.5px rgba(var(--tk2), .6); } .tk-acard.prio { background: linear-gradient(135deg, rgba(233, 184, 80, .08), transparent 50%), var(--s1); }
.tk-acard-h { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .tk-acard-h b { font-variant-numeric: tabular-nums; }
.tk-acard-u { display: flex; align-items: center; gap: 10px; min-width: 0; } .tk-acard-u > span { flex: 1; min-width: 0; font-size: .875rem; overflow: hidden; }
.tk-acard-u .small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tk-acard-u .av.sm { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; flex: none; }
.tk-quick { display: flex; gap: 6px; overflow-x: auto; padding: 0 12px 6px; scrollbar-width: none; } .tk-quick::-webkit-scrollbar { display: none; } .tk-quick .chip { flex: none; }
.tk-resolve { display: flex; align-items: center; gap: 8px; padding: 0 14px 6px; font-size: .8125rem; color: var(--ink-2); }
.tk-admin .sp-msgs .tk-ev { display: flex; justify-content: center; }

/* ---------- outside Telegram: what this is, how to open it, the documents ---------- */
.land { display: grid; justify-items: center; gap: 10px; max-width: 380px; text-align: center; }
.land-lg { width: 64px; height: 64px; border-radius: 22px; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, #ff3d7f, #7c5cff); box-shadow: 0 16px 34px -14px rgba(124, 92, 255, .8), inset 0 1px 0 rgba(255, 255, 255, .4); }
.land-lg .ico { width: 30px; height: 30px; }
.land h2 { margin: 6px 0 0; } .land-t { font-weight: 650; color: var(--ink) !important; }
.land-cta { margin-top: 6px; min-width: 240px; background: linear-gradient(135deg, #ff3d7f, #7c5cff); color: #fff; box-shadow: 0 14px 28px -14px rgba(124, 92, 255, .9), inset 0 1px 0 rgba(255, 255, 255, .35); text-decoration: none; }
.land-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 14px; margin-top: 14px; font-size: .8125rem; }
.land-links a { color: var(--ink-2); }
@media (prefers-reduced-motion: reduce) { .tk-topics.nudge .tk-topic { animation: none; } .tk-entry, .tk-cta, .tk-card, .tk-topic { transition-duration: .01s; } }

/* ===================== v8.10 ===================== */

/* ---------- recording voice and circles: two buttons, a solid panel that is always on top and sharp ---------- */
.composer2 .cam-btn .ico { width: 23px; height: 23px; }
.mic-btn.pressing { transform: scale(1.12); transition-duration: .12s; }
.composer2.recording { z-index: auto; }
.composer2.recording .attach, .composer2.recording .cmp-field, .composer2.recording .send-btn { visibility: hidden; }
/* hands-free: the panel covers the whole composer; push-to-talk: the pressed button stays under the finger */
.composer2.recording:not(.rec-hold) .mic-btn { visibility: hidden; }
.composer2.rec-hold:not(.rec-circle-on) .cam-btn, .composer2.rec-hold.rec-circle-on .mic-btn:not(.cam-btn) { visibility: hidden; }
.composer2.rec-hold:not(.rec-circle-on) .mic-btn:not(.cam-btn), .composer2.rec-hold.rec-circle-on .cam-btn {
  background: var(--danger); color: #fff; transform: scale(1.12); box-shadow: 0 0 0 calc(var(--lvl, 0) * 18px) rgba(var(--danger-rgb), .24), 0 0 26px rgba(var(--danger-rgb), .45); transition: box-shadow .1s, transform .3s var(--settle); }
.rec-panel { position: absolute; left: 12px; right: 12px; top: 6px; height: 46px; z-index: 3; display: flex; align-items: center; gap: 8px; padding: 0 3px; border-radius: 23px;
  background: var(--s1); box-shadow: inset 0 0 0 1px var(--line-2, var(--line)), 0 10px 26px -14px rgba(0, 0, 0, .6); color: var(--ink); animation: rec-in .22s var(--ease-out); }
:root[data-theme='light'] .rec-panel { background: #fff; }
@keyframes rec-in { from { opacity: 0; transform: translateY(6px) scale(.98); } }
.composer2.rec-hold .rec-panel { right: 70px; }
.composer2.rec-hold.rec-circle-on .rec-panel { right: 124px; }
.rec-x, .rec-send { width: 40px; height: 40px; flex: none; border-radius: 50%; display: grid; place-items: center; transition: transform .4s var(--settle); }
.rec-x { color: var(--danger); background: var(--danger-bg); } .rec-x .ico { width: 19px; height: 19px; }
.rec-send { color: var(--on-pri); background: var(--pri); box-shadow: 0 6px 16px -8px rgba(0, 0, 0, .5); } .rec-send .ico { width: 20px; height: 20px; stroke-width: 2.4; }
.rec-x:active, .rec-send:active { transform: scale(.9); transition-duration: .08s; }
.rec-x::after, .rec-send::after { content: ''; position: absolute; inset: -6px; }
.rec-x, .rec-send { position: relative; }
.composer2.rec-hold .rec-x, .composer2.rec-hold .rec-send { display: none; }
.rec-mid { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; padding-left: 6px; }
.composer2.rec-hold .rec-mid { padding-left: 12px; }
.rec-mid .rec-dot { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--danger); box-shadow: 0 0 10px var(--danger); animation: blink 1s infinite; }
.rec-mid .rec-time { flex: none; min-width: 38px; font-weight: 700; font-variant-numeric: tabular-nums; }
.rec-wave { flex: 1; min-width: 40px; max-width: 132px; height: 26px; color: var(--ink-2); }
.rec-tip { flex: 2; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .75rem; color: var(--ink-3); text-align: right; padding-right: 4px; }
@media (max-width: 380px) { .composer2:not(.rec-hold) .rec-tip { display: none; } }
.rec-lock { z-index: 3; }
.composer2.rec-circle-on .rec-lock { right: 68px; }
/* the circle preview: a dim (not blurred) layer under the dock, so the buttons stay readable */
.chat2 .page-body > .rec-ov { position: absolute; inset: 0; z-index: 7; padding-bottom: calc(110px + var(--safe-b)); background: rgba(0, 0, 0, .72); -webkit-backdrop-filter: none; backdrop-filter: none; }
.chat2 .page-body > .rec-ov .rec-circle { width: min(72vw, 300px); box-shadow: 0 0 0 4px rgba(255, 255, 255, .14), 0 24px 60px -20px rgba(0, 0, 0, .8); }
.rec-hint { font-weight: 600; text-shadow: 0 1px 8px rgba(0, 0, 0, .5); }

/* ---------- «Я»: a little air between the numbers and the Gold rows ---------- */
.scroll > .rows.me-gold-rows { margin: 14px 16px 0; }

/* ---------- the gift sheet: the note and the switches never overlap ---------- */

/* ---------- support: calmer and more professional ---------- */
.tk-hero { background: var(--s1); }
.tk-hero::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(90% 70% at 100% 0%, rgba(var(--tk2), .14), transparent 60%); }
.tk-status { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; font-size: .75rem; font-weight: 650; color: var(--ok); }
.tk-status::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 3px var(--ok-bg); }
.tk-docs { display: none; }
.tk-doclist .row .ri { background: var(--chip); }
.tk-faq.rows .tk-q { border-radius: 0; background: transparent; box-shadow: none; }
.tk-faq.rows .tk-q + .tk-q { border-top: 1px solid var(--line); }
.tk-info { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 0 12px; }
.tk-meta { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 14px; margin-top: 10px; padding-top: 12px; border-top: 1px solid var(--line); }
.tk-meta div { display: grid; gap: 2px; min-width: 0; } .tk-meta span { font-size: .6875rem; color: var(--ink-3); text-transform: uppercase; letter-spacing: .06em; } .tk-meta b { font-size: .875rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- the gift trading window: buy and sell right under the chart ---------- */
.gc-trade { position: sticky; bottom: 0; z-index: 3; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 16px -2px 0; padding: 12px 2px calc(4px + var(--safe-b));
  background: linear-gradient(to top, var(--bg) 70%, rgba(0, 0, 0, 0)); }
:root[data-theme='light'] .gc-trade { background: linear-gradient(to top, #f2f2f7 70%, rgba(242, 242, 247, 0)); }
.gc-trade .btn { min-height: 54px; flex-direction: column; gap: 1px; line-height: 1.15; }
.gc-trade .btn b { font-size: 1rem; } .gc-trade .btn small { font-size: .72rem; font-weight: 600; opacity: .8; }
.gc-trade .btn.buy { background: var(--ok); color: var(--ok-ink); box-shadow: 0 10px 24px -12px rgba(var(--ok-rgb), .9), inset 0 1px 0 rgba(255, 255, 255, .35); }
.gc-trade .btn.sell { background: var(--danger); color: #fff; box-shadow: 0 10px 24px -12px rgba(var(--danger-rgb), .9), inset 0 1px 0 rgba(255, 255, 255, .3); }
.gc-trade .btn.is-off { opacity: .45; }
.gc-empty-note { margin: 10px 2px 0; font-size: .8125rem; color: var(--ink-3); text-align: center; }
/* while recording, nothing else floats above the composer */
.chat-dock:has(.composer2.recording) > :not(.composer2) { visibility: hidden; }
/* narrow phones: two record buttons and the field still fit on one line */
.composer2 textarea::placeholder { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 370px) {
  .chat2 .composer2 { gap: 6px; padding-left: 8px; padding-right: 8px; }
  .chat2 .composer2 .attach, .chat2 .composer2 .mic-btn, .chat2 .composer2 .send-btn { width: 40px; height: 40px; }
  .chat2 .composer2 .mic-btn .ico { width: 21px; height: 21px; }
  .chat2 .composer2 textarea { padding-left: 14px; padding-right: 40px; min-height: 42px; }
  .chat2 .rec-panel { left: 8px; right: 8px; height: 44px; }
  .composer2.rec-hold .rec-panel { right: 56px; } .composer2.rec-hold.rec-circle-on .rec-panel { right: 102px; }
  .composer2.rec-circle-on .rec-lock { right: 56px; }
}

/* ===================== v8.11 ===================== */

/* ---------- Plus: its own blue button and lock (who viewed / who liked) ---------- */
:root { --plus-1: #7aa8ff; --plus-2: #3d6bff; --plus-rgb: 61, 107, 255; }
.btn.plus { background: linear-gradient(180deg, var(--plus-1), var(--plus-2)); color: #fff; box-shadow: 0 12px 26px -12px rgba(var(--plus-rgb), .85), inset 0 1px 0 rgba(255, 255, 255, .35); }
.btn.plus .ico.fill { fill: currentColor; stroke: none; }
.pa-lock.plus { color: var(--plus-1); }
:root[data-theme='light'] .pa-lock.plus { color: var(--plus-2); }

/* ---------- "Написать" without a mutual match: why, and the two ways in ---------- */
.wg-hero { display: grid; justify-items: center; text-align: center; padding: 6px 4px 2px; }
.wg-hero .sheet-sub { max-width: 330px; }
.wg-pair { display: flex; align-items: center; margin: 4px 0 16px; }
.wg-av { width: 64px; height: 64px; border-radius: 50%; overflow: hidden; flex: none; display: grid; place-items: center; background: var(--s2); color: var(--ink-3); box-shadow: 0 0 0 3px var(--bg), 0 10px 24px -12px rgba(0, 0, 0, .6); }
.wg-av img { width: 100%; height: 100%; object-fit: cover; }
.wg-av .ico { width: 26px; height: 26px; }
.wg-link { display: flex; align-items: center; gap: 4px; margin: 0 6px; }
.wg-link i { width: 16px; border-top: 2px dashed var(--line-2, var(--line)); }
.wg-link b { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; color: var(--ink-3); border: 2px dashed var(--line-2, var(--line)); animation: wg-beat 2.4s var(--ease-out) infinite; }
.wg-link b .ico { width: 16px; height: 16px; fill: currentColor; stroke: none; }
@keyframes wg-beat { 0%, 70%, 100% { transform: scale(1); } 80% { transform: scale(1.14); } 90% { transform: scale(.96); } }
.wg-ways { display: grid; gap: 10px; margin-top: 18px; }
.wg-way { display: flex; align-items: flex-start; gap: 12px; padding: 13px 14px; border-radius: 20px; background: var(--s1); box-shadow: inset 0 0 0 1px var(--line); text-align: left; }
.wg-ic { width: 38px; height: 38px; border-radius: 13px; display: grid; place-items: center; flex: none; }
.wg-ic .ico { width: 19px; height: 19px; fill: currentColor; stroke: none; }
.wg-way.free .wg-ic { background: rgba(var(--serious-rgb), .14); color: var(--serious); }
.wg-way.gold .wg-ic { background: var(--gold-bg); color: var(--gold); }
.wg-way > div { display: grid; gap: 3px; min-width: 0; }
.wg-way b { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; font-size: .9375rem; }
.wg-way span:not(.wg-tag):not(.wg-ic) { font-size: .8125rem; line-height: 1.45; color: var(--ink-2); }
.wg-tag { display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border-radius: 999px; font-size: .6875rem; font-weight: 700; letter-spacing: .01em; background: rgba(var(--ok-rgb), .14); color: var(--ok); }
.wg-tag.gold { background: linear-gradient(180deg, #fbe2a0, #e6ad42); color: var(--gold-ink); }
.wg-note { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 12px; text-align: center; }
.wg-note .ico { width: 13px; height: 13px; color: var(--plus-1); fill: currentColor; stroke: none; flex: none; }

/* the other person hid their Telegram username: a quiet note, not a button */
.pv-tg.hidden-tg { cursor: default; }
.pv-tg.hidden-tg .pt-ic { background: linear-gradient(180deg, #8a8f98, #5d626b); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3); }
.pv-tg.hidden-tg:active { transform: none; }

/* ---------- privacy: who sees what (sign-up step, Me → Privacy, the one-time sheet) ---------- */
.prv .section-title.caps { margin: 24px 4px 10px; }
.prv-hero { display: grid; justify-items: center; text-align: center; gap: 6px; padding: 4px 6px 0; }
.prv-shield { position: relative; width: 68px; height: 68px; border-radius: 24px; display: grid; place-items: center; margin-bottom: 8px; color: #fff; isolation: isolate;
  background: linear-gradient(150deg, var(--plus-1), var(--plus-2) 52%, #b98a2c); box-shadow: 0 16px 34px -16px rgba(var(--plus-rgb), .9), inset 0 1px 0 rgba(255, 255, 255, .45); }
.prv-shield .ico { width: 32px; height: 32px; stroke-width: 1.9; }
.prv-ring { position: absolute; inset: -6px; z-index: -1; border-radius: 29px; background: conic-gradient(from 0deg, rgba(var(--plus-rgb), .0), rgba(var(--plus-rgb), .55), rgba(var(--gold-rgb), .55), rgba(var(--plus-rgb), 0)); filter: blur(6px); opacity: .8; animation: prv-spin 6s linear infinite; }
@keyframes prv-spin { to { transform: rotate(360deg); } }
.prv-kicker { font-size: .6875rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.prv-hero h1 { margin: 0; }
.prv.prv-step .prv-hero h1 { font-size: 1.9rem; }
.prv-lead { max-width: 340px; font-size: .9375rem; line-height: 1.5; color: var(--ink-2); }
.prv-cards { display: grid; gap: 10px; }
.prv-card { display: flex; align-items: flex-start; gap: 12px; padding: 13px 14px; border-radius: 20px; background: var(--s1); box-shadow: inset 0 0 0 1px var(--line); }
.prv-ic { width: 38px; height: 38px; border-radius: 13px; display: grid; place-items: center; flex: none; }
.prv-ic .ico { width: 19px; height: 19px; }
.prv-ic .ico.fill { fill: currentColor; stroke: none; }
.prv-card.views .prv-ic { background: rgba(var(--plus-rgb), .15); color: var(--plus-1); }
:root[data-theme='light'] .prv-card.views .prv-ic { color: var(--plus-2); }
.prv-card.anon .prv-ic, .prv-card.tg .prv-ic { background: var(--gold-bg); color: var(--gold); }
.prv-tx { display: grid; gap: 3px; min-width: 0; }
.prv-tx b { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; font-size: .9375rem; }
.prv-tx p { font-size: .8125rem; line-height: 1.45; color: var(--ink-2); }
.prv-tag { display: inline-flex; align-items: center; gap: 3px; height: 20px; padding: 0 8px 0 6px; border-radius: 999px; font-size: .6875rem; font-weight: 750; letter-spacing: .01em; }
.prv-tag .ico { width: 10px; height: 10px; fill: currentColor; stroke: none; }
.prv-tag.plus { color: #fff; background: linear-gradient(180deg, var(--plus-1), var(--plus-2)); }
.prv-tag.gold { color: var(--gold-ink); background: linear-gradient(180deg, #fbe2a0, #e6ad42); }
/* who sees what: a compact table, the reader's own plan column lit up */
.prv-matrix { border-radius: 20px; background: var(--s1); box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; }
.prm-r { display: grid; grid-template-columns: minmax(0, 1fr) repeat(3, 54px); align-items: center; min-height: 44px; }
.prm-r + .prm-r { border-top: 1px solid var(--line); }
.prm-l { padding: 10px 6px 10px 14px; font-size: .8125rem; line-height: 1.3; }
.prm-c { align-self: stretch; display: grid; place-items: center; font-size: .6875rem; font-weight: 700; color: var(--ink-3); text-align: center; line-height: 1.15; padding: 0 2px; }
.prm-head { min-height: 40px; }
.prm-head .prm-c.plus { color: var(--plus-1); } .prm-head .prm-c.gold { color: var(--gold); }
:root[data-theme='light'] .prm-head .prm-c.plus { color: var(--plus-2); }
.prm-y { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--ok); color: #fff; }
.prm-y .ico { width: 13px; height: 13px; stroke-width: 3; }
.prm-c.plus .prm-y { background: linear-gradient(180deg, var(--plus-1), var(--plus-2)); }
.prm-c.gold .prm-y { background: linear-gradient(180deg, #fbe2a0, #e6ad42); color: var(--gold-ink); }
.prm-n { width: 10px; height: 2px; border-radius: 2px; background: var(--line-2, var(--line)); }
.prv-matrix.cur-free .prm-c.free, .prv-matrix.cur-plus .prm-c.plus, .prv-matrix.cur-gold .prm-c.gold { background: rgba(255, 255, 255, .045); }
:root[data-theme='light'] .prv-matrix.cur-free .prm-c.free, :root[data-theme='light'] .prv-matrix.cur-plus .prm-c.plus, :root[data-theme='light'] .prv-matrix.cur-gold .prm-c.gold { background: rgba(20, 20, 60, .04); }
@media (max-width: 360px) { .prm-r { grid-template-columns: minmax(0, 1fr) repeat(3, 46px); } .prm-l { padding-left: 12px; font-size: .78rem; } .prm-head .prm-c { font-size: .625rem; } }
/* the switches: real switches with Gold, a crown that opens Gold without it */
.prv-rows { margin: 0; }
.prv-row.prv-locked .rt span { color: var(--ink-3); }
.prv-lock { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; flex: none; color: var(--gold-ink); background: linear-gradient(180deg, #fbe2a0, #e6ad42); box-shadow: 0 6px 14px -8px rgba(var(--gold-rgb), .9); }
.prv-lock .ico { width: 15px; height: 15px; fill: currentColor; stroke: none; }
.prv-ctas { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; margin-top: 14px; }
.prv-cta { display: flex; align-items: center; gap: 10px; min-height: 58px; padding: 10px 12px; border-radius: 18px; text-align: left; transition: transform .45s var(--settle); }
.prv-cta:active { transform: scale(.97); transition-duration: .08s; }
.prv-cta .pc-ic { width: 32px; height: 32px; border-radius: 11px; display: grid; place-items: center; flex: none; }
.prv-cta .pc-ic .ico { width: 17px; height: 17px; fill: currentColor; stroke: none; }
.prv-cta > span:last-child { display: grid; gap: 1px; min-width: 0; }
.prv-cta b { font-size: .9375rem; } .prv-cta > span:last-child span { font-size: .75rem; opacity: .85; }
.prv-cta.plus { color: #fff; background: linear-gradient(160deg, var(--plus-1), var(--plus-2)); box-shadow: 0 12px 26px -14px rgba(var(--plus-rgb), .9), inset 0 1px 0 rgba(255, 255, 255, .3); }
.prv-cta.plus .pc-ic { background: rgba(255, 255, 255, .2); }
.prv-cta.gold { color: var(--gold-ink); background: linear-gradient(160deg, #fbe2a0, #e6ad42 60%, #c98a1e); box-shadow: 0 12px 26px -14px rgba(var(--gold-rgb), .9), inset 0 1px 0 rgba(255, 255, 255, .5); }
.prv-cta.gold .pc-ic { background: rgba(255, 255, 255, .35); }
.prv-have { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 14px; font-size: .8125rem; font-weight: 650; color: var(--gold); }
.prv-have .ico { width: 14px; height: 14px; fill: currentColor; stroke: none; }
.prv-safety { padding: 2px 16px; border-radius: 20px; background: var(--s1); box-shadow: inset 0 0 0 1px var(--line); }
.prv-page .page-body > .section-title.caps { margin: 26px 4px 10px; }
.prv-sheet .prv-hero { padding-top: 0; }
.prv-page .prv-hero { padding-top: 10px; }
/* entrance: the cards and rows arrive one after another, once */
.prv:not(.still) .prv-cards > *, .prv:not(.still) .prv-matrix, .prv:not(.still) .prv-rows { animation: prv-in .5s var(--ease-out) backwards; }
.prv-cards > :nth-child(2) { animation-delay: .05s; } .prv-cards > :nth-child(3) { animation-delay: .1s; } .prv-matrix { animation-delay: .14s; } .prv-rows { animation-delay: .18s; }
@keyframes prv-in { from { opacity: 0; transform: translateY(8px); } }
@media (prefers-reduced-motion: reduce) { .prv-ring, .wg-link b { animation: none; } .prv-cards > *, .prv-matrix, .prv-rows { animation: none; } }

/* ---------- circles: the preview is the recorded square itself (canvas); the camera flips mid-take ---------- */
.rec-stage { position: relative; display: grid; place-items: center; }
.rec-ov.via-canvas .rec-circle video { position: absolute; left: 0; top: 0; width: 2px; height: 2px; opacity: 0; pointer-events: none; transform: none; }
.rec-circle canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; transition: filter .18s, transform .3s var(--ease-out); }
.rec-circle.flipping canvas { filter: blur(12px) brightness(.8); transform: scale(1.05); }
.rec-circle { background: #111; }
.rec-wait { position: absolute; inset: 0; display: grid; place-items: center; transition: opacity .2s; }
.rec-wait .spin { width: 28px; height: 28px; border-width: 3px; border-color: rgba(255, 255, 255, .85); border-right-color: transparent; }
.rec-ov.live .rec-wait { opacity: 0; pointer-events: none; }
.rec-flip { position: absolute; right: 2px; bottom: 2px; z-index: 2; width: 50px; height: 50px; border-radius: 50%; display: grid; place-items: center; color: #fff;
  background: rgba(255, 255, 255, .16); -webkit-backdrop-filter: blur(14px) saturate(160%); backdrop-filter: blur(14px) saturate(160%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .3), 0 10px 24px -10px rgba(0, 0, 0, .7); transition: transform .45s var(--settle); }
.rec-flip .ico { width: 23px; height: 23px; transition: transform .5s var(--settle); }
.rec-flip:active { transform: scale(.9); transition-duration: .08s; }
.rec-flip::after { content: ''; position: absolute; inset: -8px; }
.rec-ov.back-cam .rec-flip .ico { transform: rotate(180deg); }
.rec-flip .ico { stroke-width: 1.9; }
.composer2.rec-warm .rec-mid .rec-time { opacity: .55; }

/* who viewed / who liked are Plus now: the perks wear the Plus blue */
.vw-lock .vw-perks .ico { color: var(--plus-1); }
:root[data-theme='light'] .vw-lock .vw-perks .ico { color: var(--plus-2); }

/* ---------- paying by SBP: the choice and the waiting sheet ---------- */
.opt-ic.sbp-ic { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; place-items: stretch; gap: 3px; padding: 10px; background: var(--chip); }
.sbp-ic i { display: block; width: 100%; height: 100%; min-width: 7px; min-height: 7px; border-radius: 3px; }
.sbp-ic i:nth-child(1) { background: #5b57a2; } .sbp-ic i:nth-child(2) { background: #d90751; } .sbp-ic i:nth-child(3) { background: #fab91a; } .sbp-ic i:nth-child(4) { background: #1d93d2; }
.sbw { display: grid; justify-items: center; text-align: center; gap: 4px; padding: 10px 6px 4px; }
.sbw-ic { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; margin-bottom: 10px; background: var(--chip); color: var(--ink); }
.sbw-ic .spin { width: 28px; height: 28px; }
.sbw-ic .ico { width: 30px; height: 30px; stroke-width: 2.6; }
.sbw.paid .sbw-ic { background: var(--ok); color: #fff; animation: obv-pop .6s cubic-bezier(.2, .9, .25, 1.4); }
.sbw.failed .sbw-ic { background: var(--danger-bg); color: var(--danger); }
.sbw-sum { font: 800 1.9rem/1.1 var(--font); letter-spacing: -.02em; font-variant-numeric: tabular-nums; margin: 2px 0 4px; }
.sbw .sheet-sub { max-width: 320px; }
.sbw-note { max-width: 320px; margin-top: 6px; padding: 10px 12px; border-radius: 14px; background: var(--chip); }
.sbw-legal { max-width: 300px; margin-top: 12px; text-align: center; }
.sbw-legal .ico { display: inline-block; width: 12px; height: 12px; margin-right: 4px; vertical-align: -1px; }
/* admin: the key field */
.set-row.secret .sec-st { margin-top: 6px; font-size: .78rem; color: var(--ink-3); display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.set-row.secret .sec-st.on { color: var(--ok); }
.set-row.secret .sec-st .link { color: var(--danger); font-size: .78rem; }

/* ===================== v8.12 ===================== */


/* ---------- badges on avatars sit above the gold frame (the frame is z 6) ---------- */
.me-vf, .liker .k, .act-item .av .k { z-index: 7; }
.me-ava.gold .me-vf { box-shadow: 0 0 0 2px rgba(0, 0, 0, .18), 0 4px 10px -4px rgba(0, 0, 0, .5); }
:root[data-theme='light'] .me-ava.gold .me-vf { box-shadow: 0 0 0 2px #fff, 0 4px 10px -4px rgba(30, 30, 80, .35); }

/* ---------- the gold frame turns in one shared phase (--gfd is set when a frame appears) ---------- */
.gf-ring::before { animation-delay: var(--gfd, 0s); }
/* ---------- v8.13: Stars are 10% cheaper — the gold "−10%" chip next to a Stars price and one explaining line ---------- */
.soff { display: inline-flex; align-items: center; height: 18px; padding: 0 6px; margin-left: 6px; border-radius: 99px; vertical-align: 2px;
  font: 800 .66rem/1 var(--font); font-style: normal; letter-spacing: .01em; white-space: nowrap; color: #4a3100;
  background: linear-gradient(135deg, var(--gold-hi), var(--gold-mid) 55%, var(--gold)); box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset, 0 4px 10px -6px rgba(var(--gold-rgb), .9); }
/* on a gold or a coloured button the chip turns into a glassy one so it does not melt into the button */
.btn .soff, .obp-pay .soff { color: inherit; background: color-mix(in srgb, currentColor 13%, transparent); box-shadow: 0 0 0 1px color-mix(in srgb, currentColor 24%, transparent) inset; }
.opt .price .soff { margin-left: 5px; }
.opt .t .soff { vertical-align: 1px; }

.sdeal { display: flex; align-items: center; gap: 10px; margin: 12px 0 0; padding: 9px 12px 9px 9px; border-radius: 16px; text-align: left;
  background: linear-gradient(135deg, rgba(var(--gold-rgb), .16), rgba(var(--gold-rgb), .05)); box-shadow: 0 0 0 1px rgba(var(--gold-rgb), .22) inset; }
.sdeal-b { flex: none; display: grid; place-items: center; min-width: 44px; height: 30px; padding: 0 8px; border-radius: 11px; font: 800 .8rem/1 var(--font); color: #4a3100;
  background: linear-gradient(135deg, var(--gold-hi), var(--gold-mid) 55%, var(--gold)); box-shadow: 0 6px 14px -8px rgba(var(--gold-rgb), 1); }
.sdeal-t { font-size: .8rem; line-height: 1.3; color: var(--ink-2); }
.sdeal.shop-deal { margin: 0 0 12px; }

/* the ad wizard: the price list in roubles step by step, then the Stars price */
.adw-stars { display: flex; justify-content: space-between; align-items: center; padding-top: 6px; }
.adw-stars span { color: var(--ink-2); font-size: .9rem; } .adw-stars b { font-size: 1.05rem; display: inline-flex; align-items: center; }

/* "How to pay": the price sits on the right of each way, the chip under it */
.opt .opt-pr { margin-left: auto; padding-left: 8px; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; font-weight: 750; white-space: nowrap; font-variant-numeric: tabular-nums; }
.opt .opt-pr .soff { margin-left: 0; }
/* the small "Gold or Plus from the balance" tiles: the chip goes under the price */
.po-pc .soff { margin: 0; }
/* ---------- v8.14: the withdrawal sheet (now USDT only: the gift route was removed in v8.18) ---------- */
.po-out .btn { margin-top: 12px; }
.pg-head { display: grid; justify-items: center; text-align: center; gap: 2px; }
.pg-ic { width: 58px; height: 58px; border-radius: 20px; display: grid; place-items: center; margin-bottom: 8px; color: #fff;
  background: linear-gradient(150deg, #37bbfe, #2aabee 45%, #1d93d2); box-shadow: 0 14px 30px -14px rgba(42, 171, 238, .9); }
.pg-ic .ico { width: 28px; height: 28px; }
.pg-l { display: block; margin: 18px 0 6px; font-size: .8125rem; color: var(--ink-3); text-align: center; }
.pg-in { margin: 0 auto; }
.pg-plan { margin-top: 14px; display: grid; gap: 8px; }
.pg-sum { display: flex; justify-content: space-between; align-items: baseline; padding-top: 6px; border-top: 1px solid var(--line); }
.pg-sum b { font-size: 1.25rem; letter-spacing: -.01em; }
.pg-how { margin-top: 10px; display: grid; gap: 6px; }
.pg-how .btn { justify-self: start; }
/* the hint under the withdraw button */
.pg-hint { margin-top: 8px; text-align: center; line-height: 1.4; }
/* ---------- v8.15: what the inviter has earned from friends' purchases, under the perks ---------- */
.inv-earned { display: flex; align-items: center; gap: 10px; width: 100%; margin: 14px 0 0; padding: 12px 14px; border: 0; border-radius: 16px; text-align: left; font: inherit; color: var(--ink);
  background: linear-gradient(135deg, rgba(var(--gold-rgb), .16), rgba(var(--gold-rgb), .05)); box-shadow: 0 0 0 1px rgba(var(--gold-rgb), .22) inset; cursor: pointer; }
.inv-earned > .ico:first-child { width: 20px; height: 20px; color: var(--gold); flex: none; }
.inv-earned span { flex: 1; font-weight: 700; }
.inv-earned > .ico:last-child { width: 16px; height: 16px; color: var(--ink-3); }
/* ---------- v8.16: USDT withdrawal (wallet) and the admin "Payouts of the day" window ---------- */
.po-ic.usdt, .pg-ic.usdt { color: #fff; font: 800 1.1rem/1 var(--font); background: linear-gradient(150deg, #3fd3a6, #26a17b 55%, #1b7f60); }
.pg-ic.usdt { font-size: 1.6rem; box-shadow: 0 14px 30px -14px rgba(38, 161, 123, .9); }
.btn.usdtb { color: #fff; background: linear-gradient(150deg, #3fd3a6, #26a17b 50%, #1b7f60); box-shadow: 0 10px 24px -14px rgba(38, 161, 123, .9); }
.pd-sum { display: grid; gap: 8px; margin-bottom: 4px; }
.pd-sum > b { font-size: 1.15rem; }
.pd-tot { display: flex; flex-wrap: wrap; gap: 8px; }
.pd-tot span { padding: 6px 10px; border-radius: 12px; background: var(--chip); font-weight: 700; font-variant-numeric: tabular-nums; }
.pd-need { display: grid; gap: 8px; margin-bottom: 8px; }
.pd-row { display: grid; gap: 10px; }
.pd-row.off { opacity: .45; }
.pd-acts { display: flex; gap: 6px; justify-content: flex-end; }
.pd-usdt { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.pd-usdt b { font-size: 1.1rem; margin-right: auto; font-variant-numeric: tabular-nums; }
.pd-check { font-size: .8125rem; }
.pd-check.bad { box-shadow: 0 0 0 1.5px var(--danger) inset; }
.pd-foot { position: sticky; bottom: 0; display: grid; gap: 8px; justify-items: center; padding: 14px 0 6px; margin-top: 10px; background: linear-gradient(to top, var(--bg) 70%, transparent); }
.pc-sheet .pg-sum { border-top: 0; padding-top: 0; }
/* ---------- v8.17: every tappable thing answers the finger — the press is quick (~0.1 s), the release springs back ---------- */
.p3-av, .p3-claims, .pvx-more, .gi-name, .st-up, .me-card, .pv-crush, .seg button { transition: transform .45s var(--settle), color .25s; }
.p3-av:active, .p3-claims:active, .pvx-more:active, .gi-name:active { transform: scale(.92); transition-duration: .1s, .25s; }
.me-card:active, .pv-crush:active, .st-up:active { transform: scale(.975); transition-duration: .12s, .25s; }
.seg button:active { transform: scale(.95); transition-duration: .1s, .25s; }
/* avatars inside a row: the row already darkens, the avatar itself gives a small squeeze */
.conv .av, .act-item .av { transition: transform .45s var(--settle); }
.conv .av:active, .act-item .av:active { transform: scale(.92); transition-duration: .1s; }
.mg-h, .adm-user-row { transition: opacity .3s var(--ease-out); }
.mg-h:active, .adm-user-row:active { opacity: .62; transition-duration: .06s; }
/* small pills get a taller invisible touch area (no layout change) */
.chip.sm-c, .cbadge { position: relative; }
.chip.sm-c::after, .cbadge::after { content: ''; position: absolute; inset: -7px -2px; }
@media (prefers-reduced-motion: reduce) {
  .p3-av:active, .p3-claims:active, .pvx-more:active, .gi-name:active, .me-card:active, .pv-crush:active, .st-up:active, .seg button:active, .conv .av:active, .act-item .av:active { transform: none; opacity: .75; }
}
/* ---------- v8.17: every screen and every way of holding it, chosen automatically ---------- */

/* names never break in the middle of a number; a long one wraps between words, the age stays whole */
.me-info h2 { flex-wrap: wrap; row-gap: 0; overflow-wrap: anywhere; }
.me-info h2 .age, .rc-name .age, .pv-name .age, .dc-name .age, .cc-name .age { flex: none; white-space: nowrap; }
/* two buttons side by side fit a 320-pixel phone with their icons */
.me-btns .btn { padding-inline: 8px; gap: 6px; }
.post .pact .itsme { flex-shrink: 0; }
.set-row b { overflow-wrap: anywhere; }
/* a name in a narrow Top card ends with … instead of being cut; long words in the activity list wrap */
.tc-inf b { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.act-item .tx { overflow-wrap: anywhere; }

/* the buttons at the top keep clear of whatever the device or Telegram puts on the sides (a notch, a camera, status icons) */
.discover-head { padding-left: max(18px, calc(var(--safe-l) + 8px)); padding-right: max(14px, calc(var(--safe-r) + 8px)); }
.topbar { padding-left: max(16px, calc(var(--safe-l) + 8px)); padding-right: max(16px, calc(var(--safe-r) + 8px)); }
.page-head { padding-left: max(14px, calc(var(--safe-l) + 8px)); padding-right: max(14px, calc(var(--safe-r) + 8px)); }

/* very narrow screens (a folded Galaxy Fold, the smallest iPhones): smaller round buttons, icons only where words matter */
@media (max-width: 340px) {
  .discover-head, .topbar { gap: 6px; padding-left: max(12px, calc(var(--safe-l) + 6px)); padding-right: max(10px, calc(var(--safe-r) + 6px)); }
  .discover-head .icon-btn, .topbar .icon-btn { width: 38px; height: 38px; }
  .actions { gap: 7px; }
  .act { width: 42px; height: 42px; }
  .act.pass, .act.like { width: 56px; height: 56px; }
  .me-btns .btn .ico, .mg-acts .ico, .rc-acts .btn .ico, .gi-own .btn .ico, .sheet-actions .btn .ico, .pact .btn .ico { display: none; }
  .gift-grid.g3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .me-info h2 { font-size: 1.2rem; }
  .tabbar button { font-size: .625rem; }
  .discover-head .wordmark { font-size: 15px; }
}
/* the folded cover screen of a Galaxy Fold (about 280 px): the help button gives its place to the bell */
@media (max-width: 300px) { .discover-head [data-d='help'] { display: none; } }

/* a phone held sideways (the device itself, never the keyboard): wider, shorter, the deck and its buttons side by side */
:root.land { --tabbar-h: 44px; }
:root.land #app, :root.land .page { max-width: min(100%, 880px); }
:root.land #app { padding-left: var(--safe-l); padding-right: var(--safe-r); }
:root.land .tabbar button > span:not(.badge) { display: none; }
:root.land .discover-head, :root.land .topbar { min-height: calc(44px + var(--safe-t)); padding-top: calc(4px + var(--safe-t)); padding-bottom: 2px; }
:root.land .deck-wrap { flex-direction: row; align-items: stretch; justify-content: center; gap: 14px; padding-top: 2px; }
/* a nearly square card in the middle: a portrait photo is not squeezed into a strip; the face stays in the frame */
:root.land .deck { flex: 0 1 auto; width: min(100%, calc((100dvh - var(--dock-h) - 56px) * 1.08)); max-width: none; margin: 0; }
:root.land .dcard img, :root.land .dcard .ph { object-position: 50% 28%; }
:root.land .actions { flex-direction: column; justify-content: center; min-height: 0; padding: 0; gap: 8px; }
:root.land .act { width: 42px; height: 42px; }
:root.land .act.pass, :root.land .act.like { width: 54px; height: 54px; }
:root.land .sheet { max-height: calc(100% - 6px - var(--safe-t)); }
:root.land .sheet.full { height: calc(100% - 6px - var(--safe-t)); }
:root.land .page-head { padding-left: max(16px, var(--safe-l)); padding-right: max(16px, var(--safe-r)); }

/* two screens with a hinge (Surface Duo, a book-style foldable spanned): the app lives on the first screen, never under the hinge */
@media (horizontal-viewport-segments: 2) {
  #app, .page, .sheet { max-width: env(viewport-segment-width 0 0, 540px); margin-left: 0; margin-right: 0; right: auto; width: 100%; }
}
@media (vertical-viewport-segments: 2) {
  .sheet { max-height: env(viewport-segment-height 0 1, 60%); }
}
/* ---------- v8.18: quieter — colour only where it carries meaning ----------
   Gold and gifts keep their gold, "no / yes" on a card keep red and green, errors stay red. Everything else is ink on a
   quiet surface: nothing shines or drifts by itself, no coloured halos, no rainbow tiles. Depth comes from soft shadows
   with an offset, never from glow. */

/* 1. nothing shines or drifts by itself (the ambient light stays, still) */
#app::after { animation: none; }
.aurora-bg { animation: none; }
.btn.gold::after, .gold-sheen::after, .upsell::after, .plan-hero.gold::after, .gi-hero::after, .glint, .wl-fx { display: none; }

/* 2. no halos: the white glow around light buttons goes (dark theme); the light theme keeps its soft offset shadow */
:root { --glow: 0 0 0 0 transparent; }
.btn.ok { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3); }
.btn.gold { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), inset 0 -1px 0 rgba(120, 70, 0, .2); }
.act.pass { box-shadow: inset 0 0 0 1px rgba(var(--danger-rgb), .3); }
.act.like { box-shadow: inset 0 0 0 1px rgba(var(--ok-rgb), .32); }
.actions[data-dir='pass'] .act.pass { box-shadow: inset 0 0 0 1.5px var(--danger); }
.actions[data-dir='like'] .act.like { box-shadow: inset 0 0 0 1.5px var(--ok); }
.itsme.ok, .liker.super .ring { box-shadow: none; }
.ph-badge.inv { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6); }
.wl-ic { box-shadow: inset 0 2px 0 rgba(255, 255, 255, .8); }

/* 3. glass controls without the painted-on specular sheen */
.icon-btn.orb, .page-head .icon-btn, .topbar .icon-btn, .discover-head .icon-btn, .act:not(.pass):not(.like), .toast, .nbanner,
:root[data-theme='light'] .icon-btn.orb, :root[data-theme='light'] .page-head .icon-btn, :root[data-theme='light'] .topbar .icon-btn,
:root[data-theme='light'] .discover-head .icon-btn, :root[data-theme='light'] .act:not(.pass):not(.like) { background-image: none; }

/* 4. icon tiles: ink on a quiet tile (Gold tiles stay gold) */
.pf-ic.c0, .pf-ic.c1, .pf-ic.c2, .pf-ic.c3, .pf-ic.c4, .pf-ic.c5, .pf-ic.c6, .sc-ic:not(.gold), .po-ic.prem, .po-ic.usdt, .pg-ic, .pg-ic.usdt,
.tp-way.gift .tw-ic, .tp-way.inv .tw-ic, .tk-entry-lg, .sp-logo, .sp-logo.tk-lg, .it-ic.net, .it-ic.serious, .it-ic.night {
  color: var(--ink); background: var(--chip-2); box-shadow: none; }
.pa.like .pa-ic, .pa.gift .pa-ic, .pa.cmt .pa-ic, .pa.view .pa-ic { color: var(--ink); background: var(--chip-2); --pa-glow: transparent; box-shadow: none; }
.cw-a.pin { background: var(--s3); color: var(--ink); }

/* 5. what someone is looking for is information, not decoration: neutral tags */
.tag.it.net, .tag.it.serious, .tag.it.night { background: var(--chip); color: var(--ink-2); box-shadow: none; }
.dc-tags .tag.it.net, .dc-tags .tag.it.serious, .dc-tags .tag.it.night,
.done-card .tag.it.net, .done-card .tag.it.serious, .done-card .tag.it.night { color: rgba(255, 255, 255, .92); }
.opt.it-opt.net[aria-pressed='true'], .opt.it-opt.serious[aria-pressed='true'], .opt.it-opt.night[aria-pressed='true'] { box-shadow: var(--card-shadow), inset 0 0 0 2px var(--ink); }
.opt.it-opt.net[aria-pressed='true'] .mk, .opt.it-opt.serious[aria-pressed='true'] .mk, .opt.it-opt.night[aria-pressed='true'] .mk { background: var(--ink); color: var(--bg); }

/* 6. the profile numbers on "Me": one quiet tone instead of four colours; a Plus lock is ink, a Gold lock stays gold */
.ms-views, .ms-hearts, .ms-crushes, .ms-matches { --ms-rgb: 205, 205, 214; }
:root[data-theme='light'] .ms-views, :root[data-theme='light'] .ms-hearts, :root[data-theme='light'] .ms-crushes, :root[data-theme='light'] .ms-matches { --ms-rgb: 84, 84, 96; }
.ms::before { display: none; }
.ms-lock.plus { color: var(--on-pri); background: var(--pri); }

/* 7. coloured mist behind cards goes */
.tp-way.gift::before, .tp-way.inv::before, .me-gifts::before, .gh-sum::before, .tk-hero::before { background: none; }
.studio-cta { background: var(--card); box-shadow: var(--card-shadow), inset 0 0 0 1px var(--line); }

/* 8. support: a plain card and one clear button — no gradient, no gloss */
.tk-hero { background: var(--s1); }
.tk-cta { color: var(--on-pri); background: var(--pri); box-shadow: none; }
.tk-cta::after { display: none; }
.tk-cta-ic { width: 26px; height: 26px; border-radius: 0; background: none; box-shadow: none; }
.tk-cta:active { transform: scale(.98); filter: none; opacity: .88; }
.tk-status { color: var(--ink-2); font-weight: 600; }
.tk-status::before { box-shadow: none; }
.tk-entry, .tk-entry.hot { background: var(--s1); box-shadow: inset 0 0 0 1px var(--line); }
:root[data-theme='light'] .tk-entry, :root[data-theme='light'] .tk-entry.hot { box-shadow: inset 0 0 0 1px var(--line); }
.tk-entry.hot { box-shadow: inset 0 0 0 1.5px var(--line-2); }
.tk-entry-t b .vf-ico { color: var(--ink-2); }

/* 9. the welcome button: glass without a rainbow tint (its gloss is gone at the source) */
.wl-start .lg-tint { display: none; }

/* 10. the USDT button is an ordinary primary button */
.btn.usdtb { color: var(--on-pri); background: var(--pri); box-shadow: none; }
/* ---------- v8.18: one start page, two faces ----------
   In a browser studating.xyz is the public site (written in by the server); inside Telegram the app starts. guard.js marks
   <html> with is-app or is-site; with scripts off there is no mark and the site shows. */
html:not(.is-app) #app { display: none; }
html.is-site #site { display: block; }
html.is-app #site { display: none; }
html:not(.is-app), html:not(.is-app) body { height: auto; overflow: auto; overscroll-behavior: auto; background: #f5f5f7; }
@media (prefers-color-scheme: dark) { html:not(.is-app), html:not(.is-app) body { background: #0b0b0d; } }
/* ---------- v8.19: paying by SBP or a Russian card through ЮKassa; star packs ----------
   The SBP mark is the only colour on these rows: it is how people recognise the method. Everything else stays quiet. */

/* the SBP mark on a white tile (the mark is drawn for a light ground; on the dark theme the tile stays white, like a card logo) */
.sbp-tile { display: grid; place-items: center; background: #fff; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08); }
.sbp-tile .sbp-mark { width: 19px; height: 23px; display: block; }
.opt-ic.sbp-tile { width: 38px; height: 38px; border-radius: 13px; }
.opt.pc-card .t { line-height: 1.25; }

/* waiting for the payment: the tick appears calmly (no overshoot) */
.sbw.paid .sbw-ic { animation: sbw-in .32s var(--settle) both; }
@keyframes sbw-in { from { opacity: 0; transform: scale(.82); } }

/* the wallet: one clear "Top up" under the balance, the two quieter actions below it */
.wt-topup { margin-top: 14px; max-width: 320px; }
.wt-topup .ico { width: 18px; height: 18px; }
.wt-topup + .wl-acts { margin-top: 10px; }
.wt-so { max-width: 300px; margin: 4px auto 0; }
.tp-sheet .sheet-sub { margin-bottom: 4px; }
.tp-packs { margin-top: 12px; }
.opt-ic.tp-ic { color: var(--gold); background: var(--gold-bg); }
.tp-packs .opt .t { font-weight: 750; font-variant-numeric: tabular-nums; }
.tp-how { display: flex; align-items: center; gap: 10px; margin-top: 14px; }
.tp-how .sbp-tile { width: 30px; height: 30px; border-radius: 10px; flex: none; }
.tp-how .sbp-tile .sbp-mark { width: 13px; height: 16px; }
.tp-note { margin-top: 10px; }

/* admin: the ЮKassa card */
.ykc { display: grid; gap: 12px; }
.ykc-h { display: flex; align-items: center; gap: 12px; }
.ykc-h .sbp-tile { width: 40px; height: 40px; border-radius: 13px; flex: none; }
.ykc-t { display: grid; gap: 2px; min-width: 0; flex: 1; }
.ykc-t .xs { overflow-wrap: anywhere; }
.ykc-h .status-pill { flex: none; }
.ykc-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.ykc-row.col { display: grid; justify-content: stretch; gap: 6px; }
.ykc-mode { display: flex; gap: 6px; flex-wrap: wrap; }
.ykc-url { display: flex; align-items: center; gap: 8px; min-width: 0; }
.ykc-url code { flex: 1; min-width: 0; padding: 8px 10px; border-radius: 10px; background: var(--chip); font-size: .75rem; overflow-wrap: anywhere; user-select: all; }
.ykc-steps { margin: 0; padding-left: 18px; display: grid; gap: 4px; color: var(--ink-2); }
.ykc-key { display: flex; gap: 8px; }
.ykc-key .input { flex: 1; min-width: 0; }
.ykc-err { color: var(--danger); margin: 0; }
.ykc .btns { margin-top: 0; }

/* narrow phones: the payment rows give the words more room (the whole row is the button, the arrow is not needed) */
@media (max-width: 360px) {
  .paychoice .opt, .tp-sheet .opt { gap: 10px; padding: 12px 12px 12px 12px; }
  .paychoice .opt .chev, .tp-sheet .opt .chev { display: none; }
  .paychoice .opt .t { font-size: .9375rem; }
}

/* v8.20: giving a gift from the collection */
.gh-acts:has(> :nth-child(5):last-child) { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.gv-mine { margin-bottom: 14px; }
.give-sheet .chips .chip { pointer-events: none; }
/* ---------- v8.20: no coloured haze at the top; the admin panel with dashboards; the pre-launch countdown ---------- */

/* 1. the dim multicoloured glow at the top of every screen is gone (both themes): a plain, clean background */
:root, :root[data-theme='light'] { --fx: none; --amb: none; }
#app::before, #app::after, .page::before, .splash::before, .aurora-bg { background: none; display: none; }

/* 2. the admin panel: sections, sub-pages; on a computer the whole window */
@media (min-width: 900px) { html.admin-open #app, .page.admin-page { max-width: min(1320px, 100%); } html.admin-open .sheet { max-width: 640px; } }
.adm-nav { position: relative; z-index: 2; padding: 6px 0 0; background: var(--bg); box-shadow: inset 0 -1px 0 var(--line); }
.adm-groups { display: flex; gap: 6px; overflow-x: auto; padding: 4px 14px 8px; scrollbar-width: none; scroll-padding: 14px; }
.adm-groups::-webkit-scrollbar { display: none; }
.adm-groups button { position: relative; flex: none; display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 13px; border-radius: 12px; color: var(--ink-2); font-size: .8125rem; font-weight: 600; background: var(--chip); transition: background-color .2s var(--ease-out), color .2s var(--ease-out); }
.adm-groups button .ico { width: 17px; height: 17px; }
.adm-groups button[aria-selected='true'] { color: var(--bg); background: var(--ink); }
.adm-groups button:active { opacity: .7; }
.adm-groups .badge, .adm-subs .badge { position: static; margin-left: 2px; min-width: 18px; height: 18px; font-size: .6875rem; box-shadow: none; }
.adm-subs { display: flex; gap: 2px; overflow-x: auto; padding: 0 10px; scrollbar-width: none; }
.adm-subs::-webkit-scrollbar { display: none; }
.adm-subs[hidden] { display: none; }
.adm-subs button { position: relative; flex: none; display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 12px; font-size: .8125rem; font-weight: 600; color: var(--ink-3); }
.adm-subs button[aria-selected='true'] { color: var(--ink); box-shadow: inset 0 -2px 0 var(--ink); }
.adm-box { padding-top: 12px; }
@media (min-width: 900px) {
  .admin-page { display: grid; grid-template-columns: 232px minmax(0, 1fr); grid-template-rows: auto 1fr; }
  .admin-page > .page-head { grid-column: 1 / -1; }
  .admin-page > .adm-nav { grid-column: 1; grid-row: 2; overflow-y: auto; padding: 8px 10px 20px; box-shadow: inset -1px 0 0 var(--line); }
  .admin-page > .page-body { grid-column: 2; grid-row: 2; padding-left: 24px; padding-right: 24px; }
  .admin-page > .page-foot { display: none; }
  .adm-groups { flex-direction: column; overflow: visible; padding: 0; gap: 2px; }
  .adm-groups button { height: 40px; width: 100%; justify-content: flex-start; background: none; border-radius: 10px; }
  .adm-groups button[aria-selected='true'] { color: var(--ink); background: var(--chip-2); }
  .adm-groups .badge { margin-left: auto; }
  .adm-subs { flex-direction: column; overflow: visible; padding: 10px 0 0 12px; margin-top: 10px; box-shadow: inset 0 1px 0 var(--line); gap: 0; }
  .adm-subs button { height: 34px; width: 100%; justify-content: flex-start; border-radius: 8px; }
  .adm-subs button[aria-selected='true'] { box-shadow: none; background: var(--chip); }
}

/* 3. charts: validated series colours (dark steps by default, light steps on the light theme), quiet chrome */
.admin-page { --vz1: #3987e5; --vz2: #d95926; --vz3: #199e70; --vz4: #c98500; --vz-gl: rgba(255, 255, 255, .07); --vz-axis: rgba(255, 255, 255, .18); --vz-good: #0ca30c; --vz-bad: #e66767; }
:root[data-theme='light'] .admin-page { --vz1: #2a78d6; --vz2: #eb6834; --vz3: #1baf7a; --vz4: #eda100; --vz-gl: rgba(0, 0, 0, .07); --vz-axis: rgba(0, 0, 0, .2); --vz-good: #006300; --vz-bad: #d03b3b; }
.c1 { --c: var(--vz1); } .c2 { --c: var(--vz2); } .c3 { --c: var(--vz3); } .c4 { --c: var(--vz4); }
.vz-period { margin: 0 0 12px; }
.vz-todo { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.vz-todo-i { display: inline-flex; align-items: baseline; gap: 6px; padding: 9px 12px; border-radius: 12px; background: var(--danger-bg, rgba(229, 69, 58, .12)); color: var(--ink); font-size: .8125rem; }
.vz-todo-i b { font-size: 1rem; color: var(--danger); }
.vz-calm { margin: 0 0 12px; font-size: .8125rem; color: var(--ink-2); }
.vz-kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: 12px; }
@media (min-width: 620px) { .vz-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.vz-kpi { display: grid; align-content: start; gap: 2px; min-width: 0; padding: 12px 12px 8px; border-radius: 16px; background: var(--s1); box-shadow: inset 0 0 0 1px var(--line); }
.vz-kl { font-size: .75rem; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vz-kv { font-size: 1.3rem; font-weight: 750; letter-spacing: -.02em; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vz-delta { font-size: .72rem; font-weight: 650; color: var(--ink-3); }
.vz-delta.good { color: var(--vz-good); } .vz-delta.bad { color: var(--vz-bad); }
.vz-spark { display: block; width: 100%; height: 28px; margin-top: 4px; }
.vz-sl { fill: none; stroke: var(--c); stroke-width: 2; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.vz-grid { display: grid; gap: 10px; }
@media (min-width: 900px) { .vz-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .vz-card.wide { grid-column: 1 / -1; } }
.vz-card { position: relative; min-width: 0; padding: 14px 14px 10px; border-radius: 18px; background: var(--s1); box-shadow: inset 0 0 0 1px var(--line); }
.vz-h { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.vz-h h3 { margin: 0; font-size: .9375rem; font-weight: 700; }
.vz-note { display: block; margin-top: 2px; font-size: .75rem; color: var(--ink-3); }
.vz-v { font-size: 1rem; white-space: nowrap; font-variant-numeric: tabular-nums; }
.vz-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 8px 0 0; font-size: .75rem; color: var(--ink-2); }
.vz-legend[hidden] { display: none; }
.sw { display: inline-block; width: 10px; height: 10px; margin-right: 6px; border-radius: 3px; background: var(--c); vertical-align: -1px; flex: none; }
.vz-body { position: relative; min-height: 40px; margin-top: 8px; }
.vz-svg { display: block; width: 100%; height: auto; overflow: visible; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.vz-gl { stroke: var(--vz-gl); stroke-width: 1; }
.vz-base { stroke: var(--vz-axis); stroke-width: 1; }
.vz-ax { fill: var(--ink-3); font-size: 10px; font-variant-numeric: tabular-nums; }
.vz-line { fill: none; stroke: var(--c); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.vz-area { fill: var(--c); opacity: .1; }
.vz-dot, .vz-hdot { fill: var(--c); stroke: var(--s1); stroke-width: 2; }
.vz-cross { stroke: var(--ink-3); stroke-width: 1; stroke-dasharray: 3 3; }
.vz-bar { fill: var(--c); }
.vz-col { fill: var(--ink); opacity: .05; }
.vz-hit { fill: transparent; cursor: crosshair; }
.vz-tip { position: absolute; top: -4px; z-index: 3; display: grid; gap: 3px; min-width: 140px; max-width: 240px; padding: 8px 10px; border-radius: 10px; pointer-events: none; font-size: .75rem; color: var(--ink); background: var(--s2); box-shadow: 0 10px 28px rgba(0, 0, 0, .28), inset 0 0 0 1px var(--line); }
.vz-tip[hidden] { display: none; }
.vz-tip span { display: flex; align-items: center; gap: 6px; color: var(--ink-2); }
.vz-tip em { margin-left: auto; padding-left: 10px; font-style: normal; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.vz-tbl { display: block; margin: 6px 0 0 auto; padding: 4px 8px; border-radius: 8px; font-size: .72rem; font-weight: 600; color: var(--ink-3); }
.vz-tbl[aria-pressed='true'] { color: var(--ink); background: var(--chip); }
.vz-table-wrap { max-height: 300px; overflow: auto; }
.vz-table { width: 100%; border-collapse: collapse; font-size: .78rem; font-variant-numeric: tabular-nums; }
.vz-table th, .vz-table td { padding: 6px 8px; text-align: right; border-bottom: 1px solid var(--line); white-space: nowrap; }
.vz-table th:first-child, .vz-table td:first-child { text-align: left; color: var(--ink-2); }
.vz-empty { margin: 8px 0; font-size: .8125rem; color: var(--ink-3); }
.vz-hbars { display: grid; gap: 8px; }
.vz-hrow { display: grid; grid-template-columns: minmax(84px, 36%) minmax(0, 1fr) auto; align-items: center; gap: 10px; font-size: .8rem; }
.vz-hl { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--ink-2); }
.vz-htrack { display: block; height: 8px; border-radius: 4px; background: var(--chip); overflow: hidden; }
.vz-hfill { display: block; height: 100%; border-radius: 4px; background: var(--c); }
.vz-hv { font-variant-numeric: tabular-nums; white-space: nowrap; }
.vz-hv em, .vz-ft em { margin-left: 6px; font-style: normal; font-weight: 500; color: var(--ink-3); }
.vz-split { display: flex; gap: 2px; height: 14px; margin-top: 4px; border-radius: 7px; overflow: hidden; }
.vz-split i { background: var(--c); }
.vz-split-l { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 8px; font-size: .8rem; color: var(--ink-2); }
.vz-split-l b { color: var(--ink); }
.vz-funnel { display: grid; gap: 10px; }
.vz-fs { display: grid; gap: 4px; }
.vz-ft { display: flex; justify-content: space-between; gap: 10px; font-size: .8rem; color: var(--ink-2); }
.vz-ft b { color: var(--ink); white-space: nowrap; font-variant-numeric: tabular-nums; }
.vz-heat { display: grid; grid-template-columns: 22px repeat(24, minmax(0, 1fr)); gap: 2px; font-size: 9px; color: var(--ink-3); }
.vz-heat i { position: relative; aspect-ratio: 1; border-radius: 3px; background: var(--chip); }
.vz-heat i::after { content: ''; position: absolute; inset: 0; border-radius: 3px; background: var(--vz1); opacity: var(--a); }
.vz-hh { text-align: center; } .vz-hd { align-self: center; }
.vz-heat-l { display: flex; align-items: center; gap: 8px; margin-top: 8px; font-size: .72rem; color: var(--ink-3); }
.vz-heat-l i { width: 60px; height: 8px; border-radius: 4px; background: linear-gradient(90deg, var(--chip), var(--vz1)); }
.vz-foot { margin: 14px 2px 0; font-size: .75rem; color: var(--ink-3); }
.fin-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 8px; margin-top: 12px; }
.fin-i { display: grid; gap: 2px; padding: 12px; border-radius: 14px; background: var(--chip); }
.fin-i span { font-size: .75rem; color: var(--ink-2); }
.fin-i b { font-size: 1.15rem; font-weight: 750; }
.fin-i em { font-style: normal; font-size: .72rem; color: var(--ink-3); }
.fin-note { margin: 12px 2px 4px; font-size: .78rem; line-height: 1.5; color: var(--ink-2); }
.lp-form { display: grid; gap: 10px; margin-top: 12px; }

/* 4. the pre-launch countdown */
.prelaunch { position: absolute; inset: 0; z-index: 60; display: flex; flex-direction: column; overflow: hidden; max-width: 540px; margin: 0 auto; box-shadow: 0 0 0 100vmax rgba(0, 0, 0, .72); color: var(--ink); background: var(--bg); opacity: 0; transition: opacity .45s var(--ease-out); }
.prelaunch.on { opacity: 1; }
.pl-scene { position: absolute; inset: 0; }
.pl-scene > svg { display: block; width: 100%; height: 100%; }
.pl-shade { position: absolute; inset: 0; background: linear-gradient(to bottom, var(--bg) 22%, transparent 70%); pointer-events: none; }
.pl-float { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.pl-h { position: absolute; bottom: 12%; left: var(--x); width: 18px; height: 18px; color: #ff3d7f; opacity: 0; animation: pl-rise 10s linear var(--d) infinite; will-change: transform, opacity; }
.pl-h .ico { width: 100%; height: 100%; }
@keyframes pl-rise { 0% { transform: translate3d(0, 0, 0) scale(var(--s)); opacity: 0; } 12% { opacity: .6; } 70% { opacity: .35; } 100% { transform: translate3d(16px, -62vh, 0) scale(var(--s)); opacity: 0; } }
.pl-top { position: relative; display: flex; justify-content: space-between; align-items: center; padding: calc(var(--safe-t) + 14px) max(18px, calc(var(--safe-r) + 10px)) 0 max(18px, calc(var(--safe-l) + 10px)); }
.pl-pill { display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 12px; border-radius: 999px; font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; background: var(--chip-2); }
.pl-live { width: 7px; height: 7px; border-radius: 50%; background: #ff3d7f; animation: pl-blink 1.8s ease-in-out infinite; }
@keyframes pl-blink { 50% { opacity: .25; } }
.pl-main { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; gap: 10px; overflow-y: auto; padding: 5vh 20px calc(var(--safe-b) + 16px); text-align: center; scrollbar-width: none; }
.pl-title { margin: 0; font: 800 clamp(1.75rem, 7.6vw, 2.5rem)/1.05 var(--font); letter-spacing: -.035em; }
.pl-count { display: flex; align-items: flex-start; gap: 4px; margin-top: 4px; }
.pl-unit { display: grid; justify-items: center; gap: 6px; }
.pl-num { display: flex; gap: 3px; }
.pl-dg { position: relative; display: block; width: .74em; height: 1.12em; overflow: hidden; font: 800 clamp(2.1rem, 10.5vw, 3.3rem)/1 var(--font); font-variant-numeric: tabular-nums; border-radius: 12px; background: var(--s1); box-shadow: inset 0 0 0 1px var(--line), 0 10px 30px -18px rgba(0, 0, 0, .5); }
.pl-dg::after { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--line); }
.pl-strip { display: flex; flex-direction: column; transition: transform .6s cubic-bezier(.23, 1, .32, 1); will-change: transform; }
.pl-strip i { display: grid; place-items: center; height: 1.12em; font-style: normal; flex: none; }
.pl-sep { margin-top: .5em; font: 800 1.6rem/1 var(--font); font-style: normal; color: var(--ink-3); }
.pl-ul { font-size: .6875rem; color: var(--ink-2); }
.pl-date { margin: 0; font-size: .8125rem; color: var(--ink-2); }
.pl-soon { font: 800 clamp(2rem, 9vw, 2.8rem)/1.05 var(--font); letter-spacing: -.03em; }
.pl-text { max-width: 330px; margin: 2px 0 0; font-size: .9rem; line-height: 1.45; color: var(--ink-2); }
.pl-stats { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.pl-stat { display: grid; min-width: 96px; padding: 8px 14px; border-radius: 14px; background: var(--chip-2); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
.pl-stat[hidden] { display: none; }
.pl-stat b { font-size: 1.15rem; font-variant-numeric: tabular-nums; }
.pl-stat em { font-style: normal; font-size: .6875rem; color: var(--ink-2); }
.pl-acts { position: relative; display: grid; gap: 8px; width: 100%; max-width: 420px; margin: auto auto 0; padding-top: 16px; }
.prelaunch.launched .pl-count { opacity: .35; }
@media (max-height: 640px) { .pl-main { padding-top: 2vh; gap: 8px; } .pl-text { display: none; } }
:root.lite .pl-float, :root.lite .pl-live { display: none; }
@media (prefers-reduced-motion: reduce) { .pl-float { display: none; } .pl-strip { transition: none; } .pl-live { animation: none; } }
/* defaults for the values set per element (heat cell strength, heart position / delay / size) */
.vz-heat i { --a: 0; }
.pl-h { --x: 50%; --d: 0s; --s: 1; }
.vz-key { display: inline-flex; align-items: center; }
.vz-card.fin { padding-bottom: 14px; }
.fin-i.main b { font-size: 1.35rem; }

/* 5. choosing the language: "hello" in six languages, six big cards, one button */
.lang-pick { position: absolute; inset: 0; display: flex; flex-direction: column; overflow-y: auto; padding: calc(var(--safe-t) + 26px) max(20px, calc(var(--safe-r) + 12px)) calc(var(--safe-b) + 18px) max(20px, calc(var(--safe-l) + 12px)); color: var(--ink); background: var(--bg); opacity: 0; transition: opacity .35s var(--ease-out); }
.lang-pick.on { opacity: 1; }
.lp-hello { height: 1.15em; overflow: hidden; font: 800 clamp(2.6rem, 13vw, 3.6rem)/1.1 var(--font); letter-spacing: -.04em; }
.lp-word { display: inline-block; transition: transform .26s var(--ease-out), opacity .26s var(--ease-out); }
.lp-word.out { transform: translateY(-45%); opacity: 0; }
.lp-title { margin: 16px 0 4px; font: 750 1.45rem/1.15 var(--font); letter-spacing: -.02em; }
.lp-sub { margin: 0 0 18px; font-size: .9rem; color: var(--ink-2); }
.lp-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.lp-card { position: relative; display: grid; align-content: space-between; gap: 10px; min-height: 104px; padding: 14px; border-radius: 22px; text-align: start; color: var(--ink); background: var(--s1); box-shadow: inset 0 0 0 1px var(--line); transition: transform .45s var(--settle), background-color .2s var(--ease-out), color .2s var(--ease-out), box-shadow .2s var(--ease-out); animation: lp-in .5s var(--settle) both; animation-delay: calc(var(--i, 0) * 50ms + 100ms); }
.lp-card b { font-size: 1.25rem; font-weight: 750; letter-spacing: -.01em; }
.lp-code { font-size: .6875rem; font-weight: 750; letter-spacing: .08em; color: var(--ink-3); }
.lp-en { font-size: .75rem; color: var(--ink-3); }
.lp-check { position: absolute; top: 12px; inset-inline-end: 12px; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; color: var(--ink); background: var(--bg); opacity: 0; transform: scale(.6); transition: opacity .2s var(--ease-out), transform .3s var(--settle); }
.lp-check .ico { width: 15px; height: 15px; stroke-width: 2.6; }
.lp-card[aria-pressed='true'] { color: var(--bg); background: var(--ink); box-shadow: none; }
.lp-card[aria-pressed='true'] .lp-code, .lp-card[aria-pressed='true'] .lp-en { color: inherit; opacity: .65; }
.lp-card[aria-pressed='true'] .lp-check { opacity: 1; transform: none; }
.lp-card:active { transform: scale(.97); transition-duration: .1s; }
@keyframes lp-in { from { opacity: 0; transform: translateY(14px); } }
.lp-foot { margin-top: auto; padding-top: 18px; }
.lp-grid.sheet { margin-top: 12px; }
.lp-grid.sheet .lp-card { min-height: 84px; animation: none; }
.lp-card { --i: 0; }
@media (prefers-reduced-motion: reduce) { .lp-card { animation: none; } .lp-word { transition: none; } }
/* the language button on the welcome scene (instead of the RU / EN switch) */
.wl-lang { position: relative; display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px; border-radius: 999px; color: var(--wl-ink); font-size: .78rem; font-weight: 750; letter-spacing: .04em; overflow: hidden; background: var(--wl-glass); -webkit-backdrop-filter: blur(18px) saturate(1.8); backdrop-filter: blur(18px) saturate(1.8); box-shadow: inset 0 0 0 .6px rgba(255, 255, 255, .35), 0 8px 22px -12px rgba(10, 20, 50, .45); }
.wl-lang .ico { width: 17px; height: 17px; }
/* Arabic reads right to left: arrows turn, the rest follows the text direction */
html.rtl [data-page-back] .ico, html.rtl .chev .ico, html.rtl .lg-arrow .ico { transform: scaleX(-1); }
html.rtl .page-body, html.rtl .sheet { text-align: start; }