/* HELPer — оформление. Правила те же, что в CREW:
   ничего мельче 12px, нажимаемое от 56px, поля ввода ровно 16px (иначе iOS зумит),
   янтарь — только действие, красный — только срочность, зелёный — только «сделано».
   Эмодзи в интерфейсе нет. Цифры — моноширинные, чтобы стояли столбиком.

   20.09.2026 — общая система размеров: отступы, радиусы и кегли взяты числом
   из шкалы ниже (--p*, --r*, --t*), а не на глаз. Добавлять переменные можно, убирать нет. */

/* ── три темы, как в CREW: сцена, дневной свет, ночное зрение ─────────────── */

:root,
:root[data-tema="stage"] {
  --fon: #0e1116;
  --fon-karty: #161b23;
  --fon-pole: #1d232d;
  --kraj: #262d38;
  --tekst: #e8ecf1;
  --tekst-tikho: #8b97a8;
  --akcent: #f2a33c;
  --akcent-tekst: #17120a;
  --srochno: #e05252;
  --sdelano: #4caf7d;
  --setka: #2b3442;
  --m-vstrecha: #5b9df0;    /* метки календаря: задача — акцент, встреча, запись */
  --m-zapis: #b58cf0;
  --m-dolg: #3fc1b0;
  --m-platezh: #e07ab8;
  /* добавлено 20.09.2026 */
  --fon-verh: #1b212b;      /* приподнятая поверхность внутри карты */
  --kraj-yarko: #364152;    /* граница, когда нужен акцент без цвета */
  --ten-1: 0 1px 2px rgba(0,0,0,.34);
  --ten-2: 0 10px 30px -12px rgba(0,0,0,.72);
  --sijanie: 0 0 0 1px color-mix(in srgb, var(--akcent) 34%, transparent),
             0 8px 26px -14px color-mix(in srgb, var(--akcent) 70%, transparent);
}

/* дневной свет: чёрный экран на солнце нечитаем */
:root[data-tema="daylight"] {
  --fon: #f4f6f8;
  --fon-karty: #ffffff;
  --fon-pole: #eceff3;
  --kraj: #d2d9e0;
  --tekst: #14181d;
  --tekst-tikho: #5c6875;
  --akcent: #b96a00;
  --akcent-tekst: #ffffff;
  --srochno: #c02b2b;
  --sdelano: #1f7a4d;
  --setka: #c8d0d8;
  --m-vstrecha: #2f6fc4;
  --m-zapis: #7b4fc2;
  --m-dolg: #0f8a7c;
  --m-platezh: #b0457f;
  --fon-verh: #f7f9fb;
  --kraj-yarko: #b6c0cb;
  --ten-1: 0 1px 2px rgba(20,30,45,.07);
  --ten-2: 0 12px 30px -16px rgba(20,30,45,.30);
  --sijanie: 0 0 0 1px color-mix(in srgb, var(--akcent) 40%, transparent),
             0 8px 24px -14px color-mix(in srgb, var(--akcent) 55%, transparent);
}

/* ночное зрение: белый срезан, синий убран — чтобы экран не сжигал адаптацию глаза */
:root[data-tema="nightvision"] {
  --fon: #0b0906;
  --fon-karty: #14100b;
  --fon-pole: #1b1610;
  --kraj: #2a2218;
  --tekst: #d8c3a0;
  --tekst-tikho: #8a7757;
  --akcent: #d98324;
  --akcent-tekst: #120d06;
  --srochno: #c4462a;
  --sdelano: #8a8a3c;
  --setka: #2f2619;
  --m-vstrecha: #b8a36a;
  --m-zapis: #8f6a4a;
  --m-dolg: #7f9a5a;
  --m-platezh: #a8705f;
  --fon-verh: #1a150e;
  --kraj-yarko: #3d3222;
  --ten-1: 0 1px 2px rgba(0,0,0,.4);
  --ten-2: 0 10px 30px -12px rgba(0,0,0,.8);
  --sijanie: 0 0 0 1px color-mix(in srgb, var(--akcent) 34%, transparent),
             0 8px 26px -14px color-mix(in srgb, var(--akcent) 60%, transparent);
}

:root {
  --cifry: ui-monospace, SFMono-Regular, Menlo, monospace;
  --verh: env(safe-area-inset-top, 0px);
  --niz: env(safe-area-inset-bottom, 0px);

  /* шкала отступов: всё кратно 4 */
  --p1: 4px; --p2: 8px; --p3: 12px; --p4: 16px; --p5: 22px; --p6: 30px;
  /* шкала радиусов */
  --r1: 10px; --r2: 14px; --r3: 18px; --r4: 24px; --r5: 28px;
  /* шкала кеглей */
  --t-melko: 12px; --t-tikho: 13px; --t-telo: 15px; --t-imya: 17px;
  --t-krupno: 22px; --t-zagolovok: 30px; --t-cifra: 34px;
  /* ширина рабочей колонки и бокового меню */
  --kolonka: 980px;
  --rejka: 224px;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

/* Масштаба в приложении нет совсем — так решил Дмитрий 19.09.2026. Айфон сам
   увеличивает страницу, когда палец попадает в поле мельче 16px, поэтому все
   поля не мельче 16px. pan-x pan-y оставляет прокрутку и убирает и двойное
   касание, и щипок. Safari на айфоне правило viewport про масштаб не слушает —
   щипок там гасит app.js (gesturestart). Сканы открываются отдельной
   страницей /fajl/ — там масштаб работает, как обычно. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; touch-action: pan-x pan-y; }
input, select, textarea { font-size: 16px; }

/* Каркас приложения (20.09.2026). Раньше страница прокручивалась целиком, а шапка
   и нижняя полоса были «наклейками» поверх неё — на iPhone такие наклейки скачут,
   когда экран тянут за край или Safari прячет свою панель. Теперь высота ровно в
   экран, прокручивается только середина, а шапка и меню просто стоят по краям. */
html { height: 100%; overscroll-behavior: none; }
body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
  background: var(--fon);
  color: var(--tekst);
  font: 16px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  transition: background .2s, color .2s;
  -webkit-font-smoothing: antialiased;
}

/* один видимый фокус на всё приложение */
:focus-visible { outline: 2px solid var(--akcent); outline-offset: 2px; }

.skryto { display: none !important; }

#prilozhenie { display: flex; flex-direction: column; height: 100%; }
#prilozhenie.skryto { display: none !important; }
#ekran {
  flex: 1 1 auto; min-height: 0;
  overflow-y: auto; overflow-x: hidden;
  -webkit-overflow-scrolling: touch; overscroll-behavior-y: contain;
}
.skryto-sovsem { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

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

.shapka {
  flex: 0 0 auto; z-index: 20;
  background: var(--fon);
  background: color-mix(in srgb, var(--fon) 84%, transparent);
  backdrop-filter: saturate(160%) blur(16px);
  -webkit-backdrop-filter: saturate(160%) blur(16px);
  border-bottom: 1px solid var(--kraj);
  padding: calc(var(--p3) + var(--verh)) var(--p4) var(--p3);
}
.shapka-verh {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--p3); margin: 0 auto var(--p3);
  max-width: var(--kolonka); width: 100%;
}
/* имя приложения с янтарной точкой — знак, что пульт на связи */
.shapka-imya {
  font: 700 13px/1 var(--cifry); letter-spacing: .24em; color: var(--tekst);
  display: inline-flex; align-items: center; gap: var(--p2);
}
.shapka-imya::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: var(--akcent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--akcent) 22%, transparent);
}

/* переключатель тем — один сегментный блок, а не три отдельные кнопки */
.temy {
  display: flex; gap: 2px; padding: 3px;
  background: var(--fon-pole); border: 1px solid var(--kraj); border-radius: var(--r2);
}
.temy button {
  width: 40px; height: 36px; border-radius: var(--r1); cursor: pointer;
  border: 1px solid transparent; background: none; padding: 0;
  font: 700 11px/1 var(--cifry); color: var(--tekst-tikho);
  transition: background .18s, color .18s;
}
.temy button:hover { color: var(--tekst); }
.temy button.vybrana {
  color: var(--akcent-tekst); background: var(--akcent); box-shadow: var(--ten-1);
}

.sprosit {
  display: flex; gap: var(--p2); position: relative;
  max-width: var(--kolonka); margin: 0 auto; width: 100%;
}
.sprosit input {
  flex: 1; min-width: 0; height: 50px; padding: 0 var(--p4); font-size: 16px;
  background: var(--fon-pole); color: var(--tekst);
  border: 1px solid var(--kraj); border-radius: var(--r2);
  transition: border-color .18s, box-shadow .18s;
}
.sprosit input:focus { outline: none; border-color: var(--akcent); box-shadow: var(--sijanie); }

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

.knopka {
  min-height: 48px; padding: 0 var(--p4); font-size: var(--t-telo); font-weight: 600;
  background: var(--fon-pole); color: var(--tekst);
  border: 1px solid var(--kraj); border-radius: var(--r2); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--p2);
  transition: background .18s, border-color .18s, transform .1s, box-shadow .18s;
}
.knopka:hover { border-color: var(--kraj-yarko); background: var(--fon-verh); }
.knopka:active { transform: scale(.985); }
.glavnaya-knopka {
  background: var(--akcent); color: var(--akcent-tekst);
  border-color: var(--akcent); width: 100%; margin-top: var(--p3);
  min-height: 54px; font-size: 16px; box-shadow: var(--ten-1);
}
.glavnaya-knopka:hover {
  background: color-mix(in srgb, var(--akcent) 88%, var(--tekst));
  border-color: color-mix(in srgb, var(--akcent) 88%, var(--tekst));
}
.vtoraya { font-weight: 500; }
.malaya { min-height: 44px; font-size: var(--t-tikho); padding: 0 var(--p3); }

/* ── общее ────────────────────────────────────────────────────────────────── */

main { padding: var(--p5) var(--p4) var(--p4); }
.razdel { max-width: var(--kolonka); margin: 0 auto; }

.privet { margin-bottom: var(--p5); }
.privet-tekst {
  font-size: var(--t-zagolovok); font-weight: 750; letter-spacing: -.02em; line-height: 1.12;
}
.privet-data {
  color: var(--tekst-tikho); font-size: var(--t-tikho); margin-top: var(--p1);
  font-family: var(--cifry); letter-spacing: .02em;
}

.karta {
  background: var(--fon-karty); border: 1px solid var(--kraj);
  border-radius: var(--r3); padding: var(--p4); margin-bottom: var(--p3);
  box-shadow: var(--ten-1); position: relative;
}
/* «горит» — не заливка тревогой, а красная рейка слева: видно краем глаза,
   но карта остаётся читаемой */
