/* Вспоминаю тебя — единый дизайн-язык: светлая «футуристичная» палитра,
   Geologica (дисплей) + Commissioner (текст), живой фон с частицами.
   Шрифты и Three.js — самохостом, ноль иностранных зависимостей. */

/* Токены (палитра, живой акцент --a-*, радиусы, тени, типографика) — единым
   слоем в static/tokens.css (подключается в base.html перед этим файлом).
   Здесь — только правила, потребляющие переменные. --a привязан к body (ниже). */

* { box-sizing: border-box; }
/* атрибут hidden всегда прячет — иначе display:flex/grid у элемента его перебивает
   (например .pwa-panel/.pwa-install-block: панель не скрывалась, пока стоял hidden) */
[hidden] { display: none !important; }

/* Клик по интерфейсу не красим браузерным синим — это чужой холодный цвет в тёплой
   палитре. Три источника синевы: вспышка тапа на мобильных, случайное выделение
   подписи самого контрола (двойной клик по кнопке) и системный цвет ::selection. */
html { -webkit-tap-highlight-color: transparent; }
/* подписи контролов не выделяются; текст воспоминаний — выделяется, его копируют */
button, summary, [role="button"], .filebtn { -webkit-user-select: none; user-select: none; }
/* выделение текста — в тон живому акценту (цвет текста не трогаем: читаем в обеих темах) */
::selection { background-color: var(--a-select); }
::-moz-selection { background-color: var(--a-select); }

body {
  /* живой акцент из фона: floating-bg.js пишет --halo-rgb («R, G, B» С запятыми),
     кнопки/иконки берут его. Фоллбэк до старта WebGL (и без WebGL вовсе) — тёплый
     янтарь, ОБЯЗАТЕЛЬНО с запятыми: --a подставляется в legacy-синтаксис
     var(--a-fill-strong), и пробельная форма делает значение невалидным
     (заливки становятся прозрачными). */
  --a: var(--halo-rgb, 224, 164, 88);
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-text);
  font-weight: 400;
  line-height: 1.7;
  font-size: var(--fs-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  /* прилипающий футер: страница всегда во всю высоту экрана, контент растягивается
     и толкает подвал вниз — на коротких страницах (контакты, о проекте) подвал не
     всплывает в середину. */
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

/* живой фон с частицами на весь экран (floating-bg.js, tone=grey).
   Нет WebGL/JS — канвас прозрачен, виден светлый фон body (мягкая деградация). */
.site-bg {
  position: fixed; inset: 0; z-index: 0;
  display: block; width: 100%; height: 100%; pointer-events: none;
}

/* Тема + полноэкранный режим — в подвале каждой страницы, прижаты влево (в ширину
   контентной колонки футера). Больше не плавают над контентом — переехали вниз. */
.foot-tools { display: flex; gap: 4px; justify-content: flex-start; margin-top: 14px; }
/* «Смотрю как» — капсула A. Общий компонент хранителя и админа;
   фиксируется только live-вариант, образцы в витрине остаются в потоке. */
.viewbar {
  position: relative; display: inline-flex; align-items: center; gap: 3px; padding: 4px;
  max-width: 100%; border: 1px solid transparent; border-radius: var(--r-pill);
  background: var(--a-fill); font-family: var(--font-display);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.viewbar--floating {
  position: fixed; z-index: 95; top: calc(14px + env(safe-area-inset-top));
  left: 50%; transform: translateX(-50%); max-width: calc(100% - 24px);
  box-shadow: var(--glow-sm);
}
.viewbar-label {
  position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}
.viewbar-opt {
  display: inline-flex; align-items: center; justify-content: center; flex: 1;
  min-height: 44px; padding: 8px clamp(10px, 4vw, 18px);
  border: 0; border-radius: var(--r-pill); font-size: var(--fs-xs);
  font-weight: 400; color: var(--muted-solid); text-decoration: none; white-space: nowrap;
  transition: background-color .2s, color .2s;
}
.viewbar-opt::after { content: none; }
.viewbar-opt:hover { color: var(--text); background: var(--a-fill); }
.viewbar-opt.is-on { color: var(--text); font-weight: 500; background: var(--a-fill-hover); }
.viewbar-thumb { display: none; }
.viewbar--animated .viewbar-thumb {
  display: block; position: absolute; top: 4px; bottom: 4px; left: 0;
  border-radius: var(--r-pill); background: var(--a-fill-hover); pointer-events: none;
  transition: transform var(--motion-switch-duration) var(--motion-switch-ease), width var(--motion-switch-duration) var(--motion-switch-ease);
}
.viewbar--animated .viewbar-opt { position: relative; z-index: 1; }
.viewbar--animated .viewbar-opt.is-on { background: transparent; }
.viewbar[aria-busy="true"], .viewbar[aria-busy="true"] .viewbar-opt { cursor: progress; }
.viewbar-error {
  position: fixed; z-index: 95; top: calc(76px + env(safe-area-inset-top));
  left: 50%; transform: translateX(-50%); width: max-content; max-width: calc(100% - 32px);
  margin: 0; padding: 10px 14px; border: 1px solid var(--line); border-radius: var(--r-lg);
  background: var(--bg); color: var(--text); font-size: var(--fs-xs); box-shadow: var(--glow-sm);
}
/* Без вступительной анимации явно показываем её конечное состояние. */
.view-content--swapped .m-rise { opacity: 1; transform: none; animation: none; }
.view-content--swapped .reveal { opacity: 1; transform: none; transition: none; }
@media (prefers-reduced-motion: reduce) {
  .viewbar--animated .viewbar-thumb, .viewbar-opt { transition: none; }
}
.viewbar-opt:focus-visible { outline: 2px solid var(--text); outline-offset: 3px; }
.has-view-switcher { padding-top: var(--viewbar-clearance); }
.has-hero-extension .viewbar { background: color-mix(in srgb, var(--surface) 65%, transparent); }
.has-view-switcher [id] { scroll-margin-top: calc(84px + env(safe-area-inset-top)); }

/* Тумблер напоминаний о годовщинах (главная, блок «мои страницы»). Строка настройки:
   текст + подпись слева, переключатель-пилюля справа. Форма-POST без JS. Пилюльный
   переключатель — тот же язык, что у чипов: акцентная заливка во включённом, мягкая
   рамка в выключенном; свечение вместо тени. */
.anniv-pref {
  display: flex; align-items: center; gap: 14px; margin: 14px 0 0;
  padding: 12px 16px; border-radius: var(--r-lg);
  background: var(--a-tint); border: 1px solid var(--line-soft);
}
.anniv-pref-text { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.anniv-pref-text b { font-family: var(--font-display); font-weight: 500; font-size: var(--fs-sm); color: var(--ink); }
.anniv-pref-hint { font-size: var(--fs-xs); color: var(--muted-solid); }
.anniv-pref-switch {
  flex: none; width: 46px; height: 26px; padding: 0; border: 0; cursor: pointer;
  border-radius: var(--r-pill); background: var(--a-fill); position: relative;
  transition: background-color .2s;
}
.anniv-pref-switch::after { content: none; }
.anniv-pref-switch.is-on { background: var(--a-fill-hover); box-shadow: var(--glow-sm); }
.anniv-pref-knob {
  position: absolute; top: 3px; left: 3px; width: 20px; height: 20px;
  border-radius: var(--r-pill); background: var(--faint); transition: transform .2s, background-color .2s;
}
.anniv-pref-switch.is-on .anniv-pref-knob { transform: translateX(20px); background: rgb(var(--a)); }

.site-ctool { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: var(--r-sm); background: none; color: var(--faint); cursor: pointer; transition: color .2s, background-color .2s; }
.site-ctool::after { content: none; }
.site-ctool:hover { color: var(--text); background: var(--a-tint); }
.site-ctool[aria-pressed="true"] { color: rgb(var(--a)); }
.site-ctool svg { width: 20px; height: 20px; }
.site-ctool-moon, .site-ctool-fs-in { display: block; }
.site-ctool-sun, .site-ctool-fs-out { display: none; }
body.dark .site-ctool-moon { display: none; }
body.dark .site-ctool-sun { display: block; }
.site-ctool.is-fs .site-ctool-fs-in { display: none; }
.site-ctool.is-fs .site-ctool-fs-out { display: block; }

/* Плавающие кнопки-действия (.m-fab): матовый акцентный вид, как у кнопок добавления
   в блоках, только зафиксированы в углу; blur + лёгкое свечение, чтобы читались над
   живым фоном. Правый угол — основное действие страницы (добавить, создать), левый
   (.m-fab--share) — «поделиться». Общий канон: памятник и главная. */
.m-fab { position: fixed; right: 20px; bottom: calc(20px + env(safe-area-inset-bottom)); z-index: 90; display: inline-flex; align-items: center; gap: 8px; padding: 11px 18px; border-radius: var(--r-sm); background: rgba(var(--a),.13); color: rgb(var(--a)); text-decoration: none; font-family: var(--font-display); font-weight: 500; font-size: var(--fs-xs); letter-spacing: .03em; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: var(--glow-sm); transition: background-color .2s; -webkit-user-select: none; user-select: none; }
.m-fab svg { color: rgb(var(--a)); }
.m-fab:hover { background: rgba(var(--a),.2); }
.m-fab::after { content: none; }
.m-fab--share { left: 20px; right: auto; }
.m-fab--share.copied { background: var(--a-fill); }
@media (max-width: 560px) {
  .m-fab { right: 14px; bottom: calc(14px + env(safe-area-inset-bottom)); padding: 11px 13px; }
  .m-fab-label { display: none; }
  .m-fab--share { left: 14px; right: auto; }
}

.wrap {
  position: relative; z-index: 2;
  max-width: 680px;
  /* width обязателен: body — флекс-колонка, а margin:0 auto по кросс-оси отключает
     растяжение флекс-элемента. Без него ширина колонки считалась по содержимому, и
     страница дёргалась при любом изменении текста (раскрыли вопрос в FAQ — уехала
     вся вёрстка). Тот же приём уже стоит у .foot. */
  width: 100%;
  margin: 0 auto;
  padding: calc(40px + env(safe-area-inset-top)) max(22px, env(safe-area-inset-right)) 8px max(22px, env(safe-area-inset-left));
  flex: 1 0 auto; /* забирает свободную высоту → подвал прижат к низу */
}
@media (max-width: 560px) { .wrap { padding-top: calc(26px + env(safe-area-inset-top)); padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)); } }

h1 {
  font-family: var(--font-display);
  font-weight: 400; letter-spacing: -.01em; line-height: 1.08;
  font-size: clamp(30px, 5vw, 40px); margin: 6px 0 10px;
}
h2 {
  font-family: var(--font-display);
  font-weight: 500; font-size: var(--fs-label); letter-spacing: var(--ls-label); text-transform: uppercase;
  color: var(--muted-solid); margin: 40px 0 18px;
}

/* Поля ввода — всегда --fs-body (18px), и это не про эстетику: Safari на iOS
   зумит страницу при фокусе в поле мельче 16px, а обратно не отъезжает —
   человек оказывается на увеличенной странице с уехавшей вёрсткой и должен
   выщипываться пальцами. Плюс собственный текст в поле надо перечитывать, а
   не угадывать. Локальные font-size у полей не заводим — только здесь. */
input, textarea, select { font-family: inherit; font-size: var(--fs-body); }

a { color: var(--accent); text-underline-offset: 2px; }
a:focus-visible, button:focus-visible, summary:focus-visible,
input:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px;
}
.muted { color: var(--muted-solid); font-size: var(--fs-sm); }
.opt { color: var(--faint); font-weight: 400; font-size: var(--fs-xs); }
.hint { display: block; color: var(--faint); font-size: var(--fs-sm); margin-top: 5px; line-height: 1.55; }
.links { position: relative; z-index: 2; font-size: var(--fs-sm); }
.links a { color: var(--muted-solid); text-decoration: none; }
.links a:hover { color: var(--ink); }

