/* Кабинет Mojno. Дизайн-ключ и обоснование — DESIGN.md.
   Ни одного красно-зелёного дашборда «превышение бюджета» — цветом отмечается
   только вердикт, и только в момент решения. Главная цифра всегда нейтральная.
   Мятный здесь цвет бренда, а не оценки: он одинаков и когда всё хорошо,
   и когда всё плохо. */

:root {
  --ground:      #F2F5F4;
  --surface:     #FFFFFF;
  --surface-2:   #F4F7F8;
  --surface-3:   #E8EDEF;
  --line:        #E4E9ED;
  --line-soft:   #EDF1F3;
  --ink:         #101419;
  --ink-2:       #4A5260;
  --ink-3:       #7B8492;
  --accent:      #12A67F;
  --accent-2:    #0E8C6B;
  --accent-soft: #DCF3EB;
  --lilac:       #7A70D8;
  --lilac-soft:  #EDEBFD;
  --lime:        #D7F56D;
  --ok:          #1D6B4C;
  --ok-soft:     #DFEEE6;
  --warn:        #8A6113;
  --warn-soft:   #F3EAD6;
  --bad:         #9A2B2B;
  --bad-soft:    #F2DEDE;

  --sans:  system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --serif: Charter, "Iowan Old Style", Georgia, serif;
  --mono:  ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;

  --r: 18px;
  --r-sm: 12px;
  --r-pill: 999px;
  --shadow: 0 1px 2px rgba(16,20,25,.04), 0 18px 40px -24px rgba(16,20,25,.30);

  /* Пастельный градиент вместо плоского фона — общий приём обоих референсов.
     Держится очень светлым намеренно: это подложка, а не картинка. */
  --wash:
    radial-gradient(60rem 40rem at 8% -10%,  rgba(18,166,127,.10), transparent 60%),
    radial-gradient(52rem 38rem at 96% 4%,   rgba(122,112,216,.12), transparent 62%),
    radial-gradient(46rem 34rem at 50% 108%, rgba(215,245,109,.14), transparent 60%);
}

@media (prefers-color-scheme: dark) {
  :root {
    --ground:#0E1114; --surface:#161A1F; --surface-2:#1B2026; --surface-3:#232931;
    --line:#272D34; --line-soft:#20262C;
    --ink:#E8ECF0; --ink-2:#A5AEBA; --ink-3:#767F8C;
    --accent:#3ED0A6; --accent-2:#6FE0C0; --accent-soft:#0F2E26;
    --lilac:#A79EF0; --lilac-soft:#1D1B33;
    --lime:#C9E85F;
    --ok:#63C395; --ok-soft:#14301F;
    --warn:#D6A64F; --warn-soft:#2E2513;
    --bad:#E27E79; --bad-soft:#331A1A;
    --shadow: 0 1px 2px rgba(0,0,0,.4), 0 20px 44px -26px rgba(0,0,0,.85);
    --wash:
      radial-gradient(60rem 40rem at 8% -10%,  rgba(62,208,166,.07), transparent 60%),
      radial-gradient(52rem 38rem at 96% 4%,   rgba(167,158,240,.08), transparent 62%),
      radial-gradient(46rem 34rem at 50% 108%, rgba(201,232,95,.05), transparent 60%);
  }
}

* { box-sizing: border-box; }

/* display:grid у .card/.view/.onboard перебивает браузерный [hidden] —
   без этой строки скрытые экраны остаются на виду */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--wash), var(--ground);
  background-attachment: fixed;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

h1,h2,h3 { margin: 0; font-weight: 700; letter-spacing: -.022em; text-wrap: balance; }
h1 { font-size: clamp(1.7rem, 4.5vw, 2.4rem); line-height: 1.1; letter-spacing: -.035em; }
h3 { font-size: 1.02rem; }
p  { margin: 0; }

button, input { font: inherit; color: inherit; }

