/*
 * Kawaii — визуальная тема trillionwishes по макету «Trillion Wishes Kawaii.dc.html»
 * (проект claude.ai/design «Logo design for Trillion Wishes»).
 *
 * Грузится ПОСЛЕДНИМ, поверх studio.css и paper-deck.css. Структура разметки и
 * классы остаются прежними — меняется только визуальный слой, поэтому тему
 * можно отключить одной строкой в base.php и вернуться к «бумажной» версии
 * (резервные копии — assets/css/_backup/).
 *
 * Приём: сначала переопределяем ТОКЕНЫ, которыми уже пользуются оба стиля
 * (--ink, --paper, --rule, --stamp-red…). Всё, что нарисовано через var(),
 * перекрашивается разом. Дальше точечно снимаем «бумажность» (зерно, повороты,
 * высокая печать) и переводим компоненты на пилюли, пастель и мягкие тени.
 *
 * НЕ ТРОГАЕМ компонент .postcard — это сама открытка, и её превью обязано
 * совпадать с серверным PNG (CardRenderer рисует по config/studio.php).
 */

/* ============================================================ токены */

:root {
  /* палитра макета, разложенная по существующим именам токенов */
  --kraft: #FFF6FA;
  --kraft-deep: #F3EDFF;
  --linen: #FFF0F6;
  --paper: #FFFFFF;
  --paper-warm: #FFFDFE;
  --ink: #4A3B57;
  --ink-soft: #5C4A6E;
  --ink-faint: #8E7BA3;
  --rule: #FFE3EE;
  --stamp-red: #F2699C;
  --stamp-red-deep: #E04E86;
  --wax: #F2699C;
  --gold: #FFC24B;

  /* пастельные плашки */
  --k-pink: #FFE3EE;      --k-pink-soft: #FFF0F6;  --k-pink-deep: #FFD3E3;
  --k-violet: #EDE7FF;    --k-violet-soft: #F3EDFF;--k-violet-deep: #E0D6FF;
  --k-mint: #DDF6EE;      --k-mint-deep: #C9F0E2;
  --k-yellow: #FFF1D6;    --k-yellow-deep: #FFE8BD;

  --k-accent-violet: #9B7FE8;
  --k-accent-mint: #3FBC9A;
  --k-faint: #B79BC9;

  --k-display: 'Baloo 2', 'Trebuchet MS', cursive;
  --k-body: 'Nunito', system-ui, sans-serif;

  --k-shadow-pink: 0 8px 20px rgba(242, 105, 156, .35);
  --k-shadow-soft: 0 6px 18px rgba(180, 150, 220, .18);
  --k-shadow-card: 0 4px 14px rgba(242, 105, 156, .12);

  --k-pill: 999px;
  --k-r-card: 28px;
  --k-r-panel: 32px;

  /* тинты категорий — из пастельной четвёрки макета */
  --c-anniv: #FFE3EE;   --c-anniv-edge: #F2699C;
  --c-bday: #FFF1D6;    --c-bday-edge: #FFC24B;
  --c-wedding: #EDE7FF; --c-wedding-edge: #9B7FE8;
  --c-xmas: #DDF6EE;    --c-xmas-edge: #3FBC9A;
  --c-symp: #F3EDFF;    --c-symp-edge: #B79BC9;
  --c-recov: #FFF0F6;   --c-recov-edge: #F2699C;
  --c-easter: #EDE7FF;  --c-easter-edge: #9B7FE8;
}

/* ============================================ фон: снимаем «бумагу» */

html, body {
  background: var(--kraft);
  color: var(--ink);
  font-family: var(--k-body);
}
/* крафтовый градиент и шумовая текстура «бумаги» темe не нужны */
body { background-image: none; background-attachment: scroll; }
body::before { content: none; display: none; }

a { color: var(--stamp-red); }
a:hover { color: var(--stamp-red-deep); }

/* ================================================== шапка */

/* Шапка и подвал — по ширине контента (как .tw-main), а не во всю страницу.
   Отступ 28px совпадает с колонкой контента, поэтому внутренние края шапки,
   карточек и подвала стоят на одной вертикали. Скругление снизу: полоса
   «прилегает» к верху страницы, а на розовом фоне читается как карточка. */
