:root {
  --primary:#ff4d4d; --bg:#f4f4f4; --card:#fff; --text:#333;
}
body {
  font-family:sans-serif; background:var(--bg); margin:0; padding:20px;
  display:flex; justify-content:center; align-items:center; min-height:100vh;
}
#banner {
  position:fixed; top:10px; left:50%; transform:translateX(-50%);
  background:#222; color:#fff; padding:10px 14px; border-radius:8px;
}
.page{display:none} .page.active{display:block} .hidden{display:none!important}
#app-container,#setup-page {
  width:100%; max-width:420px; background:var(--card); padding:20px;
  border-radius:12px; box-shadow:0 6px 20px rgba(0,0,0,.1);
}
input,select,button,textarea {
  width:100%; padding:10px; margin:6px 0 10px; border-radius:8px; border:1px solid #ddd;
}
button { background:#007bff; color:#fff; border:none; cursor:pointer }
nav{display:flex; justify-content:space-around; margin-bottom:20px}
#sos-btn {
  background:var(--primary); font-size:24px; font-weight:700; padding:22px;
  border-radius:50%; width:130px; height:130px; margin:16px auto; display:block;
  border:6px solid #fff; box-shadow:0 0 18px var(--primary);
}
.status-grid {
  display:grid; grid-template-columns:1fr 1fr; gap:12px; text-align:center;
}
.status-card { background:#f9f9f9; padding:14px; border-radius:10px }
#emergency-status.on { color:var(--primary) }
#map { height:220px; background:#e9e9e9; margin-top:10px; border-radius:6px }
.settings-section { margin-top:20px; border-top:1px solid #eee; padding-top:16px }