body {
  background: radial-gradient(circle at 50% 20%, #2a2440, #100c1c 70%);
  min-height: 100%;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
}
.stage { width: 320px; text-align: center; }
.caption { color: #8d84ac; font-size: 12px; letter-spacing: 2px; margin-bottom: 14px; }

.lock-body {
  background: linear-gradient(180deg, #2c2c30, #161618);
  border-radius: 40px;
  padding: 26px 0 0;
  box-shadow: 0 20px 60px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.06);
  position: relative;
}

.cam-row { display: flex; align-items: center; justify-content: center; gap: 14px; }
.ir-dot { width: 7px; height: 7px; border-radius: 50%; background: #0c0c0d; box-shadow: inset 0 0 3px #000; }
.camera {
  width: 56px; height: 56px; border-radius: 50%;
  background: #0a0a0c; overflow: hidden; position: relative;
  border: 3px solid #1c1c20; box-shadow: 0 0 0 2px #2b2b30, inset 0 0 8px #2b6cff55;
}
.camera video { width: 100%; height: 100%; object-fit: cover; transform: scaleX(-1); }
.rec-dot {
  position: absolute; top: 5px; right: 5px; width: 8px; height: 8px; border-radius: 50%;
  background: #ff3b3b; opacity: 0; box-shadow: 0 0 6px #ff3b3b;
}
.rec-dot.on { opacity: 1; animation: blink 1s steps(2) infinite; }
@keyframes blink { 50% { opacity: .2; } }

.divider { height: 1px; margin: 22px 40px; background: linear-gradient(90deg, transparent, #444, transparent); }

.keypad {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 18px 0; padding: 0 44px 26px; color: #d7d7df;
  font-size: 26px; font-weight: 300;
}
.keypad span { user-select: none; }
.bell {
  background: none; color: #d7d7df; font-size: 24px; line-height: 1;
  transition: transform .1s, color .2s;
}
.bell:hover { color: #fff; }
.bell:active { transform: scale(.85); }

.fingerprint {
  margin: 0 auto; width: 100%; padding: 18px 0 26px; display: flex; justify-content: center;
  background: linear-gradient(180deg, #1b1b1e, #0d0d0f);
  border-radius: 0 0 40px 40px;
}
.fingerprint span {
  width: 40px; height: 40px; border-radius: 50%;
  background: radial-gradient(circle, #21407a, #0e1d3c);
  box-shadow: 0 0 12px #2b6cff66, inset 0 0 6px #000;
}

.status-card {
  margin-top: 18px; background: #1b1730; border-radius: 18px; padding: 16px;
  color: #cfc9e6; font-size: 14px;
}
.status-card #status { margin: 10px 0 14px; min-height: 20px; }
.bell-big {
  width: 100%; padding: 13px; border-radius: 12px; font-size: 16px; font-weight: 700;
  color: #fff; background: linear-gradient(180deg, #7a3fc4, var(--purple-d));
  box-shadow: 0 6px 18px rgba(106,47,179,.5);
}
.bell-big:active { transform: translateY(1px); }
.bell-big:disabled { opacity: .5; cursor: default; }

.unlocked-overlay {
  position: fixed; inset: 0; background: rgba(8,30,18,.92);
  display: none; flex-direction: column; align-items: center; justify-content: center;
  color: #6bf0a0; gap: 14px; font-size: 26px; font-weight: 700; letter-spacing: 3px;
}
.unlocked-overlay.show { display: flex; animation: pop .3s ease; }
.unlocked-overlay .lock-icon { font-size: 70px; }
@keyframes pop { from { transform: scale(.6); opacity: 0; } }