/* NO ONE WAY — административная панель, оформление
   Админка — инструмент, а не витрина: те же токены, но плотнее и без
   editorial-приёмов. Крупная типографика здесь мешает работать. */

.admin { padding-block: var(--now-space-8) var(--p-section-gap); }
.admin .wrap { max-width: 76rem; }

.admin__head {
  display: flex;
  flex-direction: column;
  gap: var(--now-space-4);
  padding-bottom: var(--now-space-8);
  border-bottom: var(--now-line-hairline) solid var(--now-border-default);
}
.admin__title { display: flex; align-items: baseline; gap: var(--now-space-4); }
.admin__title .title { font-size: clamp(1.75rem, 3vw, 2.25rem); }

.admin__tools {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--now-space-6);
  flex-wrap: wrap;
  padding-block: var(--now-space-6);
}
.admin__filters { display: flex; gap: var(--now-space-2); flex-wrap: wrap; }

/* таблица */
.admin__table { border-top: var(--now-line-hairline) solid var(--now-border-default); }
.admin__row {
  display: grid;
  grid-template-columns: 2.25rem 44px 1fr 7rem 10rem 6.5rem 7.5rem 10rem;
  gap: var(--now-space-4);
  align-items: center;
  padding: var(--now-space-3) 0;
  border-bottom: var(--now-line-hairline) solid var(--now-border-default);
  font-size: var(--now-type-body-sm-size);
}
.admin__row--head {
  font-size: var(--now-type-micro-size);
  letter-spacing: var(--now-type-micro-tracking);
  text-transform: uppercase;
  color: var(--now-text-secondary);
  padding-block: var(--now-space-2);
}
.admin__thumb { aspect-ratio: 3 / 4; overflow: hidden; background: var(--p-photo-tone); }
.admin__thumb img { width: 100%; height: 100%; object-fit: cover; transform: scale(var(--zoom, 1)); }
.admin__name { display: flex; flex-direction: column; gap: 2px; }
.admin__name b { font-weight: 400; }
.admin__warn {
  font-style: normal;
  font-size: var(--now-type-micro-size);
  letter-spacing: var(--now-type-micro-tracking);
  text-transform: uppercase;
  color: var(--now-color-touch-outline);
}
.admin__worlds { color: var(--now-text-secondary); font-size: var(--now-type-label-size); letter-spacing: 0.08em; }
.admin__status {
  font-size: var(--now-type-micro-size);
  letter-spacing: var(--now-type-micro-tracking);
  text-transform: uppercase;
  color: var(--now-text-secondary);
}
.admin__status--published { color: var(--now-text-primary); }
.admin__status--archived { opacity: 0.5; }
.admin__actions { display: flex; gap: var(--now-space-4); }
.admin__actions a {
  font-size: var(--now-type-micro-size);
  letter-spacing: var(--now-type-micro-tracking);
  text-transform: uppercase;
  color: var(--now-text-secondary);
  border-bottom: 1px solid transparent;
}
.admin__actions a:hover { color: var(--now-text-primary); border-bottom-color: currentColor; }
.admin__empty { padding-block: var(--now-space-16); color: var(--now-text-secondary); }

.admin__right { display: flex; gap: var(--now-space-4); align-items: center; }
.admin__search input {
  font: inherit;
  font-size: var(--now-type-body-sm-size);
  background: none;
  border: 0;
  border-bottom: 1px solid var(--now-border-default);
  border-radius: 0;
  padding: 8px 0;
  min-width: 12rem;
  color: var(--now-text-primary);
}
.admin__search input:focus { outline: none; border-bottom: 2px solid var(--now-text-primary); }

.admin__order { display: flex; flex-direction: column; gap: 2px; }
.admin__order button {
  width: 20px; height: 16px;
  border: 1px solid var(--now-border-default);
  font-size: 0.625rem;
  line-height: 1;
  color: var(--now-text-secondary);
}
.admin__order button:hover:not(:disabled) { border-color: var(--now-text-primary); color: var(--now-text-primary); }
.admin__order button:disabled { opacity: 0.3; cursor: default; }

.admin__actions button {
  font-size: var(--now-type-micro-size);
  letter-spacing: var(--now-type-micro-tracking);
  text-transform: uppercase;
  color: var(--now-text-secondary);
  border-bottom: 1px solid transparent;
}
.admin__actions button:hover { color: var(--now-text-primary); border-bottom-color: currentColor; }

/* форма и предпросмотр рядом */
.aedit { display: grid; grid-template-columns: minmax(0, 1fr) 18rem; gap: var(--now-space-16); align-items: start; }

