/* «Песня в подарок» · основа дизайна, версия 5, 06.11.2026
   Один файл на всё: цвета, шрифты, размеры текста, отступы, сетка, скругления, элементы.
   Страницы подключают его первым и не задают своих цветов и шрифтов */

@import url("https://fonts.googleapis.com/css2?family=Geologica:wght@500;600;700;800&family=Golos+Text:wght@400;500;600;700&display=swap");

:root {
  /* Цвета: у каждого одна работа */
  --c-page: #fbf7f1;      /* молочный фон страницы */
  --c-card: #ffffff;      /* карточки, поля */
  --c-soft: #f4ede3;      /* тихая подложка: превью, подсказки */
  --c-line: #ece4d8;      /* линии и обводки */
  --c-ink: #07193d;       /* текст и тёмная сцена со словами песни */
  --c-ink-2: #3c4866;     /* второй текст на светлом */
  --c-muted: #5d6784;     /* подписи */
  --c-gray: #8a93ab;      /* служебные метки */
  --c-blue: #0149db;      /* все действия и синие блоки-акценты */
  --c-blue-hover: #0a55f5;
  --c-blue-soft: #e8efff; /* выбранное на светлом */
  --c-on-blue: #d7e2ff;   /* второй текст на синем */
  --c-pink: #ed4ae9;      /* розовый Маку: маркер под именем, кнопка голоса */
  --c-pink-ink: #c0179f;  /* имя на светлом, 5:1 */
  --c-pink-light: #ff7af7;/* имя на тёмном, 7,7:1 */
  --c-yellow: #ffbf1d;    /* только доплата; на синем — имя */
  --c-yellow-soft: #fff1c4;
  --c-green: #136b3c;     /* только строка «бесплатно» в чеке */
  --c-green-soft: #e9f6ee;

  /* Шрифты */
  --f-head: "Geologica", system-ui, sans-serif;   /* заголовки, слова песни, цены, кнопки */
  --f-text: "Golos Text", system-ui, sans-serif;  /* текст */

  /* Размеры текста: телефон → компьютер */
  --t-lyric: clamp(32px, 4.9vw, 74px);  /* слова песни на сцене · 800 */
  --t-display: clamp(42px, 6.8vw, 104px);/* финальный призыв · 800 */
  --t-h1: clamp(34px, 4.6vw, 64px);     /* заголовок страницы · 800 */
  --t-h2: clamp(30px, 3.6vw, 48px);     /* заголовок блока · 700 */
  --t-h3: 22px;                         /* заголовок карточки · 600 */
  --t-lead: 18px;                       /* вводный · 400 */
  --t-body: 16px;                       /* текст · 400 */
  --t-small: 14px;                      /* подписи · 400–500 */
  --t-cap: 13px;                        /* служебные метки · 500–600 */

  /* Отступы: шаг 4 */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px;
  --sec: clamp(80px, 10vw, 128px);  /* между блоками */

  /* Сетка: 12 колонок, ширина 1200, промежуток 24, поля 20 на телефоне */
  --wrap: 1200px; --gutter: 24px; --edge: 20px;

  /* Скругления */
  --r-s: 10px; --r-m: 18px; --r-l: 28px; --r-pill: 999px;

  /* Тень — только у того, что поднято над фото или экраном */
  --shadow-up: 0 1px 2px rgba(7, 25, 61, .06), 0 24px 56px rgba(7, 25, 61, .12);
  --ease: cubic-bezier(.2, .7, .2, 1);
}

/* База */
.k { margin: 0; background: var(--c-page); color: var(--c-ink); font: 400 var(--t-body)/1.55 var(--f-text); -webkit-font-smoothing: antialiased; }
.k *, .k *::before, .k *::after { box-sizing: border-box; }
.k img { max-width: 100%; display: block; }
.wrap { width: min(var(--wrap), 100% - 2 * var(--edge)); margin: 0 auto; }
.grid12 { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gutter); }

