:root {
  --red: #D32F2F;
  --red-dark: #B71C1C;
  --yellow: #FFCD00;
  --ice: #80DEEA;
  --ink: #1B1B1F;
  --muted: #6B6B75;
  --line: #E6E6EC;
  --bg: #F5F7FA;
  --ok: #2E7D32;
  --warn: #EF6C00;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  padding: 0 0 3rem;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color: var(--ink);
  background: var(--bg);
  line-height: 1.55;
}

.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }

/* ---------- hero ---------- */
.hero {
  background: linear-gradient(135deg, var(--red) 0%, var(--red-dark) 100%);
  color: #fff;
  padding: 2.2rem 1rem 2.6rem;
  border-bottom: 6px solid var(--yellow);
}

.hero-inner {
  max-width: 820px;
  margin: 0 auto;
  display: flex;
  gap: 1.25rem;
  align-items: center;
  flex-wrap: wrap;
}

/* Лого в шапке — исходная обложка (жёлтый фон + красный холодильник).
   Подложка плотная, того же жёлтого, что и у самой картинки: раньше здесь
   стояло #fff2, и по краям появлялась полупрозрачная рамка. */
.logo {
  border-radius: 22px;
  background: var(--yellow);
  box-shadow: 0 8px 24px #0003;
}

/* Маленький лого в шапке changelog-страницы: радиус меньше, чтобы скругление
   не съедало буквы по краям обложки. */
.changelog-page .logo { border-radius: 16px; }

h1 {
  margin: 0 0 .25rem;
  font-size: clamp(1.8rem, 5vw, 2.6rem);
  letter-spacing: -0.02em;
  color: var(--yellow);
}

.tagline {
  margin: 0;
  max-width: 46ch;
  color: #FFEAEA;
}

/* ---------- версия сервера (правый верхний угол шапки) ---------- */
/* Скрыт по умолчанию: показывается только разрешённым адресам и только после
   успешного ответа /api/version. Правило [hidden] ниже обязательно: у .server-badge
   задан display: grid, а он перебивает встроенное в браузер правило для атрибута
   hidden — без него рамка бейджа с прочерками была видна ВСЕМ, ещё до ответа API. */
.server-badge[hidden] { display: none; }

.server-badge {
  margin-left: auto;
  align-self: flex-start;
  display: grid;
  grid-template-columns: auto auto;
  gap: .1rem .5rem;
  align-items: baseline;
  padding: .5rem .8rem;
  border: 1px solid #FFFFFF40;
  border-radius: 12px;
  background: #0000002E;
  font-size: .78rem;
  line-height: 1.35;
}

.server-badge-k {
  color: #FFD9D9;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: .64rem;
  font-weight: 700;
}

.server-badge-v {
  color: #fff;
  font-weight: 600;
  text-align: right;
  white-space: nowrap;
}

@media (max-width: 560px) {
  .server-badge { margin-left: 0; grid-template-columns: auto 1fr; }
}

/* ---------- layout ---------- */
main {
  max-width: 820px;
  margin: -1.6rem auto 0;
  padding: 0 1rem;
  display: grid;
  gap: 1rem;
}

.card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 1.25rem 1.25rem 1.5rem;
  box-shadow: 0 6px 20px #1018280d;
}

.card h2 {
  margin: 0 0 .9rem;
  font-size: 1.15rem;
  letter-spacing: -0.01em;
}

/* ---------- version block ---------- */
.version-row {
  display: flex;
  gap: 1rem;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}

.version-badge {
  background: var(--ice);
  border-radius: 14px;
  padding: .7rem 1.1rem;
  min-width: 132px;
  text-align: center;
}

