/* ═══════════════════════════════════════════════════════════════════════
   Страницы-рассказы: «О сервисе» (templates/o-servise.html), дальше -
   страницы поводов для открыток. Подключается ПОСЛЕ ds/styles.css.

   Отдельно от style.css: рабочим экранам эти правила не нужны, а страницам
   не нужен app.js. Страница открывается из поиска, на телефоне чаще всего, -
   поэтому сначала узкий экран: одна колонка, крупные цели нажатия, ни одной
   прокрутки вбок.
   ═══════════════════════════════════════════════════════════════════════ */

/* Как в style.css: у компонентов свой display, и он сильнее встроенного
   правила браузера для [hidden] - спрятанное атрибутом осталось бы видно. */
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--surface-page);
  color: var(--text-primary);
}

.page { min-height: 100vh; display: flex; flex-direction: column; }
.page p { margin: 0; }
.page a { color: var(--text-link); }
.page a:hover { color: var(--text-link-hover); }
.page .gai-wordmark,
.page .gai-btn { color: inherit; }
.page .gai-wordmark { color: var(--text-primary); }
.page .gai-btn--primary,
.page .gai-btn--primary:hover { color: var(--action-primary-fg); }
.page .gai-btn--secondary,
.page .gai-btn--secondary:hover { color: var(--text-primary); }

.page-main {
  flex: 1;
  width: 100%;
  max-width: 920px;
  margin-inline: auto;
  padding: var(--space-9) var(--space-8) var(--space-11);
}

/* Тон открыток - как в сервисе (style.css здесь не подключается). */
.gai-tone-card {
  --accent: var(--rose-400);
  --accent-strong: var(--rose-500);
  --accent-soft: var(--rose-100);
  --accent-soft-hover: var(--rose-200);
  --accent-ink: var(--rose-700);
}
[data-theme="dark"] .gai-tone-card {
  --accent: var(--rose-300);
  --accent-soft: rgba(226, 110, 96, .16);
  --accent-ink: var(--rose-200);
}

/* ─── начало ─── */

.page-hero h1 { margin: var(--space-3) 0 var(--space-5); }
.page-kicker { color: var(--accent-strong); }
.page-lead {
  max-width: 62ch;
  font: var(--type-body-l);
  color: var(--text-secondary);
}

/* Три инструмента - три двери в сервис, у каждого свой цвет, как в меню */
.page-tools {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-5);
  margin-top: var(--space-8);
}
.page-tool {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-6);
  border: var(--stroke-hairline) solid var(--border-subtle);
  border-radius: var(--radius-lg);
  background: var(--surface-card);
  box-shadow: var(--shadow-sm);
  color: var(--text-primary);
  text-decoration: none;
  transition: transform var(--dur-3) var(--ease-spring-soft),
    box-shadow var(--dur-3) var(--ease-out), border-color var(--dur-2) var(--ease-out);
}
.page a.page-tool { color: var(--text-primary); }
.page-tool:hover {
  transform: translate3d(0, var(--lift-hover-card), 0);
  box-shadow: var(--shadow-lg);
  border-color: var(--accent-soft-hover, var(--border-default));
}
.page-tool:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.page-tool__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  background: var(--accent-soft);
  color: var(--accent-ink);
}
.page-tool strong { font: var(--type-h4); }
.page-tool > span:last-child { font: var(--type-body-s); color: var(--text-secondary); }

/* ─── разделы ─── */

.page-section { margin-top: var(--space-11); }
.page-section > h2 { margin: 0 0 var(--space-5); }
.page .page-text {
  max-width: 68ch;
  margin-top: var(--space-5);
  color: var(--text-secondary);
}
.page .page-section > h2 + .page-text { margin-top: 0; }

/* Шаги перевода: номер крупно, как этапы на карточке хода работы */
.page-steps {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-5);
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: шаг;
}
.page-steps li {
  counter-increment: шаг;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-6);
  border-radius: var(--radius-lg);
  background: var(--surface-sunken);
}
.page-steps li::before {
  content: counter(шаг);
  font: var(--weight-bold) var(--size-h2) / 1 var(--font-display);
  color: var(--tool-video);
  margin-bottom: var(--space-2);
}
.page-steps strong { font: var(--type-h4); }
.page-steps span { color: var(--text-secondary); }

