/* Фирменный стиль «Полимер Покрас» — графитовый.
   Палитра взята из реальных файлов: media/logo/*.svg, бирка, сертификаты и
   печатное руководство мастера. Графит #191d23, сигнальный оранж #ff5a1f,
   светлый оранж #ff9152, мениск #ffe2d2, стальные блики #aeb8c4.
   Шрифт системный — как в руководстве: работает без сети и без Google Fonts. */

:root{
  --grafit:#191d23; --grafit-2:#242a33; --stal:#aeb8c4; --seryy:#6b7b8d; --temnoseryy:#444c56;
  --oranzh:#ff5a1f; --oranzh-svet:#ff9152; --menisk:#ffe2d2;
  /* синий для своего имени в переписке: на графитовом пузыре тёмно-синий из brand.md
     не читается, поэтому взят светлый — он же держит пару с сигнальным оранжем */
  --siniy:#5aa9ff; --siniy-temn:#1857a8;
  /* ярко-красный закреплён за одним аккаунтом и в палитре имён не участвует:
     светлый — для графитового пузыря, тёмный — для белого */
  --krasnyy:#ff3b30; --krasnyy-temn:#d81e12;
  --fon:#f5f7fa; --karta:#fff; --liniya:#e6e9ec; --liniya-2:#d8dce1;
  --oshibka:#b02a1a; --oshibka-fon:#fdece8;
}
*{box-sizing:border-box}
/* hidden должен прятать и то, у чего свой display: иначе шаг не скрывается */
[hidden]{display:none !important}
body{margin:0;background:var(--fon);color:var(--grafit);
  font:16px/1.45 -apple-system,"Helvetica Neue",Helvetica,Arial,sans-serif;
  padding-bottom:calc(72px + env(safe-area-inset-bottom))}

/* ── шапка: одна строка ───────────────────────────────────────────────────────
   Раньше здесь стояли бренд, название экрана, три ряда вкладок и строка «имя ·
   должность · выйти» — 235 px из 812 на телефоне, 29% экрана, и так на каждой
   странице. Осталось то, что нужно на месте: где я (или стрелка назад), что за
   экран, колокольчик и своё фото. Навигация уехала в панель внизу. */
.top{position:sticky;top:0;z-index:5;background:var(--grafit);color:#fff;
  display:flex;align-items:center;gap:10px;
  padding:9px 12px;padding-top:calc(9px + env(safe-area-inset-top));
  border-bottom:2px solid var(--oranzh)}