.apreview { position: sticky; top: calc(var(--now-header-height) + var(--now-space-6)); }
.apreview__inner {
  display: flex;
  flex-direction: column;
  gap: var(--now-space-6);
  padding: var(--now-space-6);
  border: 1px solid var(--now-border-default);
  background: var(--now-bg-canvas);
}
.apreview__card { display: flex; flex-direction: column; gap: 4px; font-size: var(--now-type-body-sm-size); }
.apreview__card b { font-weight: 400; margin-top: var(--now-space-2); }
.apreview__media { aspect-ratio: 3 / 4; overflow: hidden; background: var(--p-photo-tone); display: block; }
.apreview__media img { width: 100%; height: 100%; object-fit: cover; transform: scale(var(--zoom, 1)); }
.apreview__meta {
  font-size: var(--now-type-micro-size);
  letter-spacing: var(--now-type-micro-tracking);
  text-transform: uppercase;
  color: var(--now-text-secondary);
}
.apreview__dots { display: flex; gap: 6px; margin-top: 4px; }
.apreview__dots i { width: 11px; height: 11px; display: block; border: 1px solid var(--now-border-default); }

.apreview__pdp { display: flex; flex-direction: column; gap: var(--now-space-3); padding-top: var(--now-space-4); border-top: var(--now-line-hairline) solid var(--now-border-default); }
.apreview__desc { font-size: var(--now-type-body-sm-size); color: var(--now-text-secondary); }
.apreview__sizes { display: flex; gap: 4px; flex-wrap: wrap; }
.apreview__sizes i {
  font-style: normal;
  min-width: 30px;
  text-align: center;
  padding: 4px 0;
  border: 1px solid var(--now-border-default);
  font-size: var(--now-type-micro-size);
  letter-spacing: 0.1em;
}
.apreview__sizes i.out { color: var(--now-text-secondary); text-decoration: line-through; }
.apreview__flag {
  font-size: var(--now-type-micro-size);
  letter-spacing: var(--now-type-micro-tracking);
  text-transform: uppercase;
  color: var(--now-color-touch-outline);
}

/* форма */
.aform { display: flex; flex-direction: column; gap: var(--now-space-12); margin-top: var(--now-space-12); }
.asection { display: flex; flex-direction: column; gap: var(--now-space-6); }
.asection > .label { padding-bottom: var(--now-space-3); border-bottom: var(--now-line-hairline) solid var(--now-border-default); }

.agrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--now-space-6); }

.afield { display: flex; flex-direction: column; gap: 6px; }
.afield > span {
  font-size: var(--now-type-micro-size);
  letter-spacing: var(--now-type-micro-tracking);
  text-transform: uppercase;
  color: var(--now-text-secondary);
  display: flex;
  justify-content: space-between;
  gap: var(--now-space-4);
}
.afield > span i { font-style: normal; }
.afield input, .afield textarea, .afield select,
.atariffs__row input[type="text"] {
  font: inherit;
  font-size: var(--now-type-body-md-size);
  color: var(--now-text-primary);
  background: none;
  border: 0;
  border-bottom: 1px solid var(--now-border-default);
  border-radius: 0;
  padding: 8px 0;
  width: 100%;
}
.afield textarea { resize: vertical; line-height: 1.5; }
.afield select { appearance: none; padding-right: var(--now-space-6); }
.afield input:focus, .afield textarea:focus, .afield select:focus,
.atariffs__row input[type="text"]:focus {
  outline: none;
  border-bottom: 2px solid var(--now-text-primary);
}
.afield em {
  font-style: normal;
  font-size: var(--now-type-body-sm-size);
  color: var(--now-text-secondary);
  line-height: 1.45;
}

.achecks { display: flex; gap: var(--now-space-2); flex-wrap: wrap; }
.achip {
  padding: 7px 12px;
  border: 1px solid var(--now-border-default);
  font-size: var(--now-type-label-size);
  letter-spacing: var(--now-type-label-tracking);
  text-transform: uppercase;
}
.achip:hover { border-color: var(--now-text-primary); }
.achip[aria-pressed="true"] { background: var(--now-action-fill); color: var(--now-action-on-fill); border-color: var(--now-action-fill); }

.aflags { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--now-space-3); }
.aflag {
  display: flex;
  align-items: flex-start;
  gap: var(--now-space-3);
  padding: var(--now-space-3) 0;
  text-align: left;
  font-size: var(--now-type-body-md-size);
}
.aflag i {
  flex: 0 0 auto;
  width: 16px; height: 16px;
  margin-top: 4px;
  border: 1px solid var(--now-border-default);
  position: relative;
}
.aflag--on i { background: var(--now-action-fill); border-color: var(--now-action-fill); }
.aflag--on i::after {
  content: "";
  position: absolute;
  left: 5px; top: 1px;
  width: 4px; height: 9px;
  border: solid var(--now-action-on-fill);
  border-width: 0 1.5px 1.5px 0;
  transform: rotate(45deg);
}
.aflag em {
  display: block;
  font-style: normal;
  font-size: var(--now-type-body-sm-size);
  color: var(--now-text-secondary);
}