.karta.gorit { border-color: color-mix(in srgb, var(--srochno) 55%, var(--kraj)); }
.karta.gorit::before {
  content: ""; position: absolute; left: -1px; top: var(--p4); bottom: var(--p4);
  width: 3px; border-radius: 3px; background: var(--srochno);
}
.karta-imya {
  font: 700 var(--t-melko)/1 var(--cifry); letter-spacing: .16em; text-transform: uppercase;
  color: var(--tekst-tikho); margin-bottom: var(--p3);
  display: flex; align-items: center; gap: var(--p2); flex-wrap: wrap;
}
.karta.gorit > .karta-imya { color: var(--srochno); }
.tikho { color: var(--tekst-tikho); font-size: var(--t-melko); font-weight: 400;
         letter-spacing: 0; text-transform: none; font-family: inherit; }
.schet { font: 700 var(--t-melko)/1 var(--cifry); color: var(--akcent-tekst);
         background: var(--akcent); border-radius: 999px; padding: 5px 9px; }

.spisok { margin: 0; padding: 0; list-style: none; }
.spisok li { padding: var(--p3) 0; border-top: 1px solid var(--kraj); font-size: var(--t-telo); }
.spisok li:first-child { border-top: 0; padding-top: 0; }
.spisok li .pometka { color: var(--tekst-tikho); font-size: var(--t-tikho);
                      display: block; margin-top: 3px; }

/* «Первым делом» — строки под номерами, читается как список дел */
#glavnoe { counter-reset: glavnoe; }
#glavnoe li { counter-increment: glavnoe; padding-left: 30px; position: relative; }
#glavnoe li::before {
  content: counter(glavnoe); position: absolute; left: 0; top: var(--p3);
  font: 700 var(--t-melko)/18px var(--cifry); color: var(--srochno);
  width: 18px; height: 18px; text-align: center; border-radius: 6px;
  background: color-mix(in srgb, var(--srochno) 16%, transparent);
}
#glavnoe li:first-child::before { top: 0; }

/* лист вызова: слева когда, справа что */
.list { width: 100%; border-collapse: collapse; font-size: var(--t-telo); }
.list td { padding: var(--p3) 0; border-top: 1px solid var(--kraj); vertical-align: top; }
.list tr:first-child td { border-top: 0; padding-top: 0; }
.list td.kogda { width: 116px; padding-right: var(--p3); white-space: nowrap;
                 font: 700 var(--t-tikho)/1.5 var(--cifry); color: var(--tekst-tikho); }
.list td.kogda.gorit { color: var(--srochno); }
.list td.kogda.spokojno { color: var(--sdelano); }
/* без этого приписка прилипала к названию в одну строку: «aktivсегодня» */
.list td .pometka { color: var(--tekst-tikho); font-size: var(--t-tikho);
                    display: block; margin-top: 3px; }

.pusto {
  color: var(--tekst-tikho); font-size: var(--t-telo); padding: var(--p6) var(--p4);
  text-align: center; line-height: 1.5;
  border: 1px dashed var(--kraj); border-radius: var(--r2);
  background: color-mix(in srgb, var(--fon-pole) 45%, transparent);
}
td.pusto, li.pusto { border: 0; background: none; padding: var(--p5) 0; }

/* ── плитки с цифрами ─────────────────────────────────────────────────────── */

.plitki { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--p2);
          margin-bottom: var(--p3); }
.plitka {
  background: var(--fon-karty); border: 1px solid var(--kraj); border-radius: var(--r3);
  padding: var(--p4); cursor: pointer; text-align: left; color: inherit;
  display: flex; flex-direction: column; gap: 3px; min-height: 108px;
  box-shadow: var(--ten-1); position: relative; overflow: hidden;
  transition: border-color .18s, transform .1s, box-shadow .18s;
}
/* тонкая полоса сверху — даёт плитке лицо и отделяет цифру от фона */
.plitka::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px;
  background: var(--kraj-yarko);
}
.plitka:hover { border-color: var(--kraj-yarko); box-shadow: var(--ten-2); }
.plitka:active { transform: scale(.99); }
.plitka.gorit { border-color: color-mix(in srgb, var(--srochno) 55%, var(--kraj)); }
.plitka.gorit::before { background: var(--srochno); }
.plitka-cifra { font: 750 var(--t-cifra)/1 var(--cifry); letter-spacing: -.03em;
                margin-top: var(--p1); }
.plitka.gorit .plitka-cifra { color: var(--srochno); }
.plitka-imya { font-size: var(--t-tikho); color: var(--tekst); font-weight: 600; }
.plitka-pripiska { font-size: var(--t-melko); color: var(--tekst-tikho); margin-top: auto;
                   padding-top: var(--p2); }

/* ── штриховка: язык площадки, значит «меньше 12 часов» ───────────────────── */

.shtrihovka {
  background-image: repeating-linear-gradient(45deg,
    var(--akcent) 0 6px, transparent 6px 12px);
  height: 5px; border-radius: 3px; margin-top: var(--p3); opacity: .85;
}

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

.grafik { width: 100%; height: 76px; display: block; }
.grafik .linija { fill: none; stroke: var(--akcent); stroke-width: 2.2;
                  stroke-linejoin: round; stroke-linecap: round; }
.grafik .tochka { fill: var(--akcent); }
.grafik .osnova { stroke: var(--setka); stroke-width: 1; }

.stolbiki { display: flex; align-items: flex-end; gap: var(--p2); height: 96px; }
.stolbik { flex: 1; background: var(--fon-pole); border: 1px solid var(--kraj);
           border-radius: var(--r1) var(--r1) 4px 4px; position: relative; min-height: 4px;
           overflow: hidden; }
.stolbik .zapolnenie { position: absolute; left: 0; right: 0; bottom: 0;
                       background: var(--akcent); border-radius: var(--r1) var(--r1) 0 0;
                       transition: height .35s ease; }
.stolbiki-podpisi { display: flex; gap: var(--p2); margin-top: var(--p2); }
.stolbiki-podpisi span { flex: 1; text-align: center; font: 600 11px/1 var(--cifry);
                         color: var(--tekst-tikho); }

/* ── записи ───────────────────────────────────────────────────────────────── */

.poloska { display: flex; gap: var(--p2); margin-bottom: var(--p3); flex-wrap: wrap; }
.poloska input[type=search], .poloska .pole { flex: 1; min-width: 160px; margin-bottom: 0; }
.poloska input[type=search] {
  height: 50px; padding: 0 var(--p4); font-size: 16px; background: var(--fon-pole);
  color: var(--tekst); border: 1px solid var(--kraj); border-radius: var(--r2);
  transition: border-color .18s, box-shadow .18s;
}
.poloska input[type=search]:focus { outline: none; border-color: var(--akcent);
                                    box-shadow: var(--sijanie); }
.pole {
  display: block; width: 100%; max-width: 100%; min-width: 0; height: 50px; padding: 0 var(--p4); font-size: 16px;
  background: var(--fon-pole); color: var(--tekst);
  border: 1px solid var(--kraj); border-radius: var(--r2); margin-bottom: var(--p2);
  transition: border-color .18s, box-shadow .18s;
}
textarea.pole { height: auto; min-height: 104px; padding: var(--p3) var(--p4); line-height: 1.5;
                resize: vertical; font-family: inherit; }
select.pole { appearance: none; -webkit-appearance: none; padding-right: 40px;
  background-image: linear-gradient(45deg, transparent 50%, var(--tekst-tikho) 50%),
                    linear-gradient(135deg, var(--tekst-tikho) 50%, transparent 50%);
  background-position: calc(100% - 21px) 23px, calc(100% - 15px) 23px;
  background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; }
.pole:focus { outline: none; border-color: var(--akcent); box-shadow: var(--sijanie); }
/* Дата и время на iPhone: своя ширина поля больше колонки — поле вылезало вправо */
input[type=date].pole, input[type=time].pole, input[type=month].pole {
  -webkit-appearance: none; appearance: none; line-height: 48px; text-align: left; }
input.pole::-webkit-date-and-time-value { text-align: left; }

/* ── голос в поле ─────────────────────────────────────────────────────────── */

.pole-s-golosom { position: relative; display: block; min-width: 0; }
.sprosit > .pole-s-golosom, .poloska > .pole-s-golosom { flex: 1; min-width: 160px; }
.pole-s-golosom > input, .pole-s-golosom > textarea { width: 100%; padding-right: 50px; }
.golos-knopka {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  width: 36px; height: 36px; display: grid; place-items: center; padding: 0;
  background: none; border: 1px solid transparent; border-radius: var(--r1);
  color: var(--tekst-tikho); cursor: pointer;
  transition: color .18s, border-color .18s, background .18s;
}
.pole-s-golosom.mnogo .golos-knopka { top: 8px; transform: none; }
.golos-knopka svg { width: 19px; height: 19px; position: relative; z-index: 1; }
.golos-knopka:hover { color: var(--akcent); border-color: var(--kraj); background: var(--fon-karty); }
.golos-knopka:focus-visible { outline: 2px solid var(--akcent); outline-offset: 2px; }
.slushaet .golos-knopka { color: var(--srochno); border-color: var(--srochno); }
.golos-volna { position: absolute; inset: -2px; border-radius: var(--r2); pointer-events: none; }
.slushaet .golos-volna { border: 1px solid var(--srochno); animation: golos-volna 1.6s ease-out infinite; }
@keyframes golos-volna {
  0%   { transform: scale(0.85); opacity: 0.9; }
  100% { transform: scale(1.25); opacity: 0; }
}
.golos-pro { margin: -2px 0 var(--p2); font-size: var(--t-tikho); color: var(--tekst-tikho); }
.golos-pro.oshibka { color: var(--srochno); }
.sprosit .golos-pro, .poloska .golos-pro { position: absolute; left: 2px; top: 100%; margin: var(--p1) 0 0; }

.zapisi { display: flex; flex-direction: column; gap: var(--p2); }
.zapis { background: var(--fon-karty); border: 1px solid var(--kraj);
         border-radius: var(--r2); padding: var(--p4); cursor: pointer;
         box-shadow: var(--ten-1);
         transition: border-color .18s, transform .1s, box-shadow .18s; }