.wrap { max-width: 62rem; margin: 0 auto; padding-inline: clamp(1rem, 3.5vw, 2rem); }

.eyebrow {
  font-family: var(--mono); font-size: .66rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-3); font-weight: 500;
}
.muted { color: var(--ink-2); font-size: .93rem; }
.hint  { color: var(--ink-3); font-size: .84rem; line-height: 1.5; }
/* Подсказка, которая перестала быть подсказкой: сумма долей не сходится,
   и пока она не сойдётся, сохранять нечего. */
.hint.warn { color: var(--warn); font-weight: 500; }
.lede  { color: var(--ink-2); font-family: var(--serif); font-size: 1.05rem; line-height: 1.6; }
.r { text-align: right; }
.num, .free-number, td.r, .formula b { font-variant-numeric: tabular-nums; }

/* ─── онбординг ─── */
.onboard {
  min-height: 100svh; display: grid; place-items: center;
  padding: clamp(1rem, 5vw, 3rem);
}
.onboard-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r);
  box-shadow: var(--shadow); padding: clamp(1.5rem, 4vw, 2.75rem);
  max-width: 34rem; width: 100%; display: grid; gap: 1rem;
}
.ob-form { display: grid; gap: 1.15rem; margin-top: .6rem; }
.field { display: grid; gap: .4rem; }
.field > span {
  font-family: var(--mono); font-size: .68rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-3);
}
.field small { color: var(--ink-3); font-size: .8rem; }
input[type=text] {
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r);
  padding: .6rem .75rem; width: 100%; min-width: 0;
}
input[type=text]:focus-visible, button:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 1px;
}
.seg { display: flex; flex-wrap: wrap; gap: .35rem; }
.seg button {
  font-family: var(--mono); font-size: .82rem; padding: .45rem .85rem;
  border: 1px solid var(--line); background: var(--surface-2);
  border-radius: var(--r-pill); cursor: pointer; color: var(--ink-2);
}
.seg button.on { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-2); font-weight: 600; }

/* ─── шапка ─── */
.top {
  position: sticky; top: 0; z-index: 20;
  background: color-mix(in srgb, var(--ground) 90%, transparent);
  backdrop-filter: saturate(1.4) blur(12px);
  border-bottom: 1px solid var(--line-soft);
}
.top-in { display: flex; align-items: center; justify-content: space-between; gap: 1rem; height: 3.1rem; }
.brand {
  font-family: var(--mono); font-size: .74rem; letter-spacing: .16em;
  text-transform: uppercase; font-weight: 600; color: var(--accent-2); white-space: nowrap;
}
.tabs { display: flex; gap: .15rem; overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tabs button {
  font-family: var(--mono); font-size: .72rem; letter-spacing: .05em;
  background: none; border: 1px solid transparent; border-radius: var(--r-pill);
  padding: .35rem .8rem; color: var(--ink-3); cursor: pointer; white-space: nowrap;
}
.tabs button:hover { color: var(--ink); }
.tabs button.on { color: var(--accent-2); background: var(--accent-soft); font-weight: 600; }

main { padding: clamp(1.25rem, 3.5vw, 2.5rem) 0 3rem; display: block; }
.view { display: grid; gap: 1.1rem; }

/* ─── главная цифра ─── */
.hero-free {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r);
  box-shadow: var(--shadow); padding: clamp(1.3rem, 3.5vw, 2rem);
  display: grid; gap: 1.25rem;
}
@media (min-width: 46rem) { .hero-free { grid-template-columns: 1fr auto; align-items: center; } }
.free-main { display: grid; gap: .3rem; }
.free-number {
  font-size: clamp(2.6rem, 9vw, 4.2rem); font-weight: 700;
  letter-spacing: -.045em; line-height: 1;
}
.free-sub { color: var(--ink-2); font-size: 1rem; }
.free-side { display: grid; gap: .45rem; align-content: center; }
.side-row {
  display: grid; grid-template-columns: 1fr auto; gap: 1.5rem;
  font-size: .87rem; padding: .3rem 0; border-top: 1px solid var(--line-soft);
}
.side-row:first-child { border-top: 0; }
.side-row span:first-child { color: var(--ink-3); }
.side-row b { font-weight: 600; font-variant-numeric: tabular-nums; }
.side-row.locked span:first-child::after { content: " · не свободны"; color: var(--ink-3); font-size: .78em; }

