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

/* ── три темы, как в 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;
}

/* дневной свет: чёрный экран на солнце нечитаем */
: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;
}

/* ночное зрение: белый срезан, синий убран — чтобы экран не сжигал адаптацию глаза */
: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;
}

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

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

body {
  margin: 0;
  background: var(--fon);
  color: var(--tekst);
  font: 16px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  padding-bottom: calc(68px + var(--niz));
  transition: background .2s, color .2s;
}

.skryto { display: none !important; }
.skryto-sovsem { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

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

.shapka {
  position: sticky; top: 0; z-index: 20;
  background: var(--fon);
  background: color-mix(in srgb, var(--fon) 94%, transparent);
  backdrop-filter: saturate(140%) blur(12px);
  border-bottom: 1px solid var(--kraj);
  padding: calc(10px + var(--verh)) 16px 10px;
}
.shapka-verh { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.shapka-imya { font: 600 13px/1 var(--cifry); letter-spacing: .22em; color: var(--tekst-tikho); }
.temy { display: flex; gap: 4px; }
.temy button {
  width: 30px; height: 30px; border-radius: 9px; cursor: pointer;
  border: 1px solid var(--kraj); background: var(--fon-pole); padding: 0;
  font: 600 11px/1 var(--cifry); color: var(--tekst-tikho);
}
.temy button.vybrana { border-color: var(--akcent); color: var(--akcent); }
.sprosit { display: flex; gap: 8px; }
.sprosit input {
  flex: 1; min-width: 0; height: 48px; padding: 0 14px; font-size: 16px;
  background: var(--fon-pole); color: var(--tekst);
  border: 1px solid var(--kraj); border-radius: 12px;
}
.sprosit input:focus { outline: none; border-color: var(--akcent); }

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

.knopka {
  min-height: 48px; padding: 0 16px; font-size: 15px; font-weight: 600;
  background: var(--fon-pole); color: var(--tekst);
  border: 1px solid var(--kraj); border-radius: 12px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
}
.knopka:active { transform: scale(.98); }
.glavnaya-knopka { background: var(--akcent); color: var(--akcent-tekst);
                   border-color: var(--akcent); width: 100%; margin-top: 12px; }
.vtoraya { font-weight: 500; }
.malaya { min-height: 40px; font-size: 13px; padding: 0 12px; }

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

main { padding: 16px; max-width: 860px; margin: 0 auto; }
.privet { margin-bottom: 16px; }
.privet-tekst { font-size: 26px; font-weight: 700; letter-spacing: -.01em; }
.privet-data { color: var(--tekst-tikho); font-size: 14px; margin-top: 2px; }

.karta {
  background: var(--fon-karty); border: 1px solid var(--kraj);
  border-radius: 16px; padding: 16px; margin-bottom: 14px;
}
.karta.gorit { border-color: var(--srochno); }
.karta-imya {
  font: 600 12px/1 var(--cifry); letter-spacing: .16em; text-transform: uppercase;
  color: var(--tekst-tikho); margin-bottom: 12px;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.tikho { color: var(--tekst-tikho); font-size: 12px; font-weight: 400;
         letter-spacing: 0; text-transform: none; }
.schet { font: 600 12px/1 var(--cifry); color: var(--akcent);
         border: 1px solid var(--akcent); border-radius: 999px; padding: 4px 8px; }

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

/* лист вызова: слева когда, справа что */
.list { width: 100%; border-collapse: collapse; font-size: 15px; }
.list td { padding: 11px 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: 12px; white-space: nowrap;
                 font: 600 14px/1.4 var(--cifry); color: var(--tekst-tikho); }
.list td.kogda.gorit { color: var(--srochno); }
.list td.kogda.spokojno { color: var(--sdelano); }
.pusto { color: var(--tekst-tikho); font-size: 15px; padding: 24px 0; text-align: center; }

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

.plitki { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 14px; }
.plitka {
  background: var(--fon-karty); border: 1px solid var(--kraj); border-radius: 16px;
  padding: 14px; cursor: pointer; text-align: left; color: inherit;
  display: flex; flex-direction: column; gap: 4px; min-height: 92px;
}
.plitka:active { transform: scale(.99); }
.plitka.gorit { border-color: var(--srochno); }
.plitka-cifra { font: 700 30px/1 var(--cifry); letter-spacing: -.02em; }
.plitka.gorit .plitka-cifra { color: var(--srochno); }
.plitka-imya { font-size: 13px; color: var(--tekst-tikho); }
.plitka-pripiska { font-size: 12px; color: var(--tekst-tikho); margin-top: auto; }

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

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

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

.grafik { width: 100%; height: 64px; display: block; }
.grafik .linija { fill: none; stroke: var(--akcent); stroke-width: 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: 6px; height: 88px; }
.stolbik { flex: 1; background: var(--fon-pole); border: 1px solid var(--kraj);
           border-radius: 6px 6px 0 0; position: relative; min-height: 4px; }
.stolbik .zapolnenie { position: absolute; left: 0; right: 0; bottom: 0;
                       background: var(--akcent); border-radius: 5px 5px 0 0; }
.stolbiki-podpisi { display: flex; gap: 6px; margin-top: 6px; }
.stolbiki-podpisi span { flex: 1; text-align: center; font: 500 11px/1 var(--cifry);
                         color: var(--tekst-tikho); }

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

.poloska { display: flex; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
.poloska input[type=search], .poloska .pole { flex: 1; min-width: 160px; margin-bottom: 0; }
.pole {
  width: 100%; height: 48px; padding: 0 14px; font-size: 16px;
  background: var(--fon-pole); color: var(--tekst);
  border: 1px solid var(--kraj); border-radius: 12px; margin-bottom: 8px;
}
textarea.pole { height: auto; min-height: 96px; padding: 12px 14px; line-height: 1.5;
                resize: vertical; font-family: inherit; }
.pole:focus { outline: none; border-color: var(--akcent); }

.zapisi { display: flex; flex-direction: column; gap: 10px; }
.zapis { background: var(--fon-karty); border: 1px solid var(--kraj);
         border-radius: 14px; padding: 14px; cursor: pointer; }
.zapis-verh { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.zapis-imya { font-weight: 600; font-size: 16px; }
.zapis-srok { font: 600 13px/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: 8px; display: flex; gap: 6px; flex-wrap: wrap; }
.teg { font: 500 12px/1 var(--cifry); color: var(--tekst-tikho);
       border: 1px solid var(--kraj); border-radius: 999px; padding: 5px 8px; }
.dozor-itog { font-size: 15px; }

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

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

.delo { display: flex; align-items: flex-start; gap: 12px; padding: 12px 0;
        border-top: 1px solid var(--kraj); }
.delo:first-child { border-top: 0; }
.galka { width: 56px; min-width: 56px; height: 56px; border-radius: 12px;
         border: 1px solid var(--kraj); background: var(--fon-pole); cursor: pointer;
         font: 600 20px/1 var(--cifry); color: var(--tekst-tikho); }
.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: 600; }
.delo.gotovo .delo-imya { color: var(--tekst-tikho); text-decoration: line-through; }
.delo-srok { font: 600 13px/1 var(--cifry); color: var(--tekst-tikho); margin-top: 4px; }
.delo-srok.gorit { color: var(--srochno); }

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

.reshenie { background: var(--fon-karty); border: 1px solid var(--kraj);
            border-radius: 14px; padding: 14px; margin-bottom: 10px; }
.reshenie-verh { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.reshenie-proekt { font: 600 12px/1 var(--cifry); letter-spacing: .1em; color: var(--akcent); }
.reshenie-visit { font: 500 12px/1 var(--cifry); color: var(--tekst-tikho); white-space: nowrap; }
.reshenie-visit.dolgo { color: var(--srochno); }
.reshenie-imya { font-size: 16px; font-weight: 600; margin: 8px 0 4px; }
.reshenie-sut { font-size: 14px; color: var(--tekst-tikho); }
.reshenie-knopki { display: flex; gap: 8px; margin-top: 12px; }
.reshenie-knopki .knopka { flex: 1; min-height: 56px; }

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

.kvadraty { display: flex; gap: 4px; margin-top: 8px; }
.kvadrat { width: 14px; height: 14px; border-radius: 3px; background: var(--sdelano); }
.kvadrat.trevoga { background: var(--srochno); }
.kvadrat.pusto { background: var(--fon-pole); border: 1px solid var(--kraj); }
.polosa { height: 8px; border-radius: 4px; background: var(--fon-pole);
          border: 1px solid var(--kraj); overflow: hidden; margin-top: 6px; }
.polosa i { display: block; height: 100%; background: var(--sdelano); }
.polosa i.trevoga { background: var(--srochno); }

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

.agent { border-top: 1px solid var(--kraj); padding: 14px 0; }
.agent:first-child { border-top: 0; padding-top: 0; }
.agent-verh { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.agent-imya { font-size: 16px; font-weight: 600; }
.agent-chto { font-size: 13px; color: var(--tekst-tikho); margin-top: 3px; }
.agent-itog { font-size: 14px; margin-top: 8px; }
.agent-knopki { display: flex; gap: 8px; margin-top: 10px; }

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

.vopros-imya { font-size: 15px; font-weight: 600; margin: 14px 0 6px; }
.ocenka { display: flex; gap: 8px; }
.ocenka button { flex: 1; height: 56px; font: 600 18px/1 var(--cifry);
                 background: var(--fon-pole); color: var(--tekst);
                 border: 1px solid var(--kraj); border-radius: 12px; cursor: pointer; }
.ocenka button.vybrana { background: var(--akcent); color: var(--akcent-tekst);
                         border-color: var(--akcent); }
.den-nedeli { padding: 12px 0; border-top: 1px solid var(--kraj); font-size: 15px; }
.den-nedeli:first-child { border-top: 0; }
.den-imya { font: 600 13px/1 var(--cifry); color: var(--tekst-tikho); margin-bottom: 4px; }

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

.eshche-spisok { display: flex; flex-direction: column; gap: 10px; }
.eshche-punkt { background: var(--fon-karty); border: 1px solid var(--kraj);
                border-radius: 14px; padding: 16px; cursor: pointer; text-align: left;
                color: inherit; min-height: 72px; }
.eshche-imya { font-size: 17px; font-weight: 600; }
.eshche-chto { font-size: 13px; color: var(--tekst-tikho); margin-top: 3px; }

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

.okno { position: fixed; inset: 0; background: rgba(0,0,0,.66); z-index: 40;
        display: flex; align-items: flex-end; justify-content: center; }
.okno-karta { background: var(--fon-karty); border: 1px solid var(--kraj);
              border-radius: 20px 20px 0 0; padding: 20px 16px calc(20px + var(--niz));
              width: 100%; max-width: 860px; max-height: 88vh; overflow: auto; }
.zakryt { float: right; min-height: 48px; padding: 0 14px; background: none;
          border: 1px solid var(--kraj); border-radius: 12px; color: var(--tekst-tikho);
          font-size: 14px; cursor: pointer; }
.otvet { font-size: 17px; line-height: 1.55; white-space: pre-wrap; margin: 6px 0 4px; }
.otvet-kto { color: var(--tekst-tikho); font-size: 13px; margin-bottom: 16px; }
.istochnik { border-top: 1px solid var(--kraj); padding: 12px 0; }
.istochnik-imya { font-weight: 600; font-size: 15px; }
.istochnik-kusok { color: var(--tekst-tikho); font-size: 14px; margin-top: 4px; }
.oshibka { color: var(--srochno); font-size: 14px; margin-top: 10px; min-height: 20px; }
pre.zadanie, pre.svodka-tekst {
  white-space: pre-wrap; background: var(--fon-pole); border: 1px solid var(--kraj);
  border-radius: 12px; padding: 14px; font-size: 13px; line-height: 1.5; overflow-x: auto;
}
a { color: var(--akcent); }

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

.nizhnyaya {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: flex;
  background: var(--fon);
  background: color-mix(in srgb, var(--fon) 96%, transparent);
  backdrop-filter: saturate(140%) blur(12px);
  border-top: 1px solid var(--kraj); padding-bottom: var(--niz);
}
.vkladka { flex: 1; min-height: 62px; background: none; border: 0; cursor: pointer;
           color: var(--tekst-tikho); font-size: 13px; font-weight: 600;
           border-top: 2px solid transparent; padding: 0; }
.vkladka.vybrana { color: var(--tekst); border-top-color: var(--akcent); }
.vkladka .znak { display: block; font: 600 11px/1 var(--cifry); color: var(--srochno);
                 min-height: 12px; margin-bottom: 2px; }

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

.vhod { position: fixed; inset: 0; display: flex; align-items: center;
        justify-content: center; padding: 24px; }
.vhod-karta { width: 100%; max-width: 340px; }
.vhod-imya { font: 600 13px/1 var(--cifry); letter-spacing: .22em; color: var(--tekst-tikho);
             text-align: center; margin-bottom: 18px; }
.vhod-karta input { width: 100%; height: 52px; padding: 0 14px; font-size: 16px;
                    background: var(--fon-pole); color: var(--tekst);
                    border: 1px solid var(--kraj); border-radius: 12px; }

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

@media (min-width: 900px) {
  body { padding-bottom: 0; padding-left: 210px; }
  .nizhnyaya { top: 0; right: auto; width: 210px; flex-direction: column;
               border-top: 0; border-right: 1px solid var(--kraj);
               padding-top: calc(86px + var(--verh)); overflow-y: auto; }
  .vkladka { flex: 0 0 auto; min-height: 52px; text-align: left; padding: 0 20px;
             border-top: 0; border-left: 2px solid transparent;
             display: flex; align-items: center; gap: 8px; }
  .vkladka.vybrana { border-left-color: var(--akcent); }
  .vkladka .znak { display: inline; margin: 0; }
  .vkladka[data-idti="eshche"] { display: none; }
  .shapka { padding-left: 226px; }
  .okno { align-items: center; padding: 24px; }
  .okno-karta { border-radius: 20px; }
  .plitki { grid-template-columns: repeat(4, 1fr); }
}