/* Палитра и шрифт сняты с atms.ru кодом, а не на глаз: графит #323435 —
   заголовки и кнопки, сталь #84aec9 — единственный акцент, коралл #ff8562 —
   редкая подсветка, фон тёплый серый, Montserrat и кнопки-пилюли.
   Менеджер должен видеть инструмент своей компании, а не чужой. */

/* Montserrat грузится в index.html без блокировки отрисовки, а не через
   @import отсюда. 2026-09-30: @import в начале файла останавливал показ
   страницы до ответа fonts.googleapis.com, и если Google молчит (не отказ,
   а тишина), менеджер видит вечную загрузку на пустом экране. Ни одна
   внешняя ссылка не имеет права держать страницу — шрифт тем более.
   Запасная гарнитура в body ниже: без Montserrat сайт некрасив, но работает. */

:root{
  --bg:#f2f2f2;--surf:#fff;--surf2:#f8f8f7;--brd:#e4e4e4;--brd2:#c9cacb;
  --tx:#323435;--tx2:#6b6d6e;--tx3:#9a9c9d;
  --acc:#84aec9;--acc2:#6995b1;--acc-l:#eaf1f6;
  --coral:#ff8562;
  --ok:#3a7d44;--ok-l:#e8f4eb;--err:#c42a2a;--err-l:#f5dede;
  --blue:#6995b1;--blue-l:#eaf1f6;
  --sh:0 1px 3px rgba(50,52,53,.07),0 4px 12px rgba(50,52,53,.05);
  --sh2:0 8px 32px rgba(50,52,53,.14);--r:8px;--rl:14px;--rp:30px;
}
*{box-sizing:border-box;margin:0;padding:0}
/* Собственный display у .app и .who сильнее браузерного [hidden]{display:none},
   и без этой строки экран входа показывался вместе с самим сайтом. */
[hidden]{display:none !important}
body{font-family:'Montserrat',-apple-system,Segoe UI,sans-serif;background:var(--bg);color:var(--tx);
  min-height:100vh;line-height:1.5}

header{background:var(--tx);color:#fff;padding:14px 28px;display:flex;align-items:center;gap:14px;
  position:sticky;top:0;z-index:100;box-shadow:0 2px 16px rgba(0,0,0,.18)}
