/* ============================================
   SellMob — Design System
   Palette: deep navy + electric teal + warm white
   ============================================ */
:root {
  --navy:      #0f1f3d;
  --navy-mid:  #1a2f57;
  --navy-soft: #243a6b;
  --teal:      #00c9a7;
  --teal-dark: #00a88a;
  --teal-glow: rgba(0,201,167,.18);
  --amber:     #f5a623;
  --white:     #f8fafb;
  --gray-100:  #eef1f5;
  --gray-300:  #c8d0de;
  --gray-500:  #7b8aab;
  --danger:    #e84646;
  --success:   #00c9a7;

  --radius-sm:  8px;
  --radius-md:  14px;
  --radius-lg:  22px;
  --radius-xl:  32px;

  --shadow-sm: 0 2px 8px rgba(15,31,61,.12);
  --shadow-md: 0 6px 24px rgba(15,31,61,.18);
  --shadow-lg: 0 12px 40px rgba(15,31,61,.25);

  --font: 'Inter', 'Segoe UI', system-ui, sans-serif;
  --transition: .22s cubic-bezier(.4,0,.2,1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font);
  background: var(--gray-100);
  color: var(--navy);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}
/* Модальное окно сканера — фиксировано по центру экрана */
.modal-overlay {
  position: fixed;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: 90vw !important;
  max-width: 380px !important;
  height: auto !important;
  z-index: 99999 !important;
  display: none !important; /* По умолчанию скрыто */
  box-sizing: border-box;
}

/* Класс активации окна */
.modal-overlay.active {
  display: block !important;
}

.modal-box {
  background-color: #ffffff !important;
  width: 100% !important;
  padding: 25px 20px;
  border-radius: 12px;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4) !important;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
}

.modal-box p {
  color: #333333;
  font-size: 24px;
  font-weight: bold;
  text-align: center;
  margin-bottom: 10px;
}

#scanner-container {
  width: 100%;
  max-width: 340px;
  border-radius: 8px;
  overflow: hidden;
  background: #000;
}

/* Стиль для кнопки СКАНИРОВАТЬ в панели */
#scanBtn {
  height: 65px;
  font-size: 22px;
  font-weight: bold;
  border: none;
  border-radius: 8px;
  background-color: #2ecc71;
  color: white;
  padding: 0 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ── Scrollbar ── */
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--gray-300); border-radius: 99px; }