/* hakari — розкладка й компоненти */

*, *::before, *::after { box-sizing: border-box; }

/* Атрибут hidden перебивається будь-яким display у нашому ж CSS
   (напр. .field { display: flex }), і елемент лишається на екрані.
   Страхуємось один раз тут, щоб не ловити це в кожному компоненті. */
[hidden] { display: none !important; }

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

body {
  margin: 0;
  /* волокна васі поверх паперу; колір і густина — у токенах */
  background: var(--paper-grain), var(--bg);
  color: var(--fg);
  font: var(--t-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* iOS: не даємо гумовому скролу тягнути весь застосунок */
  overscroll-behavior-y: none;
}

/* повністю прибираємо підсвітку тапу — вона руйнує спокій */
* { -webkit-tap-highlight-color: transparent; }

button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }

/* ─────────────────────────  каркас  ───────────────────────── */

.app {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 0 var(--gutter);
  padding-top: max(26px, env(safe-area-inset-top));
  padding-bottom: calc(96px + env(safe-area-inset-bottom));
  min-height: 100vh;
  min-height: 100dvh;
}

.screen { display: none; animation: rise var(--dur) var(--ease); }
.screen.is-active { display: block; }

/* перехід між табами: спершу старий екран тихо гасне (fall), і лише
   тоді з'являється новий (rise) — послідовно, не внахлест, щоб не
   городити абсолютне позиціонування заради різної висоти екранів */
.screen.is-leaving { display: block; animation: fall .15s var(--ease) forwards; }

@keyframes rise {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}
@keyframes fall {
  to { opacity: 0; }
}

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

/* ─────────────────────────  типографіка  ───────────────────────── */

.label {
  font: var(--t-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--fg-dim);
}

.head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: var(--stack-lg);
}
.head__name { font: var(--t-serif); letter-spacing: .04em; }
.head__date { font: var(--t-label); letter-spacing: var(--ls-label); color: var(--fg-dim); }

/* 22px, а не 44: при 88px між секціями й 55px усередині секції
   відстань між групами була вдвічі більша за саму групу, і сторінка
   читалась як розсипана, а не згрупована. */
.rule { height: 2px; border: 0; margin: var(--stack) 0; }

/* Мазок замість лінійки: два пікселі, обрізані веретеном — густо
   ближче до лівого краю, нанівець на кінцях. Читається як один рух
   пензля по паперу, а не як рамка таблиці. */
.rule,
.kv::after {
  background: var(--brush);
  clip-path: polygon(0 50%, 14% 0, 78% 25%, 100% 50%, 78% 75%, 14% 100%);
}

/* ─────────────────────────  головна цифра  ───────────────────────── */

.figure { text-align: center; }

.figure__value {
  font: var(--t-numeral);
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  display: block;
}
.figure__unit  { font-size: 19px; color: var(--fg-dim); margin-left: 6px; letter-spacing: 0; }
/* десята частка кілограма — тихіше за цілі: саме вона стрибає від солі
   й сну, і саме вона не має першою ловити погляд */
.figure__frac  { font-size: .56em; color: var(--fg-dim); letter-spacing: 0; }
.figure__label { display: block; margin-top: 14px; }

.delta {
  margin-top: 18px;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  color: var(--fg-dim);
  text-align: center;
}
.delta b { font-weight: 400; color: var(--koke); }
.delta b.is-flat { color: var(--fg-dim); }
.delta b.is-warn { color: var(--shu); }

/* Відсоток жиру. Помітніший за дельту, бо це відповідь на головне
   питання, але тихіший за тренд — щоб не було двох головних цифр. */
.fat {
  margin-top: 12px;
  font-size: 13px;
  color: var(--fg-dim);
  text-align: center;
}
.fat b {
  font-weight: 400;
  font-size: 20px;
  color: var(--fg);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.01em;
  margin-right: 3px;
}
/* обмір давній — цифра гасне, але лишається на місці */
.fat.is-stale b { color: var(--fg-dim); }

/* ─────────────────────────  енсо  ───────────────────────── */

/* Кільце свідомо просторе: цифра живе всередині, і при вазі 100+ кг
   вона все одно не має торкатись штриха. */
.enso { display: block; margin: 0 auto; width: 200px; height: 200px; }
.enso__track { fill: none; stroke: var(--hairline); stroke-width: 1.5; }
.enso__arc {
  fill: none;
  stroke: var(--ink-line);
  stroke-width: 2;
  stroke-linecap: round;
  transition: stroke-dashoffset .8s var(--ease);
}
/* Шари мазка. Різниця в товщині мала навмисно: з круглими наконечниками
   уступи зливаються в звуження, а не в намистину. Так дуга перестає
   читатись як індикатор завантаження. */
