html, body, #ar-root { width: 100%; height: 100%; margin: 0; overflow: hidden; background: #000; }
body { font-family: Inter, ui-sans-serif, system-ui, sans-serif; color: #eafaff; }
#ar-root { position: fixed; inset: 0; }
.overlay { position: fixed; inset: 0; z-index: 10; pointer-events: none; display: flex; flex-direction: column; justify-content: space-between; padding: max(14px, env(safe-area-inset-top)) 14px max(14px, env(safe-area-inset-bottom)); }
.topbar, .start-card { pointer-events: auto; background: rgba(3, 9, 14, .82); border: 1px solid rgba(75, 206, 255, .35); backdrop-filter: blur(10px); box-shadow: 0 12px 40px rgba(0,0,0,.35); }
.topbar { align-self: center; max-width: min(92vw, 680px); padding: 9px 13px; border-radius: 999px; font-size: 13px; text-align: center; }
.topbar[data-kind="ok"] { border-color: rgba(100,255,196,.5); }
.topbar[data-kind="error"] { border-color: rgba(255,100,100,.6); }
.start-wrap { position: fixed; inset: 0; z-index: 20; display: grid; place-items: center; padding: 24px; background: radial-gradient(circle, rgba(6,35,48,.55), rgba(0,0,0,.85)); }
.start-wrap[hidden] { display: none; }
.start-card { width: min(480px, 100%); padding: 24px; border-radius: 18px; }
.start-card h1 { margin: 0 0 10px; font-size: 28px; }
.start-card p { margin: 8px 0; color: #a9c4d0; line-height: 1.55; }
.progress { height: 8px; border-radius: 999px; background: #0b1c25; overflow: hidden; margin: 18px 0; }
.progress > div { height: 100%; width: 0%; background: #58dbff; transition: width .15s linear; }
.actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
button, a.button { border: 1px solid #285a6e; border-radius: 10px; padding: 11px 14px; background: #0a1b26; color: #eafaff; font: inherit; font-weight: 800; text-decoration: none; cursor: pointer; }
button.primary { color: #00141d; background: #5edcff; border-color: #5edcff; }
button:disabled { opacity: .45; cursor: wait; }
.hint { font-size: 12px; color: #7894a1; }