/* ─── «можно?» ─── */
.askbox {
  background: var(--surface); border: 1px solid var(--accent);
  border-radius: var(--r); padding: clamp(1.1rem, 3vw, 1.5rem);
  display: grid; gap: .7rem; box-shadow: var(--shadow);
}
.ask-row { display: flex; gap: .45rem; flex-wrap: wrap; }
.ask-row input { flex: 1 1 12rem; }
.ask-row .narrow { flex: 0 0 4.5rem; }
.add-row { margin-top: .6rem; }
.ask-hd { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; }
.linkbtn {
  background: none; border: 0; padding: 0; cursor: pointer;
  color: var(--ink-3); font-size: .8rem; font-family: inherit;
}
.linkbtn:hover { color: var(--bad); }

/* ─── лента разговора ─── */
/* Одна на человека и общая с ботом: сюда же приезжает то, что написано в
   Telegram. Поэтому это лента, а не «последний ответ» — прошлое видно. */
.chat-log {
  display: grid; gap: .5rem; max-height: 22rem; overflow-y: auto;
  scroll-behavior: smooth;
}
.chat-log:empty { display: none; }
.msg {
  display: grid; gap: .45rem; padding: .6rem .8rem; border-radius: var(--r);
  max-width: 88%; line-height: 1.55; overflow-wrap: anywhere;
}
.msg p { margin: 0; }
.msg.mine {
  justify-self: end; background: var(--accent-soft); color: var(--ink);
  font-size: .95rem;
}
.msg.theirs {
  justify-self: start; background: var(--surface-2);
  border: 1px solid var(--line-soft); color: var(--ink-2);
  font-family: var(--serif); font-size: 1.02rem;
}
/* «Думаю…» вместо мёртвого экрана: без него казалось, что кнопка не сработала. */
.msg.thinking {
  display: flex; align-items: center; gap: .45rem;
  color: var(--ink-3); font-style: italic;
}
.msg.thinking .dots {
  width: .5rem; height: .5rem; border-radius: 50%; background: var(--accent);
  animation: think 1s ease-in-out infinite;
}
@keyframes think { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .msg.thinking .dots { animation: none; } }

