:root{
  --navy:#0b2856;
  --blue:#1689ff;
  --cyan:#2ed7d0;
  --green:#44e24d;
  --violet:#8158ff;
  --ink:#10244a;
  --muted:#6d7f9d;
  --glass:rgba(255,255,255,.91);
  --line:rgba(92,126,174,.18);
  --mx:0;
  --my:0;
}
*{box-sizing:border-box}
html,body{min-height:100%;margin:0}
body{font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--ink);overflow:hidden;background:#dff3ff;-webkit-font-smoothing:antialiased}
button,input{font:inherit}
.lab-login{position:relative;min-height:100dvh;display:grid;place-items:center;isolation:isolate;overflow:hidden;padding:32px}
.lab-scene{position:absolute;inset:-4%;z-index:-2;overflow:hidden;background:#dcefff}
.scene-image{position:absolute;inset:-3%;background-image:url('lab-login-scene.png');background-size:cover;background-position:center;filter:saturate(1.03) contrast(.97);transform:translate(calc(var(--mx)*-12px),calc(var(--my)*-9px)) scale(1.035);animation:cameraDrift 16s ease-in-out infinite alternate;will-change:transform}
.scene-vignette{position:absolute;inset:0;background:radial-gradient(circle at 50% 47%,rgba(255,255,255,.04) 0 25%,rgba(14,45,92,.08) 64%,rgba(9,32,69,.24) 100%),linear-gradient(90deg,rgba(13,45,86,.08),transparent 28%,transparent 72%,rgba(13,45,86,.08))}
.light-sweep{position:absolute;top:-30%;left:-34%;width:36%;height:160%;background:linear-gradient(105deg,transparent 0,rgba(255,255,255,.05) 35%,rgba(255,255,255,.40) 49%,rgba(255,255,255,.07) 62%,transparent 100%);filter:blur(9px);transform:rotate(8deg);animation:lightSweep 11s ease-in-out infinite}

.login-card-wrap{position:relative;width:min(470px,calc(100vw - 34px));transform:translate(calc(var(--mx)*7px),calc(var(--my)*5px));transition:transform .18s ease-out;animation:cardFloat 5.5s ease-in-out infinite}
.lab-status{width:max-content;max-width:100%;margin:0 auto 12px;padding:8px 14px;border:1px solid rgba(255,255,255,.54);border-radius:999px;background:rgba(8,38,79,.55);backdrop-filter:blur(14px);box-shadow:0 8px 30px rgba(18,55,99,.18);color:#fff;font-size:9px;font-weight:800;letter-spacing:.15em;text-transform:uppercase;display:flex;align-items:center;gap:8px}
.pulse-dot{width:7px;height:7px;border-radius:50%;background:#65f46d;box-shadow:0 0 0 0 rgba(101,244,109,.65);animation:pulse 1.9s infinite}
.login-card{position:relative;padding:30px 32px 25px;border:1px solid rgba(255,255,255,.72);border-radius:27px;background:linear-gradient(145deg,rgba(255,255,255,.96),rgba(250,253,255,.88));box-shadow:0 34px 85px rgba(22,53,95,.25),inset 0 1px 0 rgba(255,255,255,.9);backdrop-filter:blur(26px) saturate(1.16);overflow:hidden}
.login-card:before{content:"";position:absolute;inset:0 auto auto 0;width:100%;height:3px;background:linear-gradient(90deg,#47e24e,#22d7cc,#1689ff,#8158ff);background-size:200% 100%;animation:gradientMove 5s linear infinite}
.login-card:after{content:"";position:absolute;width:180px;height:180px;right:-86px;top:-96px;border-radius:50%;background:radial-gradient(circle,rgba(62,214,214,.19),transparent 68%);pointer-events:none;animation:halo 5s ease-in-out infinite}
.brand-mark{position:relative;width:62px;height:62px;margin:0 auto 14px;display:grid;place-items:center;border-radius:19px;background:linear-gradient(145deg,#eefcff,#fff);color:#1486e4;box-shadow:0 13px 35px rgba(22,137,255,.17);animation:markFloat 3.8s ease-in-out infinite}
.brand-mark svg{width:42px;height:42px;overflow:visible}.flask-wave{transform-origin:center;animation:liquidWave 2.8s ease-in-out infinite}.flask-bubble{animation:svgBubble 2.5s ease-in-out infinite}.b2{animation-delay:1.1s}
.eyebrow{text-align:center;color:#1984d1;font-size:9.5px;font-weight:850;letter-spacing:.13em;text-transform:uppercase}
.login-card h1{margin:7px 0 7px;text-align:center;font-size:29px;line-height:1.05;letter-spacing:-.045em;color:#0c2c60}
.login-sub{max-width:330px;margin:0 auto 23px;text-align:center;color:#7185a5;font-size:11.5px;line-height:1.55}
.login-card label{display:block;margin:0 0 7px;color:#49688f;font-size:9px;font-weight:850;letter-spacing:.08em;text-transform:uppercase}
.password-wrap{position:relative}.password-wrap input{width:100%;height:54px;padding:0 48px 0 44px;border:1px solid #d7e4f2;border-radius:14px;background:rgba(255,255,255,.86);outline:0;color:#123467;font-size:19px;font-weight:750;letter-spacing:.14em;box-shadow:inset 0 1px 2px rgba(30,67,112,.03);transition:.2s ease}.password-wrap input::placeholder{color:#a7b7ca}.password-wrap input:focus{border-color:#53a9f4;box-shadow:0 0 0 4px rgba(31,143,239,.11),0 7px 22px rgba(28,111,190,.08);transform:translateY(-1px)}
.lock-icon,.reveal{position:absolute;top:50%;transform:translateY(-50%);display:grid;place-items:center;color:#7188aa}.lock-icon{left:14px;width:21px}.lock-icon svg,.reveal svg{width:21px;height:21px}.reveal{right:8px;width:39px;height:39px;border:0;border-radius:10px;background:transparent;cursor:pointer}.reveal:hover{background:#eff7ff;color:#147bd3}
.enter-btn{position:relative;width:100%;height:52px;margin-top:13px;border:0;border-radius:14px;display:flex;align-items:center;justify-content:center;gap:10px;background:linear-gradient(105deg,#3ddd50 0%,#25cfb2 36%,#188bff 100%);background-size:160% 100%;color:#fff;font-size:12px;font-weight:850;letter-spacing:.01em;box-shadow:0 14px 30px rgba(23,137,229,.24);cursor:pointer;overflow:hidden;transition:transform .18s ease,box-shadow .18s ease;animation:buttonGradient 4s ease-in-out infinite alternate}.enter-btn:before{content:"";position:absolute;top:-50%;left:-45%;width:35%;height:200%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.52),transparent);transform:rotate(16deg);animation:buttonShine 3.5s ease-in-out infinite}.enter-btn span,.enter-btn svg{position:relative;z-index:1}.enter-btn svg{width:18px;height:18px;transition:transform .2s ease}.enter-btn:hover{transform:translateY(-2px);box-shadow:0 18px 35px rgba(23,137,229,.3)}.enter-btn:hover svg{transform:translateX(3px)}.enter-btn:active{transform:translateY(0)}
.login-error{margin:0 0 14px;padding:10px 12px;border:1px solid #ffd2d8;border-radius:11px;background:#fff3f5;color:#bb3d4d;font-size:10.5px;display:flex;gap:8px;align-items:center}.login-error span{display:grid;place-items:center;width:18px;height:18px;flex:0 0 auto;border-radius:50%;background:#df5262;color:#fff;font-size:10px;font-weight:900}
.role-route{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:14px}.role-route>div{min-width:0;padding:10px;border:1px solid #e5edf6;border-radius:12px;background:rgba(247,251,255,.76);display:flex;align-items:center;gap:8px}.route-icon{width:25px;height:25px;flex:0 0 25px;display:grid;place-items:center;border-radius:8px;background:#fff5d6;color:#be8b00;font-size:9px;font-weight:900}.route-user{background:#eaf3ff;color:#287ad0}.role-route b{display:block;color:#385777;font-size:9.5px}.role-route small{display:block;margin-top:1px;color:#8a9caf;font-size:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.login-hint{margin:15px 0 0;text-align:center;color:#90a1b5;font-size:8.5px;line-height:1.5}
.lab-caption{margin:12px auto 0;display:flex;align-items:center;justify-content:center;gap:10px;color:rgba(255,255,255,.9);text-shadow:0 2px 8px rgba(10,43,81,.45);font-size:9px;font-style:italic}.caption-line{width:34px;height:1px;background:rgba(255,255,255,.48)}

/* Decorative floating chemistry */
.molecule{position:absolute;width:64px;height:64px;filter:drop-shadow(0 5px 9px rgba(20,69,113,.12));opacity:.65;animation:moleculeFloat 7s ease-in-out infinite}.molecule i{position:absolute;width:12px;height:12px;border:3px solid rgba(255,255,255,.85);border-radius:50%;background:rgba(31,165,231,.35)}.molecule i:nth-child(1){left:6px;top:27px}.molecule i:nth-child(2){right:7px;top:8px}.molecule i:nth-child(3){right:2px;bottom:5px}.molecule:before,.molecule:after{content:"";position:absolute;height:2px;background:rgba(255,255,255,.67);transform-origin:left center}.molecule:before{width:37px;left:17px;top:31px;transform:rotate(-28deg)}.molecule:after{width:30px;left:28px;top:35px;transform:rotate(38deg)}.molecule-a{left:7%;top:13%;animation-delay:-2s}.molecule-b{right:7%;top:17%;transform:scale(.8);animation-delay:-4s}.molecule-c{right:13%;bottom:12%;transform:scale(.62);animation-delay:-1s}
.bubble-field{position:absolute;width:90px;height:180px;pointer-events:none}.bubble-left{left:3%;bottom:8%}.bubble-right{right:3%;bottom:4%}.bubble-field i{position:absolute;bottom:-20px;border:2px solid rgba(255,255,255,.6);background:rgba(86,211,255,.14);border-radius:50%;animation:bubbleRise 5s linear infinite}.bubble-field i:nth-child(1){left:10px;width:10px;height:10px;animation-duration:4.4s}.bubble-field i:nth-child(2){left:36px;width:16px;height:16px;animation-delay:1.4s;animation-duration:6.2s}.bubble-field i:nth-child(3){left:62px;width:8px;height:8px;animation-delay:2.1s;animation-duration:4.7s}.bubble-field i:nth-child(4){left:22px;width:7px;height:7px;animation-delay:3.3s}.bubble-field i:nth-child(5){left:70px;width:13px;height:13px;animation-delay:.7s;animation-duration:5.6s}.bubble-field i:nth-child(6){left:47px;width:5px;height:5px;animation-delay:2.8s;animation-duration:4s}
.mini-flask{position:absolute;width:62px;height:72px;opacity:.6;filter:drop-shadow(0 7px 12px rgba(13,66,109,.14));animation:flaskFloat 6s ease-in-out infinite}.flask-left{left:15%;top:21%}.flask-right{right:17%;top:10%;animation-delay:-3s;transform:scale(.78)}.mini-flask:before{content:"";position:absolute;left:10px;bottom:0;width:42px;height:45px;border:3px solid rgba(255,255,255,.82);border-radius:8px 8px 18px 18px;transform:perspective(60px) rotateX(-4deg)}.flask-neck{position:absolute;left:23px;top:0;width:17px;height:31px;border:3px solid rgba(255,255,255,.82);border-bottom:0;border-radius:4px 4px 0 0}.flask-liquid{position:absolute;left:14px;bottom:4px;width:34px;height:23px;border-radius:5px 5px 14px 14px;background:linear-gradient(#42e5be,#168ff1);animation:liquidLevel 3.2s ease-in-out infinite}.mini-flask i{position:absolute;z-index:2;width:5px;height:5px;border-radius:50%;background:#fff;animation:flaskBubble 2.4s ease-in-out infinite}.mini-flask i:nth-of-type(1){left:22px;bottom:16px}.mini-flask i:nth-of-type(2){left:35px;bottom:11px;animation-delay:.9s}.mini-flask i:nth-of-type(3){left:29px;bottom:7px;animation-delay:1.5s}

@keyframes cameraDrift{0%{transform:translate(calc(var(--mx)*-12px - 7px),calc(var(--my)*-9px - 3px)) scale(1.045)}100%{transform:translate(calc(var(--mx)*-12px + 8px),calc(var(--my)*-9px + 4px)) scale(1.065)}}
@keyframes cardFloat{0%,100%{margin-top:0}50%{margin-top:-7px}}
@keyframes lightSweep{0%,22%{transform:translateX(-20vw) rotate(8deg);opacity:0}38%{opacity:.8}58%,100%{transform:translateX(150vw) rotate(8deg);opacity:0}}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(101,244,109,.7)}70%{box-shadow:0 0 0 9px rgba(101,244,109,0)}100%{box-shadow:0 0 0 0 rgba(101,244,109,0)}}
@keyframes gradientMove{to{background-position:200% 0}}
@keyframes markFloat{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-5px) rotate(2deg)}}
@keyframes liquidWave{0%,100%{transform:skewY(-2deg) translateY(0)}50%{transform:skewY(2deg) translateY(-1px)}}
@keyframes svgBubble{0%{transform:translateY(3px);opacity:.2}50%{opacity:1}100%{transform:translateY(-8px);opacity:0}}
@keyframes buttonGradient{from{background-position:0 0}to{background-position:100% 0}}
@keyframes buttonShine{0%,52%{left:-45%;opacity:0}65%{opacity:1}90%,100%{left:120%;opacity:0}}
@keyframes halo{0%,100%{transform:scale(.9);opacity:.55}50%{transform:scale(1.16);opacity:1}}
@keyframes moleculeFloat{0%,100%{translate:0 0;rotate:-4deg}50%{translate:5px -14px;rotate:8deg}}
@keyframes bubbleRise{0%{transform:translate(0,0) scale(.75);opacity:0}15%{opacity:.8}75%{opacity:.7}100%{transform:translate(10px,-190px) scale(1.15);opacity:0}}
@keyframes flaskFloat{0%,100%{translate:0 0;rotate:-4deg}50%{translate:0 -11px;rotate:4deg}}
@keyframes liquidLevel{0%,100%{transform:skewY(-3deg)}50%{transform:skewY(3deg)}}
@keyframes flaskBubble{0%{translate:0 5px;opacity:0}40%{opacity:1}100%{translate:0 -15px;opacity:0}}

@media(max-width:900px){.scene-image{background-position:center center}.molecule,.mini-flask{opacity:.42}.login-card-wrap{width:min(445px,calc(100vw - 28px))}}
@media(max-width:600px){body{overflow:auto}.lab-login{min-height:100svh;padding:18px 14px}.lab-scene{position:fixed;inset:-3%}.scene-image{background-position:48% center;filter:saturate(.88) brightness(.86);transform:none}.scene-vignette{background:linear-gradient(rgba(7,34,74,.18),rgba(7,34,74,.30)),radial-gradient(circle at 50% 45%,transparent 0 20%,rgba(9,39,78,.28) 100%)}.login-card{padding:25px 20px 21px;border-radius:23px;background:rgba(255,255,255,.93)}.brand-mark{width:54px;height:54px;border-radius:17px}.brand-mark svg{width:37px;height:37px}.login-card h1{font-size:25px}.role-route{grid-template-columns:1fr}.role-route small{white-space:normal}.lab-status{font-size:8px}.lab-caption{font-size:8px}.molecule-b,.molecule-c,.flask-right{display:none}.flask-left{left:5%;top:9%;opacity:.35}}
@media(max-height:700px) and (min-width:601px){.lab-login{padding:15px}.login-card{padding:21px 28px 19px}.brand-mark{width:50px;height:50px;margin-bottom:10px}.brand-mark svg{width:35px;height:35px}.login-card h1{font-size:25px}.login-sub{margin-bottom:17px}.password-wrap input{height:49px}.enter-btn{height:47px}.role-route{margin-top:10px}.login-hint{margin-top:10px}.lab-caption{margin-top:7px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;scroll-behavior:auto!important}.scene-image,.login-card-wrap{transform:none!important}.light-sweep,.molecule,.bubble-field,.mini-flask{display:none!important}}