:root {
  --bg: #050712;
  --card: #0e1424;
  --accent: #39c0fa;
  --danger: #ff3b6b;
  --text: #e8f1ff;
  --muted: #FFFFFF;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: radial-gradient(circle at top, #0b1730 0, #050712 55%);
  color: var(--text);
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.shell { width: 100%; max-width: 420px; }
.card {
  background: linear-gradient(145deg, rgba(9,14,30,0.9), rgba(8,11,23,0.96));
  border-radius: 24px;
  padding: 20px 18px 18px;
  border: 1px solid rgba(95,142,255,0.25);
  box-shadow: 0 18px 50px rgba(0,0,0,0.7);
  backdrop-filter: blur(10px);
}
.brand { display:flex; align-items:center; gap:12px; margin-bottom:16px; }
.logo {
  width:40px; height:40px; border-radius:14px;
  background: radial-gradient(circle at 25% 15%, #8af5ff, #39c0fa 45%, #0061ff);
  display:flex; align-items:center; justify-content:center;
  color:#04111e; font-weight:800; font-size:20px;
  box-shadow:0 0 18px rgba(57,192,250,0.6);
}
.brand-text { display:flex; flex-direction:column; gap:2px; }
.brand-title { font-weight:700; letter-spacing:0.04em; font-size:16px; }
.brand-sub { font-size:11px; color:var(--muted); }
h1 { font-size:18px; margin:0 0 4px; }
.muted { font-size:13px; color:var(--muted); }
form { margin-top:14px; display:flex; flex-direction:column; gap:10px; }
label span { display:block; font-size:12px; margin-bottom:4px; color:var(--muted); }
input {
  width:100%; padding:10px 11px; border-radius:11px;
  border:1px solid #202a48; background:rgba(5,9,20,0.95);
  color:var(--text); font-size:14px; outline:none;
}
input:focus {
  border-color:var(--accent);
  box-shadow:0 0 0 1px rgba(57,192,250,0.4);
}
button {
  border-radius:999px; border:none; padding:11px 14px;
  font-size:14px; font-weight:600; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
}
.btn-primary {
  background:#ff0000;
  color:#ffffff; width:100%; margin-top:4px;
}
.btn-secondary {
  background:rgba(15,20,40,0.95); color:var(--muted);
  width:100%; margin-top:8px; border:2px solid #252f4a;
}
.btn-danger {
  background: #ff0000;
  color:#ffeef5;
}
.footer { margin-top:10px; text-align:center; font-size:11px; color:var(--muted); }
.switch-link { margin-top:8px; text-align:center; font-size:13px; color:var(--muted); }
.switch-link a { color:#ff0000; text-decoration:none; font-weight:500; }
.pill {
  display:inline-flex; align-items:center; gap:6px;
  padding:4px 9px; border-radius:999px;
  background:#FFFFF;
  border:1px solid rgba(90,130,255,0.35);
  font-size:11px; margin-bottom:8px; color:var(--muted);
}
.pill-dot {
  width:8px; height:8px; border-radius:999px;
  background:#1B9628; box-shadow:0 0 8px rgba(57,192,250,0.9);
}
.status-bar {
  margin-top:14px; padding:10px 11px; border-radius:14px;
  background:radial-gradient(circle at left, rgba(57,192,250,0.16), rgba(3,10,25,0.95));
  border:1px solid rgba(57,192,250,0.3);
  font-size:12px; color:var(--muted);
}
.status-label {
  font-size:11px; text-transform:uppercase;
  letter-spacing:0.08em; color:var(--muted); margin-bottom:4px;
}
.status-main { font-size:13px; color:var(--text); }
.meta-grid {
  margin-top:8px; display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:6px 12px; font-size:11px; color:var(--muted);
}
.meta-grid strong { color:var(--text); font-weight:500; }

.panic-box {
  margin-top:16px; padding:12px 11px 10px; border-radius:18px;
  background:radial-gradient(circle at top, rgba(255,59,107,0.25), rgba(23,7,14,0.94));
  border:1px solid rgba(255,59,107,0.7);
  display:flex; flex-direction:column; gap:8px;
}
.panic-title { font-size:13px; font-weight:600; }
.panic-desc { font-size:11px; color:#ffc5d6; }
.panic-button { width:100%; margin-top:4px; font-size:15px; padding:12px 14px; }
.panic-button.active {
  box-shadow:0 0 32px rgba(255,59,107,0.7);
  transform:translateY(-1px);
}
.top-actions { display:flex; gap:8px; margin-top:12px; }
.error { margin-top:8px; font-size:12px; color:#ff9bb3; }

.noise-indicator {
  margin-top:10px; padding:8px 10px; border-radius:14px;
  background:rgba(5,12,28,0.9);
  border:1px solid rgba(57,192,250,0.2);
  display:flex; align-items:center; gap:10px;
  font-size:12px; color:var(--muted);
}
.noise-icon { position:relative; width:22px; height:22px; }
.noise-dot {
  position:absolute; inset:5px; border-radius:999px;
  background:#3fcf8e; box-shadow:0 0 6px rgba(63,207,142,0.8);
}
.noise-wave {
  position:absolute; border-radius:999px;
  border:2px solid rgba(63,207,142,0.4);
  inset:1px; opacity:0; transform:scale(0.6);
}
.noise-wave-1 { animation: noise-pulse 1.6s infinite; }
.noise-wave-2 { animation: noise-pulse 1.6s infinite 0.4s; }
.noise-indicator .noise-text strong { color:var(--text); }
.noise-indicator.active {
  border-color:rgba(255,59,107,0.7);
  background:radial-gradient(circle at left, rgba(255,59,107,0.18), rgba(18,5,16,0.95));
}
.noise-indicator.active .noise-dot {
  background:#ff3b6b;
  box-shadow:0 0 10px rgba(255,59,107,0.9);
}
.noise-indicator.active .noise-wave {
  border-color:rgba(255,59,107,0.7);
}
@keyframes noise-pulse {
  0% { opacity:0; transform:scale(0.5); }
  20% { opacity:1; transform:scale(0.8); }
  100% { opacity:0; transform:scale(1.3); }
}