/* cabinet.css — кабинет 3D-моделей.

   Вид взят с кабинета мебельщика (mebelshik.furnit.market): те же цвета,
   тот же шрифт, та же красная шапка, то же нижнее меню и те же карточки.
   Там React и Tailwind, здесь обычные классы и шаблоны Go — совпадать
   должно на глаз, а не по коду.

   Переключение на компьютер — 768px, как и там. От 1280px боковое меню
   разворачивается из полоски со значками в полное, с подписями. */

:root{
  /* ── набор цветов Furnit Market ── */
  --bg:#F2F4F7; --card:#FFFFFF; --ink:#14161A; --sub:#7C8496; --line:#ECEDF1;
  --brand:#F04E37; --brand-600:#DB3C25; --brand-700:#B82F1C; --brand-50:#FFF1EE;
  --ok:#17B26A;    --ok-50:#E8F8F0;
  --warn:#F79009;  --warn-50:#FFF4E5;
  --info:#2E90FA;  --info-50:#EAF3FF;
  --violet:#7A5AF8;--violet-50:#F0EDFF;
  /* серые для подложек, значков и подсказок — из того же набора */
  --hover:#F6F7F9; --sunken:#EDEFF3; --icon:#9AA2B1; --hint:#C3C8D2;

  --r-card:16px; --r-el:12px; --r-pill:999px;
  --shadow-card:0 1px 2px rgba(16,24,40,.04),0 6px 16px -8px rgba(16,24,40,.12);
  --shadow-float:0 8px 24px -6px rgba(16,24,40,.18);
  --shadow-lift:0 2px 6px rgba(16,24,40,.06),0 12px 28px -12px rgba(16,24,40,.22);

  --head:60px;  /* высота красной шапки на компьютере */

  --sys:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif;

  /* Прежние имена: на них ещё ссылаются подстановки в шаблонах. */
  --brand-dk:var(--brand-600); --brand-lt:var(--brand-50);
  --gray:var(--sub); --price:var(--brand); --star:var(--warn);
}

*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;display:flex;flex-direction:column;background:var(--bg);color:var(--ink);
  font:15px/1.45 var(--sys);-webkit-font-smoothing:antialiased;
  overscroll-behavior:none;-webkit-tap-highlight-color:transparent}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
input{font:inherit}
a{color:inherit;text-decoration:none}
.ic{width:22px;height:22px;flex:0 0 auto;stroke-width:2;stroke-linecap:round;
  stroke-linejoin:round;fill:none;stroke:currentColor}
.ic.s{width:18px;height:18px}
.ic.xs{width:15px;height:15px}
.ic.l{width:23px;height:23px}
.hid{display:none!important}
:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:10px}

/* Полоса прокрутки. На телефоне её видно быть не должно — там её и нет, а в
   узком окне на компьютере она лезет в глаза и съедает край. На широком
   оставляем, но тонкой и неяркой: без неё непонятно, где ты в длинном списке. */