.btn {
  border: 1px solid var(--line); background: var(--surface-2); color: var(--ink);
  border-radius: var(--r-pill); padding: .6rem 1.1rem; cursor: pointer; white-space: nowrap;
  font-size: .92rem;
}
.btn:hover { border-color: var(--accent); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }
@media (prefers-color-scheme: dark) { .btn.primary { color: #0F1218; } }
.btn.primary:hover { background: var(--accent-2); border-color: var(--accent-2); }
.btn.big { padding: .8rem 1rem; font-size: 1rem; }
.btn.ghost { background: none; border-color: transparent; color: var(--ink-3); padding: .3rem .5rem; }
.btn.ghost:hover { color: var(--bad); border-color: transparent; }

/* ─── карточка вердикта ─── */
/* Микрофон. Во время записи пульсирует — иначе непонятно, слушает он или нет. */
.btn.mic { flex: 0 0 auto; padding: .6rem .8rem; font-size: 1rem; line-height: 1; }
.btn.mic.rec { border-color: var(--bad); background: var(--bad-soft); }
.btn.mic.rec { animation: mic-pulse 1.1s ease-in-out infinite; }
@keyframes mic-pulse { 50% { opacity: .45; } }
@media (prefers-reduced-motion: reduce) { .btn.mic.rec { animation: none; } }

/* Реплика бота. Живой текст, поэтому серифом и без рамки — это разговор,
   а не карточка с цифрами. Цифры идут ниже, в вердикте. */
.said {
  margin: .2rem 0 .6rem; display: grid; gap: .5rem;
  font-family: var(--serif); font-size: 1.02rem; line-height: 1.6;
  color: var(--ink-2);
}
.said p { margin: 0; }
.draft-sum {
  margin: 0 0 .6rem; font-weight: 600; letter-spacing: -.01em;
  font-variant-numeric: tabular-nums;
}

.verdict {
  border: 1px solid var(--line); border-left-width: 3px; border-radius: var(--r);
  background: var(--surface-2); padding: 1rem 1.1rem; display: grid; gap: .55rem;
  margin-top: .2rem;
}
.verdict.ok    { border-left-color: var(--ok);   background: var(--ok-soft); }
.verdict.tight { border-left-color: var(--warn); background: var(--warn-soft); }
.verdict.no    { border-left-color: var(--bad);  background: var(--bad-soft); }
.verdict h4 { margin: 0; font-size: 1.1rem; letter-spacing: -.02em; }
.verdict.ok h4    { color: var(--ok); }
.verdict.tight h4 { color: var(--warn); }
.verdict.no h4    { color: var(--bad); }
.verdict ul { margin: 0; padding: 0; list-style: none; display: grid; gap: .25rem; }
.verdict li { font-size: .92rem; color: var(--ink-2); }
.verdict .opts { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .35rem; }
.verdict .opts button { text-align: left; }
.verdict .opts .note { display: block; font-size: .74rem; color: var(--ink-3); font-family: var(--mono); }

/* Запись факта, а не вердикт: деньги уже потрачены, оценивать нечего.
   Поэтому ни зелёного, ни красного — нейтральная карточка «куда записать». */
.verdict.record { border-left-color: var(--accent); }
.verdict.draft  { border-left-color: var(--ink-3); }

/* Отвеченная карточка остаётся в ленте: решение — часть истории. Гасим её,
   чтобы взгляд цеплялся за то, что ещё ждёт ответа. */
.verdict.done { opacity: .62; background: var(--surface-2); }
.verdict.done h4 { color: var(--ink-2); font-size: 1rem; }
.card-result {
  margin: .2rem 0 0; font-size: .9rem; color: var(--ink-2); font-weight: 600;
}
.entry { display: grid; gap: .4rem; }
.waiting { margin: .1rem 0 .4rem; color: var(--warn); font-weight: 600; }

/* ─── карточки ─── */
.card {
  background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--r);
  box-shadow: var(--shadow);
  padding: clamp(1.15rem, 2.8vw, 1.6rem); display: grid; gap: .7rem; align-content: start;
}
.card-hd { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.tag {
  font-family: var(--mono); font-size: .68rem; letter-spacing: .06em;
  color: var(--ink-3); white-space: nowrap;
}
.grid-2 { display: grid; gap: 1.1rem; }
@media (min-width: 46rem) { .grid-2 { grid-template-columns: 1fr 1fr; } }

/* ─── фонды ─── */
.funds-grid { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
@media (min-width: 40rem) { .funds-grid { grid-template-columns: 1fr 1fr; } }
.fund {
  background: var(--surface); padding: 1.1rem 1.2rem; display: grid; gap: .5rem; align-content: start;
}
.fund-top { display: flex; align-items: baseline; justify-content: space-between; gap: .6rem; }
.fund-name { font-weight: 600; }
.fund-bal { font-size: 1.5rem; font-weight: 700; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.fund-why { font-size: .84rem; color: var(--ink-3); font-family: var(--serif); line-height: 1.45; }
.bar { height: 6px; background: var(--surface-3); border-radius: var(--r-pill); overflow: hidden; }
.bar i { display: block; height: 100%; background: var(--accent); border-radius: var(--r-pill); }
.fund.locked .bar i { background: var(--ink-3); }
.fund-meta { display: flex; justify-content: space-between; font-family: var(--mono); font-size: .72rem; color: var(--ink-3); }
/* Галочка «лежат отдельно». Приглушена намеренно: это отметка факта, а не
   задание — она не должна тянуть взгляд сильнее, чем сама сумма фонда. */
.fund-moved { display: flex; align-items: center; gap: .45rem; font-size: .8rem; color: var(--ink-3); cursor: pointer; }
.fund-moved input { width: auto; flex: 0 0 auto; margin: 0; accent-color: var(--accent); }
/* специфичность: input[type=text] выше, чем просто .pct-input — иначе ширина 100% */
input.pct-input { width: 3.6rem; flex: 0 0 3.6rem; text-align: right; padding: .35rem .45rem; }

/* «На кого платёж» правится прямо в строке списка. Поле нарочно негромкое:
   у большинства платежей адресата нет, и обычная рамка ввода на каждой
   строке читалась бы как незаполненная обязанность. */
input.who-input {
  width: 8rem; margin-left: .45rem; padding: .1rem .3rem;
  font-size: .78rem; color: var(--ink-2);
  background: transparent; border: 1px dashed var(--line-soft); border-radius: 6px;
}
input.who-input:focus { border-style: solid; color: var(--ink); }

/* ─── списки строк ─── */
.rows { display: grid; }
.line {
  display: grid; grid-template-columns: 1fr auto auto; gap: .6rem; align-items: center;
  padding: .5rem 0; border-top: 1px solid var(--line-soft); font-size: .92rem;
}
.line:first-child { border-top: 0; }
.line b { font-variant-numeric: tabular-nums; font-weight: 600; }
.line .sub { display: block; font-size: .76rem; color: var(--ink-3); font-family: var(--mono); }
.line .acts { display: flex; gap: .25rem; align-items: center; }
.line .acts .btn { padding: .35rem .7rem; font-size: .85rem; }
.empty { color: var(--ink-3); font-size: .88rem; padding: .4rem 0; }

/* ─── формула ─── */
.formula { font-family: var(--mono); font-size: .88rem; display: grid; gap: .1rem; }
.formula div { display: grid; grid-template-columns: 1fr auto; gap: 1rem; padding: .3rem 0; }
.formula div.rule { border-top: 1px solid var(--line); padding-top: .5rem; margin-top: .2rem; }
.formula div.total { font-weight: 700; font-size: 1rem; color: var(--ink); }
.formula span { color: var(--ink-3); }
.formula b { color: var(--ink); font-weight: 600; }

/* ─── таблица ─── */
.tablewrap { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; min-width: 30rem; }
th {
  font-family: var(--mono); font-size: .64rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-3); text-align: left; font-weight: 500; padding: .5rem .6rem;
  border-bottom: 1px solid var(--line); white-space: nowrap;
}
td { padding: .5rem .6rem; border-bottom: 1px solid var(--line-soft); font-size: .88rem; color: var(--ink-2); }
td.r { text-align: right; color: var(--ink); font-weight: 600; }
tbody tr:last-child td { border-bottom: 0; }

canvas { width: 100%; display: block; }

/* ─── подвал и тост ─── */
.foot {
  display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; justify-content: space-between;
  padding-block: 1.2rem 2.5rem; border-top: 1px solid var(--line-soft);
  font-family: var(--mono); font-size: .68rem; color: var(--ink-3);
}
.toast {
  position: fixed; left: 50%; bottom: 1.5rem; transform: translateX(-50%);
  background: var(--ink); color: var(--ground); padding: .6rem 1rem;
  border-radius: var(--r); font-size: .88rem; z-index: 50; box-shadow: var(--shadow);
  max-width: calc(100vw - 2rem);
}

/* ─── правка операции ─── */
dialog {
  border: 0; border-radius: var(--r); padding: 1.5rem;
  background: var(--surface); color: var(--ink);
  box-shadow: var(--shadow); max-width: min(26rem, calc(100vw - 2rem)); width: 100%;
}
dialog::backdrop { background: rgb(18 22 30 / .45); }
dialog h2 { font-size: 1.1rem; margin: 0 0 1rem; }
dialog .field { margin-bottom: .9rem; }
.row-btns { display: flex; gap: .6rem; margin-top: 1.1rem; }
.row-btns .btn { flex: 1; }

/* кнопки правки и удаления стоят парой в последней колонке */
td .btn.ghost { padding: .2rem .45rem; font-size: .85rem; line-height: 1; }
td .btn.ghost + .btn.ghost { margin-left: .25rem; }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* ─── подушка (фонд стабильности) ─────────────────────────────
   Отдельный экран, потому что это единственный фонд с целью: у него есть
   «сколько надо», «сколько есть» и «когда доберём». Остальные фонды —
   потоки, у них цели нет и полоса прогресса им врала бы. */

.chip {
  width: 2.5rem; height: 2.5rem; flex: 0 0 2.5rem;
  display: grid; place-items: center;
  border-radius: var(--r-sm); background: var(--lilac-soft);
  font-size: 1.2rem; line-height: 1;
}
.chip.mint { background: var(--accent-soft); }
.chip.lime { background: color-mix(in srgb, var(--lime) 45%, var(--surface)); }

.hd-row { display: flex; align-items: center; gap: .8rem; }

/* Полоса цели. Толще обычной .bar намеренно: это главный объект экрана,
   а не подпись к фонду. */
.goal { display: grid; gap: .5rem; }
.goal-bar {
  height: 14px; background: var(--surface-3);
  border-radius: var(--r-pill); overflow: hidden;
}
.goal-bar i {
  display: block; height: 100%; border-radius: var(--r-pill);
  background: linear-gradient(90deg, var(--lilac), var(--accent));
  transition: width .5s ease;
}
.goal-bar.done i { background: var(--accent); }
.goal-meta {
  display: flex; justify-content: space-between; gap: 1rem;
  font-family: var(--mono); font-size: .72rem; color: var(--ink-3);
}

/* Крупные цифры блоками — «сколько надо / есть / осталось». */
.stats { display: grid; gap: .8rem; grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr)); }
.stat {
  background: var(--surface-2); border-radius: var(--r-sm);
  padding: .8rem .9rem; display: grid; gap: .15rem;
}
.stat b {
  font-size: 1.35rem; font-weight: 700; letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
}
.stat span { font-family: var(--mono); font-size: .66rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-3); }
.stat.accent { background: var(--accent-soft); }
.stat.accent b { color: var(--accent-2); }