/* Текст */
.t-lyric { font: 700 var(--t-lyric)/1.08 var(--f-head); letter-spacing: -.025em; margin: 0; }
.t-display { font: 800 var(--t-display)/1.06 var(--f-head); letter-spacing: -.028em; margin: 0; text-wrap: balance; }
.t-h1 { font: 700 var(--t-h1)/1.08 var(--f-head); letter-spacing: -.022em; margin: 0; text-wrap: balance; }
.t-h2 { font: 600 var(--t-h2)/1.14 var(--f-head); letter-spacing: -.018em; margin: 0; text-wrap: balance; }
.t-h3 { font: 600 var(--t-h3)/1.25 var(--f-head); letter-spacing: -.01em; margin: 0; }
.t-lead { font-size: var(--t-lead); line-height: 1.5; color: var(--c-muted); margin: 0; max-width: 56ch; text-wrap: pretty; }
.t-small { font-size: var(--t-small); color: var(--c-muted); }
.t-cap { font: 500 var(--t-cap) var(--f-text); color: var(--c-gray); }
/* Имя близкого: тем же шрифтом, цветом и маркером под строкой */
.name { color: var(--c-pink-ink); white-space: nowrap; background: linear-gradient(transparent 64%, rgba(237, 74, 233, .22) 64%, rgba(237, 74, 233, .22) 92%, transparent 92%); padding: 0 .06em; }
.on-ink .name, .name--dark { color: var(--c-pink-light); background: linear-gradient(transparent 64%, rgba(255, 122, 247, .28) 64%, rgba(255, 122, 247, .28) 92%, transparent 92%); }
.on-blue .name, .name--yellow { color: var(--c-yellow); background: none; padding: 0; }
.nb { white-space: nowrap; }

