/* Админский контур 0110.
   ══════════════════════════════════════════════════════════════════════════

   ЧЕМ ЭТОТ ЭКРАН ОТЛИЧАЕТСЯ ОТ КАБИНЕТА — и почему это не вкусовщина.

   Повседневный кабинет тёплый: чернила с оранжевым. Здесь холодный: сланец со
   стальным. Различие сделано ЦВЕТОВОЙ ТЕМПЕРАТУРОЙ, а не оттенком одного
   цвета, потому что различать эти два экрана придётся не разглядывая. Разница
   в оттенке в спешке не читается; разница «тёплое / холодное» читается краем
   глаза.

   И этого мало, поэтому сверху висит полоса словами. Цвет говорит быстро, но
   человеку, который смотрит на экран каждый день, цвет примелькается. Слово —
   нет.

   Шрифты те же, что у кабинета и главной: это один продукт, и гадать, туда ли
   попал, человек не должен. Меняется температура, а не семья. */

@font-face {
  font-family: "Unbounded";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/unbounded-700-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Unbounded";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/unbounded-700-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2013-2014, U+2018-201A, U+201C-201E, U+2022, U+2039-203A;
}
@font-face {
  font-family: "Golos Text";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/golos-text-400-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Golos Text";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/golos-text-400-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2013-2014, U+2018-201A, U+201C-201E, U+2022, U+2039-203A;
}
@font-face {
  font-family: "Golos Text";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/golos-text-500-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Golos Text";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/golos-text-500-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2013-2014, U+2018-201A, U+201C-201E, U+2022, U+2039-203A;
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/jetbrains-mono-400-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/jetbrains-mono-400-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2013-2014, U+2018-201A, U+201C-201E, U+2022, U+2039-203A;
}

:root {
  /* Холодное поле: тот же уровень тёмного, что у кабинета, но с синевой.
     Рядом эти два экрана не спутать; поодиночке — тоже. */
  --pole: #0c0f13;
  --panel: #131820;
  --panel-vyshe: #1a212b;
  --gran: #242d3a;

  --tekst: #e4eaf2;
  --tishe: #8d98a8;
  --edva: #5f6a79;

  /* Стальной вместо огня. Тот же принцип, что у кабинета: цвет здесь редкость
     и означает состояние, а не украшает. */
  --stal: #5ec8f0;
  --stal-tihiy: rgba(94, 200, 240, .13);

  --shag: clamp(18px, 2.2vw, 30px);
  --ugol: 14px;

  --zagolovok: "Unbounded", system-ui, sans-serif;
  --telo: "Golos Text", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --tehnika: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

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

body {
  margin: 0;
  min-height: 100vh;
  background: var(--pole);
  color: var(--tekst);
  font-family: var(--telo);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

/* ───────────────────────────────────────────── полоса контура */

.kontur {
  margin: 0;
  padding: 10px var(--shag);
  background: var(--stal-tihiy);
  border-bottom: 1px solid var(--gran);
  color: var(--stal);
  font-family: var(--tehnika);
  font-size: 12px;
  letter-spacing: .06em;
}

/* ─────────────────────────────────────────────────────── шапка */

.shapka {
  display: flex;
  align-items: center;
  gap: var(--shag);
  padding: 18px var(--shag);
  border-bottom: 1px solid var(--gran);
}

.znak {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: inherit;
  text-decoration: none;
  font-family: var(--zagolovok);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: -.02em;
}

.znak-kletki { width: 34px; height: 9px; flex: none; }

.shapka-gde {
  font-family: var(--tehnika);
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--tishe);
}

.shapka-konec {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-left: auto;
  min-width: 0;
}

.shapka-ty { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.25; }
.shapka-imya { font-weight: 500; font-size: 14px; }
.shapka-pochta {
  font-family: var(--tehnika);
  font-size: 11.5px;
  color: var(--tishe);
  max-width: 30ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ────────────────────────────────────────────────── раскладка */

.telo {
  padding: var(--shag);
  max-width: 900px;
  margin: 0 auto;
}

.razdel + .razdel { margin-top: calc(var(--shag) * 1.4); }

.razdel-imya {
  margin: 0 0 14px;
  font-family: var(--zagolovok);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.karta {
  padding: 20px;
  background: var(--panel);
  border: 1px solid var(--gran);
  border-radius: var(--ugol);
}

.karta + .karta { margin-top: 12px; }

.klyuch {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 0;
  border-top: 1px solid var(--gran);
}
.klyuch:first-of-type { border-top: none; }

.klyuch-imya { font-weight: 500; }

.klyuch-kogda {
  font-family: var(--tehnika);
  font-size: 11.5px;
  color: var(--edva);
  white-space: nowrap;
}

.slovo {
  margin: 10px 0 0;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--tishe);
}

.tishina { color: var(--tishe); }

.beda {
  margin: 0 0 16px;
  padding: 12px 14px;
  border-radius: 10px;
  background: rgba(255, 110, 90, .12);
  color: #ff9c88;
  font-size: 13.5px;
}

/* ─────────────────────────────────────────────────────── кнопки */

.knopka {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 11px 16px;
  border: 1px solid var(--gran);
  border-radius: 10px;
  background: transparent;
  color: var(--tekst);
  font: 500 14px/1 var(--telo);
  text-decoration: none;
  cursor: pointer;
  transition: background .18s ease, border-color .18s ease;
}
.knopka:hover { background: var(--panel-vyshe); border-color: #33404f; }
.knopka:focus-visible { outline: 2px solid var(--stal); outline-offset: 2px; }
.knopka[disabled] { opacity: .55; cursor: default; }

.knopka-stal {
  border-color: transparent;
  background: var(--stal-tihiy);
  color: var(--stal);
}
.knopka-stal:hover { background: rgba(94, 200, 240, .2); border-color: transparent; }

.knopka-uzkaya { width: auto; }

.knopki { display: grid; gap: 10px; margin-top: 16px; }

/* Поле пропуска. Моноширинным нарочно: код набирают с экрана терминала, и
   спутать «l» с «1» тут стоит целой попытки. */
.pole {
  width: 100%;
  padding: 11px 14px;
  border: 1px solid var(--gran);
  border-radius: 10px;
  background: var(--panel-vyshe);
  color: var(--tekst);
  font: 400 14px/1.3 var(--tehnika);
}
.pole::placeholder { color: var(--edva); }
.pole:focus { outline: none; border-color: var(--stal); }
.pole:focus-visible { outline: 2px solid var(--stal); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .knopka { transition: none; }
}