.enso__arc--wet { stroke-width: 3.2; }
.enso__arc--mid { stroke-width: 2.6; }

.enso-wrap { position: relative; }
.enso-wrap .figure {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* ─────────────────────────  ввід ваги  ───────────────────────── */

.entry { margin-top: var(--stack-lg); }

.entry__row {
  display: flex;
  align-items: baseline;
  gap: 12px;
  border-bottom: 1px solid var(--hairline);
  padding-bottom: 12px;
}

.entry__input {
  flex: 1;
  font: var(--t-numeral-sm);
  font-variant-numeric: tabular-nums;
  color: var(--fg);
  background: none;
  border: 0;
  outline: none;
  width: 100%;
  min-width: 0;
  padding: 0;
  border-radius: 0;
  -webkit-appearance: none;
}
.entry__input::placeholder { color: var(--hairline); }
.entry__unit { font-size: 15px; color: var(--fg-dim); }
.entry__done { font: var(--t-label); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--fg-dim); }

.entry__save {
  position: relative;
  cursor: pointer;
  font: var(--t-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--fg-dim);
  padding: 8px 2px 8px 14px;
  transition: color var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.entry__save:has(:disabled) { opacity: .28; cursor: default; }
.entry__save:not(:has(:disabled)) { color: var(--accent); }

/* Схований системний перемикач усередині «записати» й перемикачів.
   Не display: none — так він лишається в дереві доступності для
   VoiceOver. Палець торкається підпису, підпис перемикає перемикач,
   і iPhone дає тактильний тік. */
.haptic-sw {
  position: absolute;
  width: 1px; height: 1px;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}

/* перемикачі — один тап */
.toggles { display: flex; gap: 10px; margin-top: 22px; }

.toggle {
  flex: 1;
  position: relative;
  isolation: isolate;
  border: 1px solid var(--hairline);
  padding: 15px 10px 13px;
  text-align: center;
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease);
  color: var(--fg-dim);
}
.toggle { font: var(--t-serif); cursor: pointer; -webkit-user-select: none; user-select: none; }
.toggle:has(:checked) { border-color: var(--ink-line); color: var(--fg); }

/* Заливка знизу вгору. Перемикачі — єдина тактильна дія в застосунку,
   а віддачею на неї була сама лише зміна кольору рамки. Тон тонований,
   не тушшю: підпис має лишитись читабельним, а екран тихим. */
.toggle::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--surface);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform .22s var(--ease);
}
.toggle:has(:checked)::before { transform: scaleY(1); }

/* Підсумок за тиждень — поруч із самими перемикачами, там, де дію й
   роблять. Тихіший за кнопки: це відповідь, а не місце для тапу. */
.tally {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin: 14px 2px 0;
}
.tally__marks { display: flex; gap: 18px; }
.tally__cell { font: var(--t-label); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--fg-dim); }
.tally__cell b {
  font: 400 15px/1 var(--f-sans);
  font-variant-numeric: tabular-nums;
  color: var(--fg);
  margin-left: 7px;
}

/* ─────────────────────────  графік  ───────────────────────── */

.chart { width: 100%; display: block; overflow: visible; }
.chart__raw    { fill: none; stroke: var(--fg-dim); opacity: .36; }
.chart__raw--enso { stroke: var(--ink-line); stroke-width: 1.1; stroke-linecap: round; opacity: .55; }
/* Мазок тренду — три шари, як в енсо: різниця в товщині мала, тож
   уступи зливаються в звуження, а не в намистину. */
