.popup { position: fixed; left: 50%; bottom: 118px; transform: translateX(-50%); zoom: var(--z); display: flex; align-items: center; gap: 16px; min-width: 300px; max-width: 420px; padding: 12px 20px 12px 14px; border-radius: 18px;
    background: linear-gradient(180deg, rgba(22,26,32,.94), rgba(14,17,21,.94)); box-shadow: 0 18px 40px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,255,255,.07); animation: popIn .18s ease-out; }
@keyframes popIn { from { opacity: 0; transform: translate(-50%, 10px); } to { opacity: 1; transform: translate(-50%, 0); } }
.popup .pdev { position: relative; width: 62px; height: 93px; flex: none; filter: drop-shadow(0 8px 10px rgba(0,0,0,.5)); }
.popup .pdev svg { width: 100%; height: 100%; }
.popup .fx { position: absolute; inset: 0; pointer-events: none; }
.popup .pinfo { min-width: 0; }
.popup small { display: block; font: 600 11.5px/1.2 Inter; color: #8b94a3; letter-spacing: .02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.popup b { display: block; margin-top: 5px; font: 800 17px/1 Inter; letter-spacing: .14em; }
.popup p { margin: 7px 0 0; font: 500 12.5px/1.4 Inter; color: #c9d0db; }
.popup.working b { color: #ffc35c; }
.popup.granted b { color: #3ee0b0; }
.popup.denied b { color: #ff6159; }
.popup.denied { animation: popIn .18s ease-out, shake .32s ease-in-out .05s; }
@keyframes shake { 0%,100% { margin-left: 0; } 25% { margin-left: -6px; } 75% { margin-left: 6px; } }

.popup.working.lock-fingerprint .fx::after { content: ''; position: absolute; left: 30%; right: 30%; height: 3px; top: 38%; border-radius: 2px; background: #4dd2ff; box-shadow: 0 0 10px #4dd2ff; animation: scanline .9s ease-in-out infinite alternate; }
@keyframes scanline { from { top: 36%; } to { top: 72%; } }
.popup.working.lock-eye .fx::after { content: ''; position: absolute; left: 50%; top: 41%; width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%; border: 2px solid #9b86ff; animation: iris 1s ease-out infinite; }
@keyframes iris { from { transform: scale(.4); opacity: 1; } to { transform: scale(1.25); opacity: 0; } }
.popup.working.lock-keycard .fx::after { content: ''; position: absolute; width: 40px; height: 26px; top: 30%; left: -30px; border-radius: 4px; background: linear-gradient(135deg, #f0f3f7, #c9d1db); box-shadow: 0 4px 8px rgba(0,0,0,.5); animation: swipe .6s ease-in-out forwards; }
@keyframes swipe { from { left: -34px; opacity: 0; } 30% { opacity: 1; } to { left: 52px; opacity: 0; } }
.popup.working.lock-key .pdev svg { animation: turnkey .45s ease-in-out forwards; }
@keyframes turnkey { from { transform: rotate(0); } to { transform: rotate(-60deg); } }
.popup.working.lock-button .pdev svg { animation: pressbtn .25s ease-in-out; }
@keyframes pressbtn { 50% { transform: scale(.94); } }

.code-screen { position: fixed; inset: 0; display: grid; place-items: center; background: radial-gradient(ellipse at 50% 50%, rgba(0,0,0,.25), rgba(0,0,0,.55)); }
.cs-wrap { zoom: var(--z); display: flex; flex-direction: column; align-items: center; gap: 16px; }
.code-screen.enter .cs-wrap { animation: popIn2 .2s ease-out; }
@keyframes popIn2 { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } }
.cs-name { font: 800 22px/1 Inter; letter-spacing: -.01em; text-shadow: 0 2px 10px rgba(0,0,0,.6); }
.cs-hint { max-width: 380px; min-height: 18px; text-align: center; font: 500 14px/1.4 Inter; color: #d3d9e2; text-shadow: 0 1px 6px rgba(0,0,0,.7); }
.cs-close { font: 600 12px/1 Inter; color: rgba(255,255,255,.55); letter-spacing: .04em; }

.keypad { position: relative; width: 300px; padding: 22px 24px 30px; border-radius: 26px;
    background: linear-gradient(135deg, #e6e9ed 0%, #b4bac2 45%, #747b84 100%); box-shadow: 0 30px 60px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.8), inset 0 -2px 0 rgba(0,0,0,.25), 0 0 0 1px rgba(0,0,0,.35); }
.kp-top { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px; background: #0a120e; box-shadow: inset 0 2px 6px rgba(0,0,0,.9); }
.kp-led { width: 12px; height: 12px; border-radius: 50%; flex: none; background: #ffc35c; box-shadow: 0 0 10px #ffc35c; }
.kp-led.green { background: #45ff9a; box-shadow: 0 0 12px #45ff9a; }
.kp-led.red { background: #ff5a4f; box-shadow: 0 0 12px #ff5a4f; }
.kp-lcd { flex: 1; height: 26px; display: flex; align-items: center; justify-content: flex-end; font: 700 18px/1 'JetBrains Mono', monospace; letter-spacing: .28em; color: #45ff9a; text-shadow: 0 0 8px rgba(69,255,154,.5); white-space: nowrap; overflow: hidden; }
.kp-lcd.msg { letter-spacing: .12em; font-size: 15px; }
.keypad.denied .kp-lcd { color: #ff7a70; text-shadow: 0 0 8px rgba(255,90,79,.5); }
.kp-keys { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 20px; }
.kp-key { height: 58px; border-radius: 12px; font: 800 22px/1 Inter; color: #eef1f5; background: linear-gradient(180deg, #474c55, #1e2126); box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 3px 0 #101215, 0 6px 10px rgba(0,0,0,.35); transition: transform .05s, box-shadow .05s; }
.kp-key:hover { background: linear-gradient(180deg, #535963, #24282e); }
.kp-key:active { transform: translateY(3px); box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 0 0 #101215, 0 2px 4px rgba(0,0,0,.35); }
.kp-screw { position: absolute; left: 50%; bottom: 10px; width: 9px; height: 9px; margin-left: -4.5px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #9aa0a8, #4b5058); }
.keypad.denied { animation: shake .32s ease-in-out; }

.padlock { position: relative; width: 320px; padding-top: 120px; }
.pl-shackle { position: absolute; left: 50%; top: 0; width: 190px; height: 170px; margin-left: -95px; border: 20px solid; border-bottom: 0; border-radius: 95px 95px 0 0; border-color: #c3c8cf #8a9099 #8a9099 #e8ebef; }
.padlock.granted .pl-shackle { animation: shackleUp .35s cubic-bezier(.3, 1.6, .5, 1) forwards; }
@keyframes shackleUp { from { transform: none; } to { transform: translateY(-34px); } }
.pl-body { position: relative; padding: 34px 22px 24px; border-radius: 30px; background: linear-gradient(135deg, #f3dc95 0%, #c79a44 50%, #7f5d23 100%); box-shadow: 0 30px 60px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.6), inset 0 -3px 0 rgba(0,0,0,.25); }
.pl-wheels { display: flex; justify-content: center; gap: 12px; }
.pl-wheel { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 6px 4px; border-radius: 12px; }
.pl-wheel.sel { background: rgba(0,0,0,.14); box-shadow: inset 0 0 0 2px rgba(40,25,5,.45); }
.pl-arrow { width: 44px; height: 24px; border-radius: 7px; font-size: 11px; color: #3a2a10; background: rgba(255,255,255,.28); }
.pl-arrow:hover { background: rgba(255,255,255,.45); }
.pl-digits { display: flex; flex-direction: column; align-items: center; width: 52px; padding: 6px 0; border-radius: 9px; background: linear-gradient(180deg, #0f0c09, #2a231c 50%, #0f0c09); box-shadow: inset 0 2px 6px rgba(0,0,0,.9); }
.pl-digits span { font: 700 15px/1.5 Inter; color: rgba(244,236,216,.3); }
.pl-digits b { font: 800 30px/1.2 Inter; color: #f6eedb; }
.pl-status { min-height: 18px; margin-top: 14px; text-align: center; font: 800 13px/1 Inter; letter-spacing: .14em; color: #4a2a0a; }
.padlock.denied .pl-body { animation: shake .32s ease-in-out; }
.pl-pull { margin-top: 4px; height: 46px; padding: 0 36px; border-radius: 23px; font: 800 15px/1 Inter; letter-spacing: .04em; color: #2a1d06; background: linear-gradient(180deg, #f2d27f, #c09341); box-shadow: 0 8px 18px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.55); }
.pl-pull:hover { filter: brightness(1.06); }