/* date4you — гостевая страница, v4.
   Романтический минимализм: крем, роза, мягкие тени — визуально, а не текстом. */

@font-face {
  font-family: "Cormorant Garamond";
  src: url("/static/fonts/cormorant-garamond-cyrillic-600-normal.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
  unicode-range: U+0400-04FF;
}
@font-face {
  font-family: "Cormorant Garamond";
  src: url("/static/fonts/cormorant-garamond-latin-600-normal.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF;
}

:root {
  --bg: #faf5f2;
  --card: #fffdfb;
  --ink: #43373a;
  /* Secondary/accent copy clears WCAG AA on the light romantic surfaces. */
  --muted: #716166;
  --rose: #a34c60;
  --rose-2: #8f4a58;
  --rose-soft: #f7e9e7;
  --peach: #e2b08a;
  --line: #f0e4e1;
  --shadow: 0 10px 30px rgba(120, 70, 80, .10);
  --shadow-soft: 0 4px 16px rgba(120, 70, 80, .07);
  --ease: cubic-bezier(.22, .8, .3, 1);
  --ease-press: cubic-bezier(.2, .8, .2, 1);
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  /* Spatial contract: skins share one metric-compatible type system. Romantic
     character comes from colour and artwork, never from a reflowing font. */
  --serif: var(--sans);
  /* Material hierarchy: only chrome and sheets sample the scene behind them.
     Cards and controls stay calm and legible, so materials never stack blur. */
  --material-chrome: color-mix(in srgb, var(--card) 76%, transparent);
  --material-sheet: color-mix(in srgb, var(--card) 92%, transparent);
  --material-card: color-mix(in srgb, var(--card) 94%, var(--bg));
  --material-control: color-mix(in srgb, var(--card) 88%, var(--rose-soft));
  --material-solid: var(--card);
  --material-border: color-mix(in srgb, var(--line) 76%, var(--ink) 8%);
  --material-blur-chrome: blur(18px) saturate(1.35);
  --material-blur-sheet: blur(24px) saturate(1.25);
  --shadow-card: 0 12px 34px color-mix(in srgb, var(--ink) 10%, transparent);
  --shadow-sheet: 0 28px 80px color-mix(in srgb, var(--ink) 28%, transparent);

  --type-body: clamp(.9375rem, .91rem + .12vw, 1rem);
  --type-title: clamp(2.25rem, 1.85rem + 2vw, 3.125rem);
  --leading-body: 1.55;
  --tracking-display: -.022em;
  --choice-selected-bg: #8f4a58;
  --choice-selected-fg: #ffffff;
  --choice-pay-bg: #15734a;
  --choice-pay-fg: #ffffff;
}

* { box-sizing: border-box; }
/* Убираем системную синюю вспышку WebKit у ссылок, кнопок и раскрывающихся
   элементов; видимый клавиатурный focus оформляется отдельными правилами. */
a, button, summary, label, [role="button"] { -webkit-tap-highlight-color: transparent; }
/* overflow-x: clip — предохранитель от горизонтального «шатания» на телефоне
   (декоративные фиксированные слои с отрицательными inset, широкие пятна фона).
   clip не создаёт scroll-контейнер и не ломает scrollbar-gutter. */
html { scroll-behavior: smooth; scrollbar-gutter: stable; overflow-x: clip; }
/* атрибут hidden должен побеждать любые авторские display-правила (.greet,
   .author, .seal и т.п. задают display и иначе перекрывают hidden) */
[hidden] { display: none !important; }

body {
  margin: 0;
  color: var(--ink);
  font: var(--type-body)/var(--leading-body) var(--sans);
  font-optical-sizing: auto;
  text-rendering: optimizeLegibility;
  /* мягкий перелив роза → персик → сирень — наша палитра, без кислотности */
  background: linear-gradient(180deg, #fdf2f0 0%, #f9e6ea 45%, #f1e4f1 100%);
  background-attachment: fixed;
  min-height: 100dvh;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}

/* живой фон: два слоя больших мягких пятен медленно дрейфуют */
body::before, body::after {
  content: "";
  position: fixed;
  inset: -22%;
  z-index: 0;
  pointer-events: none;
}
body::before {
  background:
    radial-gradient(42% 36% at 18% 16%, rgba(238, 156, 172, .32), transparent 70%),
    radial-gradient(46% 40% at 86% 24%, rgba(244, 198, 170, .30), transparent 70%),
    radial-gradient(50% 44% at 64% 88%, rgba(206, 170, 222, .26), transparent 72%);
  animation: drift-a 26s ease-in-out infinite alternate;
}
body::after {
  background:
    radial-gradient(38% 34% at 78% 70%, rgba(238, 156, 172, .20), transparent 70%),
    radial-gradient(34% 30% at 8% 78%, rgba(214, 178, 226, .18), transparent 70%);
  animation: drift-b 32s ease-in-out infinite alternate;
}
@keyframes drift-a {
  from { transform: translate3d(-2.5%, 1.5%, 0) scale(1); }
  to   { transform: translate3d(2.5%, -2%, 0) scale(1.06); }
}
@keyframes drift-b {
  from { transform: translate3d(2%, -1.5%, 0) scale(1.05); }
  to   { transform: translate3d(-2%, 2%, 0) scale(1); }
}
::selection { background: var(--rose); color: #fff; }

/* --- плавающие сердечки на фоне ----------------------------------------- */
.bg-hearts { position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: 0; }
.bg-hearts span { position: absolute; bottom: -8%; color: var(--rose); opacity: 0; animation: rise linear infinite; }
.bg-hearts span:nth-child(1) { left: 8%;  font-size: 18px; animation-duration: 26s; }
.bg-hearts span:nth-child(2) { left: 22%; font-size: 12px; animation-duration: 31s; animation-delay: 6s; }
.bg-hearts span:nth-child(3) { left: 38%; font-size: 22px; animation-duration: 24s; animation-delay: 12s; }
.bg-hearts span:nth-child(4) { left: 55%; font-size: 14px; animation-duration: 34s; animation-delay: 3s; }
.bg-hearts span:nth-child(5) { left: 70%; font-size: 19px; animation-duration: 27s; animation-delay: 15s; }
.bg-hearts span:nth-child(6) { left: 84%; font-size: 13px; animation-duration: 30s; animation-delay: 9s; }
.bg-hearts span:nth-child(7) { left: 93%; font-size: 16px; animation-duration: 25s; animation-delay: 19s; }
@keyframes rise {
  0%   { transform: translateY(0) rotate(0deg) scale(.9); opacity: 0; }
  8%   { opacity: .10; }
  60%  { opacity: .07; }
  100% { transform: translateY(-110vh) rotate(28deg) scale(1.12); opacity: 0; }
}

/* дым: клубящиеся розовые облака, которые медленно вращаются и плывут.
   Каждый клуб — несколько смещённых радиальных пятен в нашей палитре,
   так получается рваный, неоднородный край, как у настоящего дыма. */
/* дым: сплошная рваная дымчатая текстура на весь экран (как на референсе).
   Лежит НАД фоновыми пятнами body::before/after, поэтому реально виден.
   Фактуру даёт SVG feTurbulence (см. .bg-smoke в шаблоне), а цвет —
   полупрозрачные клубы нашей палитры поверх него. */
.bg-smoke {
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 0;                       /* выше body::before/after в порядке отрисовки */
  overflow: hidden;
}
.bg-smoke svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.bg-smoke .turb {
  width: 100%; height: 100%;
  /* вьющиеся струйки дыма поверх розовых клубов: светлые пряди читаются
     как сигаретный дым, но мягко вписаны в палитру */
  opacity: .62;
  mix-blend-mode: multiply;
  animation: smoke-drift 30s ease-in-out infinite alternate;
}
.bg-smoke .plume {
  transform-box: fill-box;
  transform-origin: center;
}
.bg-smoke .plume.p1 { animation: plume-a 24s ease-in-out infinite alternate; }
.bg-smoke .plume.p2 { animation: plume-b 30s ease-in-out infinite alternate; }
.bg-smoke .plume.p3 { animation: plume-c 27s ease-in-out infinite alternate; }
.bg-smoke span {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);              /* мягкая растушёвка цветовой основы */
  will-change: transform;
}
.bg-smoke span:nth-child(2) {
  width: 88vw; height: 88vw; left: -18vw; top: -20vh;
  background:
    radial-gradient(46% 48% at 40% 40%, rgba(231, 120, 145, .55), transparent 66%),
    radial-gradient(36% 34% at 66% 56%, rgba(182, 95, 111, .38), transparent 68%);
  animation: smoke-a 20s ease-in-out infinite alternate;
}
.bg-smoke span:nth-child(3) {
  width: 78vw; height: 78vw; right: -20vw; top: 18vh;
  background:
    radial-gradient(46% 44% at 56% 40%, rgba(226, 176, 138, .40), transparent 66%),
    radial-gradient(34% 38% at 38% 60%, rgba(214, 150, 200, .40), transparent 68%);
  animation: smoke-b 24s ease-in-out infinite alternate;
}
.bg-smoke span:nth-child(4) {
  width: 94vw; height: 94vw; left: 0; bottom: -34vh;
  background:
    radial-gradient(46% 46% at 44% 50%, rgba(206, 170, 222, .44), transparent 66%),
    radial-gradient(34% 34% at 64% 42%, rgba(231, 120, 145, .30), transparent 68%);
  animation: smoke-c 28s ease-in-out infinite alternate;
}
@keyframes smoke-drift {
  0%   { transform: scale(1.05) translate(0, 0); }
  100% { transform: scale(1.12) translate(-2%, -3%); }
}
@keyframes plume-a {
  0%   { transform: translate(0, 0) rotate(-4deg) scale(1); }
  100% { transform: translate(4%, -8%) rotate(6deg) scale(1.1); }
}
@keyframes plume-b {
  0%   { transform: translate(0, 0) rotate(3deg) scale(1.05); }
  100% { transform: translate(-5%, -6%) rotate(-5deg) scale(1.12); }
}
@keyframes plume-c {
  0%   { transform: translate(0, 0) rotate(2deg) scale(1); }
  100% { transform: translate(3%, -7%) rotate(-4deg) scale(1.14); }
}
@keyframes smoke-a {
  0%   { transform: translate(0, 0) rotate(0deg) scale(1); }
  50%  { transform: translate(5vw, 4vh) rotate(60deg) scale(1.12); }
  100% { transform: translate(-3vw, 6vh) rotate(110deg) scale(1.05); }
}
@keyframes smoke-b {
  0%   { transform: translate(0, 0) rotate(0deg) scale(1.05); }
  50%  { transform: translate(-6vw, 5vh) rotate(-70deg) scale(1.14); }
  100% { transform: translate(3vw, -3vh) rotate(-120deg) scale(1); }
}
@keyframes smoke-c {
  0%   { transform: translate(0, 0) rotate(0deg) scale(1.1); }
  50%  { transform: translate(6vw, -6vh) rotate(110deg) scale(1.25); }
  100% { transform: translate(-5vw, -2vh) rotate(200deg) scale(1.08); }
}

/* Мобильный кап фона: SVG-турбулентность (feTurbulence + displacement) дорогая
   на телефонах. Снимаем именно её — розовые градиентные клубы остаются, так что
   тёплый «дымчатый» цвет сохраняется, а тяжёлый фильтр на маленьком экране,
   где тонкие пряди всё равно не разглядеть, отключаем. */
@media (max-width: 560px) {
  .bg-smoke .turb { display: none; }
  .bg-smoke span { filter: blur(54px); }   /* чуть легче растушёвка для GPU */
}

.wrap { position: relative; z-index: 1; max-width: 680px; margin: 0 auto; padding: 28px 16px 110px; }

/* --- шапка --------------------------------------------------------------- */
.hero { text-align: center; margin: 18px 0 32px; animation: fade-down .7s var(--ease) both; }
.hero h1 {
  --display-ink-gradient: linear-gradient(120deg, var(--rose-2), var(--rose) 55%, #cf8a78);
  --display-ink-fallback: var(--rose);
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(36px, 9vw, 50px);
  line-height: 1.1;
  margin: 0;
  background: none;
  -webkit-text-fill-color: currentColor;
  color: var(--display-ink-fallback);
}
:is(.hero h1, .home-card h1) > .display-ink {
  display: inline;
  background: var(--display-ink-gradient);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--display-ink-fallback);
}
.hero .hearts { letter-spacing: 12px; color: var(--rose); opacity: .65; margin-top: 10px; font-size: 13px; }
.hero .hearts span { display: inline-block; animation: beat 2.6s ease-in-out infinite; }
.hero .hearts span:nth-child(2) { animation-delay: .25s; }
.hero .hearts span:nth-child(3) { animation-delay: .5s; }
@keyframes beat { 0%, 100% { transform: scale(1); } 12% { transform: scale(1.22); } 24% { transform: scale(1); } }

/* пилюля с именем гостя — тихая и аккуратная */
.greet {
  display: inline-flex; align-items: center; gap: 9px;
  margin-top: 18px; padding: 5px 7px 5px 5px;
  background: rgba(255, 255, 255, .7);
  border: 1px solid rgba(240, 228, 225, .9);
  border-radius: 999px;
  backdrop-filter: blur(6px);
  box-shadow: var(--shadow-soft);
}
.greet .g-heart {
  width: 27px; height: 27px; border-radius: 50%;
  display: grid; place-items: center;
  background: linear-gradient(135deg, var(--rose), var(--rose-2));
  color: #fff; font-size: 13px;
  box-shadow: 0 3px 8px rgba(150, 70, 85, .35);
}
.greet b { font-size: 14.5px; font-weight: 600; letter-spacing: .01em; }
.greet button {
  border: 0; background: none; padding: 0; cursor: pointer;
  width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center;
  color: #cdb9bd; font-size: 13px;
  transition: background .2s, color .2s;
}
.greet button:hover { background: var(--rose-soft); color: var(--rose-2); }

/* подпись автора категории — кликабельна для всех (ведёт на профиль /u/<id>) */
.author {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 14px; padding: 4px 12px 4px 4px;
  background: rgba(255, 255, 255, .62);
  border: 1px solid rgba(240, 228, 225, .9);
  border-radius: 999px;
  text-decoration: none; color: var(--rose-2);
  box-shadow: var(--shadow-soft);
  transition: background .2s, transform .2s;
}
.author:hover { background: rgba(255, 255, 255, .92); transform: translateY(-1px); }
.author-av {
  width: 28px; height: 28px; border-radius: 50%; object-fit: cover;
  flex: none; display: block;
}
/* плейсхолдер (без фото) — это <span>, его центрируем; на <img> grid не вешаем,
   иначе object-fit:cover не применяется и квадратное фото «плющит» в круг */
.author-av.ph {
  display: grid; place-items: center;
  background: linear-gradient(135deg, var(--rose), var(--rose-2));
  color: #fff; font-size: 13px;
}
.author-name { font-size: 14px; font-weight: 600; letter-spacing: .01em; }

/* правый верхний угол: кластер кнопок «Помощь», «VPN», «Войти» */
.corner-actions {
  position: fixed; top: 14px; right: 14px; z-index: 30;
  display: flex; align-items: center; gap: 8px;
}
/* кнопка «Войти» — компактная капсула */
.login-corner {
  border: 0; cursor: pointer;
  padding: 9px 20px; border-radius: 999px;
  font-family: inherit; font-size: 14.5px; font-weight: 600; letter-spacing: .01em;
  color: #fff; text-decoration: none; white-space: nowrap;
  background: linear-gradient(135deg, var(--rose), var(--rose-2));
  box-shadow: 0 6px 18px rgba(150, 70, 85, .34);
  transition: transform .18s var(--ease), box-shadow .2s;
}
.login-corner:hover { transform: translateY(-1px); box-shadow: 0 9px 24px rgba(150, 70, 85, .42); }
.login-corner:active { transform: scale(.97); }

/* кнопки «Помощь» и «VPN» — иконка + подпись, матовое стекло под общий стиль
   страницы. На мобиле подпись скрыта, остаётся круглая иконка. */
.promo-btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 14px 6px 7px; border-radius: 999px;
  text-decoration: none; color: var(--ink);
  font-size: 13.5px; font-weight: 600; letter-spacing: .01em;
  background: rgba(255, 255, 255, .5);
  border: 1px solid rgba(255, 255, 255, .6);
  -webkit-backdrop-filter: blur(8px) saturate(1.4);
  backdrop-filter: blur(8px) saturate(1.4);
  box-shadow: 0 6px 18px rgba(150, 70, 85, .18), inset 0 1px 0 rgba(255, 255, 255, .7);
  transition: transform .18s var(--ease), box-shadow .2s, background .18s;
}
.promo-btn:hover { transform: translateY(-1px); background: rgba(255, 255, 255, .72); }
.promo-btn:active { transform: scale(.97); }
.promo-ic {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 50%; flex: none;
  background: rgba(34, 158, 217, .14); color: #229ED9;
}
.promo-btn.theme-toggle.icon-only {
  width: 42px; height: 42px; padding: 0; justify-content: center;
}
.promo-btn.theme-toggle .promo-ic {
  width: 24px; height: 24px; background: transparent; color: var(--rose-2);
}
[data-theme-icon] { display: inline-grid; place-items: center; line-height: 1; }
.theme-moon-icon::before {
  content: ""; width: 22px; height: 22px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M20.3 15.4A8.7 8.7 0 0 1 8.6 3.7a8.7 8.7 0 1 0 11.7 11.7Z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M20.3 15.4A8.7 8.7 0 0 1 8.6 3.7a8.7 8.7 0 1 0 11.7 11.7Z'/%3E%3C/svg%3E") center/contain no-repeat;
}
.theme-sun-icon::before {
  content: ""; width: 22px; height: 22px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 7a5 5 0 1 0 0 10 5 5 0 0 0 0-10Zm-1-7h2v4h-2V0Zm0 20h2v4h-2v-4ZM0 11h4v2H0v-2Zm20 0h4v2h-4v-2ZM3.51 4.93l1.42-1.42 2.83 2.83-1.42 1.42-2.83-2.83Zm12.73 12.73 1.42-1.42 2.83 2.83-1.42 1.42-2.83-2.83ZM4.93 20.49l-1.42-1.42 2.83-2.83 1.42 1.42-2.83 2.83ZM17.66 7.76l-1.42-1.42 2.83-2.83 1.42 1.42-2.83 2.83Z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 7a5 5 0 1 0 0 10 5 5 0 0 0 0-10Zm-1-7h2v4h-2V0Zm0 20h2v4h-2v-4ZM0 11h4v2H0v-2Zm20 0h4v2h-4v-2ZM3.51 4.93l1.42-1.42 2.83 2.83-1.42 1.42-2.83-2.83Zm12.73 12.73 1.42-1.42 2.83 2.83-1.42 1.42-2.83-2.83ZM4.93 20.49l-1.42-1.42 2.83-2.83 1.42 1.42-2.83 2.83ZM17.66 7.76l-1.42-1.42 2.83-2.83 1.42 1.42-2.83 2.83Z'/%3E%3C/svg%3E") center/contain no-repeat;
}
.promo-ic svg { display: block; }
.promo-img {
  width: 28px; height: 28px; border-radius: 50%; object-fit: cover; flex: none; display: block;
}
.theme-float {
  position: fixed; top: 14px; right: 14px; z-index: 30;
  display: grid; place-items: center; width: 42px; height: 42px; padding: 0;
  border: 1px solid rgba(255,255,255,.6); border-radius: 50%;
  background: rgba(255,255,255,.5); color: var(--rose-2); cursor: pointer;
  -webkit-backdrop-filter: blur(8px) saturate(1.4);
  backdrop-filter: blur(8px) saturate(1.4);
  box-shadow: var(--shadow-soft);
}
html[data-theme="dark"] .theme-float {
  background: rgba(39,31,37,.78); border-color: rgba(255,255,255,.12);
}
@media (max-width: 520px) {
  .corner-actions { top: 10px; right: 10px; gap: 6px; }
  .login-corner { padding: 8px 16px; font-size: 13.5px; }
  .promo-btn { padding: 0; width: 38px; height: 38px; justify-content: center; }
  .promo-btn.theme-toggle.icon-only { width: 38px; height: 38px; }
  .promo-btn .promo-lb { display: none; }
  .promo-ic, .promo-img { width: 24px; height: 24px; }
}

/* автор и приветствие — каждый на своей строке, по центру.
   ВАЖНО: display:flex (а не block), иначе аватар-кружок и имя внутри пилюли
   перестают лежать в ряд и аватарка «отваливается» на отдельную строку.
   :not([hidden]) обязателен — иначе display:flex перебивает атрибут hidden и
   приветствие показывается даже когда сервер его скрыл (дубль имени автора). */
.hero > .author:not([hidden]),
.hero > .greet:not([hidden]) {
  display: flex; align-items: center;
  width: fit-content; margin-left: auto; margin-right: auto;
}
.hero > .author { margin-top: 14px; }
.hero > .greet { margin-top: 16px; }

/* ----- вход-модалка (Telegram Login Widget прямо на гостевой) ------------- */
.login-dlg { text-align: center; width: min(420px, calc(100vw - 32px)); }
.login-dlg .dlg-x {
  position: absolute; top: 14px; right: 16px;
  border: 0; background: none; cursor: pointer;
  font-size: 18px; color: #c4a9ad; line-height: 1;
}
.login-dlg .dlg-x:hover { color: var(--rose-2); }
.login-dlg-head { margin-bottom: 14px; }
.login-dlg .ld-heart {
  font-size: 40px; line-height: 1; color: var(--rose);
  filter: drop-shadow(0 4px 10px rgba(182, 95, 111, .3));
  margin-bottom: 6px;
}
.login-dlg .dlg-head { margin: 0 0 4px; }
.login-dlg .consent {
  display: flex; gap: 9px; align-items: flex-start;
  font-size: 12.5px; color: #6b545a; line-height: 1.45;
  margin: 4px 0 14px; text-align: left; cursor: pointer;
}
.login-dlg .consent input { margin-top: 2px; flex: none; }
.login-dlg .consent a { color: var(--rose); }
.login-dlg #tg-widget-wrap { display: none; }
.login-dlg #tg-widget-wrap:not([hidden]) { display: flex; justify-content: center; min-height: 46px; }
.login-dlg #tg-widget-wrap iframe { margin: 0 auto !important; }
.login-dlg .login-hint { color: var(--muted); font-size: 13px; margin: 8px 0 0; }
.login-dlg .err {
  background: #fdeeee; border: 1px solid #f3cfcf; color: #a33;
  padding: 9px 12px; border-radius: 10px; margin-top: 8px; font-size: 13px;
}

/* Вход во вход-модалке: Telegram Login Widget + OAuth-иконки, гасятся до согласия */
.login-dlg .login-methods { position: relative; }
.tg-widget-wrap { display: none; }
.tg-widget-wrap:not([hidden]) {
  display: flex; justify-content: center; min-height: 46px; max-height: 54px;
  margin: 2px 0 4px; opacity: 1; overflow: hidden;
  transition: min-height .28s ease, max-height .28s ease, margin .28s ease, opacity .2s ease;
}
.tg-widget-wrap iframe { margin: 0 auto !important; transition: opacity .18s ease; }
.tg-widget-wrap.tg-checking iframe { opacity: 0; }
.tg-widget-wrap.tg-unavailable {
  min-height: 0 !important; max-height: 0; margin-block: 0 !important;
  opacity: 0; pointer-events: none;
}
.login-dlg { transition: padding .28s ease; }
.login-dlg .oauth-sep {
  display: flex; align-items: center; gap: 12px;
  color: var(--muted); font-size: 12.5px; margin: 14px 0;
}
.login-dlg .oauth-sep::before, .login-dlg .oauth-sep::after {
  content: ""; flex: 1; height: 1px; background: var(--line);
}
.login-dlg .oauth-row { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 4px; }
.oauth-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 60px; height: 52px; border-radius: 14px; text-decoration: none;
  background: rgba(255, 255, 255, .85); border: 1px solid var(--line);
  cursor: pointer; padding: 0;
  transition: transform .15s, box-shadow .2s, border-color .2s; position: relative;
}
.oauth-btn:hover { transform: translateY(-1px); box-shadow: 0 8px 18px rgba(150, 80, 95, .14); }
.oauth-tg:hover      { border-color: #2AABEE; }
.oauth-discord:hover { border-color: #5865f2; }
.oauth-google:hover  { border-color: #ea4335; }
.oauth-yandex:hover  { border-color: #fc3f1d; }
.oauth-ico { display: block; width: 24px; height: 24px; }
span.oauth-ico { display: grid; place-items: center; font-weight: 700; font-size: 18px; color: var(--rose); }
.oauth-btn[aria-busy="true"] { opacity: .6; pointer-events: none; }
.login-methods.gated { opacity: .55; filter: grayscale(.35); }
.login-methods.gated .oauth-btn { cursor: not-allowed; }
.shake { animation: consent-shake .4s ease; }
@keyframes consent-shake {
  0%,100% { transform: translateX(0); }
  20%,60% { transform: translateX(-5px); }
  40%,80% { transform: translateX(5px); }
}
@media (prefers-reduced-motion: reduce) { .shake { animation: none; } }

@keyframes fade-down { from { opacity: 0; transform: translateY(-14px); } to { opacity: 1; transform: none; } }
@keyframes fade-up { from { opacity: 0; transform: translateY(18px) scale(.985); } to { opacity: 1; transform: none; } }

.section-h {
  display: flex; align-items: center; gap: 14px;
  margin: 36px 4px 16px;
  color: var(--rose-2);
  font-family: var(--serif);
  font-size: 23px; font-weight: 600;
}
.section-h::before, .section-h::after {
  content: ""; height: 1px; flex: 1;
  background: linear-gradient(90deg, transparent, var(--rose) 50%, transparent);
  opacity: .35;
}

/* --- карточки ------------------------------------------------------------ */
.cards { display: grid; gap: 22px; }

/* --- архив: свёрнут в выпадающий список ----------------------------------- */
.archive-fold { margin-top: 26px; }
.archive-fold > summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; gap: 10px;
  padding: 13px 18px;
  border-radius: 16px;
  background: rgba(255, 253, 251, .5);
  border: 1px solid rgba(201, 191, 195, .55);
  -webkit-backdrop-filter: blur(8px) saturate(1.3);
  backdrop-filter: blur(8px) saturate(1.3);
  box-shadow: 0 8px 22px rgba(120, 95, 105, .1);
  color: var(--ink);
  font-family: var(--serif);
  transition: background .25s var(--ease);
}
.archive-fold > summary::-webkit-details-marker { display: none; }
.archive-fold > summary:hover { background: rgba(255, 250, 248, .68); }
.af-label { font-size: 20px; font-weight: 600; line-height: 1; }
.af-count { color: var(--muted); font-size: 14px; align-self: center; }
.archive-fold[open] > summary { margin-bottom: 22px; }
.archive-cards { animation: fade-up .5s var(--ease) both; }

.card {
  position: relative;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 22px;
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  animation: fade-up .65s var(--ease) both;
  animation-delay: calc(var(--i, 0) * 70ms);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
@media (hover: hover) {
  .card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
}
/* мой выбор: переливающаяся рамка, тёплый фон, розовое свечение, печать ♥ */
.card.booked-me {
  border: 2px solid transparent;
  background:
    linear-gradient(#fffbfa, #fff6f4) padding-box,
    linear-gradient(120deg, var(--rose), var(--peach), #e8a7b4, var(--rose)) border-box;
  background-size: 100% 100%, 300% 300%;
  animation: border-shine 6s linear infinite;
  box-shadow:
    0 16px 44px rgba(182, 95, 111, .28),
    0 0 0 6px rgba(182, 95, 111, .07);
}
@keyframes border-shine { to { background-position: 0 0, 300% 0; } }
.card.booked-me .gal-count { display: none; }   /* угол занят оверлеем */

/* выбрано кем-то другим: спокойная розовая рамка и мягкая заливка */
.card.booked-other {
  border-color: #ecc9c9;
  background: linear-gradient(#fffdfb, #fdf5f4);
}

/* --- оверлей «Забронировано» поверх фото --------------------------------- */
/* Лежит над галереей, затемняет фото и крупно подписывает выбор.
   Скрыт по умолчанию; появляется на .booked-me / .booked-other. */
.booked-overlay {
  position: absolute; inset: 0; z-index: 4;
  display: grid; place-items: center;
  opacity: 0; visibility: hidden;
  transition: opacity .5s var(--ease);
  background:
    linear-gradient(180deg, rgba(67, 30, 40, .30), rgba(67, 30, 40, .62)),
    radial-gradient(120% 80% at 50% 50%, rgba(143, 74, 88, .25), rgba(40, 20, 28, .55));
  backdrop-filter: saturate(.7) blur(1px);
  -webkit-backdrop-filter: saturate(.7) blur(1px);
}
.booked-overlay.flat {            /* для карточек без фото: красивая «крышка» */
  background: linear-gradient(135deg, var(--rose), var(--rose-2));
  min-height: 96px; position: relative; inset: auto;
}
.bo-inner {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  color: #fff; text-align: center;
  transform: scale(.82); opacity: 0;
  transition: transform .55s var(--ease), opacity .4s var(--ease);
}
.bo-heart {
  font-size: 38px; line-height: 1;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .4));
  animation: bo-beat 1.8s var(--ease) infinite;
}
.bo-text {
  font-family: var(--serif);
  font-size: 27px; font-weight: 600; letter-spacing: .06em;
  text-shadow: 0 2px 14px rgba(0, 0, 0, .5);
}
.bo-who {
  font-size: 13.5px; letter-spacing: .04em;
  color: rgba(255, 255, 255, .92);
  text-shadow: 0 1px 8px rgba(0, 0, 0, .5);
}
.bo-who:empty { display: none; }
@keyframes bo-beat {
  0%, 100% { transform: scale(1); }
  14% { transform: scale(1.18); }
  28% { transform: scale(1); }
  42% { transform: scale(1.1); }
}
/* показываем оверлей и поднимаем содержимое, когда карточка выбрана */
.card.booked-me .booked-overlay,
.card.booked-other .booked-overlay { opacity: 1; visibility: visible; }
.card.booked-me .booked-overlay .bo-inner,
.card.booked-other .booked-overlay .bo-inner { transform: scale(1); opacity: 1; }
/* чужой выбор: подпись мягче, фото не так глухо затемнено */
.card.booked-other .booked-overlay {
  background:
    linear-gradient(180deg, rgba(67, 30, 40, .14), rgba(67, 30, 40, .4)),
    radial-gradient(120% 80% at 50% 50%, rgba(143, 74, 88, .14), rgba(40, 20, 28, .32));
}
.card.booked-other .bo-text { font-size: 22px; }

/* Печать с галочкой на выбранной карточке. Только на карточках с фото/видео:
   ложится в угол галереи, поверх оверлея, далеко от тела карточки. На карточках
   без фото печати нет — там статус показывает .status-chip, а в правом верхнем
   углу .title-row стоит кнопка «пожаловаться», которую печать бы перекрыла. */
.seal {
  position: absolute; top: 12px; right: 12px; z-index: 6;
  width: 46px; height: 46px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 20px; color: #fff;
  background: radial-gradient(circle at 32% 28%, #d4798c, var(--rose) 45%, var(--rose-2));
  border: 2px solid rgba(255, 255, 255, .9);
  box-shadow: 0 8px 18px rgba(150, 70, 85, .4), inset 0 -2px 5px rgba(0, 0, 0, .18);
  transform: rotate(-12deg);
  animation: seal-in .5s var(--ease) both;
}
.seal[hidden] { display: none; }
.seal .ui-icon {
  width: 23px; height: 23px;
  transform: rotate(12deg); /* сама романтическая печать повёрнута на -12deg */
}
@keyframes seal-in {
  from { transform: scale(.2) rotate(30deg); opacity: 0; }
  to   { transform: scale(1) rotate(-12deg); opacity: 1; }
}

/* Подтверждение выбора — один сдержанный, причинно связанный жест. Карточка не
   прыгает: её стеклянный слой лишь проявляет короткий контур, подпись и число
   входят через opacity/transform, а галочка рисуется один раз после успеха. */
.card { --vote-feedback-accent: var(--rose); }
html[data-skin="friends"] .card { --vote-feedback-accent: var(--friends-teal); }
.card.vote-confirmed::after {
  animation: vote-confirm-ring .38s cubic-bezier(.22,.61,.36,1) both;
}
@keyframes vote-confirm-ring {
  from {
    opacity: 1;
    transform: scale(.992);
    box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--vote-feedback-accent) 88%, white);
  }
  to {
    opacity: .8;
    transform: scale(1);
    box-shadow: inset 0 0 0 2px transparent;
  }
}
.vote-button-label { display: inline-block; }
.btn.book.vote-label-confirmed :is(.vote-button-label, .ui-icon) {
  animation: vote-label-confirm .28s cubic-bezier(.22,.61,.36,1) both;
}
@keyframes vote-label-confirm {
  from { opacity: .25; transform: translateY(2px); }
  to { opacity: 1; transform: translateY(0); }
}
.card.vote-confirmed .seal .ui-icon-check path {
  stroke-dasharray: 14;
  animation: vote-check-draw .32s .04s cubic-bezier(.22,.61,.36,1) both;
}
@keyframes vote-check-draw {
  from { stroke-dashoffset: 14; opacity: .35; }
  to { stroke-dashoffset: 0; opacity: 1; }
}

/* карточка без фото получает тонкую градиентную «ленту» сверху */
.accent { height: 5px; background: linear-gradient(90deg, var(--rose), var(--peach), var(--rose)); opacity: .55; }

/* карточка без фото и видео: без заглушки-«крышки», только заголовок и параметры.
   Чуть больше воздуха сверху, тонкая роза-акцент слева у заголовка. */
.card.nophoto .body { padding-top: 20px; }
.card.nophoto .title { margin-top: 0; }

/* компактная плашка статуса для карточек без фото (вместо большого оверлея) */
.status-chip {
  display: inline-flex; align-items: center; gap: 7px;
  margin: 2px 0 10px; padding: 4px 12px;
  border-radius: 999px; font-size: 13px; font-weight: 600;
  background: rgba(143, 74, 88, .1); color: var(--rose-2);
  border: 1px solid rgba(182, 95, 111, .25);
}
.status-chip.mine {
  background: linear-gradient(135deg, var(--rose), var(--rose-2));
  color: #fff; border-color: transparent;
  box-shadow: 0 3px 9px rgba(150, 70, 85, .3);
}
.card.past .status-chip { background: rgba(120, 110, 114, .12); color: #7d7174; border-color: rgba(120, 110, 114, .22); }

/* --- прошедшее: тот же стиль, что у выбранного, но приглушённый --- */
.card.past {
  border: 1.6px solid transparent;
  background:
    linear-gradient(#fbf8f7, #f6f2f1) padding-box,
    linear-gradient(135deg, #c9bfc3, #a99fa4) border-box;
  box-shadow: none;
}
.card.past .booked-overlay {           /* у архива — свой текст «Было ♥» поверх фото */
  opacity: 1; visibility: visible;
  background:
    linear-gradient(180deg, rgba(58, 48, 52, .22), rgba(58, 48, 52, .5)),
    radial-gradient(120% 80% at 50% 50%, rgba(120, 100, 108, .18), rgba(45, 38, 42, .42));
}
.card.past .booked-overlay .bo-inner { transform: scale(1); opacity: 1; }
.card.past .bo-heart { animation: none; }   /* архив — воспоминание, без пульса */
.card.past .bo-text { font-size: 22px; }
.card.past .body { color: #847a7d; }
.card.past .title { color: #7d7174; }
.card.past .gallery { animation: none; background: #efe8e5; }
.card.past .gallery img { filter: saturate(.55) brightness(.98); }   /* приглушено, но не ч/б */
.card.past .when, .card.past .place { color: #a39a9c; }
@media (hover: hover) { .card.past:hover { transform: none; box-shadow: none; } }

/* --- галерея: точки, счётчик, стрелки ------------------------------------ */
.gal-wrap { position: relative; }
.gallery {
  display: flex; overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  background: linear-gradient(110deg, #f3e7e4 25%, #faf1ee 40%, #f3e7e4 55%);
  background-size: 220% 100%;
  animation: shimmer 1.6s linear infinite;
  scrollbar-width: none;
}
@keyframes shimmer { to { background-position: -220% 0; } }
.gallery::-webkit-scrollbar { display: none; }
.gallery img {
  flex: 0 0 100%;
  width: 100%; height: 252px;
  object-fit: cover;
  scroll-snap-align: center;
  cursor: zoom-in;
  display: block;
}

.gal-dots {
  position: absolute; left: 0; right: 0; bottom: 10px;
  display: flex; gap: 6px; justify-content: center;
  z-index: 2; pointer-events: none;
}
.gal-dots i {
  width: 6px; height: 6px; border-radius: 99px;
  background: rgba(255, 253, 251, .55);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .28);
  transition: all .25s var(--ease);
}
.gal-dots i.on { width: 16px; background: #fff; }
.gal-count {
  position: absolute; top: 12px; right: 12px; z-index: 2;
  background: rgba(40, 24, 28, .45); color: #fff;
  font-size: 11.5px; padding: 4px 10px; border-radius: 999px;
  backdrop-filter: blur(4px);
}
.gal-nav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 34px; height: 34px; border-radius: 50%; border: 0;
  background: rgba(255, 253, 251, .88); color: var(--rose-2);
  font-size: 20px; line-height: 1; cursor: pointer;
  box-shadow: 0 4px 12px rgba(60, 30, 38, .2);
  opacity: 0; transition: opacity .25s, transform .2s;
  backdrop-filter: blur(4px);
}
.gal-nav.prev { left: 10px; }
.gal-nav.next { right: 10px; }
.gal-nav:disabled { opacity: 0 !important; pointer-events: none; }
.gal-nav:active { transform: translateY(-50%) scale(.92); }
@media (hover: hover) { .gal-wrap:hover .gal-nav { opacity: 1; } }
@media (hover: none) { .gal-nav { display: none; } }

.body { padding: 18px 20px 20px; }
.title-row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.title-row .title { margin-bottom: 8px; }
.title-row .report-link { margin-top: 0; flex: none; white-space: nowrap; }
.title {
  font-family: var(--serif);
  font-size: 26px; font-weight: 600; margin: 0 0 8px; line-height: 1.18;
}
.meta { display: grid; gap: 6px; margin: 0 0 10px; }
.when, .place { display: flex; gap: 8px; align-items: center; color: var(--muted); font-size: 14.5px; flex-wrap: wrap; }
.meta-icon {
  width: 25px; height: 25px; display: inline-grid; place-items: center; flex: none;
  border-radius: 8px; color: var(--rose-2); background: var(--rose-soft);
}
.meta-icon .ui-icon { width: 15px; height: 15px; }
.place .meta-icon { color: var(--rose); background: #f8e5e3; }
.place a { color: inherit; text-decoration: underline dotted; text-underline-offset: 3px; }
.place a:hover { color: var(--rose-2); }
.cal-link {
  color: var(--rose); font-size: 13px; text-decoration: none;
  border-bottom: 1px dotted var(--rose);
}
.chip-suggest {
  display: inline-flex; align-items: center; gap: 7px;
  border: 1.4px dashed #dcb9b4;
  background: #fffdfc; color: var(--rose-2);
  border-radius: 999px; padding: 7px 14px;
  font-size: 13.5px; cursor: pointer;
  transition: background .2s, border .2s, transform .18s var(--ease);
}
.chip-suggest:hover { background: var(--rose-soft); border-style: solid; transform: translateY(-1px); }
.comment { margin: 10px 0; white-space: pre-line; }
.links { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 2px; }
.links a {
  font-size: 13px; color: var(--rose-2); text-decoration: none;
  background: var(--rose-soft); border: 1px solid #efd9d6;
  padding: 5px 12px; border-radius: 999px;
  transition: transform .2s var(--ease), background .2s;
}
.links a:hover { background: #f3dcd9; transform: translateY(-1px); }

/* --- бейджи: на фото — поверх, без фото — в потоке над заголовком --------- */
.badges { position: absolute; top: 12px; left: 12px; display: flex; gap: 6px; flex-wrap: wrap; z-index: 3; max-width: calc(100% - 24px); }
.badges.inflow { position: static; margin: 0 0 10px; flex-wrap: wrap; max-width: 100%; }
.badge {
  font-size: 11px; letter-spacing: .05em;
  padding: 5px 12px; border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .65);
  backdrop-filter: blur(6px);
  box-shadow: 0 3px 10px rgba(120, 70, 80, .16);
}
.badge.guest { background: linear-gradient(135deg, #fff6ef, #ffe9da); color: #a05c2e; }
.badge.wait  { background: linear-gradient(135deg, #fff8e6, #ffefc4); color: #8a6d2b; }

/* --- бронь: аватарки вместо текста ---------------------------------------- */
.booked {
  display: flex; align-items: center; gap: 10px;
  margin: 13px 0 0;
  animation: fade-up .5s var(--ease) both;
}
.avs { display: flex; }
.av {
  width: 31px; height: 31px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 13px; font-weight: 600; color: var(--rose-2);
  background: linear-gradient(150deg, #fff, var(--rose-soft));
  border: 2px solid #fffdfb;
  box-shadow: 0 3px 8px rgba(120, 70, 80, .2);
  margin-left: -9px;
}
.av:first-child { margin-left: 0; }
.av[hidden] { display: none; }
.av.me {
  background: linear-gradient(135deg, var(--rose), var(--rose-2));
  color: #fff; font-size: 14px;
  animation: beat 2.6s ease-in-out infinite;
}
.booked .who { font-size: 13px; color: var(--muted); }
.booked .who a { color: inherit; font-weight: 700; text-underline-offset: 2px; }
.card.past .av { filter: grayscale(.5); }

/* --- кнопки ---------------------------------------------------------------*/
.actions { display: flex; gap: 10px; margin-top: 15px; flex-wrap: wrap; }
.btn {
  flex: 1; min-width: 110px;
  border: 1px solid var(--line);
  background: #fff; color: var(--ink);
  border-radius: 16px;
  padding: 13px 16px; font-size: 15px;
  cursor: pointer; text-align: center;
  transition: transform .18s var(--ease), box-shadow .25s var(--ease),
              background .25s, color .25s, border-color .25s;
}
.btn:is(.book, .ghost) {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
}
.btn:active { transform: scale(.97); }
@media (hover: hover) {
  .btn:hover { box-shadow: var(--shadow-soft); transform: translateY(-1px); }
}
.btn.book {
  border: 0; color: #fff;
  background: linear-gradient(135deg, var(--rose), var(--rose-2));
  box-shadow: 0 6px 18px rgba(150, 70, 85, .28);
}
.btn.book:hover { box-shadow: 0 8px 22px rgba(150, 70, 85, .36); }
.btn.book.on {
  background: linear-gradient(135deg, var(--rose-2), #6f3742);
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, .18);
}
.btn.ghost { background: transparent; color: var(--rose-2); border-color: #e8cfcb; }
.btn.ghost:hover { background: var(--rose-soft); }

.mine-actions { display: flex; gap: 14px; margin-top: 11px; }
.mine-actions button {
  border: 0; background: none; padding: 0; cursor: pointer;
  font-size: 13px; color: var(--muted);
  text-decoration: underline dotted; text-underline-offset: 3px;
}
.mine-actions button:hover { color: var(--rose-2); }
.report-link {
  margin-top: 9px; border: 0; background: none; padding: 0; cursor: pointer;
  font-size: 12px; color: var(--muted); opacity: .7;
  text-decoration: underline dotted; text-underline-offset: 3px;
}
.report-link:hover { color: var(--rose-2); opacity: 1; }
.note-pending { margin-top: 12px; font-size: 13.5px; color: #8a6d3b; }

/* --- вопросы гостя --------------------------------------------------------*/
.qa { margin-top: 12px; display: grid; gap: 8px; }
.qa-item {
  background: #fbf7f5; border: 1px solid var(--line);
  border-radius: 14px; padding: 10px 13px; font-size: 14px;
}
.qa-q::before { content: "— "; color: var(--muted); }
.qa-a { margin-top: 6px; color: var(--rose-2); }
.qa-a::before { content: "↳ "; color: var(--rose); }
.qa-wait { margin-top: 6px; color: var(--muted); font-size: 13px; font-style: italic; }

/* --- диалоги ----------------------------------------------------------------*/
dialog {
  border: 0; border-radius: 24px;
  background: var(--card);
  box-shadow: 0 26px 70px rgba(90, 45, 55, .26);
  padding: 24px 22px;
  width: min(480px, calc(100vw - 32px));
  max-height: 86vh; overflow: auto;
  color: var(--ink);
}
dialog[open] { animation: dlg-in .42s var(--ease); }
@keyframes dlg-in { from { opacity: 0; transform: translateY(22px) scale(.96); } to { opacity: 1; transform: none; } }
dialog::backdrop { background: rgba(70, 40, 46, .38); backdrop-filter: blur(5px); }
.dlg-head {
  font-family: var(--serif);
  font-size: 25px; font-weight: 600; margin: 0 0 6px; color: var(--rose-2);
  line-height: 1.2;
}
.dlg-sub { color: var(--muted); font-size: 14px; margin: 0 0 16px; line-height: 1.45; text-wrap: balance; }

.field { margin-bottom: 14px; }
.field label { display: block; font-size: 13px; color: var(--muted); margin-bottom: 6px; }
.field input[type="text"], .field input[type="number"], .field input[type="datetime-local"], .field textarea {
  width: 100%;
  border: 1px solid var(--line);
  background: #fffefd;
  border-radius: 14px;
  padding: 12px 14px;
  font: inherit; color: var(--ink);
  transition: border-color .2s, box-shadow .2s, background .3s;
}
/* datetime-local на iOS «распирает» строку и съезжает вправо — нормализуем */
.field input[type="datetime-local"] {
  -webkit-appearance: none; appearance: none;
  text-align: left; min-width: 0; max-width: 100%;
}
.field input:focus, .field textarea:focus {
  outline: none; border-color: var(--rose);
  box-shadow: 0 0 0 4px rgba(182, 95, 111, .14);
}
.field input.flash { background: var(--rose-soft); }
.field textarea { min-height: 86px; resize: vertical; }

/* Единый маркер обязательности: близко к подписи, как показатель степени. */
.required-mark {
  display: inline-block;
  margin-left: .06em;
  color: #d52d48;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: .68em;
  font-weight: 800;
  line-height: 0;
  vertical-align: super;
}
.required-title { min-width: 0; }

details.endtime { margin: -4px 0 14px; }
details.endtime summary {
  cursor: pointer; list-style: none;
  font-size: 13.5px; color: var(--rose); width: fit-content;
  border-bottom: 1px dotted var(--rose);
}
details.endtime summary::-webkit-details-marker { display: none; }
details.endtime[open] summary { margin-bottom: 10px; }

.chips { display: flex; flex-wrap: wrap; gap: 7px; margin: 8px 0 10px; }
.chip {
  border: 1px solid #ecd6d2;
  background: linear-gradient(150deg, #fff, var(--rose-soft));
  color: var(--rose-2);
  border-radius: 999px;
  padding: 7px 13px; font-size: 13px;
  cursor: pointer;
  transition: transform .16s var(--ease), box-shadow .2s, background .2s;
}
.chip:hover { transform: translateY(-1px); box-shadow: var(--shadow-soft); }
.chip:active { transform: scale(.94); }

.dropzone {
  border: 1.6px dashed #e3c6c1;
  border-radius: 18px;
  background:
    radial-gradient(420px 130px at 50% -40px, rgba(214, 150, 150, .10), transparent),
    #fffcfb;
  padding: 16px; text-align: center; cursor: pointer;
  transition: border-color .25s, background .25s, transform .2s var(--ease);
}
.dropzone:hover { border-color: var(--rose); }
.dropzone.over { border-color: var(--rose); background: var(--rose-soft); transform: scale(1.012); }
.dropzone .dz-hint { color: var(--muted); font-size: 13.5px; margin: 4px 0 0; }
.dropzone .dz-ico { font-size: 24px; }
.dropzone input[type="file"] { display: none; }

.ptiles { display: flex; flex-wrap: wrap; gap: 9px; justify-content: center; margin-top: 12px; }
.ptiles:empty { display: none; }
.ptile {
  position: relative;
  width: 76px; height: 76px;
  border-radius: 14px; overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-soft);
  touch-action: none;
  cursor: grab;
}
.ptile img { width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.ptile.vid video { width: 100%; height: 100%; object-fit: cover; pointer-events: none; background: #000; }
.ptile.vid .vtag {
  position: absolute; left: 4px; bottom: 4px;
  font-size: 13px; line-height: 1;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .6));
  pointer-events: none;
}
.ptile .rm {
  position: absolute; top: 3px; right: 3px;
  width: 22px; height: 22px;
  border: 0; border-radius: 50%;
  background: rgba(60, 35, 40, .55); color: #fff;
  font-size: 11px; line-height: 22px; padding: 0;
  cursor: pointer; backdrop-filter: blur(3px);
}
.ptile.dragging {
  opacity: .92;
  box-shadow: 0 12px 26px rgba(120, 70, 80, .32);
  cursor: grabbing; z-index: 6;
}

.dlg-actions { display: flex; gap: 10px; margin-top: 18px; }
.dlg-actions .btn { padding: 12px 14px; }

/* Карточный редактор события — та же структура, что в кабинете. */
.date-widget-dialog {
  width: min(1000px, calc(100vw - 32px));
  padding: 20px; border-radius: 26px;
}
.date-widget-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; margin-bottom: 16px;
}
.date-widget-head .dlg-sub { margin-bottom: 0; }
.date-widget-x {
  flex: none; display: grid; place-items: center;
  width: 38px; height: 38px; border: 1px solid var(--line); border-radius: 50%;
  background: rgba(255,255,255,.58); color: var(--muted);
  cursor: pointer; font-size: 15px;
}
.date-widget-dialog .ed-cols {
  display: grid; grid-template-columns: minmax(0, 460px) minmax(260px, 1fr);
  gap: 24px; align-items: start;
}
.date-widget-dialog .ed-preview-col { min-width: 0; }
.date-widget-dialog .preview-cap {
  margin: 0 0 8px; color: var(--ink); font-weight: 700; font-size: 14px;
}
.date-widget-dialog .preview-cap span { color: var(--muted); font-size: 12px; font-weight: 400; }
.date-widget-dialog .pcard {
  overflow: hidden; position: relative; border-radius: 22px;
  border: 1px solid rgba(255,255,255,.72);
  background: linear-gradient(150deg, rgba(255,253,251,.7), rgba(255,246,246,.58));
  box-shadow: 0 18px 46px rgba(150,80,95,.18), inset 0 1px 0 rgba(255,255,255,.8);
}
.date-widget-dialog .ed-gallery {
  position: relative; height: 220px; overflow: hidden; cursor: pointer;
  background: linear-gradient(135deg, #caa094, #9c6f6a);
}
.date-widget-dialog .ed-slides,
.date-widget-dialog .ed-slide { position: absolute; inset: 0; }
.date-widget-dialog .ed-slide[hidden] { display: none; }
.date-widget-dialog .ed-slide img,
.date-widget-dialog .ed-slide video {
  display: block; width: 100%; height: 100%; object-fit: cover;
}
.date-widget-dialog .ed-slide-rm {
  position: absolute; top: 9px; right: 9px; z-index: 4;
  display: grid; place-items: center; width: 30px; height: 30px;
  border: 0; border-radius: 50%; background: rgba(30,20,24,.58);
  color: #fff; cursor: pointer;
}
.date-widget-dialog .ed-empty {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
}
.date-widget-dialog .ed-empty[hidden] { display: none; }
.date-widget-dialog .ed-empty-logo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.date-widget-dialog .ed-empty-inner {
  position: relative; z-index: 2; padding: 11px 14px; border-radius: 13px;
  background: rgba(30,20,24,.34); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
}
.date-widget-dialog .ed-empty-inner .btn { background: rgba(255,255,255,.94); color: var(--rose-2); }
.date-widget-dialog .ed-nav {
  position: absolute; top: 50%; z-index: 5; transform: translateY(-50%);
  display: grid; place-items: center; width: 34px; height: 34px;
  border: 0; border-radius: 50%; background: rgba(30,20,24,.5);
  color: #fff; font-size: 21px; cursor: pointer;
}
.date-widget-dialog .ed-nav.prev { left: 8px; }
.date-widget-dialog .ed-nav.next { right: 8px; }
.date-widget-dialog .ed-nav.as-add {
  background: rgba(182,95,111,.82); font-size: 22px; font-weight: 300;
}
.date-widget-dialog .ed-dots {
  position: absolute; z-index: 5; bottom: 8px; left: 50%;
  display: flex; gap: 5px; transform: translateX(-50%);
}
.date-widget-dialog .ed-dots i { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,.5); }
.date-widget-dialog .ed-dots i.on { background: #fff; }
.date-widget-dialog .ed-gallery-pay {
  position: absolute; z-index: 6; top: 10px; left: 10px;
  padding: 3px 10px; border-radius: 999px; color: #fff; font-size: 11px; font-weight: 700;
  background: linear-gradient(90deg, #34b36b, #15734a);
}
.date-widget-dialog .ed-gallery-pay[hidden] { display: none; }
.date-widget-dialog .pcard .body { padding: 18px 18px 20px; }
.date-widget-dialog .pcard .ttl {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin: 0 0 7px; color: var(--ink); font: 600 23px/1.15 var(--serif);
}
.date-widget-dialog .pcard .pay {
  padding: 3px 10px; border-radius: 999px; color: #fff;
  background: linear-gradient(90deg, #34b36b, #15734a);
  font: 700 11px/1.3 var(--sans);
}
.date-widget-dialog .ed-field {
  display: inline-block; min-width: 20px; padding: 1px 4px;
  border-radius: 8px; outline: none; cursor: text;
}
.date-widget-dialog .ed-field:hover { background: rgba(182,95,111,.08); }
.date-widget-dialog .ed-field:focus { background: rgba(182,95,111,.12); box-shadow: 0 0 0 2px rgba(182,95,111,.25); }
.date-widget-dialog .ed-field:empty::before { content: attr(data-ph); color: var(--muted); opacity: .8; }
.date-widget-dialog .pmeta { display: grid; gap: 4px; margin-bottom: 12px; color: var(--muted); }
.date-widget-dialog .ed-place-row,
.date-widget-dialog .ed-links-row { display: flex; align-items: flex-start; gap: 6px; margin-top: 4px; color: var(--muted); font-size: 12.5px; }
.date-widget-dialog .ed-links { white-space: pre-line; }
.date-widget-dialog .ed-desc {
  display: block; min-height: 24px; margin: 0 0 8px; color: var(--muted); font-size: 14px;
}
.date-widget-dialog .ed-desc-toolbar { margin: 4px 0 8px; }
.date-widget-dialog .ed-when {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  color: var(--ink); font-size: 14px;
}
.date-widget-dialog .ed-at { color: var(--muted); font-size: 12.5px; }
.date-widget-dialog .ed-date,
.date-widget-dialog .ed-time { display: inline-flex; align-items: center; gap: 1px; font-variant-numeric: tabular-nums; }
.date-widget-dialog .ed-date span,
.date-widget-dialog .ed-time span { display: inline-block; }
.date-widget-dialog .ed-hh,
.date-widget-dialog .ed-mm,
.date-widget-dialog .ed-dd,
.date-widget-dialog .ed-mo,
.date-widget-dialog .ed-yy {
  min-width: 20px; padding: 2px 3px; border-radius: 6px; outline: none;
  background: rgba(182,95,111,.08); text-align: center; cursor: text;
}
.date-widget-dialog .ed-yy { min-width: 38px; }
.date-widget-dialog .ed-hh:empty::before,
.date-widget-dialog .ed-mm:empty::before {
  content: "00"; color: var(--muted); opacity: .6;
}
.date-widget-dialog .ed-dd:empty::before { content: "ДД"; color: var(--muted); opacity: .6; }
.date-widget-dialog .ed-mo:empty::before { content: "ММ"; color: var(--muted); opacity: .6; }
.date-widget-dialog .ed-yy:empty::before { content: "ГГГГ"; color: var(--muted); opacity: .6; }
.date-widget-dialog .ed-hh:focus,
.date-widget-dialog .ed-mm:focus,
.date-widget-dialog .ed-dd:focus,
.date-widget-dialog .ed-mo:focus,
.date-widget-dialog .ed-yy:focus {
  background: rgba(182,95,111,.18); box-shadow: 0 0 0 2px rgba(182,95,111,.25);
}
.date-widget-dialog .ed-dot,
.date-widget-dialog .ed-colon,
.date-widget-dialog .ed-dash { color: var(--muted); }
.date-widget-dialog .ed-dash { padding: 0 4px; }
.proposal-media-order-wrap {
  margin-top: 10px; padding: 10px 12px; border: 1px solid var(--line);
  border-radius: 15px; background: rgba(255,255,255,.46);
}
.proposal-media-order-wrap[hidden] { display: none; }
.proposal-media-order-hint {
  display: block; margin-bottom: 7px; color: var(--muted); font-size: 12px;
}
.proposal-media-order {
  justify-content: flex-start; margin-top: 0; flex-wrap: nowrap; overflow-x: auto;
  padding: 2px 1px 5px; scrollbar-width: thin;
}
.proposal-media-order .ptile {
  flex: 0 0 62px; width: 62px; height: 62px; border-radius: 12px;
}
.proposal-media-order .ptile.current {
  border-color: var(--rose); box-shadow: 0 0 0 2px var(--rose-soft), var(--shadow-soft);
}
.proposal-media-order .ptile:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--rose) 38%, transparent);
  outline-offset: 2px;
}
.date-widget-dialog .acts { display: flex; gap: 10px; margin-top: 14px; pointer-events: none; }
.date-widget-dialog .acts button {
  flex: 1; padding: 10px; border-radius: 12px; font: 600 14px var(--sans);
}
.date-widget-dialog .acts .bk { border: 0; color: #fff; background: linear-gradient(135deg, var(--rose), var(--rose-2)); }
.date-widget-dialog .acts .ak { border: 1px solid var(--line); color: var(--rose-2); background: rgba(255,255,255,.6); }
.date-widget-dialog .ed-side-col { display: grid; gap: 16px; min-width: 0; }
.date-widget-dialog .sec {
  padding: 16px; border: 1px solid rgba(255,255,255,.7); border-radius: 19px;
  background: linear-gradient(150deg, rgba(255,253,251,.66), rgba(255,246,246,.5));
  box-shadow: var(--shadow-soft);
}
.date-widget-dialog .sec h2 {
  display: flex; align-items: center; gap: 8px;
  margin: 0 0 14px; color: var(--rose-2); font-family: var(--serif); font-size: 19px;
}
.date-widget-dialog .sec h2 > .n {
  display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%;
  background: var(--rose-soft); font: 700 12px/1 sans-serif;
}
.date-widget-dialog .pay-pick { display: flex; flex-wrap: wrap; gap: 7px; }
.date-widget-dialog .pay-opt {
  display: flex; align-items: center; justify-content: center; min-width: 0;
  flex: 1 1 0;
  margin: 0; padding: 9px 6px; border: 1px solid var(--line); border-radius: 999px;
  background: rgba(255,255,255,.62); color: var(--ink); font-size: 12.5px;
  text-align: center; cursor: pointer; line-height: 1.2;
}
.date-widget-dialog .pay-opt.pay-any { flex-basis: 100%; }
.date-widget-dialog .pay-opt input { position: absolute; opacity: 0; pointer-events: none; }
.date-widget-dialog .pay-opt:has(input:checked) {
  color: #fff; border-color: transparent;
  background: linear-gradient(135deg, #34b36b, #15734a);
  box-shadow: 0 4px 12px rgba(21,115,74,.26);
}
.date-widget-dialog .chips-cat { display: flex; }
.date-widget-dialog .chip-cat {
  padding: 9px 13px; border: 1px solid var(--rose); border-radius: 999px;
  color: var(--rose-2); background: var(--rose-soft); font-size: 13px; font-weight: 600;
}
.date-widget-dialog .capacity-field { display: grid; gap: 9px; margin: 16px 0 0; }
.date-widget-dialog .capacity-stepper {
  display: grid; grid-template-columns: 46px minmax(58px, 82px) 46px;
  align-items: stretch; justify-content: center;
  width: max-content; max-width: 100%; margin: 0 auto;
  border: 1px solid var(--line); border-radius: 15px; overflow: hidden;
  background: rgba(255,255,255,.56);
}
.date-widget-dialog .capacity-stepper input {
  width: 100%; min-width: 0; padding: 10px 4px;
  border: 0; border-inline: 1px solid var(--line); border-radius: 0;
  background: transparent; text-align: center; font-size: 18px; font-weight: 700;
  -moz-appearance: textfield;
}
.date-widget-dialog .capacity-stepper input::-webkit-inner-spin-button,
.date-widget-dialog .capacity-stepper input::-webkit-outer-spin-button {
  margin: 0; -webkit-appearance: none;
}
.date-widget-dialog .capacity-step {
  display: grid; place-items: center; padding: 0; border: 0;
  background: transparent; color: var(--rose-2); cursor: pointer;
  font-size: 24px; font-weight: 500; line-height: 1;
}
.date-widget-dialog .capacity-step:hover:not(:disabled) { background: var(--rose-soft); }
.date-widget-dialog .capacity-step:disabled {
  background: rgba(70,55,62,.08); color: var(--muted);
  cursor: default; opacity: .42;
}
.date-widget-context p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.5; }
.date-widget-actions {
  display: flex; justify-content: flex-end; gap: 10px;
  margin-top: 18px; padding: 12px; border: 1px solid var(--line); border-radius: 17px;
  background: rgba(255,255,255,.5);
}
.date-widget-actions .btn { flex: 0 1 220px; }
@media (max-width: 820px) {
  .date-widget-dialog { padding: 17px; }
  .date-widget-dialog .ed-cols { grid-template-columns: 1fr; gap: 18px; }
  .date-widget-dialog .pcard { max-width: 460px; margin: 0 auto; }
  .date-widget-actions .btn { flex: 1; }
}
@media (max-width: 420px) {
  .date-widget-dialog { width: calc(100vw - 18px); padding: 14px; }
  .date-widget-dialog .pcard { border-radius: 18px; }
  .date-widget-dialog .pcard .body { padding: 15px 14px 17px; }
  .date-widget-dialog .sec { padding: 14px; }
}

.cal-btns { display: grid; gap: 10px; margin-top: 14px; }
.cal-btns a {
  display: flex; align-items: center; gap: 12px;
  text-decoration: none;
  border: 1px solid var(--line); border-radius: 16px;
  padding: 13px 16px; color: var(--ink);
  background: #fff;
  transition: transform .18s var(--ease), box-shadow .2s, border-color .2s;
}
.cal-btns a:hover { transform: translateY(-1px); box-shadow: var(--shadow-soft); border-color: #e6cdc9; }
.cal-btns .ico { font-size: 20px; }
.cal-btns small { display: block; color: var(--muted); }

.upbar { height: 6px; border-radius: 999px; background: var(--rose-soft); overflow: hidden; margin-top: 14px; }
.upbar i {
  display: block; height: 100%; width: 0;
  background: linear-gradient(90deg, var(--rose), var(--rose-2));
  border-radius: inherit;
  transition: width .2s ease;
}

/* --- тост, конфетти --------------------------------------------------------*/
.toast {
  position: fixed; left: 50%; bottom: 30px;
  transform: translateX(-50%) translateY(16px);
  background: rgba(67, 45, 51, .92);
  color: #fff; font-size: 14.5px;
  padding: 12px 22px; border-radius: 999px;
  opacity: 0; pointer-events: none;
  transition: opacity .3s, transform .3s var(--ease);
  z-index: 60; max-width: calc(100vw - 40px); text-align: center;
  backdrop-filter: blur(6px);
  box-shadow: 0 12px 32px rgba(60, 30, 38, .35);
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

.confetti-heart {
  position: fixed; z-index: 70;
  color: var(--rose);
  filter: var(--hue, none);
  font-size: calc(15px * var(--s, 1));
  pointer-events: none;
  animation: confetti .95s var(--ease) forwards;
}
@keyframes confetti {
  0%   { transform: translate(0, 0) scale(.5) rotate(0); opacity: 1; }
  100% { transform: translate(var(--dx), var(--dy)) scale(1) rotate(50deg); opacity: 0; }
}

/* --- лайтбокс: все фото с листанием ----------------------------------------*/
.lightbox {
  position: fixed; inset: 0; z-index: 50;
  background: rgba(40, 24, 28, .92);
  display: none; align-items: center; justify-content: center;
  padding: 20px;
  backdrop-filter: blur(5px);
}
.lightbox.open { display: flex; animation: fade-in .25s ease; }
.lightbox img {
  max-width: min(100%, 940px); max-height: 86vh;
  border-radius: 14px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .5);
}
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
.lb-x, .lb-prev, .lb-next {
  position: fixed; z-index: 51;
  border: 0; border-radius: 50%;
  width: 42px; height: 42px;
  background: rgba(255, 253, 251, .14); color: #fff;
  font-size: 22px; line-height: 1; cursor: pointer;
  backdrop-filter: blur(6px);
  transition: background .2s, transform .15s;
}
.lb-x:hover, .lb-prev:hover, .lb-next:hover { background: rgba(255, 253, 251, .26); }
.lb-x { top: 18px; right: 18px; font-size: 17px; }
.lb-prev { left: 14px; top: 50%; transform: translateY(-50%); }
.lb-next { right: 14px; top: 50%; transform: translateY(-50%); }
.lb-prev:disabled, .lb-next:disabled { opacity: .22; pointer-events: none; }
.lb-count {
  position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%);
  z-index: 51; color: #fff; font-size: 13px;
  background: rgba(255, 255, 255, .12);
  padding: 5px 13px; border-radius: 999px;
  backdrop-filter: blur(6px);
}
@media (max-width: 560px) { .lb-prev, .lb-next { display: none; } } /* свайп */

/* --- FAB создания события --------------------------------------------------*/
.fab {
  position: fixed; right: 18px; bottom: 20px; z-index: 40;
  min-width: 58px; height: 58px; border-radius: 999px; border: 0;
  padding: 0 21px;
  background: linear-gradient(135deg, var(--rose), var(--rose-2));
  color: #fff; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 12px 28px rgba(150, 70, 85, .42);
  transition: transform .2s var(--ease), box-shadow .25s;
  animation: fade-up .7s var(--ease) .5s both;
}
.fab-label {
  font: 700 16.5px/1.1 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  white-space: nowrap; text-align: center;
}
.fab-inline { display: none; }
.fab:hover { transform: translateY(-2px) scale(1.05); box-shadow: 0 16px 34px rgba(150, 70, 85, .5); }
.fab:active { transform: scale(.94); }
@media (max-width: 600px) {
  .fab-floating { display: none; }
  .fab-inline {
    position: static;
    display: inline-flex;
    width: 100%;
    min-height: 52px;
    height: auto;
    margin: 24px 0 2px;
    padding: 12px 18px;
    animation: none;
  }
  .fab-inline .fab-label { font-size: 15px; }
}

.alt-time { display: block; font-size: 12.5px; color: var(--muted); margin: 2px 0 6px; }

/* --- главная страница домена -------------------------------------------- */
.home-wrap {
  position: relative; z-index: 1;
  min-height: 100dvh;
  display: grid; place-items: center;
  padding: 24px;
}
.home-card {
  position: relative;
  text-align: center;
  /* как у гостевых карточек, но ещё прозрачнее — фон чернил отчётливо просвечивает */
  background:
    linear-gradient(150deg, rgba(255,252,251,.14), rgba(255,246,246,.07)) padding-box,
    linear-gradient(135deg, rgba(255,255,255,.55), rgba(214,150,200,.42) 55%, rgba(182,95,111,.4)) border-box;
  /* saturate понижен и убран brightness: раньше тёплый фон чернил под стеклом
     перекручивался в сплошной оранжевый — теперь это прозрачное морозное стекло */
  -webkit-backdrop-filter: blur(8px) saturate(1.05);
  backdrop-filter: url(#glassWarp) blur(8px) saturate(1.05);
  border: 1.6px solid transparent;
  border-radius: 28px;
  padding: 54px 44px 46px;
  max-width: 520px;
  box-shadow:
    0 24px 60px rgba(150, 80, 95, .16),
    inset 0 1.5px 0 rgba(255, 255, 255, .55),
    inset 0 0 0 1px rgba(255, 255, 255, .14);
  animation: fade-up .7s var(--ease) both;
}
.home-heart {
  width: 64px; height: 64px;
  margin: 0 auto 18px;
  border-radius: 50%;
  display: grid; place-items: center;
  font-size: 30px; color: #fff;
  background: linear-gradient(135deg, var(--rose), var(--rose-2));
  box-shadow: 0 14px 30px rgba(150, 70, 85, .4);
  animation: beat 2.6s ease-in-out infinite;
}
.home-card h1 {
  --display-ink-gradient: linear-gradient(120deg, var(--rose-2), var(--rose) 55%, #cf8a78);
  --display-ink-fallback: var(--rose);
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(34px, 8vw, 46px);
  line-height: 1.1;
  margin: 0 0 10px;
  background: none;
  -webkit-text-fill-color: currentColor;
  color: var(--display-ink-fallback);
}
.home-card p { margin: 0; color: var(--muted); font-size: 15.5px; }
/* цифра «4» в date4you чуть приподнята — смотрится эстетичнее.
   inline-block делает её отдельным боксом, а background не наследуется —
   поэтому повторяем градиент и клип здесь, иначе глиф остаётся прозрачным. */
.home-card h1 .d4 {
  display: inline-block;
  transform: translateY(-0.1em);
  background: linear-gradient(120deg, var(--rose-2), var(--rose) 55%, #cf8a78);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: var(--rose);
}
.home-dots { margin-top: 18px; color: var(--rose); opacity: .55; letter-spacing: 10px; font-size: 12px; }
/* эмодзи 💔 на странице «ссылка не действует»: своя типографика, чтобы
   цветной глиф сидел ровно по центру кружка (у emoji иные метрики, чем у ♥) */
.gone-heart {
  font-size: 30px; line-height: 1;
  padding-bottom: 2px;            /* визуальная компенсация базовой линии emoji */
  background: linear-gradient(135deg, var(--rose), var(--rose-2));
}
@media (max-width: 480px) { .home-card { padding: 44px 26px 38px; } }

.empty {
  text-align: center; color: var(--muted);
  padding: 56px 16px; font-size: 15px;
  animation: fade-up .6s var(--ease) both;
}
.empty .big {
  width: 52px; height: 52px; margin: 0 auto 12px;
  display: grid; place-items: center; font-size: 40px;
}
.empty .big .ui-icon { width: 100%; height: 100%; }

footer { margin-top: 60px; text-align: center; color: var(--muted); font-size: 12.5px; }
footer .hearts { color: var(--rose); opacity: .55; letter-spacing: 8px; margin-bottom: 6px; }
.footer-ornament {
  width: 100%; height: 24px; margin: 0 auto 8px;
  display: grid; place-items: center;
}
.footer-ornament :is(.footer-mark, .hearts) { margin: 0; }
.foot-legal { margin-top: 10px; }
.foot-legal a { color: var(--rose); opacity: .8; text-decoration: none; }
.foot-legal a:hover { text-decoration: underline; }

/* footer лендинга */
.home-foot { position: relative; z-index: 3; text-align: center; margin-top: 26px;
  font-size: 12.5px; }
.home-foot a { color: var(--rose); opacity: .85; text-decoration: none; }
.home-foot a:hover { text-decoration: underline; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001s !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001s !important;
  }
  .bg-hearts { display: none; }
  /* дым оставляем как статичную текстуру — это не «движение», а фон */
  .bg-smoke .turb, .bg-smoke span { animation: none !important; }
  html { scroll-behavior: auto; }
}

/* Save-Data и действительно слабые устройства получают тот же полностью
   статичный фон, что prefers-reduced-motion. Класс выставляет ink.js ещё до
   проверки WebGL, поэтому правило работает и для чистого CSS-фолбэка. */
html.ink-static body::before,
html.ink-static body::after,
html.ink-static .bg-hearts span,
html.ink-static .bg-gather span,
html.ink-static .bg-smoke .turb,
html.ink-static .bg-smoke .plume,
html.ink-static .bg-smoke span {
  animation: none !important;
}


/* ===== итерация 7: описание, счётчик, видео, 50/50, разметка ============== */

.cat-desc {
  max-width: 480px;
  margin: 16px auto 0;
  color: #7c6c70;
  font-size: 15px;
  line-height: 1.5;
  text-wrap: balance;
}
.cat-desc a, .comment a { color: var(--rose-2); }

.count-line { margin-top: 12px; color: var(--muted); font-size: 13px; letter-spacing: .02em; }

/* модификатор цены/оплаты — крупнее и сочнее остальных бейджей */
.badge.pay {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .03em;
  padding: 7px 15px;
  color: #fff;
  background: linear-gradient(135deg, #34b36b 0%, #1f8f54 55%, #15734a 100%);
  border: 1px solid rgba(255, 255, 255, .55);
  box-shadow:
    0 5px 16px rgba(31, 143, 84, .42),
    inset 0 1px 0 rgba(255, 255, 255, .35);
  text-shadow: 0 1px 4px rgba(0, 60, 30, .35);
}

.gallery video {
  flex: 0 0 100%;
  width: 100%; height: 252px;
  object-fit: cover;
  background: #1d1418;
  scroll-snap-align: center;
  display: block;
}

.vid-cur {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-top: 8px;
  font-size: 13.5px; color: var(--rose-2);
  background: var(--rose-soft);
  border: 1px solid #efd9d6;
  border-radius: 12px;
  padding: 8px 12px;
}
.vid-cur.removed { opacity: .45; text-decoration: line-through; }
.vid-cur button { border: 0; background: none; cursor: pointer; color: inherit; font-size: 14px; }
.vid-hint { margin: 5px 2px 0; font-size: 12px; color: var(--muted, #9a8a8e); }

.chk-line {
  display: flex; align-items: center; gap: 8px;
  margin: 2px 0 14px;
  font-size: 14.5px; cursor: pointer;
}
.chk-line input { width: 17px; height: 17px; accent-color: var(--rose); }

/* WYSIWYG-редактор комментария в форме предложения (тот же, что в кабинете) */
.toolbar { display: flex; gap: 4px; margin-bottom: 6px; flex-wrap: wrap; }
.toolbar button {
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, .7);
  border-radius: 9px;
  width: 36px; height: 34px;
  cursor: pointer; font-size: 14px; color: var(--ink);
}
.toolbar button:hover { background: var(--rose-soft); border-color: var(--rose); }
.toolbar button.active { background: var(--rose); border-color: var(--rose); color: #fff; }
.toolbar .b { font-weight: 800; }
.toolbar .i { font-style: italic; }
.toolbar .u { text-decoration: underline; }
.toolbar .s { text-decoration: line-through; }
.rich-ed {
  min-height: 86px;
  border: 1px solid var(--line); border-radius: 14px;
  padding: 12px 14px; font: inherit; color: var(--ink);
  background: #fffefd; line-height: 1.5; outline: none;
}
.rich-ed:focus { border-color: var(--rose); box-shadow: 0 0 0 4px rgba(182, 95, 111, .14); }
/* пустой редактор — одна аккуратная строка; при фокусе/наборе подрастает */
.rich-ed:empty { min-height: 0; }
.rich-ed:empty::before { content: attr(data-placeholder); color: var(--muted); }
.rich-ed:focus:empty { min-height: 44px; }
.rich-ed a { color: var(--rose-2); }

/* всплывающее меню форматирования по выделению (как в Telegram) */
.fmt-pop {
  position: fixed; z-index: 80; display: none;
  gap: 2px; padding: 4px;
  background: rgba(43, 35, 38, .96);
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.fmt-pop.show { display: flex; }
.fmt-pop button {
  border: 0; background: none; color: #fff;
  width: 34px; height: 34px; border-radius: 8px;
  cursor: pointer; font-size: 15px; line-height: 1;
}
.fmt-pop button:hover { background: rgba(255, 255, 255, .16); }
.fmt-pop button.active { background: var(--rose); color: #fff; }
.fmt-pop .b { font-weight: 800; }
.fmt-pop .i { font-style: italic; }
.fmt-pop .u { text-decoration: underline; }
.fmt-pop .s { text-decoration: line-through; }

/* пустой редактор на телефоне — в одну аккуратную строку, не «башня» */
@media (max-width: 720px) {
  .rich-ed { min-height: 44px; }
}

/* ============================================================================
   LIQUID GLASS — матовое стекло в розовой палитре (адаптация glassmorphism).
   Карточки становятся полупрозрачным морозным стеклом: сквозь них просвечивает
   дым, по поверхности — мягкий розово-персиково-сиреневый перелив.
   Вынесено отдельным блоком: чтобы откатить дизайн, достаточно удалить его.
   ============================================================================ */

.card {
  /* жидкое стекло: чернила за карточкой ПРЕЛОМЛЯЮТСЯ (url(#glassWarp)) и
     размываются — это и даёт эффект референса, а не просто матовость.
     Тело почти прозрачное, цвет идёт от просвечивающего фона. */
  background: linear-gradient(150deg,
              rgba(255, 252, 251, .22), rgba(255, 246, 246, .12));
  -webkit-backdrop-filter: blur(7px) saturate(1.9) brightness(1.08);
  backdrop-filter: url(#glassWarp) blur(7px) saturate(1.9) brightness(1.08);
  border: 1px solid rgba(255, 255, 255, .55);
  border-radius: 30px;
  /* подъём + двойная стеклянная кромка: яркий свет сверху-слева,
     тёмная грань снизу-справа → объём «толстого» стекла */
  box-shadow:
    0 24px 60px rgba(150, 80, 95, .22),
    0 4px 14px rgba(150, 80, 95, .1),
    inset 0 2px 1px rgba(255, 255, 255, 1),
    inset 2px 0 1px rgba(255, 255, 255, .55),
    inset 0 0 0 1px rgba(255, 255, 255, .25),
    inset -2px -2px 2px rgba(150, 80, 95, .14);
}

/* лёгкий цветной перелив стекла (без нарисованной «блик-полосы» — стекло
   читается за счёт преломления фона и кромок, как в референсе) */
.card::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 3;
  background:
    linear-gradient(125deg,
      rgba(231, 120, 145, .1) 0%,
      rgba(226, 176, 138, .06) 45%,
      rgba(214, 150, 200, .12) 100%);
  mix-blend-mode: screen;
  opacity: .8;
}

@media (hover: hover) {
  .card:hover {
    box-shadow:
      0 30px 70px rgba(150, 80, 95, .26),
      0 5px 16px rgba(150, 80, 95, .12),
      inset 0 2px 1px rgba(255, 255, 255, 1),
      inset 2px 0 1px rgba(255, 255, 255, .55),
      inset 0 0 0 1px rgba(255, 255, 255, .3),
      inset -2px -2px 2px rgba(150, 80, 95, .14);
  }
}

/* тело карточки — почти прозрачное стекло поверх фото/чернил */
.body {
  position: relative;
  z-index: 2;                       /* выше блика, чтобы текст был чёткий */
  background: linear-gradient(180deg,
              rgba(255, 252, 251, .14), rgba(255, 249, 249, .3));
  -webkit-backdrop-filter: blur(10px) saturate(1.5);
  backdrop-filter: blur(10px) saturate(1.5);
}

/* фото — внутри стеклянной рамки; верхние уголки скруглены под карточку */
.gal-wrap { z-index: 1; }
.gallery img, .gallery video { border-radius: 0; }

/* мой выбор: стеклянная карточка с переливающейся розовой кромкой */
.card.booked-me {
  background: linear-gradient(150deg,
              rgba(255, 251, 250, .66), rgba(255, 244, 244, .5));
  border: 1.5px solid transparent;
  box-shadow:
    0 22px 54px rgba(182, 95, 111, .28),
    0 0 0 5px rgba(182, 95, 111, .07),
    inset 0 1px 0 rgba(255, 255, 255, .8);
}
/* переливающаяся кромка поверх стекла */
.card.booked-me::before {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  padding: 1.5px;
  pointer-events: none;
  z-index: 4;
  background: linear-gradient(120deg, var(--rose), var(--peach), #e8a7b4, var(--rose));
  background-size: 300% 300%;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: border-shine 6s linear infinite;
}

/* выбор кого-то другого: спокойная розовая стеклянная рамка */
.card.booked-other {
  border-color: rgba(236, 201, 201, .8);
  background: linear-gradient(150deg,
              rgba(255, 253, 251, .6), rgba(253, 245, 244, .48));
}

/* архив: морозное стекло в серо-розовом, без радужного блика */
.card.past {
  background: linear-gradient(150deg,
              rgba(251, 248, 247, .55), rgba(246, 242, 241, .42));
  border-color: rgba(201, 191, 195, .7);
  box-shadow:
    0 14px 34px rgba(70, 55, 60, .12),
    inset 0 1px 0 rgba(255, 255, 255, .6);
}
.card.past::after { opacity: .25; }          /* блик почти убран */
.card.past .body {
  background: linear-gradient(180deg,
              rgba(250, 247, 246, .4), rgba(246, 242, 241, .5));
}

/* кнопки внутри стекла — приподнимаем над бликом */
.actions { position: relative; z-index: 4; }
.btn.ghost {
  background: rgba(255, 255, 255, .35);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.btn.ghost:hover { background: rgba(247, 233, 231, .6); }

/* предложить-дату чип и ссылки тоже на лёгком стекле */
.suggest-chip, .alt-link {
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

/* слабым устройствам без backdrop-filter дадим плотный фон (без прозрачности) */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .card { background: var(--card); }
  .body { background: transparent; }
}

/* Мобильная производительность: дорогой backdrop-filter: url(#glassWarp)
   (SVG-преломление) пересчитывается при каждом репейнте и тормозит прокрутку и
   переключение на телефоне. Снимаем ссылку на SVG-фильтр, оставляя обычный blur —
   стекло визуально почти то же, репейнт дешевеет. Анимированный фон НЕ трогаем. */
@media (max-width: 720px) {
  .card {
    -webkit-backdrop-filter: blur(7px) saturate(1.9) brightness(1.08);
    backdrop-filter: blur(7px) saturate(1.9) brightness(1.08);
  }
  .home-card {
    -webkit-backdrop-filter: blur(8px) saturate(1.05);
    backdrop-filter: blur(8px) saturate(1.05);
  }
}

/* ============================================================================
   INK — WebGL-фон «растекающиеся чернила» (вариант A).
   Канвас рисуется поверх CSS-дыма (который остаётся фолбэком без WebGL),
   но под всем контентом. Когда канвас активен (.has-ink), статичный
   SVG/градиентный дым прячем — шейдер его полностью заменяет.
   ============================================================================ */
.ink-canvas,
.ink-static-frame {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
}
.ink-static-frame { object-fit: cover; }
.bg-smoke.has-ink .ink-canvas,
.bg-smoke.has-ink .ink-static-frame {
  opacity: 1;
}
.bg-smoke.has-ink .ink-static-frame.is-pending { opacity: 0 !important; }
.bg-smoke.has-ink .turb,
.bg-smoke.has-ink span { display: none; }   /* шейдер вместо CSS-дыма */

/* ============================================================================
   ТЁМНАЯ ТЕМА — спокойная ночная версия той же розово-дымчатой палитры.
   Геометрия, blur и движение не меняются: переопределяются только цвета,
   прозрачность стекла и тени. Выбор ставит /static/theme.js на <html>.
   ============================================================================ */
html[data-theme="dark"] {
  --bg: #171318;
  --card: #251e24;
  --ink: #f0e7eb;
  --muted: #b5a5ad;
  --rose: #d48799;
  --rose-2: #e7a2b1;
  --rose-soft: #3a2931;
  --peach: #c99170;
  --line: #493942;
  --shadow: 0 14px 38px rgba(0, 0, 0, .42);
  --shadow-soft: 0 6px 22px rgba(0, 0, 0, .3);
  --choice-selected-bg: #70404d;
}

html[data-theme="dark"] body {
  background: linear-gradient(180deg, #171318 0%, #21171d 48%, #19161f 100%);
}
html[data-theme="dark"] body::before {
  background:
    radial-gradient(42% 36% at 18% 16%, rgba(126, 65, 81, .28), transparent 70%),
    radial-gradient(46% 40% at 86% 24%, rgba(130, 85, 65, .2), transparent 70%),
    radial-gradient(50% 44% at 64% 88%, rgba(91, 65, 103, .24), transparent 72%);
}
html[data-theme="dark"] body::after {
  background:
    radial-gradient(38% 34% at 78% 70%, rgba(126, 65, 81, .18), transparent 70%),
    radial-gradient(34% 30% at 8% 78%, rgba(89, 66, 105, .18), transparent 70%);
}
html[data-theme="dark"] .bg-smoke .turb {
  opacity: .3;
  mix-blend-mode: screen;
}
html[data-theme="dark"] .bg-smoke span:nth-child(2) {
  background:
    radial-gradient(46% 48% at 40% 40%, rgba(126, 65, 81, .44), transparent 66%),
    radial-gradient(36% 34% at 66% 56%, rgba(82, 44, 58, .42), transparent 68%);
}
html[data-theme="dark"] .bg-smoke span:nth-child(3) {
  background:
    radial-gradient(46% 44% at 56% 40%, rgba(130, 85, 65, .3), transparent 66%),
    radial-gradient(34% 38% at 38% 60%, rgba(91, 65, 103, .34), transparent 68%);
}
html[data-theme="dark"] .bg-smoke span:nth-child(4) {
  background:
    radial-gradient(46% 46% at 44% 50%, rgba(91, 65, 103, .38), transparent 66%),
    radial-gradient(34% 34% at 64% 42%, rgba(126, 65, 81, .28), transparent 68%);
}

html[data-theme="dark"] .greet,
html[data-theme="dark"] .author,
html[data-theme="dark"] .promo-btn,
html[data-theme="dark"] .archive-fold > summary {
  background: rgba(39, 31, 37, .7);
  border-color: rgba(255, 255, 255, .12);
  box-shadow: var(--shadow-soft);
}
html[data-theme="dark"] .author:hover,
html[data-theme="dark"] .promo-btn:hover,
html[data-theme="dark"] .archive-fold > summary:hover {
  background: rgba(53, 42, 50, .86);
}
html[data-theme="dark"] .greet button { color: var(--muted); }

html[data-theme="dark"] .oauth-btn,
html[data-theme="dark"] .toolbar button,
html[data-theme="dark"] .btn.ghost {
  background: rgba(42, 33, 40, .82);
  border-color: var(--line);
  color: var(--ink);
}
html[data-theme="dark"] .date-widget-dialog .pcard,
html[data-theme="dark"] .date-widget-dialog .sec,
html[data-theme="dark"] .proposal-media-order-wrap,
html[data-theme="dark"] .date-widget-actions {
  background: linear-gradient(150deg, rgba(45,35,42,.88), rgba(31,25,31,.78));
  border-color: rgba(255,255,255,.11);
  box-shadow: 0 16px 40px rgba(0,0,0,.28);
}
html[data-theme="dark"] .date-widget-x,
html[data-theme="dark"] .date-widget-dialog .pay-opt,
html[data-theme="dark"] .date-widget-dialog .acts .ak {
  background: rgba(42,33,40,.9); border-color: var(--line); color: var(--ink);
}
html[data-theme="dark"] .date-widget-dialog .pay-opt:has(input:checked) {
  background: linear-gradient(135deg, #34b36b, #15734a);
  border-color: transparent; color: #fff;
}
html[data-theme="dark"] .date-widget-dialog .capacity-stepper {
  background: rgba(38,31,37,.9);
}
html[data-theme="dark"] .date-widget-dialog .capacity-step:disabled {
  background: rgba(16,13,16,.32);
}
html[data-theme="dark"] .btn.ghost { color: var(--rose-2); }
html[data-theme="dark"] .btn.ghost:hover { background: var(--rose-soft); }
html[data-theme="dark"] .btn.book,
html[data-theme="dark"] .login-corner,
html[data-theme="dark"] .fab,
html[data-theme="dark"] .status-chip.mine {
  background: linear-gradient(135deg, #a75e70, #75404f);
  color: #fff;
}

html[data-theme="dark"] .card {
  background: linear-gradient(150deg,
              rgba(44, 34, 41, .72), rgba(31, 25, 31, .58));
  border-color: rgba(255, 255, 255, .13);
  box-shadow:
    0 24px 60px rgba(0, 0, 0, .36),
    0 4px 14px rgba(0, 0, 0, .2),
    inset 0 2px 1px rgba(255, 255, 255, .13),
    inset 2px 0 1px rgba(255, 255, 255, .06),
    inset 0 0 0 1px rgba(255, 255, 255, .04),
    inset -2px -2px 2px rgba(0, 0, 0, .18);
}
html[data-theme="dark"] .card::after {
  background: linear-gradient(125deg,
    rgba(212, 135, 153, .08),
    rgba(201, 145, 112, .035) 45%,
    rgba(135, 102, 150, .09));
  mix-blend-mode: screen;
}
html[data-theme="dark"] .body {
  background: linear-gradient(180deg,
              rgba(43, 33, 40, .28), rgba(29, 24, 29, .58));
}
html[data-theme="dark"] .card.booked-me {
  background: linear-gradient(150deg,
              rgba(71, 44, 53, .86), rgba(43, 31, 38, .76));
  box-shadow:
    0 22px 54px rgba(0, 0, 0, .4),
    0 0 0 5px rgba(212, 135, 153, .09),
    inset 0 1px 0 rgba(255, 255, 255, .12);
}
html[data-theme="dark"] .card.booked-other {
  border-color: rgba(212, 135, 153, .42);
  background: linear-gradient(150deg,
              rgba(55, 39, 47, .78), rgba(38, 30, 36, .7));
}
html[data-theme="dark"] .card.past {
  background: linear-gradient(150deg,
              rgba(39, 34, 38, .7), rgba(29, 27, 30, .62));
  border-color: rgba(174, 159, 167, .3);
  box-shadow: 0 14px 34px rgba(0, 0, 0, .25), inset 0 1px 0 rgba(255, 255, 255, .07);
}
html[data-theme="dark"] .card.past .body {
  color: #b2a7ac;
  background: linear-gradient(180deg, rgba(37, 32, 36, .4), rgba(27, 25, 28, .58));
}
html[data-theme="dark"] .card.past .title { color: #c4b8bd; }
html[data-theme="dark"] .card.past .when,
html[data-theme="dark"] .card.past .place { color: #9f9499; }
html[data-theme="dark"] .card.past .gallery { background: #282328; }

html[data-theme="dark"] dialog,
html[data-theme="dark"] .field input[type="text"],
html[data-theme="dark"] .field input[type="number"],
html[data-theme="dark"] .field input[type="datetime-local"],
html[data-theme="dark"] .field textarea,
html[data-theme="dark"] .rich-ed,
html[data-theme="dark"] .dropzone,
html[data-theme="dark"] .cal-btns a,
html[data-theme="dark"] .qa-item {
  background: #251f24;
  color: var(--ink);
  border-color: var(--line);
}
html[data-theme="dark"] dialog::backdrop { background: rgba(10, 7, 9, .7); }
html[data-theme="dark"] input,
html[data-theme="dark"] textarea,
html[data-theme="dark"] select { color-scheme: dark; }
html[data-theme="dark"] .chip,
html[data-theme="dark"] .links a,
html[data-theme="dark"] .chip-suggest,
html[data-theme="dark"] .suggest-chip,
html[data-theme="dark"] .alt-link {
  background: #32262d;
  color: var(--rose-2);
  border-color: var(--line);
}
html[data-theme="dark"] .links a:hover { background: var(--rose-soft); }
html[data-theme="dark"] .gal-nav,
html[data-theme="dark"] .av {
  background: rgba(43,34,41,.92); border-color: var(--line); color: var(--rose-2);
}
html[data-theme="dark"] .av { box-shadow: 0 3px 8px rgba(0,0,0,.28); }
html[data-theme="dark"] .badge.guest {
  background: linear-gradient(135deg, #3d302a, #493526); color: #e6b891;
}
html[data-theme="dark"] .badge.wait {
  background: linear-gradient(135deg, #3b3527, #4a4026); color: #e0c279;
}
html[data-theme="dark"] .note-pending { color: #d5ba78; }
html[data-theme="dark"] .vid-cur { border-color: var(--line); }
html[data-theme="dark"] .login-dlg .consent,
html[data-theme="dark"] .cat-desc { color: #c5b8be; }
html[data-theme="dark"] .login-dlg .err {
  background: #42272b; border-color: #6d3b42; color: #ffaaa8;
}

html[data-theme="dark"] .home-card {
  background:
    linear-gradient(150deg, rgba(45,35,42,.34), rgba(29,24,29,.22)) padding-box,
    linear-gradient(135deg, rgba(255,255,255,.15), rgba(128,88,113,.3) 55%, rgba(96,52,65,.34)) border-box;
  box-shadow:
    0 24px 60px rgba(0, 0, 0, .38),
    inset 0 1.5px 0 rgba(255, 255, 255, .12),
    inset 0 0 0 1px rgba(255, 255, 255, .04);
}

/* Страницы с локальными inline-стилями (профиль, документы, публичный share). */
html[data-theme="dark"] .share-cta,
html[data-theme="dark"] .pub-card,
html[data-theme="dark"] .proj-list a,
html[data-theme="dark"] .support-card {
  background: rgba(39, 31, 37, .76);
  border-color: var(--line);
  color: var(--ink);
  box-shadow: var(--shadow-soft);
}
html[data-theme="dark"] .legal p,
html[data-theme="dark"] .legal li,
html[data-theme="dark"] .prof .meta,
html[data-theme="dark"] .pub-card .t { color: var(--ink); }
html[data-theme="dark"] .prof .ava-ph { background: var(--rose-soft); }
html[data-theme="dark"] .prof .ava { border-color: var(--line); }

/* Нейтральная VPN-подсказка на экранах входа. */
.login-vpn {
  display: flex; align-items: center; gap: 11px;
  margin: 14px 0 0; padding: 10px 12px;
  border: 1px solid var(--line); border-radius: 13px;
  background: rgba(255, 255, 255, .5);
  color: var(--muted); text-align: left; font-size: 13px; line-height: 1.35;
}
.login-vpn-logo { width: 30px; height: 30px; border-radius: 50%; flex: none; object-fit: cover; }
.login-vpn-copy { min-width: 0; }
.login-vpn-link { color: var(--rose-2); font-weight: 600; }
html[data-theme="dark"] .login-vpn { background: rgba(42, 33, 40, .76); }

@media (hover: hover) {
  html[data-theme="dark"] .card:hover {
    box-shadow:
      0 30px 70px rgba(0, 0, 0, .45),
      0 5px 16px rgba(0, 0, 0, .24),
      inset 0 2px 1px rgba(255, 255, 255, .15),
      inset 2px 0 1px rgba(255, 255, 255, .07),
      inset 0 0 0 1px rgba(255, 255, 255, .04),
      inset -2px -2px 2px rgba(0, 0, 0, .2);
  }
}

/* Голосование: открытая сводка, прогресс и публичный список участников. */
.notify-cta,
.vote-summary {
  position: relative; z-index: 2;
  max-width: 680px; margin: 0 auto 16px; padding: 15px 17px;
  display: flex; align-items: center; gap: 13px;
  border: 1px solid rgba(255,255,255,.72); border-radius: 18px;
  background: linear-gradient(145deg, rgba(255,255,255,.62), rgba(255,244,246,.46));
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  backdrop-filter: blur(14px) saturate(1.4);
  box-shadow: var(--shadow-soft);
}
.notify-cta-copy { min-width: 0; display: grid; gap: 3px; flex: 1; }
.notify-cta-copy span, .vote-summary span { color: var(--muted); font-size: 13.5px; line-height: 1.42; }
.notify-cta-icon { width: 26px; height: 26px; color: var(--rose-2); flex: none; }
.notify-cta-icon .ui-icon { width: 100%; height: 100%; }
.notify-cta .btn { flex: none; min-width: auto; padding: 10px 15px; }
.vote-summary { display: grid; gap: 4px; border-left: 4px solid var(--rose); }
.vote-summary.vote-open {
  --countdown-tone: 36%;
  --countdown-tone-bright: 45%;
  min-height: 56px; padding: 10px 14px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(255,255,255,.72); text-align: center;
}
.vote-countdown {
  display: flex; align-items: baseline; justify-content: center; flex-wrap: wrap;
  gap: 4px 7px; max-width: 100%;
}
.vote-countdown-label {
  color: var(--muted); font-size: 13px; font-weight: 600; line-height: 1.3;
}
.vote-summary.vote-open [data-vote-countdown] {
  display: block; max-width: 100%;
  color: hsl(var(--countdown-hue, 132), 68%, var(--countdown-tone));
  font: 750 var(--countdown-font-size, 18px)/1.3 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-variant-numeric: tabular-nums; text-wrap: balance;
  transition: font-size .45s var(--ease), color .9s linear;
}
.vote-summary.vote-open [data-countdown-scale="fixed"] { font-size: 18px; }
@supports ((background-clip: text) or (-webkit-background-clip: text)) {
  .vote-summary.vote-open [data-vote-countdown] {
    background: linear-gradient(105deg,
      hsl(var(--countdown-hue, 132), 70%, var(--countdown-tone)),
      hsl(calc(var(--countdown-hue, 132) - 10), 78%, var(--countdown-tone-bright)));
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}
.vote-summary.vote-resolved { border-left-color: #6e9a72; }
.vote-summary.vote-tie { border-left-color: #b78b45; }
.vote-summary.vote-no_winner, .vote-summary.vote-unconfigured { border-left-color: #9a8e93; }

.vote-progress {
  margin-top: 14px; padding: 12px 13px;
  border: 1px solid var(--line); border-radius: 15px;
  background: rgba(255,255,255,.36);
}
.vote-progress-head { display: flex; align-items: baseline; gap: 6px; }
.vote-progress-head b {
  display: inline-block; color: var(--rose-2); font-size: 16px;
  font-variant-numeric: tabular-nums;
}
.vote-progress-head b.vote-count-updated {
  animation: vote-count-confirm .3s cubic-bezier(.22,.61,.36,1) both;
}
@keyframes vote-count-confirm {
  from { opacity: .35; transform: translateY(3px); }
  to { opacity: 1; transform: translateY(0); }
}
.vote-progress-head span, .vote-empty { color: var(--muted); font-size: 12.5px; }
.vote-progress-track {
  height: 7px; margin-top: 8px; overflow: hidden; border-radius: 99px;
  background: rgba(153,117,126,.15);
}
.vote-progress-track i {
  display: block; width: var(--vote-width, 0); height: 100%; border-radius: inherit;
  background: linear-gradient(90deg, var(--rose), var(--peach));
  transition: width .35s var(--ease);
}
.vote-progress-track i.vote-progress-updated {
  transform-origin: left center;
  animation: vote-progress-confirm .35s cubic-bezier(.22,.61,.36,1) both;
}
@keyframes vote-progress-confirm {
  from { opacity: .58; transform: scaleY(.68); }
  to { opacity: 1; transform: scaleY(1); }
}
.vote-progress.full .vote-progress-track i { background: linear-gradient(90deg, #9a5867, #6f8d73); }
.participants { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 10px; }
.participant {
  display: inline-flex; align-items: center; gap: 6px; min-width: 0;
  padding: 4px 9px 4px 4px; border: 1px solid var(--line); border-radius: 999px;
  background: rgba(255,255,255,.55); font-size: 12.5px;
}
.participant img, .participant-ph {
  width: 26px; height: 26px; border-radius: 50%; flex: none; object-fit: cover;
}
.participant-ph { display: grid; place-items: center; color: #fff; background: linear-gradient(135deg,var(--rose),var(--rose-2)); font-weight: 700; }
.participant small { color: var(--muted); }
.participant.withdrawn { opacity: .58; text-decoration: line-through; }
.participants-more {
  align-self: center; padding: 4px 3px;
  color: var(--muted); font-size: 12.5px; white-space: nowrap;
}
.vote-empty { margin: 8px 0 0; }
.winner-ribbon {
  position: absolute; z-index: 5; top: 12px; right: 12px;
  padding: 7px 12px; border-radius: 999px; color: #fff; font-size: 12px; font-weight: 700;
  background: linear-gradient(135deg,#5d8b65,#7aa47d); box-shadow: 0 5px 16px rgba(48,91,58,.28);
}
.winner-ribbon.tie { background: linear-gradient(135deg,#9d7338,#bd9659); }
.winner-ribbon.inflow { position: static; width: fit-content; margin-bottom: 9px; }
.card.vote-winner { border-color: rgba(92,148,103,.7); box-shadow: 0 20px 52px rgba(62,119,72,.18), inset 0 1px 0 rgba(255,255,255,.7); }
.card.vote-loser { opacity: .68; filter: saturate(.7); }
.card.vote-tie-leader { border-color: rgba(183,139,69,.72); }
.withdrawn-note { align-self: center; color: var(--muted); font-size: 12.5px; }
.btn:disabled { cursor: not-allowed; opacity: .55; transform: none; box-shadow: none; }
.btn.book.vote-ended:disabled {
  cursor: default;
  opacity: 1;
  border: 1px solid var(--line);
  color: var(--muted);
  background: color-mix(in srgb, var(--card) 82%, transparent);
  box-shadow: none;
}

html[data-theme="dark"] .notify-cta,
html[data-theme="dark"] .vote-summary,
html[data-theme="dark"] .vote-progress,
html[data-theme="dark"] .participant {
  background: rgba(41,32,39,.72); border-color: var(--line); color: var(--ink);
}
html[data-theme="dark"] .vote-summary.vote-open {
  --countdown-tone: 66%;
  --countdown-tone-bright: 73%;
}
html[data-theme="dark"] .vote-progress-track { background: rgba(255,255,255,.09); }
html[data-theme="dark"] .card.vote-winner { border-color: rgba(118,174,129,.64); }

@media (max-width: 600px) {
  .notify-cta { align-items: flex-start; flex-wrap: wrap; }
  .notify-cta .btn { width: 100%; }
  .vote-summary { margin-left: 2px; margin-right: 2px; }
  .participant { max-width: 100%; }
}

@media (forced-colors: active) {
  .vote-summary.vote-open [data-vote-countdown] {
    background: none; color: CanvasText; -webkit-text-fill-color: currentColor;
  }
}

/* ==========================================================================
   Дружеское оформление

   Это отдельный визуальный слой поверх проверенной романтической темы.
   Ни один селектор ниже не затрагивает страницы без data-skin="friends":
   старый дизайн остаётся доступен без второй копии шаблонов и компонентов.
   ========================================================================== */
.ui-icon {
  display: inline-block;
  width: 1.08em; height: 1.08em;
  flex: none; vertical-align: -.16em;
  fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
}
.ui-icon-gather { fill: currentColor; stroke: none; }
.ui-icon-spark { fill: currentColor; stroke: none; }

html[data-skin="friends"] {
  --bg: #f6f3e9;
  --card: rgba(255, 254, 249, .93);
  --ink: #29283d;
  --muted: #686f82;
  /* Старые семантические переменные сохраняем как API компонентов,
     но в этом скине они означают primary / primary-strong / primary-soft. */
  --rose: #4b59a6;
  --rose-2: #34417f;
  --rose-soft: #ebeafd;
  --peach: #d6a13d;
  --line: #dcdbea;
  --friends-teal: #238e89;
  --friends-teal-soft: #e1f3ef;
  --friends-amber: #d79a2f;
  --friends-indigo: #4b59a6;
  --choice-selected-bg: #39347e;
  --shadow: 0 18px 48px rgba(52, 50, 108, .16);
  --shadow-soft: 0 7px 24px rgba(52, 50, 108, .10);
}
html[data-skin="friends"] body {
  background:
    linear-gradient(150deg, #faf8ef 0%, #f1f2e8 43%, #e9f3ef 100%);
  color: var(--ink);
}
html[data-skin="friends"] body::before {
  background:
    radial-gradient(44% 38% at 10% 12%, rgba(90, 83, 182, .23), transparent 72%),
    radial-gradient(42% 38% at 90% 22%, rgba(17, 139, 134, .21), transparent 71%),
    radial-gradient(46% 42% at 72% 92%, rgba(211, 154, 50, .14), transparent 73%);
}
html[data-skin="friends"] body::after {
  background:
    radial-gradient(36% 33% at 82% 72%, rgba(85, 78, 174, .13), transparent 72%),
    radial-gradient(36% 32% at 8% 82%, rgba(17, 139, 134, .14), transparent 72%);
}
html[data-skin="friends"] ::selection { background: var(--friends-teal); }

/* Точки, орбиты и редкие искры вместо летящих сердечек. */
.bg-gather {
  position: fixed; inset: 0; z-index: 0; overflow: hidden;
  pointer-events: none;
}
.bg-gather span { position: absolute; display: block; }
.bg-gather .orbit {
  width: 190px; height: 190px; border: 1px solid rgba(85, 78, 174, .13);
  border-radius: 50%; animation: gather-orbit 28s ease-in-out infinite alternate;
}
.bg-gather .o1 { left: -82px; top: 18%; }
.bg-gather .o2 {
  width: 260px; height: 260px; right: -145px; bottom: 9%;
  border-color: rgba(17, 139, 134, .14); animation-delay: -9s;
}
.bg-gather .dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--friends-indigo); opacity: .18;
  animation: gather-float 12s ease-in-out infinite alternate;
}
.bg-gather .d1 { left: 12%; top: 26%; }
.bg-gather .d2 { right: 13%; top: 43%; width: 6px; height: 6px; background: var(--friends-teal); animation-delay: -4s; }
.bg-gather .d3 { left: 20%; bottom: 15%; width: 7px; height: 7px; background: var(--friends-amber); animation-delay: -7s; }
.bg-gather .spark {
  color: var(--friends-amber); opacity: .18; font-size: 18px;
  animation: gather-spark 7s ease-in-out infinite;
}
.bg-gather .s1 { right: 10%; top: 17%; }
.bg-gather .s2 { left: 8%; bottom: 28%; font-size: 12px; animation-delay: -3s; }
@keyframes gather-orbit {
  to { transform: translate(18px, -14px) rotate(14deg) scale(1.08); }
}
@keyframes gather-float {
  to { transform: translate(14px, -22px) scale(1.35); opacity: .08; }
}
@keyframes gather-spark {
  0%, 100% { transform: scale(.72) rotate(0); opacity: .09; }
  50% { transform: scale(1.08) rotate(35deg); opacity: .22; }
}

html[data-skin="friends"] .bg-smoke .turb { mix-blend-mode: multiply; opacity: .45; }
html[data-skin="friends"] .bg-smoke #smokeFade stop:nth-child(1) { stop-color: var(--friends-indigo); }
html[data-skin="friends"] .bg-smoke #smokeFade stop:nth-child(2) { stop-color: var(--friends-teal); }
html[data-skin="friends"] .bg-smoke #smokeFade stop:nth-child(3) { stop-color: var(--friends-teal); }
html[data-skin="friends"] .bg-smoke span:nth-child(2) {
  background:
    radial-gradient(46% 48% at 40% 40%, rgba(85, 78, 174, .42), transparent 67%),
    radial-gradient(36% 34% at 66% 56%, rgba(60, 54, 134, .25), transparent 69%);
}
html[data-skin="friends"] .bg-smoke span:nth-child(3) {
  background:
    radial-gradient(46% 44% at 56% 40%, rgba(211, 154, 50, .28), transparent 67%),
    radial-gradient(34% 38% at 38% 60%, rgba(17, 139, 134, .34), transparent 69%);
}
html[data-skin="friends"] .bg-smoke span:nth-child(4) {
  background:
    radial-gradient(46% 46% at 44% 50%, rgba(82, 121, 180, .28), transparent 67%),
    radial-gradient(34% 34% at 64% 42%, rgba(17, 139, 134, .25), transparent 69%);
}

/* Шапка и фирменный gather-mark. Орнамент меняется внутри общего слота, а
   заголовок и весь следующий поток сохраняют координаты. */
html[data-skin="friends"] .hero h1 {
  --display-ink-gradient: linear-gradient(118deg, #302c70, #5851b1 54%, #0d827e);
  --display-ink-fallback: var(--friends-indigo);
}
.hero-ornament {
  width: 100%; height: 32px; margin-top: 10px;
  display: grid; place-items: center;
}
.hero-ornament :is(.hero-mark, .hearts) { margin: 0; }
.hero-mark {
  width: 32px; height: 32px;
  color: var(--friends-indigo);
}
.hero-mark .ui-icon { width: 100%; height: 100%; }
html[data-skin="friends"] .author,
html[data-skin="friends"] .greet {
  background: rgba(255, 254, 249, .72);
  border-color: rgba(85, 78, 174, .18);
}
html[data-skin="friends"] .author-av.ph,
html[data-skin="friends"] .greet .g-heart {
  color: #fff; background: linear-gradient(135deg, var(--friends-indigo), var(--friends-teal));
}
html[data-skin="friends"] .author-av.ph .ui-icon { width: 15px; height: 15px; }
html[data-skin="friends"] .greet .g-heart .ui-icon { width: 17px; height: 17px; }
html[data-skin="friends"] .cat-desc { color: #55566a; }

/* Карточка-план: меньше «открытки», больше самостоятельной композиции.
   На широком экране медиа и содержание образуют две колонки; мобильный вариант
   остаётся вертикальным и удобным для большого пальца. */
html[data-skin="friends"] .card {
  overflow: hidden;
  border: 1px solid rgba(85, 78, 174, .22);
  border-radius: 18px 28px 28px 18px;
  background: var(--card);
  box-shadow: inset 4px 0 var(--friends-indigo), var(--shadow-soft);
}
html[data-skin="friends"] .card:nth-child(3n + 2) {
  box-shadow: inset 4px 0 var(--friends-teal), var(--shadow-soft);
}
html[data-skin="friends"] .card:nth-child(3n) {
  box-shadow: inset 4px 0 var(--friends-amber), var(--shadow-soft);
}
html[data-skin="friends"] .card .body {
  position: relative;
  background:
    radial-gradient(circle at calc(100% - 18px) 19px, rgba(85,78,174,.10) 0 3px, transparent 3.5px),
    radial-gradient(circle at calc(100% - 31px) 19px, rgba(17,139,134,.10) 0 3px, transparent 3.5px),
    transparent;
}
html[data-skin="friends"] .card .title {
  color: #2d2c43;
}
html[data-skin="friends"] .gallery {
  height: auto; min-height: 224px;
  background: linear-gradient(110deg, #e7e7f2 25%, #f2f1e9 42%, #dceeea 58%);
}
html[data-skin="friends"] .gallery img,
html[data-skin="friends"] .gallery video { height: 252px; min-height: 224px; }
html[data-skin="friends"] .gal-nav { color: var(--friends-indigo); }
html[data-skin="friends"] .when,
html[data-skin="friends"] .place {
  color: #626378;
}
html[data-skin="friends"] .meta-icon {
  width: 25px; height: 25px; display: inline-grid; place-items: center;
  border-radius: 8px; color: var(--friends-indigo);
  background: var(--rose-soft);
}
html[data-skin="friends"] .meta-icon .ui-icon { width: 15px; height: 15px; }
html[data-skin="friends"] .place .meta-icon { color: #087d78; background: var(--friends-teal-soft); }
html[data-skin="friends"] .links a {
  color: var(--friends-indigo); background: rgba(235,234,253,.75);
  border-color: rgba(85,78,174,.16);
}
html[data-skin="friends"] .chip-suggest {
  color: var(--friends-indigo); border-color: rgba(85,78,174,.35);
  background: rgba(255,254,249,.74);
}
html[data-skin="friends"] .chip-suggest .ui-icon { width: 15px; height: 15px; }

html[data-skin="friends"] .card.booked-me {
  border: 1.5px solid transparent;
  background:
    linear-gradient(rgba(255,254,249,.97), rgba(246,251,247,.97)) padding-box,
    linear-gradient(125deg, var(--friends-indigo), var(--friends-teal), #73aaa5) border-box;
  background-size: 100% 100%;
  animation: none;
  box-shadow: 0 18px 46px rgba(55, 78, 125, .20), 0 0 0 5px rgba(17,139,134,.06);
}
html[data-skin="friends"] .seal {
  color: #fff; background: linear-gradient(145deg, var(--friends-teal), #08706c);
  box-shadow: 0 8px 20px rgba(4, 91, 87, .32);
}
html[data-skin="friends"] .winner-ribbon {
  display: inline-flex; align-items: center; gap: 5px;
  color: #fff;
  background: linear-gradient(135deg, #27856a, #1f6d58);
  box-shadow: 0 5px 16px rgba(31, 111, 88, .25);
}
html[data-skin="friends"] .winner-ribbon .ui-icon { width: 13px; height: 13px; }
html[data-skin="friends"] .card.vote-winner {
  border-color: rgba(39,133,106,.76);
  box-shadow: 0 18px 48px rgba(31,111,88,.18);
}
html[data-skin="friends"] .card.vote-loser { opacity: .72; filter: saturate(.76); }

html[data-skin="friends"] .vote-progress {
  border-color: rgba(85,78,174,.14); border-radius: 12px;
  background: rgba(239,239,248,.62);
}
html[data-skin="friends"] .vote-progress-head b { color: var(--friends-indigo); }
html[data-skin="friends"] .vote-progress-track { background: rgba(85,78,174,.11); }
html[data-skin="friends"] .vote-progress-track i {
  background: linear-gradient(90deg, var(--friends-indigo), var(--friends-teal));
}
html[data-skin="friends"] .participant {
  background: rgba(255,254,249,.80); border-color: rgba(85,78,174,.14);
}
html[data-skin="friends"] .participant-ph {
  background: linear-gradient(135deg, var(--friends-indigo), var(--friends-teal));
}
html[data-skin="friends"] .actions {
  box-shadow: inset 0 1px rgba(85,78,174,.10);
}
html[data-skin="friends"] .btn.book,
html[data-skin="friends"] .login-corner,
html[data-skin="friends"] .fab {
  background: linear-gradient(135deg, var(--friends-indigo), #494290 62%, #0f7e7a);
  box-shadow: 0 8px 22px rgba(62, 58, 135, .28);
}
html[data-skin="friends"] .btn.book {
  color: #fff;
}
html[data-skin="friends"] .btn.book.on {
  background: linear-gradient(135deg, var(--friends-teal), #08736f);
}
html[data-skin="friends"] .btn.ghost {
  color: var(--friends-indigo); border-color: rgba(85,78,174,.24);
}
html[data-skin="friends"] .btn.ghost:hover { background: rgba(235,234,253,.74); }
html[data-skin="friends"] .vote-summary,
html[data-skin="friends"] .notify-cta,
html[data-skin="friends"] .share-cta {
  background: linear-gradient(145deg, rgba(255,254,249,.74), rgba(235,244,240,.62));
  border-color: rgba(85,78,174,.15);
  box-shadow: var(--shadow-soft);
}
html[data-skin="friends"] .vote-summary:not(.vote-open) { border-left-color: var(--friends-indigo); }
html[data-skin="friends"] .vote-summary.vote-resolved { border-left-color: #27856a; }
html[data-skin="friends"] .promo-btn {
  color: var(--friends-indigo); border-color: rgba(85,78,174,.16);
  background: rgba(255,254,249,.68);
}
html[data-skin="friends"] .archive-fold > summary {
  background: rgba(255,254,249,.62); border-color: rgba(85,78,174,.17);
  font-family: inherit;
}
html[data-skin="friends"] .empty .big {
  width: 52px; height: 52px; margin: 0 auto 12px;
  color: var(--friends-indigo);
}
html[data-skin="friends"] .empty .big .ui-icon { width: 100%; height: 100%; }
.footer-mark {
  width: 24px; height: 24px; margin: 0;
  color: var(--friends-indigo); opacity: .68;
}
.footer-mark .ui-icon { width: 100%; height: 100%; }
html[data-skin="friends"] .login-dlg .ld-heart {
  width: 42px; height: 42px; margin: 0 auto 8px;
  color: var(--friends-indigo); filter: none;
}
html[data-skin="friends"] .login-dlg .ld-heart .ui-icon { width: 100%; height: 100%; }
html[data-skin="friends"] .confetti-heart {
  color: var(--particle-color, var(--friends-teal));
}
html[data-skin="friends"] .confetti-gather {
  font-weight: 800; line-height: 1;
}

html[data-skin="friends"][data-theme="dark"] {
  --bg: #121523;
  --card: rgba(29, 33, 51, .94);
  --ink: #f2f0e8;
  --muted: #aaabba;
  --rose: #918ce7;
  --rose-2: #c0bcff;
  --rose-soft: rgba(119, 113, 220, .16);
  --peach: #d6a84c;
  --line: #343a56;
  --friends-indigo: #918ce7;
  --friends-teal: #54bdb5;
  --friends-teal-soft: rgba(48, 164, 155, .15);
  --friends-amber: #e0ad4c;
  --choice-selected-bg: #3f4b86;
  --shadow: 0 20px 52px rgba(0,0,0,.35);
  --shadow-soft: 0 8px 28px rgba(0,0,0,.25);
}
html[data-skin="friends"][data-theme="dark"] body {
  background: linear-gradient(150deg, #111422, #171a2a 48%, #112526);
}
html[data-skin="friends"][data-theme="dark"] body::before {
  background:
    radial-gradient(44% 38% at 10% 12%, rgba(100, 92, 206, .25), transparent 72%),
    radial-gradient(42% 38% at 90% 22%, rgba(26, 137, 132, .18), transparent 71%),
    radial-gradient(46% 42% at 72% 92%, rgba(180, 126, 36, .12), transparent 73%);
}
html[data-skin="friends"][data-theme="dark"] .hero h1 {
  --display-ink-gradient: linear-gradient(118deg, #d1ceff, #9b96ed 52%, #67ccc4);
}
html[data-skin="friends"][data-theme="dark"] .cat-desc { color: #c5c5d1; }
html[data-skin="friends"][data-theme="dark"] .card,
html[data-skin="friends"][data-theme="dark"] .card.booked-me {
  background: var(--card);
  border-color: rgba(145,140,231,.31);
  border-left-color: var(--friends-indigo);
}
html[data-skin="friends"][data-theme="dark"] .card:nth-child(3n + 2) { border-left-color: var(--friends-teal); }
html[data-skin="friends"][data-theme="dark"] .card:nth-child(3n) { border-left-color: var(--friends-amber); }
html[data-skin="friends"][data-theme="dark"] .card .body { background-color: transparent; }
html[data-skin="friends"][data-theme="dark"] .card .title { color: var(--ink); }
html[data-skin="friends"][data-theme="dark"] .when,
html[data-skin="friends"][data-theme="dark"] .place { color: #b6b7c5; }
html[data-skin="friends"][data-theme="dark"] .vote-progress,
html[data-skin="friends"][data-theme="dark"] .participant {
  color: var(--ink); background: rgba(12,15,27,.43); border-color: rgba(145,140,231,.20);
}
html[data-skin="friends"][data-theme="dark"] .participant {
  background: rgba(27,31,48,.88);
}
html[data-skin="friends"][data-theme="dark"] .vote-progress-track { background: rgba(255,255,255,.09); }
html[data-skin="friends"][data-theme="dark"] .author,
html[data-skin="friends"][data-theme="dark"] .greet,
html[data-skin="friends"][data-theme="dark"] .promo-btn,
html[data-skin="friends"][data-theme="dark"] .archive-fold > summary,
html[data-skin="friends"][data-theme="dark"] .share-cta,
html[data-skin="friends"][data-theme="dark"] .notify-cta,
html[data-skin="friends"][data-theme="dark"] .vote-summary {
  color: var(--ink); background: rgba(28,32,49,.74); border-color: rgba(145,140,231,.20);
}
html[data-skin="friends"][data-theme="dark"] .links a {
  color: #c3c0ff; background: rgba(119,113,220,.13); border-color: rgba(145,140,231,.18);
}
html[data-skin="friends"][data-theme="dark"] .chip-suggest {
  color: #c3c0ff; background: rgba(28,32,49,.76); border-color: rgba(145,140,231,.34);
}
html[data-skin="friends"][data-theme="dark"] .btn.ghost {
  color: #c3c0ff; background: rgba(119,113,220,.08);
  border-color: rgba(145,140,231,.24);
}
html[data-skin="friends"][data-theme="dark"] .btn.ghost:hover {
  background: rgba(119,113,220,.16);
}

@media (max-width: 619px) {
  html[data-skin="friends"] .card {
    border-radius: 16px 23px 23px 16px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .bg-gather span { animation: none !important; }
}

/* Победитель — единый семантический зелёный статус во всех темах. Он заметен
   не только цветом: текстовая лента остаётся основным маркером, а личная
   галочка встроена в неё и больше не спорит с печатью в том же углу. */
.card.vote-winner {
  --winner-accent: #4f815b;
  --winner-border: rgba(79,129,91,.84);
  --winner-tint: rgba(79,129,91,.08);
  --winner-shadow: rgba(56,107,67,.24);
  --winner-ribbon-start: #4f815b;
  --winner-ribbon-end: #396746;
  border-width: 2px;
  border-color: var(--winner-border);
  box-shadow:
    0 22px 54px var(--winner-shadow),
    0 0 0 6px color-mix(in srgb, var(--winner-accent) 9%, transparent),
    inset 0 1px 0 rgba(255,255,255,.72);
}
html[data-skin] .card.vote-winner > .body {
  background-color: var(--winner-tint);
}
.card.vote-winner.booked-me::before {
  background: linear-gradient(135deg,
    var(--winner-accent),
    color-mix(in srgb, var(--winner-accent) 68%, white),
    var(--winner-accent));
  background-size: 100% 100%;
  animation: none;
}
.card.vote-winner .winner-ribbon {
  display: inline-flex; align-items: center; gap: 6px;
  color: #fff;
  background: linear-gradient(135deg,
    var(--winner-ribbon-start), var(--winner-ribbon-end));
  box-shadow: 0 7px 20px color-mix(in srgb, var(--winner-accent) 36%, transparent);
  animation: winner-status-in .32s cubic-bezier(.22,.61,.36,1) both;
}
.card.vote-winner .winner-ribbon .ui-icon {
  width: 14px; height: 14px;
}
.card.vote-winner .winner-ribbon .winner-check {
  stroke-width: 2.15;
}
@keyframes winner-status-in {
  from { opacity: 0; transform: translateY(-3px) scale(.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

html[data-skin="friends"] .card.vote-winner {
  --winner-accent: #27856a;
  --winner-border: rgba(39,133,106,.88);
  --winner-tint: rgba(39,133,106,.08);
  --winner-shadow: rgba(31,111,88,.24);
  --winner-ribbon-start: #27856a;
  --winner-ribbon-end: #1d6953;
  border-width: 2px;
}
html[data-theme="dark"] .card.vote-winner {
  --winner-accent: #72c89f;
  --winner-border: rgba(114,200,159,.78);
  --winner-tint: rgba(114,200,159,.11);
  --winner-shadow: rgba(28,112,78,.31);
  --winner-ribbon-start: #32785c;
  --winner-ribbon-end: #235e47;
  box-shadow:
    0 22px 56px rgba(10,34,25,.46),
    0 0 0 6px rgba(114,200,159,.09),
    inset 0 1px 0 rgba(255,255,255,.13);
}
html[data-skin="friends"][data-theme="dark"] .card.vote-winner {
  border-color: var(--winner-border);
  background: var(--card);
}
html[data-skin="friends"][data-theme="dark"] .card.vote-winner > .body {
  background-color: var(--winner-tint);
}

@media (prefers-reduced-motion: reduce) {
  .card.vote-winner .winner-ribbon { animation: none !important; }
  .card.vote-confirmed::after {
    animation: none !important;
    transform: none;
    opacity: .82;
    box-shadow: inset 0 0 0 2px var(--vote-feedback-accent);
  }
  .btn.book.vote-label-confirmed :is(.vote-button-label, .ui-icon),
  .card.vote-confirmed .seal .ui-icon-check path,
  .vote-progress-head b.vote-count-updated,
  .vote-progress-track i.vote-progress-updated {
    animation: none !important;
  }
}

/* --- планы и отзывы отдельного события ---------------------------------- */
.share-choice-block { display: grid; justify-items: center; gap: 10px; }
.share-choice-block p { margin-bottom: 0; }
.share-choice-sep {
  width: min(360px, 82%); height: 1px; margin: 18px auto;
  background: linear-gradient(90deg, transparent, var(--line), transparent);
}
.share-cta .want-on { color: var(--rose-2); background: var(--rose-soft); }
.review-cta {
  position: relative; z-index: 1;
  max-width: 680px; margin: 16px auto 0; padding: 21px;
  border: 1px solid rgba(255,255,255,.68); border-radius: 18px;
  background: linear-gradient(150deg, rgba(255,252,251,.72), rgba(255,246,246,.56));
  box-shadow: var(--shadow-soft);
}
.review-cta h2 {
  margin: 0 0 5px; color: var(--rose-2); font: 600 25px/1.2 var(--serif);
}
.review-cta > p { margin: 0; color: var(--muted); font-size: 14px; }
.review-form { display: grid; gap: 15px; margin-top: 17px; }
.star-rating {
  display: flex; flex-direction: row-reverse; justify-content: flex-end;
  gap: 3px; margin: 0; padding: 0; border: 0;
}
.star-rating legend { width: 100%; margin-bottom: 5px; font-size: 13px; font-weight: 700; }
.star-rating input { position: absolute; inline-size: 1px; block-size: 1px; opacity: 0; }
.star-rating label {
  color: #d9cbc8; cursor: pointer; font-size: 34px; line-height: 1;
  transition: color .15s, transform .15s;
}
.star-rating label:hover,
.star-rating label:hover ~ label,
.star-rating input:checked ~ label { color: #d9a330; }
.star-rating label:hover { transform: translateY(-1px); }
.star-rating input:focus-visible + label { outline: 2px solid var(--rose); outline-offset: 3px; }
.review-text-field { display: grid; gap: 6px; color: var(--ink); font-size: 13px; font-weight: 700; }
.review-text-field small { color: var(--muted); font-weight: 400; }
.review-text-field textarea {
  width: 100%; min-height: 105px; padding: 12px 13px; resize: vertical;
  color: var(--ink); font: inherit; font-size: 15px; line-height: 1.45;
  background: rgba(255,255,255,.74); border: 1px solid var(--line); border-radius: 12px;
}
.review-text-field textarea:focus { outline: 2px solid color-mix(in srgb, var(--rose) 38%, transparent); border-color: var(--rose); }
.review-private-note { padding-top: 12px; font-size: 12.5px !important; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
html[data-skin="friends"] .review-cta {
  background: linear-gradient(145deg, rgba(255,254,249,.78), rgba(235,244,240,.68));
  border-color: rgba(85,78,174,.16);
}
html[data-skin="friends"] .review-cta h2 { color: var(--friends-indigo); }
html[data-theme="dark"] .review-cta {
  color: var(--ink); background: rgba(28,32,49,.78); border-color: rgba(145,140,231,.2);
}
html[data-theme="dark"] .review-text-field textarea {
  color: var(--ink); background: rgba(12,15,27,.52); border-color: rgba(255,255,255,.13);
}
@media (max-width: 619px) {
  .review-cta { margin-inline: 0; padding: 18px 16px; }
  .review-form .btn { width: 100%; }
}

/* --- отдельная публичная ссылка на обзор ---------------------------------
   Карточка обзора приходит из общего профильного partial, а эта оболочка
   превращает её в полноценную гостевую страницу обеих тем. */
body.review-share-page {
  background:
    radial-gradient(700px 360px at 90% -120px, rgba(214, 150, 150, .12), transparent 65%),
    linear-gradient(180deg, #fdf6f4, #f9eef0 55%, #f6edf2);
  background-attachment: fixed;
}
body.review-share-page::before,
body.review-share-page::after { content: none; display: none; }
/* Тот же CSS-фолбэк, что в кабинете. WebGL-шейдер и так общий, но без него
   публичный обзор раньше получал более яркие клубы из гостевой темы. */
.review-share-page .bg-smoke .turb {
  opacity: .5; mix-blend-mode: multiply; animation: none;
}
.review-share-page .bg-smoke #smokeFade stop:nth-child(1) {
  stop-color: #b65f6f; stop-opacity: .5;
}
.review-share-page .bg-smoke #smokeFade stop:nth-child(2) {
  stop-color: #cf7d92; stop-opacity: .28;
}
.review-share-page .bg-smoke #smokeFade stop:nth-child(3) {
  stop-color: #cf7d92; stop-opacity: 0;
}
.review-share-page .bg-smoke span { filter: blur(80px); }
.review-share-page .bg-smoke span:nth-child(2) {
  width: 80vw; height: 80vw; left: -16vw; top: -18vh;
  background: radial-gradient(46% 48% at 40% 40%, rgba(231,120,145,.4), transparent 66%);
  animation: smoke-a 22s ease-in-out infinite alternate;
}
.review-share-page .bg-smoke span:nth-child(3) {
  width: 70vw; height: 70vw; right: -18vw; top: 16vh;
  background: radial-gradient(46% 44% at 56% 40%, rgba(214,150,200,.34), transparent 66%);
  animation: smoke-b 26s ease-in-out infinite alternate;
}
.review-share-page .bg-smoke span:nth-child(4) {
  width: 86vw; height: 86vw; left: 0; bottom: -32vh;
  background: radial-gradient(46% 46% at 44% 50%, rgba(226,176,138,.32), transparent 66%);
  animation: smoke-c 30s ease-in-out infinite alternate;
}
html[data-theme="dark"] .review-share-page .bg-smoke .turb {
  opacity: .28; mix-blend-mode: screen;
}
html[data-theme="dark"] .review-share-page .bg-smoke span:nth-child(2) {
  background: radial-gradient(46% 48% at 40% 40%, rgba(126,65,81,.42), transparent 66%);
}
html[data-theme="dark"] .review-share-page .bg-smoke span:nth-child(3) {
  background: radial-gradient(46% 44% at 56% 40%, rgba(91,65,103,.34), transparent 66%);
}
html[data-theme="dark"] .review-share-page .bg-smoke span:nth-child(4) {
  background: radial-gradient(46% 46% at 44% 50%, rgba(130,85,65,.3), transparent 66%);
}
html[data-skin="friends"] .review-share-page .bg-smoke .turb {
  filter: hue-rotate(218deg) saturate(.88) brightness(1.03);
}
html[data-skin="friends"] .review-share-page .bg-smoke span:nth-child(2) {
  background: radial-gradient(46% 48% at 40% 40%, rgba(76,97,184,.34), transparent 66%);
}
html[data-skin="friends"] .review-share-page .bg-smoke span:nth-child(3) {
  background: radial-gradient(46% 44% at 56% 40%, rgba(45,157,149,.28), transparent 66%);
}
html[data-skin="friends"] .review-share-page .bg-smoke span:nth-child(4) {
  background: radial-gradient(46% 46% at 44% 50%, rgba(221,164,58,.25), transparent 66%);
}
html[data-theme="dark"][data-skin="friends"] .review-share-page .bg-smoke span:nth-child(2) {
  background: radial-gradient(46% 48% at 40% 40%, rgba(70,84,159,.4), transparent 66%);
}
html[data-theme="dark"][data-skin="friends"] .review-share-page .bg-smoke span:nth-child(3) {
  background: radial-gradient(46% 44% at 56% 40%, rgba(38,127,122,.3), transparent 66%);
}
html[data-theme="dark"][data-skin="friends"] .review-share-page .bg-smoke span:nth-child(4) {
  background: radial-gradient(46% 46% at 44% 50%, rgba(142,103,40,.25), transparent 66%);
}
@media (max-width: 560px) {
  body.review-share-page .bg-smoke:not(.has-ink) .turb { display: block; }
}
.review-share-page .review-share-wrap { max-width: 720px; padding-bottom: 72px; }
.review-share-hero { padding-top: 14px; margin-bottom: 25px; }
.review-share-eyebrow {
  display: inline-flex; align-items: center; justify-content: center;
  margin: 0 0 9px; padding: 5px 12px; border: 1px solid rgba(182,95,111,.18);
  border-radius: 999px; color: var(--rose-2); background: rgba(255,255,255,.48);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  font-size: 11px; font-weight: 750; letter-spacing: .09em; text-transform: uppercase;
}
.review-share-page .profile-review-page {
  width: min(620px, 100%); margin: 0 auto; padding: 0;
}
.review-share-card-shell {
  --review-share-cover-height: min(340px, 45vh);
  position: relative; isolation: isolate;
}
.review-share-page .profile-review-page .profile-review-widget {
  border: 1px solid rgba(255,255,255,.70);
  background: linear-gradient(150deg, rgba(255,253,251,.78), rgba(255,246,246,.64));
  -webkit-backdrop-filter: blur(18px) saturate(1.25); backdrop-filter: blur(18px) saturate(1.25);
  box-shadow: 0 24px 64px rgba(92,48,60,.18), inset 0 1px 0 rgba(255,255,255,.78);
}
.review-share-page .profile-review-cover { height: var(--review-share-cover-height); }
.review-share-page .profile-review-cover::after {
  content: ""; position: absolute; inset: auto 0 0; height: 34%; pointer-events: none;
  background: linear-gradient(transparent, rgba(45,25,31,.17));
}
.review-share-page .profile-review-cover { position: relative; }
.review-share-page .profile-review-widget-body { padding: 24px 22px 27px; }
.review-share-page .profile-review-title { margin-right: 86px; }
.review-share-report {
  position: absolute; z-index: 4; top: 47px; right: 22px; margin: 0;
  white-space: nowrap;
}
.review-share-card-shell.has-cover .review-share-report {
  top: calc(var(--review-share-cover-height) + 47px);
}
.review-share-cta {
  display: grid; justify-items: center; gap: 10px;
  margin: 18px 0 0; padding: 22px 20px 23px; text-align: center;
  border: 1px solid rgba(255,255,255,.68); border-radius: 19px;
  background: linear-gradient(150deg, rgba(255,252,251,.68), rgba(255,246,246,.50));
  -webkit-backdrop-filter: blur(14px) saturate(1.35); backdrop-filter: blur(14px) saturate(1.35);
  box-shadow: 0 12px 30px rgba(150,80,95,.11), inset 0 1px 0 rgba(255,255,255,.76);
}
.review-share-cta h2 {
  margin: 0; color: var(--rose-2); font: 600 25px/1.2 var(--serif);
}
.review-share-cta p {
  max-width: 480px; margin: 0 0 3px; color: var(--muted); font-size: 14px;
  text-wrap: balance;
}
.review-share-cta form { width: min(100%, 420px); margin: 0; }
.review-share-cta .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  width: min(100%, 420px); min-height: 49px; text-decoration: none;
}
.review-share-cta .ui-icon { width: 18px; height: 18px; }
.review-share-page footer { margin-top: 46px; }

html[data-skin="friends"] body.review-share-page {
  background:
    radial-gradient(760px 420px at 4% -8%, rgba(84, 105, 188, .17), transparent 66%),
    radial-gradient(640px 420px at 102% 28%, rgba(55, 166, 157, .13), transparent 68%),
    radial-gradient(620px 400px at 38% 108%, rgba(223, 166, 66, .11), transparent 68%),
    linear-gradient(180deg, #f8f7f2, #f2f3ef 58%, #f4f1e9);
}
html[data-skin="friends"] .review-share-eyebrow {
  color: var(--friends-indigo); border-color: rgba(85,78,174,.16);
  background: rgba(255,254,249,.62);
}
html[data-skin="friends"] .review-share-page .profile-review-page .profile-review-widget,
html[data-skin="friends"] .review-share-cta {
  border-color: rgba(85,78,174,.17);
  background: linear-gradient(145deg, rgba(255,254,249,.82), rgba(235,244,240,.70));
  box-shadow: 0 18px 48px rgba(55,78,125,.14), inset 0 1px 0 rgba(255,255,255,.78);
}
html[data-skin="friends"] .review-share-cta h2 {
  color: var(--friends-indigo);
}

html[data-theme="dark"] body.review-share-page {
  background:
    radial-gradient(700px 360px at 90% -120px, rgba(117, 65, 80, .24), transparent 65%),
    linear-gradient(180deg, #171418, #21181e 55%, #19161d);
}
html[data-theme="dark"] .review-share-eyebrow {
  color: var(--rose-2); border-color: var(--line); background: rgba(41,32,39,.60);
}
html[data-theme="dark"] .review-share-page .profile-review-page .profile-review-widget,
html[data-theme="dark"] .review-share-cta {
  color: var(--ink); border-color: var(--line); background: rgba(41,32,39,.78);
  box-shadow: 0 24px 64px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.06);
}
html[data-skin="friends"][data-theme="dark"] .review-share-page .profile-review-page .profile-review-widget,
html[data-skin="friends"][data-theme="dark"] .review-share-cta {
  border-color: rgba(145,140,231,.22); background: rgba(28,32,49,.80);
}
html[data-theme="dark"][data-skin="friends"] body.review-share-page {
  background:
    radial-gradient(760px 420px at 4% -8%, rgba(78, 94, 171, .26), transparent 66%),
    radial-gradient(640px 420px at 102% 28%, rgba(35, 130, 126, .18), transparent 68%),
    radial-gradient(620px 400px at 38% 108%, rgba(154, 109, 41, .12), transparent 68%),
    linear-gradient(180deg, #151923, #191f2c 58%, #171b25);
}

@media (max-width: 619px) {
  .review-share-page .review-share-wrap { padding: 24px 14px 62px; }
  .review-share-hero { padding-top: 24px; margin-bottom: 21px; }
  .review-share-hero h1 { font-size: clamp(32px, 10vw, 43px); }
  .review-share-page .profile-review-widget-body { padding: 21px 17px 23px; }
  .review-share-page .profile-review-title { margin-right: 78px; font-size: 24px; }
  .review-share-report { top: 43px; right: 17px; }
  .review-share-card-shell.has-cover .review-share-report {
    top: calc(var(--review-share-cover-height) + 43px);
  }
  .review-share-cta { padding: 19px 16px 20px; }
  .review-share-cta h2 { font-size: 23px; }
  .review-share-cta .btn { width: 100%; }
  .review-share-page footer { margin-top: 40px; }
}

/* Публичные карточки событий остаются вертикальными и на ПК: медиа занимает
   всю ширину карточки сверху, контент и действия идут строго следом. Категория
   /c/ использует широкую ленту, а одиночная /d/ совпадает с 680px-сводкой и
   CTA вокруг неё. До 900 px базовая мобильная геометрия не меняется. */
@media (min-width: 900px) {
  .public-event-page .wrap {
    max-width: 1080px;
    padding: 36px 24px 120px;
  }
  .public-event-page.public-category-page .cards,
  .public-event-page.public-share-page .cards {
    margin-inline: auto;
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch; gap: 26px;
  }
  .public-event-page.public-category-page .cards { width: min(100%, 820px); }
  .public-event-page.public-share-page .cards { width: min(100%, 680px); }
  .public-event-page .card {
    display: flex; flex-direction: column; min-width: 0;
  }
  .public-event-page .card:not(.nophoto) .gal-wrap {
    width: 100%; min-width: 0; height: auto; flex: none;
  }
  .public-event-page .card:not(.nophoto) .gallery {
    width: 100%; height: auto; min-height: 0; aspect-ratio: 16 / 9;
  }
  .public-event-page .card:not(.nophoto) .gallery img,
  .public-event-page .card:not(.nophoto) .gallery video {
    height: 100%; min-height: 0;
  }
  .public-event-page .card .body {
    min-width: 0; flex: 1;
    padding: 22px 24px 24px;
  }
}

/* ========================================================================
   APPLE MATERIAL + INTERACTION CONTRACT
   Chrome/sheets may sample the scene. Content cards and controls are denser
   materials and deliberately never add a second backdrop-filter.
   ======================================================================== */
html { font-size: 100%; }

.hero h1,
.home-card h1,
.review-share-hero h1 {
  font-size: var(--type-title);
  font-optical-sizing: auto;
  letter-spacing: var(--tracking-display);
  line-height: 1.06;
}
.title,
.dlg-head,
.review-cta h2,
.profile-review-title {
  font-optical-sizing: auto;
  font-weight: 600;
  letter-spacing: -.012em;
}

/* Functional floating chrome. */
:is(.greet, .author, .promo-btn, .theme-float) {
  background: var(--material-chrome);
  border-color: var(--material-border);
  -webkit-backdrop-filter: var(--material-blur-chrome);
  backdrop-filter: var(--material-blur-chrome);
}

/* Modal and hero sheets: one blur boundary, never a stack of blurred panes. */
:is(dialog:not(.lightbox), .home-card, .review-share-page .profile-review-widget) {
  background: var(--material-sheet);
  border-color: var(--material-border);
  -webkit-backdrop-filter: var(--material-blur-sheet);
  backdrop-filter: var(--material-blur-sheet);
  box-shadow: var(--shadow-sheet);
}

/* Reading surfaces stay stable over animated branding. */
.card,
.notify-cta,
.vote-summary,
.share-cta,
.review-cta,
.review-share-cta,
.date-widget-dialog .sec,
.date-widget-dialog .pcard,
.pub-card {
  background: var(--material-card);
  border-color: var(--material-border);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: var(--shadow-card);
}
.card .body { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }

/* Controls inside a material use a solid/tinted fill instead of sampling the
   already blurred parent again. */
:is(.card, dialog, .home-card, .notify-cta, .vote-summary, .share-cta,
    .review-cta, .review-share-cta, .date-widget-dialog)
  :is(.btn.ghost, .chip, .chip-suggest, .suggest-chip, .alt-link, .links a,
      .badge, .participant, .gal-count, .gal-nav, .ptile button,
      .ed-empty-inner, input, textarea, select, .rich-ed) {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
:is(.btn.ghost, .chip, .chip-suggest, .suggest-chip, .alt-link,
    input[type="text"], input[type="number"], input[type="datetime-local"],
    textarea, select, .rich-ed) {
  background: var(--material-control);
  border-color: var(--material-border);
}

/* Every actionable control has an Apple-size target and immediate pointer-down
   feedback. The disabled OAuth state remains visible without pretending to work. */
:is(button, .btn, .oauth-btn, .login-corner, .promo-btn, .theme-float,
    .author, .chip, .chip-suggest, .suggest-chip, .alt-link,
    .report-link, summary, [role="button"]) {
  min-block-size: 44px;
  min-inline-size: 44px;
}
:is(input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]),
    select, textarea) { min-block-size: 44px; }

:where(button, .btn, .oauth-btn, .login-corner, .promo-btn, .theme-float,
       .author, .chip, .chip-suggest, .suggest-chip, .alt-link,
       .pub-card, [role="button"]):not(:disabled):not([aria-disabled="true"]):active {
  transform: scale(.97);
  transition: transform 80ms var(--ease-press);
}
.lb-prev:active { transform: translateY(-50%) scale(.94); }
.lb-next:active { transform: translateY(-50%) scale(.94); }

.oauth-btn.disabled[aria-disabled="true"] {
  min-width: 44px;
  min-height: 44px;
  opacity: .52;
  color: var(--muted);
  background: var(--material-solid);
  border-color: var(--material-border);
  box-shadow: none;
  filter: saturate(.35);
  cursor: default;
  pointer-events: none;
}
.oauth-btn.disabled[aria-disabled="true"]:is(:hover, :active) {
  transform: none;
  box-shadow: none;
}

.login-return {
  min-height: 44px;
  margin-top: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--rose-2);
  text-underline-offset: .22em;
}

.gone-actions {
  width: min(100%, 440px);
  margin: 24px auto 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}
.gone-actions .btn { flex: 1 1 11rem; min-height: 44px; justify-content: center; }
@media (max-width: 480px) {
  .gone-actions { display: grid; grid-template-columns: minmax(0, 1fr); }
  .gone-actions .btn { width: 100%; }
}

/* Safe areas for standalone iOS/PWA and Telegram webviews. */
.corner-actions {
  top: max(14px, calc(env(safe-area-inset-top, 0px) + 8px));
  right: max(14px, calc(env(safe-area-inset-right, 0px) + 8px));
}
.fab {
  right: max(12px, calc(env(safe-area-inset-right, 0px) + 12px));
  bottom: max(14px, calc(env(safe-area-inset-bottom, 0px) + 14px));
}
.toast { bottom: max(30px, calc(env(safe-area-inset-bottom, 0px) + 18px)); }
.wrap { padding-bottom: calc(110px + env(safe-area-inset-bottom, 0px)); }
.public-event-page .wrap { padding-bottom: calc(120px + env(safe-area-inset-bottom, 0px)); }

/* Ambient motion remains part of the identity, but no longer competes with
   task feedback. Shimmer is reserved for an explicit loading state. */
body::before { animation-duration: 52s; }
body::after { animation-duration: 64s; }
.bg-smoke .turb { animation-duration: 54s; }
.bg-smoke .plume,
.bg-smoke span { animation-duration: 48s !important; }
.bg-hearts span { animation-duration: 54s !important; }
.hero .hearts span,
.booked .bo-heart { animation-duration: 4.8s; }
.bg-gather span { animation-duration: 36s !important; }
.card.booked-me { animation: none; background-size: 100% 100%, 100% 100%; }
.card.booked-me::before { animation: none; background-size: 100% 100%; }
.gallery { animation: none; }
.gallery:is(.is-loading, [aria-busy="true"]) { animation: shimmer 1.6s linear infinite; }

/* Native, labelled lightbox plus 1:1 pointer-drag hooks. */
dialog.lightbox {
  position: fixed;
  inset: 0;
  width: 100vw;
  max-width: none;
  height: 100dvh;
  max-height: none;
  margin: 0;
  padding:
    max(20px, env(safe-area-inset-top, 0px))
    max(20px, env(safe-area-inset-right, 0px))
    max(20px, env(safe-area-inset-bottom, 0px))
    max(20px, env(safe-area-inset-left, 0px));
  overflow: hidden;
  border: 0;
  border-radius: 0;
  color: #fff;
  background: rgba(25, 18, 22, .94);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
dialog.lightbox::backdrop { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
@keyframes d4-lightbox-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes d4-lightbox-out { from { opacity: 1; } to { opacity: 0; } }
dialog.lightbox[open], dialog.lightbox.open {
  display: flex;
  transform: none;
  animation: d4-lightbox-in .2s ease-out both;
}
dialog.lightbox:is(.is-closing, [data-closing="true"]) {
  transform: none;
  animation: d4-lightbox-out .18s ease-in both;
  pointer-events: none;
}
.gallery { touch-action: pan-x pan-y pinch-zoom; }
.gallery img[role="button"] {
  touch-action: pan-x pan-y pinch-zoom;
  -webkit-user-drag: none;
  user-select: none;
}
@media (hover: hover) and (pointer: fine) {
  .gallery { cursor: grab; }
}
.gallery img[role="button"]:focus-visible { outline: 3px solid #fff; outline-offset: -5px; }
.gallery.is-dragging { scroll-snap-type: none; cursor: grabbing; user-select: none; }
.lightbox img {
  touch-action: pan-y pinch-zoom;
  -webkit-user-drag: none;
  user-select: none;
  cursor: grab;
}
.lightbox.is-dragging img { cursor: grabbing; }
.lb-x {
  top: max(18px, calc(env(safe-area-inset-top, 0px) + 10px));
  right: max(18px, calc(env(safe-area-inset-right, 0px) + 10px));
}
.lb-prev { left: max(14px, calc(env(safe-area-inset-left, 0px) + 8px)); }
.lb-next { right: max(14px, calc(env(safe-area-inset-right, 0px) + 8px)); }
.lb-count { bottom: max(22px, calc(env(safe-area-inset-bottom, 0px) + 12px)); }

/* Closing hooks let JS keep a native dialog in the top layer until the reverse
   path completes; entry and exit share the same spatial origin. */
@keyframes d4-sheet-in {
  from { opacity: 0; transform: translateY(1rem) scale(.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes d4-sheet-out {
  from { opacity: 1; transform: translateY(0) scale(1); }
  to { opacity: 0; transform: translateY(1rem) scale(.97); }
}
@keyframes d4-scrim-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes d4-scrim-out { from { opacity: 1; } to { opacity: 0; } }
dialog[open]:not(.lightbox) { animation: d4-sheet-in .28s var(--ease) both; }
dialog[open]:not(.lightbox)::backdrop { animation: d4-scrim-in .28s ease-out both; }
dialog:is(.is-closing, [data-closing="true"]):not(.lightbox) {
  animation: d4-sheet-out .22s var(--ease) both;
  pointer-events: none;
}
dialog:is(.is-closing, [data-closing="true"]):not(.lightbox)::backdrop {
  animation: d4-scrim-out .22s ease-in both;
}

/* Solid fallbacks and independent accessibility preferences. */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  :root {
    --material-chrome: var(--material-solid);
    --material-sheet: var(--material-solid);
  }
  :is(.greet, .author, .promo-btn, .theme-float, dialog:not(.lightbox),
      .home-card, .card, .notify-cta, .vote-summary, .share-cta,
      .review-cta, .review-share-cta) {
    background: var(--material-solid) !important;
  }
}

@media (prefers-reduced-transparency: reduce) {
  :root {
    --material-chrome: var(--material-solid);
    --material-sheet: var(--material-solid);
    --material-card: var(--material-solid);
    --material-control: color-mix(in srgb, var(--card) 92%, var(--bg));
  }
  :where(.greet, .author, .promo-btn, .theme-float, dialog:not(.lightbox),
         .home-card, .card, .notify-cta, .vote-summary, .share-cta,
         .review-cta, .review-share-cta) {
    background: var(--material-solid) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
  dialog.lightbox { background: #191216 !important; }
  .toast { background: var(--ink) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
  dialog::backdrop {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
}

@media (prefers-contrast: more) {
  :root {
    --muted: color-mix(in srgb, var(--ink) 78%, var(--bg));
    --material-chrome: var(--card);
    --material-sheet: var(--card);
    --material-card: var(--card);
    --material-control: color-mix(in srgb, var(--card) 90%, var(--ink));
    --material-border: color-mix(in srgb, var(--ink) 54%, var(--line));
  }
  :is(.card, dialog, .home-card, .notify-cta, .vote-summary, .share-cta,
      .review-cta, .review-share-cta, .btn, .oauth-btn, input, textarea, select) {
    border-color: var(--material-border);
  }
  :is(.greet, .author, .promo-btn, .theme-float, dialog:not(.lightbox),
      .home-card, .card, .notify-cta, .vote-summary, .share-cta,
      .review-cta, .review-share-cta) {
    background: var(--card) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
  :where(.foot-legal a, .home-foot a, footer .hearts) { opacity: 1; }
  :focus-visible { outline-width: 3px; outline-offset: 3px; }
}

@media (prefers-reduced-motion: reduce) {
  dialog[open], dialog:is(.is-closing, [data-closing="true"]),
  .toast, .lightbox[open] {
    transform: none !important;
    animation: none !important;
    transition: opacity 160ms linear !important;
  }
  .gallery, .gallery img, .lightbox img { scroll-behavior: auto; }
}

/* Context and account chrome added to the public flows. */
.public-account-menu { position: relative; }
.public-account-menu > summary {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 5px;
  overflow: hidden;
  list-style: none;
  cursor: pointer;
  color: var(--rose-2);
  border: 1px solid var(--material-border);
  border-radius: 999px;
  background: var(--material-solid);
  box-shadow: var(--shadow-soft);
}
.public-account-menu > summary::-webkit-details-marker { display: none; }
.public-account-menu > summary img {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
}
.public-account-menu > summary .ui-icon { width: 20px; height: 20px; }
.public-account-popover {
  position: absolute;
  z-index: 30;
  top: calc(100% + 8px);
  right: 0;
  display: grid;
  min-width: 210px;
  padding: 8px;
  overflow: hidden;
  color: var(--ink);
  border: 1px solid var(--material-border);
  border-radius: 16px;
  background: var(--material-sheet);
  -webkit-backdrop-filter: var(--material-blur-sheet);
  backdrop-filter: var(--material-blur-sheet);
  box-shadow: var(--shadow-sheet);
  transform-origin: top right;
  animation: d4-account-menu-in .2s var(--ease) both;
}
@keyframes d4-account-menu-in {
  from { opacity: 0; transform: translateY(-5px) scale(.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.public-account-popover strong {
  padding: 9px 11px 7px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
}
.public-account-popover :is(a, button) {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 44px;
  padding: 9px 11px;
  color: inherit;
  border: 0;
  border-radius: 10px;
  background: transparent;
  font: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.public-account-popover :is(a, button):hover { background: var(--material-control); }
.public-account-popover form { margin: 0; }
.owner-edit-link { text-decoration: none; }

/* One spatial contract for the fixed public-page controls. Text and icons use
   the same 44px box, so switching auth state cannot move the cluster. */
.corner-actions .login-corner.corner-control {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  min-height: 44px;
  padding-block: 0;
  line-height: 1;
}
.corner-actions .promo-btn.theme-toggle.icon-only.corner-control {
  width: 44px;
  height: 44px;
}
.corner-actions .public-account-menu > summary.corner-control {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
}

/* Rare card actions live behind one predictable 44px disclosure instead of
   taking permanent width away from the event title. */
.event-card-menu { z-index: 8; }
.event-card-menu--media { position: absolute; top: 12px; right: 12px; }
.event-card-menu--body { position: absolute; top: 12px; right: 12px; }
.event-card-menu > summary {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  list-style: none;
  cursor: pointer;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .42);
  border-radius: 50%;
  background: rgba(31, 27, 30, .72);
  box-shadow: 0 3px 12px rgba(20, 16, 19, .22);
}
.event-card-menu > summary::-webkit-details-marker { display: none; }
.event-card-menu-dots { display: block; width: 20px; height: 6px; fill: currentColor; }
.event-card-menu-popover {
  position: absolute;
  top: calc(100% + 7px);
  right: 0;
  display: none;
  min-width: 168px;
  padding: 6px;
  overflow: hidden;
  border: 1px solid var(--material-border);
  border-radius: 13px;
  background: var(--material-sheet);
  box-shadow: var(--shadow-sheet);
}
.event-card-menu[open] .event-card-menu-popover { display: grid; }
.event-card-menu-popover .report-link {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 44px;
  margin: 0;
  padding: 9px 11px;
  color: var(--ink);
  opacity: 1;
  border-radius: 9px;
  font: inherit;
  text-align: left;
  text-decoration: none;
}
.event-card-menu-popover .report-link:hover { background: var(--material-control); }
.event-card-menu--body > summary {
  color: var(--ink);
  border-color: var(--material-border);
  background: var(--material-control);
  box-shadow: none;
}
.gal-wrap:has(.event-card-menu--media) .gal-count { right: 66px; }
.gal-wrap:has(.event-card-menu--media) > :is(.seal, .winner-ribbon) { top: 64px; }
.card.nophoto .body:has(> .event-card-menu--body) > .title { padding-right: 52px; }

.vote-rule { display: block; margin-top: 3px; }

.want-form { display: grid; justify-items: center; gap: 12px; width: 100%; }
.want-visibility {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  width: min(100%, 510px);
  margin: 0;
  padding: 0;
  border: 0;
}
.want-visibility legend {
  width: 100%;
  margin-bottom: 7px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  text-align: left;
}
.want-visibility label {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  min-height: 68px;
  padding: 11px 12px;
  text-align: left;
  border: 1px solid var(--material-border);
  border-radius: 13px;
  background: var(--material-control);
  cursor: pointer;
}
.want-visibility label:has(input:checked) {
  border-color: var(--rose-2);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--rose-2) 22%, transparent);
}
.want-visibility label.disabled { opacity: .58; cursor: not-allowed; }
.want-visibility input { flex: none; margin: 3px 0 0; accent-color: var(--rose-2); }
.want-visibility span { display: grid; gap: 2px; }
.want-visibility b { color: var(--ink); font-size: 13px; }
.want-visibility small { color: var(--muted); font-size: 11.5px; line-height: 1.3; }
.want-remove-form { margin-top: -2px !important; }
.want-remove-form .btn { color: var(--muted); }

.notify-cta.is-revealed { animation: d4-notify-reveal .34s var(--ease) both; }
@keyframes d4-notify-reveal {
  from { opacity: 0; transform: translateY(10px) scale(.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@media (max-width: 600px) {
  .corner-actions { gap: 7px; }
  .owner-edit-link { padding-inline: 12px; }
  .want-visibility { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-transparency: reduce) {
  .public-account-popover {
    background: var(--material-solid);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .public-account-popover,
  .notify-cta.is-revealed { animation: none; }
}

/* Компактные маркеры делятся по функции: варианты выбора — мягкие сквирклы,
   метки на фото — контрастная подложка с цветовым штрихом. Исходные классы
   остаются JS-хуками, поэтому поведение редактора и карточек не меняется. */
.choice-chip,
.chip.choice-chip,
.date-widget-dialog .pay-opt.choice-chip,
.date-widget-dialog .chip-cat.choice-chip {
  border-radius: 11px;
}
html[data-theme] .date-widget-dialog .pay-opt.choice-chip:has(input:checked) {
  border-color: var(--choice-pay-bg);
  background: var(--choice-pay-bg);
  color: var(--choice-pay-fg);
  box-shadow: 0 4px 11px color-mix(in srgb, var(--choice-pay-bg) 28%, transparent);
}

.gal-count.count-badge,
.lb-count.count-badge {
  border: 1px solid rgba(255, 255, 255, .38);
  border-radius: 6px;
  background: rgba(31, 27, 30, .84); color: #fff;
  font-variant-numeric: tabular-nums; letter-spacing: 0;
  -webkit-backdrop-filter: blur(8px) saturate(1.15);
  backdrop-filter: blur(8px) saturate(1.15);
  box-shadow: 0 2px 8px rgba(20, 16, 19, .22);
}

.media-badge,
.badge.media-badge,
html[data-theme] .badge.media-badge,
.date-widget-dialog .ed-gallery-pay.media-badge,
.date-widget-dialog .pcard .pay.media-badge {
  --media-badge-mark: #d7c8ce;
  display: inline-flex; align-items: center; gap: 5px;
  min-height: 24px; max-width: 100%;
  padding: 3px 9px 3px 8px;
  border: 1px solid rgba(255, 255, 255, .42);
  border-radius: 8px;
  background: rgba(31, 27, 30, .84); color: #fff;
  -webkit-backdrop-filter: blur(8px) saturate(1.15);
  backdrop-filter: blur(8px) saturate(1.15);
  box-shadow: 0 2px 8px rgba(20, 16, 19, .22);
  font: 700 11px/1.25 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  letter-spacing: .015em; text-shadow: none;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.media-badge::before {
  content: ""; width: 3px; height: 14px; flex: none;
  border-radius: 3px; background: var(--media-badge-mark);
}
.media-badge--pay { --media-badge-mark: #63d297; }
.media-badge--guest { --media-badge-mark: #f0aa74; }
.media-badge--pending { --media-badge-mark: #e5bd62; }
.media-badge--booking { --media-badge-mark: #ee91a7; }

.media-badges--inflow .badge.media-badge,
html[data-theme] .media-badges--inflow .badge.media-badge,
.date-widget-dialog .pcard .pay.media-badge--inflow,
.media-badge.media-badge--inflow {
  background: color-mix(in srgb, var(--card) 92%, var(--ink) 4%);
  color: var(--ink);
  border-color: color-mix(in srgb, var(--ink) 11%, var(--line));
  -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none;
}
html[data-theme] .media-badge.media-badge--pay[data-pay-value="4"] {
  --media-badge-mark: rgba(255, 255, 255, .78);
  border-color: var(--choice-pay-bg);
  background: var(--choice-pay-bg);
  color: var(--choice-pay-fg);
  box-shadow: 0 4px 11px color-mix(in srgb, var(--choice-pay-bg) 28%, transparent);
}
html[data-skin="friends"] .media-badge--guest { --media-badge-mark: var(--friends-teal); }
html[data-skin="friends"] .media-badge--pending { --media-badge-mark: var(--friends-amber); }
html[data-skin="friends"] .media-badge--booking { --media-badge-mark: var(--rose); }

@media (forced-colors: active) {
  :is(.hero h1, .home-card h1) > .display-ink {
    background: none !important;
    color: CanvasText !important;
    -webkit-text-fill-color: CanvasText !important;
  }
  .media-badge,
  .badge.media-badge {
    color: CanvasText; background: Canvas; border: 1px solid CanvasText;
    -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none;
  }
  .media-badge::before { background: CanvasText; }
}

/* Privacy gate: one calm task, a familiar four-digit field and native focus.
   The collection itself is not mounted before the server accepts the PIN. */
.pin-access-page {
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: max(24px, env(safe-area-inset-top)) 18px
           max(24px, env(safe-area-inset-bottom));
}
.pin-access-shell { position: relative; z-index: 2; width: min(100%, 420px); }
.pin-access-card {
  padding: 30px 24px 25px;
  text-align: center;
  border: 1px solid rgba(255, 255, 255, .72);
  border-radius: 24px;
  background: color-mix(in srgb, var(--card) 82%, transparent);
  -webkit-backdrop-filter: blur(24px) saturate(1.35);
  backdrop-filter: blur(24px) saturate(1.35);
  box-shadow: var(--shadow-soft);
}
.pin-access-icon {
  display: grid; place-items: center;
  width: 48px; height: 48px; margin: 0 auto 14px;
  color: var(--rose-2); border-radius: 15px;
  background: var(--rose-soft);
}
.pin-access-icon .ui-icon { width: 25px; height: 25px; }
.pin-access-card h1 { margin: 0; font-size: clamp(25px, 7vw, 31px); }
.pin-access-card > p {
  max-width: 31ch; margin: 9px auto 20px;
  color: var(--muted); font-size: 14px; line-height: 1.45;
}
.pin-access-form { display: grid; gap: 10px; }
.pin-access-form input[name="pin"] {
  width: 100%; min-height: 54px; margin: 0; padding: 9px 14px;
  color: var(--ink); border: 1px solid var(--line); border-radius: 15px;
  background: color-mix(in srgb, var(--card) 88%, transparent);
  font: 650 25px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-variant-numeric: tabular-nums; letter-spacing: .42em;
  text-align: center; caret-color: var(--rose-2);
}
.pin-access-form input[name="pin"]::placeholder { letter-spacing: .28em; color: var(--muted); }
.pin-access-form input[name="pin"]:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--rose) 30%, transparent);
  outline-offset: 2px; border-color: var(--rose);
}
.pin-access-form input[aria-invalid="true"] { border-color: #b34155; }
.pin-access-hint { color: var(--muted); font-size: 12px; }
.pin-access-error { margin: 0; color: #a52d43; font-size: 13px; }
.pin-access-form .btn { width: 100%; min-height: 48px; margin-top: 3px; }

/* A copied action behaves like a native menu row and never steals permanent
   space from the card. Participant links keep the exact pill geometry. */
.event-card-menu-popover :is(.report-link, .copy-event-link, .copy-event-button) {
  display: flex; align-items: center;
  width: 100%; min-height: 44px; margin: 0; padding: 9px 11px;
  color: var(--ink); opacity: 1; border: 0; border-radius: 9px;
  background: transparent; font: inherit; text-align: left; text-decoration: none;
  cursor: pointer;
}
.event-card-menu-popover :is(.report-link, .copy-event-link, .copy-event-button):active {
  transform: scale(.98); background: var(--material-control);
}
.event-card-menu-popover :is(.report-link, .copy-event-link, .copy-event-button):focus-visible {
  outline: 2px solid var(--rose); outline-offset: -2px;
}
.event-card-menu-popover .copy-event-form { margin: 0; }
a.participant { color: inherit; text-decoration: none; }
a.participant:focus-visible {
  outline: 2px solid var(--rose); outline-offset: 2px;
}
a.participant:active { transform: scale(.97); }

/* Separate sibling surfaces on the direct event page. */
.public-share-page .share-cta + .notify-cta { margin-top: 18px; }

@media (hover: hover) {
  .event-card-menu-popover :is(.report-link, .copy-event-link, .copy-event-button):hover {
    background: var(--material-control);
  }
  a.participant:hover { border-color: color-mix(in srgb, var(--rose) 46%, var(--line)); }
}
@media (prefers-reduced-transparency: reduce) {
  .pin-access-card { background: var(--card); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (prefers-reduced-motion: reduce) {
  .event-card-menu-popover :is(.report-link, .copy-event-link, .copy-event-button):active,
  a.participant:active { transform: none; }
}