/* Второй вид кабинета — по образцу презентационного шаблона с Behance:
   чёрный блок, белое поле, один сильный акцент, крупные уверенные цифры.

   Что взято: характер (контраст тёмного и светлого, дисциплина в акценте,
   типографика вместо украшений). Что НЕ взято: воздух презентации. Дилер
   работает с каталогом на 1776 позиций и со счётом — плотность там дороже
   красоты, поэтому каталог, корзина и таблицы остаются плотными.

   Действует только в браузере (класс web). Внутри Telegram вид прежний.
   Подключается из index2.html; боевой index.html не тронут. */

:root{
  --k-ink:#111111;        /* основной текст */
  --k-ink2:#505050;       /* подписи */
  --k-panel:#111111;      /* тёмный блок: колонка и главная карточка */
  --k-panel-2:#242424;    /* его светлые места */
  --k-paper:#F4F2EE;      /* поле страницы */
  --k-card:#FFFFFF;
  --k-line:#E3E6EA;
  --k-line-dark:#272D37;
  --k-red:#D7000F;
  --k-red-dim:#A5000B;
  --k-green:#1A9C4B;
}

html.web{
  --bg:var(--k-paper); --card:var(--k-card); --text:var(--k-ink);
  --hint:var(--k-ink2); --line:var(--k-line); --btn:var(--k-red); --btnt:#fff;
}
html.web body{
  background:var(--k-paper);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
}
html.web h1,html.web h2,html.web .brand .k,html.web .stat .v,
html.web .bigtotal .v,html.web .kpi .v{
  font-family:'Inter Tight',-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  letter-spacing:-.01em;
}

