/* Сканер QR (фаза 14): полноэкранный оверлей поверх оболочки — таб-бар скрыт.
 * Только токены. Рамка кадра 240 px, сканирующая линия, подсказка и состояния снизу. */

.ark-scanner {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  flex-direction: column;
  background: var(--ark-ink);
  color: var(--ark-fg-on-ink);
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

.ark-scanner__head {
  flex: none;
  height: 52px;
  display: flex;
  align-items: center;
  gap: var(--ark-space-3);
  padding: 0 var(--ark-space-4) 0 var(--ark-space-2);
}

.ark-scanner__close {
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: var(--ark-r-full);
  background: transparent;
  color: var(--ark-fg-on-ink);
  display: flex;
  align-items: center;
  justify-content: center;
}

.ark-scanner__close .ark-icon { font-size: 26px; }

.ark-scanner__title {
  flex: 1;
  font: 700 18px/1.2 var(--ark-font);
}

.ark-scanner__stage {
  position: relative;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ark-scanner__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ark-scanner__frame {
  position: relative;
  width: 240px;
  height: 240px;
  border: 3px solid var(--ark-fg-on-ink);
  border-radius: var(--ark-r-lg);
  overflow: hidden;
}

.ark-scanner__frame[hidden] { display: none; }

.ark-scanner__line {
  position: absolute;
  left: 8px;
  right: 8px;
  top: 12px;
  height: 2px;
  border-radius: var(--ark-r-full);
  background: var(--ark-brand);
  animation: ark-scan-line 2.2s var(--ark-ease) infinite alternate;
}

@keyframes ark-scan-line {
  from { transform: translateY(0); }
  to { transform: translateY(210px); }
}

@media (prefers-reduced-motion: reduce) {
  .ark-scanner__line { animation: none; top: 50%; }
}

.ark-scanner__foot {
  flex: none;
  padding: var(--ark-space-4) var(--ark-space-5) var(--ark-space-6);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--ark-space-3);
  text-align: center;
}

.ark-scanner__hint {
  margin: 0;
  max-width: 300px;
  font: 15px/1.45 var(--ark-font);
  color: var(--ark-fg-on-ink);
  opacity: .85;
}

.ark-scanner__status {
  display: flex;
  align-items: center;
  gap: var(--ark-space-2);
  font: 600 14px var(--ark-font);
}

.ark-scanner__status .ark-icon { font-size: 20px; color: var(--ark-brand); }

.ark-scanner__state-title {
  margin: 0;
  font: 700 21px/1.2 var(--ark-font);
}

.ark-scanner__action,
.ark-scanner__manual { width: 100%; max-width: 320px; }