/* Цены */
.page-prices {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-5);
}
.page-price {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-6);
  border: var(--stroke-hairline) solid var(--border-subtle);
  border-radius: var(--radius-lg);
  background: var(--surface-card);
  overflow: hidden;
}
/* Полоса цвета инструмента по верху: внутри скругления, а не поверх рамки */
.page-price::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 4px;
  background: var(--accent);
}
.page-price > span { font: var(--type-label); color: var(--text-muted); }
.page-price strong { font: var(--type-h3); color: var(--accent-ink); }
.page-price small { font: var(--type-body-s); color: var(--text-secondary); }

/* Голоса: карточка целиком - кнопка «послушать» */
.page-voices {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
  gap: var(--space-3);
  margin: var(--space-6) 0 0;
  padding: 0;
  list-style: none;
}
.page-voice {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  width: 100%;
  min-height: 60px;
  padding: var(--space-3) var(--space-4);
  border: var(--stroke-hairline) solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--surface-card);
  color: var(--text-primary);
  font: inherit;
  text-align: left;
}
button.page-voice { cursor: pointer; }
button.page-voice:hover { border-color: var(--border-default); background: var(--surface-hover); }
button.page-voice:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.page-voice > span:last-child { display: flex; flex-direction: column; min-width: 0; }
.page-voice strong { font: var(--type-label); overflow-wrap: anywhere; }
/* Пол и пометка LiveTTS: не влезают в строку - пометка переносится ниже,
   а не вылезает из карточки (на 320 точках так и было) */
.page-voice small {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px var(--space-3);
  font: var(--type-caption);
  color: var(--text-muted);
}
.page-voice__live {
  padding: 1px 6px;
  border-radius: var(--radius-pill);
  background: var(--tool-voice-soft);
  color: var(--tool-voice-ink);
  font: var(--weight-semibold) 10px/1.4 var(--font-text);
}
.page-voice__icon {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--tool-voice-soft);
  color: var(--tool-voice-ink);
}
.page-voice__icon .gai-icon { width: 18px; height: 18px; fill: currentColor; stroke: none; }
.page-voice__off,
.page-voice.is-playing .page-voice__on { display: none; }
.page-voice.is-playing .page-voice__off { display: block; }
.page-voice.is-playing .page-voice__icon { background: var(--tool-voice); color: var(--text-on-accent); }
.page-voice.is-playing { border-color: var(--tool-voice); }

/* Что с файлами */
.page-points { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--space-3); }
.page-points li {
  position: relative;
  padding-left: var(--space-7);
  color: var(--text-secondary);
}
.page-points li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.45em;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--status-success);
}

/* Вопросы: раскрываются сами, без сценария */
.page-faq { display: grid; gap: var(--space-3); }
.page-faq__item {
  border: var(--stroke-hairline) solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--surface-card);
}
.page-faq__item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: var(--control-touch);
  padding: var(--space-4) var(--space-5);
  font: var(--type-h4);
  cursor: pointer;
  list-style: none;
}
.page-faq__item summary::-webkit-details-marker { display: none; }
.page-faq__item summary::after {
  content: "";
  flex: none;
  width: 9px;
  height: 9px;
  border-right: 2px solid var(--text-muted);
  border-bottom: 2px solid var(--text-muted);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform var(--dur-2) var(--ease-out);
}
.page-faq__item[open] summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.page-faq__item summary:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-md); }
.page-faq__item p { padding: 0 var(--space-5) var(--space-5); color: var(--text-secondary); }

/* Попробовать */
.page-cta {
  padding: var(--space-8);
  border-radius: var(--radius-xl);
  background: var(--surface-sunken);
  text-align: center;
}
.page-cta > h2 { margin-bottom: var(--space-6); }
.page-cta__buttons { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-3); }

/* Подвал */
.page-foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2) var(--space-3);
  padding: var(--space-7) var(--space-5) var(--space-9);
  border-top: var(--stroke-hairline) solid var(--border-subtle);
  color: var(--text-muted);
}
.page .page-foot a { color: inherit; }

/* ─── телефон ─── */

@media (max-width: 760px) {
  .page-main { padding: var(--space-6) var(--space-5) var(--space-9); }
  .page-tools,
  .page-steps,
  .page-prices { grid-template-columns: minmax(0, 1fr); }
  .page-tools { gap: var(--space-3); margin-top: var(--space-7); }
  /* Дверь в инструмент на телефоне - строка: значок слева, текст справа */
  .page-tool {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: var(--space-4);
    row-gap: var(--space-1);
    padding: var(--space-5);
  }
  .page-tool__icon { grid-row: span 2; }
  .page-section { margin-top: var(--space-10); }
  .page-steps li,
  .page-price { padding: var(--space-5); }
  .page-voices { grid-template-columns: repeat(auto-fill, minmax(136px, 1fr)); }
  .page-voice { gap: var(--space-3); padding: var(--space-3); }
  .page-voice__icon { width: 34px; height: 34px; }
  .page-voice__icon .gai-icon { width: 16px; height: 16px; }
  .page-cta { padding: var(--space-7) var(--space-5); }
  .page-cta__buttons .gai-btn { flex: 1 1 100%; }
}