/* ---------------------------------------------------------- тёмная колонка */
html.web .side{
  background:var(--k-panel); border-right:0; padding:20px 14px;
}
html.web .side .brand{padding:0 8px 18px}
html.web .side .brand .k{color:#fff; font-size:23px; font-weight:800; letter-spacing:.5px}
html.web .side .brand .s{color:#7C8797; font-size:11px}
html.web .snav .tab{color:#AFB8C4; padding:11px 12px}
html.web .snav .tab svg{opacity:.6}
html.web .snav .tab:hover{background:var(--k-panel-2); color:#fff}
html.web .snav .tab.on{background:var(--k-red); color:#fff}
html.web .snav .tab.on svg{opacity:1}
html.web .snav .cnt{background:#fff; color:var(--k-red)}
html.web .sfoot{border-top:1px solid var(--k-line-dark); padding-top:16px}
html.web .sfoot .nm{color:#fff}
html.web .sfoot .ph{color:#7C8797}
html.web .sfoot .ph a{color:#AFB8C4}
html.web .sfoot button{
  background:transparent; color:#AFB8C4; border:1px solid var(--k-line-dark);
}
html.web .sfoot button:hover{background:var(--k-panel-2); color:#fff}

/* панель выбора клиента внутри тёмной колонки */
html.web .sowner{border-bottom:1px solid var(--k-line-dark); padding:2px 8px 16px}
html.web .sowner .muted{color:#7C8797; font-size:11px; letter-spacing:.06em;
  text-transform:uppercase; font-weight:600}
html.web .sowner input,html.web .sowner select{
  background:var(--k-panel-2); border:1px solid var(--k-line-dark); color:#fff;
  font-size:13px; padding:8px 10px; border-radius:9px;
}
html.web .sowner input::placeholder{color:#6B7686}
html.web .sowner #clientcnt{color:#7C8797}

/* ------------------------------------------------------- заголовок раздела */
html.web .chead{
  align-items:flex-end; padding-bottom:16px; margin-bottom:20px;
  border-bottom:2px solid var(--k-ink);
}
html.web .chead h1{font-size:30px; font-weight:800; line-height:1.05}
html.web .chead .sub2{color:var(--k-ink2); font-size:12.5px; margin-top:5px}
html.web .chead button{
  background:transparent; border:1px solid var(--k-ink); color:var(--k-ink);
  border-radius:0; font-weight:600; padding:9px 16px;
}
html.web .chead button:hover{background:var(--k-ink); color:#fff}

/* ------------------------------------------------- показатели: главный тёмный */
html.web .card,html.web .stat{border-radius:10px}
html.web .card{border:1px solid var(--k-line); box-shadow:none}
html.web .grid .stat{border:1px solid var(--k-line); background:var(--k-card)}
html.web .grid .stat .l{
  font-size:10.5px; letter-spacing:.07em; text-transform:uppercase;
  color:var(--k-ink2); font-weight:600;
}
html.web .grid .stat .v{font-weight:800; font-variant-numeric:tabular-nums}

/* «Umumiy qarz» — одна главная цифра, как заглавный слайд шаблона */
html.web .grid:not(.sub) .stat:first-child{
  background:var(--k-panel); border-color:var(--k-panel); padding:18px 20px;
}
html.web .grid:not(.sub) .stat:first-child .l{color:#8994A3}
html.web .grid:not(.sub) .stat:first-child .v{color:#fff; font-size:30px}
html.web .grid:not(.sub) .stat:first-child .v.red{color:#fff}

html.web .grid:not(.sub) .stat:nth-child(2) .v.red{color:var(--k-red)}
html.web .stat .v.green{color:var(--k-green)}

/* ------------------------------------------------------------- карточки */
html.web .card h2{font-size:15px; font-weight:700; letter-spacing:0}
html.web .ch-h{padding-bottom:10px; border-bottom:1px solid var(--k-line); margin-bottom:12px}
html.web .warn{border-radius:8px}
html.web .segsm{border-radius:7px}
html.web .segsm a.on{background:var(--k-ink)}

/* график блокировки: строки как в таблице, без пузырей */
html.web #h-sched .card h2{
  font-size:13px; letter-spacing:.06em; text-transform:uppercase; color:var(--k-ink2);
}
html.web .day{padding:8px 0; font-variant-numeric:tabular-nums}

/* --------------------------------------------------- каталог и корзина: плотно */
html.web .facets{border-radius:10px}
html.web .glist a.on{background:var(--k-ink); color:#fff}
html.web .glist a.on .c{color:#fff}
html.web .catbar input,html.web .catbar select,
html.web .search,html.web input[type=search],html.web input[type=date],
html.web textarea,html.web select{border-radius:8px}
html.web .prow .add,html.web .go{border-radius:8px}
html.web .tp .bar{background:var(--k-ink); opacity:.85}
html.web .mytag{background:var(--k-ink); color:#fff}
html.web .prow.inc{background:#FAFBFC}
html.web .chip.on,html.web .pill.on{background:var(--k-ink); border-color:var(--k-ink)}

/* итог корзины — крупно и тёмно */
html.web .cart-side .bigtotal{border-bottom:2px solid var(--k-ink); padding-bottom:14px}
html.web .cart-side .bigtotal .v{font-size:30px; font-weight:800}
html.web #c-send{border-radius:8px; padding:14px; font-size:15px}

/* ------------------------------------------------------------- экран входа */
html.web #p-login .lg{max-width:none; margin:0}
html.web #p-login{max-width:none}
html.web .lg{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  min-height:min(560px,78vh); border:1px solid var(--k-line); border-radius:12px;
  overflow:hidden; background:var(--k-card);
}
html.web .lg::before{
  content:"KSS"; grid-row:1/99; background:var(--k-panel); color:#fff;
  font-family:'Inter Tight',sans-serif; font-weight:800; font-size:44px; letter-spacing:1px;
  padding:34px 32px; display:flex; align-items:flex-end;
}
html.web .lg h2,html.web .lg .sb,html.web .lg #lg-phone,
html.web .lg #lg-codebox,html.web .lg #lg-linkbox,html.web .lg .err{
  grid-column:2; max-width:340px; margin-left:32px; margin-right:32px; text-align:left;
}
html.web .lg h2{margin-top:auto; padding-top:34px; font-size:26px; font-weight:800; text-align:left}
html.web .lg .sb{text-align:left; margin-bottom:22px}
html.web .lg input{text-align:left; border-radius:8px}
html.web .lg .err{margin-bottom:34px}
@media (max-width:760px){
  html.web .lg{grid-template-columns:1fr; min-height:0}
  html.web .lg::before{
    grid-row:auto; font-size:26px; padding:18px 20px; align-items:center;
  }
  html.web .lg h2,html.web .lg .sb,html.web .lg #lg-phone,
  html.web .lg #lg-codebox,html.web .lg #lg-linkbox,html.web .lg .err{
    grid-column:1; margin-left:20px; margin-right:20px; max-width:none;
  }
  html.web .lg h2{padding-top:24px}
}

/* --------------------------------------------------------------- телефон */
@media (max-width:960px){
  html.web .chead h1{font-size:22px}
  html.web .grid:not(.sub) .stat:first-child .v{font-size:25px}
}

/* Пять карточек в жёсткий ряд ломали суммы на две строки («$79 1 / 82,08»).
   Колонки подстраиваются под ширину, а цифра уменьшается вместе с ней. */
html.web .grid{grid-template-columns:repeat(auto-fit,minmax(172px,1fr))}
html.web .grid.sub{grid-template-columns:repeat(auto-fit,minmax(148px,1fr))}
html.web .grid .stat .v{white-space:nowrap; font-size:clamp(16px,1.7vw,23px)}
html.web .grid.sub .stat .v{font-size:clamp(14px,1.3vw,18px)}
html.web .grid:not(.sub) .stat:first-child .v{font-size:clamp(20px,2.5vw,34px)}

/* Переключатель языка на экране входа: он стоит во второй колонке,
   рядом с формой, иначе русскоязычный дилер упирается в узбекский экран. */
html.web .lg #langsw3{grid-column:2; width:120px; margin:0 32px 34px auto}
@media (max-width:760px){ html.web .lg #langsw3{grid-column:1; margin:0 20px 22px auto} }


/* Знак KSS: изометрический куб с разлетевшимися гранями.
   Цвет наследуется через currentColor, поэтому один и тот же знак годится
   и на тёмной колонке, и на светлом фоне. */
.logo{width:26px;height:26px;flex:0 0 26px;fill:currentColor;display:block}
html.web .side .brand{display:flex;align-items:center;gap:9px;color:var(--k-red)}
html.web .side .brand .k{color:#fff}
html.web .side .brand .s{color:#7C8797; flex-basis:100%; margin-top:-2px}
html.web .lg::before{content:none}
html.web .lg .lgmark{
  grid-row:1/99; background:var(--k-panel); color:var(--k-red);
  padding:34px 32px; display:flex; flex-direction:column; justify-content:flex-end; gap:14px;
}
html.web .lg .lgmark .logo{width:64px;height:64px;flex:0 0 64px}
html.web .lg .lgmark b{
  font-family:'Inter Tight',sans-serif; font-weight:800; font-size:44px; letter-spacing:1px; color:#fff;
}
@media (max-width:760px){
  html.web .lg .lgmark{grid-row:auto; flex-direction:row; align-items:center; padding:16px 20px}
  html.web .lg .lgmark .logo{width:34px;height:34px;flex:0 0 34px}
  html.web .lg .lgmark b{font-size:26px}
}

html.web .lg .lgmark .lgsub{
  color:#7C8797; font-size:11px; letter-spacing:.18em; margin-top:-8px;
}
@media (max-width:760px){ html.web .lg .lgmark .lgsub{display:none} }


/* Типографика по бренд-гайду KSS: Inter Tight, плотный трекинг на крупных
   размерах, разрядка на мелкой капители. Archivo Black не подключаем —
   слово KSS в логотипе уже переведено в кривые. */
html.web .chead h1{letter-spacing:-.03em; font-weight:900}
html.web .grid .stat .v,html.web .bigtotal .v{letter-spacing:-.02em; font-weight:800}
html.web .grid .stat .l{letter-spacing:.18em; font-weight:700; font-size:10px}
html.web .card h2{letter-spacing:-.01em; font-weight:700}
.logo{object-fit:contain}
html.web .lg .lgmark{justify-content:flex-end; padding:34px 32px}
html.web .lg .lgmark img{width:100%; max-width:260px; height:auto; display:block}
@media (max-width:760px){
  html.web .lg .lgmark img{max-width:180px}
}


/* Шапка раздела была в три строки и наполовину пустая: заголовок, дата 1С и
   кнопка. Дата склада и так стоит над списком товаров, поэтому сжимаем всё
   в одну строку — это около 60 px в пользу списка. */
html.web .chead{
  align-items:center; padding-bottom:8px; margin-bottom:12px;
  border-bottom-width:1px; gap:6px 14px; flex-wrap:wrap;
}
html.web .chead > div:first-child{
  display:flex; align-items:baseline; gap:14px; flex-wrap:wrap; min-width:0;
}
html.web .chead h1{font-size:21px; font-weight:800; line-height:1.15}
html.web .chead .sub2{margin-top:0; font-size:12px; white-space:nowrap}
html.web .chead button{padding:6px 13px; font-size:13px}
@media (max-width:760px){
  html.web .chead h1{font-size:18px}
  html.web .chead .sub2{white-space:normal}
}

/* Бренды: цвет проставляется в разметке, здесь только форма */
.brands .pill{display:inline-flex; align-items:center; gap:6px}
.brands .pill i{width:8px; height:8px; border-radius:50%; flex:0 0 8px}
.brands .pill.on i{background:currentColor!important; opacity:.55}