/* QR Popup — сканер QR в WebView */
.app-qr-scanner-popup {
  --f7-popup-tablet-width: 560px;
  --f7-popup-tablet-height: min(760px, calc(100vh - 48px));
}

.qr-scan-page .page-content {
  padding-bottom: 24px;
}

.qr-scan-intro {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 16px 16px 12px;
  padding: 12px 16px;
  border-radius: 14px;
  background: var(--light-gray, #f0f3f8);
  border: 1px solid rgba(30, 43, 71, 0.08);
}

.qr-scan-intro-icon {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: #1e2b47;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.qr-scan-intro-icon .icon {
  font-size: 26px;
  line-height: 1;
}

.qr-scan-intro-text {
  flex: 1;
  min-width: 0;
  margin: 0;
  padding: 0;
  font-size: 0.95rem;
  line-height: 1.35;
  color: #5a6b82;
  display: flex;
  align-items: center;
}

.qr-scan-viewport {
  position: relative;
  margin: 16px 16px 16px;
  border-radius: 18px;
  overflow: hidden;
  background: #0a1220;
  box-shadow: 0 8px 28px rgba(30, 43, 71, 0.18);
  min-height: 300px;
}

/* Контейнер библиотеки — не ломаем video/canvas (иначе QR не читается) */
.qr-reader-host,
.qr-scan-viewport #qr-reader {
  width: 100%;
  min-height: 300px;
  line-height: 0;
}

.qr-scan-viewport #qr-reader__scan_region {
  width: 100% !important;
  min-height: 300px !important;
}

.qr-scan-viewport #qr-reader__scan_region video {
  width: 100% !important;
  height: auto !important;
  max-width: 100% !important;
  object-fit: contain !important;
  display: block !important;
}

.qr-scan-viewport .local-video-player__controls,
.qr-scan-viewport .local-video-player__overlay {
  display: none !important;
}

.qr-scan-viewport #qr-reader__dashboard_section_csr,
#qr-reader__dashboard,
#qr-reader__header_message,
#qr-reader__camera_selection,
#qr-reader__filescan_input,
#qr-reader__dashboard_section_swaplink {
  display: none !important;
}

.qr-scan-frame {
  pointer-events: none;
  position: absolute;
  inset: 8% 6%;
  z-index: 2;
  border: 2px solid rgba(77, 194, 10, 0.65);
  border-radius: 12px;
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.35);
}

.qr-scan-corner {
  position: absolute;
  width: 28px;
  height: 28px;
  border-color: #4dc20a;
  border-style: solid;
}

.qr-scan-corner-tl {
  top: -2px;
  left: -2px;
  border-width: 4px 0 0 4px;
  border-radius: 8px 0 0 0;
}

.qr-scan-corner-tr {
  top: -2px;
  right: -2px;
  border-width: 4px 4px 0 0;
  border-radius: 0 8px 0 0;
}

.qr-scan-corner-bl {
  bottom: -2px;
  left: -2px;
  border-width: 0 0 4px 4px;
  border-radius: 0 0 0 8px;
}

.qr-scan-corner-br {
  bottom: -2px;
  right: -2px;
  border-width: 0 4px 4px 0;
  border-radius: 0 0 8px 0;
}

.qr-scan-status {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  padding: 12px 16px;
  font-size: 0.9rem;
  text-align: center;
  color: #fff;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.75));
}

.qr-scan-status.is-ready {
  color: #d4f5c4;
}

.qr-scan-status.is-success {
  color: #9ae66e;
}

.qr-scan-status.is-error {
  color: #ffb4b4;
}

.qr-scan-actions {
  padding: 0 16px;
}

.qr-scan-actions .button {
  width: 100%;
  margin-bottom: 12px;
}

.qr-scan-hint {
  margin: 0;
  font-size: 0.85rem;
  line-height: 1.45;
  color: #7c8ca0;
  text-align: center;
}

.dark .qr-scan-intro {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.08);
}

.dark .qr-scan-intro-text {
  color: #a8b8cc;
}

.dark .qr-scan-hint {
  color: #8a9bb0;
}

/* /qr-result/:request_id/ — серверный результат QR-действия */
.qr-result-page .page-content {
  --qr-result-tone: var(--app-color-info);
  --qr-result-tone-soft: var(--app-color-info-soft);
  box-sizing: border-box;
  display: flex;
  min-height: 100%;
  align-items: flex-start;
  padding: calc(var(--f7-page-navbar-offset, 0px) + var(--app-space-20)) var(--app-page-padding) calc(var(--app-space-20) + var(--app-safe-area-bottom));
  background:
    radial-gradient(circle at 50% 0%, rgba(var(--app-brand-accent-rgb), 0.09), transparent 42%),
    var(--app-page-bg);
}

.qr-result-page[data-qr-result-outcome="success"] .page-content {
  --qr-result-tone: var(--app-color-success);
  --qr-result-tone-soft: var(--app-color-success-soft);
}

.qr-result-page[data-qr-result-outcome="warning"] .page-content,
.qr-result-page[data-qr-result-outcome="offline"] .page-content,
.qr-result-page[data-qr-result-outcome="expired"] .page-content {
  --qr-result-tone: var(--app-color-warning);
  --qr-result-tone-soft: var(--app-color-warning-soft);
}

.qr-result-page[data-qr-result-outcome="error"] .page-content {
  --qr-result-tone: var(--app-color-error);
  --qr-result-tone-soft: var(--app-color-error-soft);
}

.qr-result-shell {
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
}

.qr-result-panel {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius-lg);
  background: var(--app-surface);
  box-shadow: var(--app-shadow-card);
}

.qr-result-panel::before {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: var(--app-space-xs);
  background: var(--qr-result-tone);
  content: '';
}

.qr-result-state {
  min-height: 280px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.qr-result-state > .app-state,
.qr-result-state > .app-content-loader {
  width: 100%;
  box-sizing: border-box;
}

.qr-result-state > .app-state--surface {
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.qr-result-state .app-state__icon {
  width: 72px;
  height: 72px;
  border-radius: var(--app-radius-lg);
  background: var(--qr-result-tone-soft);
  color: var(--qr-result-tone);
  box-shadow: 0 0 0 var(--app-space-sm) var(--qr-result-tone-soft);
}

.qr-result-state .app-state__icon .f7-icons {
  font-size: 34px;
}

.qr-result-state .app-state__title {
  max-width: 320px;
  font-size: var(--app-font-size-title);
  font-weight: 700;
}

.qr-result-state .app-state__text {
  max-width: 320px;
}

.qr-result-trust-note {
  display: flex;
  align-items: flex-start;
  gap: var(--app-space-sm);
  margin: var(--app-space-md) var(--app-space-xs) 0;
  color: var(--app-text-secondary);
  font-size: var(--app-font-size-caption);
  line-height: 1.45;
}

.qr-result-trust-note .icon {
  flex: 0 0 auto;
  color: var(--qr-result-tone);
  font-size: 17px;
}

.qr-result-done {
  width: 100%;
  min-height: var(--app-button-height);
  margin-top: var(--app-space-md);
}

@media (max-width: 340px), (max-height: 680px) {
  .qr-result-page .page-content {
    padding-top: calc(var(--f7-page-navbar-offset, 0px) + var(--app-space-12));
    padding-bottom: calc(var(--app-space-12) + var(--app-safe-area-bottom));
  }

  .qr-result-state {
    min-height: 240px;
  }

  .qr-result-state > .app-state,
  .qr-result-state > .app-content-loader {
    padding: var(--app-space-lg) var(--app-space-md);
  }
}