/* SUBSTITUA TODO O SEU style.css POR ESTE (ou só cole as partes novas) */

* { margin:0; padding:0; box-sizing:border-box; }
body { background:#000; font-family:Arial, sans-serif; overflow:hidden; height:100vh; }

#cameraContainer { position:fixed; top:0; left:0; width:100vw; height:100vh; }
#camera { width:100%; height:100%; object-fit:cover; }
.moldura-overlay { position:absolute; top:0; left:0; width:100%; height:100%; object-fit:contain; pointer-events:none; z-index:5; }
#flashOverlay { position:absolute; inset:0; background:white; opacity:0; z-index:40; pointer-events:none; }
#timerOverlay { position:absolute; inset:0; background:rgba(0,0,0,0.7); display:flex; align-items:center; justify-content:center; z-index:50; }
.timer-circle { width:200px; height:200px; position:relative; }
.timer-circle svg { width:100%; height:100%; transform:rotate(-90deg); }
.timer-track { fill:none; stroke:rgba(255,255,255,0.2); stroke-width:10; }
.timer-progress { fill:none; stroke:#00ffaa; stroke-width:12; stroke-linecap:round; stroke-dasharray:283; stroke-dashoffset:283; }
#timerCount { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); font-size:5rem; color:#00ffaa; font-weight:bold; }

/* BOTÃO GALERIA */
.btn-galeria {
    position:fixed; top:20px; right:20px; background:rgba(0,234,255,0.3); backdrop-filter:blur(10px);
    color:white; padding:15px 25px; border-radius:50px; text-decoration:none; font-weight:bold;
    z-index:100; border:2px solid #00eaff; transition:0.3s;
}
.btn-galeria:hover { background:#00eaff; color:black; }

/* PAINEL INFERIOR */
#painelNav {
    position:fixed; bottom:0; left:0; width:100%; background:rgba(10,10,30,0.95);
    backdrop-filter:blur(20px); padding:15px; display:flex; justify-content:space-around;
    z-index:20; transition:0.5s;
}

/* TELA PÓS-FOTO - Z-INDEX MAIOR QUE TUDO */
#posFoto {
    position:fixed; inset:0; background:rgba(0,0,0,0.95); display:flex; flex-direction:column;
    align-items:center; justify-content:center; z-index:999 !important; /* FORÇA FICAR POR CIMA */
}
#canvasFoto { max-width:90%; max-height:65%; border-radius:20px; box-shadow:0 0 60px rgba(0,255,170,0.6); }
.acoes-pos { margin-top:30px; display:flex; gap:25px; flex-wrap:wrap; justify-content:center; }
.acoes-pos button {
    background:#00ff88; color:black; padding:18px 40px; border:none; border-radius:50px;
    font-size:1.4rem; font-weight:bold; cursor:pointer; min-width:220px;
}
#qrContainer {
    margin-top:40px; background:rgba(255,255,255,0.15); padding:30px; border-radius:25px;
    backdrop-filter:blur(10px);
}
#qrContainer h3 { color:#00ffaa; margin-bottom:15px; font-size:1.8rem; }

.hidden { display:none !important; }


#qrContainer {
    margin-top:40px;
    background:#000;           /* FUNDO PRETO FORÇADO */
    padding:30px;
    border-radius:25px;
    border: 3px solid #00ffaa;
    box-shadow: 0 0 40px rgba(0,255,170,0.6);
}
#qrCodeGen img {
    background: white !important;   /* QR em branco com fundo branco dentro */
    padding: 10px;
    border-radius: 15px;
}

/* Mobile */
@media (max-width:768px) {
    #timerCount { font-size:3.5rem; }
    .timer-circle { width:150px; height:150px; }
    .acoes-pos button { padding:16px 30px; font-size:1.2rem; min-width:180px; }
}