@import "https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap";:root{--bg-color:#0b0f19;--glass-bg:#141928a6;--glass-border:#ffffff14;--glass-shadow:0 8px 32px 0 #0000005e;--accent-blue:#3b82f6;--accent-glow:#3b82f680;--success:#10b981;--success-glow:#10b98166;--danger:#ef4444;--danger-glow:#ef444466;--text-main:#f8fafc;--text-muted:#94a3b8}*{box-sizing:border-box;margin:0;padding:0}body{background-color:var(--bg-color);color:var(--text-main);justify-content:center;align-items:center;min-height:100vh;font-family:Inter,sans-serif;display:flex;overflow-x:hidden}.app-container{justify-content:center;align-items:center;width:100%;min-height:100vh;padding:.5rem;display:flex;position:relative;overflow:hidden}.snow-container{pointer-events:none;z-index:1;position:absolute;inset:0;overflow:hidden}.snowflake{filter:blur(1px);background:#fff;border-radius:50%;animation:linear infinite fall;position:absolute;top:-10px}@keyframes fall{0%{opacity:0;transform:translateY(-10vh)translate(0)}10%{opacity:.8}90%{opacity:.8}to{opacity:0;transform:translateY(110vh)translate(20px)}}.bg-orb{filter:blur(80px);z-index:-1;opacity:.5;border-radius:50%;animation:10s ease-in-out infinite alternate float;position:absolute}.orb-1{background:radial-gradient(circle, var(--accent-blue), transparent 70%);width:400px;height:400px;top:-100px;left:-100px}.orb-2{background:radial-gradient(circle,#8b5cf6,#0000 70%);width:350px;height:350px;animation-delay:-5s;bottom:-50px;right:-50px}@keyframes float{0%{transform:translate(0)scale(1)}to{transform:translate(30px,50px)scale(1.1)}}.dashboard-glass{background:var(--glass-bg);-webkit-backdrop-filter:blur(12px);border:1px solid var(--glass-border);box-shadow:var(--glass-shadow);z-index:10;border-radius:20px;flex-direction:column;width:100%;max-width:1000px;padding:1rem;animation:8s ease-in-out infinite float-dashboard,.6s cubic-bezier(.16,1,.3,1) both slideUpFade;display:flex;position:relative;overflow:visible}@keyframes float-dashboard{0%,to{transform:translateY(0)}50%{transform:translateY(-8px)}}@keyframes slideUpFade{0%{opacity:0;transform:translateY(40px)}to{opacity:1;transform:translateY(0)}}@media (width>=768px){.dashboard-glass{border-radius:24px;padding:2.5rem}}.dashboard-header{border-bottom:1px solid var(--glass-border);justify-content:space-between;align-items:center;margin-bottom:1rem;padding-bottom:.75rem;display:flex}@media (width>=768px){.dashboard-header{margin-bottom:2rem;padding-bottom:1.5rem}}.brand{align-items:center;gap:.75rem;display:flex}.brand-icon{color:var(--accent-blue)}.brand h1{letter-spacing:-.02em;font-size:1.25rem;font-weight:700}.status-badge{letter-spacing:.05em;border:1px solid var(--glass-border);background:#0006;border-radius:50px;align-items:center;gap:.5rem;padding:.4rem .8rem;font-size:.75rem;font-weight:600;display:flex}.status-badge.online{color:var(--success);box-shadow:0 0 10px var(--success-glow)}.status-badge.offline{color:var(--danger);box-shadow:0 0 10px var(--danger-glow)}.pulse-dot{border-radius:50%;width:8px;height:8px}.status-badge.online .pulse-dot{background-color:var(--success);animation:2s infinite pulse-success}.status-badge.offline .pulse-dot{background-color:var(--danger);animation:2s infinite pulse-danger}@keyframes pulse-success{0%{filter:drop-shadow(0 0 2px var(--success));transform:scale(1)}50%{filter:drop-shadow(0 0 10px var(--success));transform:scale(1.1)}to{filter:drop-shadow(0 0 2px var(--success));transform:scale(1)}}@keyframes pulse-danger{0%{box-shadow:0 0 0 0 var(--danger-glow)}70%{box-shadow:0 0 0 6px #0000}to{box-shadow:0 0 #0000}}.gates-grid{grid-template-columns:1fr;gap:.75rem;display:grid}@media (width>=800px){.gates-grid{grid-template-columns:repeat(2,1fr);gap:2.5rem}}.gate-card{border:1px solid var(--glass-border);background:#0003;border-radius:12px;flex-direction:row;justify-content:space-between;align-items:center;padding:.75rem 1rem;transition:transform .3s,box-shadow .3s;animation:.6s cubic-bezier(.16,1,.3,1) both slideUpFade;display:flex}.gate-card:hover{transform:translateY(-5px);box-shadow:0 10px 25px #00000080,inset 0 0 15px #ffffff0d}.gate-card:first-child{animation-delay:.1s}.gate-card:nth-child(2){animation-delay:.2s}.gate-card:nth-child(3){animation-delay:.3s}@media (width>=800px){.gate-card{border-radius:16px;flex-direction:column;padding:1.5rem}}.info-panel{flex-direction:column;gap:.5rem;width:auto;margin-bottom:0;display:flex}@media (width>=800px){.info-panel{width:100%;margin-bottom:2rem}}.panel-title{text-transform:uppercase;letter-spacing:.1em;color:var(--text-muted);margin-bottom:0;font-size:.75rem}@media (width>=800px){.panel-title{margin-bottom:1rem;font-size:.85rem}}.connection-status{background:0 0;border:none;align-items:center;gap:.75rem;padding:0;display:flex}@media (width>=800px){.connection-status{border:1px solid var(--glass-border);background:#ffffff08;border-radius:12px;gap:1.25rem;padding:1.25rem}}.status-icon-wrapper{background:#0000004d;border-radius:50%;justify-content:center;align-items:center;width:36px;height:36px;display:flex}@media (width>=800px){.status-icon-wrapper{width:60px;height:60px}}.status-icon.active{color:var(--success);animation:2s infinite pulse-success}.status-icon.inactive{color:var(--text-muted)}.spinner{color:var(--accent-blue);animation:1s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.status-details{flex-direction:column;gap:.25rem;display:flex}.status-text{align-items:center;gap:.5rem;font-size:1rem;font-weight:600;display:flex}.text-success{color:var(--success)}.text-danger{color:var(--danger)}.pulse-dot-small{border-radius:50%;width:6px;height:6px;display:inline-block}.pulse-dot-small.online{background-color:var(--success);animation:2s infinite pulse-success}.pulse-dot-small.offline{background-color:var(--danger);animation:2s infinite pulse-danger}.action-panel{flex-direction:column;align-items:center;padding:0;display:flex;position:relative}@media (width>=800px){.action-panel{padding:1rem 0}}.action-button-ring{background:radial-gradient(circle,#ffffff0d 0%,#0000 70%);border:1px solid #ffffff0d;border-radius:50%;justify-content:center;align-items:center;width:100px;height:100px;margin-bottom:0;display:flex;box-shadow:inset 0 0 20px #00000080}@media (width>=800px){.action-button-ring{width:200px;height:200px;margin-bottom:1rem}}.action-btn{width:80px;height:80px;box-shadow:0 10px 20px #0006, inset 0 1px 1px #ffffff1a, 0 0 30px var(--accent-glow);color:var(--text-main);cursor:pointer;background:linear-gradient(145deg,#1e2536,#141924);border:none;border-radius:50%;transition:all .3s cubic-bezier(.175,.885,.32,1.275);position:relative;overflow:hidden}@media (width>=800px){.action-btn{width:155px;height:155px}}.action-btn:before{content:"";opacity:0;background:radial-gradient(circle,#ffffff14 0%,#0000 60%);border-radius:50%;transition:opacity .3s;position:absolute;inset:0}@media (hover:hover){.action-btn:hover:not(.disabled):not(.actioning){box-shadow:0 15px 30px #00000080, inset 0 1px 1px #fff3, 0 0 40px var(--accent-glow);transform:scale(1.05)translateY(-5px)}.action-btn:hover:before{opacity:1}}.action-btn:active:not(.disabled){transform:scale(.95);box-shadow:0 5px 10px #0006,inset 0 2px 5px #00000080}.action-btn.disabled{color:var(--text-muted);cursor:not-allowed;opacity:.7;background:#11151e;box-shadow:inset 0 0 10px #000c}.action-btn.actioning{box-shadow:0 0 40px var(--accent-glow);background:linear-gradient(145deg,#1e3a8a,#1e40af);animation:1.5s infinite alternate breathing}@keyframes breathing{0%{box-shadow:0 0 20px var(--accent-glow);transform:scale(1)}to{box-shadow:0 0 60px var(--accent-blue);transform:scale(1.05)}}.btn-content{z-index:2;flex-direction:column;align-items:center;gap:.25rem;display:flex;position:relative;transform:scale(.6)}@media (width>=800px){.btn-content{gap:.75rem;transform:scale(1)}}.btn-icon{filter:drop-shadow(0 2px 4px #00000080)}.btn-icon.ready{color:var(--success)}.btn-icon.locked{color:var(--text-muted)}.btn-icon.unlocking{color:#fff}.btn-text{letter-spacing:.1em;font-size:.9rem;font-weight:700}.action-feedback{width:200px;color:var(--accent-blue);text-align:center;opacity:0;pointer-events:none;font-size:.7rem;font-weight:500;transition:all .3s;position:absolute;bottom:-20px;transform:translateY(5px)}@media (width>=800px){.action-feedback{width:auto;font-size:.85rem;position:relative;bottom:auto;transform:translateY(10px)}}.action-feedback.visible{opacity:1;transform:translateY(0)}.dashboard-footer{border-top:1px solid var(--glass-border);color:var(--text-muted);justify-content:center;align-items:center;gap:.5rem;margin-top:1rem;padding-top:1rem;font-size:.7rem;display:flex}@media (width>=800px){.dashboard-footer{margin-top:2rem;padding-top:1.5rem;font-size:.75rem}}.login-container{background:var(--glass-bg);-webkit-backdrop-filter:blur(12px);border:1px solid var(--glass-border);width:90%;max-width:400px;box-shadow:var(--glass-shadow);z-index:10;border-radius:24px;flex-direction:column;justify-content:center;align-items:center;padding:3rem 2rem;animation:.5s ease-out fadeIn;display:flex}@keyframes fadeIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.login-icon{color:var(--accent-blue);filter:drop-shadow(0 0 10px var(--accent-glow));margin-bottom:1.5rem}.login-title{letter-spacing:.05em;text-align:center;margin-bottom:2.5rem;font-size:1.5rem;font-weight:700}.login-form{flex-direction:column;gap:1.5rem;width:100%;display:flex}.pin-input{border:1px solid var(--glass-border);color:var(--text-main);text-align:center;letter-spacing:.5em;background:#0006;border-radius:12px;outline:none;padding:1rem;font-family:monospace;font-size:1.5rem;transition:all .3s}.pin-input:focus{border-color:var(--accent-blue);box-shadow:0 0 15px var(--accent-glow)}.login-btn{background:linear-gradient(145deg, var(--accent-blue), #1e40af);color:#fff;cursor:pointer;letter-spacing:.1em;border:none;border-radius:12px;padding:1rem;font-size:1rem;font-weight:600;transition:all .3s;box-shadow:0 5px 15px #0000004d}.login-btn:hover{box-shadow:0 8px 20px var(--accent-glow);transform:translateY(-2px)}.login-btn:active{transform:translateY(0)}.login-error{color:var(--danger);text-align:center;margin-top:.5rem;font-size:.85rem;animation:.4s ease-in-out shake}@keyframes shake{0%,to{transform:translate(0)}25%{transform:translate(-5px)}50%{transform:translate(5px)}75%{transform:translate(-5px)}}