.aphoto { display: grid; grid-template-columns: 12rem 1fr; gap: var(--now-space-8); align-items: start; }
.aphoto__preview { aspect-ratio: 3 / 4; overflow: hidden; background: var(--p-photo-tone); }
.aphoto__preview img { width: 100%; height: 100%; object-fit: cover; transform: scale(var(--zoom, 1)); }
.aphoto__fields { display: flex; flex-direction: column; gap: var(--now-space-6); }

.ahint { font-size: var(--now-type-body-sm-size); color: var(--now-text-secondary); }

.aactions { display: flex; align-items: center; gap: var(--now-space-6); flex-wrap: wrap; }
.aactions .btn { min-width: 12rem; }

.adata {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.75rem;
  line-height: 1.5;
  width: 100%;
  padding: var(--now-space-4);
  background: var(--now-bg-surface);
  border: 1px solid var(--now-border-default);
  border-radius: 0;
  color: var(--now-text-primary);
  resize: vertical;
}

@media (max-width: 1279px) {
  .admin__row {
    grid-template-columns: 44px 1fr auto;
    grid-template-areas: "thumb name status" "thumb meta actions";
    row-gap: var(--now-space-2);
  }
  .admin__row--head { display: none; }
  .admin__thumb { grid-area: thumb; }
  .admin__name { grid-area: name; }
  .admin__status { grid-area: status; text-align: right; }
  .admin__actions { grid-area: actions; justify-content: flex-end; }
  .admin__order { display: none; }
  .admin__row > span:nth-child(4),
  .admin__row > span:nth-child(5),
  .admin__row > span:nth-child(6) { display: none; }

  .aedit { grid-template-columns: 1fr; gap: var(--now-space-8); }
  .apreview { position: static; order: -1; }
  .apreview__inner { flex-direction: row; gap: var(--now-space-6); }
  .apreview__card { flex: 0 0 8rem; }
  .apreview__pdp { flex: 1; padding-top: 0; border-top: 0; }
  .agrid, .aflags { grid-template-columns: 1fr; }
  .aphoto { grid-template-columns: 1fr; }
  .aphoto__preview { max-width: 12rem; }
  .admin__tools { flex-direction: column; align-items: stretch; }
}

/* настройки магазина */
.asettings { display: flex; flex-direction: column; gap: var(--now-space-8); }
.afield--short { max-width: 12rem; }

.atariffs { display: flex; flex-direction: column; }
.atariffs__head,
.atariffs__row {
  display: grid;
  grid-template-columns: 1fr 1.4fr 6rem 9rem;
  gap: var(--now-space-4);
  align-items: center;
}
.atariffs__head {
  font-size: var(--now-type-micro-size);
  letter-spacing: var(--now-type-micro-tracking);
  text-transform: uppercase;
  color: var(--now-text-secondary);
  padding-bottom: var(--now-space-2);
  border-bottom: var(--now-line-hairline) solid var(--now-border-default);
}
.atariffs__row { padding: var(--now-space-3) 0; border-bottom: var(--now-line-hairline) solid var(--now-border-default); }
.acheck { display: flex; align-items: center; gap: var(--now-space-2); font-size: var(--now-type-body-sm-size); }
.acheck input { width: auto; accent-color: var(--now-color-graphite); }

@media (max-width: 899px) {
  .atariffs__head { display: none; }
  .atariffs__row { grid-template-columns: 1fr; gap: var(--now-space-2); }
}

.amax { max-width: 62ch; }
.aproblem:empty { display: none; }
.aproblem {
  margin-top: var(--now-space-3);
  padding: var(--now-space-3) var(--now-space-4);
  border-left: 2px solid var(--now-color-touch-outline);
  font-size: var(--now-type-body-sm-size);
  color: var(--now-color-touch-outline);
}

/* простые таблицы данных */
.atable { display: flex; flex-direction: column; margin-top: var(--now-space-4); margin-bottom: var(--now-space-12); }
.atable__head,
.atable__row {
  display: grid;
  grid-template-columns: 1fr 5rem 7rem 8rem;
  gap: var(--now-space-4);
  align-items: baseline;
  padding: var(--now-space-3) 0;
  border-bottom: var(--now-line-hairline) solid var(--now-border-default);
  font-size: var(--now-type-body-sm-size);
}
.atable--3 .atable__head,
.atable--3 .atable__row { grid-template-columns: 1fr 1fr 8rem; }
.atable__head {
  font-size: var(--now-type-micro-size);
  letter-spacing: var(--now-type-micro-tracking);
  text-transform: uppercase;
  color: var(--now-text-secondary);
}
.atable__row--mark > span:first-child { border-left: 2px solid var(--now-color-touch-outline); padding-left: var(--now-space-3); margin-left: calc(var(--now-space-3) * -1); }

@media (max-width: 899px) {
  .atable__head { display: none; }
  .atable__head, .atable__row { grid-template-columns: 1fr auto; }
}


/* фотографии изделия
   Кадры разложены по полкам: общая и по цвету. Так их и снимают, и так
   видно, для какого цвета съёмка ещё не сделана. Внутри полки — сетка
   карточек: миниатюра крупная, потому что по ней и выбирают, а первая
   помечена главной, потому что она попадёт в каталог. */
