* { box-sizing: border-box; }
body { font-family: system-ui, sans-serif; background:#111; color:#eee; margin:0; padding:12px; }
.card { max-width:380px; margin:40px auto; background:#1e1e1e; padding:24px; border-radius:12px; }
input, button { width:100%; padding:12px; margin:6px 0; border-radius:8px; border:1px solid #333; background:#2a2a2a; color:#fff; }
button { background:#c62828; font-weight:bold; cursor:pointer; border:none; }
header { display:flex; align-items:center; gap:10px; padding:10px; background:#1e1e1e; border-radius:10px; margin-bottom:16px; }
.avatar { width:40px; height:40px; border-radius:50%; object-fit:cover; }
.logout { margin-left:auto; color:#f66; text-decoration:none; }
.status { padding:8px; background:#222; border-radius:8px; margin-bottom:12px; font-size:13px; text-align:center; }
.panic-wrap { text-align:center; margin:20px 0; }
.panic-btn {
  width:220px; height:220px; cursor:pointer; border-radius:50%;
  transition: transform .15s;
  filter: drop-shadow(0 0 20px rgba(255,0,0,.5));
  animation: pulse 1.8s infinite;
}
.panic-btn:active { transform:scale(.93); }
@keyframes pulse { 0%,100%{transform:scale(1);} 50%{transform:scale(1.05);} }
.hint { color:#888; font-size:13px; }
.alerta-box { background:#3a0000; border:2px solid #f00; padding:16px; border-radius:12px; margin:16px 0; }
.chat-box { max-height:250px; overflow-y:auto; background:#1a1a1a; padding:10px; border-radius:8px; margin:10px 0; min-height:80px; }
.chat-msg { margin:6px 0; font-size:14px; }
.chat-msg b { color:#ffb3b3; }
.chat-input { display:flex; gap:6px; }
.chat-input input { flex:1; margin:0; }
.chat-input button { width:auto; padding:0 16px; }
.cancel { background:#444; }
.err { color:#f66; }