.tw-chrome {
  background: #FFFFFF;
  border: 2px solid var(--k-pink);
  border-top: 0;
  max-width: 1180px;
  margin: 0 auto;
  padding: 16px 28px;
  border-radius: 0 0 var(--k-r-card) var(--k-r-card);
  align-items: center;
  gap: 20px;
}

.tw-wordmark {
  font-family: var(--k-display);
  font-weight: 800;
  font-size: 26px;
  line-height: 1;
  letter-spacing: 0;
  color: var(--ink);
}
.tw-wordmark .small {
  font-family: var(--k-body);
  font-weight: 600;
  font-size: 12.5px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--k-faint);
  margin-top: 3px;
}
/* Цвет знака задаётся не здесь: <img> из CSS не перекрасить — base.php
   подключает градиентный SVG (trillion-wishes-logo-gradient.svg, хендофф 5a).
   Высота ~34px — из того же хендоффа. */
.tw-logo { height: 34px; }

/* поиск — белая пилюля с пастельной рамкой, без латунной ручки и высокой печати */
.tw-drawer {
  border: 2px solid var(--k-pink);
  background: #FFFFFF;
  box-shadow: none;
  border-radius: var(--k-pill);
  padding: 8px 18px;
  gap: 8px;
}
.tw-drawer::before { content: none; }
.tw-drawer input {
  font: 600 15px/1.3 var(--k-body);
  font-style: normal;
  color: var(--ink);
}
.tw-drawer input::placeholder { color: var(--k-faint); font-style: normal; }

/* Random / Favorites / Calendar — пастельные пилюли с текстом.
   Иконки прячем: в макете это текстовые «таблетки». */
.tw-tools { gap: 10px; }
.tw-tool {
  flex-direction: row;
  min-width: 0;
  padding: 9px 18px;
  border-radius: var(--k-pill);
  background: var(--k-pink);
  color: var(--ink);
  gap: 0;
}
.tw-tool svg { display: none; }
.tw-tool .lbl {
  font: 800 14px/1 var(--k-body);
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
  margin-right: 0;
  white-space: nowrap;
}
.tw-tool:hover { color: var(--ink); filter: brightness(.97); }
.tw-tools .tw-tool:nth-of-type(2) { background: var(--k-violet); }
.tw-tools .tw-tool:nth-of-type(3) { background: var(--k-mint); }