.top-znak,.top-nazad{flex:none;display:flex;align-items:center;color:#fff;text-decoration:none}
.top-znak img{width:28px;height:28px;display:block}
.top-nazad .ik{width:26px;height:26px;stroke-width:2}
.top-nazad:active{opacity:.6}
.top-name{font-weight:700;font-size:17px;flex:1;min-width:0;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.top-ya{flex:none;display:flex;align-items:center;text-decoration:none}
.top-ya .ava-mal{width:30px;height:30px;font-size:11px;margin:0}
.bell{flex:none;background:var(--oranzh);color:#fff;border:0;border-radius:12px;
  padding:3px 10px;font-weight:700}

/* ── панель внизу: до дела один палец ────────────────────────────────────────
   Пять кнопок на каждый день, остальное — под «Ещё». Состав по должности лежит
   в core/menyu.py, а не в шаблоне. На широком экране панель собирается в
   плавающий док по центру: во всю ширину монитора она смотрится растянутой. */
.niz{position:fixed;left:0;right:0;bottom:0;z-index:6;display:flex;
  background:rgba(25,29,35,.94);-webkit-backdrop-filter:saturate(180%) blur(14px);
  backdrop-filter:saturate(180%) blur(14px);border-top:1px solid var(--grafit-2);
  padding-bottom:env(safe-area-inset-bottom)}
.niz-p{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:3px;
  padding:8px 2px 7px;text-decoration:none;color:var(--stal);font-size:11px;
  letter-spacing:.1px;-webkit-tap-highlight-color:transparent}
/* где стоим — светлым оранжем: сигнальный на графите тусклее, а светлый и введён
   в палитру для тёмного фона */
.niz-p.on{color:var(--oranzh-svet);font-weight:700}
.niz-p:active{opacity:.55}
.niz-znak{position:relative;display:block}
.niz-imya{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* значок: одна толщина линии на всю программу */
.ik{width:24px;height:24px;display:block;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
/* счётчик кружком на значке — как на иконке приложения в телефоне */
.tochka-cnt{position:absolute;top:-5px;right:-10px;min-width:18px;height:18px;padding:0 5px;
  background:var(--oranzh);color:#fff;border:2px solid var(--grafit);border-radius:9px;
  font-size:11px;font-weight:700;font-style:normal;line-height:14px;text-align:center}
@media (min-width:760px){
  .niz{left:50%;right:auto;transform:translateX(-50%);bottom:16px;width:auto;
    border:1px solid var(--grafit-2);border-radius:18px;padding:2px 6px;
    box-shadow:0 10px 34px rgba(25,29,35,.34)}
  .niz-p{flex:none;padding:8px 18px 7px;font-size:12px}
}

/* ── «Ещё»: строки-плитки со значком, названием и подписью ─────────────────── */
.pl{display:flex;align-items:center;gap:12px;padding:11px 0;text-decoration:none;
  color:inherit;border-top:1px solid var(--liniya)}
.pl:first-of-type{border-top:0}
.pl-znak{flex:none;width:40px;height:40px;border-radius:11px;background:var(--fon);
  border:1px solid var(--liniya);display:flex;align-items:center;justify-content:center;
  color:var(--grafit)}
.pl-znak.vyhod{color:var(--oshibka);background:var(--oshibka-fon);border-color:transparent}
.pl-kto{flex:1;min-width:0}
.pl-kto b{display:block;font-size:16px;line-height:1.25}
.pl-kto i{font-style:normal;color:var(--seryy);font-size:13px}
.pl-strelka{flex:none;width:20px;height:20px;color:var(--liniya-2);stroke-width:2}

main{max-width:760px;margin:0 auto;padding:12px}
.card{background:var(--karta);border-radius:12px;padding:14px;margin-bottom:12px;
  border:1px solid var(--liniya);box-shadow:0 1px 2px rgba(25,29,35,.05)}
h1{font-size:20px;margin:0 0 8px}
h2{font-size:13px;margin:0 0 10px;text-transform:uppercase;letter-spacing:.8px;color:var(--seryy);
  font-weight:700}
.muted{color:var(--seryy);font-size:14px}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}

/* переключатели и кнопки: оранж — только действие, остальное графит и сталь */
.seg{display:flex;gap:6px;flex-wrap:wrap}
.seg.wrap{margin-bottom:10px}
.seg-b{border:1px solid var(--liniya-2);background:#fff;color:var(--grafit);border-radius:9px;
  padding:9px 12px;font-size:15px}
.seg-b.on{background:var(--grafit);color:#fff;border-color:var(--grafit)}
/* отбор на экране цен: те же переключатели, но ссылками — счётчик прямо на кнопке */
/* поиск и отбор — два разных действия в одной карточке, их надо развести */
.otbor{gap:8px;margin:16px 0 12px;padding-top:14px;border-top:1px solid var(--liniya)}
.otbor .seg-b{display:inline-flex;align-items:center;gap:7px;text-decoration:none;
  border-radius:9px;cursor:pointer;padding:10px 14px}
.otbor .seg-b.on .cnt{background:#fff;color:var(--grafit)}
.otbor .seg-b.pusto{color:var(--seryy)}
/* правка числа прямо в строке справочника: закрыта, пока не нажали «изменить».
   Одна и та же для цены и для ставки — списки разные, вид один */
.line.cena, .line.stavka{position:relative}
.line.cena .pravka, .line.stavka .pravka{display:block;background:none;border:0;padding:4px 0 0;
  color:var(--oranzh);font-size:13px;text-decoration:underline;cursor:pointer}
.pravka-polya{margin-top:8px;padding:12px;border:1px solid var(--liniya-2);
  border-radius:10px;background:var(--fon)}
.pravka-polya label{display:block;font-size:12px;color:var(--seryy);text-transform:uppercase;
  letter-spacing:.4px;margin-bottom:8px}
.pravka-polya input{margin-top:4px}
.pravka-polya .row{gap:8px}
.pravka-polya button{border:1px solid var(--grafit);background:var(--grafit);color:#fff;
  border-radius:9px;padding:9px 14px;font-size:15px}
.pravka-polya .otkaz{background:#fff;color:var(--grafit);text-decoration:none;padding:9px 14px;border:1px solid var(--liniya-2)}
.pravka-polya .err{margin-top:8px}

a.big.knopka{display:block;width:100%;box-sizing:border-box;text-align:center;text-decoration:none;
  background:var(--grafit);color:#fff;padding:14px;font-size:17px;font-weight:700;
  letter-spacing:.3px;border-radius:11px}
.pech{margin-left:auto;font-size:13px;color:var(--seryy)}
.pech input{width:64px;margin-left:6px}
/* 16px в поле ввода — не вкус, а порог: при шрифте мельче iPhone сам приближает
   страницу, как только палец попал в поле, и обратно уже не отъезжает. Поля лежат
   внутри подписей `label` (12px) и наследовали их размер — приближало на каждом
   касании. Размер шрифта у полей задаём явно, а не наследованием. */
input,select,textarea{font-family:inherit;font-size:16px;padding:10px;
  border:1px solid var(--liniya-2);border-radius:9px;
  width:100%;background:#fff;color:var(--grafit)}
input:focus,select:focus{outline:2px solid var(--oranzh);outline-offset:-1px;border-color:var(--oranzh)}
label{display:block;font-size:12px;color:var(--seryy);margin-bottom:8px;
  text-transform:uppercase;letter-spacing:.4px}
.fields{display:grid;grid-template-columns:1fr 1fr;gap:0 10px}
.fields .f-name{grid-column:1/-1;position:relative}
.fields .f-customer{position:relative}
.fields .f-note{grid-column:1/-1}
button{font:inherit;border:1px solid var(--liniya-2);background:#fff;color:var(--grafit);
  border-radius:9px;padding:10px 12px}
button.big{width:100%;background:var(--grafit);color:#fff;border:0;padding:14px;font-size:17px;
  font-weight:700;letter-spacing:.3px}
button.green{background:var(--oranzh)}      /* сдать смену, принял — главное действие */
button.red{background:var(--oshibka)}

/* строки */
.line{display:block;border-top:1px solid var(--liniya);padding:10px 0;text-decoration:none;
  color:inherit;position:relative}
.line:first-child{border-top:0}
.line-main{font-size:15px;padding-right:92px}
.line-sub{color:var(--seryy);font-size:13px;margin-top:2px;padding-right:92px}
.line-sum{position:absolute;right:0;top:10px;font-weight:700;font-variant-numeric:tabular-nums}
.pn{color:var(--seryy);font-size:13px;margin-left:4px}
.clr{background:var(--fon);color:var(--temnoseryy);border:1px solid var(--liniya-2);
  border-radius:5px;padding:1px 6px;font-size:12px;margin-left:4px}

/* пометки строки */
.flag{display:inline-block;margin-top:4px;margin-right:4px;font-size:12px;border-radius:5px;
  padding:2px 7px;letter-spacing:.2px}
.f-waiting_price{background:var(--menisk);color:#a03c12}
.f-price_changed{background:var(--oshibka-fon);color:var(--oshibka)}
.f-from_words,.f-edited_by_master,.f-removed_by_master{background:var(--liniya);color:var(--temnoseryy)}
.f-once{background:var(--liniya);color:var(--grafit)}
.f-na-smene{background:#e3f7e8;color:#1d7a38}
.f-vne-smeny{background:#ffe8e6;color:#a3241c}
.f-queued{background:var(--menisk);color:#a03c12}

.hints{position:absolute;left:0;right:0;top:100%;background:#fff;border:1px solid var(--liniya-2);
  border-radius:9px;z-index:9;max-height:260px;overflow:auto;box-shadow:0 6px 20px rgba(25,29,35,.12);
  /* подсказка лежит внутри подписи поля — её верхний регистр и разрядку сюда не пускаем */
  text-transform:none;letter-spacing:0;color:var(--grafit)}
.hint{padding:10px;border-bottom:1px solid var(--liniya);font-size:15px;line-height:1.3}
.hint:last-child{border-bottom:0}
.hint .p{float:right;font-weight:700}
.err{background:var(--oshibka-fon);color:var(--oshibka);border-radius:9px;padding:10px;
  margin-top:10px;font-size:14px;border-left:3px solid var(--oshibka)}
.warn{background:var(--menisk);color:#a03c12;border-radius:9px;padding:8px 10px;font-size:14px}
.price-hint{background:var(--fon);color:var(--temnoseryy);border-radius:9px;padding:10px;
  margin:8px 0;font-size:14px;border-left:3px solid var(--oranzh)}

.totals div{display:flex;justify-content:space-between;padding:4px 0;
  font-variant-numeric:tabular-nums}
.totals .big-sum{font-size:20px;font-weight:800;border-top:2px solid var(--grafit);padding-top:8px;
  margin-top:4px}
.totals .low{color:var(--oshibka)}
.totals .ok{color:var(--temnoseryy)}

.req{border-top:1px solid var(--liniya);padding:10px 0;font-size:15px}
.req:first-of-type{border-top:0}
.req-act{display:flex;gap:6px;margin-top:8px;flex-wrap:wrap}
.req-act input{width:110px}
.req-act button{background:var(--grafit);color:#fff;border-color:var(--grafit)}
.req-act button[data-decide="book"]{background:var(--oranzh);border-color:var(--oranzh)}
.req-act button[data-decide="reject"]{background:#fff;color:var(--grafit);border-color:var(--liniya-2)}
.cnt{background:var(--oranzh);color:#fff;border-radius:10px;padding:1px 8px;font-size:13px;
  vertical-align:2px}
.cnt.zero{background:var(--liniya);color:var(--seryy)}   /* ноль не должен светить оранжевым */
.note{border-top:1px solid var(--liniya);padding:8px 0;font-size:15px}
/* всплывашка приходит сверху, под шапку: снизу её закрывали панель, клавиатура
   и собственные пальцы — «там не видно» (Владислав 07.09.2026). Точный верх
   ставит toast() по нижней кромке шапки. */
.notif{position:fixed;left:12px;right:12px;top:60px;background:var(--grafit);color:#fff;
  border-radius:12px;padding:12px;z-index:20;font-size:15px;
  border-left:4px solid var(--oranzh);box-shadow:0 8px 24px rgba(25,29,35,.28);
  animation:notif-vyezd .22s ease-out}
/* всплывашка выезжает снизу: неподвижную на краю экрана глаз не замечает */
@keyframes notif-vyezd{from{transform:translateY(16px);opacity:0}to{transform:none;opacity:1}}
.notif.klik{cursor:pointer}
.notif.klik::after{content:"нажмите, чтобы открыть";display:block;margin-top:5px;
  font-size:13px;color:var(--stal)}

/* колокольчик с непрочитанным пульсирует: телефон в цеху видят краем глаза */
.bell.est{animation:bell-puls 2s ease-in-out infinite}
@keyframes bell-puls{
  0%,100%{box-shadow:0 0 0 0 rgba(255,90,31,.55)}
  50%{box-shadow:0 0 0 8px rgba(255,90,31,0)}
}
/* настройки сигнала в профиле: что этот телефон умеет, строкой на строку */
.sig-sost{margin-top:12px}
.sig-stroka{padding:5px 0 5px 10px;border-left:2px solid var(--liniya);margin-bottom:5px}
@media (prefers-reduced-motion:reduce){
  .bell.est{animation:none}
  .notif{animation:none}
}

.dates{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;font-size:15px}
.dates a{color:var(--oranzh);text-decoration:none;padding:4px 8px;font-weight:600}
.chk{display:flex;gap:8px;align-items:center;font-size:13px;margin-top:10px;text-transform:none;
  letter-spacing:0}
.chk input{width:auto}
.offline{color:var(--oshibka)}
.chips{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}
.chip{padding:6px 10px;font-size:14px;border-radius:7px}
.chip.on{background:var(--grafit);color:#fff;border-color:var(--grafit)}
.task{cursor:pointer}
.task .take{color:var(--oranzh);font-weight:700}
.line.snyata{opacity:.5;text-decoration:line-through}

.seven{margin:0;padding-left:20px;font-size:15px}
.seven li{padding:4px 0}
.seven li.ok::marker{color:var(--oranzh)}
.seven li.bad{color:var(--oshibka)}
/* внутри пункта списка метка должна оставаться на строке номера, а не рядом с ним */
.seven .chk{display:inline-flex;color:var(--grafit);font-size:15px;margin:0;
  vertical-align:top}
.seven li{padding:4px 0}
.chk.otdelno{margin-top:12px;padding-top:10px;border-top:1px solid var(--liniya)}
.prm-act{display:flex;gap:8px;align-items:flex-end;margin-top:8px;flex-wrap:wrap}
.prm-act label{margin:0;font-size:11px;display:flex;flex-direction:column;gap:3px}
.prm-act input{width:80px}
.add-task{margin-top:8px}
.del{padding:4px 8px;font-size:13px}
.btn{display:inline-block;padding:10px 14px;border:1px solid var(--liniya-2);border-radius:9px;
  background:#fff;color:var(--grafit);text-decoration:none;font-size:15px;font-weight:600}
.slogan{font-style:italic;letter-spacing:2px;font-size:11px;color:var(--stal);text-transform:uppercase}

.del-line{display:block;margin:4px 0 0 auto;padding:0;font-size:12px;color:var(--stal);
  border:0;background:none;text-decoration:underline;font-weight:400}
.del-line:hover{color:var(--oshibka)}

.ya{position:relative;margin-top:6px;font-size:12px;color:var(--stal)}
.ya a{color:var(--oranzh-svet);text-decoration:none}

.pechka-blok{border:1px solid var(--liniya);border-radius:10px;padding:8px 10px;margin-bottom:10px}
.pechka-blok.tekushchaya{border-color:var(--oranzh);box-shadow:0 0 0 2px rgba(255,90,31,.12)}
.pechka-zag{font-weight:700;font-size:14px;padding-bottom:6px;border-bottom:1px solid var(--liniya);
  margin-bottom:4px;display:flex;justify-content:space-between;align-items:baseline}
.pechka-zag .muted{font-weight:400}
.pechka-komu{font-size:13px;color:var(--oranzh);font-weight:600;padding:6px 0 2px}
.pechka-komu.pusto{color:var(--seryy);font-weight:400;font-style:italic}
.pechka-blok.odin-zakazchik .line-sub .komu{display:none}
.pechka-zag.vne{color:var(--seryy);font-weight:600;font-size:13px;text-transform:uppercase;
  letter-spacing:.5px}
#pechki .novaya{border-style:dashed;color:var(--oranzh);border-color:var(--oranzh)}
.pech b{font-size:17px;color:var(--grafit)}

.nazad{float:right;border:0;background:none;color:var(--oranzh);font-size:13px;padding:0;
  font-weight:600;text-transform:none;letter-spacing:0}
.otmena{background:none;border:0;color:var(--oranzh-svet);font-weight:700;padding:0 0 0 12px;
  text-decoration:underline}
.pechka-pustaya{border-style:dashed}

.prinyata{background:var(--fon);border-left:3px solid var(--oranzh);border-radius:9px;
  padding:10px 12px;margin-bottom:10px;font-size:15px}

/* Панель уведомлений висит поверх страницы под шапкой, а не в начале main */
#notif-list{position:fixed;left:12px;right:12px;z-index:30;max-height:62vh;overflow:auto;
  box-shadow:0 10px 30px rgba(25,29,35,.28);border-left:3px solid var(--oranzh);margin:0}
#notif-list b{display:block;margin-bottom:6px;font-size:13px;text-transform:uppercase;
  letter-spacing:.8px;color:var(--seryy)}
#notif-list .line-main{color:var(--grafit);text-decoration:none;display:block}
#notif-list a.line-main{color:var(--blue,var(--grafit))}
@media (min-width:800px){#notif-list{left:auto;right:calc(50% - 380px);width:360px}}

.udalit{color:var(--oshibka);border-color:var(--liniya-2)}

/* ссылка в тексте — оранжевая, как всё остальное действие: браузерная синяя
   в графитовом экране смотрится чужой */
main p a{color:var(--oranzh)}

/* на смене или нет: светло-зелёный против ярко-красного.
   Оттенки взяты свои, не из палитры людей: там ярко-красный закреплён за человеком,
   и точка статуса не должна с ним сливаться. */
:root{--smena-na:#35c759; --smena-vne:#ff3b30}
.tochka-smeny{position:absolute;width:18px;height:18px;border-radius:50%;
  border:3px solid var(--karta);background:var(--smena-vne)}
.tochka-smeny.na{background:var(--smena-na)}
.ya-shapka{position:relative}
.ya-shapka .tochka-smeny{left:56px;top:56px}
.ava-mal .tochka-smeny,.ava-sred .tochka-smeny{display:none}
.chel-verh{position:relative}
.chel-verh .tochka-smeny{width:16px;height:16px;left:48px;top:46px;border-width:2px}

.smena-polosa{margin-top:12px;padding:10px 12px;border-radius:10px;background:var(--fon);
  border-left:4px solid var(--smena-vne)}
.smena-polosa.na{border-left-color:var(--smena-na)}
.smena-slovami{display:flex;justify-content:space-between;align-items:baseline;gap:8px;
  margin-bottom:8px;flex-wrap:wrap}
.smena-polosa .big{padding:12px}
.smeny-normy{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
.smena-karta{flex:1;min-width:84px;background:var(--karta);border:1px solid var(--liniya);
  border-radius:9px;padding:7px 8px;font-size:13px}
.smena-karta b{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.4px;
  color:var(--seryy)}
/* «09:00–18:00» должно стоять одной строкой: разорванное время читается как две даты */
.smena-karta span{font-size:14px;font-weight:600;font-variant-numeric:tabular-nums;
  white-space:nowrap}

/* мои задачи: новая выделена оранжевой кромкой, отмеченная — приглушена */
.zadacha{padding-left:10px;border-left:3px solid transparent}
.zadacha.z-novaya{border-left-color:var(--oranzh);background:var(--fon);border-radius:0 9px 9px 0}
.zadacha.z-vypolnena{border-left-color:var(--oranzh-svet)}
.zadacha.z-prinyata{border-left-color:var(--stal);opacity:.75}
.zadacha .oznakomlen{color:var(--seryy);font-size:13px}
.zadacha .gotovo{color:var(--temnoseryy);font-size:13px;font-weight:600}
.zadacha .oznakomit{margin-top:8px}
.zadacha .prinyat{margin-top:8px;background:var(--oranzh);color:#fff;border-color:var(--oranzh)}
.zadacha .chk{margin-top:6px}

/* мой профиль */
.profil-imya{font-size:22px;font-weight:800;letter-spacing:-.2px}
.profil-telefon{margin:12px 0 10px}
.profil-telefon input{width:190px}
.ya-shapka{display:flex;gap:12px;align-items:flex-start}
.ya-kto{min-width:0}

/* фото профиля: кружок, а нет фото — буквы имени на графите */
.ava{display:inline-flex;align-items:center;justify-content:center;overflow:hidden;
  border-radius:50%;background:var(--ch,var(--grafit));color:#fff;font-weight:700;flex:none;
  border:0;padding:0;vertical-align:middle}
.ava img{width:100%;height:100%;object-fit:cover;display:block}
.ava-bol{width:72px;height:72px;font-size:24px;letter-spacing:.5px;cursor:pointer;
  box-shadow:0 0 0 3px var(--ch,var(--menisk))}
.ava-mal{width:26px;height:26px;font-size:11px;margin-right:6px;
  box-shadow:0 0 0 1px var(--ch,var(--stal))}
.ava-sred{width:60px;height:60px;font-size:21px;letter-spacing:.5px;
  box-shadow:0 0 0 2px var(--ch,var(--liniya-2))}

/* точка цвета там, где кружку не место: списки смен, неделя, журнал */
.tochka{display:inline-block;width:10px;height:10px;border-radius:50%;flex:none;
  background:var(--ch,var(--stal));margin-right:6px;vertical-align:0}

/* выбор цвета в профиле */
.cveta{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.cvet-k{width:44px;height:44px;border-radius:50%;border:0;padding:0;position:relative;
  background:var(--ch);cursor:pointer}
.cvet-k.on{box-shadow:0 0 0 3px var(--karta),0 0 0 5px var(--grafit)}
/* занятый цвет не прячем, а подписываем тем, кто его занял: понятно, почему нельзя */
.cvet-k.zanyat{opacity:.55;cursor:not-allowed}
.cvet-k .zanyal{font-size:13px;letter-spacing:.5px;text-shadow:0 1px 2px rgba(25,29,35,.5)}
.cvet-k span{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  color:#fff;font-size:18px;font-weight:700}

/* люди: карточка на человека — фото, имя, должность, метки; кнопки под «⋯» */
.chel{background:var(--karta);border:1px solid var(--liniya);border-radius:12px;
  padding:12px;margin-bottom:10px;box-shadow:0 1px 2px rgba(25,29,35,.05)}
.chel.raskryt{border-color:var(--oranzh);box-shadow:0 0 0 2px rgba(255,90,31,.10)}
.chel.pogashen .ava,.chel.pogashen .chel-imya{opacity:.45}
.chel-verh{display:flex;gap:12px;align-items:center}
.chel-kto{min-width:0;flex:1}
.chel-imya{font-size:18px;font-weight:700;line-height:1.2}
.chel-ya{font-size:11px;font-weight:600;color:var(--seryy);text-transform:uppercase;
  letter-spacing:.6px;margin-left:6px;vertical-align:2px}
.chel-dolzh{color:var(--seryy);font-size:14px;margin-top:1px}
.chel-metki{margin-top:2px}
.chel-metki .flag{margin-top:4px}
.chel-otkryt{flex:none;width:38px;height:38px;border-radius:50%;font-size:20px;line-height:1;
  color:var(--seryy);background:var(--fon);border-color:var(--liniya);padding:0}
.chel-otkryt:hover{color:var(--grafit);border-color:var(--liniya-2)}
.chel-chuzhoy{flex:none;width:38px;text-align:center;color:var(--liniya-2);font-size:20px}
.chel-niz{margin-top:12px;border-top:1px solid var(--liniya);padding-top:4px}
.chel-blok{padding:10px 0;border-bottom:1px solid var(--liniya)}
.chel-blok:last-child{border-bottom:0;padding-bottom:0}
.chel-blok h3{font-size:12px;margin:0 0 4px;text-transform:uppercase;letter-spacing:.8px;
  color:var(--seryy);font-weight:700}
.chel-blok .prm-act{margin-top:8px}
.chel-blok .muted{margin:0}

.svodka{font-size:15px;color:var(--seryy)}
.svodka b{color:var(--grafit);font-size:17px}

details summary{cursor:pointer;font-size:13px;text-transform:uppercase;letter-spacing:.8px;
  color:var(--seryy);font-weight:700}
details[open] summary{margin-bottom:8px}

/* ── переписка ───────────────────────────────────────────────────────────────
   Свои сообщения справа графитом, чужие слева белым. Оранж и здесь только на
   действии — на кнопке отправки. */
.chat-row .line-sum{top:14px}
.chat-shapka{position:sticky;top:0;z-index:4}
.chat-shapka .muted{margin-top:2px}

.lenta{max-width:760px;margin:0 auto;padding:0 12px 96px}
.chat-den{text-align:center;color:var(--seryy);font-size:12px;text-transform:uppercase;
  letter-spacing:.6px;margin:14px 0 8px}
.chat-sistemnoe{text-align:center;color:var(--seryy);font-size:13px;margin:8px 0;
  background:var(--liniya);border-radius:9px;padding:5px 10px;display:table;
  margin-left:auto;margin-right:auto}

.puzyr{background:var(--karta);border:1px solid var(--liniya);border-radius:12px 12px 12px 3px;
  padding:8px 10px;margin:6px 0;max-width:82%;box-shadow:0 1px 2px rgba(25,29,35,.05);
  word-wrap:break-word;overflow-wrap:anywhere}
.puzyr.moe{background:var(--grafit);color:#fff;border-color:var(--grafit);margin-left:auto;
  border-radius:12px 12px 3px 12px}
.puzyr.ubrano{opacity:.6;font-style:italic}
/* Имя автора: своё синим, чужое оранжевым — названо Владиславом 06.09.2026.
   Рядом с именем — фото профиля, а нет фото — кружок с инициалами. */
.puzyr-kto{font-size:12px;font-weight:700;color:var(--oranzh);margin-bottom:3px;
  display:flex;align-items:center;gap:6px}
/* Кружок в пузыре берёт цвет человека, как и везде: свой фон здесь перебивал
   палитру, и все кружки в переписке были одинаково серые. */
.ava-chat{width:22px;height:22px;font-size:9px;background:var(--ch,var(--grafit-2));
  box-shadow:0 0 0 1px var(--liniya-2)}
.puzyr.moe .ava-chat{box-shadow:0 0 0 1px rgba(255,255,255,.25)}
.puzyr-text{font-size:15px;white-space:pre-wrap}
.puzyr-niz{font-size:11px;color:var(--seryy);text-align:right;margin-top:3px;
  display:flex;gap:10px;justify-content:flex-end;align-items:center}
.puzyr.moe .puzyr-niz{color:var(--stal)}
.puzyr-ubrat{border:0;background:none;padding:0;font-size:11px;color:var(--seryy);
  text-decoration:underline}
.puzyr.moe .puzyr-ubrat{color:var(--stal)}

.vlozh{margin:2px 0 6px}
.vlozh img,.vlozh video{display:block;max-width:100%;max-height:60vh;border-radius:9px;
  background:var(--fon)}
.fajl-ssylka{color:var(--oranzh);text-decoration:none;font-weight:600}
.puzyr.moe .fajl-ssylka{color:var(--oranzh-svet)}

/* поле ввода прилипает к низу — как во всех мессенджерах, чтобы не искать его глазами */
.poslat{position:fixed;left:0;right:0;bottom:0;z-index:6;background:var(--karta);
  border-top:1px solid var(--liniya-2);padding:8px 12px calc(8px + env(safe-area-inset-bottom));
  box-shadow:0 -2px 10px rgba(25,29,35,.06)}
.poslat-row{display:flex;gap:8px;align-items:flex-end;max-width:736px;margin:0 auto}
.poslat textarea{flex:1;font-family:inherit;font-size:16px;padding:10px;border:1px solid var(--liniya-2);
  border-radius:9px;resize:none;max-height:140px;background:#fff;color:var(--grafit)}
.poslat textarea:focus{outline:2px solid var(--oranzh);outline-offset:-1px;
  border-color:var(--oranzh)}
.skrepka{width:44px;height:44px;flex:0 0 44px;border:1px solid var(--liniya-2);border-radius:9px;
  display:flex;align-items:center;justify-content:center;font-size:22px;color:var(--grafit);
  margin:0;text-transform:none;letter-spacing:0;cursor:pointer}
.poslat-b{width:44px;height:44px;flex:0 0 44px;background:var(--oranzh);color:#fff;border:0;
  border-radius:9px;font-size:17px;padding:0}
.fajl-idet{font-size:13px;color:var(--seryy);max-width:736px;margin:0 auto 6px}
.poslat .err{margin:6px auto 0;max-width:736px}
.ranshe{display:block;margin:12px auto 4px;font-size:14px}

/* автор стоит над каждым сообщением, в том числе над своим */
.puzyr.moe .puzyr-kto{color:var(--siniy)}
/* сообщение, которое сейчас правят, видно в ленте — иначе непонятно, что именно правишь */
.puzyr.pravitsya{outline:2px solid var(--oranzh);outline-offset:2px}
.pravim-strip{max-width:736px;margin:0 auto 6px;font-size:13px;color:var(--temnoseryy);
  background:var(--menisk);border-radius:9px;padding:6px 10px;display:flex;gap:10px;
  align-items:center;justify-content:space-between}
.pravim-strip button{border:0;background:none;padding:0;color:var(--oshibka);font-size:13px;
  text-decoration:underline}
/* кнопка «написать человеку»: фото слева от имени */
.chip .ava-mal{width:22px;height:22px;font-size:9px;margin-right:6px}
.chat-row .ava-mal{vertical-align:-7px}
/* подпись под именем встаёт под текст, а не под кружок: иначе строка едет влево */
.chat-row .line-sub{padding-left:32px}

/* ── ответ на конкретное сообщение ─────────────────────────────────────────── */
/* цитата над ответом: кому отвечают и что было сказано */
.cytata{display:block;width:100%;text-align:left;border:0;border-left:3px solid var(--oranzh);
  background:var(--fon);border-radius:0 8px 8px 0;padding:5px 8px;margin:0 0 6px;font-size:13px;
  line-height:1.3;overflow:hidden}
.cytata b{display:block;color:var(--oranzh);font-size:12px}
.cytata span{display:block;color:var(--temnoseryy);white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis}
.puzyr.moe .cytata{background:rgba(255,255,255,.09);border-left-color:var(--oranzh-svet)}
.puzyr.moe .cytata b{color:var(--oranzh-svet)}
.puzyr.moe .cytata span{color:var(--stal)}
/* сообщение, к которому увела цитата, мигает — иначе непонятно, куда прыгнул экран */
.puzyr.mignul{outline:2px solid var(--oranzh);outline-offset:2px}
.puzyr.otvechaem{outline:2px dashed var(--oranzh);outline-offset:2px}

.otvet-strip{max-width:736px;margin:0 auto 6px;font-size:13px;color:var(--temnoseryy);
  background:var(--fon);border-left:3px solid var(--oranzh);border-radius:0 9px 9px 0;
  padding:6px 10px;display:flex;gap:10px;align-items:center;justify-content:space-between}
.otvet-strip .otvet-komu{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.otvet-strip b{color:var(--oranzh)}
.otvet-strip button{border:0;background:none;padding:0;color:var(--oshibka);font-size:13px;
  text-decoration:underline;flex:none}

/* ── красное имя: закреплено за одним аккаунтом, в палитре его нет ────────── */
.imya-krasn,.imya-krasn span{color:var(--krasnyy-temn) !important;font-weight:800}
.puzyr.moe .imya-krasn,.puzyr.moe .imya-krasn span{color:var(--krasnyy) !important}

.pechek-pole{width:64px;display:inline-block;padding:4px 8px;text-align:center;
  vertical-align:baseline}