:root{
 --bg:#0f172a;--card:#111827;--primary:#38bdf8;
 --text:#e5e7eb;--muted:#9ca3af;
}
body{margin:0;font-family:Arial;background:var(--bg);color:var(--text)}
body.light{--bg:#f4f6f8;--card:#fff;--text:#111827}

.app-header{
 display:flex;justify-content:space-between;
 padding:12px;background:#020617
}

#map{height:38vh}

.card{
 display:none;margin:12px;padding:14px;
 background:var(--card);border-radius:16px
}
.card.active{display:block}

.grid{display:grid;grid-template-columns:1fr 1fr;gap:6px}

button{
 width:100%;padding:12px;border:none;
 border-radius:12px;margin-top:6px
}
.primary{background:var(--primary)}
.danger{background:#ef4444;color:#fff}

.bottom-nav{
 position:fixed;bottom:0;left:0;right:0;
 display:flex;background:#020617
}
.bottom-nav button{
 flex:1;background:none;color:var(--muted)
}
.bottom-nav button.active{color:var(--primary)}

#signal span{
 display:inline-block;width:6px;height:12px;
 background:#444;margin-right:3px
}
#signal.good span{background:#22c55e}
#signal.medium span{background:#facc15}
#signal.weak span{background:#ef4444}

.camera-box{position:relative}
.overlay{
 position:absolute;bottom:10px;left:10px;right:10px;
 background:rgba(0,0,0,0.45);
 padding:8px;font-size:12px;border-radius:10px
}
.overlay div{color:#fff}
video{width:100%;border-radius:12px}