.tw-lang summary {
  border: 2px solid var(--k-violet);
  background: #FFFFFF;
  border-radius: var(--k-pill);
  font: 800 11px/1 var(--k-body);
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink-soft);
  padding: 8px 14px;
}
.tw-lang[open] summary { background: var(--k-accent-violet); border-color: var(--k-accent-violet); color: #fff; }
.tw-lang .menu { border: 2px solid var(--k-violet); border-radius: 18px; overflow: hidden; box-shadow: var(--k-shadow-soft); }
.tw-lang .menu a { font: 700 13px/1.2 var(--k-body); }
.tw-lang .menu a:hover { background: var(--k-violet-soft); }
.tw-lang .menu a.active { background: var(--k-accent-violet); color: #fff; }

.tw-hamburger { color: var(--ink); }

/* ================================================== типографика */

.tw-title {
  font-family: var(--k-display);
  font-weight: 800;
  font-size: 46px;
  line-height: 1.12;
  color: var(--ink);
}
.tw-title .for { font-family: var(--k-body); font-style: normal; font-weight: 700; color: var(--k-faint); }
.tw-h2-cursive { font-family: var(--k-display); font-weight: 800; font-size: 28px; color: var(--ink); }
.tw-sub {
  font: 600 17px/1.6 var(--k-body);
  font-style: normal;
  color: var(--ink-faint);
}
.tw-eyebrow {
  font: 800 12px/1 var(--k-body);
  letter-spacing: 0;
  text-transform: none;
  color: var(--k-faint);
}
.tw-eyebrow::before, .tw-eyebrow::after { display: none; }
.tw-prose { font: 600 16px/1.7 var(--k-body); color: var(--ink-soft); }
.tw-prose h2, .tw-prose h3 { font-family: var(--k-display); font-weight: 800; }
.tw-prose a { color: var(--stamp-red); border-bottom: 0; }
.tw-crumbs { font: 700 12px/1 var(--k-body); letter-spacing: 0; text-transform: none; color: var(--k-faint); }

/* ================================================== карточка пожелания */

.tw-card {
  --rot: 0deg !important;
  background: #FFFFFF;
  border: 2px solid var(--rule);
  border-radius: var(--k-r-card);
  padding: 26px 26px 20px;
  transform: none;
  box-shadow: var(--k-shadow-card);
  gap: 14px;
}
.tw-card::before, .tw-card::after { content: none; }
.tw-card:hover { transform: translateY(-4px); box-shadow: 0 12px 26px rgba(242, 105, 156, .18); }

/* категория — пастельная «таблетка», а не типографская метка */
.tw-card .cat {
  align-self: flex-start;
  font: 800 11.5px/1 var(--k-body);
  letter-spacing: 0;
  text-transform: none;
  color: var(--stamp-red);
  background: var(--k-pink);
  border-radius: var(--k-pill);
  padding: 5px 12px;
  margin-bottom: 2px;
}
.tw-card .cat::before { display: none; }
.tw-card .body { font: 600 15.5px/1.65 var(--k-body); color: var(--ink-soft); }
.tw-card .sig { font: 600 13px/1.4 var(--k-body); font-style: normal; color: var(--k-faint); }
.tw-card .sig a { color: var(--k-accent-violet); border-bottom: 0; }

/* тинты категорий красят рамку и «таблетку» */
.tw-card.t-bday    .cat { color: #B8860B; background: var(--k-yellow); }
.tw-card.t-wedding .cat, .tw-card.t-easter .cat { color: var(--k-accent-violet); background: var(--k-violet); }
.tw-card.t-xmas    .cat { color: var(--k-accent-mint); background: var(--k-mint); }
.tw-card.t-symp    .cat { color: var(--k-faint); background: var(--k-violet-soft); }
.tw-card.t-bday    { border-color: var(--k-yellow); }
.tw-card.t-wedding, .tw-card.t-easter { border-color: var(--k-violet); }
.tw-card.t-xmas    { border-color: var(--k-mint); }
.tw-card.t-symp    { border-color: var(--k-violet-soft); }

/* действия на карточке — мягкие пилюли */
.tw-acts { gap: 8px; margin-top: auto; padding-top: 4px; align-items: center; }
.tw-act {
  width: auto; height: auto;
  padding: 9px 14px;
  border-radius: var(--k-pill);
  background: var(--k-violet-soft);
  color: var(--k-accent-violet);
}
.tw-act svg { width: 18px; height: 18px; }
.tw-act:hover { background: var(--k-violet-deep); }
.tw-act:hover svg { transform: none; }
.tw-act[data-action="favorite"] { background: var(--k-pink-soft); color: var(--stamp-red); }
.tw-act[data-action="favorite"]:hover { background: var(--k-pink); }
.tw-act--send {
  background: var(--stamp-red);
  color: #FFFFFF;
  border: 0;
  border-radius: var(--k-pill);
  padding: 10px 18px;
  font: 800 13px/1 var(--k-body);
  letter-spacing: 0;
  text-transform: none;
  box-shadow: var(--k-shadow-pink);
}
.tw-act--send:hover { background: var(--stamp-red-deep); color: #FFFFFF; border-color: transparent; }
.tw-act--send svg path { fill: #FFFFFF; stroke: var(--stamp-red-deep); }

.tw-gotit {
  background: var(--k-yellow);
  border: 2px solid var(--k-yellow-deep);
  border-radius: var(--k-pill);
  transform: none;
  font: 800 11px/1 var(--k-body);
  letter-spacing: 0;
}
.tw-gotit.show { transform: translateY(2px); }

/* ================================================== главная: колода */

/* Позиционированием карточек «колоды» владеет paper-deck: там же мобильное
   media-правило переводит их в статичный столбец. Дублировать position здесь
   нельзя — kawaii грузится позже и перебил бы это media-правило. */
.tw-deck-label { font-family: var(--k-display); font-weight: 700; color: var(--k-faint); }
.tw-home-head .meta { font: 600 14px/1.4 var(--k-body); font-style: normal; color: var(--ink-faint); }
.tw-home-head .meta .d { font: 800 11px/1 var(--k-body); letter-spacing: 0; text-transform: none; color: var(--k-faint); }
.tw-home-head .meta b {
  font-family: var(--k-display); font-size: 26px; color: var(--k-accent-violet);
}

/* плитки категорий */
.tw-cat-pill {
  border: 0;
  border-radius: var(--k-pill);
  padding: 10px 18px;
  font: 800 14px/1.1 var(--k-body);
  letter-spacing: 0;
  color: var(--ink);
  box-shadow: none;
}
.tw-cat-pill:hover { transform: translateY(-2px); box-shadow: var(--k-shadow-soft); color: var(--ink); }

/* папки категорий */
.tw-folder {
  background: #FFFFFF;
  border: 2px solid var(--rule);
  border-radius: var(--k-r-card);
  box-shadow: var(--k-shadow-card);
  margin-bottom: 16px;
}
.tw-folder:hover { transform: translateY(-3px); box-shadow: 0 12px 26px rgba(242,105,156,.18); }
.tw-folder .tab {
  border: 0; border-radius: var(--k-pill);
  top: -12px; left: 22px; height: 26px; width: auto; padding: 0 16px;
  font: 800 11px/1 var(--k-body); letter-spacing: 0; text-transform: none;
  box-shadow: none;
}
.tw-folder h3 { font-family: var(--k-display); font-weight: 800; font-size: 26px; }
.tw-folder p { font: 600 14.5px/1.5 var(--k-body); font-style: normal; color: var(--ink-faint); }
.tw-folder .num { font-family: var(--k-display); font-style: normal; color: var(--k-faint); }
.tw-folder .count { font: 800 11px/1 var(--k-body); letter-spacing: 0; color: var(--k-faint); }

/* фильтры / пагинация */
.tw-chip, .tw-pager a, .tw-pager .here, .tw-pager .dots {
  border: 2px solid var(--rule);
  border-radius: var(--k-pill);
  background: #FFFFFF;
  font: 800 12px/1 var(--k-body);
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink-soft);
  padding: 9px 16px;
}
.tw-chip[aria-pressed="true"], .tw-chip.active, .tw-pager .here {
  background: var(--stamp-red); border-color: var(--stamp-red); color: #FFFFFF;
}
.tw-chip:hover { border-color: var(--stamp-red); color: var(--stamp-red); }

/* FAQ / связанные */
.tw-faq-item { border: 2px solid var(--k-violet); border-radius: 20px; box-shadow: none; margin-bottom: 12px; }
.tw-faq-item summary { font: 800 16px/1.4 var(--k-body); color: var(--ink); }
.tw-faq-item summary::after { font-family: var(--k-display); color: var(--k-accent-violet); }
.tw-faq-item p { font: 600 15px/1.7 var(--k-body); color: var(--ink-soft); }
.tw-related-list li { border-bottom: 2px dotted var(--k-violet-soft); }
.tw-related-list a { font: 700 15px/1.4 var(--k-body); color: var(--ink); }
.tw-related h4 { font-family: var(--k-display); font-weight: 800; }
.tw-notice {
  background: var(--k-yellow); border-left: 0; border-radius: 20px;
  font: 600 15px/1.5 var(--k-body); font-style: normal; color: #8a6d1f; box-shadow: none;
}
.tw-featured { background: #FFFFFF; border: 2px solid var(--k-violet); border-radius: var(--k-r-card); box-shadow: var(--k-shadow-card); }
.tw-featured::before { content: none; }
.tw-featured h3 { font-family: var(--k-display); font-weight: 800; }
.tw-featured li { font: 600 15px/1.4 var(--k-body); border-bottom: 2px dotted var(--k-violet-soft); }
.tw-featured li .n { font: 800 11px/1 var(--k-body); letter-spacing: 0; }

/* 404 */
.tw-four h2 { font-family: var(--k-display); font-weight: 800; }
.tw-four p { font: 600 17px/1.6 var(--k-body); font-style: normal; color: var(--ink-faint); }
.tw-envelope { border: 2px solid var(--rule); border-radius: 24px; transform: none; box-shadow: var(--k-shadow-soft); }

/* ================================================== подвал */

/* Подвал — тоже по ширине контента. Скруглён со всех сторон и с отступом
   снизу: он «карточка» на розовом фоне, а не полоса до края экрана. */
.tw-footer {
  background: var(--k-violet-soft);
  border-top: 0;
  max-width: 1180px;
  margin: 64px auto 28px;
  padding: 34px 28px 30px;
  border-radius: var(--k-r-panel);
  font: 600 13px/1.5 var(--k-body);
  font-style: normal;
  color: var(--ink-faint);
}
.tw-footer .mark { font-family: var(--k-display); font-weight: 800; font-size: 19px; color: var(--ink); }
.tw-footer a { color: #7A63A8; border-bottom: 0; font-weight: 800; }
.tw-footer a:hover { color: var(--stamp-red); }

/* ================================================== мобильное меню */

.tw-menu { background: #FFFFFF; background-image: none; }
.tw-menu .head .ttl { font-family: var(--k-display); font-weight: 800; }
.tw-menu input[type="search"] {
  border: 2px solid var(--k-pink); border-radius: var(--k-pill);
  font: 600 15px/1 var(--k-body); font-style: normal;
}
.tw-menu .links a { font: 800 14px/1 var(--k-body); border-radius: var(--k-pill); }
.tw-menu .links a:hover { background: var(--k-pink-soft); }
.tw-menu .cats a { font: 600 14px/1.2 var(--k-body); border-radius: var(--k-pill); }
.tw-menu .cats a:hover, .tw-menu .cats a.active { background: var(--k-violet-soft); color: var(--ink); }
.tw-menu .section-ttl { font: 800 10px/1 var(--k-body); letter-spacing: 0; text-transform: none; color: var(--k-faint); }

/* ============================================================
   КОНСТРУКТОР ОТКРЫТОК
   Разметка и id остаются прежними (их читает studio.js) — меняется
   только оформление. Сам .postcard не трогаем: он обязан совпадать с PNG.
   ============================================================ */

.tw-studio {
  border-bottom: 0;
  padding: 36px 0 44px;
}

/* Герой конструктора — градиентная панель с «искрами», как в макете */
.tw-studio .hero {
  position: relative;
  background: linear-gradient(160deg, #FFE9F2, #F3EDFF 70%);
  border-radius: 36px;
  padding: 44px 48px 46px;
  margin-bottom: 28px;
  overflow: hidden;
}
.tw-studio .hero h1 {
  font-family: var(--k-display);
  font-weight: 800;
  font-size: 44px;
  line-height: 1.12;
  color: var(--ink);
  margin: 0 0 12px;
  max-width: 620px;
}
.tw-studio .hero h1 em { font-style: normal; color: var(--stamp-red); }
.tw-studio .hero p {
  font: 600 17px/1.6 var(--k-body);
  font-style: normal;
  color: var(--ink-faint);
  max-width: 520px;
}
/* четырёхлучевые искры — декор макета, рисуем фоном, без лишней разметки */
.tw-studio .hero::before,
.tw-studio .hero::after {
  content: "";
  position: absolute;
  background-repeat: no-repeat;
  pointer-events: none;
}
.tw-studio .hero::before {
  width: 26px; height: 26px; left: 26px; top: 26px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2 L13.8 9.2 L21 12 L13.8 14.8 L12 22 L10.2 14.8 L3 12 L10.2 9.2 Z' fill='%23FFD98E'/></svg>");
}
.tw-studio .hero::after {
  width: 18px; height: 18px; right: 190px; bottom: 40px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2 L13.8 9.2 L21 12 L13.8 14.8 L12 22 L10.2 14.8 L3 12 L10.2 9.2 Z' fill='%239FE0CC'/></svg>");
}

/* подписи шагов */
.tw-studio .kicker {
  font: 800 12.5px/1 var(--k-body);
  letter-spacing: 0;
  text-transform: none;
  color: var(--k-faint);
}
.tw-studio .kicker::before { display: none; }
.tw-studio .mini-label,
.tw-studio .substep__label,
.tw-studio .field__label {
  font: 800 12px/1 var(--k-body);
  letter-spacing: 0;
  text-transform: none;
  color: var(--k-faint);
}
.tw-studio .hint {
  font: 600 14px/1.5 var(--k-body);
  font-style: normal;
  color: var(--k-faint);
}

/* «лист бумаги» с шагами → белая карточка со скруглением */
.tw-studio .studio__steps {
  background: #FFFFFF;
  border: 2px solid var(--k-violet);
  border-radius: var(--k-r-panel);
  box-shadow: var(--k-shadow-soft);
  background-image: none;
  padding: 30px 30px 28px;
  gap: 24px;
}
.tw-studio .substep { border-left: 3px solid var(--k-pink); }

/* фишки — пастельные пилюли */
.tw-studio .chip {
  background: var(--k-pink-soft);
  border: 0;
  border-radius: var(--k-pill);
  padding: 10px 16px;
  font: 800 13.5px/1 var(--k-body);
  letter-spacing: 0;
  color: var(--ink);
  box-shadow: none;
}
.tw-studio .chip:hover { background: var(--k-pink); transform: translateY(-2px); box-shadow: none; }
.tw-studio .chip[aria-pressed="true"] {
  background: var(--stamp-red); color: #FFFFFF; box-shadow: var(--k-shadow-pink);
}
.tw-studio .chips--sub .chip { background: var(--k-violet-soft); font-family: var(--k-body); font-size: 13.5px; }
.tw-studio .chips--sub .chip:hover { background: var(--k-violet); }
.tw-studio .chips--sub .chip[aria-pressed="true"] { background: var(--k-accent-violet); color: #FFFFFF; }
.tw-studio .chip--link {
  background: #FFFFFF; border: 2px dashed #EFD9F2; color: var(--k-faint);
  font: 800 13px/1 var(--k-body); text-decoration: none; padding: 8px 16px;
}
.tw-studio .chip--link:hover { background: #FDF7FF; color: var(--k-accent-violet); }

/* кнопки */
.tw-studio .btn {
  border-radius: var(--k-pill);
  font: 800 14px/1 var(--k-body);
  letter-spacing: 0;
  text-transform: none;
  padding: 13px 24px;
}
.tw-studio .btn--accent {
  background: var(--stamp-red);
  color: #FFFFFF;
  box-shadow: var(--k-shadow-pink);
}
.tw-studio .btn--accent:hover { background: var(--stamp-red-deep); color: #FFFFFF; }
.tw-studio .btn--ghost {
  background: #FFFFFF; color: var(--ink);
  border: 2px solid #F6D6E4; box-shadow: none;
}
.tw-studio .btn--ghost:hover { background: var(--k-pink-soft); color: var(--ink); box-shadow: none; }
.tw-studio .btn--dark {
  background: var(--k-accent-violet); color: #FFFFFF; box-shadow: 0 8px 18px rgba(155,127,232,.3);
}
.tw-studio .btn--dark:hover { background: #8468D8; color: #FFFFFF; }

/* поля имён */
.tw-studio .input {
  border: 2px solid var(--k-pink);
  border-radius: 16px;
  background: #FFFFFF;
  font: 600 15.5px/1.3 var(--k-body);
  color: var(--ink);
  padding: 12px 14px;
  box-shadow: none;
}
.tw-studio .input::placeholder { color: var(--k-faint); opacity: 1; }
.tw-studio .input:focus {
  border-color: var(--stamp-red);
  box-shadow: 0 0 0 4px rgba(242, 105, 156, .15);
}
.tw-studio .sheet__link .input { background: var(--k-pink-soft); font-size: 13px; }

/* палитры и сцены */
.tw-studio .swatch { border: 2px solid #FFFFFF; box-shadow: 0 2px 8px rgba(180,150,220,.25); }
.tw-studio .swatch[aria-pressed="true"] { box-shadow: 0 0 0 3px #FFFFFF, 0 0 0 6px var(--stamp-red); }
.tw-studio .swatch__name { font: 800 10px/1 var(--k-body); letter-spacing: 0; text-transform: none; color: var(--k-faint); }
.tw-studio .scene {
  border: 2px solid var(--k-violet);
  border-radius: 18px;
  background: var(--k-violet-soft);
  box-shadow: none;
}
.tw-studio .scene:hover { transform: translateY(-3px); box-shadow: var(--k-shadow-soft); }
.tw-studio .scene--on { box-shadow: 0 0 0 3px #FFFFFF, 0 0 0 6px var(--stamp-red); border-color: var(--stamp-red); }

/* прогресс */
.tw-studio .progress__label { font: 800 12px/1 var(--k-body); letter-spacing: 0; text-transform: none; color: var(--k-faint); }
.tw-studio .progress__track { background: var(--k-violet); border-radius: var(--k-pill); box-shadow: none; height: 10px; }
.tw-studio .progress__bar { background: linear-gradient(90deg, var(--stamp-red), var(--gold)); }

/* напоминание о празднике */
.tw-studio .teaser {
  background: var(--k-mint);
  border-left: 0;
  border-radius: 20px;
  padding: 16px 20px;
  box-shadow: none;
}
.tw-studio .teaser__title { font: 800 15.5px/1.35 var(--k-body); color: #2F8F74; }
.tw-studio .teaser__text { font: 600 14px/1.4 var(--k-body); font-style: normal; }
.tw-studio .teaser__text a { color: var(--k-accent-mint); border-bottom: 0; font-weight: 800; }

/* окно «поделиться» */
.tw-studio .sheet { background: rgba(74, 59, 87, .45); }
.tw-studio .sheet__box {
  background: #FFFFFF;
  border: 0;
  border-radius: var(--k-r-panel);
  background-image: none;
  box-shadow: 0 20px 50px rgba(120, 90, 150, .3);
  padding: 32px 30px 28px;
}
.tw-studio .sheet__title { font-family: var(--k-display); font-weight: 800; font-size: 28px; color: var(--ink); }
.tw-studio .sheet__hint { font: 600 15px/1.5 var(--k-body); font-style: normal; color: var(--ink-faint); }
.tw-studio .sheet__close { color: var(--k-faint); font-size: 24px; }
.tw-studio .sheet__close:hover { color: var(--stamp-red); }

/* тост */
.tw-studio .toast {
  background: var(--stamp-red);
  color: #FFFFFF;
  border: 0;
  border-radius: var(--k-pill);
  font: 800 13px/1 var(--k-body);
  letter-spacing: 0;
  padding: 12px 20px;
  box-shadow: var(--k-shadow-pink);
}

/* страница получателя */
.tw-studio .greeting__envelope {
  display: inline-flex;
  font: 800 12.5px/1 var(--k-body);
  letter-spacing: 0; text-transform: none;
  color: var(--stamp-red);
  background: var(--k-pink);
  border-radius: var(--k-pill);
  padding: 8px 18px;
}
.tw-studio .greeting__related { border-top: 2px dotted var(--k-violet); }
.tw-studio .related__item {
  background: #FFFFFF;
  border: 2px solid var(--k-violet);
  border-radius: 22px;
  box-shadow: none;
}
.tw-studio .related__item:hover { transform: translateY(-3px); box-shadow: var(--k-shadow-soft); }
.tw-studio .related__text { font: 600 15px/1.6 var(--k-body); color: var(--ink-soft); }

/* ==================================== остатки старых шрифтов
   Из подключения убраны Inter / Cormorant Garamond (kawaii их не использует),
   но в paper-deck остались правила со стеком вида «'Inter'» БЕЗ generic-
   фолбэка — без страховки они падали бы в браузерный дефолт (Times).
   Здесь только подмена семейства; кегль/трекинг у компонентов сохраняются. */
.tw-featured-eyebrow,
.tw-postmark,
.tw-postmark .ring,
.tw-envelope .stamp-rts,
.tw-share-popup a,
.tw-lever,
.tw-field label,
.tw-cal-row .stamp .m { font-family: var(--k-body); }

.tw-empty-fav,
.tw-cal-row .body .when,
.tw-typewriter .sheet .sub { font-family: var(--k-body); font-style: normal; }

/* ================================================== адаптив */

@media (max-width: 720px) {
  /* 18px — столько же у .tw-main на мобильных, чтобы края совпадали */
  .tw-chrome { padding: 14px 18px; border-radius: 0 0 20px 20px; }
  .tw-footer { margin: 48px auto 18px; padding: 28px 18px 24px; border-radius: 22px; }
  .tw-title { font-size: 34px; }
  .tw-studio .hero { padding: 30px 24px 32px; border-radius: 28px; }
  .tw-studio .hero h1 { font-size: 32px; }
  .tw-studio .hero::after { display: none; }
  .tw-studio .studio__steps { padding: 22px 20px; border-radius: 24px; }
  /* В paper-deck на мобильных подпись скрывалась, а иконка оставалась. Здесь
     наоборот: иконок нет, поэтому подпись обязана вернуться — иначе пилюля
     окажется пустой. Ширину/высоту тоже снимаем: 36×36 сплющило бы пилюлю. */
  .tw-tool { width: auto; height: auto; padding: 8px 14px; }
  .tw-tool .lbl { display: inline; font-size: 13px; }
}

@media (max-width: 420px) {
  /* Та же история у «Send a postcard»: paper-deck на ≤420px прятал подпись,
     оставляя иконку 36×36, а kawaii-паддинги пилюли переживают его media-
     правило — получалась широкая пустая пилюля. Возвращаем подпись: в
     пилюльном дизайне ей хватает места. */
  .tw-act--send .lbl { display: inline; }
  .tw-act--send { padding: 9px 14px; font-size: 12px; }
}