*{box-sizing:border-box}
html,body{margin:0;height:100%;font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;background:#071018;color:#fff}
body{overflow:hidden}
.app{position:relative;width:100%;height:100dvh;min-height:100vh;background:#0b1720;overflow:hidden}
#camera{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#111}
.shade{position:absolute;inset:0;background:linear-gradient(to bottom,rgba(0,0,0,.52),rgba(0,0,0,.05) 35%,rgba(0,0,0,.12) 60%,rgba(0,0,0,.68))}
.topbar{position:absolute;z-index:8;top:0;left:0;right:0;display:flex;align-items:center;gap:12px;padding:calc(env(safe-area-inset-top) + 12px) 16px 12px}
.icon-btn{width:42px;height:42px;border-radius:50%;border:1px solid rgba(255,255,255,.35);background:rgba(0,0,0,.25);color:#fff;font-size:30px;line-height:36px}
.brand{font-weight:800;letter-spacing:.08em;font-size:12px}
.model{font-size:13px;opacity:.86}
.counter{margin-left:auto;background:rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.22);border-radius:999px;padding:8px 11px;font-weight:700;font-size:13px}
.panel{position:absolute;z-index:7;left:16px;right:16px;bottom:calc(env(safe-area-inset-bottom) + 18px);padding:22px;border-radius:22px;background:rgba(8,20,28,.88);backdrop-filter:blur(12px);box-shadow:0 18px 60px rgba(0,0,0,.38)}
.intro h1,.finish h1{margin:7px 0 10px;font-size:26px}
.intro p,.finish p{margin:0 0 18px;line-height:1.45;color:#dce7ec}
.badge,.step-label{font-size:11px;font-weight:800;letter-spacing:.12em;color:#8fe0be}
.primary,.secondary{border:0;border-radius:14px;padding:14px 18px;font-size:16px;font-weight:800}
.primary{background:#20b879;color:#fff}
.secondary{background:rgba(255,255,255,.12);color:#fff;border:1px solid rgba(255,255,255,.16)}
.danger{background:rgba(193,48,48,.24);border-color:rgba(255,120,120,.35)}
.intro .primary,.finish .primary{width:100%}
.small{font-size:12px!important;opacity:.72;margin-top:12px!important;margin-bottom:0!important}
.guide{position:absolute;z-index:6;inset:0}
.target{position:absolute;left:66%;top:28%;transform:translate(-50%,-50%);display:flex;align-items:center;gap:9px;transition:.35s ease}
.pulse{width:58px;height:58px;border:3px solid #35e79c;border-radius:50%;box-shadow:0 0 0 0 rgba(53,231,156,.7);animation:pulse 1.6s infinite;background:rgba(53,231,156,.08)}
.arrow{font-size:48px;line-height:1;color:#fff;text-shadow:0 3px 12px rgba(0,0,0,.8);transform:rotate(180deg)}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(53,231,156,.6)}70%{box-shadow:0 0 0 20px rgba(53,231,156,0)}100%{box-shadow:0 0 0 0 rgba(53,231,156,0)}}
.instruction{position:absolute;left:14px;right:14px;bottom:calc(env(safe-area-inset-bottom) + 14px);padding:18px;border-radius:20px;background:rgba(7,18,25,.9);backdrop-filter:blur(10px);box-shadow:0 12px 50px rgba(0,0,0,.35)}
.instruction h2{margin:4px 0 6px;font-size:22px}
.instruction p{margin:0 0 8px;color:#e8f1f4;line-height:1.35}
.hint{font-size:13px;color:#9fd8c1;margin-bottom:14px}
.actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.finish{text-align:center}
.finish-icon{width:72px;height:72px;margin:0 auto 10px;border-radius:50%;display:grid;place-items:center;background:#20b879;font-size:38px;font-weight:900}
.summary{text-align:left;background:rgba(255,255,255,.07);border-radius:16px;padding:8px 14px;margin:18px 0}
.summary div{display:flex;justify-content:space-between;gap:20px;padding:10px 0;border-bottom:1px solid rgba(255,255,255,.08)}
.summary div:last-child{border-bottom:0}
.summary span{color:#aac0ca}
.summary strong{text-align:right}
.camera-error{position:absolute;z-index:10;left:16px;right:16px;top:50%;transform:translateY(-50%);padding:20px;border-radius:16px;background:#7d1f1f;display:flex;flex-direction:column;gap:6px}
.hidden{display:none!important}

@media (min-width:800px){
  .app{max-width:480px;margin:0 auto;box-shadow:0 0 50px rgba(0,0,0,.6)}
}
/* Ajuste para moviles */
@media (max-width: 600px) {
  .instruction {
    bottom: 75px;
    padding: 14px;
  }

  .instruction h2 {
    font-size: 20px;
  }

  .instruction p {
    font-size: 15px;
  }

  .actions .primary,
  .actions .secondary {
    padding: 12px 8px;
    font-size: 15px;
  }

  .finish {
    bottom: 75px;
  }
}
.detection-status {
  position: absolute;
  z-index: 20;
  top: 90px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.72);
  color: white;
  padding: 10px 16px;
  border-radius: 20px;
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
}