.ashots__state {
  display: flex;
  align-items: baseline;
  gap: var(--now-space-4);
  flex-wrap: wrap;
  margin-top: var(--now-space-3);
}
.ashots__state .ahint { margin: 0; margin-left: auto; }
.ashots__missing, .ashots__ok {
  font-size: var(--now-type-micro-size);
  letter-spacing: var(--now-type-micro-tracking);
  text-transform: uppercase;
}
.ashots__missing { color: var(--now-color-touch-outline); }
.ashots__ok { color: var(--now-text-secondary); }

/* Отвергнутый файл: сообщение висит, пока его не прочитали */
.areject {
  margin-top: var(--now-space-3);
  border-left: 2px solid var(--now-color-touch-outline);
  padding-left: var(--now-space-3);
}
.areject__row {
  display: flex;
  gap: var(--now-space-3);
  align-items: baseline;
  font-size: var(--now-type-body-sm-size);
  margin: var(--now-space-2) 0;
}
.areject__row b { font-weight: 400; }
.areject__row .linkghost { margin-left: auto; }

.ashelf { margin-top: var(--now-space-6); }
.ashelf__head {
  display: flex;
  align-items: baseline;
  gap: var(--now-space-2);
  flex-wrap: wrap;
  padding-bottom: var(--now-space-2);
  border-bottom: var(--now-line-hairline) solid var(--now-text-primary);
}
.ashelf__dot {
  width: 10px; height: 10px;
  border: var(--now-line-hairline) solid var(--now-border-default);
  align-self: center;
}
.ashelf__name {
  font-size: var(--now-type-micro-size);
  letter-spacing: var(--now-type-micro-tracking);
  text-transform: uppercase;
}
.ashelf__count { font-size: var(--now-type-micro-size); color: var(--now-text-secondary); }
.ashelf__hint {
  font-size: var(--now-type-micro-size);
  color: var(--now-text-secondary);
  margin-left: auto;
}
.ashelf__lack {
  font-size: var(--now-type-micro-size);
  letter-spacing: var(--now-type-micro-tracking);
  text-transform: uppercase;
  color: var(--now-color-touch-outline);
  margin-top: var(--now-space-2);
}
.ashelf__grid {
  display: grid;
  /* auto-fill, а не auto-fit: карточки держат один размер, а не
     растягиваются, когда кадр всего один. Ширины хватает, чтобы
     подписи под кадром читались целиком. */
  grid-template-columns: repeat(auto-fill, minmax(13.5rem, 1fr));
  gap: var(--now-space-4);
  margin-top: var(--now-space-3);
}

.ashot { display: grid; gap: var(--now-space-2); align-content: start; }
.ashot__media {
  position: relative;
  display: block;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: var(--p-photo-tone);
}
.ashot__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ashot__badge {
  position: absolute;
  left: 0; bottom: 0;
  padding: 4px 8px;
  background: var(--now-action-fill);
  color: var(--now-action-on-fill);
  font-size: var(--now-type-micro-size);
  letter-spacing: var(--now-type-micro-tracking);
  text-transform: uppercase;
}
.ashot--busy .ashot__media { animation: ashot-pulse 1.2s ease-in-out infinite; }
.ashot__busy { font-size: var(--now-type-micro-size); color: var(--now-text-secondary); }
@keyframes ashot-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }
@media (prefers-reduced-motion: reduce) {
  .ashot--busy .ashot__media { animation: none; opacity: 0.6; }
}

.ashot__role, .ashot__color, .ashot__alt {
  font: inherit;
  font-size: var(--now-type-body-sm-size);
  color: var(--now-text-primary);
  background: none;
  border: 0;
  border-bottom: 1px solid var(--now-border-default);
  border-radius: 0;
  padding: 5px 0;
  width: 100%;
}
.ashot__role, .ashot__color { appearance: none; }
.ashot__role:focus, .ashot__color:focus, .ashot__alt:focus {
  outline: none;
  border-bottom: 2px solid var(--now-text-primary);
}
.ashot__warn {
  font-size: var(--now-type-micro-size);
  letter-spacing: var(--now-type-micro-tracking);
  text-transform: uppercase;
  color: var(--now-color-touch-outline);
}
.ashot__acts {
  display: flex;
  align-items: center;
  gap: var(--now-space-2);
  flex-wrap: wrap;
}
.ashot__move { display: flex; gap: var(--now-space-2); }
.ashot__acts .ashot__color { width: auto; flex: 1; min-width: 6rem; }

/* Место для перетаскивания. Прямоугольник в той же сетке, что и кадры:
   так видно, куда именно они встанут. */