.zapis:hover { border-color: var(--kraj-yarko); box-shadow: var(--ten-2); }
.zapis:active { transform: scale(.995); }
.zapis-verh { display: flex; justify-content: space-between; gap: var(--p3); align-items: baseline; }
.zapis-imya { font-weight: 650; font-size: 16px; }
.zapis-srok { font: 700 var(--t-tikho)/1 var(--cifry); white-space: nowrap; color: var(--tekst-tikho); }
.zapis-srok.gorit { color: var(--srochno); }
.zapis-kusok { color: var(--tekst-tikho); font-size: 14px; margin-top: 6px; }
.zapis-tegi { margin-top: var(--p2); display: flex; gap: 6px; flex-wrap: wrap; }
.teg { font: 600 var(--t-melko)/1 var(--cifry); color: var(--tekst-tikho);
       border: 1px solid var(--kraj); border-radius: 999px; padding: 6px 9px;
       background: var(--fon-pole); }
.dozor-itog { font-size: var(--t-telo); line-height: 1.5; }

.zagruzka { font-size: 14px; color: var(--tekst-tikho); margin-bottom: var(--p2); }

/* ── дела ─────────────────────────────────────────────────────────────────── */

.delo { display: flex; align-items: flex-start; gap: var(--p3); padding: var(--p3) 0;
        border-top: 1px solid var(--kraj); }
.delo:first-child { border-top: 0; }
.galka { width: 56px; min-width: 56px; height: 56px; border-radius: var(--r2);
         border: 1px solid var(--kraj); background: var(--fon-pole); cursor: pointer;
         font: 700 18px/1 var(--cifry); color: var(--tekst-tikho);
         transition: background .18s, border-color .18s, color .18s; }
