/* Вид кабинета «Сталь» (его выбор 22.10 из трёх вариантов; прежний «Светлый» 14.10 — look/theme-current.css, варианты — look/*.css).
   Подключается ПОСЛЕДНИМ и перекрывает lk.css / kab.css / order.css: тёмная шапка с красной чертой как на сайте, стальной серый фон,
   белые панели на мягкой тени без рамок, подписи заглавными, крупные цифры в столбик, красные номера шагов в «Как заказать». */
:root{--soft:#E8EBEE;--line:#D8DCE1;--muted:#5F6770;--sh:0 1px 2px rgba(16,24,32,.10),0 10px 28px -14px rgba(16,24,32,.22)}
body{background:var(--soft);font-variant-numeric:tabular-nums}
::selection{background:rgba(200,33,44,.22)}
*{scrollbar-width:thin;scrollbar-color:#9AA2AB transparent}
.loading{color:var(--muted)}

/* шапка — тёмная, как на сайте, с красной чертой */
.top,.bar-top,.gate .bar-top{background:var(--ink);color:#fff;border-bottom:3px solid var(--red)}
.top .logo img{content:url(/brand/logo_sm_dark.svg)}
.nav{gap:4px}
.nav .navlink,.nav button{color:rgba(255,255,255,.72);font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;padding:10px 12px;border-radius:3px;border:0;margin:0}
.nav .navlink:hover,.nav button:hover{color:#fff;background:rgba(255,255,255,.08)}
.nav .navlink.on,.nav button.on{background:#fff;color:var(--ink)}
.nav .navlink.help{color:rgba(255,255,255,.55)}
.nav .navlink.help.on{color:var(--ink)}
.top .nav-find input{border-radius:3px}
.top .out{border-radius:3px}
.top .firm select{border-radius:3px}

/* заголовки и подписи */
h1,.hm-hello h1,.mo-top h1{font-size:28px;font-weight:800;letter-spacing:-.01em}
.hm-hello h1{margin-top:26px}
.hm-head,.mo section h2,.oc-hd,.lab,.chips .lab,.field span,.sh-wh,.tm-strip small,.mo-lab,.firms b{text-transform:uppercase;letter-spacing:.12em;font-size:10.5px;font-weight:800;color:var(--muted)}
.hm-big{font-size:32px;letter-spacing:-.02em;line-height:1.1;margin:6px 0 4px}
.hm-sum,.mo-sum,.mo-lines td.n,.hm-list{font-variant-numeric:tabular-nums}

/* панели — белые, на тени, без рамок */
.hm-notice,.hm-tile,.hm-contact,.mo-card,.head,.oc-tile,.oc-rows,.sh-m,.card,.panel,.tm-strip,.tm-firm,.tm-person,.hw-step,.hw-faq details,.mo-empty,.empty{border:0;border-radius:4px;box-shadow:var(--sh)}
.hm-tile.ready,.hm-tile.late,.hm-tile.work,.mo-card.ready,.hm-tile.money{border:0;box-shadow:var(--sh)}
.hm-tile{padding:16px 18px}
.hm-tile.ready .hm-head{color:#1a6a2c}.hm-tile.work .hm-head{color:#a24d00}.hm-tile.late .hm-head{color:#a32020}
.hm-tile.ready .hm-head::before,.hm-tile.work .hm-head::before,.hm-tile.late .hm-head::before{content:"";display:inline-block;width:8px;height:8px;background:currentColor;margin-right:8px;vertical-align:1px}
.hm-tile.empty .hm-big{font-size:18px}
.hm-notice{border-radius:4px}
.hm-notice.warn{background:#FFF4D6;border:0}
.hm-notice.ok{background:#E6F4EA;border:0}
.hm-list{border-top:1px solid var(--line)}
.hm-contact{margin-top:4px}

/* кнопки — фирменные, заглавными; на главной в один ряд */
.btn{border-radius:3px}
.hm-acts{gap:10px;margin:0 0 20px}
.hm-acts .btn,.hw-back .btn{flex:0 0 auto;width:auto;min-height:46px;padding:0 22px;font-size:12px}
.hw-back{flex-wrap:wrap}.hw-back .btn{text-decoration:none}
.btn.o{border:2px solid var(--ink);background:#fff}
.btn.sm{padding:6px 12px}
.gate .btn{color:#fff}.gate .btn.o{color:var(--ink)}

/* статусы — прямоугольные метки заглавными */
.mo-st{border-radius:2px;text-transform:uppercase;letter-spacing:.06em;font-size:11px;padding:4px 8px}
.mo-old.mo-done summary h2{border-radius:3px;text-transform:uppercase;letter-spacing:.08em}
.mo-car{border-radius:3px}

/* каталог */
.head{padding:16px 18px}
.oc-tile{padding:12px}
.oc-tile:hover{border:0;box-shadow:0 0 0 2px var(--ink),var(--sh)}
.chip{border-radius:3px}
.inp,.search input,.step,.step .q{border-radius:3px}
.oc-hd{background:#F3F4F6}
.bar{border-top:3px solid var(--red)}

/* отгрузки, вход */
.sh-c,.sh-ship{border-radius:3px}
.card{border-radius:4px;padding:28px 26px}
.field input{border-radius:3px}
.note,.msg{border-radius:3px}

/* «Как заказать» — крупные красные номера шагов, толстая линия у второго раздела */
.hw-main h1{font-size:30px;margin-top:26px}
.hw-sub{max-width:72ch}
.hw-steps{gap:14px}
.hw-step{padding:20px 22px;grid-template-columns:minmax(240px,40%) 1fr;gap:26px}
.hw-txt{padding-left:64px}
.hw-n{background:none;color:var(--red);width:auto;height:auto;font-size:44px;font-weight:800;line-height:.9;top:-2px;letter-spacing:-.04em;display:block}
.hw-txt h2{font-size:19px;margin:6px 0 8px}
.hw-txt p{font-size:14.5px;line-height:1.6}
.hw-pic.shot img{border:1px solid var(--line);border-radius:2px}
.hw-h2{text-transform:uppercase;letter-spacing:.06em;font-size:18px;margin-top:40px;padding-top:18px;border-top:3px solid var(--ink)}
.hw-faq{margin-top:28px}
.hw-faq h2{text-transform:uppercase;letter-spacing:.06em;font-size:15px}
.hw-faq details{border-radius:4px}
/* телефон и планшет: меню переносится на вторую строку (не вылезает за экран), заголовки меньше, шаги инструкции в одну колонку */
@media (max-width:760px){.nav{flex-wrap:wrap;gap:2px 4px}.nav .navlink,.nav button{padding:8px 10px;font-size:11px}.nav .navlink.help{margin-left:0}}
@media (max-width:720px){h1,.hm-hello h1,.mo-top h1,.hw-main h1{font-size:22px}}
@media (max-width:640px){.hw-step{grid-template-columns:1fr;padding:16px}.hw-txt{padding-left:0}.hw-n{position:static;font-size:32px;line-height:1;margin-bottom:4px}}

/* плитки сводки: номер и сумма в одну строку, фирма — строкой ниже (в узкой плитке название не ломается на 3 строки) */
.hm-tiles .hm-list li{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:8px;row-gap:1px;align-items:baseline;padding:5px 0}
.hm-tiles .hm-list li>a{grid-row:1;grid-column:1}
.hm-tiles .hm-list li>.hm-sum{grid-row:1;grid-column:2;margin-left:0}
.hm-tiles .hm-list li>.muted{grid-column:1/-1;font-size:12px}
.hm-tiles .hm-list li>.hm-car{grid-column:1/-1}