.adrop {
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 2px;
  aspect-ratio: 3 / 4;
  border: 1px dashed var(--now-border-default);
  cursor: pointer;
  text-align: center;
  padding: var(--now-space-3);
  transition: border-color var(--now-duration-hover) var(--now-ease-standard),
              background-color var(--now-duration-hover) var(--now-ease-standard);
}
.adrop:hover, .adrop--over {
  border-color: var(--now-text-primary);
  background: var(--now-bg-surface);
}
.adrop--over { border-style: solid; }
.adrop__plus { font-size: 1.5rem; line-height: 1; color: var(--now-text-secondary); }
.adrop__text { font-size: var(--now-type-body-sm-size); }
.adrop__sub {
  font-size: var(--now-type-micro-size);
  color: var(--now-text-secondary);
  line-height: 1.3;
}

@media (max-width: 599px) {
  .ashelf__grid { grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); }
  .ashelf__hint, .ashots__state .ahint { margin-left: 0; width: 100%; }
  .adrop__sub { display: none; }
}

/* блок «Как это сделано»
   Кадр слева, поля справа — как это выглядит на витрине. Пропорция 4:3,
   а не 3:4: у блока горизонтальная раскладка. */
.amade {
  display: grid;
  grid-template-columns: minmax(12rem, 20rem) 1fr;
  gap: var(--now-space-6);
  margin-top: var(--now-space-4);
  align-items: start;
}
.amade__media { position: relative; }
.amade__media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
  background: var(--p-photo-tone);
}
.amade__drop { margin-top: var(--now-space-2); }
.amade__fields { display: grid; gap: var(--now-space-4); }
.adrop--wide { aspect-ratio: 4 / 3; }

@media (max-width: 899px) {
  .amade { grid-template-columns: 1fr; }
}

/* обложки главной и миров
   Раскладка та же, что у блока «Как это сделано»: кадр слева, поля
   справа. Обложка вертикальная — колонка уже. */
.ablock { grid-template-columns: minmax(9rem, 14rem) 1fr; }
.ablock .adrop { aspect-ratio: 3 / 4; }
.ablock__shot {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  display: block;
  background: var(--p-photo-tone);
}
.ablock__name {
  font-size: var(--now-type-body-lg-size);
  font-weight: 400;
  margin: 0;
}
.ablock + .ablock {
  margin-top: var(--now-space-6);
  padding-top: var(--now-space-6);
  border-top: var(--now-line-hairline) solid var(--now-border-default);
}

/* справочник цветов и направлений */
.aref { display: grid; gap: var(--now-space-3); margin-top: var(--now-space-4); }
.aref__row {
  display: grid;
  grid-template-columns: 1.5rem 1fr 1fr 8rem 5rem;
  gap: var(--now-space-4);
  align-items: center;
  padding: var(--now-space-3) 0;
  border-bottom: var(--now-line-hairline) solid var(--now-border-default);
  font-size: var(--now-type-body-sm-size);
}
.aref__dot {
  width: 18px; height: 18px;
  border: var(--now-line-hairline) solid var(--now-border-default);
}
.aref__code { color: var(--now-text-secondary); }
.aref__used {
  font-size: var(--now-type-micro-size);
  letter-spacing: var(--now-type-micro-tracking);
  text-transform: uppercase;
  color: var(--now-text-secondary);
}
@media (max-width: 899px) {
  .aref__row { grid-template-columns: 1.5rem 1fr 1fr; }
  .aref__used, .aref__acts { grid-column: 2 / -1; }
}

/* разделы админки
   Три группы по смыслу вместо пяти ссылок подряд. Плитка — прямоугольник
   с волосяной рамкой, без заливки и скруглений: тот же язык, что и у
   остального интерфейса. Цифра справа показывает, есть ли там работа. */
.admin__foot {
  margin-top: var(--now-space-12);
  padding-top: var(--now-space-6);
  border-top: var(--now-line-hairline) solid var(--now-border-default);
}
.asect { margin-top: var(--now-space-6); }
.asect__name {
  display: block;
  font-size: var(--now-type-micro-size);
  letter-spacing: var(--now-type-micro-tracking);
  text-transform: uppercase;
  color: var(--now-text-secondary);
  margin-bottom: var(--now-space-3);
}
.asect__grid {
  display: grid;
  /* auto-fit, а не auto-fill: пустые колонки схлопываются, и две плитки
     занимают строку целиком, а не жмутся к левому краю. */
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
  gap: var(--now-space-4);
}
.acard {
  display: grid;
  gap: var(--now-space-2);
  padding: var(--now-space-4);
  border: var(--now-line-hairline) solid var(--now-border-default);
  text-decoration: none;
  color: var(--now-text-primary);
  transition: border-color var(--now-duration-hover) var(--now-ease-standard);
}
.acard:hover { border-color: var(--now-text-primary); }
.acard__top { display: flex; align-items: baseline; gap: var(--now-space-3); }
.acard__name { font-size: var(--now-type-body-md-size); }
.acard__count {
  margin-left: auto;
  font-size: var(--now-type-micro-size);
  letter-spacing: var(--now-type-micro-tracking);
  text-transform: uppercase;
  color: var(--now-text-secondary);
  white-space: nowrap;
}
/* Красным — только то, что требует решения: непрочитанный спрос */
.acard__count--alert { color: var(--now-color-touch-outline); }
.acard__note {
  font-size: var(--now-type-body-sm-size);
  color: var(--now-text-secondary);
  line-height: 1.45;
}

