*,:before,:after{box-sizing:border-box;margin:0;padding:0}:root{--bg:#070b14;--bg-card:#0c111ecc;--bg-input:#0c1120;--bg-input-focus:#101728;--accent:#00d4aa;--accent-light:#00e5ff;--accent-dim:#00d4aa1a;--accent-glow:#00d4aa4d;--purple:#a78bfa;--text:#e8ecf4;--text-sec:#7c879c;--text-muted:#3e4a5e;--border:#ffffff0f;--border-focus:#00d4aa66;--danger:#ef4444;--success:#10b981;--font:"Inter", -apple-system, BlinkMacSystemFont, sans-serif;--font-display:"Space Grotesk", "Inter", sans-serif;--ease:cubic-bezier(.16, 1, .3, 1);--spring:cubic-bezier(.34, 1.56, .64, 1)}html,body{width:100%;height:100%;font-family:var(--font);background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased;overflow:hidden}.scene{transition:opacity .7s var(--ease), transform .7s var(--ease);justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.scene.out{opacity:0;pointer-events:none;transform:scale(1.04)}.bg-grain{z-index:0;pointer-events:none;background:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.025'/%3E%3C/svg%3E");position:fixed;inset:0}.bg-blob{filter:blur(100px);opacity:.3;pointer-events:none;z-index:0;border-radius:50%;position:fixed}.blob-1{background:radial-gradient(circle,#00d4aa26 0%,#0000 70%);width:500px;height:500px;animation:20s ease-in-out infinite blobDrift1;top:-15%;left:-10%}.blob-2{background:radial-gradient(circle,#a78bfa1f 0%,#0000 70%);width:400px;height:400px;animation:25s ease-in-out infinite blobDrift2;bottom:-10%;right:-5%}.blob-3{background:radial-gradient(circle,#00e5ff14 0%,#0000 70%);width:300px;height:300px;animation:18s ease-in-out infinite blobDrift3;top:50%;left:60%}.login-card{z-index:10;background:var(--bg-card);-webkit-backdrop-filter:blur(40px)saturate(150%);border:1px solid var(--border);width:100%;max-width:420px;animation:cardIn .8s var(--ease);border-radius:28px;padding:44px 36px 36px;position:relative;box-shadow:0 0 0 1px #00d4aa0a,0 24px 80px #00000080,0 2px 16px #0000004d}.login-card:before{content:"";-webkit-mask-composite:xor;pointer-events:none;background:linear-gradient(135deg,#00d4aa26,#0000 50%,#a78bfa1a);border-radius:29px;padding:1px;position:absolute;inset:-1px;-webkit-mask-image:linear-gradient(#fff 0 0),linear-gradient(#fff 0 0);-webkit-mask-position:0 0,0 0;-webkit-mask-size:auto,auto;-webkit-mask-repeat:repeat,repeat;-webkit-mask-clip:content-box,border-box;-webkit-mask-origin:content-box,border-box;-webkit-mask-composite:xor;mask-composite:exclude;-webkit-mask-source-type:auto,auto;mask-mode:match-source,match-source}.login-logo{width:100px;height:100px;margin:0 auto 20px}.logo-svg{width:100%;height:100%;filter:drop-shadow(0 0 20px var(--accent-glow))}.ring-outer{stroke-dasharray:346;stroke-dashoffset:346px;animation:drawRing 1.8s var(--ease) forwards, spin 20s linear infinite;transform-origin:50%}.ring-mid{stroke-dasharray:264;stroke-dashoffset:264px;animation:drawRing 1.8s var(--ease) .2s forwards, spinR 15s linear infinite;transform-origin:50%}.logo-core{transform-origin:50%;animation:3s ease-in-out infinite pulse}.draw{stroke-dasharray:200;stroke-dashoffset:200px}.roof{animation:drawPath .7s var(--ease) .5s forwards}.walls{animation:drawPath .7s var(--ease) .7s forwards}.door{animation:drawPath .5s var(--ease) 1s forwards}.crate{animation:drawPath .3s var(--ease) 1.3s forwards}.particle{opacity:0;animation:4s ease-in-out infinite pFloat}.p1{animation-delay:0s}.p2{animation-delay:.8s}.p3{animation-delay:1.6s}.p4{animation-delay:2.4s}.p5{animation-delay:3.2s}.login-title{text-align:center;margin-bottom:28px}.title-main{font-family:var(--font-display);letter-spacing:-1px;background:linear-gradient(135deg, var(--accent), var(--accent-light));-webkit-text-fill-color:transparent;opacity:0;animation:fadeUp .6s var(--ease) .3s forwards;-webkit-background-clip:text;background-clip:text;font-size:2.2rem;font-weight:800;display:block}.title-sub{font-family:var(--font-display);letter-spacing:7px;text-transform:uppercase;color:var(--text-muted);opacity:0;animation:fadeUp .6s var(--ease) .5s forwards;margin-top:2px;font-size:.85rem;font-weight:500;display:block}.warehouse-track-viewport{margin-top:2px;padding:4px 0;overflow:hidden}.warehouse-track{justify-content:center;align-items:center;gap:8px;animation:1s cubic-bezier(.34,1.56,.64,1) .5s backwards trackIn;display:flex}.van-icon{color:var(--accent);margin-top:-3px;font-size:1.1rem;transform:scaleX(-1)}.static-main,.static-sub{opacity:1!important;margin-top:0!important;animation:none!important}@keyframes trackIn{0%{opacity:0;transform:translate(-150%)}to{opacity:1;transform:translate(0)}}.warehouse-track.drive-off{animation:.5s cubic-bezier(.5,0,.1,1) forwards trackOut!important}@keyframes trackOut{0%{opacity:1;transform:translate(0)}to{opacity:0;transform:translate(200%)}}.login-logo{transition:transform .4s cubic-bezier(.34,1.56,.64,1),filter .4s}.login-logo:hover{filter:drop-shadow(0 0 30px #00d4aa99);transform:scale(1.15)rotate(5deg)}.login-logo:active{transform:scale(.95)}.login-step{animation:fadeUp .5s var(--ease);display:none}.login-step.active{display:block}.login-desc{text-align:center;color:var(--text-sec);margin-bottom:24px;font-size:.88rem;line-height:1.6}.login-desc strong{color:var(--accent)}.input-group{margin-bottom:16px;position:relative}.input-icon{color:var(--text-muted);font-size:20px;transition:color .3s;position:absolute;top:50%;left:16px;transform:translateY(-50%)}.input-group input{background:var(--bg-input);border:1.5px solid var(--border);width:100%;font-family:var(--font);color:var(--text);transition:all .3s var(--ease);border-radius:14px;outline:none;padding:15px 16px 15px 48px;font-size:.95rem}.input-group input::placeholder{color:var(--text-muted)}.input-group input:focus{border-color:var(--border-focus);background:var(--bg-input-focus);box-shadow:0 0 0 4px var(--accent-dim)}.input-group input:focus+.input-icon,.input-group input:focus~.input-icon{color:var(--accent)}.otp-container{justify-content:center;align-items:center;gap:8px;margin-bottom:16px;display:flex}.otp-box{text-align:center;width:48px;height:58px;color:var(--accent);background:var(--bg-input);border:1.5px solid var(--border);transition:all .25s var(--ease);caret-color:var(--accent);border-radius:12px;outline:none;font-family:Space Grotesk,monospace;font-size:1.5rem;font-weight:700}.otp-box:focus{border-color:var(--accent);background:var(--bg-input-focus);box-shadow:0 0 0 4px var(--accent-dim);transform:translateY(-2px)}.otp-box.filled{background:#00d4aa0d;border-color:#00d4aa4d}.otp-box.shake{animation:.5s ease-in-out shake}.otp-sep{color:var(--text-muted);margin:0 2px;font-size:1.2rem;font-weight:300}.otp-timer{text-align:center;color:var(--text-muted);justify-content:center;align-items:center;gap:6px;margin-bottom:20px;font-size:.78rem;display:flex}.otp-timer strong{color:var(--text-sec)}.otp-timer.warning strong{color:var(--danger);animation:1s ease-in-out infinite textFlash}.trust-toggle{cursor:pointer;transition:all .3s var(--ease);-webkit-user-select:none;user-select:none;background:#00d4aa0a;border:1px solid #00d4aa14;border-radius:12px;align-items:center;gap:12px;margin-bottom:20px;padding:12px 16px;display:flex}.trust-toggle:hover{background:#00d4aa14;border-color:#00d4aa26}.trust-toggle input{display:none}.trust-slider{background:var(--bg-input);border:1.5px solid var(--border);width:40px;height:22px;transition:all .3s var(--ease);border-radius:11px;flex-shrink:0;position:relative}.trust-slider:after{content:"";background:var(--text-muted);width:16px;height:16px;transition:all .3s var(--ease);border-radius:50%;position:absolute;top:2px;left:2px}.trust-toggle input:checked+.trust-slider{background:var(--accent-dim);border-color:var(--accent)}.trust-toggle input:checked+.trust-slider:after{background:var(--accent);box-shadow:0 0 8px var(--accent-glow);left:20px}.trust-label{color:var(--text-sec);align-items:center;gap:6px;font-size:.82rem;transition:color .3s;display:flex}.trust-toggle input:checked~.trust-label{color:var(--accent)}.btn-glow{background:linear-gradient(135deg, var(--accent), #00c49a);color:#070b14;width:100%;font-family:var(--font);cursor:pointer;transition:all .3s var(--ease);box-shadow:0 4px 24px var(--accent-glow);border:none;border-radius:14px;justify-content:center;align-items:center;gap:10px;padding:14px 28px;font-size:.92rem;font-weight:700;display:flex;position:relative;overflow:hidden}.btn-glow:before{content:"";background:linear-gradient(135deg,#0000 30%,#ffffff26 50%,#0000 70%);transition:transform .6s;position:absolute;inset:0;transform:translate(-100%)}.btn-glow:hover:before{transform:translate(100%)}.btn-glow:hover{box-shadow:0 8px 36px var(--accent-glow);transform:translateY(-2px)}.btn-glow:active{transform:translateY(0)}.btn-glow:disabled{opacity:.4;cursor:not-allowed;box-shadow:none;transform:none}.btn-glow:disabled:before{display:none}.btn-glow .btn-icon{transition:transform .3s var(--ease);font-size:18px}.btn-glow:hover .btn-icon{transform:translate(4px)}.btn-glow.loading .btn-text,.btn-glow.loading .btn-icon{display:none}.btn-glow.loading .btn-loader{display:inline-block}.btn-loader{border:2.5px solid #070b144d;border-top-color:#070b14;border-radius:50%;width:20px;height:20px;animation:.7s linear infinite spin}.full-w{width:100%}.btn-outline{color:var(--text-sec);font-family:var(--font);border:1px solid var(--border);cursor:pointer;transition:all .3s var(--ease);background:0 0;border-radius:12px;align-items:center;gap:8px;padding:12px 24px;font-size:.88rem;font-weight:600;text-decoration:none;display:inline-flex}.btn-outline:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-dim)}.form-error{text-align:center;color:var(--danger);min-height:20px;animation:fadeUp .3s var(--ease);margin-top:12px;font-size:.82rem}.login-footer{text-align:center;color:var(--text-muted);letter-spacing:.3px;justify-content:center;align-items:center;gap:6px;margin-top:24px;font-size:.72rem;display:flex}.login-links{text-align:center;margin-top:20px}.link-btn{color:var(--text-sec);font-family:var(--font);cursor:pointer;background:0 0;border:none;padding:4px 8px;font-size:.82rem;transition:color .3s}.link-btn:hover{color:var(--accent)}.link-sep{color:var(--text-muted);margin:0 4px;font-size:.7rem}.login-mode-toggle{text-align:center;margin-top:12px}.login-mode-toggle .link-btn{opacity:.6;align-items:center;gap:5px;font-size:.78rem;transition:all .3s;display:inline-flex}.login-mode-toggle .link-btn:hover{opacity:1}.pw-toggle-btn{color:var(--text-muted);cursor:pointer;background:0 0;border:none;border-radius:6px;align-items:center;padding:4px;transition:color .3s;display:flex;position:absolute;top:50%;right:12px;transform:translateY(-50%)}.pw-toggle-btn:hover{color:var(--accent)}.pw-toggle-btn .material-icons-outlined{font-size:20px}.pw-strength{background:var(--bg-input);border-radius:2px;height:3px;margin-top:-8px;margin-bottom:16px;overflow:hidden}.pw-strength-bar{height:100%;transition:width .4s var(--ease), background .4s;border-radius:2px;width:0%}.pw-strength-bar.weak{background:var(--danger);width:25%}.pw-strength-bar.fair{background:#f59e0b;width:50%}.pw-strength-bar.good{background:var(--accent);width:75%}.pw-strength-bar.strong{background:var(--success);width:100%}.pw-strength-label{text-align:right;margin-top:4px;margin-bottom:12px;font-size:.72rem}.pw-strength-label.weak{color:var(--danger)}.pw-strength-label.fair{color:#f59e0b}.pw-strength-label.good{color:var(--accent)}.pw-strength-label.strong{color:var(--success)}.success-anim{text-align:center;margin-bottom:16px}.success-icon{color:var(--success);animation:popIn .5s var(--spring);font-size:64px}.success-title{text-align:center;font-family:var(--font-display);margin-bottom:4px;font-size:1.4rem;font-weight:700}.success-name{text-align:center;color:var(--accent);font-size:.95rem;font-weight:600}.success-role{text-align:center;margin:8px auto 20px}.success-role span{letter-spacing:1px;text-transform:uppercase;background:var(--accent-dim);color:var(--accent);border:1px solid #00d4aa26;border-radius:8px;padding:4px 14px;font-size:.75rem;font-weight:600;display:inline-block}.success-loading{text-align:center;color:var(--text-muted);font-size:.82rem;animation:1.5s ease-in-out infinite textFlash}#appView{z-index:5}#appView iframe{background:var(--bg);border:none;width:100%;height:100%}#errorView{z-index:20}.error-card{text-align:center;background:var(--bg-card);-webkit-backdrop-filter:blur(30px);backdrop-filter:blur(30px);border:1px solid var(--border);max-width:440px;animation:cardIn .6s var(--spring);border-radius:24px;padding:48px;box-shadow:0 24px 64px #00000080}.error-icon{color:var(--danger);margin-bottom:16px;font-size:52px;animation:.6s ease-in-out shake}.error-card h2{font-family:var(--font-display);margin-bottom:12px;font-size:1.4rem}.error-card p{color:var(--text-sec);margin-bottom:24px;font-size:.9rem;line-height:1.6}.error-actions{flex-wrap:wrap;justify-content:center;gap:12px;margin-bottom:16px;display:flex}.error-hint{color:var(--text-muted);margin:0;font-size:.76rem}@keyframes cardIn{0%{opacity:0;transform:translateY(24px)scale(.96)}to{opacity:1;transform:translateY(0)scale(1)}}@keyframes fadeUp{0%{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}@keyframes drawRing{to{stroke-dashoffset:0}}@keyframes drawPath{to{stroke-dashoffset:0}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes spinR{to{transform:rotate(-360deg)}}@keyframes pulse{0%,to{r:24;opacity:.6}50%{r:28;opacity:.9}}@keyframes pFloat{0%{opacity:0;transform:translateY(0)scale(.5)}20%{opacity:.8}80%{opacity:.8}to{opacity:0;transform:translateY(-18px)scale(1.2)}}@keyframes shake{0%,to{transform:translate(0)}20%{transform:translate(-6px)}40%{transform:translate(6px)}60%{transform:translate(-3px)}80%{transform:translate(3px)}}@keyframes popIn{0%{opacity:0;transform:scale(.3)}to{opacity:1;transform:scale(1)}}@keyframes textFlash{0%,to{opacity:.4}50%{opacity:1}}@keyframes blobDrift1{0%,to{transform:translate(0)scale(1)}33%{transform:translate(40px,30px)scale(1.1)}66%{transform:translate(-20px,50px)scale(.95)}}@keyframes blobDrift2{0%,to{transform:translate(0)scale(1)}33%{transform:translate(-30px,-40px)scale(1.08)}66%{transform:translate(50px,-20px)scale(.92)}}@keyframes blobDrift3{0%,to{transform:translate(0)scale(1)}50%{transform:translate(-40px,20px)scale(1.15)}}@media (width<=480px){.login-card{border-radius:22px;margin:16px;padding:32px 24px 28px}.login-logo{width:80px;height:80px}.title-main{font-size:1.8rem}.title-sub{letter-spacing:5px;font-size:.72rem}.otp-box{width:42px;height:50px;font-size:1.3rem}.error-card{margin:16px;padding:32px 20px}}[data-theme=light]{--bg:#f0f2f7;--bg-card:#ffffffeb;--bg-input:#fff;--bg-input-focus:#f8fafc;--text:#1a1d2e;--text-sec:#5a6178;--text-muted:#b0b8c9;--border:#00000014;--border-focus:#00b49666}[data-theme=light] body{background:var(--bg)}[data-theme=light] .bg-grain{opacity:0}[data-theme=light] .bg-blob{opacity:.15}[data-theme=light] .login-card{box-shadow:0 0 0 1px #0000000a,0 24px 80px #00000014,0 2px 16px #0000000a}[data-theme=light] .login-card:before{background:linear-gradient(135deg,#00b4961a,#0000 50%,#7864c80f)}[data-theme=light] .title-sub{color:#8690a7}[data-theme=light] .otp-box{color:#0a8068;background:#fff}[data-theme=light] .trust-toggle{background:#00b4960a;border-color:#00b49614}[data-theme=light] .error-card{background:#fffffff2;box-shadow:0 24px 64px #00000014}.login-theme-toggle{z-index:50;background:var(--bg-card);border:1px solid var(--border);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);width:42px;height:42px;color:var(--text-sec);cursor:pointer;transition:all .3s var(--ease);border-radius:50%;justify-content:center;align-items:center;display:flex;position:fixed;top:20px;right:20px;box-shadow:0 4px 16px #0003}.login-theme-toggle:hover{color:var(--accent);border-color:var(--accent);box-shadow:0 4px 20px var(--accent-glow);transform:rotate(15deg)scale(1.1)}.login-theme-toggle .material-icons-outlined{font-size:20px}