.chart__trend  { fill: none; stroke: var(--ink-line); stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.chart__trend--mid { stroke-width: 1.85; }
.chart__trend--wet { stroke-width: 2.4; }
/* дні без зважування: тренд там стоїть рівно, і лінія про це каже
   тим самим золотом, що й пропуски в календарі */
.chart__trend--gap { stroke: var(--kin); stroke-width: 1.1; }
.chart__tick   { font: var(--t-label); letter-spacing: .1em; fill: var(--fg-dim); }
.chart { cursor: pointer; }

/* позначки фото — крихітні рамки, тихіші за самі дати */
.chart__photo { fill: none; stroke: var(--fg-dim); stroke-width: .9; opacity: .8; }

/* підказка по тапу стає на місце дат */
.chart__tick--date { transition: opacity .2s var(--ease); }
.chart.is-probing .chart__tick--date { opacity: 0; }
.chart__probe .chart__tick { fill: var(--fg); }
.chart__probe-line { stroke: var(--hairline); stroke-width: 1; }
.chart__probe-dot  { fill: var(--ink-line); }

.ranges { display: flex; gap: 22px; margin-bottom: 26px; }
.ranges button {
  font: var(--t-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--fg-dim);
  padding-bottom: 5px;
  border-bottom: 1px solid transparent;
}
.ranges button[aria-selected="true"] { color: var(--fg); border-bottom-color: var(--ink-line); }
/* вага / жир — над діапазонами й ближче до них: це одна панель, два питання */
.ranges--metric { margin-bottom: 14px; }

/* ─────────────────────────  пари ключ–значення  ───────────────────────── */

.kv { position: relative; display: flex; justify-content: space-between; align-items: baseline; padding: 15px 0; gap: 16px; }
.kv::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; }
.kv:last-child::after, .kv--bare::after { content: none; }
.kv__v { font-variant-numeric: tabular-nums; font-size: 15px; }
.kv__v.is-dim { color: var(--fg-dim); }
.kv__v.is-kin { color: var(--kin); }
.kv__v.is-warn { color: var(--shu); }
/* дата початку поряд із лічильником: масштаб для числа, не друга цифра */
.kv__since { font-style: normal; font-size: 12px; color: var(--fg-dim); margin-left: 9px; }

/* ─────────────────────────  журнал  ───────────────────────── */

.log { margin: 0; padding: 0; list-style: none; }
.log__item { display: flex; align-items: baseline; gap: 14px; padding: 13px 0; border-bottom: 1px solid var(--hairline); }
.log__date { font: var(--t-label); letter-spacing: var(--ls-label); color: var(--fg-dim); width: 90px; flex: none; white-space: nowrap; }
.log__w { font-variant-numeric: tabular-nums; font-size: 16px; }
.log__marks { margin-left: auto; font: var(--t-label); letter-spacing: .3em; color: var(--fg-dim); }
/* Колонка з тридцяти хрестиків — головний внесок у відчуття
   розсипаного екрана, та ще й у список, де тап поруч стирає день.
   Видалення тепер відкривається тапом по самому рядку — той самий
   принцип, що для фото: сітка мініатюр не місце для стирання. */
.log__item { cursor: pointer; }
.log__del {
  display: none;
  font: var(--t-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--shu);
  padding: 0 6px 0 14px;
}
.log__item.is-open .log__del { display: inline; }
.log__item.is-open { background: var(--surface); }

/* Календар-кінцугі: тридцять тонких рисок, а не сітка квадратів.
   Квадрати читаються як таблиця досягнень і тиснуть; риски — як
   зарубки тушшю. Пропуск не червоний і не порожній, а золотий:
   тріщину не ховають, її показують. */
.grid { display: grid; grid-template-columns: repeat(30, 1fr); gap: 3px; margin-top: 12px; }
.grid i { display: block; height: 38px; background: var(--hairline); }
.grid i.is-on  { background: var(--ink-line); }
.grid i.is-gap { background: var(--kin); opacity: .5; }

/* ─────────────────────────  згортання  ─────────────────────────
   Нативний <details>: нуль JS, працює з клавіатури й VoiceOver, і стан
   переживає перемальовування списку всередині. Сюди йде те, до чого
   звертаються рідше за раз на тиждень, — архів, профіль, протокол
   обмірів. */

.fold__head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 0;                    /* щоб згортка не липла до рядка над нею */
  cursor: pointer;
  list-style: none;                  /* Firefox */
}
.fold__head::-webkit-details-marker { display: none; }
.fold__head::marker { content: ''; }

.fold__note {
  margin-left: auto;
  font-size: 13px;
  color: var(--fg-dim);
  font-variant-numeric: tabular-nums;
}

/* вістря замість трикутника: та сама тонка лінія, що всюди */
.fold__mark {
  flex: none;
  width: 7px; height: 7px;
  margin: -3px 2px 0 0;
  border-right: 1px solid var(--fg-dim);
  border-bottom: 1px solid var(--fg-dim);
  transform: rotate(45deg);
  transition: transform var(--dur) var(--ease);
}
.fold[open] .fold__mark { transform: rotate(225deg); margin-top: 2px; }

