:root{
  --black:#0D0D0D; --ink:#08080a;
  --orange:#FF4500; --ember:#F2480C; --gold:#FFC846; --yellow:#FFC400;
  --white:#fff; --muted:#b9b6ad;
  --safe-b: env(safe-area-inset-bottom, 0px);
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{
  margin:0; background:var(--black); color:var(--white);
  font-family:Inter,system-ui,sans-serif;
  overflow:hidden; position:fixed; inset:0;
}
.screen{position:absolute; inset:0; display:none; flex-direction:column}
.screen.active{display:flex}

/* ---------- BOAS-VINDAS / ERRO ---------- */
#welcome,#error{
  align-items:center; justify-content:center; text-align:center; padding:32px 28px;
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(255,69,0,.18), transparent 60%),
    radial-gradient(100% 60% at 50% 100%, rgba(255,200,70,.10), transparent 60%),
    var(--black);
}
.welcome-inner{max-width:420px; display:flex; flex-direction:column; align-items:center; gap:18px}
.kicker{font-family:Inter; font-weight:600; font-size:12px; letter-spacing:.22em; text-transform:uppercase; color:var(--gold)}
.title{font-family:"Saira Condensed",sans-serif; font-weight:800; font-size:64px; line-height:.92; margin:0; text-transform:uppercase; letter-spacing:.01em}
.title span{color:var(--gold)}
.lead{font-size:16px; line-height:1.55; color:#e9e6df; margin:0}
.consent{font-size:11.5px; line-height:1.5; color:var(--muted); max-width:340px; margin:6px 0 0}

/* ---------- AVISO DE SALDO (quota por aparelho) ---------- */
.quota-line{font-size:13.5px; line-height:1.45; color:var(--gold); margin:0; max-width:340px;
  background:rgba(255,200,70,.10); border:1px solid rgba(255,200,70,.30); border-radius:16px; padding:10px 16px}
.quota-line.q-zero{color:#e9e6df; background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.16)}
.quota-line b{color:var(--white); font-weight:700}
.quota-line .q-sub{display:inline-block; margin-top:3px; font-size:11.5px; color:var(--muted)}
.quota-line[hidden]{display:none}
.quota-mini{font-size:12px; color:var(--muted); margin:0; text-align:center}
.quota-mini b{color:var(--gold); font-weight:600}
.quota-mini[hidden]{display:none}

/* ---------- AVISO DE LUZ (só no modo IA "Foto histórica") ---------- */
.light-tip{font-size:12.5px; line-height:1.45; color:var(--gold); margin:0; max-width:340px;
  background:rgba(255,200,70,.10); border:1px solid rgba(255,200,70,.30); border-radius:14px; padding:9px 14px; text-align:center}
.light-tip[hidden]{display:none}

/* ---------- BOTÕES ---------- */
.btn{appearance:none; border:0; border-radius:999px; padding:16px 34px; font-family:Inter; font-weight:600; font-size:17px; cursor:pointer; transition:transform .08s ease, opacity .2s}
.btn:active{transform:scale(.97)}
.btn-primary{background:linear-gradient(180deg,var(--orange),var(--ember)); color:#fff; box-shadow:0 8px 26px rgba(242,72,12,.4)}
.btn-ghost{background:rgba(255,255,255,.08); color:#fff; border:1px solid rgba(255,255,255,.22)}
.btn-back{position:absolute; top:calc(env(safe-area-inset-top,0px) + 12px); left:12px; padding:10px 16px; font-size:15px; z-index:5}

/* ---------- CABINE (escolha + câmera nativa) ---------- */
#booth{align-items:center; justify-content:flex-start; overflow-y:auto; -webkit-overflow-scrolling:touch;
  padding:24px 24px calc(24px + var(--safe-b));
  background:radial-gradient(120% 70% at 50% 0%, rgba(255,69,0,.16), transparent 60%), var(--black)}
/* margin:auto centraliza quando cabe e libera o scroll (até o botão) quando o conteúdo é mais alto que a tela */
.booth-inner{width:100%; max-width:430px; margin:auto; display:flex; flex-direction:column; align-items:center; gap:14px}
.booth-head{font-family:"Saira Condensed",sans-serif; font-weight:800; font-size:26px; text-transform:uppercase; letter-spacing:.02em; margin:0}
.big-preview{width:168px; height:298px; border-radius:18px; background:#161616 center/cover no-repeat; border:2px solid rgba(255,200,70,.55); display:flex; align-items:flex-end; justify-content:center; padding-bottom:12px; box-shadow:0 12px 34px rgba(0,0,0,.55); flex:0 0 auto}
.big-preview.is-selfie{background:linear-gradient(160deg,#242424,#0d0d0d)}
#big-label{font-size:12.5px; font-weight:600; color:var(--gold); background:rgba(0,0,0,.55); padding:4px 12px; border-radius:999px}
.filters{display:flex; gap:10px; justify-content:center; flex-wrap:wrap; max-width:100%}
.filter-chip{position:relative; width:72px; text-align:center; cursor:pointer; opacity:.65; transition:opacity .15s}
.filter-chip.sel{opacity:1}
.filter-chip .thumb{width:72px; height:72px; border-radius:14px; object-fit:cover; border:2px solid transparent}
.filter-chip.sel .thumb{border-color:var(--gold)}
.filter-chip .name{display:block; font-size:11px; margin-top:5px; color:#eee}
.thumb-selfie{display:flex; align-items:center; justify-content:center; background:#1a1a1a; color:var(--gold); font-size:11px; font-weight:600; letter-spacing:.06em; border:2px solid transparent}
.filter-chip.sel .thumb-selfie{border-color:var(--gold)}
.chip-ia{position:absolute; top:4px; right:4px; background:linear-gradient(180deg,var(--orange),var(--ember)); color:#fff; font-size:9px; font-weight:700; padding:2px 6px; border-radius:8px; letter-spacing:.04em}
.shutter-btn{width:100%; max-width:320px; margin-top:4px}
.booth-tip{font-size:12px; color:var(--muted); margin:0}

/* ---------- PROCESSANDO ---------- */
#processing{align-items:center; justify-content:center; gap:22px; background:var(--ink)}
.spinner{width:58px; height:58px; border-radius:50%; border:5px solid rgba(255,200,70,.22); border-top-color:var(--gold); animation:spin 0.9s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.proc-msg{font-size:16px; color:#e9e6df}

/* ---------- RESULTADO ---------- */
#result{background:var(--ink); align-items:center; justify-content:center; padding:16px 16px calc(16px + var(--safe-b))}
.result-stage{flex:1; min-height:0; display:flex; align-items:center; justify-content:center; width:100%; padding-bottom:14px}
#result-img{max-width:100%; max-height:100%; border-radius:14px; box-shadow:0 12px 40px rgba(0,0,0,.6)}
.result-ui{width:100%; max-width:420px; display:flex; flex-direction:column; gap:12px}
.result-ui .btn{width:100%}
.result-row{display:flex; gap:12px}
.result-row .btn{flex:1}
.save-hint{font-size:12px; line-height:1.5; color:var(--muted); text-align:center; margin:0}
.save-hint b{color:var(--gold); font-weight:600}