.version {
  font-size: 1.5rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.version-details { flex: 1 1 240px; }

.meta { margin: 0; color: var(--muted); font-size: .92rem; }

.hint {
  margin: .35rem 0 0;
  font-size: .88rem;
  color: var(--warn);
}

/* ---------- buttons ---------- */
.btn {
  display: inline-block;
  padding: .95rem 1.35rem;
  border-radius: 12px;
  font-weight: 700;
  text-decoration: none;
  border: 2px solid transparent;
  transition: transform .12s ease, box-shadow .12s ease, background-color .12s;
}

.btn-primary {
  background: var(--red);
  color: #fff;
  box-shadow: 0 8px 18px #d32f2f40;
}

.btn-primary:hover { background: var(--red-dark); transform: translateY(-1px); }
.btn-primary:active { transform: translateY(0) scale(.995); }
.btn-primary[aria-disabled="true"] { background: #9E9E9E; box-shadow: none; cursor: not-allowed; }

/* Пока релиза нет, кнопки скачивания нет вовсе (display:none надёжнее, чем
   полагаться только на атрибут hidden — его легко снять и вернуть себе файл). */
#download-btn[hidden],
#download-btn[aria-disabled="true"] { display: none; }

/* ---------- meta grid ---------- */
.meta-grid {
  margin-top: 1.1rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: .7rem .9rem;
  border-top: 1px dashed var(--line);
  padding-top: 1rem;
}

.meta-grid > div {
  display: flex;
  flex-direction: column;
  gap: .15rem;
  min-width: 0;
}

.meta-grid .k { font-size: .74rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.meta-grid .v { font-weight: 600; word-break: break-all; }

.fineprint { color: var(--muted); font-size: .85rem; }

/* ---------- release notes ---------- */
.notes { display: grid; gap: .75rem; }

.release {
  border: 1px solid var(--line);
  border-left: 4px solid var(--red);
  border-radius: 12px;
  padding: .8rem 1rem;
  background: #FCFCFD;
}

.release-head {
  display: flex;
  gap: .6rem;
  align-items: baseline;
  flex-wrap: wrap;
  margin-bottom: .25rem;
}

.release-version { font-weight: 700; }

.release-date { color: var(--muted); font-size: .85rem; }

.badge-new {
  background: var(--yellow);
  color: #3B2E00;
  font-size: .7rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
  padding: .1rem .45rem;
  border-radius: 999px;
}

.release ul { margin: .4rem 0 0 1.1rem; padding: 0; }
.release li { margin: .15rem 0; }

/* ---------- lists ---------- */
.features, .steps { margin: 0; padding-left: 1.2rem; }
.features li, .steps li { margin: .3rem 0; }

/* ---------- footer ---------- */
footer {
  max-width: 820px;
  margin: 1.5rem auto 0;
  padding: 0 1rem;
  text-align: center;
  color: var(--muted);
  font-size: .9rem;
}

footer a { color: var(--red); }

@media (max-width: 480px) {
  .hero { padding: 1.5rem 1rem 2.2rem; }
  .card { padding: 1rem; }
  .btn { display: block; text-align: center; }
}


/* Заголовки страницы changelog */
.release-title { font-weight: 600; margin: .1rem 0 .2rem; }

/* Страница releases/index.html: тот же стиль, шире контент */
.changelog-page main { max-width: 860px; }

.changelog-page .back {
  display: inline-block;
  margin-bottom: .75rem;
  color: var(--red);
  text-decoration: none;
  font-weight: 600;
}

.changelog-page h1 { color: var(--yellow); }

.changelog-page section.card { margin-bottom: 1rem; }

/* ---------- спойлер (SHA-256 и прочие длинные значения) ---------- */
details.spoiler {
  margin-top: .7rem;
  border: 1px dashed var(--line);
  border-radius: 10px;
  padding: .45rem .7rem;
  background: #FAFAFC;
}

details.spoiler > summary {
  cursor: pointer;
  font-size: .82rem;
  color: var(--muted);
  list-style: none;
  user-select: none;
}

details.spoiler > summary::-webkit-details-marker { display: none; }

details.spoiler > summary::before {
  content: '▸ ';
  color: var(--red);
  font-weight: 700;
}

details.spoiler[open] > summary::before { content: '▾ '; }

details.spoiler .spoiler-body {
  margin-top: .4rem;
  font-size: .8rem;
  word-break: break-all;
  color: var(--ink);
}

/* ---------- тестовые сборки (видны только своим) ---------- */
.testblock {
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fff;
  padding: 1.1rem 1.25rem 1.3rem;
  box-shadow: 0 6px 20px #1018280d;
}

.testblock > h2 { margin: 0 0 .2rem; font-size: 1.05rem; }

.testblock .testblock-sub {
  margin: 0 0 .9rem;
  color: var(--muted);
  font-size: .84rem;
}

.testgroup { margin-top: .9rem; }

/* Группы каналов идут одна под другой: разделитель, чтобы «Stable-сборки» и
   «Из коммитов (dev)» не сливались в один список. */
.testgroup + .testgroup {
  border-top: 1px solid var(--line);
  padding-top: .85rem;
  margin-top: 1rem;
}

.testgroup-head {
  display: flex;
  align-items: baseline;
  gap: .5rem;
  flex-wrap: wrap;
  margin-bottom: .4rem;
}

.testgroup-title { font-weight: 700; font-size: .95rem; }

.chip {
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
  padding: .12rem .5rem;
  border-radius: 999px;
  background: var(--ice);
  color: #04555F;
}

.chip-staging { background: var(--yellow); color: #3B2E00; }

.buildrow {
  display: flex;
  gap: .6rem;
  align-items: center;
  flex-wrap: wrap;
  border: 1px solid var(--line);
  border-left: 3px solid var(--red);
  border-radius: 10px;
  padding: .5rem .7rem;
  margin-bottom: .45rem;
  background: #FCFCFD;
}

.buildrow.is-staging { border-left-color: var(--yellow); }

/* Порядок в строке: кнопка → дата/время → версия → коммит → описание →
   остальное. Дата/версия/коммит не переносятся по символам, а описание
   занимает свободное место: в свёрнутом виде одна строка (у первой сборки
   канала — две), по клику раскрывается целиком. */
.buildrow .builddate {
  font-size: .78rem;
  color: var(--muted);
  white-space: nowrap;
  margin-left: auto; /* дата прижата к правому краю: описание идёт сразу за кнопкой */
}

.buildrow .buildver {
  display: inline-flex;
  align-items: baseline;
  gap: .3rem;
  font-weight: 700;
  font-size: .84rem;
  white-space: nowrap;
}

/* Номер сборки: мельче версии и не жирный — это уточнение к версии, а не
   вторая равнозначная подпись. */
.buildrow .buildnum {
  font-weight: 400;
  font-size: .74rem;
  color: var(--muted);
}

.buildrow .commit {
  font-weight: 700;
  font-size: .84rem;
  letter-spacing: .01em;
}

/* Описание — <details>: свёрнуто 1 строка (2 у первой сборки канала), по клику
   раскрывается полностью. Штатный треугольник убран: он сдвигал текст и
   цеплял лишнее место в строке. */
.buildrow .buildmsg {
  flex: 1 1 260px;
  min-width: 0;
  font-size: .84rem;
  cursor: pointer;
}

.buildrow .buildmsg > summary {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  list-style: none;
}

/* Убираем штатный треугольник (Chrome/Safari/Edge и Firefox). */
.buildrow .buildmsg > summary::-webkit-details-marker { display: none; }
.buildrow .buildmsg > summary::marker { content: ''; }

/* Две строки: у первой сборки каждого канала — она задаёт тон всему списку. */
.buildrow .buildmsg.is-wide > summary {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  white-space: normal;
  overflow: hidden;
}

/* Раскрыто кликом: текст целиком, переносится по словам. */
.buildrow .buildmsg[open] > summary {
  display: block;
  overflow: visible;
  white-space: normal;
  /* без clamp — иначе текст так и остался бы обрезанным */
  -webkit-line-clamp: none;
  -webkit-box-orient: initial;
}

/* Подчёркивание-подсказка: текст можно развернуть. */
.buildrow .buildmsg:not([open]) > summary:hover { text-decoration: underline dotted; }

.buildrow .buildmsg:focus-visible > summary,
.buildrow .buildmsg > summary:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
  border-radius: 4px;
}

.buildrow .buildextra { font-size: .76rem; color: var(--muted); }

.buildrow .btn-mini {
  padding: .4rem .75rem;
  border-radius: 9px;
  font-size: .8rem;
  font-weight: 700;
  text-decoration: none;
  background: var(--red);
  color: #fff;
  white-space: nowrap;
}

.buildrow.is-staging .btn-mini { background: #8D6E00; }

.buildrow .btn-mini[aria-disabled="true"] { background: #9E9E9E; pointer-events: none; }

/* Кнопка «⬇ APK» работает и с клавиатуры: клик ловим на контейнере,
   но фокус должен быть заметен. */
.buildrow .btn-mini:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

/* ---------- остальные сборки канала (свёртка) ---------- */
/* Видны 3 свежие строки, остальные (до 10 на канал) — в <details> «Ещё N
   сборок». Нативный <details> держит состояние сам и даёт клавиатуру, поэтому
   своего обработчика здесь нет. */
.buildmore { margin: .15rem 0 .45rem; }

.buildmore > summary {
  display: block;
  padding: .38rem .7rem;
  border: 1px dashed var(--line);
  border-radius: 10px;
  font-size: .8rem;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
  list-style: none;
  user-select: none;
}

.buildmore > summary::-webkit-details-marker { display: none; }
.buildmore > summary::marker { content: ''; }

/* Свой маркер: ▸ в свёрнутом виде, ▾ в раскрытом. */
.buildmore > summary::before {
  content: '▸';
  display: inline-block;
  width: 1em;
  margin-right: .35rem;
  color: var(--ink);
}

.buildmore[open] > summary::before { content: '▾'; }

.buildmore > summary:hover { background: #F4F6FA; }

.buildmore > summary:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

/* Отступ у раскрытого списка: строки не должны липнуть к заголовку свёртки. */
.buildmore[open] > .buildrows { margin-top: .45rem; }

/* ---------- пустой канал ---------- */
/* Канал без сборок не исчезает: вместо списка — одна нейтральная строка.
   Никаких «скоро» и сроков — только факт. */
.buildrow-empty {
  margin: 0 0 .45rem;
  padding: .55rem .7rem;
  border: 1px dashed var(--line);
  border-radius: 10px;
  background: #FBFCFE;
  color: var(--muted);
  font-size: .84rem;
}

/* ---------- заглушка вместо релиза ---------- */
.stub {
  border: 1px dashed var(--line);
  border-radius: 14px;
  padding: 1.1rem 1.15rem;
  background: linear-gradient(180deg, #FBFCFE 0%, #F4F7FB 100%);
}

.stub h3 {
  margin: 0 0 .5rem;
  font-size: 1rem;
  color: var(--red-dark);
}

.stub p { margin: 0 0 .6rem; }

.stub p:last-child { margin-bottom: 0; }

.stub .stub-note {
  font-size: .84rem;
  color: var(--muted);
}