/* ═══════════════════════════════════════════════════════════════════════
   Голосовые поздравления: /pozdravleniya и страницы поводов
   (templates/pozdravleniya.html). Тон - открыток (.gai-tone-card на .page).
   ═══════════════════════════════════════════════════════════════════════ */

/* Путь: «Говорит ИИ / Голосовые поздравления / …» */
.page-crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1) var(--space-2);
  margin-bottom: var(--space-6);
  color: var(--text-muted);
}
.page .page-crumbs a { color: inherit; text-decoration: none; }
.page .page-crumbs a:hover { color: var(--text-primary); text-decoration: underline; }
.page-crumbs [aria-current] { color: var(--text-secondary); }

/* Начало: текст слева, картинка повода справа */
.page-hero--greet {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-8);
  align-items: center;
}
.page-hero__body { display: flex; flex-direction: column; gap: var(--space-4); }
.page-hero--greet h1 { margin: 0; }
.page-hero__art { width: 168px; height: 168px; }
.page-hero__actions { margin-top: var(--space-3); }
.page-badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--text-secondary);
}
.page-badges li { display: inline-flex; align-items: center; gap: var(--space-2); }
/* Галочка - рамкой, без картинки */
.page-badges li::before {
  content: "";
  width: 5px;
  height: 10px;
  margin: 0 3px 3px 2px;
  border-right: 2px solid var(--status-success);
  border-bottom: 2px solid var(--status-success);
  transform: rotate(45deg);
}

/* Готовые поздравления: карточка - подпись, текст, «Послушать» и «Сделать такое» */
.page-greets {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-5);
  margin: 0;
  padding: 0;
  list-style: none;
}
.page-greet {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-6);
  border: var(--stroke-hairline) solid var(--border-subtle);
  border-radius: var(--radius-lg);
  background: var(--surface-card);
}
.page-greet__title { margin: 0; color: var(--accent-ink); }
.page .page-greet__title a { color: inherit; }
.page .page-greet__text { color: var(--text-primary); overflow-wrap: anywhere; }
/* Две кнопки рядом в карточку не помещаются ни на каком экране - каждая
   во всю ширину, одна под другой: так ровнее, чем лесенкой. */
.page-greet__actions {
  display: grid;
  gap: var(--space-3);
  margin-top: auto;
  padding-top: var(--space-2);
}
/* «Послушать» - та же кнопка, что у голосов на «О сервисе», но в цвете
   открыток: полоса проигрывателя над «Сделать такое» */
.page-greet .page-voice { min-height: 48px; padding-block: var(--space-2); }
.page-greet .page-voice__icon { background: var(--accent-soft); color: var(--accent-ink); }
.page-greet .page-voice.is-playing { border-color: var(--accent); }
.page-greet .page-voice.is-playing .page-voice__icon { background: var(--accent-strong); color: var(--text-on-accent); }

/* Поводы со своими страницами: картинка, название, о чём там */
.page-occasions {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--space-4);
  margin: var(--space-6) 0 0;
  padding: 0;
  list-style: none;
}
.page-section > h2 + .page-occasions { margin-top: 0; }
.page-occasion {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  height: 100%;
  padding: var(--space-4) var(--space-5);
  border: var(--stroke-hairline) solid var(--border-subtle);
  border-radius: var(--radius-lg);
  background: var(--surface-card);
  text-decoration: none;
  transition: transform var(--dur-3) var(--ease-spring-soft),
    box-shadow var(--dur-3) var(--ease-out), border-color var(--dur-2) var(--ease-out);
}
.page a.page-occasion { color: var(--text-primary); }
.page-occasion:hover {
  transform: translate3d(0, var(--lift-hover-card), 0);
  box-shadow: var(--shadow-md);
  border-color: var(--accent-soft-hover);
}
.page-occasion:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.page-occasion img { flex: none; width: 64px; height: 64px; }
.page-occasion > span { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.page-occasion strong { font: var(--type-h4); }
.page-occasion small { font: var(--type-body-s); color: var(--text-secondary); }

/* Поводы без своей страницы - ярлыки, ведут сразу в редактор */
.page-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin: var(--space-6) 0 0;
  padding: 0;
  list-style: none;
}
.page-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--control-touch);
  padding: var(--space-1) var(--space-4) var(--space-1) var(--space-2);
  border: var(--stroke-hairline) solid var(--border-subtle);
  border-radius: var(--radius-pill);
  background: var(--surface-card);
  font: var(--type-label);
  text-decoration: none;
}
.page a.page-chip { color: var(--text-primary); }
.page-chip:hover { border-color: var(--border-default); background: var(--surface-hover); }
.page-chip:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.page-chip img { width: 28px; height: 28px; }

