:root { --primary: #00d4ff; }
body, html { 
    margin:0; padding:0; 
    height: 100vh;
    height: -webkit-fill-available; /* Fix untuk iOS Safari */
    background:#000; color:#fff; font-family:'Poppins', sans-serif; overflow:hidden; 
}

.screen { 
    display:none; 
    flex-direction:column; 
    height: 100vh; 
    height: -webkit-fill-available; 
}
.active { display:flex; }

#selectionScreen { justify-content:center; align-items:center; background:#0f172a; }
.card { background:#1e293b; padding:25px; border-radius:15px; width:85%; max-width:400px; text-align:center; border:1px solid #334155; }
.icon-header { font-size:50px; margin-bottom:10px; }
.options button { display:block; width:100%; margin:10px 0; padding:15px; background:var(--primary); border:none; border-radius:10px; font-weight:bold; color:#000; font-size:14px; }

.top-bar { padding:10px 15px; display:flex; justify-content:space-between; align-items:center; background:#000; font-size:11px; z-index:10; }
.top-bar button { background:#333; color:#fff; border:none; padding:5px 10px; border-radius:5px; }

.view-container { position:relative; flex:1; background:#000; overflow:hidden; display:flex; align-items:center; }
#video { width:100%; height:100%; object-fit:cover; }

.bottom-area { background:#000; position:relative; z-index:20; }
.info-panel { background:#fff; color:#000; padding:10px 15px; font-size:11px; }
#latLong { font-weight:bold; color:red; font-family:monospace; font-size:13px; margin-bottom:2px; }

.controls-wrapper { 
    padding: 15px 0 35px 0; /* Padding ekstra agar tidak tertutup bar navigasi */
    background:#000; 
}

.mode-switch { display:flex; justify-content:center; gap:45px; margin-bottom:20px; font-weight:bold; color:#555; font-size:14px; }
.mode-switch span.active { color:var(--primary); border-bottom:2px solid var(--primary); padding-bottom:4px; }

.shutter-row { display:flex; justify-content:center; align-items:center; gap:50px; }
.shutter-border { width:70px; height:70px; border:4px solid #fff; border-radius:50%; display:flex; justify-content:center; align-items:center; }
#shutterBtn { width:55px; height:55px; border-radius:50%; border:none; background:#fff; transition:0.2s; cursor:pointer; }

.recording #shutterBtn { background:red; border-radius:10px; width:30px; height:30px; }
.badge { position:absolute; top:15px; left:15px; color:red; font-weight:bold; display:none; animation:blink 1s infinite; text-shadow:1px 1px 2px #000; z-index:10; }
@keyframes blink { 50% { opacity: 0; } }

.toast { position:absolute; top:40%; left:50%; transform:translate(-50%,-50%); background:var(--primary); color:#000; padding:12px 25px; border-radius:30px; font-weight:bold; display:none; z-index:100; box-shadow:0 5px 15px rgba(0,0,0,0.5); }
.side-btn { background:none; border:none; color:#fff; font-size:24px; width:50px; cursor:pointer; }