.galka:hover { border-color: var(--kraj-yarko); color: var(--tekst); }
.galka.gotovo { background: var(--sdelano); border-color: var(--sdelano); color: #07130c; }
.delo-telo { flex: 1; min-width: 0; padding-top: 6px; }
.delo-imya { font-size: 16px; font-weight: 650; }
.delo.gotovo .delo-imya { color: var(--tekst-tikho); text-decoration: line-through; }
.delo-srok { font: 600 var(--t-tikho)/1 var(--cifry); color: var(--tekst-tikho); margin-top: 5px; }
.delo-srok.gorit { color: var(--srochno); }

/* задача наполовину: круг залит на половину цветом «сделано» */
.galka.polovina { background: linear-gradient(90deg,
    color-mix(in srgb, var(--sdelano) 55%, transparent) 50%, var(--fon-pole) 50%);
  border-color: var(--sdelano); color: var(--tekst); }
.pol-knopka { min-width: 44px; height: 44px; margin-top: 6px; border-radius: 999px;
  border: 1px solid var(--kraj); background: transparent; color: var(--tekst-tikho);
  font: 700 16px/1 var(--cifry); cursor: pointer; }
.pol-knopka.vkl { border-color: var(--sdelano); color: var(--sdelano);
  background: color-mix(in srgb, var(--sdelano) 14%, transparent); }
.zhurnal > summary { cursor: pointer; list-style: none; display: flex; gap: var(--p2);
  align-items: baseline; margin-bottom: 0; min-height: 28px; }
.zhurnal > summary::-webkit-details-marker { display: none; }
.zhurnal > summary::after { content: '▾'; margin-left: auto; color: var(--tekst-tikho); }
.zhurnal[open] > summary { margin-bottom: var(--p3); }
.zhurnal[open] > summary::after { content: '▴'; }
.zhurnal-den { font: 700 var(--t-melko)/1 var(--cifry); color: var(--tekst-tikho);
  text-transform: uppercase; letter-spacing: .12em; padding: var(--p3) 0 var(--p1); }

/* ── календарь месяца ─────────────────────────────────────────────────────── */

.kal { padding: var(--p3); }
.kal-verh { display: flex; align-items: center; gap: var(--p1); margin-bottom: var(--p2); }
.kal-mesyac { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-height: 44px; background: none; border: 0; color: var(--tekst);
  font-size: var(--t-imya); font-weight: 700; line-height: 1; text-align: left; padding: 0 var(--p2); cursor: pointer; }
.kal-strelka { width: 44px; height: 44px; border-radius: var(--r1); border: 1px solid var(--kraj);
  background: var(--fon-pole); color: var(--tekst); font-size: 22px; cursor: pointer; }
.kal-svernut { min-height: 44px; padding: 0 var(--p3); border-radius: var(--r1);
  border: 1px solid var(--kraj); background: transparent; color: var(--tekst-tikho);
  font-size: var(--t-tikho); font-weight: 600; cursor: pointer; }
.kal-nedeli, .kal-setka { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.kal-nedeli span { text-align: center; font: 600 var(--t-melko)/1 var(--cifry);
  color: var(--tekst-tikho); padding: var(--p1) 0 var(--p2); }
.kal-den { position: relative; min-height: 50px; border: 1px solid transparent;
  border-radius: var(--r1); background: none; color: var(--tekst); cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  gap: 5px; padding: 7px 0 5px; font: 600 var(--t-telo)/1 var(--cifry); }
.kal-den.vyhodnoj .kal-chislo { color: var(--tekst-tikho); }
.kal-den.chuzhoj { opacity: .35; }
.kal-den.segodnya { border-color: var(--akcent); }
.kal-den.segodnya .kal-chislo { color: var(--akcent); }
.kal-den.vybran { background: var(--fon-verh); border-color: var(--kraj-yarko); }
.kal-den.segodnya.vybran { background: color-mix(in srgb, var(--akcent) 16%, transparent);
  border-color: var(--akcent); }
.kal-metki { display: flex; gap: 3px; align-items: center; height: 8px; }
.kal-skolko { font: 700 9px/1 var(--cifry); color: var(--tekst-tikho); }
.metka { display: inline-block; width: 12px; height: 5px; border-radius: 3px; }
.m-zadacha { background: var(--akcent); }
.m-vstrecha { background: var(--m-vstrecha); }
.m-zapis { background: var(--m-zapis); }
.m-dolg { background: var(--m-dolg); }
.m-platezh { background: var(--m-platezh); }
.m-prosrocheno { background: var(--srochno); }
.m-sdelano { background: var(--sdelano); }
.kal-legenda { display: flex; flex-wrap: wrap; gap: var(--p1) var(--p3); margin-top: var(--p3);
  font-size: var(--t-melko); color: var(--tekst-tikho); }
.kal-legenda span { display: inline-flex; align-items: center; gap: 5px; }
.kal.svernut .kal-legenda { display: none; }

/* ── закладки внутри раздела (Деньги) ─────────────────────────────────────── */

.zakladki { display: flex; gap: var(--p1); overflow-x: auto; margin: 0 0 var(--p3);
  padding: 3px; border-radius: var(--r2); background: var(--fon-pole); scrollbar-width: none; }
.zakladki::-webkit-scrollbar { display: none; }
.zakladka { flex: 1 0 auto; min-height: 40px; padding: 0 var(--p3); border: 0; border-radius: var(--r1);
  background: transparent; color: var(--tekst-tikho); font-size: var(--t-tikho); font-weight: 650;
  white-space: nowrap; cursor: pointer; }
.zakladka.vybrana { background: var(--fon-karty); color: var(--tekst); box-shadow: var(--ten-1); }
.nalog-pro { margin: 0 0 var(--p3); line-height: 1.5; font-size: var(--t-tikho); }
.nalog-flag { display: flex; gap: var(--p2); align-items: flex-start; font-size: var(--t-tikho);
  line-height: 1.4; margin-bottom: var(--p3); cursor: pointer; }
.nalog-flag input { width: 20px; height: 20px; flex: 0 0 20px; margin: 0; accent-color: var(--akcent); }
.r-kat { padding: var(--p2) 0; }
.r-kat-verh { display: flex; justify-content: space-between; gap: var(--p2); font-size: var(--t-tikho); }
.r-kat-verh b { font-family: var(--cifry); }
.r-kat .dolg-polosa i { background: var(--akcent); }
.r-stroka { cursor: pointer; }
.karta-knopka { display: block; width: 100%; text-align: left; color: inherit; font: inherit; cursor: pointer; }
.karta-knopka .spisok li.gorit { color: var(--srochno); }
.zaglushka p { margin: 0 0 var(--p2); line-height: 1.5; }
.zakladka .skoro { font-size: 10px; color: var(--tekst-tikho); margin-left: 4px; }

/* ── долги ────────────────────────────────────────────────────────────────── */

.dolgi-itog { margin-bottom: var(--p3); }
.dolgi-itog .plitka-cifra { font-size: var(--t-krupno); }
.dolg { padding: var(--p3) 0; border-top: 1px solid var(--kraj); }
.dolg:first-child { border-top: 0; }
.dolg-verh { display: flex; justify-content: space-between; align-items: baseline; gap: var(--p3);
  cursor: pointer; }
.dolg-kto { font-size: var(--t-imya); font-weight: 650; min-width: 0; overflow-wrap: anywhere; }
.dolg-summa { font: 700 var(--t-imya)/1 var(--cifry); white-space: nowrap; }
.dolg.gotovo .dolg-kto, .dolg.gotovo .dolg-summa { color: var(--tekst-tikho); }
.dolg-pod { font: 600 var(--t-tikho)/1.35 var(--cifry); color: var(--tekst-tikho); margin-top: 5px; }
.dolg-pod.gorit { color: var(--srochno); }
.dolg-polosa { height: 6px; border-radius: 3px; background: var(--fon-pole); margin-top: var(--p2);
  overflow: hidden; }
.dolg-polosa i { display: block; height: 100%; background: var(--sdelano); }
.dolg-knopki { margin-top: var(--p2); flex-wrap: wrap; }
.dolg-knopki .knopka { margin: 0; }
.d-podpis { flex: 1; font-size: var(--t-melko); color: var(--tekst-tikho); display: flex;
  flex-direction: column; gap: 4px; min-width: 0; }
.vozvrat { display: flex; align-items: center; justify-content: space-between; gap: var(--p2);
  font: 600 var(--t-tikho)/1.3 var(--cifry); padding: var(--p1) 0; }
.vozvrat .knopka { margin: 0; }

/* ── решения ──────────────────────────────────────────────────────────────── */

.reshenie { background: var(--fon-karty); border: 1px solid var(--kraj);
            border-radius: var(--r3); padding: var(--p4); margin-bottom: var(--p2);
            box-shadow: var(--ten-1); }
.reshenie-verh { display: flex; justify-content: space-between; gap: var(--p2); align-items: baseline; }
.reshenie-proekt { font: 700 var(--t-melko)/1 var(--cifry); letter-spacing: .12em;
                   color: var(--akcent); text-transform: uppercase; }
.reshenie-visit { font: 600 var(--t-melko)/1 var(--cifry); color: var(--tekst-tikho); white-space: nowrap; }
.reshenie-visit.dolgo { color: var(--srochno); }
.reshenie-imya { font-size: var(--t-imya); font-weight: 650; margin: var(--p2) 0 var(--p1);
                 line-height: 1.3; }
.reshenie-sut { font-size: 14px; color: var(--tekst-tikho); line-height: 1.5; }
.reshenie-knopki { display: flex; gap: var(--p2); margin-top: var(--p3); }
.reshenie-knopki .knopka { flex: 1; min-height: 56px; }

/* ── радар ────────────────────────────────────────────────────────────────── */

.kvadraty { display: flex; gap: var(--p1); margin-top: var(--p2); }
.kvadrat { width: 14px; height: 14px; border-radius: 4px; background: var(--sdelano); }
.kvadrat.trevoga { background: var(--srochno); }
.kvadrat.pusto { background: var(--fon-pole); border: 1px solid var(--kraj);
                 padding: 0; border-radius: 4px; }
.polosa { height: 10px; border-radius: 999px; background: var(--fon-pole);
          border: 1px solid var(--kraj); overflow: hidden; margin-top: var(--p2);
          position: relative; }
/* насечки по четвертям — «половина» и «почти полный» видно, не читая цифру */
.polosa::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(90deg,
    transparent 0 calc(25% - 1px), var(--fon-karty) calc(25% - 1px) 25%);
  opacity: .75;
}
.polosa i { display: block; height: 100%; background: var(--sdelano);
            border-radius: 999px; transition: width .4s ease; }
.polosa i.trevoga { background: var(--srochno); }

/* строка сервера: имя, процент крупно, полоса занятости, приписка */
.server { padding: var(--p3) 0; border-top: 1px solid var(--kraj); }
.server:first-child { border-top: 0; padding-top: 0; }
.server-verh { display: flex; justify-content: space-between; gap: var(--p3); align-items: baseline; }
.server-imya { font-weight: 650; font-size: var(--t-telo); }
.server-cifra { font: 700 var(--t-krupno)/1 var(--cifry); color: var(--tekst);
                letter-spacing: -.03em; white-space: nowrap; }
.server-cifra.gorit { color: var(--srochno); }
.server-niz { color: var(--tekst-tikho); font-size: var(--t-tikho); margin-top: var(--p2); }

/* ── агенты ───────────────────────────────────────────────────────────────── */

/* ── офис агентов: оргсхема — Руководитель сверху, под ним отделы ─────────── */

.ofis-shapka { margin-bottom: var(--p5); }
.ofis-komu { display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
             margin-top: var(--p3); min-height: 32px; font-size: 14px; }
.ofis-komu .pro { color: var(--tekst-tikho); margin-right: var(--p1); font-size: var(--t-tikho); }
.chip { font-size: var(--t-tikho); font-weight: 600; padding: 11px 13px; border-radius: 999px; cursor: pointer;
        border: 1px solid var(--kraj); background: var(--fon-pole); color: var(--tekst);
        transition: border-color .18s, color .18s, background .18s; }
.chip:hover { border-color: var(--kraj-yarko); }
.chip.vybrana { border-color: var(--akcent); color: var(--akcent-tekst); background: var(--akcent); }

.poruchenie { border-color: var(--kraj-yarko); }

/* оргсхема */
.ofis-plan { display: flex; flex-direction: column; gap: var(--p5); margin-bottom: var(--p4); }
.glava-mesto { position: relative; padding-bottom: var(--p5); }
/* линия от Руководителя вниз, к отделам */
.glava-mesto::after {
  content: ""; position: absolute; left: 50%; bottom: 0; width: 2px; height: var(--p5);
  background: linear-gradient(var(--akcent), var(--kraj)); transform: translateX(-1px);
}
.otdel { position: relative; padding-left: var(--p4); }
/* рейка отдела */
.otdel::before {
  content: ""; position: absolute; left: 3px; top: 24px; bottom: 4px; width: 2px;
  border-radius: 2px; background: var(--kraj);
}
.otdel-imya { margin: 0 0 var(--p3); font: 700 11px/1 var(--cifry);
  letter-spacing: .18em; text-transform: uppercase; color: var(--tekst-tikho);
  display: flex; align-items: center; gap: var(--p2); }
.otdel-imya::before {
  content: ""; width: 9px; height: 9px; border-radius: 3px; background: var(--kraj-yarko);
  margin-left: -17px; flex: none;
}
.otdel-schet { font: 700 10px/1 var(--cifry); color: var(--tekst-tikho);
  border: 1px solid var(--kraj); border-radius: 999px; padding: 4px 7px; letter-spacing: .06em; }
.otdel-stoly { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
               gap: var(--p3); }

.stol { position: relative; background: var(--fon-karty); border: 1px solid var(--kraj);
        border-radius: var(--r3); padding: var(--p4) var(--p4) var(--p3); display: flex;
        flex-direction: column; box-shadow: var(--ten-1);
        transition: border-color .2s, box-shadow .2s, transform .2s; }
.stol.podhodit { border-color: var(--akcent); transform: translateY(-2px);
                 box-shadow: 0 0 0 3px color-mix(in srgb, var(--akcent) 22%, transparent); }
.stol.trevoga { border-color: color-mix(in srgb, var(--srochno) 60%, var(--kraj)); }
.stol.rabotaet { border-color: color-mix(in srgb, var(--akcent) 45%, var(--kraj)); }
/* Руководитель — единственный стол во всю ширину, это верх оргсхемы */
.stol.glava { grid-column: 1 / -1; border-color: var(--kraj-yarko);
              background: linear-gradient(180deg,
                color-mix(in srgb, var(--akcent) 7%, var(--fon-karty)), var(--fon-karty)); }
.stol-dver { font: 700 11px/1 var(--cifry); letter-spacing: .16em; text-transform: uppercase;
             color: var(--tekst-tikho); display: flex; justify-content: space-between; gap: var(--p2); }
.stol-lico { display: flex; gap: var(--p3); align-items: center; margin: var(--p3) 0; }
.stol-znak { width: 48px; height: 48px; flex: none; border-radius: var(--r2); display: grid;
             place-items: center; background: var(--fon-pole); border: 1px solid var(--kraj);
             color: var(--tekst-tikho); position: relative;
             transition: color .2s, border-color .2s, background .2s; }
.stol-znak svg { width: 24px; height: 24px; }
.stol.rabotaet .stol-znak { color: var(--akcent); border-color: var(--akcent);
             background: color-mix(in srgb, var(--akcent) 12%, var(--fon-pole)); }
.stol.trevoga .stol-znak { color: var(--srochno); border-color: var(--srochno);
             background: color-mix(in srgb, var(--srochno) 12%, var(--fon-pole)); }
.stol.glava .stol-znak { color: var(--akcent); }
.stol-imya { font-size: var(--t-imya); font-weight: 700; letter-spacing: -.01em; }
.stol-sost { font-size: var(--t-tikho); color: var(--tekst-tikho); display: flex;
             align-items: center; gap: 6px; margin-top: 3px; }
.lampa { width: 8px; height: 8px; border-radius: 50%; background: var(--tekst-tikho); flex: none; }
.svoboden .lampa { background: var(--sdelano);
                   box-shadow: 0 0 0 3px color-mix(in srgb, var(--sdelano) 20%, transparent); }
.rabotaet .lampa, .zhdet .lampa { background: var(--akcent);
                   box-shadow: 0 0 0 3px color-mix(in srgb, var(--akcent) 22%, transparent);
                   animation: migaet 1.4s ease-in-out infinite; }
.trevoga .lampa { background: var(--srochno);
                   box-shadow: 0 0 0 3px color-mix(in srgb, var(--srochno) 22%, transparent); }
.novyj .lampa { background: transparent; border: 1px solid var(--tekst-tikho); box-shadow: none; }
.rabotaet .stol-sost { color: var(--akcent); }
.trevoga .stol-sost { color: var(--srochno); }
@keyframes migaet { 50% { opacity: .25; } }
.pechataet { display: inline-flex; gap: 3px; margin-left: var(--p1); }
.pechataet i { width: 4px; height: 4px; border-radius: 50%; background: currentColor;
               animation: migaet 1s infinite; }
.pechataet i:nth-child(2) { animation-delay: .2s; }
.pechataet i:nth-child(3) { animation-delay: .4s; }
.stol-itog { font-size: 14px; line-height: 1.45; margin-bottom: var(--p2); flex: 1;
             padding: var(--p3); border-radius: var(--r2); background: var(--fon-pole); }
.stol-itog .kogda { color: var(--tekst-tikho); font: 11px/1.4 var(--cifry);
                    display: block; margin-bottom: var(--p1); letter-spacing: .06em; }
.stol-chto { font-size: var(--t-tikho); color: var(--tekst-tikho); margin-bottom: var(--p2);
             flex: 1; line-height: 1.5; }
.stol-niz { font-size: var(--t-melko); color: var(--tekst-tikho); border-top: 1px dashed var(--kraj);
            padding-top: var(--p2); display: flex; justify-content: space-between;
            gap: var(--p2); flex-wrap: wrap; }
.stol-idei { color: var(--akcent); cursor: pointer; background: none; border: 0; padding: 0;
             font: inherit; text-decoration: underline; text-underline-offset: 2px; }
.stol-knopki { display: flex; gap: var(--p2); margin-top: var(--p3); }
.stol-knopki .knopka { flex: 1; }
.lenta li { display: flex; gap: var(--p3); align-items: baseline; font-size: 14px; }
.lenta .kogda { font: 11px/1.5 var(--cifry); color: var(--tekst-tikho); min-width: 112px;
                letter-spacing: .04em; }
.ofis-podval { margin: var(--p1) 2px var(--p5); line-height: 1.6; }

/* ── разбор ───────────────────────────────────────────────────────────────── */

.vopros-imya { font-size: var(--t-telo); font-weight: 650; margin: var(--p4) 0 var(--p2); }
.ocenka { display: flex; gap: var(--p2); }
.ocenka button { flex: 1; height: 58px; font: 700 18px/1 var(--cifry);
                 background: var(--fon-pole); color: var(--tekst);
                 border: 1px solid var(--kraj); border-radius: var(--r2); cursor: pointer;
                 transition: background .18s, border-color .18s, color .18s; }
.ocenka button:hover { border-color: var(--kraj-yarko); }
.ocenka button.vybrana { background: var(--akcent); color: var(--akcent-tekst);
                         border-color: var(--akcent); }
.den-nedeli { padding: var(--p3) 0; border-top: 1px solid var(--kraj); font-size: var(--t-telo); }
.den-nedeli:first-child { border-top: 0; }
.den-imya { font: 700 var(--t-tikho)/1 var(--cifry); color: var(--tekst-tikho); margin-bottom: var(--p1); }

/* ── «ещё» ────────────────────────────────────────────────────────────────── */

.eshche-spisok { display: flex; flex-direction: column; gap: var(--p2); }
.eshche-punkt { background: var(--fon-karty); border: 1px solid var(--kraj);
                border-radius: var(--r2); padding: var(--p4); cursor: pointer; text-align: left;
                color: inherit; min-height: 76px; box-shadow: var(--ten-1);
                transition: border-color .18s, transform .1s; }
.eshche-punkt:hover { border-color: var(--kraj-yarko); }
.eshche-punkt:active { transform: scale(.995); }
.eshche-imya { font-size: var(--t-imya); font-weight: 650; }
.eshche-chto { font-size: var(--t-tikho); color: var(--tekst-tikho); margin-top: 3px; }

/* ── окно ─────────────────────────────────────────────────────────────────── */

.okno { position: fixed; inset: 0; background: rgba(0,0,0,.6); z-index: 40;
        display: flex; align-items: flex-end; justify-content: center;
        backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
        animation: okno-fon .18s ease-out; }
.okno-karta { background: var(--fon-karty); border: 1px solid var(--kraj);
              border-top-color: var(--kraj-yarko);
              border-radius: var(--r5) var(--r5) 0 0;
              padding: var(--p4) var(--p4) calc(var(--p5) + var(--niz));
              width: 100%; max-width: var(--kolonka); max-height: 88vh; overflow: auto;
              box-shadow: var(--ten-2); animation: okno-vverh .22s cubic-bezier(.2,.8,.3,1); }
/* ручка сверху — видно, что окно тянется вниз */
.okno-karta::before {
  content: ""; display: block; width: 40px; height: 4px; border-radius: 2px;
  background: var(--kraj-yarko); margin: 0 auto var(--p3);
}
@keyframes okno-fon { from { opacity: 0 } }
@keyframes okno-vverh { from { transform: translateY(18px); opacity: .4 } }
.zakryt { float: right; position: relative; z-index: 3; margin-left: var(--p2); min-height: 44px; padding: 0 var(--p3); background: var(--fon-pole);
          border: 1px solid var(--kraj); border-radius: var(--r1); color: var(--tekst-tikho);
          font-size: var(--t-tikho); font-weight: 600; cursor: pointer; }
.zakryt:hover { color: var(--tekst); border-color: var(--kraj-yarko); }
/* Заголовок окна обтекает «Закрыть», а всё остальное встаёт под ней: поле с микрофоном
   ложилось поверх кнопки, и она не нажималась (29.09.2026). */
#okno-telo > :first-child:not(h3):not(h2) { clear: both; }
.otvet { font-size: var(--t-imya); line-height: 1.55; white-space: pre-wrap; margin: 6px 0 var(--p1); }
.otvet-kto { color: var(--tekst-tikho); font-size: var(--t-tikho); margin-bottom: var(--p4); }
.istochnik { border-top: 1px solid var(--kraj); padding: var(--p3) 0; }
.istochnik-imya { font-weight: 650; font-size: var(--t-telo); }
.istochnik-kusok { color: var(--tekst-tikho); font-size: 14px; margin-top: var(--p1); }
.oshibka { color: var(--srochno); font-size: 14px; margin-top: var(--p2); min-height: 20px; }
pre.zadanie, pre.svodka-tekst {
  white-space: pre-wrap; background: var(--fon-pole); border: 1px solid var(--kraj);
  border-radius: var(--r2); padding: var(--p4); font-size: var(--t-tikho); line-height: 1.55;
  overflow-x: auto;
}
a { color: var(--akcent); }

/* ── нижние вкладки ───────────────────────────────────────────────────────── */

.nizhnyaya {
  flex: 0 0 auto; z-index: 30; display: flex;
  background: var(--fon);
  background: color-mix(in srgb, var(--fon) 88%, transparent);
  backdrop-filter: saturate(160%) blur(16px);
  -webkit-backdrop-filter: saturate(160%) blur(16px);
  border-top: 1px solid var(--kraj);
  /* 20.09.2026: полоса сидела высоко — под ней был полный запас айфона (~34px).
     Оставляем часть: домашняя полоска не перекрывает вкладки, а экрана отдаём больше. */
  padding-bottom: max(2px, calc(var(--niz) - 16px));
  /* все разделы в одной полосе: листается пальцем вбок, «Ещё» не нужно */
  overflow-x: auto; overflow-y: hidden; scroll-snap-type: x proximity;
  scrollbar-width: none; -ms-overflow-style: none; overscroll-behavior-x: contain;
  /* 20.09.2026 — плавность листания:
     touch-action: pan-x — браузер не ждёт, в какую сторону повёлся палец, полоса трогается сразу;
     -webkit-overflow-scrolling — выбег по инерции на старых айфонах (на новых он и так есть);
     scroll-padding — прилипшая вкладка не упирается в край;
     will-change — полоса со размытым фоном едет отдельным слоем и не перерисовывает шапку. */
  touch-action: pan-x;
  -webkit-overflow-scrolling: touch;
  scroll-padding-inline: var(--p3);
  will-change: scroll-position;
}
.nizhnyaya::-webkit-scrollbar { display: none; }
.vkladka { flex: 0 0 auto; min-width: 74px; scroll-snap-align: center; min-height: 52px; background: none; border: 0; cursor: pointer;
           color: var(--tekst-tikho); font-size: 11px; font-weight: 600;
           padding: 4px 2px 3px; position: relative;
           display: flex; flex-direction: column; align-items: center; justify-content: center;
           gap: 2px; transition: color .18s; }
.vkladka .ikonka { width: 20px; height: 20px; display: block; }
.vkladka.vybrana { color: var(--akcent); }
/* выбранная вкладка — янтарная риска сверху, как метка на пульте */
.vkladka.vybrana::before {
  content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 26px; height: 3px; border-radius: 0 0 3px 3px; background: var(--akcent);
}
/* счётчик — кружок у иконки, а не число над словом */
.vkladka .znak { position: absolute; top: 6px; left: 50%; margin-left: 5px;
                 min-width: 17px; height: 17px; padding: 0 4px; border-radius: 999px;
                 font: 700 10px/17px var(--cifry); color: #fff; background: var(--srochno);
                 text-align: center; }
.vkladka .znak:empty { display: none; }

/* ── вход ─────────────────────────────────────────────────────────────────── */

.vhod { position: fixed; inset: 0; display: flex; align-items: center;
        justify-content: center; padding: var(--p5); }
.vhod-karta { width: 100%; max-width: 348px; background: var(--fon-karty);
              border: 1px solid var(--kraj); border-radius: var(--r4);
              padding: var(--p6) var(--p5); box-shadow: var(--ten-2); }
.vhod-imya { font: 700 13px/1 var(--cifry); letter-spacing: .24em; color: var(--tekst);
             margin-bottom: var(--p5);
             display: flex; align-items: center; justify-content: center; gap: var(--p2); }
.vhod-imya::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--akcent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--akcent) 22%, transparent);
}
.vhod-karta input { width: 100%; height: 52px; padding: 0 var(--p4); font-size: 16px;
                    background: var(--fon-pole); color: var(--tekst);
                    border: 1px solid var(--kraj); border-radius: var(--r2); }