/* Из чего складывается база: строки «что — сколько», с итогом. */
.breakdown { display: grid; gap: .1rem; font-size: .89rem; }
.breakdown div { display: grid; grid-template-columns: 1fr auto; gap: 1rem; padding: .35rem 0; }
.breakdown div + div { border-top: 1px solid var(--line-soft); }
.breakdown div.total { font-weight: 700; border-top: 2px solid var(--line); margin-top: .2rem; }
.breakdown b { font-variant-numeric: tabular-nums; }
.breakdown .why { color: var(--ink-3); font-size: .8rem; }

/* Три правила хранения — карточками, а не абзацем: их именно три и они
   действуют вместе (n-stability-fund-three-storage-rules). */
.rules { display: grid; gap: .6rem; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); }
.rule-card {
  background: var(--surface-2); border-radius: var(--r-sm); padding: .85rem .95rem;
  display: grid; gap: .3rem;
}
.rule-card b { font-size: .92rem; }
.rule-card span { color: var(--ink-3); font-size: .82rem; line-height: 1.45; }

/* Цель достигнута — приглашение перенаправить долю. Не поздравление:
   поздравлять человека за то, что он выполнил арифметику, значит
   разговаривать с ним как с ребёнком. */
.done-note {
  background: var(--accent-soft); border-radius: var(--r-sm);
  padding: .9rem 1rem; display: grid; gap: .6rem;
}
.done-note .row-btns { display: flex; gap: .4rem; flex-wrap: wrap; }