/* кнопки */
button, .btn-new, .login-prompt-btn, .provider-btn,
.landing-login, .landing-secondary, .landing-logout {
  font-family: var(--font-display);
  font-weight: 500; letter-spacing: var(--ls-label); text-transform: uppercase; font-size: var(--fs-label);
}
button {
  padding: 14px 26px;
  background: var(--ink); color: #f8f6f2; border: 0; border-radius: var(--r-pill); cursor: pointer;
  transition: box-shadow .35s, transform .35s, opacity .35s;
}
button:hover { box-shadow: none; }
button.ok { background: var(--ok); }
button.danger { background: var(--danger); }

/* поля ввода */
input[type=text], input[type=password], input[type=email], textarea, select {
  font: inherit; font-family: var(--font-text);
}
.required { color: var(--text); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* --- Карточка-поверхность общего вида --- */
.share, .memory, .mod, .login-prompt {
  background: var(--surface);
  backdrop-filter: blur(8px);
}

/* --- Форма дополнения (на странице памяти) --- */
.share {
  border: 1px solid var(--line); border-radius: var(--r-lg);
  margin: 22px 0; overflow: hidden;
}
.share > summary {
  display: block; text-align: center; cursor: pointer; list-style: none;
  font-family: var(--font-display); font-weight: 500; letter-spacing: .04em;
  color: var(--ink); background: rgba(255,255,255,.55); font-size: var(--fs-sm); padding: 17px 18px;
}
.share > summary::-webkit-details-marker { display: none; }
.share > summary::before { content: "✎ "; }
.share-form { display: flex; flex-direction: column; gap: 18px; padding: 24px; }
.share-form label { display: block; font-weight: 500; }
.share-form textarea, .share-form input[type=text] {
  width: 100%; margin-top: 8px; padding: 12px 14px;
  border: 1px solid transparent; border-radius: var(--r-md); background: rgba(255,255,255,.55);
  box-shadow: inset 0 1px 2px rgba(90,75,55,.10), inset 0 -1px 1px rgba(255,255,255,.55);
  transition: background-color .2s, box-shadow .2s;
}
.share-form textarea:focus, .share-form input[type=text]:focus { outline: none; background: rgba(255,255,255,.72); box-shadow: inset 0 1px 2px rgba(90,75,55,.06), 0 0 0 3px rgba(var(--a),.18); }
.share-form textarea::placeholder, .share-form input::placeholder { color: var(--faint); }
.share-form input[type=file] { margin-top: 8px; color: var(--muted-solid); }
.check { font-weight: 400 !important; display: flex; gap: 12px; align-items: center; min-height: 48px; color: var(--muted-solid); font-size: var(--fs-sm); }
.check input { width: 22px; height: 22px; margin: 0; flex: none; accent-color: var(--accent); }
.privacy-note { color: var(--faint); font-size: var(--fs-sm); margin: 0; }
.login-prompt { padding: 16px 18px; border: 1px solid var(--line-soft); border-radius: var(--r-md); }
.login-prompt p { margin: 0 0 10px; color: var(--muted-solid); }

/* кнопки-ссылки вторичные (бордюр) */
.btn-new, .login-prompt-btn, .provider-btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 46px;
  padding: 12px 22px; border-radius: var(--r-pill); text-decoration: none;
  border: 1px solid var(--line); background: var(--surface); color: var(--ink);
  transition: border-color .3s, transform .3s;
}
.btn-new:hover, .login-prompt-btn:hover, .provider-btn:hover { border-color: #cfc9bd; }
.btn-new { min-height: 0; padding: 11px 20px; }

/* тихие текст-ссылки (вторичные действия в аккаунте) — направление «Линии» */
.landing-secondary, .landing-logout {
  display: inline-flex; align-items: center; min-height: 44px; padding: 11px 4px;
  background: none; border: 0; border-radius: 0; color: var(--muted-solid);
  cursor: pointer; text-decoration: none; border-bottom: 1px solid transparent; transition: .3s;
}
.landing-secondary:hover, .landing-logout:hover { color: var(--ink); border-bottom-color: var(--ink); }

/* --- Лента воспоминаний (общая, не memorial.css) --- */
.memory { border: 1px solid var(--line); border-radius: var(--r-lg); padding: 22px 24px; margin-bottom: 16px; }
.memory-text { white-space: pre-wrap; }
.memory-media { display: flex; flex-wrap: wrap; gap: 10px; margin: 14px 0 4px; }
.memory-media img, .memory-media video { max-width: 100%; border-radius: var(--r-sm); }
.memory-media img { max-height: 320px; }
.memory-media video { max-height: 360px; }
.memory-by { font-family: var(--font-display); font-weight: 500; font-size: var(--fs-label); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--accent); margin: 10px 0 0; }
.empty { color: var(--muted-solid); }

/* --- Спасибо --- */
.thanks-note { color: var(--muted-solid); font-size: var(--fs-sm); }
.thanks-ref { color: var(--muted-solid); }
/* Необязательный вход после отправки. Намеренно тихий блок, не кнопка: дело
   уже сделано, и предложение войти не должно читаться как «а теперь ещё вот это». */
.thanks-claim { margin: 18px 0 0; padding: 14px 16px; border-radius: var(--r-md);
  background: var(--a-tint); color: var(--muted-solid); font-size: var(--fs-sm); line-height: 1.55; }
.thanks-claim a { color: var(--ink); white-space: nowrap; }
.back { display: inline-block; margin-top: 14px; color: var(--accent); text-decoration: none; }