.vhod-karta input:focus { outline: none; border-color: var(--akcent); box-shadow: var(--sijanie); }
.vhod-karta input + input { margin-top: var(--p2); }
.vhod-karta .knopka:not(.glavnaya-knopka) { width: 100%; margin-top: var(--p2); }
.rezerv { font: 600 var(--t-telo)/1.9 var(--cifry); letter-spacing: .06em; columns: 2;
          margin: var(--p2) 0 var(--p1); }
.sekret { font: 600 var(--t-telo)/1.5 var(--cifry); letter-spacing: .12em; word-break: break-all;
          margin: 6px 0 var(--p2); }

/* ── широкий экран ────────────────────────────────────────────────────────── */

@media (min-width: 900px) {
  /* 20.09.2026: меню держится внизу экрана и на большом мониторе — так просил
     владелец. Раньше оно превращалось в боковую рейку слева. */
  .nizhnyaya { justify-content: center; gap: var(--p2); padding-left: var(--p4);
               padding-right: var(--p4); }
  .vkladka { min-width: 96px; max-width: 132px; flex: 1 1 auto; }
  .vkladka:hover { color: var(--tekst); }
  .shapka { padding-left: var(--p6); padding-right: var(--p6); }
  .okno { align-items: center; padding: var(--p5); }
  .okno-karta { border-radius: var(--r4); max-height: 84vh; }
  .okno-karta::before { display: none; }
  .plitki { grid-template-columns: repeat(4, 1fr); gap: var(--p3); }
  .plitki.dolgi-itog { grid-template-columns: repeat(2, 1fr); }
  main { padding: var(--p6) var(--p5); }
  .privet-tekst { font-size: 36px; }
}

/* на большом экране колонка карточек в одну нитку оставляла полэкрана пустым —
   «Утро», «Радар» и «Разбор» расходятся на две колонки, а шапка и плитки
   остаются во всю ширину */
@media (min-width: 1180px) {
  .razdel[data-razdel="utro"], .razdel[data-razdel="radar"], .razdel[data-razdel="razbor"] {
    display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--p3); align-content: start;
  }
  .razdel[data-razdel="utro"].skryto, .razdel[data-razdel="radar"].skryto,
  .razdel[data-razdel="razbor"].skryto { display: none; }
  .razdel[data-razdel="utro"] > .privet,
  .razdel[data-razdel="utro"] > .plitki,
  .razdel[data-razdel="utro"] > #karta-glavnoe,
  .razdel[data-razdel="radar"] > .karta:first-child { grid-column: 1 / -1; }
  .razdel[data-razdel="utro"] > .karta,
  .razdel[data-razdel="radar"] > .karta,
  .razdel[data-razdel="razbor"] > .karta { align-self: start; }
}

.knopka:disabled { opacity: .45; cursor: default; transform: none; }
.knopka:disabled:hover { background: var(--fon-pole); border-color: var(--kraj); }

/* ── движение по желанию системы ──────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .lampa, .pechataet i { animation: none !important; }
  .stol, .plitka, .zapis, .knopka { transition: none; }
  .okno, .okno-karta { animation: none; }
  .slushaet .golos-volna { animation: none; opacity: .9; }
  .stolbik .zapolnenie, .polosa i { transition: none; }
}

/* ── Хелпер ─────────────────────────────────────────────────────────────────── */
.maks-pult { display: flex; flex-direction: column; align-items: center; gap: var(--p3);
  margin: var(--p4) 0 var(--p5); }