/* Кнопки */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 56px; padding: 0 28px; border: 0; border-radius: var(--r-pill); font: 600 17px/1 var(--f-head); text-decoration: none; white-space: nowrap; cursor: pointer; transition: background .2s, transform .15s var(--ease), box-shadow .2s; }
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(1px) scale(.98); }
.btn:focus-visible { outline: 3px solid var(--c-yellow); outline-offset: 3px; }
.btn svg { width: 20px; height: 20px; flex: none; }
.btn--blue { background: var(--c-blue); color: #fff; }
.btn--blue:hover { background: var(--c-blue-hover); }
.btn--ink { background: var(--c-ink); color: #fff; }
.btn--white { background: #fff; color: var(--c-blue); }
.btn--line { background: transparent; color: var(--c-ink); box-shadow: inset 0 0 0 1.5px var(--c-line); }
.btn--line:hover { box-shadow: inset 0 0 0 1.5px var(--c-ink); }
.on-blue .btn--line, .on-ink .btn--line { color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .45); }
.btn--small { min-height: 44px; padding: 0 20px; font-size: 15px; }
.btn--wide { width: 100%; }
.btn[disabled] { background: var(--c-line); color: var(--c-gray); cursor: default; transform: none; }
.link { color: var(--c-blue); font: 600 15px var(--f-head); text-decoration: none; display: inline-flex; gap: 6px; align-items: center; }
.link svg { width: 18px; height: 18px; transition: transform .2s; }
.link:hover svg { transform: translateX(3px); }

/* Иконка */
.i { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* Выбор */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { min-height: 42px; padding: 0 18px; border-radius: var(--r-pill); border: 1.5px solid var(--c-line); background: var(--c-card); color: var(--c-ink); font: 500 15px var(--f-text); cursor: pointer; }
.chip[aria-pressed="true"] { background: var(--c-ink); border-color: var(--c-ink); color: #fff; }
.on-ink .chip { background: none; border-color: #2c3d69; color: #dfe5f5; }
.on-ink .chip[aria-pressed="true"] { background: #fff; color: var(--c-ink); border-color: #fff; }

/* Поля */
.field { display: grid; gap: 6px; }
.label { font: 600 15px var(--f-text); }
.input { width: 100%; min-height: 54px; padding: 14px 16px; border-radius: var(--r-s); border: 1.5px solid var(--c-line); background: var(--c-card); color: var(--c-ink); font: 400 17px var(--f-text); resize: none; }
.input:focus { outline: none; border-color: var(--c-blue); box-shadow: 0 0 0 4px var(--c-blue-soft); }
textarea.input { min-height: 104px; line-height: 1.45; }
.voice { flex: none; width: 54px; height: 54px; border-radius: 50%; border: 0; background: var(--c-blue); color: #fff; display: grid; place-items: center; cursor: pointer; }
.steps { display: flex; gap: 6px; }
.steps i { flex: 1; height: 6px; border-radius: 3px; background: var(--c-line); }
.steps i.on { background: var(--c-blue); }

/* Плеер */
.play { flex: none; width: 52px; height: 52px; border-radius: 50%; border: 0; background: var(--c-blue); color: #fff; display: grid; place-items: center; cursor: pointer; transition: transform .15s var(--ease); }
.play:hover { transform: scale(1.06); }
.play svg { width: 20px; height: 20px; fill: currentColor; stroke: none; }
.on-blue .play { background: #fff; color: var(--c-blue); }
.player { display: flex; align-items: center; gap: 14px; padding: 8px 20px 8px 8px; background: var(--c-card); color: var(--c-ink); border-radius: var(--r-pill); }
.player__t { flex: 1; min-width: 0; }
.player__n { font: 600 15px var(--f-head); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.player__bar { height: 4px; border-radius: 2px; background: #e6e9f2; margin-top: 8px; overflow: hidden; }
.player__bar i { display: block; height: 100%; background: var(--c-blue); }
.time { font: 600 13px var(--f-text); color: var(--c-muted); font-variant-numeric: tabular-nums; }

/* Строки чека */
.rl { display: flex; align-items: baseline; gap: 10px; padding: 8px 0; font-size: var(--t-body); }
.rl .dots { flex: 1; min-width: 16px; border-bottom: 2px dotted #dccfbc; transform: translateY(-4px); }
.rl b { font: 800 16px var(--f-head); white-space: nowrap; }
.rl em { font-style: normal; color: var(--c-muted); white-space: nowrap; }
.free-line { display: flex; justify-content: space-between; gap: 10px; padding: 10px 14px; border-radius: var(--r-s); background: var(--c-green-soft); color: var(--c-green); font: 600 15px var(--f-text); }
.price-tag { font: 700 14px var(--f-head); color: #6b4a00; background: var(--c-yellow-soft); padding: 4px 10px; border-radius: var(--r-pill); white-space: nowrap; }
.toggle { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 14px; border-radius: var(--r-m); border: 1.5px dashed #d4c6b0; background: none; text-align: left; cursor: pointer; font: inherit; color: inherit; transition: border-color .2s, background .2s; }
.toggle__t { flex: 1; min-width: 0; }
.toggle__t b { display: block; font: 600 15px var(--f-head); }
.toggle__t small { font-size: 13px; color: var(--c-muted); }
.toggle .sw { width: 44px; height: 26px; border-radius: var(--r-pill); background: #fff; box-shadow: inset 0 0 0 2px #8a93ab; position: relative; flex: none; transition: background .2s; }
.toggle .sw::after { content: ""; position: absolute; top: 4px; left: 4px; width: 18px; height: 18px; border-radius: 50%; background: #8a93ab; transition: transform .2s var(--ease); }
.toggle[aria-pressed="true"] { border-style: solid; border-color: var(--c-blue); background: #f4f7ff; }
.toggle[aria-pressed="true"] .sw { background: var(--c-blue); box-shadow: none; }
.toggle[aria-pressed="true"] .sw::after { background: #fff; }
.toggle[aria-pressed="true"] .sw::after { transform: translateX(18px); }
.total { display: flex; justify-content: space-between; align-items: baseline; padding-top: 14px; border-top: 2px solid var(--c-ink); }
.total b { font: 800 26px var(--f-head); letter-spacing: -.02em; }

/* Поверхности */
.card { background: var(--c-card); border: 1px solid var(--c-line); border-radius: var(--r-l); }
.on-blue { background: var(--c-blue); color: #fff; }
.on-ink { background: var(--c-ink); color: #fff; }
.on-blue .t-lead, .on-blue .t-small { color: var(--c-on-blue); }
.on-ink .t-lead, .on-ink .t-small { color: #aab4d4; }

/* Шапка в одну строку на телефоне — в shell.css; типографика: неразрывные пробелы ставит typo.js */

/* ===== Кит 6, круг 1: одно оформление имени на любом фоне — белые буквы на розовой плашке ===== */
.name, .on-ink .name, .name--dark, .on-blue .name, .name--yellow { color: #fff !important; background: var(--c-pink-ink) !important; padding: 0 .16em .02em !important; border-radius: .16em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.on-blue .name, .name--yellow { background: var(--c-pink-ink) !important; }