/* ---------- артикулы и единицы хранения ---------- */
.stock__art {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.skus { display: flex; flex-direction: column; margin-top: var(--now-space-2); }
.skus__row {
  display: grid;
  grid-template-columns: 14rem 1fr 5rem;
  gap: var(--now-space-4);
  align-items: center;
  padding: var(--now-space-2) 0;
  border-bottom: var(--now-line-hairline) solid var(--now-border-default);
  font-size: var(--now-type-body-sm-size);
}
.skus__row--out .stock__art { color: var(--now-color-touch-outline); }
.skus__row input {
  font: inherit;
  color: var(--now-text-primary);
  background: none;
  border: 0;
  border-bottom: 1px solid var(--now-border-default);
  padding: 4px 0;
  width: 100%;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.skus__row input:focus { outline: none; border-bottom: 2px solid var(--now-text-primary); }

/* ---------- склад ---------- */
.stock { display: flex; flex-direction: column; margin-top: var(--now-space-6); }
.stock__head,
.stock__row {
  display: grid;
  grid-template-columns: 14rem 1fr 7rem 8rem 5rem 11rem;
  gap: var(--now-space-4);
  align-items: baseline;
  padding: var(--now-space-3) 0;
  border-bottom: var(--now-line-hairline) solid var(--now-border-default);
  font-size: var(--now-type-body-sm-size);
}
.stock__head {
  font-size: var(--now-type-micro-size);
  letter-spacing: var(--now-type-micro-tracking);
  text-transform: uppercase;
  color: var(--now-text-secondary);
}
.stock__qty { text-align: right; font-variant-numeric: tabular-nums; }
.stock__row--low .stock__qty { color: var(--now-color-touch-outline); }
.stock__row--out .stock__qty,
.stock__row--out .stock__art { color: var(--now-color-touch-outline); }
.stock__row--out { background: color-mix(in srgb, var(--now-color-touch-outline) 5%, transparent); }
.stock__acts { display: flex; gap: var(--now-space-3); }
.atable--log .atable__head,
.atable--log .atable__row { grid-template-columns: 9rem 14rem 1fr 8rem; }

/* ---------- задачи ---------- */
.taskadd {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: var(--now-space-4);
  align-items: end;
  margin-top: var(--now-space-8);
}
.tasklist { display: flex; flex-direction: column; margin-top: var(--now-space-4); }
.task {
  display: grid;
  grid-template-columns: 1.5rem 1fr auto;
  gap: var(--now-space-4);
  align-items: start;
  padding: var(--now-space-4) 0;
  border-bottom: var(--now-line-hairline) solid var(--now-border-default);
}
.task__box {
  width: 1.25rem;
  height: 1.25rem;
  border: 1px solid var(--now-border-default);
  background: none;
  color: var(--now-text-primary);
  cursor: pointer;
  line-height: 1;
  font-size: 12px;
  margin-top: 2px;
}
.task__box--sug { border-style: dashed; cursor: default; }
.task__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.task__body b { font-weight: 400; }
.task__body span { font-size: var(--now-type-body-sm-size); color: var(--now-text-secondary); }
.task__meta { font-size: var(--now-type-micro-size); letter-spacing: 0.04em; }
.task__acts { display: flex; gap: var(--now-space-4); align-items: center; }
.task__flag {
  font-size: var(--now-type-micro-size);
  letter-spacing: var(--now-type-micro-tracking);
  text-transform: uppercase;
  color: var(--now-text-secondary);
}
.task--done .task__body b { text-decoration: line-through; color: var(--now-text-secondary); }
.task--out .task__box--sug { border-color: var(--now-color-touch-outline); border-style: solid; }

@media (max-width: 899px) {
  .skus__row { grid-template-columns: 1fr 4rem; }
  .skus__row .stock__art { grid-column: 1 / -1; }
  .stock__head { display: none; }
  .stock__row { grid-template-columns: 1fr auto; row-gap: var(--now-space-2); }
  .stock__row .stock__art { grid-column: 1 / -1; }
  .taskadd { grid-template-columns: 1fr; }
}

/* ---------- обращения ---------- */
.reqlist { display: flex; flex-direction: column; margin-top: var(--now-space-4); }
.req {
  display: grid;
  grid-template-columns: 1fr 6rem 7rem auto;
  gap: var(--now-space-4);
  align-items: start;
  padding: var(--now-space-4) 0;
  border-bottom: var(--now-line-hairline) solid var(--now-border-default);
  font-size: var(--now-type-body-sm-size);
}
.req__main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.req__main b { font-weight: 400; }
.req__kind,
.req__date,
.req__status {
  font-size: var(--now-type-micro-size);
  letter-spacing: var(--now-type-micro-tracking);
  text-transform: uppercase;
  color: var(--now-text-secondary);
}
.req__priv {
  font-style: normal;
  font-size: var(--now-type-micro-size);
  letter-spacing: var(--now-type-micro-tracking);
  text-transform: uppercase;
  color: var(--now-color-touch-outline);
}
.req__mail { border-bottom: 1px solid var(--now-border-default); align-self: flex-start; }
.req__last { color: var(--now-text-secondary); }
.req__acts { display: flex; gap: var(--now-space-4); align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.req--new .req__status { color: var(--now-text-primary); }
.req--done .req__main b { color: var(--now-text-secondary); }
.atable__row--link { color: inherit; }
.atable__row--link:hover { background: var(--now-bg-surface); }

@media (max-width: 899px) {
  .req { grid-template-columns: 1fr; }
  .req__acts { justify-content: flex-start; }
}

/* ---------- воронка заказов ---------- */
.ofunnel__stat {
  display: flex;
  gap: var(--now-space-12);
  flex-wrap: wrap;
  margin-top: var(--now-space-8);
  padding-bottom: var(--now-space-6);
  border-bottom: var(--now-line-hairline) solid var(--now-border-default);
}
.ofunnel__stat span {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: var(--now-type-micro-size);
  letter-spacing: var(--now-type-micro-tracking);
  text-transform: uppercase;
  color: var(--now-text-secondary);
}
.ofunnel__stat b {
  font-family: var(--now-font-display);
  font-weight: 300;
  font-size: 1.75rem;
  letter-spacing: 0;
  text-transform: none;
  color: var(--now-text-primary);
  font-variant-numeric: tabular-nums;
}

.ofunnel {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--now-space-4);
  margin-top: var(--now-space-8);
  align-items: start;
}
.ocol { display: flex; flex-direction: column; gap: var(--now-space-3); min-width: 0; }
.ocol__head {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-bottom: var(--now-space-3);
  border-bottom: 1px solid var(--now-border-default);
}
.ocol__n { font-size: var(--now-type-micro-size); color: var(--now-text-secondary); font-variant-numeric: tabular-nums; }
.ocol__empty {
  font-size: var(--now-type-micro-size);
  letter-spacing: var(--now-type-micro-tracking);
  text-transform: uppercase;
  color: var(--now-text-secondary);
  opacity: 0.6;
}

.ocard {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: var(--now-space-4);
  border: 1px solid var(--now-border-default);
  color: inherit;
  font-size: var(--now-type-body-sm-size);
  transition: border-color var(--now-duration-hover) var(--now-ease-standard);
}
.ocard:hover { border-color: var(--now-text-primary); }
.ocard__top { display: flex; align-items: baseline; gap: var(--now-space-3); justify-content: space-between; }
.ocard__top b { font-weight: 400; }
.ocard__mail,
.ocard__meta { font-size: var(--now-type-micro-size); color: var(--now-text-secondary); overflow: hidden; text-overflow: ellipsis; }
.ocard__total { font-variant-numeric: tabular-nums; margin-top: 2px; }
.ofunnel__side { display: flex; gap: var(--now-space-4); flex-wrap: wrap; margin-top: var(--now-space-3); }
.ofunnel__side .ocard { width: 14rem; }

.ostage { display: flex; flex-wrap: wrap; gap: var(--now-space-2); margin-top: var(--now-space-8); }
.ostage__step {
  font-size: var(--now-type-micro-size);
  letter-spacing: var(--now-type-micro-tracking);
  text-transform: uppercase;
  padding: 6px 10px;
  border: 1px solid var(--now-border-default);
  color: var(--now-text-secondary);
}
.ostage__step.is-passed { color: var(--now-text-primary); border-color: var(--now-text-primary); }
.ostage__step.is-now { background: var(--now-action-fill); color: var(--now-action-on-fill); border-color: var(--now-action-fill); }

@media (max-width: 1279px) {
  .ofunnel { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 899px) {
  .ofunnel { grid-template-columns: 1fr; }
  .ofunnel__stat { gap: var(--now-space-6); }
}
.aactions--order { margin-block: var(--now-space-6) var(--now-space-12); flex-wrap: wrap; gap: var(--now-space-6); align-items: center; }

/* ---------- оболочка админки ---------- */
.is-admin .header,
.is-admin .footer,
.is-admin .mobilenav { display: none; }
.is-admin #view { padding-top: 0; }

.anav {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--now-bg-canvas);
  border-bottom: 1px solid var(--now-border-default);
}
.anav__inner {
  display: flex;
  align-items: baseline;
  gap: var(--now-space-8);
  padding-block: var(--now-space-6);
  flex-wrap: wrap;
}
.anav__mark {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 0.8125rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--now-text-primary);
  white-space: nowrap;
}
.anav__mark span {
  font-size: var(--now-type-micro-size);
  letter-spacing: var(--now-type-micro-tracking);
  color: var(--now-text-secondary);
}

.anav__row { display: flex; gap: var(--now-space-6); flex-wrap: wrap; align-items: baseline; }
.anav__row--setup { gap: var(--now-space-6); }

.anav__item {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  font-size: var(--now-type-label-size);
  letter-spacing: var(--now-type-label-tracking);
  text-transform: uppercase;
  color: var(--now-text-primary);
  padding-bottom: 3px;
  border-bottom: 1px solid transparent;
  white-space: nowrap;
}
.anav__item:hover { border-bottom-color: var(--now-border-default); }
.anav__item[aria-current="page"] { border-bottom-color: var(--now-text-primary); }
.anav__item--small { font-size: var(--now-type-micro-size); color: var(--now-text-secondary); }
.anav__item--small:hover { color: var(--now-text-primary); }
.anav__item i {
  font-style: normal;
  font-size: var(--now-type-micro-size);
  letter-spacing: 0;
  padding: 1px 5px;
  background: var(--now-color-touch-outline);
  color: var(--now-color-ivory);
  font-variant-numeric: tabular-nums;
}
.anav__exit {
  margin-left: auto;
  font-size: var(--now-type-micro-size);
  letter-spacing: var(--now-type-micro-tracking);
  text-transform: uppercase;
  color: var(--now-text-secondary);
  white-space: nowrap;
}
.anav__exit:hover { color: var(--now-text-primary); }

.is-admin .admin { padding-top: var(--now-space-12); }
.is-admin .admin__head { margin-bottom: var(--now-space-8); }

@media (max-width: 899px) {
  .anav { position: static; }
  .anav__inner { gap: var(--now-space-4); }
  .anav__exit { margin-left: 0; }
}

/* На узком ноутбуке колонки склада не помещались в строку и давали
   десять пикселей горизонтальной прокрутки — чиним сеткой, а не
   новым брейкпоинтом. */
@media (max-width: 1279px) {
  .stock__head,
  .stock__row {
    grid-template-columns: minmax(0, 11rem) minmax(0, 1fr) 5.5rem 6rem 3.5rem 9rem;
    gap: var(--now-space-3);
  }
  .skus__row { grid-template-columns: minmax(0, 11rem) minmax(0, 1fr) 4.5rem; }
}

/* ---------- клиенты ---------- */
.people { display: flex; flex-direction: column; margin-top: var(--now-space-6); }
.people__head,
.people__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 9rem 8rem 11rem 9rem;
  gap: var(--now-space-4);
  align-items: baseline;
  padding: var(--now-space-4) 0;
  border-bottom: var(--now-line-hairline) solid var(--now-border-default);
  font-size: var(--now-type-body-sm-size);
  color: inherit;
}
.people__head {
  font-size: var(--now-type-micro-size);
  letter-spacing: var(--now-type-micro-tracking);
  text-transform: uppercase;
  color: var(--now-text-secondary);
}
.people__row:hover { background: var(--now-bg-surface); }
.people__who { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.people__who b { font-weight: 400; }
.people__who span,
.people__who i {
  font-size: var(--now-type-micro-size);
  color: var(--now-text-secondary);
  font-style: normal;
  overflow: hidden;
  text-overflow: ellipsis;
}
.people__sum { font-variant-numeric: tabular-nums; }
.people__mark {
  font-style: normal;
  font-size: var(--now-type-micro-size);
  letter-spacing: var(--now-type-micro-tracking);
  text-transform: uppercase;
  color: var(--now-text-secondary);
}
.people__mark--open { color: var(--now-color-touch-outline); }

@media (max-width: 1279px) {
  .people__head, .people__row { grid-template-columns: minmax(0, 1fr) 7rem 7rem 9rem 7rem; gap: var(--now-space-3); }
}
@media (max-width: 899px) {
  .people__head { display: none; }
  .people__row { grid-template-columns: 1fr auto; row-gap: var(--now-space-2); }
  .people__who { grid-column: 1 / -1; }
}

/* ---------- аналитика ---------- */
.atable--an .atable__head,
.atable--an .atable__row { grid-template-columns: minmax(0, 1fr) 10rem 5rem 8rem 7rem; }
.atable .num { text-align: right; font-variant-numeric: tabular-nums; }

.bar {
  display: block;
  height: 6px;
  background: color-mix(in srgb, var(--now-text-primary) 10%, transparent);
}
.bar i { display: block; height: 100%; background: var(--now-text-primary); }

@media (max-width: 1279px) {
  .atable--an .atable__head,
  .atable--an .atable__row { grid-template-columns: minmax(0, 1fr) 6rem 4rem 6.5rem 5rem; gap: var(--now-space-3); }
}
@media (max-width: 899px) {
  .atable--an .atable__head { display: none; }
  .atable--an .atable__row { grid-template-columns: 1fr auto; }
  .atable--an .bar { display: none; }
}