.maks-mikrofon { position: relative; width: 108px; height: 108px; border-radius: 50%;
  border: 1px solid var(--kraj-yarko); background: var(--fon-karty); color: var(--akcent);
  cursor: pointer; box-shadow: var(--sijanie); display: grid; place-items: center;
  -webkit-tap-highlight-color: transparent; }
.maks-mikrofon svg { width: 42px; height: 42px; position: relative; z-index: 1; }
.maks-mikrofon:focus-visible { outline: 2px solid var(--akcent); outline-offset: 4px; }
.maks-volna { position: absolute; inset: -3px; border-radius: 50%; pointer-events: none; }
.maks-pult.slushaet .maks-mikrofon { color: var(--srochno); border-color: var(--srochno); }
.maks-pult.slushaet .maks-volna { border: 2px solid var(--srochno); animation: golos-volna 1.6s ease-out infinite; }
.maks-pult.dumaet .maks-volna { border: 2px dashed var(--kraj-yarko); animation: maks-krug 2.4s linear infinite; }
.maks-pult.govorit .maks-mikrofon { color: var(--akcent-tekst); background: var(--akcent); }
.maks-pult.govorit .maks-volna { border: 2px solid var(--akcent); animation: golos-volna 1.1s ease-out infinite; }
@keyframes maks-krug { to { transform: rotate(360deg); } }
.maks-sost { min-height: 1.4em; text-align: center; color: var(--tekst-tikho); font-size: var(--t-tikho); }
.maks-sost.oshibka { color: var(--srochno); }
.maks-razgovor { display: inline-flex; align-items: center; gap: var(--p2); font-size: var(--t-tikho);
  color: var(--tekst-tikho); cursor: pointer; }
.maks-lenta { display: flex; flex-direction: column; gap: var(--p2); }
.maks-lenta:empty { display: none; }
.maks-replika { max-width: 88%; padding: var(--p2) var(--p3); border-radius: var(--r2); line-height: 1.5;
  overflow-wrap: anywhere; }
.maks-replika.ya { align-self: flex-end; background: var(--fon-pole); }
.maks-replika.maks { align-self: flex-start; background: var(--fon-verh); border: 1px solid var(--kraj); }
.maks-replika .kanal { display: block; font-size: 11px; color: var(--tekst-tikho); margin-bottom: 2px; }
.maks-zadanie { margin-top: var(--p2); display: flex; flex-wrap: wrap; gap: var(--p2); align-items: center; }
.maks-zadanie .tikho { flex-basis: 100%; }
.maks-zadanie .knopka { flex: 0 0 auto; width: auto; margin: 0; min-height: 40px; padding: 0 var(--p4); }
.maks-forma { display: flex; gap: var(--p2); margin-top: var(--p3); }
.maks-forma .pole { flex: 1 1 auto; width: auto; min-width: 0; }
.maks-forma .knopka { flex: 0 0 auto; width: auto; margin: 0; }
@media (prefers-reduced-motion: reduce) {
  .maks-pult .maks-volna { animation: none !important; opacity: .9; }
}

/* ══ ОБЛИК «ПУЛЬТ В КЕЙСЕ» (30.09.2026, выбор Дмитрия: A «Пульт» + B «Кейс») ══════════
   Слоем поверх старого оформления: откатить облик — удалить блок до конца файла.
   Пульт: каналы с индикатором уровня, огоньки состояния, подпись маркером на скотче.
   Кейс: гаффер-тейп на заголовках карт, алюминиевая кромка и шаровой уголок, трафарет.
   Режимы прежние: сцена (графит и жёлтый тейп), день (матовый алюминий), ночь (тусклый красный). */

