/* UPD_ADAPTIVE_FINAL_CLEAN_START */

/*
  Общая адаптивность.
  Важно: ширину scanner4.html больше не регулируем здесь,
  чтобы не конфликтовать с его финальным inline-фиксатором.
*/

html {
  box-sizing: border-box;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

*, *::before, *::after {
  box-sizing: inherit;
}

body {
  margin: 0;
  min-width: 0;
  overflow-x: hidden;
}

img,
svg,
canvas,
video {
  max-width: 100%;
}

input,
select,
textarea,
button {
  max-width: 100%;
}

/* settings.html */
body > h1,
body > .card,
body > .settings-tabs,
body > #productsBaseConverterPanel,
body > #reportEmailSettingsPanel {
  width: min(100%, 1180px) !important;
  max-width: 1180px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}


/* login.html */
body:has(.login-logo) > .card,
body > .login-card,
body > .login-box,
body > .auth-card,
body > form {
  width: min(100%, 420px) !important;
  max-width: 420px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Модалки */
.modal {
  width: min(96vw, 980px) !important;
  max-height: calc(100dvh - 32px) !important;
  overflow: auto !important;
}

@media (max-width: 640px) {
  input,
  select,
  textarea {
    font-size: 18px !important;
  }

  .card {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  .modal {
    width: calc(100vw - 16px) !important;
    max-height: calc(100dvh - 16px) !important;
    border-radius: 14px !important;
  }
}

@media (max-width: 380px) {
  .card {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
}

/* UPD_ADAPTIVE_FINAL_CLEAN_END */

/* iOS safe-area fix for Dynamic Island / notch.
   Не меняет сетку и размеры кнопок, только добавляет верхний внутренний отступ шапке. */
@supports (padding-top: env(safe-area-inset-top)) {
  @media screen and (max-width: 900px) {
    .app-header,
    .topbar,
    .header,
    header {
      padding-top: max(12px, env(safe-area-inset-top)) !important;
    }

    .app-header.sticky,
    .topbar.sticky,
    .header.sticky,
    header.sticky {
      top: 0 !important;
    }
  }
}

/* ── Кнопка переключения экранной клавиатуры ── */
.keyboard-toggle-btn {
  position: fixed !important;
  left: 16px !important;
  bottom: max(15px, env(safe-area-inset-bottom, 0px)) !important;
  z-index: 999999 !important;
  width: 52px !important;
  min-width: 52px !important;
  max-width: 52px !important;
  height: 48px !important;
  min-height: 48px !important;
  max-height: 48px !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 8px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 26px !important;
  line-height: 1 !important;
  background: #6c757d !important;
  color: #fff !important;
  box-shadow: 0 2px 6px rgba(0,0,0,.35) !important;
  opacity: .82 !important;
  cursor: pointer !important;
}
.keyboard-toggle-btn.enabled {
  background: #28a745 !important;
  opacity: .95 !important;
}
.keyboard-toggle-btn:active {
  transform: scale(.96) !important;
}
@media (max-width: 520px) {
  .keyboard-toggle-btn {
    left: 7px !important;
    bottom: max(7px, env(safe-area-inset-bottom, 0px)) !important;
    height: 48px !important;
    min-height: 48px !important;
    max-height: 48px !important;
    font-size: 26px !important;
  }
}

/* ── Шапка (единственный источник стилей для всех страниц) ── */
/* UNIVERSAL_HEADER_START */

/* Шапка внутри контейнера с padding:16px — выезжает на всю ширину */
.scr > .header,
.screen > .header,
body[data-header-inset] > .header {
  margin: -16px -16px 16px !important;
}

.header {
  background: var(--header-bg, #06a) !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  min-height: 64px !important;
  padding: 8px 16px !important;
  box-shadow: 0 2px 4px rgba(0,0,0,.15) !important;
  box-sizing: border-box !important;
  color: #fff !important;
}
.header-left {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  flex: 1 !important;
  min-width: 0 !important;
}
.header-logo {
  height: 52px !important;
  max-height: 52px !important;
  width: auto !important;
  max-width: 260px !important;
  object-fit: contain !important;
  margin-right: 14px !important;
  flex: 0 0 auto !important;
}
.header-title {
  font-size: 17px !important;
  font-weight: 600 !important;
  line-height: 1.1 !important;
  opacity: .92 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  color: #fff !important;
  min-width: 0 !important;
}
.header-user-panel {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  flex: 0 0 auto !important;
}
.header-user-chip {
  background: rgba(255,255,255,.25) !important;
  color: #fff !important;
  border-radius: 4px !important;
  padding: 0 10px !important;
  height: 34px !important;
  min-height: 34px !important;
  max-height: 34px !important;
  display: inline-flex !important;
  align-items: center !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  max-width: 130px !important;
  overflow: hidden !important;
  white-space: nowrap !important;
  text-overflow: ellipsis !important;
  box-sizing: border-box !important;
}
.header-logout-btn {
  height: 34px !important;
  min-height: 34px !important;
  max-height: 34px !important;
  width: auto !important;
  min-width: 68px !important;
  padding: 0 10px !important;
  border-radius: 6px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  background: #d9534f !important;
  color: #fff !important;
  border: 0 !important;
  cursor: pointer !important;
  flex: 0 0 auto !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  margin: 0 !important;
}
.header-back-btn {
  height: 34px !important;
  min-height: 34px !important;
  max-height: 34px !important;
  width: auto !important;
  padding: 0 10px !important;
  border-radius: 6px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  background: rgba(255,255,255,.2) !important;
  color: #fff !important;
  border: 0 !important;
  cursor: pointer !important;
  flex: 0 0 auto !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  white-space: nowrap !important;
  margin: 0 !important;
}
.header-badge {
  background: rgba(255,255,255,.25) !important;
  color: #fff !important;
  border-radius: 4px !important;
  padding: 0 10px !important;
  height: 34px !important;
  min-height: 34px !important;
  display: inline-flex !important;
  align-items: center !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  box-sizing: border-box !important;
}
.header button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  margin: 0 !important;
}
@media (max-width: 520px) {
  .header { min-height: 58px !important; padding: 7px 10px !important; gap: 6px !important; }
  /* узкий экран: широкий баннер → компактный квадратный логотип, чтобы влезло название */
  .header-logo {
    content: url("/site_favicon_192.png?v=company-priority-all1") !important;
    height: 42px !important; max-height: 42px !important;
    width: 42px !important; max-width: 42px !important;
    margin-right: 8px !important; object-fit: contain !important;
  }
  .header-title { font-size: 14px !important; }
  .header-user-chip { max-width: 82px !important; font-size: 11px !important; padding: 0 7px !important; }
  .header-logout-btn { min-width: 58px !important; font-size: 11px !important; padding: 0 7px !important; }
  .header-back-btn { font-size: 11px !important; padding: 0 7px !important; }
}

/* Иконка роли в чипе пользователя (перед именем) — чтобы при тесте сразу видеть права. */
.header-user-chip .hrb-ico { margin-right: 5px !important; font-size: 14px !important; line-height: 1 !important; }

/* UNIVERSAL_HEADER_END */

/* ── Десктоп: расширенная сетка для .scr-страниц (acceptance, return) ── */
/* SCR_DESKTOP_ADAPTIVE_START */
@media (min-width: 1000px) {
  .scr {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  /* При нулевом padding у .scr — шапка не должна уезжать влево */
  .scr > .header {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  .scr > :not(.header) {
    width: calc(100% - 32px) !important;
    max-width: 1280px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
  }
}
@media (min-width: 1920px) {
  .scr > :not(.header) {
    max-width: 1500px !important;
  }
}
/* SCR_DESKTOP_ADAPTIVE_END */

/* ── Фиксированные кнопки звука и настроек (mode.html) ── */
/* Расстояние между кнопками: клавиатура(52px) + 8px gap + настройки(52px) + 8px gap + звук */
.btn-set { left: 76px !important; }
.btn-snd { left: 136px !important; }
@media (max-width: 520px) {
  .btn-set { left: 72px !important; }
  .btn-snd { left: 132px !important; }
}

/* ── Подпись приложения ── */
.app-signature {
  position: fixed !important;
  right: 14px !important;
  bottom: 15px !important;
  z-index: 999999 !important;
  pointer-events: none !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 0.3px !important;
  color: #d69e2e !important;
  opacity: 0.85 !important;
  text-shadow: 0 1px 2px rgba(0,0,0,.25) !important;
}
html[data-theme="dark"] .app-signature {
  color: #ffd166 !important;
  opacity: 0.9 !important;
  text-shadow: 0 1px 3px rgba(0,0,0,.7) !important;
}
@media (max-width: 520px) {
  .app-signature {
    right: 9px !important;
    bottom: 12px !important;
    font-size: 12px !important;
  }
}

/* ── Подпись: iOS safe-area (Dynamic Island / чёлка) ── */
.app-signature,
.bottom-powered-safe-badge {
  right: max(12px, env(safe-area-inset-right, 0px)) !important;
  bottom: max(13px, env(safe-area-inset-bottom, 0px)) !important;
  left: auto !important;
  max-width: 46vw !important;
  padding: 7px 10px !important;
  border-radius: 12px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  transform: none !important;
}
@media (max-width: 430px) {
  .app-signature,
  .bottom-powered-safe-badge {
    right: max(10px, env(safe-area-inset-right, 0px)) !important;
    bottom: max(13px, env(safe-area-inset-bottom, 0px)) !important;
    max-width: 46vw !important;
    padding: 6px 8px !important;
    font-size: 11px !important;
  }
}
@media (max-width: 390px) {
  .app-signature,
  .bottom-powered-safe-badge {
    right: max(10px, env(safe-area-inset-right, 0px)) !important;
    bottom: max(11px, env(safe-area-inset-bottom, 0px)) !important;
    max-width: 46vw !important;
    font-size: 10px !important;
  }
}

/* ── Вкладки настроек (settings.html) ────────────────────────────────────── */
body > .settings-tabs {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  padding: 8px !important;
}
.stab {
  flex: none !important;
  width: 100% !important;
  min-height: 56px !important;
  padding: 14px 16px !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
  text-align: center !important;
  border-radius: 8px !important;
  border: 0 !important;
  margin: 0 !important;
  cursor: pointer !important;
  background: #e2e6ea !important;
  color: #444 !important;
  box-sizing: border-box !important;
}
.stab.active {
  background: #06a !important;
  color: #fff !important;
}
html[data-theme=dark] body > .settings-tabs {
  background: #1f2937 !important;
  box-shadow: 0 1px 3px rgba(0,0,0,.4) !important;
}
html[data-theme=dark] .stab {
  background: #374151 !important;
  color: #d1d5db !important;
}
html[data-theme=dark] .stab.active {
  background: #2563eb !important;
  color: #fff !important;
}

/* BTN_UNIFIED_START */
.btn-primary, .btn-success, .btn-danger, .btn-secondary, .btn-info {
  display: block !important;
  width: 100% !important;
  border: none !important;
  padding: 18px !important;
  border-radius: 8px !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  font-family: inherit !important;
  color: #fff !important;
  transition: background 0.15s, opacity .15s;
  min-height: 60px !important;
}
[class*="btn-"]:active { transform: scale(0.98); }
.btn-primary { background: #06a; }
.btn-primary:active { background: #048; }
.btn-success { background: #28a745; }
.btn-success:active { background: #1e7e34; }
.btn-danger { background: #d9534f; }
.btn-danger:active { background: #c0392b; }
.btn-secondary { background: #6c757d; }
.btn-secondary:active { background: #545b62; }
.btn-info { background: #17a2b8; }
.btn-info:active { background: #117a8b; }
[class*="btn-"]:disabled { background: #aaa !important; cursor: not-allowed; transform: none !important; }
/* BTN_UNIFIED_END */

/* ─── iOS safe-area FINAL OVERRIDE для мобильных (телефоны) ─── */
@supports (padding-top: env(safe-area-inset-top)) {
  @media (max-width: 520px) {
    .header,
    header,
    .app-header,
    .topbar {
      padding-top: max(7px, env(safe-area-inset-top)) !important;
    }
  }
}

/* ─── Заголовок шапки в 2 строки на телефонах ─── */
@media (max-width: 520px) {
  .header-title {
    white-space: normal !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-overflow: clip !important;
    line-height: 1.15 !important;
  }
  .header {
    min-height: 64px !important;
    align-items: center !important;
  }

/* ─── В обычном браузере (не PWA) — кнопки на фиксированном bottom, без env ─── */
/* В PWA env(safe-area-inset-bottom) стабилен (только home-indicator).             */
/* В Chrome iOS он скачет вместе с панелью браузера — поэтому в браузере не используем. */
@media not all and (display-mode: standalone) {
  .keyboard-toggle-btn,
  .btn-fixed,
  .app-signature,
  .bottom-powered-safe-badge {
    bottom: 15px !important;
  }
}
}

/* ============================================================
   ДИЗАЙН-СИСТЕМА 2026 — единые токены и компоненты (свет/тьма)
   Бренд-цвет: синий. Без color-mix (совместимость со старым Chrome).
   ============================================================ */
:root{
  --bg:#eaeef3; --surface:#ffffff; --surface-2:#f5f8fc; --border:#e2e8f0;
  --text:#1b2733; --muted:#64748b;
  --primary:#0a6cc2; --primary-d:#08518f;
  --success:#2e9e5b; --warning:#e0890b; --danger:#e0524d; --info:#1597a8; --accent:#0e7490; --violet:#6f42c1;
  --r:16px; --r-sm:11px; --r-xs:8px; --ctl-r:10px;
  --shadow:0 1px 2px rgba(16,24,40,.05), 0 6px 16px rgba(16,24,40,.07);
  --shadow-lg:0 8px 28px rgba(16,24,40,.14);
  --ring:0 0 0 4px rgba(10,108,194,.20);
}
html[data-theme="dark"]{
  --bg:#0e1726; --surface:#1b2638; --surface-2:#141d2e; --border:#2c3a4f;
  --text:#e8eef6; --muted:#94a3b8;
  --primary:#3b93e0; --primary-d:#2c7bc4;
  --success:#43b873; --warning:#eaa133; --danger:#ef6b66; --info:#36b3c4; --accent:#3bacc4; --violet:#a98bdb;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 6px 18px rgba(0,0,0,.4);
  --shadow-lg:0 10px 30px rgba(0,0,0,.55);
  --ring:0 0 0 4px rgba(59,147,224,.30);
}

/* Шапка — плоский бренд-цвет (вариант B) */
.header{ background:var(--primary) !important; }

/* ── ВСЕ КНОПКИ ИЗ ОДНИХ ТОКЕНОВ (единый радиус 10px + цвета из палитры) ── */
/* Большие кнопки действий */
.btn-primary, .btn-success, .btn-danger, .btn-secondary, .btn-info{ border-radius:var(--ctl-r) !important; font-size:16px !important; font-weight:500 !important; }
.btn-primary{ background:var(--primary) !important; } .btn-primary:active{ background:var(--primary-d) !important; }
.btn-success{ background:var(--success) !important; } .btn-danger{ background:var(--danger) !important; }
.btn-secondary{ background:var(--muted) !important; } .btn-info{ background:var(--info) !important; }
/* Кнопки в шапке — тот же радиус и те же цвета-токены */
.header-logout-btn{ background:var(--danger) !important; border-radius:var(--ctl-r) !important; }
.header-back-btn{ border-radius:var(--ctl-r) !important; }
.header-user-chip, .header-badge{ border-radius:var(--ctl-r) !important; }
/* Плавающие иконки (клавиатура/настройки/звук) — тот же радиус и --muted/--success */
.keyboard-toggle-btn{ border-radius:var(--ctl-r) !important; background:var(--muted) !important; }
.keyboard-toggle-btn.enabled{ background:var(--success) !important; }
/* keyboard: узкий экран в обычном браузере (не-PWA) — тоже опустить/прижать на 5px, фикс. bottom без env (парно к non-standalone правилу выше) */
@media (max-width: 520px) {
  @media not all and (display-mode: standalone) {
    .keyboard-toggle-btn { left: 7px !important; bottom: 7px !important; }
  }
}
/* Иконка клавиатуры — чёткая SVG вместо эмодзи (ровно по центру на всех устройствах) */
.keyboard-toggle-btn{ font-size:0 !important; }
.keyboard-toggle-btn::before{ content:"" !important; display:block !important; width:26px !important; height:26px !important; background:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cmVjdCB4PSIxLjUiIHk9IjUuNSIgd2lkdGg9IjIxIiBoZWlnaHQ9IjEzIiByeD0iMi41IiBmaWxsPSJub25lIiBzdHJva2U9IiNmZmYiIHN0cm9rZS13aWR0aD0iMS43Ii8+PGcgZmlsbD0iI2ZmZiI+PHJlY3QgeD0iNC4yIiB5PSI4LjMiIHdpZHRoPSIyIiBoZWlnaHQ9IjIiIHJ4PSIuNSIvPjxyZWN0IHg9IjcuNiIgeT0iOC4zIiB3aWR0aD0iMiIgaGVpZ2h0PSIyIiByeD0iLjUiLz48cmVjdCB4PSIxMSIgeT0iOC4zIiB3aWR0aD0iMiIgaGVpZ2h0PSIyIiByeD0iLjUiLz48cmVjdCB4PSIxNC40IiB5PSI4LjMiIHdpZHRoPSIyIiBoZWlnaHQ9IjIiIHJ4PSIuNSIvPjxyZWN0IHg9IjE3LjgiIHk9IjguMyIgd2lkdGg9IjIiIGhlaWdodD0iMiIgcng9Ii41Ii8+PHJlY3QgeD0iNC4yIiB5PSIxMS40IiB3aWR0aD0iMiIgaGVpZ2h0PSIyIiByeD0iLjUiLz48cmVjdCB4PSI3LjYiIHk9IjExLjQiIHdpZHRoPSIyIiBoZWlnaHQ9IjIiIHJ4PSIuNSIvPjxyZWN0IHg9IjExIiB5PSIxMS40IiB3aWR0aD0iMiIgaGVpZ2h0PSIyIiByeD0iLjUiLz48cmVjdCB4PSIxNC40IiB5PSIxMS40IiB3aWR0aD0iMiIgaGVpZ2h0PSIyIiByeD0iLjUiLz48cmVjdCB4PSIxNy44IiB5PSIxMS40IiB3aWR0aD0iMiIgaGVpZ2h0PSIyIiByeD0iLjUiLz48cmVjdCB4PSI3IiB5PSIxNC42IiB3aWR0aD0iMTAiIGhlaWdodD0iMS45IiByeD0iLjkiLz48L2c+PC9zdmc+") center/contain no-repeat !important; }
.btn-fixed{ border-radius:var(--ctl-r) !important; background:var(--muted) !important; }

/* ── ВСЕ ПОЛЯ ВВОДА ИДЕНТИЧНЫ (единая рамка/радиус/фокус из токенов) ── */
input[type="text"], input[type="password"], input[type="number"], input[type="search"],
input[type="email"], input[type="tel"], input[type="url"], input[type="date"], input[type="datetime-local"],
input:not([type]), select, textarea{
  background:var(--surface) !important; color:var(--text) !important;
  border:2px solid var(--border) !important; border-radius:var(--ctl-r) !important;
  padding:12px 14px !important; font-family:inherit !important; outline:none !important;
}
input[type="text"]:focus, input[type="password"]:focus, input[type="number"]:focus, input[type="search"]:focus,
input[type="email"]:focus, input[type="tel"]:focus, input[type="url"]:focus, input[type="date"]:focus,
input[type="datetime-local"]:focus, input:not([type]):focus, select:focus, textarea:focus{
  border-color:var(--primary) !important; box-shadow:var(--ring) !important;
}

/* ── Единые компоненты (новые классы .ui-*, страницы переходят на них в Фазе B) ── */
.ui-card{ background:var(--surface); border:1px solid var(--border); border-radius:var(--r-sm); box-shadow:var(--shadow); padding:16px; color:var(--text); }
.ui-field{ width:100%; font-size:18px; font-weight:600; padding:14px 16px; border:2px solid var(--border); border-radius:var(--r-sm); background:var(--surface); color:var(--text); outline:none; }
.ui-field:focus{ border-color:var(--primary); box-shadow:var(--ring); }
.ui-banner{ border-radius:var(--r-sm); padding:11px 15px; font-weight:600; font-size:14px; border:1px solid; }
.ui-banner.info{ background:#e6f6f8; border-color:#bfe6ec; color:#0e6b78; }
.ui-banner.warn{ background:#fdf1df; border-color:#f6dcae; color:#a96a08; }
.ui-banner.ok{ background:#e7f6ed; border-color:#bfe6cd; color:#1f7a44; }
html[data-theme="dark"] .ui-banner.info{ background:#0c2a30; border-color:#155e6e; color:#7fd3df; }
html[data-theme="dark"] .ui-banner.warn{ background:#332813; border-color:#5c4a1f; color:#eaa133; }
html[data-theme="dark"] .ui-banner.ok{ background:#10271a; border-color:#1f5236; color:#7fd6a0; }
.ui-badge{ display:inline-block; font-size:13px; font-weight:600; padding:4px 11px; border-radius:20px; margin:4px 6px 0 0; background:#e7f1ff; color:#0a58ca; }
.ui-badge.violet{ background:#f3e8ff; color:#7e22ce; }
.ui-badge.green{ background:#e7f6ed; color:#1f7a44; }
html[data-theme="dark"] .ui-badge{ background:#26344a; color:#9ec1ff; }
html[data-theme="dark"] .ui-badge.violet{ background:#3a2a4d; color:#d8b4fe; }
html[data-theme="dark"] .ui-badge.green{ background:#10271a; color:#7fd6a0; }
/* База кнопки очистки «×» — чтобы работала и на страницах без своего стиля (напр. check) */
.input-wrap{ position:relative; display:block; width:100%; }
.input-wrap > input{ padding-right:52px !important; font-size:19px !important; font-weight:400 !important; min-height:58px !important; box-sizing:border-box !important; }
.input-wrap > .clear-btn{ position:absolute !important; top:50% !important; right:6px !important; transform:translateY(-50%) !important; width:38px !important; min-width:38px !important; height:38px !important; border:0 !important; border-radius:var(--ctl-r) !important; background:var(--danger) !important; color:#fff !important; cursor:pointer !important; z-index:5 !important; box-shadow:var(--shadow) !important; -webkit-tap-highlight-color:transparent !important; }
.input-wrap > .clear-btn:active{ transform:translateY(-50%) scale(.95) !important; }

/* Кнопка очистки поля «×» — ровно по центру на всех страницах (выше специфичность страниц) */
.input-wrap button.clear-btn{ line-height:1 !important; font-size:20px !important; font-weight:500 !important; display:none; align-items:center !important; justify-content:center !important; text-align:center !important; padding:0 !important; }
.input-wrap button.clear-btn.visible{ display:inline-flex !important; }

/* Вкладки настроек — из токенов (активная = бренд-цвет) */
.stab{ background:var(--surface-2) !important; color:var(--text) !important; font-weight:600 !important; }
.stab.active{ background:var(--primary) !important; color:#fff !important; }
/* PLAN_LIST_BTN — кнопки списка позиций (scanner4): размер/скругление/шрифт ОДИНАКОВЫЕ, отличаются ТОЛЬКО цветом */
#planProgressBox .pp-btn{ width:46px !important; min-width:46px !important; max-width:46px !important; height:40px !important; min-height:40px !important; max-height:40px !important; padding:0 !important; margin:0 !important; border:0 !important; border-radius:8px !important; font-size:16px !important; font-weight:700 !important; line-height:1 !important; color:#fff !important; display:inline-flex !important; align-items:center !important; justify-content:center !important; cursor:pointer !important; }
#planProgressBox .pp-btn--icon{ font-size:26px !important; }
#planProgressBox .pp-btn--gray{ background:#6c757d !important; }
#planProgressBox .pp-btn--green{ background:#28a745 !important; }
#planProgressBox .pp-btn--blue{ background:#06a !important; }
#planProgressBox .pp-btn--orange{ background:var(--warning) !important; }
/* DESIGN-SYSTEM-2026-END */


/* ====== TSD_PLASHKI_TEMPLATE — единый шаблон плашек для узких ТСД (≤520) ======
   Шире блоки + теснее плашки, как в Отгрузке. Шапка не трогается. */
@media (max-width: 520px){
  .scr > :not(.header), .screen > :not(.header){
    margin-left: -10px !important;
    margin-right: -10px !important;
  }
  .scr .irow, .screen .irow{
    padding: 9px 8px !important;
    gap: 6px !important;
  }
}
/* ====== /TSD_PLASHKI_TEMPLATE ====== */