/* ─────────────────────────  дії  ───────────────────────── */

.act {
  display: block;
  width: 100%;
  text-align: left;
  padding: 17px 0;
  border-bottom: 1px solid var(--hairline);
  font-size: 15px;
}
.act small { display: block; margin-top: 5px; font: var(--t-label); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--fg-dim); }
.act small.is-kin { color: var(--kin); }

.field { display: flex; justify-content: space-between; align-items: baseline; padding: 15px 0; border-bottom: 1px solid var(--hairline); gap: 16px; }
.field input {
  font: inherit; font-variant-numeric: tabular-nums; text-align: right;
  background: none; border: 0; outline: none; color: var(--fg);
  width: 120px; padding: 0; border-radius: 0; -webkit-appearance: none;
}

/* вибір із двох — той самий контур, що в .toggle на «сьогодні» */
.pick { display: flex; gap: 8px; }
.pick button {
  font-size: 14px;
  color: var(--fg-dim);
  padding: 5px 13px;
  border: 1px solid var(--hairline);
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.pick button[aria-checked="true"] { border-color: var(--ink-line); color: var(--fg); }

.hint {
  margin: 18px 0 0;
  font-size: 13px;
  line-height: 1.8;
  color: var(--fg-dim);
}
.hint.is-kin { color: var(--kin); }

/* ─────────────────────────  фото прогресу  ───────────────────────── */

.photo-toolbar { display: flex; gap: 24px; margin: 14px 0 18px; }
.photo-toolbar button {
  font: var(--t-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--fg-dim);
  padding-bottom: 5px;
  border-bottom: 1px solid transparent;
}
.photo-toolbar__add { color: var(--accent); }
.photo-toolbar button[aria-pressed="true"] { color: var(--fg); border-bottom-color: var(--ink-line); }

/* Без підписів під мініатюрами — дата й так на два тапи (лайтбокс,
   порівняння). Календар-кінцугі вже показує, коли записи є; тут
   просто фото, без другого шару тексту. */
.photo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.photo-tile {
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid transparent;
  transition: border-color var(--dur) var(--ease);
}
.photo-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photo-grid.is-compare .photo-tile { border-color: var(--hairline); }
.photo-tile.is-picked { border-color: var(--ink-line); }

/* ─────────────────────────  фото: лайтбокс і порівняння  ───────────────────────── */

dialog { border: 0; padding: 0; background: none; color: inherit; }
dialog::backdrop { background: rgba(0, 0, 0, .6); }

.lightbox { width: min(92vw, 420px); background: var(--bg); }
.lightbox img { width: 100%; display: block; }
.lightbox__bar { display: flex; justify-content: space-between; align-items: center; padding: 14px var(--gutter); }
.lightbox__actions { display: flex; gap: 18px; }
.lightbox__actions button {
  font: var(--t-label); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--fg-dim);
}
#photo-view-del { color: var(--shu); }

.compare { width: min(94vw, 460px); background: var(--bg); padding: var(--gutter); }

/* один кадр замість двох поруч: друге фото лежить зверху першого,
   повзунок керує його непрозорістю — перехід, а не зіставлення */
.compare__stack {
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: var(--surface);
}
.compare__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
#compare-b-img { opacity: 0; }

/* Єдиний елемент, що досі виглядав системним контролом iOS. Тонка
   лінія й кругле вістря — та сама мова, що в графіку й енсо. */
.compare__slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  margin-top: 18px;
  background: none;
  outline: none;
}
.compare__slider::-webkit-slider-runnable-track { height: 1px; background: var(--hairline); }
.compare__slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 18px; height: 18px;
  margin-top: -8.5px;          /* центруємо на однопіксельному треку */
  border-radius: 50%;
  background: var(--ink-line);
}
.compare__slider::-moz-range-track { height: 1px; background: var(--hairline); }
.compare__slider::-moz-range-thumb {
  width: 18px; height: 18px; border: 0; border-radius: 50%; background: var(--ink-line);
}
.compare__dates { display: flex; justify-content: space-between; margin-top: 6px; }

/* ─────────────────────────  нижня навігація  ───────────────────────── */

.nav {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  display: flex;
  justify-content: center;
  gap: 4px;
  background: var(--bg);
  border-top: 1px solid var(--hairline);
  padding: 15px 0 calc(15px + env(safe-area-inset-bottom));
}

