/* Деньги: домашняя приходно-расходная книга. Один смелый элемент — полоса месяцев запаса, остальное тихое. */
:root {
  --bumaga: #ffffff;
  --chernila: #17211c;
  --tikho: #5e6b64;
  --liniya: #dce5df;
  --zel: #1e7d4b;
  --zel-svet: #e8f2ec;
  --yantar: #a86b12;
  --yantar-svet: #fff4dc;
  --krasn: #a63a2b;
  --shir: 560px;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bumaga); color: var(--chernila);
  font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  padding-bottom: calc(68px + env(safe-area-inset-bottom));
}
a { color: var(--zel); }
:focus-visible { outline: 3px solid var(--zel); outline-offset: 2px; border-radius: 4px; }
.chisla, .summa, td.n { font-variant-numeric: tabular-nums; }

.shapka {
  display: flex; align-items: baseline; justify-content: space-between;
  max-width: var(--shir); margin: 0 auto; padding: 14px 16px 6px;
}
.logo { font-weight: 700; font-size: 20px; color: var(--zel); text-decoration: none; letter-spacing: -0.01em; }
.kto-voshel { color: var(--tikho); font-size: 14px; }

main { max-width: var(--shir); margin: 0 auto; padding: 0 16px 24px; outline: none; overflow-wrap: break-word; }
h1 { font-size: 24px; line-height: 1.2; margin: 12px 0 4px; letter-spacing: -0.01em; }
h2 { font-size: 17px; margin: 26px 0 6px; }
p.tiho, .tiho { color: var(--tikho); font-size: 14px; margin: 2px 0 10px; }

/* Полоса месяцев: каждая клетка — месяц, который покрывает запас */
.zapas-geroy { margin: 10px 0 6px; }
.zapas-geroy .skolko { font-size: 44px; font-weight: 700; line-height: 1; letter-spacing: -0.02em; }
.zapas-geroy .skolko small { font-size: 18px; font-weight: 600; color: var(--tikho); margin-left: 6px; letter-spacing: 0; }
.polosa { display: grid; grid-template-columns: repeat(12, 1fr); gap: 4px; margin: 14px 0 8px; }
.polosa i { height: 18px; border-radius: 3px; background: var(--zel); }
.polosa i.chast { background: linear-gradient(90deg, var(--zel) var(--dolya), var(--zel-svet) var(--dolya)); }
.polosa i.pusto { background: var(--zel-svet); }
.polosa .god { grid-column: 1 / -1; font-size: 12px; color: var(--tikho); margin-top: -2px; }

/* Строки списка вместо карточек */
.stroki { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--liniya); }
.stroki > li { display: flex; gap: 12px; align-items: baseline; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid var(--liniya); }
.stroki .chto { min-width: 0; }
.stroki .chto b { font-weight: 600; }
.stroki .chto span { display: block; color: var(--tikho); font-size: 13px; overflow-wrap: anywhere; }
.stroki .summa { white-space: nowrap; text-align: right; font-weight: 600; }
.plus { color: var(--zel); }
.knopka-stroka { cursor: pointer; }
.knopka-stroka:hover { background: #f6faf7; }

.tri { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--liniya); border-radius: 10px; overflow: hidden; }
.tri > div { padding: 10px 12px; border-right: 1px solid var(--liniya); }
.tri > div:last-child { border-right: 0; }
.tri span { display: block; font-size: 13px; color: var(--tikho); }
.tri b { font-size: 18px; font-variant-numeric: tabular-nums; }

.trebuet {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  background: var(--yantar-svet); color: #5c3c08; border-radius: 10px; padding: 12px 14px; margin: 12px 0; text-decoration: none;
}
.trebuet b { font-size: 18px; color: var(--yantar); white-space: nowrap; }

.stolbiki { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; align-items: end; gap: 6px; height: 96px; margin: 8px 0 4px; }
.stolbiki div { background: var(--zel); border-radius: 3px 3px 0 0; min-height: 2px; }
.stolbiki-podpisi { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 6px; font-size: 11px; color: var(--tikho); text-align: center; }

.dolya { height: 6px; background: var(--zel-svet); border-radius: 3px; margin-top: 4px; }
.dolya i { display: block; height: 100%; background: var(--zel); border-radius: 3px; }