:root, :root[data-tema="stage"] {
  --fon: #121416; --fon-karty: #1a1d20; --fon-pole: #202428; --kraj: #2b3035; --tekst: #e8eaec;
  --tekst-tikho: #8e979f; --akcent: #f6c400; --akcent-tekst: #141414; --srochno: #ff4b3a;
  --sdelano: #36d67a; --setka: #2b3136; --fon-verh: #1f2327; --kraj-yarko: #3b4249;
  --led: #ffb020; --skotch: #f1eee4; --skotch-tekst: #1d1d1d; --akcent-slovo: #f6c400;
  --alu: linear-gradient(180deg, #d5d8dc, #7d838a);
  --faktura: rgba(255,255,255,.028);
  --ten-1: 0 1px 0 rgba(255,255,255,.04) inset, 0 1px 2px rgba(0,0,0,.45);
  --ten-2: 0 1px 0 rgba(255,255,255,.05) inset, 0 12px 28px -14px rgba(0,0,0,.8);
  --sijanie: 0 0 0 1px color-mix(in srgb, var(--akcent) 45%, transparent), 0 0 18px -6px var(--akcent);
}
:root[data-tema="daylight"] {
  --fon: #d7dade; --fon-karty: #f1f2f3; --fon-pole: #e3e6e9; --kraj: #bcc2c8; --tekst: #15181b;
  --tekst-tikho: #56606a; --akcent: #f2c200; --akcent-tekst: #141414; --srochno: #d32f1f;
  --sdelano: #1b9150; --setka: #c3c9ce; --fon-verh: #f7f8f9; --kraj-yarko: #a6aeb6;
  --led: #d07a00; --skotch: #fbfaf5; --skotch-tekst: #1d1d1d; --akcent-slovo: #7a5a00;
  --alu: linear-gradient(180deg, #ffffff, #9aa1a8);
  --faktura: rgba(0,0,0,.035);
  --ten-1: 0 1px 0 rgba(255,255,255,.8) inset, 0 1px 2px rgba(20,30,45,.14);
  --ten-2: 0 1px 0 rgba(255,255,255,.8) inset, 0 12px 26px -16px rgba(20,30,45,.35);
}
:root[data-tema="nightvision"] {
  --fon: #0b0707; --fon-karty: #140c0c; --fon-pole: #1b1110; --kraj: #2c1715; --tekst: #d9a99f;
  --tekst-tikho: #a8705f; --akcent: #cc5a37; --akcent-tekst: #120807; --srochno: #ff5a3c;
  --sdelano: #a8773f; --setka: #2a1614; --fon-verh: #180f0e; --kraj-yarko: #3d201c;
  --led: #ff5a3c; --skotch: #3b2521; --skotch-tekst: #e0b0a6; --akcent-slovo: #e07a5c;
  --alu: linear-gradient(180deg, #5c4a44, #2b201d);
  --faktura: rgba(255,120,90,.025);
  --ten-1: 0 1px 2px rgba(0,0,0,.6); --ten-2: 0 12px 28px -14px rgba(0,0,0,.9);
  --sijanie: 0 0 0 1px color-mix(in srgb, var(--akcent) 45%, transparent);
}
:root {
  --r1: 8px; --r2: 10px; --r3: 12px; --r4: 16px; --r5: 22px;
  --cifry: "JetBrains Mono", ui-monospace, Menlo, monospace;
  --trafaret: "Russo One", "Onest", system-ui, sans-serif;
  --pribor: "Tektur", "JetBrains Mono", ui-monospace, monospace;
  --marker: "Caveat", "Marker Felt", cursive;
}

html:not(.perehod) body { transition: none; }
/* жёлтый тейп — фон; как цвет текста, ссылок и рамки фокуса — свой оттенок, иначе днём не видно */
:focus-visible { outline-color: var(--akcent-slovo); }
a { color: var(--akcent-slovo); }

/* фактура ламината кейса — еле заметные точки по фону */
body {
  font-family: "Onest", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background-color: var(--fon);
  background-image: radial-gradient(var(--faktura) 1px, transparent 1.3px);
  background-size: 6px 6px;
}
.shapka { background: color-mix(in srgb, var(--fon) 90%, transparent); border-bottom: 2px solid transparent;
  border-image: var(--alu) 1; }
.shapka-imya { font: 400 15px/1 var(--trafaret); letter-spacing: .12em; }
.shapka-imya::before { background: var(--led); box-shadow: 0 0 8px var(--led), 0 0 0 3px color-mix(in srgb, var(--led) 22%, transparent); }
.temy button { font-family: var(--trafaret); font-weight: 400; }
.temy button.vybrana { box-shadow: 0 0 10px -2px var(--akcent), inset 0 -2px 0 rgba(0,0,0,.25); }

/* заголовок раздела трафаретом, дата — маркером на скотче */
.privet-tekst { font-family: var(--trafaret); font-weight: 400; letter-spacing: .01em; line-height: 1.08; }
.privet-data {
  display: inline-block; margin-top: var(--p2); padding: 3px 10px 1px; transform: rotate(-1.2deg);
  font: 700 19px/1.15 var(--marker); letter-spacing: 0; color: var(--skotch-tekst);
  background: var(--skotch); box-shadow: 0 1px 0 rgba(0,0,0,.28);
}

/* карта — алюминиевая кромка кейса */
.karta {
  border: 1px solid var(--kraj); border-radius: var(--r3);
  box-shadow: var(--ten-1), 0 -1px 0 0 color-mix(in srgb, var(--kraj-yarko) 60%, transparent) inset;
}
/* заголовок карты — полоска гаффер-тейпа */
.karta-imya {
  display: inline-flex; width: max-content; max-width: 100%;
  font: 400 11px/1 var(--trafaret); letter-spacing: .12em; color: var(--akcent-tekst);
  background: var(--akcent); padding: 6px 10px 5px; transform: rotate(-.8deg);
  clip-path: polygon(1.5% 0, 100% 5%, 98.5% 100%, 0 95%);
}
.karta-imya .tikho { color: inherit; opacity: .75; font-family: "Onest", sans-serif; letter-spacing: 0; }
.karta.gorit > .karta-imya { color: #fff; background: var(--srochno); }
summary.karta-imya { list-style: none; }
.zhurnal > summary.karta-imya { display: inline-flex; min-height: 0; }
.zhurnal > summary.karta-imya::after { color: inherit; margin-left: 10px; }

/* плитка — канал микшера: шкала уровня слева, цифра на табло, шаровой уголок */
.plitka {
  border-radius: var(--r2); padding-left: calc(var(--p4) + 8px);
  background: linear-gradient(180deg, color-mix(in srgb, var(--fon-karty) 92%, #fff 8%), var(--fon-karty) 40%);
}
.plitka::before {
  left: 8px; right: auto; top: 12px; bottom: 12px; width: 4px; height: auto; border-radius: 2px;
  background: linear-gradient(to top, var(--sdelano) 0 22%, color-mix(in srgb, var(--kraj-yarko) 70%, transparent) 22%);
}
.plitka.gorit::before {
  background: linear-gradient(to top, var(--sdelano) 0 50%, var(--led) 50% 78%, var(--srochno) 78%);
  box-shadow: 0 0 8px -1px var(--srochno);
}
.plitka::after {
  content: ""; position: absolute; right: 7px; top: 7px; width: 9px; height: 9px; border-radius: 50%;
  background: var(--alu); box-shadow: 0 1px 1px rgba(0,0,0,.4);
}
.plitka-cifra { font-family: var(--pribor); font-weight: 800; letter-spacing: -.01em; }
.dolgi-itog .plitka-cifra { font-size: var(--t-krupno); }

/* «Первым делом» — огоньки вместо номеров в квадратиках */
#glavnoe li::before {
  color: var(--akcent-tekst); background: var(--srochno); border-radius: 50%;
  box-shadow: 0 0 8px -1px var(--srochno); font-family: var(--cifry);
}

/* кнопки — аппаратные: светлая грань сверху, вдавливаются */
.knopka {
  border-radius: var(--r2);
  background: linear-gradient(180deg, color-mix(in srgb, var(--fon-pole) 85%, #fff 15%), var(--fon-pole));
  box-shadow: 0 1px 0 rgba(255,255,255,.05) inset, 0 1px 2px rgba(0,0,0,.35);
}
.knopka:active { transform: none; box-shadow: 0 2px 4px rgba(0,0,0,.45) inset; }
.glavnaya-knopka {
  background: var(--akcent); color: var(--akcent-tekst); font-weight: 800; letter-spacing: .01em;
  box-shadow: 0 1px 0 rgba(255,255,255,.35) inset, 0 2px 0 color-mix(in srgb, var(--akcent) 55%, #000), 0 6px 16px -8px var(--akcent);
}
.glavnaya-knopka:active { box-shadow: 0 2px 5px rgba(0,0,0,.35) inset; transform: translateY(1px); }
:root[data-tema="daylight"] .knopka:not(.glavnaya-knopka) { background: linear-gradient(180deg, #ffffff, var(--fon-pole)); }

/* поля — утоплены в панель */
.pole:not(:focus), .sprosit input:not(:focus) { box-shadow: 0 1px 3px rgba(0,0,0,.35) inset; }
:root[data-tema="daylight"] .pole:not(:focus), :root[data-tema="daylight"] .sprosit input:not(:focus) { box-shadow: 0 1px 2px rgba(20,30,45,.14) inset; }

/* нижняя полоса — профиль кейса; выбранная вкладка светится, как нажатая кнопка */
.nizhnyaya { border-top: 2px solid transparent; border-image: var(--alu) 1; }
.vkladka.vybrana { color: var(--akcent-slovo); }
.vkladka.vybrana::before { width: 30px; height: 3px; background: var(--led); box-shadow: 0 0 10px var(--led); }
.vkladka.vybrana .ikonka { filter: drop-shadow(0 0 5px color-mix(in srgb, var(--akcent) 70%, transparent)); }
.vkladka .znak { background: var(--srochno); box-shadow: 0 0 8px -1px var(--srochno); }

/* дела: круг «сделано» — как кнопка с подсветкой */
.galka { border-radius: 50%; }
.galka.gotovo { box-shadow: 0 0 10px -2px var(--sdelano); }
.kal-den.segodnya { box-shadow: 0 0 10px -3px var(--led); border-color: var(--led); }
.kal-den.segodnya .kal-chislo { color: var(--led); }
.zakladka.vybrana { box-shadow: 0 1px 0 rgba(255,255,255,.05) inset, 0 0 0 1px var(--kraj-yarko); }

/* ночью — ничего не светится ярко: убираем ореолы */
:root[data-tema="nightvision"] .plitka.gorit::before, :root[data-tema="nightvision"] #glavnoe li::before,
:root[data-tema="nightvision"] .vkladka.vybrana::before, :root[data-tema="nightvision"] .shapka-imya::before,
:root[data-tema="nightvision"] .vkladka .znak, :root[data-tema="nightvision"] .glavnaya-knopka { box-shadow: none; }
:root[data-tema="nightvision"] .vkladka.vybrana .ikonka { filter: none; }
:root[data-tema="nightvision"] .karta.gorit > .karta-imya { color: #120807; }

.pokupka { display: flex; align-items: center; gap: var(--p3); padding: var(--p2) 0; border-top: 1px solid var(--kraj); }
.pokupki-razdel .pokupka:first-of-type { border-top: 0; }
.pokupka .galka { width: 44px; min-width: 44px; height: 44px; }
.pokupka-imya { flex: 1; min-width: 0; font-size: var(--t-imya); overflow-wrap: anywhere; }
.pokupka.gotovo .pokupka-imya { color: var(--tekst-tikho); text-decoration: line-through; }
.pokupka-ubrat { width: 44px; height: 44px; border: 0; background: none; color: var(--tekst-tikho); font-size: 22px; cursor: pointer; border-radius: var(--r2); }
.pokupka-ubrat:hover { color: var(--srochno); }
.pogoda-stroka { margin-top: var(--p2); font: 600 var(--t-tikho)/1.3 var(--cifry); color: var(--tekst-tikho); }
@media (prefers-reduced-motion: reduce) { .karta-imya, .privet-data { transform: none; } }

/* 02.10.2026 — три облика; режим освещения независим от формы интерфейса. */
:root[data-oblik="montage"] {
  --trafaret: "Onest", system-ui, sans-serif; --pribor: "Onest", system-ui, sans-serif;
  --r1: 6px; --r2: 8px; --r3: 12px; --r4: 16px; --r5: 22px;
}
:root[data-oblik="ether"] {
  --trafaret: "Onest", system-ui, sans-serif; --pribor: "Onest", system-ui, sans-serif;
  --r1: 10px; --r2: 16px; --r3: 22px; --r4: 26px; --r5: 30px;
}
:root[data-oblik="montage"][data-tema="daylight"] {
  --fon: #f1f3f5; --fon-karty: #fff; --fon-pole: #e8edf4; --fon-verh: #f6f8fb;
  --tekst: #203039; --tekst-tikho: #526272; --kraj: #ced6e0; --kraj-yarko: #a7b7cb;
  --akcent: #2455d6; --akcent-tekst: #fff; --akcent-slovo: #214dbd; --led: #2455d6;
  --srochno: #b52d37; --sdelano: #24704e; --setka: #d3dce8;
}
:root[data-oblik="montage"][data-tema="stage"] {
  --fon: #17212e; --fon-karty: #202e3f; --fon-pole: #29394d; --fon-verh: #26364a;
  --tekst: #edf3fc; --tekst-tikho: #afbed1; --kraj: #40516a; --kraj-yarko: #61799b;
  --akcent: #a4c4ff; --akcent-tekst: #142339; --akcent-slovo: #a4c4ff; --led: #a4c4ff;
  --setka: #3a4d66;
}
:root[data-oblik="ether"][data-tema="stage"] {
  --fon: #26212b; --fon-karty: #332d3b; --fon-pole: #3e3647; --fon-verh: #393141;
  --tekst: #f3eee9; --tekst-tikho: #c8bfce; --kraj: #514759; --kraj-yarko: #786783;
  --akcent: #a9c7b8; --akcent-tekst: #20382f; --akcent-slovo: #b5d7c7; --led: #e4b89d;
  --srochno: #ffaaa2; --sdelano: #a9c7b8; --setka: #4b4054;
}
:root[data-oblik="ether"][data-tema="daylight"] {
  --fon: #efebf0; --fon-karty: #fcf9fc; --fon-pole: #e6e0e9; --fon-verh: #f4eff6;
  --tekst: #302637; --tekst-tikho: #685d70; --kraj: #cfc4d5; --kraj-yarko: #ac9bb5;
  --akcent: #3c6355; --akcent-tekst: #fff; --akcent-slovo: #355b4e; --led: #806048;
  --srochno: #ad3540; --sdelano: #3c6355; --setka: #d1c7d7;
}
/* Ночное зрение сохраняет тёплую приглушённую палитру во всех обликах. */
:root:is([data-oblik="montage"], [data-oblik="ether"]) body { background-image: none; }
:root:is([data-oblik="montage"], [data-oblik="ether"]) .shapka,
:root:is([data-oblik="montage"], [data-oblik="ether"]) .nizhnyaya {
  border-image: none; border-color: var(--kraj); border-width: 1px;
}
:root:is([data-oblik="montage"], [data-oblik="ether"]) .shapka-imya { font-weight: 800; letter-spacing: -.04em; }
:root:is([data-oblik="montage"], [data-oblik="ether"]) .privet-tekst { font-weight: 800; letter-spacing: -.035em; }
:root:is([data-oblik="montage"], [data-oblik="ether"]) .privet-data {
  background: none; box-shadow: none; transform: none; padding: 0;
  font: 400 16px/1.5 "Onest", sans-serif; color: var(--tekst-tikho);
}
:root:is([data-oblik="montage"], [data-oblik="ether"]) .karta { box-shadow: none; }
:root:is([data-oblik="montage"], [data-oblik="ether"]) .karta-imya {
  background: none; color: var(--tekst); clip-path: none; transform: none;
  padding: 0; font: 750 18px/1.3 "Onest", sans-serif; letter-spacing: -.02em; text-transform: none;
}
:root:is([data-oblik="montage"], [data-oblik="ether"]) .karta.gorit > .karta-imya { color: var(--srochno); background: none; }
:root:is([data-oblik="montage"], [data-oblik="ether"]) .plitka {
  background: var(--fon-karty); padding-left: calc(var(--p4) + 8px); box-shadow: none;
}
:root:is([data-oblik="montage"], [data-oblik="ether"]) .plitka::after { display: none; }
:root:is([data-oblik="montage"], [data-oblik="ether"]) .plitka::before {
  width: 3px; background: var(--akcent); box-shadow: none;
}
:root:is([data-oblik="montage"], [data-oblik="ether"]) .plitka.gorit::before { background: var(--srochno); }
:root:is([data-oblik="montage"], [data-oblik="ether"]) .knopka {
  background: var(--fon-pole); box-shadow: none; font-family: "Onest", sans-serif;
}
:root:is([data-oblik="montage"], [data-oblik="ether"]) .glavnaya-knopka { background: var(--akcent); color: var(--akcent-tekst); }
:root:is([data-oblik="montage"], [data-oblik="ether"]) .pole:not(:focus),
:root:is([data-oblik="montage"], [data-oblik="ether"]) .sprosit input:not(:focus) { box-shadow: none; }
:root:is([data-oblik="montage"], [data-oblik="ether"]) .vkladka.vybrana .ikonka { filter: none; }
:root:is([data-oblik="montage"], [data-oblik="ether"]) .vkladka.vybrana::before,
:root:is([data-oblik="montage"], [data-oblik="ether"]) .shapka-imya::before { box-shadow: none; }
:root[data-oblik="montage"] .zakladka.vybrana { background: var(--akcent); color: var(--akcent-tekst); box-shadow: none; }
:root[data-oblik="montage"] .glavnaya-knopka { border-radius: 8px; }
:root[data-oblik="ether"] .zakladka { border-radius: 18px; }
:root[data-oblik="ether"] .zakladka.vybrana { background: var(--akcent); color: var(--akcent-tekst); box-shadow: none; }
:root[data-oblik="ether"] .glavnaya-knopka { border-radius: 28px; }
:root[data-oblik="ether"] .privet { padding-top: 12px; padding-bottom: 12px; }
:root[data-oblik="ether"] .karta { border-color: color-mix(in srgb, var(--kraj) 55%, transparent); }

/* Карточки выбора показывают характер оформления даже до переключения. */
.oblik-zagolovok { margin: 0 0 8px; font: 750 22px/1.25 "Onest", sans-serif; color: var(--tekst); }
.oblik-podzagolovok { font: 700 16px/1.3 "Onest", sans-serif; margin: 24px 0 12px; }
.oblik-vybor { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; margin-top: 18px; }
.oblik-variant {
  appearance: none; text-align: left; color: var(--tekst); background: var(--fon-karty);
  border: 2px solid var(--kraj); border-radius: 16px; padding: 8px; cursor: pointer; min-width: 0;
  font: inherit; box-shadow: none;
}
.oblik-variant[aria-pressed="true"] { border-color: var(--akcent-slovo); outline: 1px solid var(--akcent-slovo); }
.oblik-variant:focus-visible { outline: 3px solid var(--akcent-slovo); outline-offset: 3px; }
.oblik-preview { display: flex; flex-direction: column; gap: 10px; border-radius: 9px; padding: 16px 12px; min-height: 172px; }
.preview-brand { font: 800 12px/1 "Onest", sans-serif; }
.preview-title { font: 800 18px/1.15 "Onest", sans-serif; margin: 6px 0 0; }
.preview-voice { display: block; padding: 10px; font: 700 14px/1.2 "Onest",sans-serif; border-radius: 6px; }
.preview-row { height: 6px; width: 85%; background: currentColor; opacity: .3; border-radius: 3px; }
.preview-row.short { width: 60%; }
.preview-rack { background: #25292b; color: #edf0ee; border: 1px solid #858b8f; }
.preview-rack .preview-title { font-family: "Russo One", sans-serif; font-weight: 400; }
.preview-rack .preview-voice { color: #201d13; background: #e4b347; }
.preview-montage { background: #f1f3f5; color: #203039; }
.preview-montage .preview-voice { color: white; background: #2455d6; }
.preview-ether { background: #26212b; color: #f3eee9; border-radius: 18px; }
.preview-ether .preview-voice { color: #20382f; background: #a9c7b8; border-radius: 22px; }
.oblik-nazvanie { display: flex; justify-content: space-between; gap: 6px; padding: 12px 4px 6px; font: 750 17px/1.25 "Onest",sans-serif; }
.oblik-galka { visibility: hidden; color: var(--akcent-slovo); }
.oblik-variant[aria-pressed="true"] .oblik-galka { visibility: visible; }
.oblik-opisanie { display: block; padding: 0 4px 8px; font: 400 13px/1.4 "Onest", sans-serif; color: var(--tekst-tikho); }
.oblik-rezhimy { display: flex; gap: 8px; flex-wrap: wrap; }
.oblik-rezhimy .knopka { min-height: 44px; margin: 0; flex: 1 1 120px; }
.oblik-rezhimy .knopka[aria-pressed="true"] { border-color: var(--akcent-slovo); color: var(--akcent-slovo); }
#oblik-status { margin: 14px 0 0; }
@media(max-width: 600px) {
  .oblik-vybor { grid-template-columns: 1fr; }
  .oblik-variant { display: grid; grid-template-columns: 116px 1fr; column-gap: 10px; align-items: center; }
  .oblik-preview { grid-row: span 2; min-height: 144px; padding: 12px 9px; gap: 8px; }
  .preview-title { font-size: 15px; }
  .oblik-nazvanie { align-self: end; padding-top: 0; }
  .oblik-opisanie { align-self: start; }
}

/* Исходный — прежний «Пульт в кейсе» без изменений. Рэк — отдельный новый облик. */
:root[data-oblik="rack"] { --trafaret: "Tektur", "Onest", sans-serif; --r2: 7px; --r3: 10px; }
:root[data-oblik="rack"][data-tema="stage"] {
  --fon: #202526; --fon-karty: #2b3032; --fon-pole: #24292b; --fon-verh: #343a3c;
  --tekst: #edf0ee; --tekst-tikho: #b5bdbd; --kraj: #626a6d; --kraj-yarko: #949d9f;
  --akcent: #e4b347; --akcent-tekst: #211c10; --akcent-slovo: #e9c16a; --led: #e4b347;
  --sdelano: #9ec6b4; --setka: #485154;
}
:root[data-oblik="rack"][data-tema="daylight"] {
  --fon: #dce1e2; --fon-karty: #f2f4f3; --fon-pole: #e0e5e5; --fon-verh: #fff;
  --tekst: #202728; --tekst-tikho: #4b595b; --kraj: #97a2a6; --kraj-yarko: #69777a;
  --akcent: #e4b347; --akcent-tekst: #211c10; --akcent-slovo: #715007; --led: #91640c;
}
:root[data-oblik="rack"] body { background-image: linear-gradient(90deg, transparent 49.8%, rgba(150,160,163,.035) 50%); background-size: 8px 8px; }
:root[data-oblik="rack"] .privet-tekst { font-weight: 700; letter-spacing: -.025em; }
:root[data-oblik="rack"] .privet-data {
  transform: none; background: none; box-shadow: none; padding: 0;
  font: 500 15px/1.4 "Onest", sans-serif; color: var(--tekst-tikho);
}
:root[data-oblik="rack"] .karta { border-top: 2px solid var(--kraj-yarko); box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 3px 8px rgba(0,0,0,.12); }
:root[data-oblik="rack"] .karta-imya {
  background: none; color: var(--tekst); clip-path: none; transform: none;
  padding: 0 0 0 10px; border-left: 3px solid var(--akcent);
  font: 650 18px/1.3 "Tektur", "Onest", sans-serif; letter-spacing: 0;
}
:root[data-oblik="rack"] .karta.gorit > .karta-imya { background: none; color: var(--srochno); border-color: var(--srochno); }
:root[data-oblik="rack"] .plitka::after { display: none; }
:root[data-oblik="rack"] .zakladka { border-radius: 5px; }
:root[data-oblik="rack"] .zakladka.vybrana { background: var(--kraj-yarko); color: var(--fon); box-shadow: inset 0 1px 0 rgba(255,255,255,.35); }
:root[data-oblik="rack"][data-tema="daylight"] .zakladka.vybrana { color: #fff; }
:root[data-oblik="rack"][data-tema="nightvision"] .zakladka.vybrana { color: var(--tekst); }
:root[data-oblik="rack"] .vkladka.vybrana .ikonka { filter: none; }
.preview-classic { background: #191d23; color: #edf0ee; border: 1px solid #46505b; }
.preview-classic .preview-title { font-family: "Russo One", sans-serif; font-weight: 400; }
.preview-classic .preview-voice { background: #f2c200; color: #141414; border-radius: 2px; transform: rotate(-1deg); }
.preview-rack .preview-title { font-family: "Tektur", "Onest",sans-serif; font-weight: 700; }
.preview-rack { border-top: 3px solid #a2abad; background: linear-gradient(135deg,#343c3e,#25292b); }

/* Итог смены: наследует цвета всех четырёх обликов. */
.smena-karta label { display: block; margin-top: 14px; }
.smena-karta input, .smena-karta textarea { width: 100%; box-sizing: border-box; min-width: 0; }
.smena-karta textarea { min-height: 80px; }
.smena-zhurnal { margin-top: 20px; }
.smena-zhurnal summary { cursor: pointer; padding: 12px 0; }
.smena-zapis { padding: 16px 0; border-top: 1px solid currentColor; overflow-wrap: anywhere; }
.smena-zapis h3, .smena-zapis h4 { margin: 10px 0 6px; }
.smena-tekst { white-space: pre-wrap; margin: 0 0 12px; }

.mesyac-cifry { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 18px 0; }
.mesyac-cifry strong { display: block; font-size: 28px; }
.mesyac-cifry span { display: block; font-size: 12px; overflow-wrap: anywhere; }
#itog-mesyac { display: block; max-width: 100%; box-sizing: border-box; margin: 8px 0; }

/* Название покупки открывает уточнение без дополнительной кнопки в строке. */
.pokupka-redaktirovat { display:block; width:100%; min-height:44px; padding:4px 0; border:0; background:none; color:inherit; font:inherit; text-align:left; cursor:pointer; overflow-wrap:anywhere; }
.pokupka-redaktirovat:hover { color:var(--akcent); }
.pokupka-redaktirovat:focus-visible { outline:2px solid var(--akcent); outline-offset:2px; border-radius:4px; }

.pokupki-filtry { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:8px; }
.pokupki-filtry .pole { flex:1 1 140px; min-width:0; width:0; margin:0; }
#pokupki-filter-reset[hidden] { display:none; }
#pokupki-filter-reset { margin-bottom:8px; }

.radar-toolbar{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:16px}.radar-toolbar>div{min-width:0}.radar-toolbar p{margin:0 0 8px}.radar-toolbar button{flex-shrink:0;min-height:44px}.radar-unknown{color:var(--tekst-tikho)!important}.radar-server-unknown{opacity:.85}[data-razdel="radar"] .pometka,[data-razdel="radar"] .server-niz,#radar-source,#radar-project-source,#radar-note{overflow-wrap:anywhere}#radar-project-source{font-size:12px}#radar-note:empty{display:none}@media(max-width:480px){.radar-toolbar{display:block}.radar-toolbar button{width:100%}[data-razdel="radar"] .kogda{white-space:normal;min-width:0;width:85px}}