:root {
    --тло: var(--tg-theme-bg-color, #fff);
    --тло-поля: var(--tg-theme-secondary-bg-color, #f1f3f5);
    --текст: var(--tg-theme-text-color, #17212b);
    --сірий: var(--tg-theme-hint-color, #8b95a1);
    --головний: var(--tg-theme-button-color, #2f8fed);
    --на-головному: var(--tg-theme-button-text-color, #fff);
    --межа: rgba(128, 140, 155, .28);
    --лихо: #d64545;
    --добре: #2e9b57;
  }
  * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
  body {
    margin: 0; padding: 14px 14px 32px;
    font: 15px/1.45 -apple-system, "Segoe UI", Roboto, sans-serif;
    background: var(--тло); color: var(--текст);
  }
  h1 { font-size: 17px; margin: 0 0 4px; }
  .хто { color: var(--сірий); font-size: 13px; margin-bottom: 14px; }
  .поле { margin-bottom: 12px; }
  .поле > label { display: block; font-size: 13px; color: var(--сірий); margin-bottom: 5px; }
  input, textarea, .обраний {
    width: 100%; padding: 11px 12px; font: inherit; color: var(--текст); text-align: left;
    background: var(--тло-поля); border: 1px solid transparent; border-radius: 10px;
    /* 🔴 Рівно 16 px, не менше: iOS САМ наближає сторінку, коли фокус потрапляє в поле
       з дрібнішим шрифтом — екран «стрибав» і обрізався з боків (скарга Артёма 25-08-26).
       Це не косметика, а єдиний спосіб вимкнути те наближення: заборона масштабу
       у viewport на iOS не діє. Решта інтерфейсу лишається на 15 px. */
    font-size: 16px;
  }
  input:focus, textarea:focus, .обраний:focus { outline: none; border-color: var(--головний); }
  .негаразд { border-color: var(--лихо) !important; }
  /* 🔴 Поле дати WebKit малює по-своєму: у нього власна мінімальна ширина від вмісту, і
     воно не стискається в парі — саме через це дата й сума налазили одна на одну
     (скарга Артёма 25-08-26). Знімаємо рідний вигляд і дозволяємо стискатися. */
  input[type="date"] {
    -webkit-appearance: none; appearance: none;
    min-width: 0; max-width: 100%; height: 44px;
  }
  input[type="date"]::-webkit-date-and-time-value { text-align: left; }
  textarea { min-height: 62px; resize: vertical; }
  .пара { display: flex; gap: 10px; }
  .пара > * { flex: 1; min-width: 0; }
  /* 🔴 Стовпчика на телефоні більше не треба (рішення Артёма 25-08-26): наїжджали поля
     через поле дати, яке WebKit не давав стискати; це полагоджено вище, і пара знову
     тримається в ряд на будь-якому екрані. */
  .перемикач { display: flex; gap: 8px; }
  .перемикач button {
    flex: 1; padding: 10px; font: inherit; color: var(--текст); cursor: pointer;
    background: var(--тло-поля); border: 1px solid transparent; border-radius: 10px;
  }
  .перемикач button[aria-pressed="true"] {
    background: var(--головний); color: var(--на-головному); font-weight: 600;
  }

  /* ── свій список замість системного (рішення Артёма 19-08-26) ────────────
     Причина: вигляд системного списку задає пристрій, і на компʼютері він чужий
     формі. Свій однаковий скрізь і вміє показати другий рядок — валюту каси,
     тип статті, статус проєкту. */
  .вибір { position: relative; }
  .обраний {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    cursor: pointer;
  }
  .обраний.порожній .значення { color: var(--сірий); }
  .обраний .значення { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .обраний::after { content: '▾'; color: var(--сірий); flex: none; }
  .вибір.відкритий .обраний { border-color: var(--головний); }
  .пошук { width: 100%; margin-bottom: 6px; }
  .випадайка {
    position: absolute; z-index: 20; left: 0; right: 0; top: calc(100% + 4px);
    padding: 6px; max-height: 280px; overflow-y: auto; background: var(--тло);
    border: 1px solid var(--межа); border-radius: 10px;
    box-shadow: 0 10px 28px rgba(0, 0, 0, .22);
  }
  .випадайка .рядок {
    padding: 10px 11px; border-radius: 8px; cursor: pointer;
  }
  .випадайка .рядок:hover, .випадайка .рядок.обрана { background: var(--тло-поля); }
  .випадайка .другий { display: block; font-size: 12px; color: var(--сірий); }
  /* Група статей: заголовок не натискається (у розмітці в нього немає значення),
     а її статті йдуть з відступом — так видно дерево, складене в налаштуваннях. */
  .випадайка .заголовок-групи {
    padding: 12px 11px 5px; font-size: 12px; font-weight: 600; letter-spacing: .02em;
    color: var(--сірий); text-transform: uppercase; cursor: default;
  }
  .випадайка .заголовок-групи:first-child { padding-top: 5px; }
  .випадайка .рядок.усередині { margin-left: 10px; }
  /* стаття верхнього рівня після групи — відбивається рискою, щоб не читалась як її хвіст */
  .випадайка .заголовок-групи:not(:first-child),
  .випадайка .рядок.відокремлена {
    border-top: 1px solid var(--межа); margin-top: 6px; padding-top: 11px;
  }
  /* «Додати «…»» — рядок, якого в переліку немає: місто набирається вільно, і його треба
     відрізняти від наявних оком, інакше людина не помітить, що заводить нове. */
  .випадайка .рядок.своє { color: var(--головний); font-weight: 600; }
  .випадайка .порожньо { padding: 10px 11px; color: var(--сірий); }

  .галочка { display: flex; align-items: center; gap: 9px; }
  .галочка input { width: 20px; height: 20px; }
  .підказка { font-size: 12px; color: var(--сірий); margin-top: 5px; }
  /* Гривневий підсумок валютного платежу — та сама перевірка очима, що й у вікні книги:
     видно, у що перетворилися сума й курс, ДО збереження. */
  .еквівалент { font-size: 12px; color: var(--добре); margin-top: 5px; }
  .еквівалент:empty { display: none; }
  .кнопка {
    width: 100%; padding: 14px; margin-top: 8px; font: inherit; font-weight: 600;
    background: var(--головний); color: var(--на-головному);
    border: none; border-radius: 12px; cursor: pointer;
  }
  .кнопка[disabled] { opacity: .5; }
  /* Галочка «Запит на платіж» стоїть поруч із кнопкою збереження (рішення Артёма 02-09-26):
     остання розвилка перед записом — просимо оплатити чи вносимо факт. Тому й крупніша
     за звичайну: її пропускати очима не можна. */
  .рядок-збереження { display: flex; align-items: center; gap: 12px; margin-top: 8px; }
  .рядок-збереження .кнопка { flex: 1 1 auto; margin-top: 0; }
  /* 🔴 «Запит на платіж» — своя галочка біля кнопки збереження (рішення Артёма 02-09-26):
     квадрат зверху, підпис під ним. Рідний квадратик поруч із великою кнопкою виглядає
     чужим, тому малюємо свій — кольорами теми Телеграма, як і сама кнопка. */
  .запит-галочка { display: flex; flex-direction: column; align-items: center; gap: 5px;
                   flex: 0 0 auto; cursor: pointer; user-select: none; margin: 0; }
  .запит-галочка input { position: absolute; opacity: 0; width: 0; height: 0; }
  .запит-галочка .квадрат {
    width: 32px; height: 32px; border-radius: 9px; border: 2px solid var(--межа);
    background: var(--тло); display: grid; place-items: center;
    transition: background .15s, border-color .15s;
  }
  .запит-галочка .квадрат::after {
    content: ''; width: 8px; height: 14px; border: solid var(--на-головному);
    border-width: 0 2.5px 2.5px 0; transform: rotate(45deg) scale(.5); opacity: 0;
    transition: transform .15s, opacity .15s; margin-top: -3px;
  }
  .запит-галочка input:checked + .квадрат { background: var(--головний); border-color: var(--головний); }
  .запит-галочка input:checked + .квадрат::after { opacity: 1; transform: rotate(45deg) scale(1); }
  .запит-галочка .підпис { font-size: 11px; line-height: 1.15; text-align: center;
                           color: var(--сірий); font-weight: 600; }
  .запит-галочка input:checked ~ .підпис { color: var(--головний); }
  .статус { margin-top: 12px; padding: 11px 12px; border-radius: 10px; font-size: 14px; }
  .статус.помилка { background: rgba(214, 69, 69, .13); color: var(--лихо); }
  .статус.ок { background: rgba(46, 155, 87, .13); color: var(--добре); }
  .статус.інфо { background: var(--тло-поля); color: var(--сірий); }
  .схований { display: none; }
  /* Режим правки платежу (ADR-009): заперте поле видно, але воно сіре й нерухоме —
     людина бачить, ЩО в платежі, а з підказки — чому це не правиться. */
  .заперте, input:disabled, textarea:disabled, .обраний:disabled,
  .перемикач button:disabled { opacity: .55; cursor: default; }
  .про-платіж { font-size: 13px; color: var(--сірий); margin: -8px 0 14px; line-height: 1.5; }
  .про-платіж b { color: var(--текст); font-weight: 600; }
  .кнопка.небезпечна { background: rgba(214, 69, 69, .13); color: var(--лихо); }

/* екран «Новий проєкт» */
.кнопка.другорядна { background: var(--тло-поля); color: var(--текст); }
.розділювач {
  margin: 18px 0 10px; padding-top: 14px; font-size: 13px; color: var(--сірий);
  border-top: 1px solid var(--межа);
}
.збіги {
  margin: 10px 0; padding: 11px 12px; font-size: 13px; border-radius: 10px;
  background: rgba(214, 69, 69, .10); color: var(--текст);
}
.збіги div { margin-top: 4px; }

/* картки контактів і подій на екрані «Новий проєкт» */
.картка {
  margin-bottom: 10px; padding: 12px; border: 1px solid var(--межа); border-radius: 12px;
}
.картка-шапка {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 10px; font-size: 13px; color: var(--сірий);
}
.прибрати {
  padding: 2px 8px; font: inherit; color: var(--сірий); cursor: pointer;
  background: none; border: none;
}
.телефон { margin-bottom: 6px; }
.кнопка.вузька { width: auto; padding: 7px 12px; margin: 0; font-size: 13px; }
.req { color: var(--лихо); }
.хештег {
  margin: 12px 0; padding: 10px 12px; font-family: ui-monospace, Menlo, monospace;
  font-size: 13px; color: var(--сірий); background: var(--тло-поля); border-radius: 10px;
}
.хештег:empty { display: none; }

/* прогноз: що станеться з групою замовника після створення проєкту */
.прогноз {
  margin: 10px 0; padding: 11px 12px; font-size: 13px; line-height: 1.5;
  background: var(--тло-поля); border-radius: 10px;
}
.прогноз:empty { display: none; }
.прогноз div + div { margin-top: 4px; }

/* Перемикач вибору групи у формі проєкту (рішення Артёма 25-08-26) */
label.радіо { display: block; font-weight: 400; margin: 4px 0; cursor: pointer; }
label.радіо input { width: auto; margin-right: 8px; }