/* Формы */
label { display: block; font-size: 14px; color: var(--tikho); margin: 12px 0 4px; }
input, select, textarea, button { font: inherit; }
input[type=text], input[type=password], input[type=number], input[type=date], input[type=month], input[type=search], select, textarea {
  width: 100%; padding: 11px 12px; border: 1px solid #b9c7bf; border-radius: 8px; background: #fff; color: var(--chernila); min-height: 46px;
}
.kod-pole { font-size: 26px; letter-spacing: 0.3em; text-align: center; }
button, .knopka {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 46px; padding: 10px 18px;
  border: 0; border-radius: 8px; background: var(--zel); color: #fff; font-weight: 600; cursor: pointer; text-decoration: none;
}
button.vtor, .knopka.vtor { background: var(--zel-svet); color: var(--zel); }
button:disabled { opacity: 0.55; cursor: progress; }
.ryad-knopok { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0; }
.ryad-knopok > * { flex: 1 1 auto; }
.pereklyuchatel { display: flex; border: 1px solid var(--liniya); border-radius: 10px; overflow: hidden; margin: 10px 0; }
.pereklyuchatel button { flex: 1; border-radius: 0; background: #fff; color: var(--chernila); font-weight: 500; min-height: 40px; padding: 6px 4px; }
.pereklyuchatel button[aria-pressed=true] { background: var(--zel); color: #fff; }
.filtry { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.filtry label { margin-top: 6px; }

/* Вопросы — единственное место с карточками: каждая карточка — одно решение */
.vopros { border: 1px solid var(--liniya); border-left: 4px solid var(--yantar); border-radius: 10px; padding: 12px 14px; margin: 12px 0; }
.vopros h3 { margin: 0 0 2px; font-size: 17px; overflow-wrap: anywhere; }
.vopros .primery { list-style: none; padding: 0; margin: 8px 0; font-size: 13px; color: var(--tikho); }
.vopros .primery li { padding: 3px 0; border-top: 1px dashed var(--liniya); overflow-wrap: anywhere; }
.vopros .podskazka { font-size: 14px; color: var(--zel); margin-top: 6px; }
.gotovo { border-left-color: var(--zel); opacity: 0.6; }

.rezultat { padding: 10px 12px; border-radius: 8px; margin: 8px 0; background: var(--zel-svet); }
.rezultat.ploho { background: #fbe9e6; color: var(--krasn); }

.panel-pravki { background: #f6faf7; border: 1px solid var(--liniya); border-radius: 10px; padding: 4px 12px 12px; margin: 4px 0 8px; }

.qr { display: block; width: 220px; height: 220px; margin: 12px auto; background: #fff; }
.sekret { font-family: ui-monospace, Consolas, monospace; font-size: 14px; word-break: break-all; text-align: center; color: var(--tikho); }

table { width: 100%; border-collapse: collapse; font-size: 14px; }
th { text-align: left; color: var(--tikho); font-weight: 500; padding: 6px 4px; border-bottom: 1px solid var(--liniya); }
td { padding: 7px 4px; border-bottom: 1px solid var(--liniya); vertical-align: top; }
td.n, th.n { text-align: right; white-space: nowrap; }

.niz {
  position: fixed; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: repeat(5, 1fr);
  background: #fff; border-top: 1px solid var(--liniya); padding-bottom: env(safe-area-inset-bottom); z-index: 5;
}
.niz a { position: relative; text-align: center; padding: 13px 2px 12px; min-height: 44px; font-size: 13px; color: var(--tikho); text-decoration: none; }
.niz a[aria-current=page] { color: var(--zel); font-weight: 700; box-shadow: inset 0 3px 0 var(--zel); }
.znachok { display: inline-block; min-width: 18px; padding: 0 5px; border-radius: 9px; background: var(--yantar); color: #fff; font-size: 11px; line-height: 18px; }

.soobshchenie {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(80px + env(safe-area-inset-bottom));
  max-width: calc(100% - 32px); background: var(--chernila); color: #fff; padding: 10px 16px; border-radius: 8px; z-index: 9; font-size: 15px;
}
.pusto-ekran { text-align: center; color: var(--tikho); padding: 32px 0; }
/* нет связи / записи ждут отправки — под шапкой, чтобы видно было сразу */
.svyaz { max-width: var(--shir); margin: 0 auto 6px; padding: 0 16px; }
.svyaz > div { background: var(--yantar-svet); color: #5c3c08; border-radius: 10px; padding: 8px 12px; font-size: 14px; margin-top: 6px; }
.svyaz a { color: inherit; font-weight: 600; }
.zhdut li .summa { color: var(--yantar); }

@media (prefers-reduced-motion: no-preference) {
  .polosa i { transform-origin: left; animation: rost .5s ease-out both; animation-delay: calc(var(--n) * 25ms); }
  @keyframes rost { from { transform: scaleX(0); } to { transform: scaleX(1); } }
}
@media (min-width: 700px) {
  body { padding-bottom: 0; }
  .niz { position: sticky; top: 0; max-width: var(--shir); margin: 0 auto; border: 0; border-bottom: 1px solid var(--liniya); }
  .soobshchenie { bottom: 24px; }
}