.logo{width:38px;height:38px;background:var(--acc);border-radius:50%;display:flex;align-items:center;
  justify-content:center;font-size:17px;font-weight:700;color:#fff;flex-shrink:0;overflow:hidden}
.logo img{width:100%;height:100%;object-fit:cover;display:block}
header h1{font-size:15px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.who{margin-left:auto;display:flex;align-items:center;gap:12px;font-size:12.5px;color:rgba(255,255,255,.65)}
.linkbtn{background:none;border:none;color:rgba(255,255,255,.45);font-family:inherit;font-size:12px;
  cursor:pointer;text-decoration:underline;padding:0}
.linkbtn:hover{color:#fff}

.gate{max-width:440px;margin:60px auto;padding:0 20px}
.gate-card{padding:26px}
/* Пояснение в карточке входа — отдельный абзац, а не подпись поля: без отступа
   снизу оно слипалось с «ФАМИЛИЯ И ИМЯ» и читалось как одна строка. */
.gate-card>.hint{margin-bottom:18px}
.app{max-width:1280px;margin:0 auto;padding:24px 20px 80px;display:grid;grid-template-columns:230px 1fr;gap:24px;align-items:start}

.nav{display:flex;flex-direction:column;gap:6px;position:sticky;top:90px}
.nav-item{display:flex;align-items:center;gap:10px;padding:11px 14px;border-radius:var(--r);
  background:none;border:1px solid transparent;font-family:inherit;font-size:14px;color:var(--tx2);
  cursor:pointer;text-align:left;transition:all .15s}
.nav-item:hover{background:var(--surf);border-color:var(--brd)}
.nav-item.active{background:var(--surf);border-color:var(--brd);color:var(--tx);font-weight:500;box-shadow:var(--sh)}
.nav-item.active .nav-ic{filter:none}
.nav-ic{font-size:16px}
.nav-note{font-size:11px;color:var(--tx3);padding:14px 14px 0;line-height:1.6}

.grid{display:grid;grid-template-columns:400px 1fr;gap:22px;align-items:start}
.card{background:var(--surf);border:1px solid var(--brd);border-radius:var(--rl);padding:22px;
  box-shadow:var(--sh);margin-bottom:18px}
.ctitle{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;margin-bottom:18px;
  padding-bottom:11px;border-bottom:1px solid var(--brd);color:var(--tx)}
.fld{margin-bottom:14px}
.lbl{display:block;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;
  color:var(--tx2);margin-bottom:5px}
.hint{font-size:11.5px;color:var(--tx3);margin-top:6px;line-height:1.6}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.row3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}

select,input[type=number],input[type=text],input[type=password]{width:100%;padding:9px 11px;
  border:1px solid var(--brd);border-radius:var(--r);font-family:inherit;font-size:13.5px;
  background:var(--surf2);color:var(--tx);appearance:none;transition:border-color .15s,box-shadow .15s}
select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='6'%3E%3Cpath d='M1 1l4.5 4L10 1' stroke='%236b6d6e' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 11px center;padding-right:30px;margin-top:8px}
select:focus,input:focus{outline:none;border-color:var(--acc);box-shadow:0 0 0 3px var(--acc-l)}

.seg{display:flex;gap:0;border:1px solid var(--brd);border-radius:var(--r);overflow:hidden;background:var(--surf2)}
.seg-b{flex:1;padding:9px 6px;background:none;border:none;font-family:inherit;font-size:13px;
  color:var(--tx2);cursor:pointer;transition:all .15s}
.seg-b+.seg-b{border-left:1px solid var(--brd)}
.seg-b.active{background:var(--acc2);color:#fff;font-weight:600}

/* Фильтр видов расчёта: кнопок шесть, и подписи у них длинные («Расчёт сборки»).
   В обычной `.seg` с flex:1 на телефоне от них остались бы первые буквы —
   здесь кнопки по содержимому и переносятся на вторую строку. */
.seg.segw{flex-wrap:wrap;gap:6px;border:none;background:none;overflow:visible;margin-bottom:4px}
.seg.segw .seg-b{flex:0 0 auto;padding:7px 13px;border:1px solid var(--brd);
  border-radius:var(--rp);background:var(--surf2)}
.seg.segw .seg-b.active{background:var(--acc2);color:#fff;border-color:var(--acc2)}

/* Голубой — умолчание для любой кнопки, а не привилегия «Посчитать». Четыре
   кнопки расчёта по сделке стояли с одним `.btn` и выезжали белыми. */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:9px 18px;
  border-radius:var(--rp);font-family:inherit;font-size:13.5px;font-weight:600;cursor:pointer;
  border:none;transition:all .15s;background:var(--acc2);color:#fff}
.btn:hover{background:#587f99}
.btn:disabled{background:var(--brd2);cursor:default}
.btn-p{width:100%;padding:13px;font-size:14px;margin-top:8px}
/* Подтверждение отличается цветом от расчёта: «Посчитать» можно жать сколько
   угодно, «Залить в 1С» заводит номенклатуру и нажимается один раз. */
.btn-a{background:#3f6c8b;color:#fff}
.btn-a:hover{background:#345b76}

.empty{color:var(--tx3);font-size:13.5px;text-align:center;padding:26px 22px 34px}
/* Маскот компании. Картинка декоративная: alt пустой, читалка её пропустит,
   а смысл несёт текст рядом. */
.empty-cat{width:100%;max-width:330px;border-radius:var(--rl);display:block;margin:0 auto 16px}
.empty-cat.small{max-width:150px}
.gate-cat{display:block;height:130px;margin:0 auto 6px}

/* Строка истории кликабельна: подставляет параметры в форму и пересчитывает. */
tr.hrow{cursor:pointer}
tr.hrow:hover{background:var(--acc-l)}
td small{color:var(--tx3);font-size:11px}

.result .price-main{background:var(--tx);border-radius:var(--rl);padding:20px 24px;margin-bottom:18px}
.price-lbl{font-size:10px;text-transform:uppercase;letter-spacing:.1em;color:rgba(255,255,255,.4);margin-bottom:4px}
.price-val{font-size:38px;font-weight:800;color:var(--coral);line-height:1.1;letter-spacing:-.01em}
.price-unit{font-size:13px;font-weight:500;color:rgba(255,255,255,.45)}
.facts{display:flex;flex-direction:column;gap:9px;margin-bottom:18px}
.fact{display:flex;gap:14px;font-size:13.5px;align-items:baseline}
.fact-l{flex:0 0 78px;font-size:11px;text-transform:uppercase;letter-spacing:.07em;color:var(--tx3)}
.fact-v{color:var(--tx)}
.nomen{background:var(--surf2);border:1px solid var(--brd);border-radius:var(--r);padding:12px 14px;margin-bottom:14px}
.nomen-val{font-size:13px;line-height:1.6;word-break:break-word}

.fw-breakdown-title{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.09em;
  color:var(--tx3);margin-bottom:10px}
.fw-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:10px}
.fw-card{background:var(--surf2);border:1px solid var(--brd);border-radius:var(--rl);padding:14px 18px;
  position:relative;overflow:hidden}
.fw-card::before{content:'';position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--acc)}
.fw-card-w{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--tx3);margin-bottom:4px}
.fw-card-m{font-size:28px;font-weight:700;color:var(--tx);line-height:1}
.fw-card-unit{font-size:12px;color:var(--tx3);margin-left:2px}
.fw-card-rows{font-size:11px;color:var(--tx3);margin-top:5px}

.dz{border:2px dashed var(--brd2);border-radius:var(--rl);padding:34px 14px;text-align:center;
  cursor:pointer;transition:all .2s;background:var(--surf2)}
.dz:hover,.dz.over{border-color:var(--acc);background:var(--acc-l)}
.dz-ic{font-size:28px}
.dz p{font-size:13.5px;color:var(--tx2);margin-top:10px}
.dz strong{color:var(--acc2)}
.dz small{font-size:11.5px;color:var(--tx3);display:block;margin-top:6px}

.sumbar{background:var(--tx);color:#fff;border-radius:var(--rl);padding:18px 26px;display:flex;
  align-items:center;gap:28px;flex-wrap:wrap;margin-bottom:18px;box-shadow:var(--sh2)}
.si{display:flex;flex-direction:column;gap:2px}
.sl{font-size:10px;text-transform:uppercase;letter-spacing:.1em;color:rgba(255,255,255,.4)}
.sv{font-size:28px;font-weight:700;color:#fff}
.sv.ac{color:var(--coral)}
.ss{width:1px;height:46px;background:rgba(255,255,255,.1)}
.sn{font-size:11px;color:rgba(255,255,255,.42);line-height:1.7}

.tw{overflow-x:auto;border-radius:var(--rl);border:1px solid var(--brd)}
table{width:100%;border-collapse:collapse;font-size:12.5px}
thead th{background:var(--tx);color:rgba(255,255,255,.82);font-size:10px;font-weight:500;
  text-transform:uppercase;letter-spacing:.08em;padding:10px;text-align:left;white-space:nowrap}
tbody tr{border-bottom:1px solid var(--brd)}
tbody tr:last-child{border-bottom:none}
tbody tr:hover{background:var(--surf2)}
td{padding:8px 10px;vertical-align:middle}
td.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
/* Дата и адрес занимают ровно свою ширину, остаток забирает соседний столбец. */
td.tight{width:1%;text-align:left;font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--tx2)}
td.res{background:var(--acc-l);color:var(--tx);font-weight:700;text-align:right;
  font-variant-numeric:tabular-nums;white-space:nowrap}
tr.warn td{color:var(--tx3)}

/* Детализация расчёта сборки под строкой «Расчётов менеджеров». Раскрывается
   не всякая строка, поэтому курсор-палец и галочка стоят только там, где
   раскрывать есть что: иначе половина списка выглядит нажимаемой и молчит. */
tr.op{cursor:pointer}
.op-a{display:inline-block;width:9px;color:var(--tx3);font-size:9px;margin-right:5px}
tr.op.open .op-a{color:var(--acc2)}
tr.dt-row:hover{background:none}
td.dt{padding:0;background:var(--surf2)}
.dt-in{padding:14px 16px}
.dt-h{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.09em;
  color:var(--tx3);margin-bottom:9px;display:flex;align-items:center;gap:10px}
/* Кнопка выгрузки прижата вправо и нарочно не кричит: это служебное действие
   отдела закупок, а не то, ради чего открывают строку. */
.dt-x{margin-left:auto;text-transform:none;letter-spacing:0;font-size:11px;
  color:var(--acc2);text-decoration:none;border:1px solid var(--brd2);
  border-radius:var(--r);padding:3px 9px;white-space:nowrap}
.dt-x:hover{background:var(--surf);border-color:var(--acc2)}
.dt-in table{background:var(--surf);border-radius:var(--rl);overflow:hidden;font-size:12px}
.dt-in thead th{font-size:9.5px}
/* Итоги. Сборка мебели и вырезы — слагаемые, «всего» — их сумма, и выделено
   одно: это то число, которое называют клиенту. */
.dt-f{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}
.dt-c{flex:1 1 150px;background:var(--surf);border:1px solid var(--brd);
  border-radius:var(--rl);padding:10px 13px}
.dt-c.main{background:var(--tx);border-color:var(--tx)}
.dt-l{font-size:9.5px;text-transform:uppercase;letter-spacing:.1em;color:var(--tx3);margin-bottom:4px}
.dt-c.main .dt-l{color:rgba(255,255,255,.45)}
.dt-v{font-size:17px;font-weight:700;color:var(--tx);font-variant-numeric:tabular-nums}
.dt-c.main .dt-v{color:#fff}
.dt-n{font-size:10.5px;color:var(--tx3);margin-top:3px}
.dir-badge{display:inline-block;padding:2px 7px;border-radius:20px;font-size:10px;font-weight:600;white-space:nowrap}
.dir-L{background:#e8f4eb;color:#2a6a38}
.dir-C{background:var(--acc-l);color:#3d6b8a}

/* Сотрудники: галочка прав, пароль «один раз» и кнопки в строке таблицы. */
.chk{display:flex;gap:9px;align-items:flex-start;font-size:12.5px;color:var(--tx2);
  line-height:1.5;margin-bottom:14px;cursor:pointer}
.chk input{width:15px;height:15px;margin-top:1px;flex-shrink:0;accent-color:var(--acc2)}
/* Пароль диктуют вслух, поэтому крупно и моноширинным: «rn» против «m» на
   12 пикселях различают не все, а ошибка в одном знаке — это звонок Алёне. */
.pw{background:var(--tx);border-radius:var(--rl);padding:16px 20px;margin-bottom:12px}
.pw-l{font-size:10px;text-transform:uppercase;letter-spacing:.1em;color:rgba(255,255,255,.4);margin-bottom:6px}
.pw-v{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:26px;
  font-weight:700;color:var(--coral);letter-spacing:.06em;user-select:all}
.pw-n{font-size:11.5px;color:rgba(255,255,255,.45);line-height:1.6;margin-top:8px}
td.act{width:1%;white-space:nowrap;text-align:right}
td.act .btn{padding:5px 11px;font-size:11.5px;margin-left:6px}
/* Единственная кнопка не голубая: «Удалить» — необратимое действие, и цвет
   здесь предупреждение, а не оформление. */
.btn-d{background:var(--err-l);color:var(--err)}
.btn-d:hover{background:#eecaca}

.problems{list-style:none;font-size:12.5px;color:var(--tx2);line-height:1.8}
.problems li::before{content:'• ';color:var(--coral)}

.al{padding:11px 14px;border-radius:var(--r);font-size:12.5px;margin-bottom:12px;line-height:1.6;white-space:pre-line}
.al-w{background:#fef9ec;border:1px solid #f0d78d;color:#7a5a00}
.al-e{background:var(--err-l);border:1px solid #e8b3b3;color:var(--err)}
.al-o{background:var(--ok-l);border:1px solid #a8d5b0;color:var(--ok)}

/* Инструкция. Свой кегль, а не .hint: подпись под полем выхватывают глазом,
   а инструкцию читают подряд, и 11.5 серым на этом абзаце не живёт. */
.help-hero{display:flex;gap:24px;align-items:flex-start}
.help-cat{width:200px;flex-shrink:0}
.htext{font-size:13.5px;color:var(--tx2);line-height:1.75;margin-bottom:10px}
.htext:last-child{margin-bottom:0}
.htext strong,.steps strong,.qa dd strong{color:var(--tx);font-weight:600}
/* Строка-пример набрана так же, как её наберёт менеджер, — её копируют. */
.ex{display:block;margin:8px 0;padding:9px 12px;background:var(--surf2);border-left:2px solid var(--acc);
  border-radius:var(--r);font-size:13px;color:var(--tx)}
.steps{list-style:none;counter-reset:s}
.steps li{counter-increment:s;position:relative;padding:0 0 15px 40px;font-size:13.5px;color:var(--tx2);line-height:1.75}
.steps li:last-child{padding-bottom:0}
.steps li::before{content:counter(s);position:absolute;left:0;top:2px;width:25px;height:25px;border-radius:50%;
  background:var(--acc-l);color:var(--acc2);font-size:12px;font-weight:700;
  display:flex;align-items:center;justify-content:center}
.qa{font-size:13.5px;color:var(--tx2);line-height:1.75}
.qa dt{color:var(--tx);font-weight:600;margin-top:16px}
.qa dt:first-child{margin-top:0}
.qa+.htext{margin-top:14px}
/* Значок повторяет пункт меню, на который ссылается заголовок: отступ руками,
   потому что после эмодзи пробел в строке схлопывается почти в ноль. */
.qa dt .ic{margin-right:7px}

@media (max-width:1000px){
  .app{grid-template-columns:1fr}
  .nav{flex-direction:row;flex-wrap:wrap;position:static}
  .nav-note{display:none}
  .grid{grid-template-columns:1fr}
  .help-hero{flex-direction:column;align-items:center;text-align:left}
  .help-cat{width:150px;align-self:center}
}