/* Emergency mobile camera fix: never show a white blank page when opening camera. */
html,
body { background: #02070d !important; }
body[data-view="scan"], body.force-scan { background: #02070d !important; overflow: hidden; }
body[data-view="scan"] .app-bg, body.force-scan .app-bg { display: block; }
body[data-view="scan"] #appShell, body.force-scan #appShell { min-height: 100vh; width: 100%; padding: 0 !important; background: #02070d !important; }
body[data-view="scan"] #scanPanel,
body.force-scan #scanPanel {
  position: fixed !important; inset: 0 !important; z-index: 9000 !important; display: grid !important;
  grid-template-rows: auto 1fr auto !important; width: 100vw !important; height: 100vh !important; min-height: 100vh !important;
  margin: 0 !important; padding: max(14px, env(safe-area-inset-top, 0px)) 14px max(18px, env(safe-area-inset-bottom, 0px)) !important;
  border: 0 !important; border-radius: 0 !important; overflow: hidden !important; color: #effbff !important;
  background: radial-gradient(circle at 50% 18%, rgba(0, 238, 255, .14), transparent 34%), linear-gradient(180deg, #020b13 0%, #02060b 100%) !important;
}
body[data-view="scan"] #scanPanel.hidden,
body.force-scan #scanPanel.hidden { display: grid !important; }
body[data-view="scan"] #scanPanel .panel-head,
body.force-scan #scanPanel .panel-head {
  position: relative !important; z-index: 5 !important; display: flex !important; align-items: center !important; justify-content: space-between !important;
  height: 74px !important; padding: 8px 0 !important; color: #f4fdff !important;
}
body[data-view="scan"] #scanPanel .panel-head h2,
body.force-scan #scanPanel .panel-head h2 { margin: 0 !important; font-size: 24px !important; font-weight: 900 !important; letter-spacing: .08em !important; }
body[data-view="scan"] #scanPanel .icon-btn,
body[data-view="scan"] #scanPanel .small-round,
body.force-scan #scanPanel .icon-btn,
body.force-scan #scanPanel .small-round {
  display: grid !important; place-items: center !important; width: 52px !important; height: 52px !important; border-radius: 18px !important;
  border: 1px solid rgba(118, 218, 255, .26) !important; color: #eafcff !important; background: rgba(8, 22, 34, .78) !important;
  box-shadow: 0 0 24px rgba(0, 238, 255, .1), inset 0 0 0 1px rgba(255,255,255,.03) !important;
}
body[data-view="scan"] .camera-frame,
body.force-scan .camera-frame {
  position: relative !important; z-index: 1 !important; width: 100% !important; height: 100% !important; min-height: 0 !important; overflow: hidden !important;
  border-radius: 28px !important; border: 1px solid rgba(0, 238, 255, .24) !important;
  background: radial-gradient(circle at 50% 50%, rgba(0, 238, 255, .08), transparent 44%), #000 !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.03), 0 0 38px rgba(0,238,255,.16) !important;
}
body[data-view="scan"] .camera-frame::before,
body.force-scan .camera-frame::before {
  content: "Camera loading..."; position: absolute; left: 50%; top: 50%; z-index: 0; transform: translate(-50%, -50%);
  color: rgba(194, 236, 244, .72); font-weight: 800; letter-spacing: .06em;
}
body[data-view="scan"] #cameraVideo,
body.force-scan #cameraVideo { position: relative !important; z-index: 1 !important; display: block !important; width: 100% !important; height: 100% !important; object-fit: cover !important; background: #000 !important; }
body[data-view="scan"] .scan-corners,
body[data-view="scan"] .live-sweep,
body.force-scan .scan-corners,
body.force-scan .live-sweep { z-index: 3 !important; pointer-events: none !important; }
body[data-view="scan"] .capture-row,
body.force-scan .capture-row {
  position: relative !important; z-index: 6 !important; display: grid !important; grid-template-columns: 1fr auto 1fr !important; align-items: center !important;
  gap: 20px !important; min-height: 104px !important; padding-top: 16px !important;
}
body[data-view="scan"] .capture-row .small-round:first-child,
body.force-scan .capture-row .small-round:first-child { justify-self: end !important; }
body[data-view="scan"] .capture-row .small-round:last-child,
body.force-scan .capture-row .small-round:last-child { justify-self: start !important; }
body[data-view="scan"] .shutter,
body.force-scan .shutter {
  display: block !important; width: 78px !important; height: 78px !important; border-radius: 50% !important; border: 4px solid rgba(0, 238, 255, .92) !important;
  background: radial-gradient(circle, #ffffff 0 42%, rgba(0, 238, 255, .28) 46%, rgba(0, 238, 255, .08) 68%) !important;
  box-shadow: 0 0 28px rgba(0, 238, 255, .72), 0 0 80px rgba(0, 238, 255, .2) !important;
}
body[data-view="home"] #scanPanel,
body[data-view="processing"] #scanPanel,
body[data-view="result"] #scanPanel,
body[data-view="history"] #scanPanel { display: none !important; }