:root,[data-theme=dark]{--bg: #090a0f;--card-bg: rgba(18, 20, 30, .85);--text: #f8fafc;--text-muted: #94a3b8;--primary: #a855f7;--primary-hover: #c084fc;--primary-glow: rgba(168, 85, 247, .35);--border: rgba(255, 255, 255, .1);--input-bg: rgba(255, 255, 255, .05);--key-bg: rgba(255, 255, 255, .06);--key-bg-hover: rgba(255, 255, 255, .14);--key-bg-active: rgba(168, 85, 247, .3);--key-border: rgba(255, 255, 255, .08);--dot-empty: rgba(255, 255, 255, .2);--dot-filled: #c084fc;--dot-shadow: 0 0 16px rgba(192, 132, 252, .8);--error: #ef4444;--error-glow: rgba(239, 68, 68, .4)}[data-theme=light]{--bg: #faf9f5;--card-bg: rgba(240, 241, 245, .92);--text: #0f172a;--text-muted: #64748b;--primary: #9333ea;--primary-hover: #7e22ce;--primary-glow: rgba(147, 51, 234, .25);--border: rgba(0, 0, 0, .08);--input-bg: rgba(0, 0, 0, .03);--key-bg: rgba(0, 0, 0, .04);--key-bg-hover: rgba(0, 0, 0, .09);--key-bg-active: rgba(147, 51, 234, .2);--key-border: rgba(0, 0, 0, .06);--dot-empty: rgba(0, 0, 0, .2);--dot-filled: #9333ea;--dot-shadow: 0 0 12px rgba(147, 51, 234, .6);--error: #dc2626;--error-glow: rgba(220, 38, 38, .3)}*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}body{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;background:var(--bg);background-image:radial-gradient(circle at 50% 20%,rgba(168,85,247,.18),transparent 45%),radial-gradient(circle at 80% 80%,rgba(56,189,248,.12),transparent 40%),radial-gradient(rgba(255,255,255,.05) 1px,transparent 1px);background-size:100% 100%,100% 100%,24px 24px;color:var(--text);min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px;overflow:hidden;user-select:none;-webkit-user-select:none}.theme-toggle-btn{position:fixed;top:24px;right:24px;width:44px;height:44px;border-radius:50%;background:var(--card-bg);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid var(--border);color:var(--text);display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:100;box-shadow:0 8px 24px #0000001f;transition:all .2s ease}.theme-toggle-btn:hover{transform:scale(1.08);border-color:var(--primary)}.lock-card{background:var(--card-bg);backdrop-filter:blur(36px) saturate(190%);-webkit-backdrop-filter:blur(36px) saturate(190%);border:1px solid var(--border);border-radius:32px;padding:36px 30px 30px;width:100%;max-width:390px;display:flex;flex-direction:column;align-items:center;box-shadow:0 30px 80px #00000059,0 0 0 1px #ffffff0d;position:relative;animation:cardAppear .5s cubic-bezier(.16,1,.3,1);transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease}@keyframes cardAppear{0%{opacity:0;transform:scale(.92) translateY(20px)}to{opacity:1;transform:scale(1) translateY(0)}}.lock-card.shake{animation:shakeAnim .45s cubic-bezier(.36,.07,.19,.97) both;border-color:var(--error)!important;box-shadow:0 0 40px var(--error-glow)!important}@keyframes shakeAnim{10%,90%{transform:translate3d(-3px,0,0)}20%,80%{transform:translate3d(5px,0,0)}30%,50%,70%{transform:translate3d(-7px,0,0)}40%,60%{transform:translate3d(7px,0,0)}}.lock-card.unlocked{animation:unlockAnim .5s ease forwards;border-color:#22c55e!important;box-shadow:0 0 50px #22c55e66!important}@keyframes unlockAnim{0%{transform:scale(1)}50%{transform:scale(1.04)}to{transform:scale(.96);opacity:0}}.lock-icon-badge{width:68px;height:68px;border-radius:20px;background:linear-gradient(135deg,#7c3aed,#a855f7,#c084fc);display:flex;align-items:center;justify-content:center;color:#fff;margin-bottom:16px;box-shadow:0 12px 30px var(--primary-glow);position:relative;transition:all .3s ease}.lock-card.shake .lock-icon-badge{background:linear-gradient(135deg,#dc2626,#ef4444);box-shadow:0 12px 30px var(--error-glow)}.lock-card.unlocked .lock-icon-badge{background:linear-gradient(135deg,#16a34a,#22c55e);box-shadow:0 12px 30px #22c55e66}.lock-title{font-family:Space Grotesk,Inter,-apple-system,sans-serif;font-size:1.45rem;font-weight:700;letter-spacing:-.5px;margin-bottom:4px;text-align:center;color:var(--text)}.lock-subtitle{font-size:.84rem;color:var(--text-muted);margin-bottom:18px;text-align:center;line-height:1.4}.pin-input-container{width:100%;max-width:280px;position:relative;margin-bottom:20px;display:flex;align-items:center}.pin-field{width:100%;background:var(--input-bg);border:1.5px solid var(--border);border-radius:16px;padding:12px 42px 12px 18px;font-size:1.25rem;letter-spacing:4px;text-align:center;color:var(--text);outline:none;font-weight:600;font-family:inherit;transition:border-color .2s,box-shadow .2s}.pin-field:focus{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-glow)}.pin-eye-btn{position:absolute;right:12px;background:transparent;border:none;color:var(--text-muted);cursor:pointer;display:flex;align-items:center;justify-content:center;padding:4px;transition:color .15s}.pin-eye-btn:hover{color:var(--text)}.pin-dots-container{display:flex;gap:14px;align-items:center;justify-content:center;margin-bottom:20px;height:20px}.pin-dot{width:13px;height:13px;border-radius:50%;border:2px solid var(--dot-empty);background:transparent;transition:all .2s cubic-bezier(.16,1,.3,1)}.pin-dot.filled{background:var(--dot-filled);border-color:var(--dot-filled);box-shadow:var(--dot-shadow);transform:scale(1.18)}.lock-card.shake .pin-dot.filled{background:var(--error);border-color:var(--error);box-shadow:0 0 16px var(--error-glow)}.lock-card.unlocked .pin-dot.filled{background:#22c55e;border-color:#22c55e;box-shadow:0 0 16px #22c55ecc}.numpad-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;width:100%;max-width:280px;margin-bottom:16px}.num-btn{aspect-ratio:1;border-radius:50%;background:var(--key-bg);border:1px solid var(--key-border);color:var(--text);display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;transition:all .12s ease;font-size:1.4rem;font-weight:500;position:relative}.num-btn:hover{background:var(--key-bg-hover);border-color:var(--border)}.num-btn:active{transform:scale(.92);background:var(--key-bg-active);border-color:var(--primary)}.num-sub{font-size:.55rem;font-weight:700;letter-spacing:1.2px;color:var(--text-muted);margin-top:1px;text-transform:uppercase}.num-action-btn{font-size:.82rem;font-weight:600;border-color:transparent;background:transparent}.num-action-btn:hover{background:var(--key-bg)}.submit-btn{width:100%;max-width:280px;background:var(--primary);color:#fff;border:none;border-radius:16px;padding:13px 20px;font-size:.95rem;font-weight:700;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px;box-shadow:0 4px 18px var(--primary-glow);transition:all .2s ease;margin-bottom:12px}.submit-btn:hover{background:var(--primary-hover);transform:translateY(-1px);box-shadow:0 6px 24px var(--primary-glow)}.submit-btn:active{transform:scale(.98)}.pin-status-msg{font-size:.82rem;font-weight:600;min-height:18px;text-align:center;color:var(--error);opacity:0;transition:opacity .2s ease;margin-bottom:10px}.pin-status-msg.visible{opacity:1}.role-hints{display:flex;align-items:center;justify-content:center;gap:12px;padding-top:14px;border-top:1px solid var(--border);width:100%;font-size:.72rem;color:var(--text-muted)}.role-badge{display:inline-flex;align-items:center;gap:4px;padding:4px 9px;border-radius:10px;background:var(--key-bg);border:1px solid var(--key-border);font-weight:600}