/* Контент іде під панель, а не обрізається об неї. Глухий фон лишається
   запасним: без підтримки розмиття напівпрозора панель зробила б текст
   під собою нечитабельним. */
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .nav {
    background: var(--bg-veil);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
  }
}
.nav button {
  flex: 0 1 120px;
  text-align: center;
  color: var(--fg-dim);
  transition: color var(--dur) var(--ease);
}
.nav button[aria-selected="true"] { color: var(--fg); }
.nav__label { font: var(--t-label); letter-spacing: var(--ls-label); text-transform: uppercase; }

/* ─────────────────────────  футер: мікросезон  ───────────────────────── */

.kou { margin-top: var(--stack-lg); text-align: center; color: var(--fg-dim); }
.kou__name { font: var(--t-label); letter-spacing: var(--ls-label); text-transform: uppercase; }

/* ─────────────────────────  тихі повідомлення  ───────────────────────── */

.quiet { text-align: center; color: var(--fg-dim); font-size: 14px; padding: 24px 0; line-height: 1.8; }

/* ─────────────────────  вкладка браузера  ───────────────────── */

/* Перекриває все: у Safari застосунок має окреме сховище, тож ввід
   тут створював би другу історію замість того, щоб доповнити твою. */
.browser {
  position: fixed;
  inset: 0;
  z-index: 20;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--stack);
  padding: var(--gutter);
  text-align: center;
}
.browser__name { font-family: var(--f-serif); font-size: 30px; font-weight: 300; letter-spacing: .04em; color: var(--fg); }
.browser__text { font: var(--t-body); color: var(--fg); margin: 0; max-width: 20em; }
.browser__hint { font: var(--t-body); font-size: 13px; color: var(--fg-dim); margin: 0; }
.browser__rescue { margin-top: var(--stack-lg); display: grid; gap: 4px; justify-items: center; }
.browser__rescue .browser__text { color: var(--kin); }
/* та сама кнопка, що в «записах», але посеред порожнього екрана:
   без лінійки знизу й по центру, бо тут немає списку, до якого ставати */
.browser__rescue .act { text-align: center; border-bottom: 0; width: auto; }

.toast {
  position: fixed;
  left: 50%; bottom: calc(104px + env(safe-area-inset-bottom));
  transform: translate(-50%, 8px);
  background: var(--fg); color: var(--bg);
  font: var(--t-label); letter-spacing: var(--ls-label); text-transform: uppercase;
  padding: 11px 20px;
  max-width: calc(100vw - 40px);
  white-space: normal;
  text-align: center;
  opacity: 0; pointer-events: none;
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
  z-index: 10;
}
.toast.is-on { opacity: 1; transform: translate(-50%, 0); }

/* екран повернення */
.okaeri { text-align: center; padding: 40px 0 var(--stack-lg); }
.okaeri__word { font-family: var(--f-serif); font-size: 25px; display: block; margin-bottom: 18px; }
.okaeri__text { color: var(--fg-dim); font-size: 14px; line-height: 1.85; }

/* ─────────────────────────  обміри: ритм і печатка  ───────────────────────── */

/* «звичний день» — поруч із підписом обмірів, тим самим тихим кеглем.
   Лише помічає ритм, що вже склався; в інші дні його немає. */
.measure-head { display: flex; align-items: baseline; justify-content: space-between; }
.measure-head__day { font-size: 13px; color: var(--fg-dim); }

/* Печатка: тижневий обмір зроблено. Ханко без знака всередині —
   нерівний квадрат туші, трохи під кутом, ніби притиснули рукою. */
.seal {
  display: inline-block;
  width: 17px; height: 17px;
  margin-right: 10px;
  vertical-align: -3px;
  transform: rotate(-5deg);
  animation: stamp .5s var(--ease);
}
/* заливка тушшю з рамкою кольору паперу всередині — так виглядає
   відбиток, а не порожній квадратик, який читався б як «не відмічено» */
.seal__ink { fill: var(--ink-line); opacity: .82; }
.seal__rim { fill: none; stroke: var(--bg); stroke-width: 1.1; stroke-linejoin: round; opacity: .9; }
@keyframes stamp {
  from { opacity: 0; transform: rotate(-5deg) scale(1.5); }
  60%  { opacity: 1; transform: rotate(-5deg) scale(.94); }
  to   { transform: rotate(-5deg) scale(1); }
}

/* рекомпозиція — тихий рядок під графіком, мохом, а не тривогою */
.recomp { text-align: center; font-size: 14px; line-height: 1.8; color: var(--koke); padding: 20px 0 4px; }