/* Шаги - номером в цвете открыток, а не видео */
.gai-tone-card .page-steps li::before { color: var(--accent-strong); }

@media (max-width: 760px) {
  .page-crumbs { margin-bottom: var(--space-5); }
  /* Картинка на телефоне - лишняя прокрутка до кнопки */
  .page-hero--greet { grid-template-columns: minmax(0, 1fr); }
  .page-hero__art { display: none; }
  .page-hero__actions .gai-btn { width: 100%; }
  .page-greets { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
  .page-greet { padding: var(--space-5); }
  .page-occasions { grid-template-columns: minmax(0, 1fr); }
}

/* ═══════════════════════════════════════════════════════════════════════
   Голосовая открытка: /k/<номер> (templates/k.html, k-net.html).

   Открывают её по ссылке из мессенджера, на телефоне, часто во встроенном
   браузере Telegram или WhatsApp. Одна колонка, одна большая кнопка;
   цвет - в тон картинке повода (cards.Повод.тон).
   ═══════════════════════════════════════════════════════════════════════ */

.card-page { --card-tint: var(--coral-100); --card-ink: var(--coral-700); --card-accent: var(--coral-500); }
.card-page.tone-rose { --card-tint: var(--rose-100); --card-ink: var(--rose-600); --card-accent: var(--rose-400); }
.card-page.tone-butter { --card-tint: var(--butter-100); --card-ink: var(--butter-700); --card-accent: var(--butter-400); }
.card-page.tone-mint { --card-tint: var(--mint-100); --card-ink: var(--mint-700); --card-accent: var(--mint-500); }
.card-page.tone-sky { --card-tint: var(--sky-100); --card-ink: var(--sky-700); --card-accent: var(--sky-500); }
/* Тона оформлений (app/motion.py): ночь «Полночи» и золото «Золота».
   Страница у них всегда тёмная (data-theme-lock в k.html). */
.card-page.tone-night { --card-tint: #2b3375; --card-ink: #3d4aa8; --card-accent: #e8c27a; }
.card-page.tone-gold { --card-tint: #6b5020; --card-ink: #8a6420; --card-accent: #e3b45b; }

body.card-page {
  min-height: 100vh;
  background: var(--surface-page);
  background: radial-gradient(900px 620px at 50% -12%,
      color-mix(in srgb, var(--card-tint) 90%, transparent), transparent 72%),
    var(--surface-page);
}
[data-theme="dark"] body.card-page {
  background: radial-gradient(900px 620px at 50% -12%,
      color-mix(in srgb, var(--card-tint) 18%, transparent), transparent 72%),
    var(--surface-page);
}

.card-wrap {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  max-width: 480px;
  min-height: 100vh;
  margin: 0 auto;
  padding: var(--space-7) var(--space-5) var(--space-9);
}

.card-sheet {
  --card-pad-x: var(--space-6);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-7) var(--card-pad-x) var(--space-8);
  border: var(--stroke-hairline) solid var(--border-subtle);
  border-radius: var(--radius-2xl);
  background: var(--surface-card);
  box-shadow: var(--shadow-md);
  text-align: center;
}
.card-sheet p { margin: 0; }
/* С оформлением ролик - во всю ширину листа, от верхнего края: вместо
   картинки повода и заголовка (заголовок - в самом ролике). Нажатие на
   ролик - как на «Слушать». */
.has-motion .card-sheet { padding-top: 0; overflow: hidden; }
.has-motion .card-sheet .motion-stage {
  align-self: stretch;
  width: auto;
  margin: 0 calc(-1 * var(--card-pad-x)) var(--space-2);
  cursor: pointer;
}
.card-art { width: 176px; height: 176px; }
.card-kicker { color: var(--card-ink); }
[data-theme="dark"] .card-kicker { color: var(--card-accent); }
.card-title {
  margin: 0;
  font: var(--weight-bold) var(--size-h1) / 1.1 var(--font-display);
  letter-spacing: var(--tracking-tight);
}
.card-to { color: var(--text-secondary); }
.card-to strong { color: var(--text-primary); }

/* Проигрыватель: большая круглая кнопка и полоса, по которой можно перемотать */
.card-player {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  width: 100%;
  margin-top: var(--space-3);
  padding: var(--space-3) var(--space-5) var(--space-3) var(--space-3);
  border-radius: var(--radius-pill);
  background: var(--surface-sunken);
}
.card-play {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--action-primary-bg);
  color: var(--action-primary-fg);
  box-shadow: var(--shadow-md);
  cursor: pointer;
  transition: transform var(--dur-2) var(--ease-spring-soft), background-color var(--dur-2) var(--ease-out);
}
.card-play:hover { background: var(--action-primary-bg-hover); transform: scale(1.04); }
.card-play:active { transform: scale(0.96); }
.card-play:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.card-play svg { width: 30px; height: 30px; fill: currentColor; }
.card-play__on { margin-left: 4px; }
.card-play__off,
.is-playing .card-play__on { display: none; }
.is-playing .card-play__off { display: block; }
@media (prefers-reduced-motion: no-preference) {
  body:not(.is-playing) .card-play { animation: card-pulse 2.4s var(--ease-out) infinite; }
}
/* Ролик доиграл - «Сделать свою открытку» зовёт к себе */
@media (prefers-reduced-motion: no-preference) {
  .card-page.is-done .card-actions .gai-btn--primary { animation: card-cta 1.8s var(--ease-out) 3; }
}
@keyframes card-cta {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--card-accent) 65%, transparent); }
  70% { box-shadow: 0 0 0 14px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}