html{scrollbar-width:none}
html::-webkit-scrollbar{display:none}
@media (min-width:768px){
  html{scrollbar-width:thin;scrollbar-color:#D3D8E0 transparent}
  html::-webkit-scrollbar{display:block;width:11px}
  html::-webkit-scrollbar-track{background:transparent}
  html::-webkit-scrollbar-thumb{background:#D3D8E0;background-clip:content-box;
    border:3px solid transparent;border-radius:999px}
}

/* Нажатие: на телефоне вещь слегка проваливается под пальцем, на компьютере
   почти незаметно — там за отклик отвечает наведение. */
.press{transition:transform .14s cubic-bezier(.2,0,0,1),background-color .14s ease,
  box-shadow .16s ease}
.press:active{transform:scale(.97)}

/* ═════════ каркас ═════════ */

.shell{flex:1;display:flex;min-height:0}
.main{flex:1;min-width:0;display:flex;flex-direction:column}
.side{display:none}

/* ═════════ шапка телефона: красная, как на главной у мебельщика ═════════ */

.mtop{position:sticky;top:0;z-index:30;border-radius:0 0 22px 22px;
  padding:calc(env(safe-area-inset-top,0px) + 8px) 16px 12px;
  background:linear-gradient(135deg,#F04E37 0%,#E23A22 55%,#D5361F 100%)}
/* Ряд шапки: слева стрелка обратно к мебельщику, посередине название, справа
   колокол и шестерёнка меню. Крайние ячейки — по 1fr, средняя по содержимому:
   так название стоит ровно посередине, сколько бы кнопок ни было по краям.
   Раньше справа стояла ячейка шириной ровно в одну кнопку, и вторая вставала
   поверх первой — шестерёнки было просто не видно. */
/* Одной строкой: знак слева, кнопки справа, поиск на их месте. */
.mtop-row{display:flex;align-items:center;gap:8px;height:44px}
.mtop-sp{margin-left:auto;display:flex;align-items:center;gap:2px}
/* В шапке: знак сервиса, а за ним — где мы сейчас. Имя папки стоит тут, а не
   отдельной белой строкой под шапкой: строка занимала место, а сказать умела
   ровно одно слово. Длинное имя обрезается — знак сервиса не двигается. */
.htitle{display:flex;align-items:baseline;gap:7px;min-width:0;color:#fff;
  font-size:19px;font-weight:800;letter-spacing:-.02em;white-space:nowrap}
.htitle b{flex:0 0 auto;font-weight:800}
.htitle s{min-width:0;text-decoration:none;font-size:14px;font-weight:600;opacity:.92;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.micb{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;color:#fff;
  position:relative}
.micb:active{background:rgba(255,255,255,.15)}
.micb u{position:absolute;top:7px;right:7px;width:7px;height:7px;border-radius:50%;
  background:#fff;border:1.5px solid #E23A22}
/* Поиск занимает ту же строку, что и название: пока ищут, название не нужно,
   а высота шапки не скачет. Закрывается своим крестиком — он же очищает
   запрос, иначе список остался бы отфильтрованным втихую. */
.msrch{display:none;align-items:center;gap:10px;flex:1 1 auto;min-width:0;height:44px;
  padding:0 10px 0 14px;border-radius:14px;background:#fff}
/* Пока ищут, в строке остаётся одно поле во всю ширину и во всю высоту ряда —
   как в макете. Крестик выхода на это время прячется: слева от поля он читался
   как «закрыть поиск», а закрывает его свой серый крестик справа, внутри поля. */
body.msearch .htitle,body.msearch .mtop-sp{display:none}
body.msearch .msrch{display:flex;animation:srch-in .22s ease-out}
/* Поле не выскакивает, а раскрывается: без этого замена названия на поиск
   выглядела как подмена кадра. */
@keyframes srch-in{from{opacity:0;transform:scaleX(.96)}}
.msrch-x{flex:0 0 auto;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;
  background:var(--line);color:var(--sub);border:0;cursor:pointer}
.msrch-x:active{background:var(--line2,#e6e8ec)}
.msrch .ic{color:var(--icon)}
.msrch input{flex:1;min-width:0;border:0;background:none;outline:none;font-size:15px;
  color:var(--ink)}
.msrch input::placeholder{color:var(--icon)}

/* шапка телефона на внутренних страницах — белая полоса с названием */
.ptop{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:6px;
  min-height:52px;padding:calc(env(safe-area-inset-top,0px) + 2px) 12px 8px 16px;
  background:rgba(255,255,255,.92);backdrop-filter:blur(16px);
  border-bottom:1px solid var(--line);border-radius:0 0 22px 22px}
/* Шестерёнка стоит у самого названия папки: настройки там, где сама папка. */
.ptop-cog{flex:0 0 auto;width:38px;height:38px;border-radius:50%;display:grid;
  place-items:center;color:var(--sub);transition:background-color .14s ease,color .14s ease}
.ptop-cog{position:relative}
.ptop-cog:active{background:rgba(0,0,0,.05);color:var(--brand)}
.ptop-cog u{position:absolute;top:6px;right:6px;width:7px;height:7px;border-radius:50%;
  background:var(--brand);border:1.5px solid #fff}
.ptop-back{width:36px;height:36px;margin-left:-8px;border-radius:50%;display:grid;
  place-items:center;color:var(--ink)}
.ptop-back:active{background:rgba(0,0,0,.05)}
.ptop-t{min-width:0;flex:1}
.ptop-t b{display:block;font-size:19px;font-weight:700;letter-spacing:-.01em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ptop-t s{display:block;text-decoration:none;font-size:11px;color:var(--sub);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ═════════ шапка компьютера: красная полоса во всю ширину ═════════ */

.dtop{display:none}
@media (min-width:768px){
  .mtop,.ptop{display:none}
  .dtop{position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:20px;
    height:var(--head);flex:0 0 auto;padding:0 20px;
    background:linear-gradient(100deg,#F04E37 0%,#E23A22 60%,#D5361F 100%)}
  /* На компьютере название стоит слева, у стрелки: середину занимает поиск. */
  .dtop .htitle{font-size:19px;text-align:left}
  .dback{margin-left:-6px}
  .dtop-mid{flex:1;min-width:0;display:flex;justify-content:center}
  .dsrch{display:flex;align-items:center;gap:10px;width:100%;max-width:560px;height:38px;
    padding:0 14px;border-radius:11px;background:#fff}
  .dsrch .ic{color:var(--icon)}
  .dsrch input{flex:1;min-width:0;border:0;background:none;outline:none;font-size:14px;
    color:var(--ink)}
  .dsrch input::placeholder{color:var(--icon)}
  .dtop-sp{display:flex;align-items:center;gap:4px;flex:0 0 auto}
  .dicb{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;color:#fff;
    position:relative;transition:background-color .14s ease}
  .dicb:hover{background:rgba(255,255,255,.15)}
  .dicb u{position:absolute;top:5px;right:5px;width:7px;height:7px;border-radius:50%;
    background:#fff;border:1.5px solid #E23A22}
}

/* ═════════ заголовок страницы на компьютере ═════════ */

.phead{display:none}
@media (min-width:768px){
  .phead{display:flex;align-items:flex-end;gap:16px;padding:26px 24px 4px}
  .phead-t{min-width:0;flex:1}
  .phead h1{margin:0;font-size:27px;font-weight:700;letter-spacing:-.025em;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .phead p{margin:2px 0 0;font-size:13.5px;color:var(--sub)}
  .phead .btn{flex:0 0 auto}
  .phead-cog{flex:0 0 auto;width:40px;height:40px;margin-bottom:2px;border-radius:50%;
    display:grid;place-items:center;color:var(--sub);
    transition:background-color .14s ease,color .14s ease}
  .phead-cog:hover{background:var(--hover);color:var(--brand)}
}
@media (min-width:1280px){ .phead{padding:26px 36px 4px} }

/* ═════════ боковое меню: полоска со значками, от 1280px — полное ═════════ */

@media (min-width:768px){
  .side{position:sticky;top:var(--head);align-self:flex-start;
    height:calc(100vh - var(--head));width:80px;flex:0 0 80px;display:flex;
    flex-direction:column;background:var(--card);border-right:1px solid var(--line);
    padding:12px}
  .nav{display:flex;flex-direction:column;gap:4px}
  .nav a,.nav button{display:flex;align-items:center;justify-content:center;gap:12px;
    width:100%;padding:10px 0;border-radius:var(--r-el);color:var(--sub);
    font-size:14.5px;font-weight:600;text-align:left;position:relative;
    transition:background-color .14s ease,color .14s ease}
  .nav a:hover,.nav button:hover{background:var(--hover);color:var(--ink)}
  .nav .on,.nav .on:hover{background:var(--brand-50);color:var(--brand)}
  .nav span{display:none}
  .nav .cnt{display:none}
  /* Цифре замечаний на полоске значков места нет — показываем точкой. */
  .nav .cnt.bad{display:block;position:absolute;top:6px;right:20px;width:7px;height:7px;
    padding:0;border-radius:50%;background:var(--brand);font-size:0;overflow:hidden}
  .navlabel,.nav.other,.side .space{display:none}
  .side-btm{margin-top:auto}
  .me{display:flex;align-items:center;justify-content:center;gap:10px;padding:8px 6px;
    border-radius:var(--r-el);transition:background-color .14s ease}
  .me:hover{background:var(--hover)}
  .me .t{display:none}
  .me .ic{display:none}
  .ava{width:34px;height:34px;flex:0 0 auto;border-radius:50%;display:grid;place-items:center;
    font-size:12.5px;font-weight:700;color:#fff;
    background:linear-gradient(140deg,#F04E37,#DE3C24)}
}
@media (min-width:1280px){
  .side{width:252px;flex:0 0 252px;padding:16px}
  .nav a,.nav button{justify-content:flex-start;padding:10px 12px}
  .nav span{display:block;flex:1;min-width:0;white-space:nowrap;overflow:hidden;
    text-overflow:ellipsis}
  .nav .cnt{display:grid;place-items:center;min-width:19px;height:19px;padding:0 6px;
    border-radius:var(--r-pill);background:var(--sunken);color:var(--sub);
    font-size:11px;font-weight:700;font-style:normal;font-variant-numeric:tabular-nums}
  .nav .on .cnt{background:#fff;color:var(--brand)}
  .nav .cnt.bad{position:static;width:auto;height:19px;padding:0 6px;overflow:visible;
    background:var(--brand);color:#fff;font-size:11px}
  .nav .on .cnt.bad{background:#fff;color:var(--brand)}
  .navlabel{display:block;margin:16px 4px 0;padding:16px 8px 8px;
    border-top:1px solid var(--line);font-size:11px;font-weight:700;letter-spacing:.08em;
    text-transform:uppercase;color:var(--sub)}
  .nav.other{display:flex}
  .nav.other a,.nav.other button{padding:8px 12px;font-size:13.5px;font-weight:600}
  .nav.other .dot{width:8px;height:8px;flex:0 0 auto;border-radius:50%;display:block}
  .side .space{display:block}
  .me{justify-content:flex-start;padding:6px}
  .me .t{display:block;min-width:0;flex:1;line-height:1.25}
  .me .t b{display:block;font-size:13.5px;font-weight:700;white-space:nowrap;
    overflow:hidden;text-overflow:ellipsis}
  .me .t s{display:block;text-decoration:none;font-size:11.5px;color:var(--sub);
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .me .ic{display:block;color:var(--hint)}
}

/* ═════════ меню в шторке ═════════
   Раньше внизу висела таблетка с пятью значками. Теперь всё меню под
   шестерёнкой в шапке: низ экрана отдан моделям, а не полосе навигации. */

.menu{display:flex;flex-direction:column;gap:2px}
.menu a,.menu button{display:flex;align-items:center;gap:12px;width:100%;padding:11px 12px;
  border-radius:var(--r-el);color:var(--ink);font-size:15px;font-weight:600;text-align:left;
  transition:background-color .14s ease,color .14s ease}
.menu a:hover,.menu button:hover{background:var(--hover)}
.menu a.on{background:var(--brand-50);color:var(--brand)}
.menu a .ic,.menu button .ic{color:var(--sub)}
.menu a.on .ic{color:var(--brand)}
.menu span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.menu .cnt{display:grid;place-items:center;min-width:20px;height:20px;padding:0 6px;
  border-radius:var(--r-pill);background:var(--sunken);color:var(--sub);font-size:11.5px;
  font-weight:700;font-style:normal;font-variant-numeric:tabular-nums}
.menu .cnt.bad{background:var(--brand);color:#fff}
.menu .dot{width:8px;height:8px;flex:0 0 auto;border-radius:50%;margin:0 7px}
.menu-label{margin:14px 4px 6px;padding-top:14px;border-top:1px solid var(--line);
  font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--sub)}

/* Место на сервере. Живёт в двух местах — внизу бокового меню на компьютере
   и в шторке меню на телефоне, — поэтому вид описан здесь, а не в медиа-запросе. */
.space{display:block;margin-top:16px;padding:14px;border-radius:var(--r-card);
  background:var(--brand-50)}
.space b{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:700;
  color:var(--brand)}
.space .bar{height:5px;margin:10px 0 6px;border-radius:var(--r-pill);
  background:rgba(240,78,55,.16);overflow:hidden}
.space .bar i{display:block;height:100%;border-radius:var(--r-pill);background:var(--brand)}
.space s{display:block;text-decoration:none;font-size:11.5px;color:var(--sub);
  font-variant-numeric:tabular-nums}
/* Место на исходе: полоска и подпись становятся тревожными. Цифры мелкие и
   сами по себе в глаза не бросаются — о полном кабинете человек должен узнать
   в кабинете, а не от скрипта посреди отправки. */
.space.tight{background:var(--warn-50)}
.space.tight b{color:#B54708}
.space.tight .bar{background:rgba(247,144,9,.2)}
.space.tight .bar i{background:var(--warn)}
.space s.warn{margin-top:4px;color:#B54708;font-weight:600}

/* ═════════ отбор моделей ═════════ */

.chips{display:flex;gap:8px;padding:12px 16px 2px;overflow-x:auto;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chip{flex:0 0 auto;padding:6px 12px;border-radius:var(--r-pill);background:var(--sunken);
  color:var(--sub);font-size:12.5px;font-weight:600;white-space:nowrap;
  transition:background-color .14s ease,color .14s ease}
.chip.on{background:var(--brand-50);color:var(--brand)}
.chip .n{margin-left:5px;opacity:.7;font-variant-numeric:tabular-nums}
@media (min-width:768px){ .chips{padding:14px 24px 0} }
@media (min-width:1280px){ .chips{padding:14px 36px 0} }

/* ═════════ сетка и карточка модели ═════════ */

/* На телефоне поля по бокам тонкие: широкие съедали у снимка модели чуть не
   пятую часть ширины, а разглядеть в нём надо шкаф целиком. Совсем без полей
   карточка упирается в край экрана и выглядит обрезанной — 10 пикселей
   держат её на весу, но почти ничего не отнимают. */
.grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px;
  padding:12px 10px 40px}
.empty{grid-column:1/-1;padding:56px 20px;text-align:center;font-size:15px;font-weight:600}
.empty span{display:block;margin-top:4px;font-size:13px;font-weight:400;color:var(--sub)}

/* Колонкой: у карточек в ряду высота общая, а названия разной длины, и без
   этого кнопка «Раскроить» вставала на своей высоте в каждой — ряд кнопок
   шёл лесенкой. Прижимаем её к низу карточки. */
.mc{position:relative;display:flex;flex-direction:column;width:100%;min-width:0;
  overflow:hidden;text-align:left;
  padding:10px;border-radius:var(--r-card);background:var(--card);box-shadow:var(--shadow-card);
  transition:transform .14s cubic-bezier(.2,0,0,1),box-shadow .16s ease}
.mc:active{transform:scale(.985)}
.mc-open{display:block;color:inherit}
.mc-shot{position:relative;height:172px;border-radius:var(--r-el);overflow:hidden;
  background:linear-gradient(160deg,#F6F7F9,#E9ECF1)}
.mc-shot svg{width:100%;height:100%;display:block}
.mc-shot img{width:100%;height:100%;display:block;object-fit:cover}
.mc-shot.wait{background:linear-gradient(160deg,#FFF7EC,#FDEBD3)}
.mc-shot.wait svg{opacity:.5}
.mc-st{position:absolute;top:8px;left:8px;display:flex;align-items:center;gap:5px;
  padding:3px 9px;border-radius:var(--r-pill);background:rgba(255,255,255,.95);
  font-size:10.5px;font-weight:700;color:var(--ok)}
.mc-st i{width:6px;height:6px;border-radius:50%;background:var(--ok)}
.mc-st.wait{color:#B54708}
.mc-st.wait i{background:var(--warn)}
/* Название приходит из Базиса и бывает длинным. Даём ему две строки:
   обрывать «Кухня «Милан», верхний ряд» на полуслове незачем. */
.mc-nm{margin:10px 0 0;font-size:14.5px;font-weight:700;line-height:1.3;letter-spacing:-.01em;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.mc-meta{margin-top:3px;font-size:12px;color:var(--sub);font-variant-numeric:tabular-nums;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mc-foot{display:flex;align-items:center;flex-wrap:wrap;gap:6px;margin:10px 0;
  font-size:11.5px;color:var(--sub)}
.mc-foot .eye{display:flex;align-items:center;gap:4px}
/* Кружки поверх картинки: шестерёнка открывает шторку настроек, вторая
   кнопка копирует ссылку для заказчика — два самых частых действия под
   рукой. Удаление живёт в шторке: оно редкое и требует внимания. */
.mc-more,.mc-copy{position:absolute;top:18px;width:32px;height:32px;border-radius:50%;
  display:grid;place-items:center;background:rgba(255,255,255,.95);color:var(--ink);
  box-shadow:0 2px 8px rgba(16,24,40,.16);transition:color .14s ease,background-color .14s ease}
.mc-more{right:18px}
.mc-copy{right:58px}
.mc-more:hover,.mc-copy:hover{background:#fff;color:var(--brand)}
/* Раскрой — единственное действие карточки, и он стоит кнопкой во всю её
   ширину: со значком пилы, на палец высотой, обведённый по краю. Бледной
   плашкой в строке с просмотрами он читался как ярлык состояния — сосед
   «Готова» выглядел точно так же, и жать на него никто не думал. Цвет тот же,
   что у большой «Раскроить» внизу: одно дело — один вид, обведённая по краю
   всё равно оставалась бледной. Не спорит с ней за внимание высотой: 36 против
   54 у нижней. */
.mc-cut{display:flex;align-items:center;justify-content:center;gap:7px;margin-top:auto;
  height:36px;border-radius:12px;background:var(--brand);color:#fff;
  font-size:13.5px;font-weight:700;white-space:nowrap;
  transition:background-color .14s ease,transform .14s ease}
.mc-cut:hover{background:var(--brand-600)}
.mc-cut:active{transform:scale(.97)}

@media (min-width:768px){
  .grid{grid-template-columns:repeat(auto-fill,minmax(228px,1fr));gap:16px;
    padding:16px 24px 40px}
  .mc:active{transform:scale(.995)}
  .mc-shot{height:200px}
}
/* Окно браузера шире телефона, но ещё не компьютер. Две колонки раздували
   карточку на пол-экрана: снимок модели в ней уже ничего не добавлял, а на
   экран влезало полторы штуки. Пускаем карточки рядами по ширине, как на
   компьютере. */
@media (min-width:520px) and (max-width:767px){
  .grid{grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px;
    padding-left:16px;padding-right:16px}
  .segrow,.foldhead{padding-left:16px;padding-right:16px}
}
@media (min-width:1280px){ .grid{padding:16px 36px 40px} }
/* На широком мониторе строка с названием растягивалась во всю ширину, и
   кнопка «Загрузить модель» улетала к дальнему краю: от заголовка до неё
   было полэкрана пустоты, а карточки при этом жались слева. Держим
   содержимому такую же ширину, как у остальных страниц кабинета. */
@media (min-width:768px){
  .phead,.segrow,.foldhead,.foldnote,.grid,.folds{max-width:1160px}
}
@media (hover:hover) and (min-width:768px){
  .mc:hover{box-shadow:var(--shadow-lift);transform:translateY(-1px)}
}

/* ═════════ папки ═════════
   Папка — обычно объект целиком: жилой комплекс, дом, заказчик. Внутри
   позиции. Наверху списка — переключатель: слева все модели, дальше папки. */

.segrow{display:flex;align-items:center;padding:12px 16px 0}
/* Прямоугольнее таблетки внизу: та — меню, эта — переключение вида.
   Половинки равной ширины: две стороны одного переключателя. */
.seg{flex:1;min-width:0;display:flex;gap:4px;padding:4px;border-radius:14px;
  background:var(--sunken);overflow:hidden}
/* Половинки только сжимаются, наружу не лезут: полоса прокрутки рядом с
   переключателем — это всегда ошибка вёрстки, а не полезная вещь. */
.seg-b{overflow:hidden}
.seg-b{flex:1 1 0;min-width:0;display:inline-flex;align-items:center;justify-content:center;
  gap:6px;padding:9px 13px;border-radius:10px;color:var(--sub);font-size:13.5px;
  font-weight:600;white-space:nowrap;transition:background-color .14s ease,color .14s ease}
.seg-b .n{font-size:11.5px;opacity:.65;font-variant-numeric:tabular-nums}
.seg-b .ic{color:var(--hint)}
.seg-b.on{background:var(--card);color:var(--ink);box-shadow:0 1px 4px rgba(16,24,40,.12)}
.seg-b.on .ic{color:var(--brand)}

/* Завести папку — плавающая круглая кнопка справа снизу: под большим пальцем
   и всегда на виду, сколько бы папок ни было в списке. Подпись ей не нужна —
   красного круга с плюсом на экране больше нет, ни с чем не спутаешь. */
/* Завести папку — широкой кнопкой внизу, во всю ширину списка. Круглая с
   одним плюсом не говорила, что делает: на вкладке папок это единственное
   действие, и у него есть имя. */
.wfab{position:fixed;left:50%;transform:translateX(-50%);z-index:40;
  bottom:max(env(safe-area-inset-bottom,0px),16px);
  width:min(100% - 32px,500px);height:54px;border:0;border-radius:16px;
  display:flex;align-items:center;justify-content:center;gap:8px;
  background:var(--brand);color:#fff;box-shadow:var(--shadow-float);cursor:pointer;
  font:700 16px/1 var(--sans);
  transition:background-color .14s ease}
.wfab:hover{background:var(--brand-600)}
.wfab:active{background:var(--brand-600)}
@media (min-width:768px){ .wfab{bottom:24px} }

/* Список папок — вид «Папки». Строкой на папку: значок, название и сколько
   внутри. Пустая папка так и подписана: её только что завели, это нормально. */
.folds{display:grid;gap:10px;padding:12px 16px 86px}
/* Ячейке сетки по умолчанию нельзя быть уже своего содержимого, а название
   папки не переносится. Длинное название раздвигало колонку, и страница
   ехала вбок с полосой прокрутки. Разрешаем ячейкам сжиматься. */
.folds > *{min-width:0}
.fold{overflow:hidden}
.fold{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:var(--r-card);
  background:var(--card);box-shadow:var(--shadow-card);
  transition:transform .14s cubic-bezier(.2,0,0,1),box-shadow .16s ease}
.fold:active{transform:scale(.99)}
.fold-i{width:40px;height:40px;flex:0 0 auto;border-radius:12px;display:grid;place-items:center;
  background:var(--pc-bg,var(--brand-50));color:var(--pc,var(--brand))}
.fold-t{flex:1;min-width:0;line-height:1.25}
.fold-t b{display:block;font-size:14.5px;font-weight:700;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis}
.fold-t s{display:block;text-decoration:none;font-size:12px;color:var(--sub)}
.fold-c{color:var(--hint)}
@media (min-width:768px){
  .folds{grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px;padding:16px 24px 0}
}
@media (min-width:1280px){ .folds{padding:16px 36px 0} }
@media (hover:hover) and (min-width:768px){
  .fold:hover{box-shadow:var(--shadow-lift);transform:translateY(-1px)}
}

/* Заголовок списка моделей и вход в режим выбора. */
.foldhead{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:14px 16px 0}
.foldhead h2{margin:0;font-size:17px;font-weight:700;letter-spacing:-.01em}
.foldnote{margin:8px 16px 0;font-size:12.5px;line-height:1.5;color:var(--sub)}
@media (min-width:768px){
  .segrow{padding:14px 24px 0}
  .seg{max-width:420px}
  .foldhead{padding:16px 24px 0}
  .foldnote{margin:8px 24px 0}
  .newfold summary{height:100%}
}
@media (min-width:1280px){
  .segrow{padding:14px 36px 0}
  .foldhead{padding:16px 36px 0}
  .foldnote{margin:8px 36px 0}
}

/* «Выбрать» — справа в строке заголовка. */
/* Обе кнопки — порядок и выбор — стоят вместе у правого края. Порознь, когда
   одна жалась к заголовку, а другая к краю, они читались как разные вещи: на
   деле обе про этот список. Отодвигает их вправо первая. */
.pick-on{flex:0 0 auto;display:inline-flex;align-items:center;gap:5px}
.ord-on{flex:0 0 auto;display:inline-flex;align-items:center;gap:5px;margin-left:auto}
/* Когда порядок не показываем (в папке), вправо уезжает «Выбрать». */
.pick-on{margin-left:auto}
.ord-on ~ .pick-on{margin-left:0}
/* Настройка папки — тихим значком сразу за её счётом, без подложки: белая
   плашка делала из редкой настройки заметную кнопку, наравне с «Выбрать». */
.fact{flex:0 0 auto;width:30px;height:30px;margin-left:-2px;border-radius:9px;
  display:grid;place-items:center;background:none;box-shadow:none;border:0;
  color:var(--icon);cursor:pointer;transition:color .14s ease,background-color .14s ease}
.fact:hover,.fact:active{color:var(--brand);background:var(--hover)}
.foldhead h2 .n{font-size:13px;font-weight:600;color:var(--sub)}

/* Отметка на карточке. Появляется только в режиме выбора: в обычном списке
   галочки на каждой карточке — рябь в глазах. */
/* Отметка рисуется своя, а не системная: у каждого телефона она своего вида и
   размера, и на снимке модели пустой системный квадратик читался как непонятный
   значок — владелец так и сказал. Пустая — белый квадрат с тонкой рамкой,
   отмеченная — коралловый с белой галочкой; та же пара цветов, что и везде. */
.mc-pick{display:none}
body.picking .mc-pick{position:absolute;top:16px;left:16px;z-index:2;display:grid;
  place-items:center;width:32px;height:32px}
.mc-pick{position:relative}
.mc-pick input{appearance:none;-webkit-appearance:none;width:30px;height:30px;margin:0;
  border-radius:10px;background:rgba(255,255,255,.96);cursor:pointer;
  box-shadow:inset 0 0 0 1.6px #C9CED8, 0 2px 8px rgba(16,24,40,.18);
  transition:background-color .12s ease,box-shadow .12s ease}
/* Галочка нарисована двумя гранями рамки, повёрнутыми на 45°, а не картинкой
   внутри стиля: картинку в стиле старый телефон владельца молча не показал —
   квадрат краснел, а галочки в нём не было. Тут рисовать нечего, работает
   везде. Показываем её по классу отмеченной карточки, а не по :checked: класс
   ставит тот же пересчёт, что и подсветку, — значит галочка и рамка карточки
   не разойдутся никогда. */
.mc-pick::after{content:'';position:absolute;left:50%;top:47%;width:7px;height:13px;
  border:solid #fff;border-width:0 2.8px 2.8px 0;
  transform:translate(-50%,-50%) rotate(45deg);opacity:0;pointer-events:none}
body.picking .mc.on .mc-pick::after{opacity:1}
body.picking .mc.on .mc-pick input,.mc-pick input:checked{background:var(--brand);
  box-shadow:inset 0 0 0 1.6px var(--brand), 0 2px 8px rgba(240,78,55,.35)}
body.picking .mc{cursor:pointer}
body.picking .mc.on{outline:2px solid var(--brand);outline-offset:-1px}
/* В режиме выбора карточка целиком — переключатель, кнопки на ней только мешают. */
body.picking .mc-more,body.picking .mc-copy{pointer-events:none;opacity:.5}

/* Полоса переноса. Висит над нижним меню и только когда что-то отмечено. */
/* Полоса переноса видна только в режиме выбора. Держится на классе, а не на
   пометке hidden: пометку ставит скрипт, и до его загрузки полоса успевала
   мелькнуть внизу — «Перенести» стояло там, где никто ничего не выбирал. */
/* Ряд внизу: слева отдельный кружок с крестиком, справа сама полоса. Между
   ними просвет — выход не должен стоять вплотную к действиям. */
.pickrow{position:fixed;left:50%;transform:translateX(-50%);z-index:41;
  bottom:max(env(safe-area-inset-bottom,0px),16px);
  width:min(100% - 32px,500px);display:none;align-items:center;gap:10px;
  /* Высота ряда задана числом: и полоса, и крестик берут её отсюда, поэтому
     квадрат ровно с полосу при любом шрифте. */
  --pickh:54px}
body.picking .pickrow{display:flex}
/* Полоса — не одна белая плашка, а четыре отдельные кнопки в ряд: выход,
   папка, удаление и раскрой. Раскрой у правого края и во всю оставшуюся
   ширину: ради него модели и отмечают. */
.pickbar{flex:1 1 auto;min-width:0;display:none;align-items:center;gap:7px;
  padding:0;height:var(--pickh);background:none;box-shadow:none}
body.picking .pickbar{display:flex}
.pick-ic{flex:0 0 auto;width:var(--pickh);height:var(--pickh);padding:0;border:0;
  border-radius:14px;background:var(--card);color:var(--ink);
  box-shadow:var(--shadow-float);display:grid;place-items:center;cursor:pointer}
.pick-ic.dg{color:var(--brand)}
.pick-ic .ic{width:20px;height:20px}
.pick-cut{flex:1 1 auto;min-width:0;height:var(--pickh);border-radius:var(--r-card);
  box-shadow:var(--shadow-float);font-size:15px;gap:8px}
.pick-cut b{font-weight:800}
.pick-do:disabled{opacity:.45;cursor:default}
.pick-do:disabled:active{transform:none}
/* Отмена — первой в полосе, у левого края: выходят из выбора чаще, чем
   входят, и тянуться за этим в шапку неудобно. Кнопка нарочно тихая: она
   рядом с действиями, и перепутать её с ними нельзя. */
/* Квадрат со скруглёнными углами, а не круг: круглым он читался как ещё одна
   кнопка действия, а квадрат в ряду с ними один — форма и говорит, что это
   выход. Так же сделан возврат в схеме сборки. */
/* Ростом ровно с полосу и квадратный: ряд тянется по высоте, сторону задаёт
   пропорция. Прежние 44 точки были ниже полосы, и квадрат сидел в ней как
   вдавленный. */
.pick-off{flex:0 0 auto;width:var(--pickh);height:var(--pickh);padding:0;border:0;cursor:pointer;
  border-radius:14px;background:var(--card);color:var(--ink);
  box-shadow:var(--shadow-float);display:grid;place-items:center}
.pick-off .ic{width:19px;height:19px}
@media (max-width:430px){ .pickrow{gap:8px} .pickbar{gap:6px} }

/* ═════════ плавающие кнопки: матовое стекло ═════════

   Всё, что висит поверх списка — полоса выбора, ряд папки, кружки на
   карточке, отметка, — сделано полупрозрачным с размытием. Сквозь кнопку
   видно то, что под ней: она читается как стекло над списком, а не как
   заплатка, вырезанная поверх экрана. Размытие обязательно: без него
   прозрачная кнопка сливается с пёстрым снимком модели и надпись на ней
   теряется. Не поддержало размытие — останется просто светлая кнопка,
   ничего не сломается. */
.pick-off,.pick-ic,.fbar-back,.mc-more,.mc-copy,.mc-pick input{
  background:rgba(255,255,255,.82);
  -webkit-backdrop-filter:blur(14px) saturate(1.6);
  backdrop-filter:blur(14px) saturate(1.6)}
.mc-more:hover,.mc-copy:hover{background:rgba(255,255,255,.95)}

/* Кнопка, на которую сейчас нельзя нажать, всюду выглядит одинаково: бледной
   и без тени — тень обещает, что кнопка живая. Ничего не отмечено, значит
   «Раскроить» тускнеет и молчит. */
.btn:disabled,.pick-do:disabled,.fbar-cut:disabled,.fact:disabled{
  opacity:.45;box-shadow:none;cursor:default}
.btn:disabled:active,.pick-do:disabled:active,.fbar-cut:disabled:active{transform:none}

/* ═════════ открытая папка на телефоне ═════════

   Шапка одна на весь кабинет — знак сервиса, поиск и выход, — поэтому имя
   папки в неё не пишем: иначе шапка меняется на каждой странице. Имя и счёт
   моделей стоят своей строкой сразу под шапкой, по центру. Строка нажимается
   и открывает настройки папки: шестерёнку убрали, а переименовать или
   распустить папку изредка надо. */
/* Ряд действий папки внизу. Геометрия взята у полосы выбора: тот же квадрат
   «назад» отдельно слева, та же белая полоса с действиями справа, та же
   высота. Правило одно на весь кабинет — выход и возврат слева квадратом,
   действия рядом. Пока отмечают модели, ряд уходит: на его месте полоса
   выбора, и две полосы друг на друге не нужны. */
.fbar{--pickh:54px;position:fixed;left:50%;transform:translateX(-50%);z-index:40;
  bottom:max(env(safe-area-inset-bottom,0px),16px);
  width:min(100% - 32px,500px);display:flex;align-items:center;gap:10px}
body.picking .fbar{display:none}
.fbar-back{flex:0 0 auto;width:var(--pickh);height:var(--pickh);border-radius:14px;
  background:var(--card);color:var(--ink);box-shadow:var(--shadow-float);
  display:grid;place-items:center}
.fbar-back:active{background:var(--hover)}
.fbar-cut{flex:1 1 auto;min-width:0;height:var(--pickh);border-radius:var(--r-card);
  box-shadow:var(--shadow-float);font-size:15.5px}
.fbar-cut:disabled{opacity:.45;cursor:default}
.fbar-cut:disabled:active{transform:none}
/* Папка занимает всю ширину экрана. Имя стоит вплотную под шапкой, одним с
   ней блоком: зазор между ними читался как обрыв, а не как пауза. Карточки
   моделей растянуты до краёв — поля по бокам съедали у снимка чуть не
   пятую часть ширины, и модель в нём было не разглядеть.
   Под рядом кнопок нижняя карточка иначе прячется наполовину. */
#screen-models.infold .grid{padding-top:10px;padding-bottom:96px}
@media (min-width:768px){
  .fbar{display:none}
  #screen-models.infold .grid{padding-bottom:40px}
}
/* Отметка на самой кнопке «Выбрать»: по надписи не было видно, включён режим
   или нет, — а он меняет всё поведение списка. Квадратик тот же, что и на
   карточках, только меньше. Кнопка остаётся на виду и в режиме выбора: она и
   показывает состояние, и выключает его. */
.pick-on .tick{position:relative;flex:0 0 auto;width:18px;height:18px;border-radius:6px;
  background:#fff;box-shadow:inset 0 0 0 1.5px #C9CED8}
.pick-on.on{background:var(--brand-50);color:var(--brand)}
.pick-on.on .tick{background:var(--brand);box-shadow:inset 0 0 0 1.5px var(--brand)}
.pick-on.on .tick::after{content:'';position:absolute;left:50%;top:46%;width:4.5px;height:9px;
  border:solid #fff;border-width:0 2.2px 2.2px 0;transform:translate(-50%,-50%) rotate(45deg)}

/* Порядок списка. Нажатая кнопка — «по папкам», обычная — «по дате». */
.ord-on.on{background:var(--brand-50);color:var(--brand)}

/* Заголовок группы: день или папка. Плашка с названием и числом, а дальше
   тонкая черта во всю оставшуюся ширину — она и делит список, и не даёт
   заголовку висеть в пустоте. Серой строчкой он терялся между карточками:
   разбивка по дням тогда не читалась вовсе. Плашка папки — её цвета, как
   ярлычок на карточке; у дня — белая, как сами карточки. */
.gsep{grid-column:1/-1;display:flex;align-items:center;gap:10px;margin:12px 2px 2px}
.gsep:first-child{margin-top:2px}
/* Плашка дня — в фирменном тоне, бледной заливкой: белая сливалась с
   карточками, чёрная владельцу не нравится, а этот тон в кабинете уже есть и
   ни с чем не спорит — сплошным цветом здесь ничего не залито, залиты только
   кнопки. У папки плашка её собственного цвета, тем же способом. */
.gsep b{display:inline-flex;align-items:center;gap:7px;min-width:0;max-width:100%;
  padding:7px 14px;border-radius:var(--r-pill);background:var(--brand-50);
  color:var(--brand);font-size:14.5px;font-weight:800;letter-spacing:-.015em}
.gsep.pc b{background:var(--pc-bg);color:var(--pc)}
.gsep b span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gsep i{flex:0 0 auto;width:9px;height:9px;border-radius:50%;background:var(--pc,var(--hint))}
.gsep s{flex:0 0 auto;text-decoration:none;font-size:12.5px;font-weight:600;opacity:.6;
  font-variant-numeric:tabular-nums;white-space:nowrap}
.gsep u{flex:1 1 auto;height:1px;text-decoration:none;background:var(--line)}
.gsep.hid{display:none}
/* Правило «кнопки в полосе не растягиваются» осталось от прежней полосы, где
   их было две и обе по содержимому. Сейчас «Раскроить» обязана занимать всё
   оставшееся место до правого края — правило снято, осталась только тусклость
   у выключенных. */
.pickbar .btn[disabled]{opacity:.45;pointer-events:none}
@media (min-width:768px){
  .pickrow{bottom:24px;width:auto;left:auto;right:24px;transform:none}
  .pickbar{flex:0 0 auto}
}

/* В какой папке лежит модель — подписью на её карточке. */
/* Папка на плитке — ярлычком своего цвета, и лежит он на самом снимке, в
   нижнем углу. Серой строчкой под подписью папка читалась как ещё одна
   строка вроде числа деталей, а была она не у всех — и всё, что ниже,
   съезжало на строку, ряд выходил неровным. На снимке место у неё одно на
   всех карточках, а по цвету папку видно, не читая. */
.mc-fold{position:absolute;left:8px;bottom:8px;z-index:1;max-width:calc(100% - 16px);
  display:inline-flex;align-items:center;gap:5px;
  padding:3px 9px 3px 7px;border-radius:var(--r-pill);
  background:var(--pc-bg,var(--sunken));color:var(--pc,var(--sub));
  box-shadow:0 2px 8px rgba(16,24,40,.16);
  font-size:11px;font-weight:600}
.mc-fold .ic{flex:0 0 auto;color:currentColor}
.mc-fold span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Восемь цветов для папок. Считает их сервер по имени папки, поэтому одна
   папка везде одного цвета. Взяты спокойные: они метят, а не кричат, и ни
   один не спорит с фирменным коралловым — за ним в кабинете закреплено
   действие, и папке его отдавать нельзя. Первый ореховый: чаще всего папка —
   это объект, а объект у мебельщика из дерева. */
.pc[data-c="0"]{--pc:#8A5A2B;--pc-bg:#F5EDE3}
.pc[data-c="1"]{--pc:#1B7F4B;--pc-bg:#E8F6EE}
.pc[data-c="2"]{--pc:#2563D9;--pc-bg:#E9F1FE}
.pc[data-c="3"]{--pc:#6941C6;--pc-bg:#F1EDFE}
.pc[data-c="4"]{--pc:#0E7490;--pc-bg:#E2F4F7}
.pc[data-c="5"]{--pc:#B45309;--pc-bg:#FDF1DC}
.pc[data-c="6"]{--pc:#B42E62;--pc-bg:#FCE9F0}
.pc[data-c="7"]{--pc:#5F7A1B;--pc-bg:#F0F5E2}
.menu .ic.pc{color:var(--pc)}

/* ═════════ обычная страница ═════════ */

.page{padding:14px 16px 40px}
.page h2{margin:6px 0 4px;font-size:20px;font-weight:700;letter-spacing:-.02em}
.page p.sub{margin:0 0 16px;font-size:14px;line-height:1.5;color:var(--sub)}
@media (min-width:768px){
  .page{max-width:760px;padding:14px 24px 40px}
  /* Крупный заголовок страницы на компьютере рисует шапка, здесь он лишний. */
  .page > h2{display:none}
}
@media (min-width:1280px){ .page{padding:14px 36px 40px} }

.card{margin-bottom:14px;padding:16px;border-radius:var(--r-card);background:var(--card);
  box-shadow:var(--shadow-card)}
.card h3{margin:0 0 12px;font-size:16px;font-weight:700;letter-spacing:-.01em}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;
  padding:11px 18px;border-radius:var(--r-el);background:var(--brand);color:#fff;
  font-size:14.5px;font-weight:700;transition:background-color .14s ease,transform .14s ease}
.btn:hover{background:var(--brand-600)}
.btn:active{transform:scale(.98)}
.btn.wide{width:100%;margin-top:16px;padding:14px 18px;border-radius:14px;font-size:15px}
.btn.ghost{background:var(--card);color:var(--ink);box-shadow:inset 0 0 0 1px var(--line)}
.btn.ghost:hover{background:var(--hover)}
.btn.danger{background:var(--brand-50);color:var(--brand)}
.btn.danger:hover{background:#FFE3DC}
.btn.sm{padding:8px 14px;font-size:13px}

.fld{display:block;margin-bottom:14px}
.fld > span{display:block;margin-bottom:6px;font-size:13px;font-weight:600;color:var(--sub)}
.fld input[type=text],.fld input[type=password],.fld input[type=email]{
  width:100%;min-height:46px;padding:0 14px;border-radius:var(--r-el);
  border:1px solid var(--line);background:var(--card);color:var(--ink);font-size:15px;
  outline:none;transition:border-color .14s ease}
.fld input:focus{border-color:var(--brand)}
/* Выпадающий список — как поле ввода, со своей стрелкой: родная у браузеров
   разная, и рядом с нашими полями смотрится чужой. */
select{-webkit-appearance:none;appearance:none;width:100%;min-height:38px;padding:0 34px 0 12px;
  border-radius:var(--r-el);border:1px solid var(--line);background:var(--card);color:var(--ink);
  font:inherit;font-size:14px;outline:none;cursor:pointer;
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237C8496' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9.5l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 10px center;background-size:16px;
  transition:border-color .14s ease}
select:focus{border-color:var(--brand)}
.fld select{min-height:46px;font-size:15px}
.fld .note{display:block;margin-top:5px;font-size:12px;font-weight:400;color:var(--sub)}
.check{display:flex;align-items:flex-start;gap:11px;padding:11px 0;cursor:pointer}
.check input{width:20px;height:20px;margin:1px 0 0;flex:0 0 auto;accent-color:var(--brand)}
.check span{font-size:14px}
.check s{display:block;margin-top:2px;text-decoration:none;font-size:12px;color:var(--sub)}

.msg{margin-bottom:14px;padding:11px 14px;border-radius:var(--r-el);font-size:14px}
.msg.ok{background:var(--ok-50);color:#0B7A47}
.msg.err{background:var(--brand-50);color:var(--brand-700)}

.drop{width:100%;padding:34px 20px;border-radius:var(--r-card);border:2px dashed #D8DCE4;
  background:var(--card);text-align:center;color:var(--ink);
  transition:border-color .14s ease,background-color .14s ease}
.drop:hover{border-color:var(--brand);background:var(--brand-50)}
.drop .ic{width:34px;height:34px;color:var(--brand)}
.drop b{display:block;margin:10px 0 4px;font-size:15.5px;font-weight:700}
.drop s{display:block;text-decoration:none;font-size:13px;color:var(--sub)}

.keybox{margin-bottom:14px;padding:16px;border-radius:var(--r-card);background:var(--card);
  box-shadow:var(--shadow-card)}
.keybox > b{font-size:13px;font-weight:600;color:var(--sub)}
.keybox .k{margin:10px 0 12px;padding:12px 14px;border-radius:var(--r-el);
  background:var(--hover);font:600 15px/1.4 ui-monospace,Consolas,monospace;
  letter-spacing:.04em;word-break:break-all}

.help{font-size:13px;line-height:1.6;color:var(--sub)}
.help b{color:var(--ink)}
.help + .help{margin-top:12px}
code{padding:2px 6px;border-radius:6px;background:var(--sunken);
  font:12.5px/1.4 ui-monospace,Consolas,monospace}

.facts{display:grid;grid-template-columns:auto 1fr;gap:8px 16px;font-size:13.5px}
.facts dt{color:var(--sub)}
.facts dd{margin:0;font-variant-numeric:tabular-nums}
.facts code{background:var(--hover)}

.prog{margin-top:16px}
.prog .bar{height:8px;border-radius:var(--r-pill);background:var(--line);overflow:hidden}
.prog .bar i{display:block;height:100%;width:0;border-radius:var(--r-pill);
  background:var(--brand);transition:width .15s linear}
.prog s{display:block;margin-top:7px;text-decoration:none;font-size:13px;color:var(--sub)}

/* ═════════ отчёты о выгрузках ═════════
   Список того, что скрипт Базиса не смог прочитать. Спокойный вид: пугать не
   надо, надо чтобы прочли. Цветом помечено одно — потерянные кромки и детали
   без данных: только там наша ошибка стоит денег (деталь уедет незакатанной). */

.rept{width:100%;border-collapse:collapse;font-size:14px}
.rept th{padding:0 10px 8px 0;text-align:left;font-size:12px;font-weight:700;
  letter-spacing:.04em;text-transform:uppercase;color:var(--sub)}
.rept td{padding:12px 10px 12px 0;border-top:1px solid var(--line);vertical-align:top}
.rept .nw{white-space:nowrap}
.rept .kind{display:block;font-size:12px;font-style:normal;color:var(--sub)}
.rept .bad{color:var(--brand)}
.rept .fine{color:var(--ok)}
pre.rep{margin:12px 0 0;padding:14px;border-radius:var(--r-el);background:var(--hover);
  font:12.5px/1.55 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  white-space:pre-wrap;word-break:break-word;max-height:70vh;overflow:auto}
/* На телефоне четыре столбца в 375 пикселей не влезают и растягивают страницу
   вбок. Там таблица рассыпается в список: строка за строкой, кнопка снизу. */
@media (max-width:767px){
  .rept,.rept tbody,.rept tr,.rept td{display:block;width:100%}
  .rept thead{display:none}
  .rept tr{padding:12px 0;border-top:1px solid var(--line)}
  .rept tbody tr:first-child{border-top:0;padding-top:0}
  .rept td{padding:0 0 4px;border:0}
  .rept td:last-child{padding:8px 0 0}
}

/* ═════════ вход и рассказ о сервисе ═════════ */

.gate{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:6px;padding:32px 18px 60px}
.gate .mkline{display:block;font-size:22px;font-weight:800;letter-spacing:-.02em;
  color:var(--brand)}
.gate .sub{margin:0 0 18px;text-align:center;font-size:14px;line-height:1.5;color:var(--sub)}
.gate form{width:100%;max-width:380px;padding:20px;border-radius:var(--r-card);
  background:var(--card);box-shadow:var(--shadow-card)}
.gate .card{width:100%;max-width:420px;margin:0}
.gate .alt{margin-top:14px;font-size:13.5px;color:var(--sub)}
.gate .alt a{color:var(--brand);font-weight:600}

/* ═════════ шторка настроек модели ═════════
   Правки живут там же, где список: человек остаётся на своём месте, а не
   уезжает на отдельную страницу и обратно. На компьютере та же шторка — но
   окном посередине, снизу там ей делать нечего. */

.sheet{position:fixed;inset:0;z-index:80;display:flex;align-items:flex-end;
  justify-content:center;background:rgba(16,24,40,.5);backdrop-filter:blur(2px)}
.sheet[hidden]{display:none}
.sheet-box{width:100%;max-width:520px;max-height:88vh;overflow-y:auto;text-align:left;
  padding:8px 16px calc(env(safe-area-inset-bottom,0px) + 20px);
  border-radius:22px 22px 0 0;background:var(--card);
  animation:sheet-in .22s cubic-bezier(.2,0,0,1)}
@keyframes sheet-in{from{transform:translateY(16px);opacity:0}}
.sheet-grab{display:block;width:38px;height:4px;margin:6px auto 14px;border-radius:2px;
  background:#DDE1E8;border:0;padding:0}
.sheet-head{margin-bottom:14px}
.sheet-head b{display:block;font-size:17px;font-weight:700;letter-spacing:-.01em}
.sheet-head s{display:block;margin-top:2px;text-decoration:none;font-size:12.5px;
  color:var(--sub);font-variant-numeric:tabular-nums}
.sheet-row{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}
/* «Сохранить» и «Удалить» — одной строкой, поровну. Друг под другом во всю
   ширину они читались как два шага подряд, а это выбор: одно или другое. */
.sheet-btns{display:flex;gap:8px;margin-top:16px}
.sheet-btns .btn{flex:1 1 0;min-width:0;padding:13px 10px;border-radius:14px;font-size:14.5px}
.sheet-box .btn.wide{margin-top:6px}
.sheet-box form + form{margin-top:10px}
/* Короткие формы — «Новая папка», настройки папки — выходят окном посередине,
   а не полосой снизу. В них одно поле и одна кнопка: снизу такое окно
   читается как обрывок списка, а посередине — как вопрос, на который сейчас
   ответят. Закрывается крестиком в углу, нажатием мимо и клавишей Esc. */
.sheet.mid{align-items:center;padding:20px}
.sheet.mid .sheet-box{position:relative;max-width:400px;border-radius:20px;
  padding:18px 18px 20px;animation:mid-in .2s cubic-bezier(.2,0,0,1)}
@keyframes mid-in{from{transform:scale(.96);opacity:0}}
.sheet.mid .sheet-head{padding-right:34px;min-height:22px}
/* Полоску-ручку в окне посередине тянуть некуда — она становится крестиком,
   квадратным, как везде в кабинете. */
.sheet.mid .sheet-grab{position:absolute;top:10px;right:10px;width:32px;height:32px;
  margin:0;border-radius:11px;background:none;color:var(--sub)}
.sheet.mid .sheet-grab::before,.sheet.mid .sheet-grab::after{content:'';position:absolute;
  top:15px;left:8px;width:16px;height:2px;border-radius:2px;background:currentColor}
.sheet.mid .sheet-grab::before{transform:rotate(45deg)}
.sheet.mid .sheet-grab::after{transform:rotate(-45deg)}
.sheet.mid .sheet-grab:active{background:var(--hover)}

/* Пока шторка открыта, список под ней не ездит. */
body.sheeted{overflow:hidden}
@media (min-width:768px){
  .sheet{align-items:center;padding:20px}
  .sheet-box{border-radius:20px;max-height:84vh;padding:8px 20px 20px}
}

/* ═════════ уведомление и переспрос ═════════ */

.toast{position:fixed;left:50%;bottom:26px;z-index:90;max-width:calc(100% - 32px);
  padding:11px 18px;border-radius:var(--r-pill);background:var(--ink);color:#fff;
  font-size:14px;text-align:center;opacity:0;pointer-events:none;
  transform:translateX(-50%) translateY(12px);box-shadow:var(--shadow-float);
  transition:opacity .2s,transform .2s}
.toast.on{opacity:1;transform:translateX(-50%) translateY(0)}
@media (min-width:768px){ .toast{bottom:28px} }

/* Своё окно вместо серого окошка браузера: то на телефоне выглядит чужим,
   и в нём не показать, какую именно модель собираются удалить. */
.ask{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:20px;
  background:rgba(16,24,40,.5);backdrop-filter:blur(2px)}
.ask[hidden]{display:none}
.ask-box{width:100%;max-width:380px;padding:22px;border-radius:20px;background:var(--card);
  box-shadow:0 20px 50px rgba(16,24,40,.3);animation:ask-in .16s ease-out}
@keyframes ask-in{from{transform:translateY(10px) scale(.98);opacity:0}}
.ask-box h3{margin:0 0 8px;font-size:19px;font-weight:700;letter-spacing:-.02em}
.ask-box p{margin:0;font-size:14px;line-height:1.5;color:var(--sub)}
.ask-box p b{color:var(--ink)}
.ask-row{display:flex;gap:10px;margin-top:20px}
.ask-row .btn{flex:1}

@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
}