/* Правая половина строки: сумма сверху, «в месяц» под ней. Заведено для тем
   жизни — там два числа на строку, и без своей колонки второе уезжало под
   название, где читается как часть подписи. */
.row-right { text-align: right; margin-left: auto; }
.row-right .sub { display: block; }

/* Вопросы над лентой разговора: с них начинают, если не знают, что спросить.
   Кнопкой, а не текстом, — на текст не нажимают, даже когда он подсвечен. */
.chips { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .6rem; }
.chip-ask {
  border: 1px solid var(--line); background: var(--card); color: var(--ink-2);
  border-radius: 999px; padding: .35rem .75rem; font-size: .82rem;
  cursor: pointer; font-family: inherit;
}
.chip-ask:hover { border-color: var(--accent); color: var(--ink); }

/* Полоска сбора подушки — прямо в карточке фонда. Единственный фонд с целью,
   и цель должна быть видна там же, где остаток: отдельный экран человек
   открывает, только если уже знает, что там есть что смотреть. */
.goal { margin-top: .5rem; }
.goal-bar { height: 6px; border-radius: 999px; background: var(--line-soft); overflow: hidden; }
.goal-bar i { display: block; height: 100%; background: var(--accent); border-radius: 999px; }
.goal-sub { display: flex; justify-content: space-between; gap: .5rem;
            font-size: .74rem; color: var(--ink-3); margin-top: .3rem;
            font-family: var(--mono); }