@keyframes card-pulse {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--action-primary-bg) 45%, transparent); }
  70% { box-shadow: 0 0 0 16px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}
.card-track { flex: 1; min-width: 0; text-align: left; }
.card-progress {
  position: relative;
  height: 8px;
  border-radius: var(--radius-pill);
  background: var(--border-default);
  overflow: hidden;
  cursor: pointer;
}
.card-progress:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.card-progress span {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: var(--card-accent);
}
.card-time { margin-top: var(--space-3); color: var(--text-muted); font-variant-numeric: tabular-nums; }

.card-text {
  width: 100%;
  margin: var(--space-3) 0 0;
  padding: var(--space-5) var(--space-6);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--card-tint) 45%, var(--surface-card));
  font: var(--type-body-l);
  text-align: left;
  overflow-wrap: anywhere;
}
[data-theme="dark"] .card-text { background: var(--surface-sunken); }
.card-text--plain { background: none; padding: 0; text-align: center; color: var(--text-secondary); }

.card-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3);
  width: 100%;
  margin-top: var(--space-4);
}
.card-actions .gai-btn { flex: 1 1 auto; }
.page-cards .gai-btn--primary,
.card-page .gai-btn--primary,
.card-page .gai-btn--primary:hover { color: var(--action-primary-fg); }
.card-page .gai-btn--secondary,
.card-page .gai-btn--secondary:hover { color: var(--text-primary); }

/* Автор пришёл по QR-коду: «Отправить» - сразу под плеером */
.card-send {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  padding: var(--space-5);
  border-radius: var(--radius-lg);
  background: var(--surface-sunken);
  text-align: center;
}
.card-send .card-actions { margin-top: 0; }

.card-author {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  padding-top: var(--space-5);
  border-top: var(--stroke-hairline) solid var(--border-subtle);
  color: var(--text-secondary);
}
.card-done { padding: var(--space-9) var(--space-3); font: var(--type-h3); }

.card-foot { display: grid; gap: var(--space-3); color: var(--text-muted); text-align: center; }
.card-foot p { margin: 0; }
.card-foot a { color: inherit; }
.card-report {
  padding: var(--space-2) var(--space-3);
  border: 0;
  background: none;
  color: var(--text-muted);
  font: inherit;
  text-decoration: underline;
  cursor: pointer;
}
.card-report:hover { color: var(--text-primary); }

@media (max-width: 360px) {
  .card-sheet { --card-pad-x: var(--space-5); padding: var(--space-6) var(--card-pad-x) var(--space-7); }
  .card-art { width: 144px; height: 144px; }
  .card-play { width: 64px; height: 64px; }
}