:root { --bg:#0b1220; --panel:#121a2b; --ok:#16a34a; --warn:#d97706; --err:#dc2626; --txt:#e5eefc; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }   /* иначе .token-gate{display:flex} перекрывает атрибут hidden */
html, body { margin:0; height:100%; background:var(--bg); color:var(--txt);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  touch-action: manipulation;              /* нет двойного тапа-зума и пинч-зума страницы (масштаб пальцами приложения убран) */
  -webkit-text-size-adjust: 100%; overscroll-behavior: none; }
#app { display:flex; flex-direction:column; height:100dvh; }
.camera-wrap { position:relative; flex:1; background:#000; overflow:hidden; }
#preview { width:100%; height:100%; object-fit:cover; }
.frame-box { position:absolute; inset:18% 12%; border:3px solid rgba(255,255,255,.5);
  border-radius:14px; pointer-events:none; transition:border-color .2s; }
.frame-box.candidate { border-color: var(--warn); }
.frame-box.confirmed { border-color: var(--ok); }
.frame-box.detected { border-color: var(--ok); box-shadow: 0 0 0 3px rgba(22,163,74,.35); }  /* зелёная рамка при обнаружении */
.badge { position:absolute; top:10px; left:10px; padding:4px 10px; border-radius:12px;
  background:rgba(0,0,0,.55); font-size:13px; }
.badge.online { color:#7ee787; } .badge.offline { color:#ff7b72; }
.torch { position:absolute; top:10px; right:10px; font-size:20px; border:none; border-radius:50%;
  width:44px; height:44px; background:rgba(0,0,0,.55); color:#fff; }
.panel { background:var(--panel); padding:16px; display:flex; flex-direction:column; gap:10px; }
.status { font-size:14px; opacity:.9; }
.status-candidate { color:var(--warn); } .status-confirmed { color:var(--ok); }
.status-detected { color:var(--ok); font-weight:600; }
.status-error { color:var(--err); }
.number { font-size:40px; font-weight:700; letter-spacing:6px; text-align:center;
  font-variant-numeric: tabular-nums; }
.hint { min-height:18px; font-size:13px; opacity:.75; text-align:center; }
.buttons { display:flex; gap:8px; }
.buttons button { flex:1; padding:12px; border:none; border-radius:10px; font-size:15px;
  background:#22304a; color:var(--txt); }
.buttons button:disabled { opacity:.4; }
#correctBtn { background:var(--ok); }    /* «Верно» — зелёная */
#errorBtn { background:var(--warn); }     /* «Ошибка/Ввести» — янтарная */
.token-gate { position:fixed; inset:0; background:rgba(0,0,0,.85); display:flex;
  flex-direction:column; align-items:center; justify-content:center; gap:12px; }
.token-gate input { padding:10px; font-size:16px; border-radius:8px; border:1px solid #334; }
.token-gate button { padding:10px 18px; border:none; border-radius:8px; background:#2f6fed; color:#fff; }

/* ---- режимы камера/галерея ---- */
.modebar { display:flex; gap:6px; padding:8px; background:var(--panel); }
.mode { flex:1; padding:10px; border:none; border-radius:10px; background:#22304a; color:var(--txt); font-size:15px; }
.mode.active { background:#2f6fed; }

/* ---- галерея ---- */
.gallery-wrap { position:relative; flex:1; background:#000; overflow:hidden;
  display:flex; align-items:center; justify-content:center; }
#galleryImg { max-width:100%; max-height:100%; object-fit:contain; }
.gallery-empty { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; }
.pick-btn { display:inline-block; padding:14px 20px; border-radius:12px; background:#2f6fed;
  color:#fff; font-size:16px; cursor:pointer; }
.pick-btn.small { padding:8px 12px; font-size:13px; }
.gallery-nav { position:absolute; left:0; right:0; bottom:10px; display:flex;
  align-items:center; justify-content:center; gap:12px; }
.gallery-nav button { width:52px; height:44px; border:none; border-radius:10px;
  background:rgba(0,0,0,.6); color:#fff; font-size:18px; }
.gallery-nav button:disabled { opacity:.35; }
#galCounter { min-width:64px; text-align:center; background:rgba(0,0,0,.55);
  padding:6px 10px; border-radius:10px; font-variant-numeric:tabular-nums; }

/* ---- редактор номера (Ошибка/Ввести): ввод верных цифр клавиатурой телефона ---- */
.label-editor { position:fixed; inset:0; background:rgba(0,0,0,.92); display:flex;
  flex-direction:column; align-items:center; justify-content:center; gap:14px; padding:20px; z-index:20; }
.label-editor p { font-size:16px; margin:0; }
.label-editor input { font-size:34px; letter-spacing:8px; text-align:center; width:min(90vw,260px);
  padding:12px; border-radius:10px; border:1px solid #334; background:#0b1220; color:var(--txt);
  font-variant-numeric:tabular-nums; }
.label-editor .buttons { width:min(90vw,260px); }
#labelSend { background:#2f6fed; }

/* ---- тактильный отклик кнопок ---- */
button { transition: filter .12s, transform .12s; }
.buttons button:active, .mode:active, .gallery-nav button:active, .pick-btn:active { filter:brightness(1.35); }
button.tapped { filter:brightness(1.5); transform:scale(.97); }

/* ---- версия приложения (мелко внизу справа, для сверки что запущено) ---- */
.appver { position:fixed; right:6px; bottom:4px; z-index:40; font-size:10px; line-height:1;
  opacity:.55; color:var(--txt); pointer-events:none; font-variant-numeric:tabular-nums; }