/* --- Админка --- */
.admin-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.logout-btn { padding: 9px 18px; background: var(--surface); color: var(--ink); border: 1px solid var(--line); }
.logout-btn:hover { box-shadow: none; border-color: #cfc9bd; }
/* Панель-приглашение (установка приложения). Канон стекла — как у .m-qr-panel:
   тёплая акцентная подложка + акцентный hairline, а не серая карточка на
   нейтральной поверхности: та выпадала из тёплого языка страницы. */
.pwa-panel {
  display: flex; flex-direction: column; gap: 12px;
  margin: 20px 0 24px; padding: 16px 18px;
  border: 1px solid var(--a-line); border-radius: var(--r-xl);
  background: var(--a-tint);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.pwa-install-block { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
.pwa-panel-main { flex: 1 1 240px; min-width: 0; }
.pwa-panel-label { display: block; font-family: var(--font-display); font-weight: 500; font-size: var(--fs-label); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--faint); margin-bottom: 5px; }
.pwa-panel-text { margin: 0; color: var(--muted-solid); font-size: var(--fs-sm); line-height: 1.45; }
.pwa-install-btn { display: inline-flex; align-items: center; gap: 7px; flex: none; padding: 12px 20px; font-size: var(--fs-xs); }
.pwa-install-btn svg { flex: none; }
.pwa-install-btn::after, .pwa-notify-btn::after { content: none; }
.pwa-ios { flex: 1 1 100%; margin: 0; padding: 12px 14px; border-radius: var(--r-md); background: var(--a-tint); color: var(--muted-solid); font-size: var(--fs-xs); line-height: 1.55; }
.pwa-ios b { color: var(--ink); font-weight: 500; }
.pwa-notify-block { display: flex; }
.pwa-notify-btn { padding: 11px 18px; font-size: var(--fs-xs); }
.pwa-notify-btn[disabled] { opacity: .55; cursor: default; }
.pwa-status { min-height: 0; margin: 0; color: var(--muted-solid); font-size: var(--fs-xs); }
.pwa-status:empty { display: none; }
@media (max-width: 560px) {
  .pwa-install-btn, .pwa-notify-btn { width: 100%; justify-content: center; }
}
.person-edit, .mod-edit { margin-bottom: 14px; }
.person-edit { border: 1px solid var(--line); border-radius: var(--r-lg); padding: 6px 18px; }
.person-edit summary { cursor: pointer; font-family: var(--font-display); font-weight: 500; padding: 12px 0; }
/* поля памятника — во вложенном details .person-fields (а не во всём .person-edit),
   чтобы стиль форм не «протекал» в формы модерации воспоминаний внутри памятника */
.person-fields { margin: 6px 0 4px; }
.person-fields > summary { cursor: pointer; font-family: var(--font-display); font-weight: 500; font-size: var(--fs-sm); color: var(--muted-solid); padding: 8px 0; }
.person-fields form, .mod-edit form { display: flex; flex-direction: column; gap: 12px; padding: 8px 0 16px; }
.person-fields label, .mod-edit label { font-weight: 500; }
.person-fields input[type=text], .person-fields textarea, .mod-edit textarea {
  width: 100%; margin-top: 6px; padding: 11px 13px;
  border: 1px solid transparent; border-radius: var(--r-sm); background: rgba(255,255,255,.55);
  box-shadow: inset 0 1px 2px rgba(90,75,55,.10), inset 0 -1px 1px rgba(255,255,255,.55);
  transition: background-color .2s, box-shadow .2s;
}
.person-fields input:focus, .person-fields textarea:focus, .mod-edit textarea:focus { outline: none; background: rgba(255,255,255,.72); box-shadow: inset 0 1px 2px rgba(90,75,55,.06), 0 0 0 3px rgba(var(--a),.18); }
/* воспоминания внутри памятника */
.person-subs { margin: 16px 0 6px; padding-top: 14px; border-top: 1px solid var(--line); }
.person-subs > .pmod-label { margin-bottom: 12px; }
.person-subs .empty { color: var(--muted-solid); font-size: var(--fs-sm); }
.mod {
  border: 1px solid var(--line); border-left: 3px solid var(--line);
  border-radius: var(--r-lg); padding: 18px 20px; margin-bottom: 14px;
}
.mod--pending { border-left-color: var(--accent); }
.mod--approved { border-left-color: var(--ok); }
.mod--rejected { border-left-color: var(--danger); opacity: 0.7; }
.mod-head { display: flex; gap: 10px; align-items: center; margin-bottom: 10px; }
.badge {
  font-family: var(--font-display); font-size: var(--fs-label); font-weight: 500; letter-spacing: var(--ls-label); text-transform: uppercase;
  padding: 3px 11px; border-radius: var(--r-pill); background: var(--warn-bg); color: var(--muted-solid);
}
.badge--approved { background: var(--ok-bg); color: var(--ok); }
.mod-text { white-space: pre-wrap; }
.mod-meta, .mod-assets, .mod-notes { font-size: var(--fs-sm); color: var(--muted-solid); margin: 8px 0 0; }
.mod-comment { font-size: var(--fs-sm); line-height: 1.5; margin: 12px 0 0; padding: 9px 12px; border-radius: var(--r-sm); background: rgba(var(--warn-rgb),.14); color: var(--text); }
.mod-media { display: flex; flex-wrap: wrap; gap: 10px; margin: 12px 0 0; }
.mod-media img { max-width: 150px; max-height: 150px; object-fit: cover; border-radius: var(--r-sm); }
.mod-media audio { width: 100%; }
.mod-media video { max-width: 100%; max-height: 220px; border-radius: var(--r-sm); }
.mod-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 4px; }
.mod-actions form { margin: 0; }
/* модерация ✓/✕ — стилизуется в блоке «КНОПКИ v2» (морфизм + тона ok/danger) */

/* --- Анкета (создание/редактирование) — направление «Линии» --- */
.anketa { display: flex; flex-direction: column; gap: 28px; }
.anketa fieldset { border: 0; border-top: 1px solid var(--line); border-radius: 0; padding: 26px 0 4px; margin: 0; background: none; }
.anketa legend { font-family: var(--font-display); font-weight: 500; font-size: var(--fs-body); padding: 0; }
.anketa label { display: block; font-weight: 500; margin-top: 22px; }
.anketa input[type=text], .anketa textarea {
  width: 100%; margin-top: 7px; padding: 13px 15px;
  border: 1px solid transparent; border-radius: var(--r-md); background: rgba(255,255,255,.55);
  box-shadow: inset 0 1px 2px rgba(90,75,55,.10), inset 0 -1px 1px rgba(255,255,255,.55);
  transition: background-color .2s, box-shadow .2s;
}
.anketa input:focus, .anketa textarea:focus { outline: none; background: rgba(255,255,255,.72); box-shadow: inset 0 1px 2px rgba(90,75,55,.06), 0 0 0 3px rgba(var(--a),.18); }
.anketa input[type=file] { margin-top: 8px; color: var(--muted-solid); }
.edit-photo-preview { display: block; width: 84px; height: 84px; object-fit: cover; border-radius: var(--r-md); margin: 4px 0 2px; border: 1px solid var(--line); }
/* выбор видимости при создании/редактировании */
/* При создании — свёрнутый <details> (дефолт написан в summary), при правке —
   open, то есть обычный список. Одна разметка на оба случая. */
.vis-field { margin-top: 22px; }
.vis-field .flabel { display: block; font-weight: 500; }
.vis-summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px;
  cursor: pointer; list-style: none; padding: 4px 0; min-height: 44px; align-content: center; }
.vis-summary::-webkit-details-marker { display: none; }
.vis-field[open] .vis-summary { cursor: default; margin-bottom: 4px; }
/* «изменить» + шеврон: без них строка читается как просто подпись, и человек
   не понимает, что видимость вообще можно тронуть. */
.vis-current { display: inline-flex; align-items: center; gap: 5px;
  color: var(--muted-solid); font-size: var(--fs-sm); text-decoration: underline;
  text-decoration-color: var(--line); text-underline-offset: 3px; }
.vis-chev { flex: none; transition: transform .2s; }
.vis-field[open] .vis-chev { transform: rotate(180deg); }
.vis-opts { display: flex; flex-direction: column; gap: 12px; padding-top: 6px; }
.vis-opt { display: flex; align-items: flex-start; gap: 11px; margin: 0; font-weight: 400; cursor: pointer; }
.vis-opt input[type=radio] { margin: 3px 0 0; flex: none; width: 18px; height: 18px; accent-color: rgb(var(--a)); cursor: pointer; }
.vis-opt > span { font-size: var(--fs-sm); line-height: 1.45; color: var(--text); }
.vis-opt b { font-weight: 600; }

