/* Дополнения проекта к дизайн-системе стандарта 03: только var(--…) из tokens.css. */

.auth-page { display: grid; place-items: center; padding: var(--sp-4); }
.auth-box { width: min(400px, 100%); }
.auth-box .brand { padding: 0 0 var(--sp-2); }

.card.narrow { max-width: 560px; }

/* Миниатюра товара: фиксированный размер, чтобы строки таблицы не прыгали */
.thumb { width: 40px; height: 52px; flex: none; border-radius: var(--r-xs); object-fit: cover; background: var(--surface-3); }
.thumb.lg { width: 120px; height: 160px; }
tr.clickable { cursor: pointer; }

/* Карточка результата скана: крупно, цветом — видно с расстояния вытянутой руки */
.scan-state { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-4); border-radius: var(--r-md);
  background: var(--surface-2); border: 1px solid var(--line); }
.scan-state > svg.ic { width: 32px; height: 32px; color: var(--muted); }
.scan-state b { font-size: var(--fs-md); }
.scan-state[data-state="ok"] { background: var(--ok-soft); border-color: var(--ok); }
.scan-state[data-state="ok"] > svg.ic { color: var(--ok-ink); }
.scan-state[data-state="warn"] { background: var(--warn-soft); border-color: var(--warn); }
.scan-state[data-state="bad"] { background: var(--bad-soft); border-color: var(--bad); }
.scan-state[data-state="bad"] > svg.ic { color: var(--bad-ink); }
.input.qty { width: 90px; margin-left: auto; }
.marks { display: flex; flex-wrap: wrap; gap: var(--sp-1); padding-top: var(--sp-2); }
.btn.btn-xs { height: 20px; width: 20px; min-height: 0; padding: 0; }
details > summary { cursor: pointer; color: var(--primary-ink); }
tr.clickable:hover td { background: var(--surface-2); }