/* ─── вход через телеграм ─────────────────────────────────────
   QR всегда на белом поле, даже в тёмной теме: сканеры читают тёмное по
   светлому, и «умная» инверсия под ночь ломает саму картинку. Тёмная тема
   тут уступает физике, а не вкусу. */
.вход-qr {
  display: flex; flex-direction: column; align-items: center; gap: .5rem;
  margin: 1.25rem 0;
}
.вход-qr-картинка {
  background: #fff; color: #000;          /* qr_svg рисует currentColor */
  padding: .75rem; border-radius: 14px;
  border: 1px solid var(--line);
  line-height: 0;
}
.вход-qr-картинка svg { width: 176px; height: 176px; display: block; }
.вход-подпись { color: var(--ink-3); font-size: .84rem; margin: 0; }

/* Экран ожидания — не крутилка. Крутилка говорит «идёт загрузка», а здесь
   ничего не грузится: мы ждём человека. Пульсация это и показывает. */
.вход-ждём {
  color: var(--ink-2); font-size: .9rem; text-align: center; margin: .75rem 0 0;
  animation: вход-пульс 1.8s ease-in-out infinite;
}
@keyframes вход-пульс { 0%,100% { opacity: 1 } 50% { opacity: .45 } }
@media (prefers-reduced-motion: reduce) {
  .вход-ждём { animation: none }
}

.вход-протух {
  color: var(--warn); font-size: .9rem; text-align: center; margin: .75rem 0 0;
}
.как-ссылка {
  background: none; border: 0; padding: 0; font: inherit;
  color: var(--accent); text-decoration: underline; cursor: pointer;
}

/* Кнопка входа — ссылка (нужен href для «открыть в новой вкладке» и для
   длинного тапа на телефоне), а браузер подчёркивает ссылки. Кнопкой её
   делает вид, а не тег. */
a.btn { text-decoration: none; display: block; text-align: center; }

.вход-запасной { margin: 1.25rem 0 .5rem; }
.вход-запасной summary {
  color: var(--ink-3); font-size: .86rem; cursor: pointer; padding: .25rem 0;
}
.вход-запасной[open] summary { margin-bottom: .5rem; }