/* --- редактор загрузки фото: имя + ✕ над кнопкой, модалка кадрирования --- */
.pe-selected { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; padding: 7px; background: rgba(255,255,255,.5); border-radius: var(--r-md); box-shadow: inset 0 1px 2px rgba(90,75,55,.08); }
.pe-thumb { width: 40px; height: 40px; flex: none; object-fit: cover; border-radius: var(--r-xs); background: #f0ede6; }
.pe-name { flex: 1; min-width: 0; font-size: var(--fs-sm); color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pe-recrop { background: none; border: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; color: var(--accent); font-family: var(--font-display); font-weight: 500; font-size: var(--fs-label); letter-spacing: var(--ls-label); text-transform: uppercase; padding: 6px 8px; min-height: 0; cursor: pointer; }
.pe-recrop::after { content: none; }
.pe-recrop:hover { color: var(--ink); background: none; box-shadow: none; }
.pe-remove { flex: none; width: 28px; height: 28px; min-height: 0; padding: 0; border: 0; border-radius: 50%; background: rgba(255,255,255,.75); color: var(--muted-solid); box-shadow: none; font-size: var(--fs-xs); line-height: 1; cursor: pointer; }
.pe-remove::after { content: none; }
.pe-remove:hover { background: #fff; color: var(--danger); box-shadow: none; }

.pe-overlay { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 18px; background: rgba(32,27,20,.55); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.pe-box { background: var(--surface-solid); border-radius: var(--r-xl); padding: 22px; max-width: 92vw; box-shadow: var(--shadow-overlay); display: flex; flex-direction: column; align-items: center; gap: 14px; }
.pe-title { font-family: var(--font-display); font-weight: 500; font-size: var(--fs-label); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--muted-solid); }
.pe-vp { position: relative; overflow: hidden; border-radius: var(--r-lg); background: #302a22; cursor: grab; touch-action: none; box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); }
.pe-vp:active { cursor: grabbing; }
.pe-canvas { display: block; }
.pe-zoom { width: 100%; max-width: 340px; accent-color: var(--accent); }
.pe-hint { font-size: var(--fs-xs); color: var(--faint); margin-top: -4px; }
.pe-actions { display: flex; gap: 10px; align-self: stretch; justify-content: flex-end; margin-top: 2px; }
.pe-cancel { background: none; border: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; color: var(--muted-solid); }
.pe-cancel::after { content: none; }
.pe-cancel:hover { color: var(--ink); background: none; box-shadow: none; }
.pe-done::after { content: none; }

/* --- dev-панель быстрого входа (только локально, DM_DEV_LOGIN=1) --- */
.devbar { position: fixed; left: 12px; bottom: 12px; z-index: 1100; display: flex; align-items: center; gap: 12px; padding: 7px 13px; background: rgba(42,38,32,.92); color: #efeae2; border-radius: var(--r-pill); font-size: 13px; box-shadow: var(--shadow-overlay); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.devbar-tag { font-family: var(--font-display); font-weight: 600; font-size: 10px; letter-spacing: .12em; background: #d98fa6; color: #2a1620; padding: 2px 7px; border-radius: var(--r-xs); }
.devbar-link { color: #efeae2; text-decoration: none; border-bottom: 1px solid rgba(239,234,226,.3); }
.devbar-link:hover { border-bottom-color: #efeae2; }
.devbar-out { margin: 0; display: inline; }
.devbar-out button { background: none; border: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; color: #c7b3bb; padding: 0; min-height: 0; font: inherit; text-transform: none; letter-spacing: 0; cursor: pointer; }
.devbar-out button::after { content: none; }
.devbar-out button:hover { color: #fff; background: none; box-shadow: none; }
.anketa legend .step-num { color: var(--accent); }
.anketa > button[type=submit] { margin-top: 4px; padding: 15px 30px; align-self: flex-start; }
/* пара полей в строку (даты, хранитель) — подпись на всю ширину под парой */
.anketa-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 16px; }
.anketa-pair label { margin-top: 0; }
.anketa-pair .hint { grid-column: 1 / -1; margin-top: 2px; }
@media (max-width: 460px) { .anketa-pair { grid-template-columns: 1fr; } }

/* даты рождения/смерти — день / месяц (словом) / год; год обязателен */
.date-pair .date-field { border: 0; padding: 0; margin: 0; }
.date-pair legend { font-weight: 500; font-size: var(--fs-sm); padding: 0; display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.date-parts { display: flex; gap: 8px; margin-top: 10px; }
.date-parts input, .date-parts select {
  font: inherit; font-family: var(--font-text); min-height: 46px;
  padding: 11px 12px; border: 1px solid transparent; border-radius: var(--r-md); color: var(--ink);
  background: rgba(255,255,255,.55);
  box-shadow: inset 0 1px 2px rgba(90,75,55,.10), inset 0 -1px 1px rgba(255,255,255,.55);
  transition: background-color .2s, box-shadow .2s;
}
.date-parts input:focus, .date-parts select:focus { outline: none; background: rgba(255,255,255,.72); box-shadow: inset 0 1px 2px rgba(90,75,55,.06), 0 0 0 3px rgba(var(--a),.18); }
.date-parts .date-day { width: 4.6em; text-align: center; }
.date-parts .date-month { flex: 1 1 auto; min-width: 0; }
.date-parts .date-year { width: 5.4em; text-align: center; }
@media (max-width: 360px) {
  .date-parts { gap: 6px; }
  .date-parts .date-day { width: 3.4em; }
  .date-parts .date-year { width: 4.6em; }
  .date-parts input, .date-parts select { padding: 11px 7px; }
}
.date-parts input::placeholder { color: var(--faint); }
body.dark .date-parts input, body.dark .date-parts select {
  background: rgba(255,255,255,.05); color: var(--text);
  box-shadow: inset 0 1px 2px rgba(0,0,0,.35), inset 0 -1px 1px rgba(255,255,255,.04);
}
body.dark .date-parts input:focus, body.dark .date-parts select:focus {
  background: rgba(255,255,255,.09); box-shadow: inset 0 1px 2px rgba(0,0,0,.3), 0 0 0 3px rgba(var(--a),.30);
}

/* форма «Добавить воспоминание» — вопросы + повторяемые блоки («+ ещё») */
.add-q { display: flex; flex-direction: column; }
.add-q > label, .add-q-label { margin-top: 0; }
.add-q-label { display: block; font-weight: 500; }
.add-facts { display: flex; flex-direction: column; gap: 18px; margin-top: 12px; }
.add-rep { display: flex; flex-direction: column; gap: 12px; margin-top: 8px; }
.add-rep input[type=text], .add-rep textarea { margin-top: 0; }
/* повторяемый пункт: содержимое + ✕ удаления */
.add-rep-item { display: flex; align-items: flex-start; gap: 10px; }
.add-rep-item > input[type=text], .add-rep-item > textarea, .add-photo-fields { flex: 1; min-width: 0; }
.add-photo-fields { display: flex; flex-direction: column; gap: 10px; }
.add-rep-x { flex: none; width: 36px; height: 36px; min-height: 0; margin-top: 6px; padding: 0; border: 0; border-radius: var(--r-sm); background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; color: var(--faint); font-size: var(--fs-sm); line-height: 1; cursor: pointer; transition: color .2s, background-color .2s; }
.add-rep-x::after { content: none; }
.add-rep-x:hover { color: var(--danger); background: var(--danger-tint); box-shadow: none; }
/* пометки полей */
.req { color: rgb(var(--a)); font-weight: 400; font-size: var(--fs-xs); }
.add-who { margin-bottom: 6px; }
/* заголовки-шаги: явно разделяют «о вас» и «о человеке памятника» */
.add-step { font-family: var(--font-display); font-weight: 500; font-size: var(--fs-body); margin: 0; }
.add-step .step-num { color: var(--accent); margin-right: 4px; }
.add-step-about { border-top: 1px solid var(--line); padding-top: 26px; margin-top: 8px; }
.add-step-note { display: block; font-family: var(--font-text); font-weight: 400; font-size: var(--fs-sm); color: var(--faint); margin-top: 6px; line-height: 1.5; }
.add-locked { font-family: var(--font-text); font-size: var(--fs-sm); color: var(--faint); border-top: 1px solid var(--line); padding-top: 20px; margin: 8px 0 0; }
.add-more {
  align-self: flex-start; margin-top: 10px; padding: 6px 0;
  background: none; border: 0; box-shadow: none;
  -webkit-backdrop-filter: none; backdrop-filter: none;
  color: var(--accent); font-family: var(--font-display); font-weight: 500;
  font-size: var(--fs-label); letter-spacing: var(--ls-label); text-transform: uppercase; cursor: pointer;
}
.add-more::after { content: none; }
.add-more:hover { color: var(--ink); background: none; box-shadow: none; }
.step-intro { color: var(--muted-solid); font-size: var(--fs-sm); margin: 8px 0 0; line-height: 1.6; }
.form-error { background: var(--warn-bg); color: var(--danger); padding: 11px 14px; border-radius: var(--r-md); border: 1px solid #d9c2c8; }

/* --- QR --- */
.page-qr { text-align: center; margin: 28px 0 8px; }
.page-qr-img { width: 150px; height: 150px; image-rendering: pixelated; background: #fff; padding: 10px; border-radius: var(--r-md); border: 1px solid var(--line); }
.page-qr-note { color: var(--muted-solid); font-size: var(--fs-sm); margin: 10px 0 0; }

/* баннер «поделиться страницей» — на памятнике и на странице «спасибо».
   Сетка: код и текст в первом ряду, кнопка копирования — во втором, прямо под кодом. */
.m-qr { padding: 1vh 0 5vh; }
.m-qr-panel { display: grid; grid-template-columns: auto 1fr; gap: 12px 20px; border: 1px solid var(--a-line); background: var(--a-tint); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-radius: var(--r-xl); padding: 18px; cursor: pointer; transition: background-color .3s, border-color .3s; }
.m-qr-panel:hover { background: var(--a-soft); }
.m-qr-panel.copied { border-color: rgb(var(--a)); background: var(--a-fill); }
.m-qr-img { grid-area: 1 / 1; width: 120px; height: 120px; image-rendering: pixelated; background: #fff; padding: 9px; border-radius: var(--r-md); border: 1px solid var(--line); }
.m-qr-text { grid-area: 1 / 2; align-self: center; min-width: 0; }
.m-qr-text p { color: var(--muted-solid); font-size: var(--fs-sm); line-height: 1.5; margin: 0; }
.m-qr-copy { grid-area: 2 / 1; justify-content: center; padding: 10px 16px; font-size: var(--fs-xs); white-space: nowrap; }
.m-qr-copy::after { content: none; }
/* На телефоне колонка под кодом слишком узкая для подписи кнопки: пускаем кнопку
   на всю ширину панели (тот же смысл — под кодом) и уменьшаем сам код, чтобы
   текст помещался рядом с ним и справа не оставалось пустоты. */
@media (max-width: 560px) {
  .m-qr-panel { gap: 10px 14px; padding: 14px; }
  .m-qr-img { width: 96px; height: 96px; padding: 7px; }
  .m-qr-copy { grid-column: 1 / -1; }
}

/* QR крупно (клик по коду). Фон белый ЖЁСТКО, а не токеном, и в тёмной теме тоже:
   это не оформление, а функция — матрица отдаёт максимум света, код читается камерой
   с чужого телефона. Яркость экрана веб-странице недоступна, белый лист её заменяет. */
.qr-view { position: fixed; inset: 0; z-index: 200; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 20px; padding: 24px;
  background: #fff; cursor: zoom-out; }
.qr-view img { width: min(78vw, 78vh); height: auto; image-rendering: pixelated; }
.qr-view p { margin: 0; color: #6b6255; font-size: var(--fs-sm); text-align: center; }
.m-qr-img { cursor: zoom-in; }

/* --- Лендинг --- */
.landing-share { margin: 34px 0 0; }
.landing-share h2 { margin: 0 0 14px; }
/* код тут крупнее, чем на памятнике: его показывают с экрана человеку рядом,
   а не рассматривают на своей странице */
.landing-share .m-qr-img { width: 150px; height: 150px; }
@media (max-width: 560px) { .landing-share .m-qr-img { width: 124px; height: 124px; } }
.landing-hero { text-align: center; padding: 6vh 0 2vh; }
.landing-hero h1 { font-size: clamp(38px, 7vw, 64px); font-weight: 300; }
.landing-sub { color: var(--muted-solid); max-width: 34em; margin: 14px auto 0; }
.landing-actions { margin: 28px 0 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.landing-login { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 12px 26px; border-radius: var(--r-pill); background: var(--ink); color: #f8f6f2; text-decoration: none; }
.landing-login:hover { box-shadow: none; }
.landing-actions form { margin: 0; }
.landing-logout { cursor: pointer; }
/* аккаунт — hairline-блок без коробки (направление «Линии») */
.landing-account { margin: 32px auto 0; padding: 24px 0; max-width: 480px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.landing-account p { margin: 0; }
.landing-account-label { font-family: var(--font-display); font-weight: 500; font-size: var(--fs-label); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--muted-solid); }
.landing-account-name { font-family: var(--font-display); font-weight: 400; font-size: 22px; color: var(--ink); margin-top: 6px !important; }
.landing-account .landing-actions { margin-top: 18px; }
/* тихая строка аккаунта на главной (вы вошли как … · мои памятники · выйти) */
.landing-acct { color: var(--muted-solid); font-size: var(--fs-sm); margin-top: 18px; }
.landing-acct b { color: var(--ink); font-weight: 500; }
.landing-acct a { color: var(--muted-solid); text-decoration: none; border-bottom: 1px solid currentColor; }
.landing-acct a:hover { color: var(--ink); border-bottom-color: var(--ink); }
/* имя = ссылка на профиль (главную со списком «Ваши памятники») */
.landing-acct-name { color: var(--ink); font-weight: 500; border-bottom-color: var(--line); }
.landing-acct-name:hover { color: var(--ink); border-bottom-color: var(--ink); }
.inline-form { display: inline; }
.landing-acct .landing-logout { display: inline; min-height: 0; padding: 0; font-family: var(--font-text); font-weight: 400; font-size: var(--fs-sm); letter-spacing: 0; text-transform: none; color: var(--muted-solid); vertical-align: baseline; }
.landing-acct .landing-logout:hover { color: var(--ink); }

/* список памятников — hairline-строки со стрелкой */
.mem-list { list-style: none; padding: 0; margin: 8px 0 0; display: flex; flex-direction: column; gap: 0; }
.mem-link { display: flex; align-items: center; gap: 18px; text-decoration: none; color: inherit; border: 0; border-top: 1px solid var(--line); border-radius: 0; padding: 22px 2px; background: none; box-shadow: none; }
a.mem-link::after { content: "→"; margin-left: auto; color: var(--faint); transition: transform .3s, color .3s; }
a.mem-link:hover::after { transform: translateX(5px); color: var(--ink); }
a.mem-link:hover .mem-name { color: var(--accent); }
.mem-ava { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; flex: none; border: 1px solid var(--line); }
/* «показать остальные» — тихое раскрытие под примерами. Нативный <details> без JS,
   маркер прячем, как у остальных раскрытий проекта (.m-addhere-open, .faq-q). */
.mem-more > summary { list-style: none; cursor: pointer; display: inline-block; padding: 14px 2px; color: var(--faint); font-size: var(--fs-sm); border-top: 1px solid var(--line); width: 100%; transition: color .2s; }
.mem-more > summary::-webkit-details-marker { display: none; }
.mem-more > summary:hover { color: var(--muted-solid); }
.mem-more[open] > summary { color: var(--muted-solid); }
.mem-more .mem-list { margin: 0; }
/* верхний пункт списка — «Создать»: такой же элемент, +-аватар в живом акценте */
.mem-link--create .mem-ava { background: var(--a-fill); border: 1px solid rgba(var(--a), .32); display: grid; place-items: center; color: rgb(var(--a)); }
.mem-link--create .mem-ava svg { width: 20px; height: 20px; }
.mem-ava--empty { display: inline-flex; align-items: center; justify-content: center; background: radial-gradient(circle at 50% 38%, #f0ede6, #e4dfd4); color: var(--faint); font-size: var(--fs-xs); }
.mem-meta { display: flex; flex-direction: column; gap: 3px; }
.mem-name { font-family: var(--font-display); font-weight: 500; font-size: var(--fs-body); }
.mem-dates { color: var(--muted-solid); font-size: var(--fs-sm); }
/* бейдж модерации в списках памятников — мягкий чип (полупрозрачный акцент) */
.mem-badge { display: inline-flex; align-items: center; gap: 5px; flex: none; padding: 5px 11px; border-radius: var(--r-pill); background: rgba(var(--a),.13); color: rgb(var(--a)); font-family: var(--font-display); font-weight: 500; font-size: var(--fs-xs); text-decoration: none; white-space: nowrap; transition: background-color .25s; }
.mem-link > .mem-badge { margin-left: auto; }
.mem-badge--link { align-self: flex-start; margin: 5px 0 2px; }
.mem-badge svg { color: rgb(var(--a)); }
.mem-badge--link:hover { background: rgba(var(--a),.2); }

/* лайтбокс — клик по фото открывает его в полном размере */
.mod-media img { cursor: zoom-in; }
.lightbox { position: fixed; inset: 0; z-index: 1200; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(24,20,15,.88); cursor: zoom-out; -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
.lightbox img { max-width: 96vw; max-height: 92vh; border-radius: var(--r-xs); box-shadow: 0 20px 60px rgba(0,0,0,.5); }
.my-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 8px; font-size: var(--fs-sm); }
.my-actions a { color: var(--accent); text-decoration: none; }
/* FAQ-аккордеон: нативный <details>, раскрывается без JS. Раскрытый пункт
   подсвечиваем акцентной подложкой, маркер браузера прячем, шеврон поворачиваем.
   Ответ описан как .faq-item .faq-a — иначе его перебивает .doc-page p на /faq. */
.faq-list { display: flex; flex-direction: column; gap: 8px; }
.faq-item { border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); }
.faq-item[open] { border-color: var(--a-line); background: var(--a-tint); }
.faq-q { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 16px; font-family: var(--font-display); font-weight: 400; font-size: var(--fs-sm); line-height: 1.4; color: var(--ink); border-radius: var(--r-md); transition: background-color .2s; }
.faq-q::-webkit-details-marker { display: none; }
.faq-q:hover { background: var(--a-tint); }
.faq-chev { flex: none; color: rgb(var(--a)); transition: transform .25s; }
.faq-item[open] .faq-chev { transform: rotate(180deg); }
/* .faq-body — обёртка ответа: её высоту анимирует скрипт на /faq, overflow прячет
   текст на время сворачивания. Без JS это просто контейнер, поведение штатное. */
.faq-body { overflow: hidden; }
.faq-item .faq-a { margin: 0; padding: 0 16px 15px; color: var(--muted-solid); font-size: var(--fs-sm); line-height: 1.65; }
/* при сворачивании open снимается только в конце — шеврон опускаем сразу */
.faq-item.is-closing .faq-chev { transform: none; }
.doc-page .doc-lead { color: var(--muted-solid); margin: -8px 0 22px; }
/* .doc-page p (специфичнее) обнуляла отступ — кнопка прилипала к последнему вопросу */
.doc-page .faq-cta { margin: 30px 0 0; }

.landing-foot { text-align: center; margin: 36px 0 6px; }
.landing-foot a { color: var(--faint); font-size: var(--fs-sm); }

/* --- Вход --- */
/* margin на dvh, а не vh: на мобильном при вводе кода клавиатура и панель
   автозаполнения меняют видимую высоту на каждый ввод, а обычный vh пересчитывает
   отступ каждый раз — форма «плывёт». dvh следует за реальным вьюпортом плавно;
   vh оставлен фоллбэком для браузеров без поддержки dvh. */
.login-wrap { position: relative; z-index: 2; max-width: 380px; margin: 6vh auto; margin: 6dvh auto; }
.login-sub { color: var(--muted-solid); font-size: var(--fs-sm); }
.login-form, .login-email, .code-form { display: flex; flex-direction: column; gap: 16px; margin-top: 22px; }
.login-form label, .login-email label, .code-label { display: flex; flex-direction: column; font-weight: 500; gap: 6px; }
.login-form input, .login-email input, .code-cell { padding: 13px 15px; border: 1px solid transparent; border-radius: var(--r-md); background: rgba(255,255,255,.55); box-shadow: inset 0 1px 2px rgba(90,75,55,.10), inset 0 -1px 1px rgba(255,255,255,.55); transition: background-color .2s, box-shadow .2s; }
.login-form input:focus, .login-email input:focus, .code-cell:focus { outline: none; background: rgba(255,255,255,.72); box-shadow: inset 0 1px 2px rgba(90,75,55,.06), 0 0 0 3px rgba(var(--a),.18); }
.login-form button, .login-email button, .code-form button { margin-top: 4px; }
/* Что мы НЕ делаем с аккаунтом — тихо, но читаемо: для 55–70 это главный
   вопрос перед кнопкой «Войти через VK». Ниже кнопок, потому что читают его
   уже после того, как увидели, чем входить. */
.login-safety { margin: 18px 0 0; color: var(--muted-solid); font-size: var(--fs-sm); line-height: 1.55; }
/* Обещание объёма впереди — только тем, кто пришёл заводить памятник. */
.login-next { margin: 12px 0 0; padding: 12px 14px; border-radius: var(--r-md);
  background: var(--a-tint); color: var(--muted-solid); font-size: var(--fs-sm); line-height: 1.55; }
.login-back { margin-top: 22px; }
.login-back a { color: var(--muted-solid); text-decoration: none; }
.provider-login { display: flex; flex-direction: column; gap: 12px; margin-top: 22px; }
.provider-btn { width: 100%; }

/* Вход по почте раскрывается из последней кнопки в ряду провайдеров (<details>):
   форма появляется прямо под ней, поэтому отдельного разделителя больше нет. */
.login-email-more { width: 100%; }
.login-email-more > summary { list-style: none; text-align: center; }
.login-email-more > summary::-webkit-details-marker { display: none; }
.login-email { margin-top: 16px; }
.login-email .hint { color: var(--muted-solid); font-size: var(--fs-sm); }

/* Шесть клеток под код. По цифре в каждой: сразу видно, сколько знаков ждут, и не
   нужно сверяться с письмом на каждом символе. Клетка крупная — палец попадает без
   прицеливания, для аудитории 55–70 это не мелочь. Вид поля (фон, рамка, фокус, тёмная
   тема) НЕ дублируем: клетка добавлена в общий селектор полей входа выше, поэтому
   меняется вместе с ними. Здесь — только геометрия и шрифт.
   Скрипт code-cells.js добавляет автопереход и вход по последней цифре; без него
   клетки остаются обычными полями и работают с кнопкой. */
.code-cells { display: flex; gap: 8px; justify-content: center; }
.code-cell {
  width: 48px; height: 56px; padding: 0; text-align: center;
  font-family: var(--font-display); font-size: var(--fs-lead); font-weight: 500;
}
@media (max-width: 380px) {
  /* На узком экране шесть клеток по 48 не помещаются — сжимаем, но не ниже 40. */
  .code-cells { gap: 6px; }
  .code-cell { width: 40px; height: 50px; }
}
.code-label { font-weight: 500; gap: 6px; }
.code-form { margin-top: 22px; }
.code-resend { margin-top: 18px; }
/* Кнопка-ссылка: повтор отправки — действие второго плана, форма ради POST. */
.linklike {
  padding: 0; border: 0; background: none; color: var(--muted-solid);
  font-size: var(--fs-sm); text-decoration: underline; cursor: pointer;
}
.linklike::after { content: none; }
.linklike:hover { color: var(--text); }

/* --- Приглашение --- */
.invite { max-width: 500px; }
.invite-sub { color: var(--muted-solid); }
.invite-qr { text-align: center; margin: 20px 0; border: 1px solid var(--a-line); background: var(--a-tint); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-radius: var(--r-xl); padding: 22px; }
.invite-label { display: block; font-weight: 500; margin-top: 22px; }
.invite-text { width: 100%; margin-top: 8px; padding: 13px; border: 1px solid transparent; border-radius: var(--r-md); background: rgba(255,255,255,.55); box-shadow: inset 0 1px 2px rgba(90,75,55,.10), inset 0 -1px 1px rgba(255,255,255,.55); transition: background-color .2s, box-shadow .2s; }
.invite-text:focus { outline: none; background: rgba(255,255,255,.72); box-shadow: inset 0 1px 2px rgba(90,75,55,.06), 0 0 0 3px rgba(var(--a),.18); }

/* --- Подвал --- */
.foot { position: relative; z-index: 2; flex-shrink: 0; max-width: 680px; width: 100%; margin: 28px auto; padding: 0 22px calc(8px + env(safe-area-inset-bottom)); color: var(--faint); font-size: var(--fs-xs); text-align: center; }

/* --- Дисклеймеры --- */
.page-note { color: var(--muted-solid); font-size: var(--fs-xs); margin: 18px 0; padding: 13px 15px; background: var(--warn-bg); border-radius: var(--r-md); }
.media-warn { color: var(--danger); font-size: var(--fs-xs); margin: 8px 0 0; }
.consent152 { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-xs); font-weight: 400; color: var(--danger); margin-right: 10px; }
.consent152 input { margin: 0; }

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; }
}

/* ═══════════════════════════════════════════════════════════════════
   КНОПКИ v2 — «текст + иконка» на полупрозрачной акцентной плашке.
   Цвет берётся из живого фона: --a = var(--halo-rgb) (floating-bg.js).
   Переопределяет прежние стили кнопок (graphite-пилюли).
   ═══════════════════════════════════════════════════════════════════ */
button, .btn-new, .login-prompt-btn, .provider-btn, .landing-login,
.landing-secondary, .filebtn-face {
  font-family: var(--font-display); font-weight: 500; letter-spacing: .06em;
  text-transform: uppercase; font-size: var(--fs-label); line-height: 1;
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  cursor: pointer; text-decoration: none; color: var(--ink);
  border: 1px solid transparent; background: var(--a-fill-strong);
  border-radius: var(--r-sm); padding: 13px 18px; min-height: 0;
  transition: background-color .3s, box-shadow .3s, color .3s, transform .25s;
}
button:hover, .btn-new:hover, .login-prompt-btn:hover, .provider-btn:hover,
.landing-login:hover, .landing-secondary:hover, .filebtn-face:hover {
  background: var(--a-fill-hover); transform: none;
}
/* стрелка-иконка справа */
button::after { content: "→"; color: rgb(var(--a)); font-weight: 500; transition: transform .3s; }
button:hover::after { transform: translateX(3px); }
.landing-login::after, .btn-new::after { content: "→"; color: rgb(var(--a)); transition: transform .3s; }
.landing-login:hover::after, .btn-new:hover::after { transform: translateX(3px); }
.mod-actions button::after, .logout-btn::after, .landing-logout::after { content: none; }

/* вторичная — легче; выход — тихий текст */
.landing-secondary { background: rgba(var(--a), .05); }
.landing-logout, .logout-btn {
  border: 0; background: none; -webkit-backdrop-filter: none; backdrop-filter: none;
  color: var(--muted-solid); border-radius: 0; padding: 12px 4px; box-shadow: none;
}
.landing-logout:hover, .logout-btn:hover { color: var(--ink); background: none; }

/* модерация — иконки ✓ / ✕ и свои тона (смысл не «уплывает» с акцентом) */
.mod-actions button { padding: 11px 16px; }
.mod-actions button.ok { color: var(--ok); border-color: transparent; background: rgba(var(--ok-rgb),.14); }
.mod-actions button.ok::before { content: "✓"; margin-right: 3px; }
.mod-actions button.danger { color: var(--danger); border-color: transparent; background: rgba(var(--danger-rgb),.14); }
.mod-actions button.danger::before { content: "✕"; margin-right: 3px; }
.mod-actions button:hover { background: var(--a-fill); }
.mod-actions button.ok:hover { background: rgba(var(--ok-rgb),.16); }
.mod-actions button.danger:hover { background: rgba(var(--danger-rgb),.16); }

/* кастомный выбор файла — русский, иконка, живой акцент */
.filebtn { display: inline-flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 8px; }
.filebtn-input { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); border: 0; }
.filebtn-face svg { width: 15px; height: 15px; flex: none; color: rgb(var(--a)); }
.filebtn-face::after { content: none; }
.filebtn-input:focus-visible + .filebtn-face { outline: 2px solid rgb(var(--a)); outline-offset: 2px; }
.filebtn-name { color: var(--faint); font-family: var(--font-text); font-size: var(--fs-sm); text-transform: none; letter-spacing: 0; font-weight: 400; }
.filefield { display: flex; flex-direction: column; gap: 10px; }
.flabel { display: block; font-weight: 500; }
.anketa .filefield { margin-top: 22px; }
.person-fields .filefield { margin-top: 4px; }

/* кастомные чекбоксы — акцентная заливка + белая галочка (без правок разметки) */
input[type=checkbox] {
  -webkit-appearance: none; appearance: none; width: 22px; height: 22px; flex: none; margin: 0; cursor: pointer;
  border: 0; border-radius: var(--r-xs); background: var(--a-fill);
  box-shadow: inset 0 1px 2px rgba(90,75,55,.14);
  transition: background-color .2s, box-shadow .2s; vertical-align: middle;
}
input[type=checkbox]:checked {
  background-color: rgb(var(--a)); box-shadow: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'><path d='M5 13l4 4L19 7'/></svg>");
  background-size: 14px; background-position: center; background-repeat: no-repeat;
}
input[type=checkbox]:focus-visible { outline: 2px solid rgb(var(--a)); outline-offset: 2px; }

/* --- Удаление памятника (страница подтверждения) --- */
.dm-delete { max-width: 560px; }
.del-warn { margin: 22px 0; padding: 16px 18px; border-radius: var(--r-lg); background: var(--danger-tint); color: var(--text); font-size: var(--fs-sm); line-height: 1.6; }
.del-warn p { margin: 0; }
.del-step { margin: 26px 0; }
.del-step-lead { margin: 0 0 4px; font-weight: 600; font-size: var(--fs-body); }
.del-step-sub { margin: 0 0 16px; color: var(--muted-solid); font-size: var(--fs-sm); line-height: 1.6; }
.del-export { display: inline-flex; align-items: center; gap: 10px; padding: 14px 22px; text-decoration: none; color: var(--ink); background: var(--a-fill-strong); border-radius: var(--r-md); font-weight: 500; font-size: var(--fs-sm); transition: background-color .25s; }
.del-export:hover { background: var(--a-fill-hover); }
.del-form { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; margin-top: 30px; padding-top: 22px; border-top: 1px solid var(--line); }
.del-cancel { color: var(--muted-solid); text-decoration: none; font-size: var(--fs-sm); }
.del-cancel:hover { color: var(--ink); }
/* деструктивная кнопка: фиксированный читаемый бордо в обеих темах */
.del-form button.danger { color: #fff; background: var(--danger); }
.del-form button.danger::after { content: none; }
.del-form button.danger:hover { background: #8f3d4e; }

/* --- Экспорт памятника (выбор объёма) --- */
.dm-export { max-width: 560px; }
.exp-opts { display: flex; flex-direction: column; gap: 14px; margin-top: 24px; }
.exp-opt { display: block; padding: 18px 20px; border-radius: var(--r-lg); text-decoration: none; color: var(--text); background: var(--a-tint); border: 1px solid var(--a-fill-strong); transition: background-color .2s, box-shadow .2s, transform .2s; }
.exp-opt:hover { background: rgba(var(--a),.12); transform: translateY(-1px); }
.exp-opt-head { display: flex; align-items: center; gap: 10px; }
.exp-opt-name { font-family: var(--font-display); font-weight: 500; font-size: var(--fs-body); }
.exp-opt-n { font-family: var(--font-display); font-weight: 500; font-size: var(--fs-xs); color: rgb(var(--a)); background: var(--a-fill); border-radius: var(--r-pill); padding: 2px 9px; }
.exp-opt-sub { display: block; margin-top: 6px; color: var(--muted-solid); font-size: var(--fs-sm); line-height: 1.55; }
.exp-opt-go { display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; font-family: var(--font-display); font-weight: 500; font-size: var(--fs-xs); letter-spacing: .04em; color: rgb(var(--a)); }
.del-export-row { display: flex; flex-wrap: wrap; gap: 12px; }

/* --- Модерация памятника (заметка автору на /my + панель в админке) --- */
.mem-modnote { display: block; margin-top: 5px; font-size: var(--fs-xs); line-height: 1.45; color: var(--muted-solid); background: rgba(var(--warn-rgb),.14); border-radius: var(--r-xs); padding: 6px 10px; }
.pmod-badge { font-size: var(--fs-xs); font-weight: 600; border-radius: var(--r-pill); padding: 2px 9px; margin-left: 6px; }
.pmod-badge--hidden { background: rgba(var(--danger-rgb),.16); color: var(--danger); }
.pmod-badge--needs_revision { background: rgba(var(--warn-rgb),.20); color: var(--warn); }
.pmod-badge--pending { background: var(--a-fill-strong); color: rgb(var(--a)); }
.pmod-form { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.pmod-label { display: block; font-size: var(--fs-label); font-weight: 600; letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--muted-solid); margin-bottom: 8px; }
.pmod-form textarea { width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-sm); background: rgba(255,255,255,.55); color: var(--text); font: inherit; resize: vertical; }
.pmod-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.pmod-actions button { padding: 9px 14px; font-size: var(--fs-xs); }
/* мягкие тинты (как в .mod-actions) — читаемо в обеих темах, без сплошного фона */
.pmod-actions button.ok { color: var(--ok); background: rgba(var(--ok-rgb),.14); }
.pmod-actions button.ok:hover { background: rgba(var(--ok-rgb),.22); }
.pmod-actions button.danger { color: var(--danger); background: rgba(var(--danger-rgb),.14); }
.pmod-actions button.danger:hover { background: rgba(var(--danger-rgb),.22); }
.pmod-actions button.ok::after, .pmod-actions button.danger::after { content: none; }
/* ссылка «объединить дубликат» под блоком модерации */
.pmod-merge { margin: 12px 0 0; font-size: var(--fs-xs); }
.pmod-merge a { color: var(--muted-solid); text-decoration: none; border-bottom: 1px solid transparent; }
.pmod-merge a:hover { color: var(--ink); border-bottom-color: var(--ink); }

/* --- Экран объединения памятников (merge.html) --- */
.merge-card { padding: 16px 18px; margin: 16px 0; border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--line); }
.merge-card p { margin: 0 0 6px; }
.merge-card p:last-child { margin-bottom: 0; }
.merge-target { border-color: rgba(var(--ok-rgb),.5); }
.merge-source { border-color: rgba(var(--danger-rgb),.4); }
.merge-role { font-family: var(--font-display); font-weight: 500; font-size: var(--fs-label); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--accent); }
.merge-name { font-size: var(--fs-lead); line-height: 1.35; }
.merge-dir { text-align: center; margin: 4px 0; font-size: var(--fs-xs); letter-spacing: .04em; }
.merge-pick { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; margin: 18px 0; }
.merge-pick label { display: flex; flex-direction: column; gap: 8px; font-weight: 500; width: 100%; }
.merge-pick select { padding: 11px 12px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); color: var(--text); font: inherit; max-width: 100%; }
.merge-warn { margin: 18px 0; padding: 14px 18px; border-radius: var(--r-md); background: rgba(var(--warn-rgb),.10); border: 1px solid rgba(var(--warn-rgb),.3); }
.merge-warn p { margin: 0 0 8px; }
.merge-warn ul { margin: 0; padding-left: 20px; }
.merge-warn li { margin: 6px 0; line-height: 1.5; }
.merge-confirm { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: 18px; }

/* --- Экран «Семья» (управление родственными связями, family.html) --- */
.fam-block { margin: 26px 0; }
.fam-block h2 { margin: 0 0 14px; }
.fam-request { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 18px; border: 1px solid var(--line); border-radius: var(--r-lg); margin-bottom: 10px; }
.fam-request-actions { display: flex; gap: 8px; }
.fam-request-actions form { margin: 0; }
.fam-request-actions button { padding: 9px 16px; font-size: var(--fs-xs); }
.fam-request-actions button.ok { color: var(--ok); background: rgba(var(--ok-rgb),.14); }
.fam-request-actions button.ok:hover { background: rgba(var(--ok-rgb),.22); box-shadow: none; }
.fam-list { list-style: none; margin: 0; padding: 0; }
/* строка родственника — сетка [роль | имя+подпись | ✕]: имя переносится в своей
   колонке, «без страницы»/годы идут отдельной строкой под именем (а не разъезжаются
   инлайном, как было на мобилке). */
.fam-list li { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; align-items: center; gap: 3px 12px; padding: 13px 0; border-top: 1px solid var(--line-soft); }
.fam-list li:first-child { border-top: 0; }
.fam-role { font-family: var(--font-display); font-weight: 500; font-size: var(--fs-label); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--faint); }
.fam-who { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.fam-name { color: var(--text); font-size: var(--fs-body); line-height: 1.3; overflow-wrap: anywhere; }
.fam-list a.fam-name { color: rgb(var(--a)); text-decoration: none; }
.fam-list a.fam-name:hover { text-decoration: underline; }
.fam-meta { color: var(--muted-solid); font-size: var(--fs-xs); }
.fam-remove { margin: 0; }
.fam-remove button { padding: 0; width: 32px; height: 32px; min-height: 0; background: none; color: var(--faint); border-radius: var(--r-xs); }
.fam-remove button:hover { color: var(--danger); background: var(--danger-tint); box-shadow: none; }
.fam-remove button::after, .fam-request-actions button::after { content: none; }
.fam-form select { width: 100%; margin-top: 8px; padding: 12px 14px; border: 1px solid transparent; border-radius: var(--r-md); background: rgba(255,255,255,.55); box-shadow: inset 0 1px 2px rgba(90,75,55,.10); color: var(--text); font: inherit; }

/* поле «Родственник» — автокомплит: одно поле, по вводу показывает существующие
   памятники карточками как на главной (.mem-ava/.mem-meta/.mem-name/.mem-dates);
   выбор из подсказок связывает страницы, свободный ввод уходит именем без страницы. */
.fam-ac { position: relative; }
.fam-ac-input { width: 100%; }
.fam-ac-list { list-style: none; position: absolute; left: 0; right: 0; top: 100%; z-index: 30;
  margin: 6px 0 0; padding: 6px; max-height: 300px; overflow-y: auto;
  background: var(--surface-solid); border-radius: var(--r-lg); box-shadow: var(--shadow-overlay); }
.fam-ac-opt { display: flex; align-items: center; gap: 14px; cursor: pointer; padding: 8px 10px; border-radius: var(--r-md); }
.fam-ac-opt:hover, .fam-ac-opt.is-active { background: var(--a-soft); }
.fam-ac-opt .mem-ava { width: 44px; height: 44px; }
.fam-ac-empty { padding: 11px 12px; color: var(--muted-solid); font-size: var(--fs-sm); line-height: 1.4; }
.fam-ac-nojs { margin-top: 12px; }

/* предупреждение о возможном дубликате в форме создания памятника */
.dup-warn { margin: 4px 0 16px; padding: 14px 18px; border-radius: var(--r-md); background: rgba(var(--warn-rgb),.10); border: 1px solid rgba(var(--warn-rgb),.3); }
.dup-warn p { margin: 0 0 8px; }
.dup-warn p:last-child { margin-bottom: 0; }
.dup-list { margin: 0 0 8px; padding-left: 20px; }
.dup-list li { margin: 6px 0; line-height: 1.5; }
.dup-hint { color: var(--muted-solid); font-size: var(--fs-sm); }

/* --- Чип статуса видимости («виден всем» / «скрыт» / «на доработке») --- */
.m-vis { display: inline-block; font-family: var(--font-display); font-weight: 500; font-size: var(--fs-xs); letter-spacing: .03em; padding: 2px 10px; border-radius: var(--r-pill); white-space: nowrap; }
.m-vis--ok { background: var(--ok-fill); color: var(--ok); }
.m-vis--pending { background: var(--a-fill-strong); color: rgb(var(--a)); }
.m-vis--hidden { background: var(--danger-fill); color: var(--danger); }
.m-vis--revision { background: var(--warn-fill); color: var(--warn); }
.mem-status { display: inline-block; margin-top: 5px; }
.m-vis-line { margin: 16px 0 0; }   /* на деталке памятника — под датами */

/* --- Баннер запроса модератора на странице модерации владельца --- */
.revbanner { margin: 0 0 26px; padding: 14px 18px; border-radius: var(--r-lg); background: rgba(var(--warn-rgb),.12); border: 1px solid var(--warn-line); font-size: var(--fs-sm); line-height: 1.55; }
.revbanner strong { font-weight: 600; }
.revbanner-sub { display: block; margin-top: 6px; font-size: var(--fs-xs); color: var(--muted-solid); }
.revbanner a { color: rgb(var(--a)); }

/* ═══════════════════════════════════════════════════════════════════
   ТЁМНАЯ ТЕМА — по системной (prefers-color-scheme) + ручной тумблер.
   Класс body.dark ставит ранний скрипт в base.html; живой фон
   (floating-bg.js) сам реагирует на этот класс.
   ═══════════════════════════════════════════════════════════════════ */
/* Переменные тёмной палитры — в static/tokens.css (единственное определение
   body.dark{--...}). Ниже — только правила тёмной темы, потребляющие эти токены. */
/* поля ввода — вдавленный тёмный фон вместо светлого */
body.dark input[type=text], body.dark input[type=password], body.dark input[type=email], body.dark textarea {
  background: rgba(255,255,255,.05); color: var(--text);
  box-shadow: inset 0 1px 2px rgba(0,0,0,.35), inset 0 -1px 1px rgba(255,255,255,.04);
}
body.dark input[type=text]:focus, body.dark input[type=password]:focus, body.dark input[type=email]:focus, body.dark textarea:focus {
  background: rgba(255,255,255,.09);
  box-shadow: inset 0 1px 2px rgba(0,0,0,.3), 0 0 0 3px rgba(var(--a),.30);
}
body.dark input::placeholder, body.dark textarea::placeholder { color: var(--faint); }
/* чекбоксы */
body.dark input[type=checkbox] { background: rgba(255,255,255,.08); box-shadow: inset 0 1px 2px rgba(0,0,0,.4); }
/* поверхности: фото-редактор, заглушка-аватар, форма-error, дисклеймеры */
body.dark .pe-selected { background: rgba(255,255,255,.06); }
body.dark .pe-box { background: var(--surface-solid); box-shadow: var(--shadow-overlay); }
body.dark .pe-thumb { background: #2b2620; }
body.dark .mem-ava--empty { background: radial-gradient(circle at 50% 38%, #2b2620, #1c1813); }
body.dark .page-note, body.dark .warn-bg, body.dark .form-error { background: rgba(255,255,255,.05); }
body.dark .form-error { border-color: rgba(224,135,156,.4); }
/* Тёмные дубли чипов статуса убраны: --ok/--danger/--warn и их тройки уже
   светлеют в body.dark (tokens.css), поэтому чипы читаются на угле сами. */
body.dark .mem-modnote { color: var(--muted-solid); }
/* футер: «О проекте» / «Контакты» — текстовые ссылки в один ряд. */
.foot-actions { display: inline-flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px 16px; margin-top: 8px; }
.foot-link { display: inline-block; color: var(--faint); font-family: var(--font-text); font-weight: 400; font-size: var(--fs-xs); letter-spacing: 0; text-decoration: none; border-bottom: 1px solid currentColor; padding: 6px 10px; }
.foot-link:hover { color: var(--ink); }

/* отдельные страницы «О проекте» / «Контакты» — тихий читаемый текст в колонке */
.doc-page { position: relative; z-index: 2; max-width: 640px; margin: 0 auto; padding: calc(40px + env(safe-area-inset-top)) 22px 8vh; }
.doc-back { margin: 0 0 26px; }
.doc-back a { color: var(--muted-solid); text-decoration: none; font-size: var(--fs-sm); }
.doc-back a:hover { color: var(--ink); }
.doc-page h1 { font-family: var(--font-display); font-weight: 300; font-size: clamp(30px, 5vw, 44px); line-height: 1.1; margin: 0 0 26px; color: var(--text); }
.doc-page p { font-size: var(--fs-body); line-height: 1.8; color: var(--text); margin: 0 0 18px; }
.doc-page p:last-child { margin-bottom: 0; }
.doc-mail { font-size: var(--fs-lead); margin-top: 10px; }
.doc-mail a { color: rgb(var(--a)); text-decoration: none; border-bottom: 1px solid rgba(var(--a), .4); }
.doc-mail a:hover { border-bottom-color: rgb(var(--a)); }

/* ═══════════════════════════════════════════════════════════════════
   ПОЛЯ v2 — «Акварель»: пигмент, не поверхность (решение владельца, канон
   на /design-system → «Поля ввода»). Плоская тонировка бумаги (--a-tint),
   фокус — ТОЛЬКО цвет (--a-fill): без рамок, inset-теней, колец и кромок —
   всё это читалось как объём и конфликтовало с «частицы невесомы, теней нет».
   Суперседит прежнее «вдавленное стекло» тем же набором селекторов (равная
   специфичность, позже по каскаду) — оригиналы не трогаем, откат = удалить блок.
   ═══════════════════════════════════════════════════════════════════ */
.share-form textarea, .share-form input[type=text],
.person-fields input[type=text], .person-fields textarea, .mod-edit textarea,
.anketa input[type=text], .anketa textarea,
.date-parts input, .date-parts select,
.login-form input,
.invite-text,
.fam-form select {
  border: 0; border-radius: var(--r-md);
  background: var(--a-tint); box-shadow: none;
  transition: background-color .2s;
}
.share-form textarea:focus, .share-form input[type=text]:focus,
.person-fields input:focus, .person-fields textarea:focus, .mod-edit textarea:focus,
.anketa input:focus, .anketa textarea:focus,
.date-parts input:focus, .date-parts select:focus,
.login-form input:focus,
.invite-text:focus,
.fam-form select:focus {
  outline: none; background: var(--a-fill); box-shadow: none;
}
/* тёмная тема: --a-* акцент-независимы (работают в обеих темах) — здесь лишь
   гасим прежние dark-инсеты, чей селектор специфичнее пер-формовых */
body.dark input[type=text], body.dark input[type=password], body.dark input[type=email], body.dark textarea,
body.dark .date-parts input, body.dark .date-parts select {
  background: var(--a-tint); box-shadow: none;
}
body.dark input[type=text]:focus, body.dark input[type=password]:focus, body.dark input[type=email]:focus, body.dark textarea:focus,
body.dark .date-parts input:focus, body.dark .date-parts select:focus {
  background: var(--a-fill); box-shadow: none;
}

/* счётчик остатка у поля с maxlength (лимиты длины воспоминаний) — тихая подпись */
.field-count { display: block; margin-top: 4px; font-family: var(--font-display); font-weight: 500; font-size: var(--fs-label); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--faint); text-align: right; }
.field-count--edge { color: var(--muted-solid); }

/* Общие заголовки разделов: лента памяти и настройки страницы. */
.m-sec-head{display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:6px 16px;border-top:1px solid var(--line);padding:20px 0 24px}
.m-lead{font-family:var(--font-display);font-weight:500;font-size:var(--fs-memorial-section);line-height:1.5;letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--muted-solid);overflow-wrap:anywhere}

/* Настройки — одна колонка с теми же разделителями, что и лента. */
body:has(.dm-settings) .wrap { max-width: 640px; }
.dm-settings > h1 { margin-bottom: 28px; font-weight: 400; line-height: 1.3; }
.settings-section + .settings-section { margin-top: 48px; }
.dm-settings .m-lead { margin: 0; }
.dm-settings .anketa > label:first-child { margin-top: 0; }
.dm-settings .date-pair { grid-template-columns: 1fr; }
.dm-settings .exp-opts { margin-top: 0; }
.settings-delete .del-warn { margin: 16px 0; }
.settings-copy { margin: 0 0 24px; color: var(--muted-solid); font-size: var(--fs-sm); }
.settings-delete > summary { display: inline-flex; cursor: pointer; color: var(--danger);
  background: var(--danger-tint); border: 1px solid var(--danger-fill);
  padding: 12px 16px; border-radius: var(--r-sm); list-style: none;
  font-family: var(--font-display); font-weight: 500; font-size: var(--fs-sm); line-height: 1.4; }
.settings-delete > summary::-webkit-details-marker { display: none; }