:root{--neon-blue: #00d4ff;--neon-blue-dim: #0099cc;--neon-cyan: #00ffff;--dark-bg: #0a0a0f;--dark-surface: #12121a;--dark-metal: #1a1a24;--gunmetal: #2a2a35;--steel: #3a3a45;--text-primary: #ffffff;--text-secondary: #8888aa;--warning-red: #ff3366;--success-green: #00ff88}*{margin:0;padding:0;box-sizing:border-box}html,body{width:100%;height:100%;overflow:hidden;background:var(--dark-bg);font-family:Orbitron,sans-serif}#app{width:100%;height:100%;position:relative}#vault-canvas{position:fixed;top:0;left:0;width:100%;height:100%;z-index:1}.login-terminal{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);width:380px;max-width:calc(100% - 32px);z-index:100;background:#0a0a14bf;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid rgba(0,212,255,.3);border-radius:12px;box-shadow:0 0 30px #00d4ff26,0 0 60px #00d4ff1a,inset 0 0 30px #00d4ff0d;overflow:hidden;transition:all .3s ease}.login-terminal:hover{box-shadow:0 0 40px #00d4ff33,0 0 80px #00d4ff26,inset 0 0 40px #00d4ff14}.terminal-header{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;background:#0006;border-bottom:1px solid rgba(0,212,255,.2)}.terminal-dots{display:flex;gap:6px}.dot{width:10px;height:10px;border-radius:50%}.dot.red{background:#ff5f56;box-shadow:0 0 8px #ff5f56}.dot.yellow{background:#ffbd2e;box-shadow:0 0 8px #ffbd2e}.dot.green{background:#27ca40;box-shadow:0 0 8px #27ca40}.terminal-title{font-family:Share Tech Mono,monospace;font-size:11px;color:var(--neon-blue);letter-spacing:2px;text-shadow:0 0 10px var(--neon-blue)}.terminal-body{padding:24px;position:relative}.scanline{position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(transparent 0%,rgba(0,212,255,.03) 50%,transparent 100%);background-size:100% 4px;pointer-events:none;animation:scanlines 8s linear infinite;z-index:10}@keyframes scanlines{0%{background-position:0 0}to{background-position:0 100%}}.terminal-body:before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:#00d4ff05;pointer-events:none;animation:flicker .15s infinite;z-index:5}@keyframes flicker{0%,to{opacity:1}50%{opacity:.98}}.terminal-status{display:flex;align-items:center;gap:10px;margin-bottom:24px;padding:10px 14px;background:#0000004d;border-radius:6px;border:1px solid rgba(0,212,255,.15)}.status-indicator{width:8px;height:8px;background:var(--neon-blue);border-radius:50%;animation:pulse 2s ease-in-out infinite;box-shadow:0 0 10px var(--neon-blue)}@keyframes pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(.9)}}.status-text{font-family:Share Tech Mono,monospace;font-size:11px;color:var(--neon-blue);letter-spacing:1px;text-shadow:0 0 5px var(--neon-blue)}#login-form{display:flex;flex-direction:column;gap:20px;position:relative;z-index:20}.input-group{position:relative}.input-group label{display:block;font-family:Share Tech Mono,monospace;font-size:10px;color:var(--text-secondary);letter-spacing:2px;margin-bottom:8px}.input-group input{width:100%;padding:14px 16px;background:#00000080;border:1px solid rgba(0,212,255,.25);border-radius:6px;color:var(--text-primary);font-family:Share Tech Mono,monospace;font-size:14px;letter-spacing:1px;outline:none;transition:all .3s ease}.input-group input::placeholder{color:var(--text-secondary);opacity:.5}.input-group input:focus{border-color:var(--neon-blue);box-shadow:0 0 15px #00d4ff4d,inset 0 0 10px #00d4ff1a}.input-glow{position:absolute;bottom:0;left:50%;transform:translate(-50%);width:0;height:2px;background:linear-gradient(90deg,transparent,var(--neon-blue),transparent);transition:width .3s ease}.input-group input:focus~.input-glow{width:100%}.access-btn{position:relative;width:100%;padding:16px;margin-top:10px;background:linear-gradient(135deg,#00d4ff26,#00d4ff0d);border:1px solid var(--neon-blue);border-radius:6px;cursor:pointer;overflow:hidden;transition:all .3s ease}.access-btn:hover{background:linear-gradient(135deg,#00d4ff40,#00d4ff1a);box-shadow:0 0 20px #00d4ff66,0 0 40px #00d4ff33;transform:translateY(-2px)}.access-btn:active{transform:translateY(0)}.btn-text{font-family:Orbitron,sans-serif;font-size:13px;font-weight:700;color:var(--neon-blue);letter-spacing:3px;text-shadow:0 0 10px var(--neon-blue);position:relative;z-index:2}.btn-glow{position:absolute;top:50%;left:50%;width:0;height:0;background:radial-gradient(circle,rgba(0,212,255,.4),transparent);border-radius:50%;transform:translate(-50%,-50%);transition:all .5s ease;z-index:1}.access-btn:hover .btn-glow{width:300px;height:300px}.terminal-footer{display:flex;justify-content:space-between;align-items:center;margin-top:24px;padding-top:16px;border-top:1px solid rgba(0,212,255,.1)}.warning-text{font-family:Share Tech Mono,monospace;font-size:9px;color:var(--warning-red);letter-spacing:1px;animation:warning-blink 3s ease-in-out infinite}@keyframes warning-blink{0%,to{opacity:1}50%{opacity:.5}}.encryption-badge{font-family:Share Tech Mono,monospace;font-size:8px;color:var(--success-green);letter-spacing:1px;padding:4px 8px;background:#00ff881a;border:1px solid rgba(0,255,136,.3);border-radius:4px}.access-granted{position:fixed;top:0;left:0;width:100%;height:100%;background:#000000e6;display:none;align-items:center;justify-content:center;z-index:1000;opacity:0;pointer-events:none;transition:opacity .5s ease}.access-granted.active{display:flex;opacity:1;pointer-events:all}.granted-content{text-align:center;transform:scale(.8);opacity:0;transition:all .5s ease .3s}.access-granted.active .granted-content{transform:scale(1);opacity:1}.granted-icon{font-size:80px;color:var(--success-green);text-shadow:0 0 30px var(--success-green),0 0 60px var(--success-green);margin-bottom:20px;animation:granted-pulse 1.5s ease-in-out infinite}@keyframes granted-pulse{0%,to{text-shadow:0 0 30px var(--success-green),0 0 60px var(--success-green)}50%{text-shadow:0 0 50px var(--success-green),0 0 100px var(--success-green),0 0 150px var(--success-green)}}.granted-text{font-family:Orbitron,sans-serif;font-size:36px;font-weight:900;color:var(--success-green);letter-spacing:8px;text-shadow:0 0 20px var(--success-green);margin-bottom:10px}.granted-subtext{font-family:Share Tech Mono,monospace;font-size:14px;color:var(--text-secondary);letter-spacing:3px}.login-terminal.processing .status-indicator{background:#ffbd2e;box-shadow:0 0 10px #ffbd2e;animation:processing-pulse .5s ease-in-out infinite}.login-terminal.processing .status-text{color:#ffbd2e;text-shadow:0 0 5px #ffbd2e}@keyframes processing-pulse{0%,to{opacity:1}50%{opacity:.3}}.login-terminal.hidden{opacity:0;transform:translate(-50%,-50%) scale(.95);pointer-events:none}@media(max-width:768px){.login-terminal{width:340px}.terminal-body{padding:20px}.terminal-title{font-size:10px;letter-spacing:1px}.input-group input{padding:12px 14px;font-size:13px}.access-btn{padding:14px}.btn-text{font-size:12px;letter-spacing:2px}.granted-text{font-size:28px;letter-spacing:5px}.granted-icon{font-size:60px}}@media(max-width:480px){.login-terminal{width:100%;max-width:calc(100% - 24px);border-radius:10px}.terminal-header{padding:10px 14px}.terminal-dots .dot{width:8px;height:8px}.terminal-title{font-size:9px}.terminal-body{padding:16px}.terminal-status{padding:8px 12px;margin-bottom:20px}.status-text{font-size:10px}#login-form{gap:16px}.input-group label{font-size:9px;margin-bottom:6px}.input-group input{padding:12px;font-size:14px}.access-btn{padding:14px;margin-top:8px}.btn-text{font-size:11px;letter-spacing:2px}.terminal-footer{margin-top:20px;padding-top:14px;flex-direction:column;gap:10px}.warning-text{font-size:8px}.encryption-badge{font-size:7px}.granted-text{font-size:22px;letter-spacing:4px}.granted-subtext{font-size:12px;letter-spacing:2px}.granted-icon{font-size:50px;margin-bottom:15px}}@media(max-width:360px){.login-terminal{max-width:calc(100% - 16px)}.terminal-body{padding:14px}.btn-text{font-size:10px;letter-spacing:1px}.granted-text{font-size:18px;letter-spacing:3px}}@media(max-height:500px)and (orientation:landscape){.login-terminal{max-height:calc(100vh - 24px);overflow-y:auto}.terminal-body{padding:12px 16px}.terminal-status{margin-bottom:12px;padding:8px 10px}#login-form{gap:12px}.input-group input{padding:10px 12px}.access-btn{padding:12px;margin-top:4px}.terminal-footer{margin-top:12px;padding-top:12px}}
