*{box-sizing:border-box}html,body{margin:0;min-height:100%;font-family:Inter,Arial,sans-serif;background:#e9f6ed}body{min-height:100vh;overflow-x:hidden}.reference-stage{position:relative;width:min(100vw,1536px);aspect-ratio:3/2;margin:auto;background:url('login-exact-reference.png') center/100% 100% no-repeat;overflow:hidden}.live-login{position:absolute;inset:0;pointer-events:none}.live-field,.live-button,.eye{pointer-events:auto}.live-field{position:absolute;left:61.26%;width:30.14%;height:6.45%;border-radius:18px;background:#f0f2f3;display:flex;align-items:center;padding:0 4.2%;box-shadow:none}.user-field{top:30.47%}.pass-field{top:38.67%}.live-field input{width:100%;height:100%;border:0;outline:0;background:transparent;color:#3c5870;font-size:clamp(13px,1.05vw,18px);font-family:inherit;padding:0 8% 0 0}.live-field input::placeholder{color:#5b7085;opacity:1}.live-icon,.live-lock{position:absolute;left:5.5%;font-size:0;width:16px;height:16px}.live-icon:before{content:'♟';font-size:20px;color:#163b4c}.live-lock:before{content:'🔒';font-size:17px}.eye{position:absolute;right:4%;top:50%;transform:translateY(-50%);border:0;background:transparent;color:#173d4e;font-size:18px;cursor:pointer}.live-button{position:absolute;left:61.26%;top:50.68%;width:30.14%;height:6.45%;border:0;border-radius:22px;background:linear-gradient(90deg,#08733d,#1aad68);color:#fff;font-weight:800;font-size:clamp(16px,1.45vw,23px);cursor:pointer;box-shadow:0 12px 24px rgba(0,110,58,.16)}.live-button span{margin-left:28px;font-size:1.35em}.login-error{position:absolute;left:61.26%;top:27.2%;width:30.14%;padding:8px 12px;border-radius:10px;background:#fff0f0;color:#b42318;font-size:13px;text-align:center;z-index:4}
@media (min-aspect-ratio:3/2){.reference-stage{height:100vh;width:150vh}}

.mobile-ui{display:none}
@media (max-width:700px){
 html,body{width:100%;min-height:100%;margin:0;overflow-x:hidden;background:#edf8f0}
 body{min-height:100svh}
 .reference-stage{display:none!important}
 .mobile-ui{display:flex!important;flex-direction:column;position:relative;width:100%;min-height:100svh;overflow:hidden;background:#edf8f0;color:#10283f}
 .mobile-hero{position:relative;height:43svh;min-height:300px;max-height:390px;padding:22px 18px;background:linear-gradient(to bottom,rgba(255,255,255,.05) 55%,#edf8f0 100%),url('login-room-scene.jpg') center 46%/cover no-repeat}
 .m-brand{display:flex;align-items:center;gap:9px;position:relative;z-index:2;width:max-content;max-width:100%;padding:8px 11px;border-radius:14px;background:rgba(255,255,255,.88);box-shadow:0 5px 20px rgba(15,91,53,.08)}
 .m-house{width:38px;height:33px;position:relative;border:5px solid #18a964;border-bottom:0;transform:rotate(45deg);border-radius:4px 4px 0 4px;margin:0 4px}
 .m-house:after{content:'● ●';position:absolute;left:-4px;top:8px;transform:rotate(-45deg);font-size:12px;letter-spacing:1px;color:#18a964}
 .m-brandtext strong{display:block;font-size:21px;line-height:1}.m-brandtext strong span{color:#18a964}.m-brandtext small{display:block;margin-top:4px;font-size:10px;color:#415b6c}
 .m-quote{position:absolute;z-index:2;right:20px;bottom:80px;text-align:right;font:italic 20px/1.08 Georgia,serif;color:#087643;text-shadow:0 1px 1px #fff}
 .mobile-card{position:relative;z-index:4;width:calc(100% - 28px);max-width:430px;margin:-76px auto 14px;padding:27px 18px 19px;border:1px solid rgba(255,255,255,.9);border-radius:27px;background:#fff;box-shadow:0 20px 50px rgba(18,79,49,.16)}
 .m-leaf{text-align:center;color:#0a884c;font-size:27px;line-height:1;margin-bottom:3px}.mobile-card h1{margin:0;text-align:center;font-size:29px;line-height:1.12;letter-spacing:-.6px}.mobile-card>.sub{margin:7px 0 22px;text-align:center;font-size:13px;color:#607487}
 .m-error{margin:-8px 0 11px;padding:9px;border-radius:10px;background:#fff0f0;color:#b42318;text-align:center;font-size:12px}
 .m-field{height:54px;margin-bottom:11px;padding:0 14px;display:flex;align-items:center;gap:11px;border-radius:15px;background:#f0f3f4;color:#173c4e}.m-field span{font-size:17px}.m-field input{flex:1;min-width:0;height:100%;border:0;outline:0;background:transparent;font:15px Inter,Arial,sans-serif;color:#29485e}.m-field input::placeholder{color:#60778a}.m-eye{border:0;background:transparent;color:#173c4e;font-size:17px;padding:7px;cursor:pointer}
 .m-forgot{text-align:right;color:#087643;font-size:12px;margin:0 2px 16px}.m-login{width:100%;height:55px;border:0;border-radius:16px;background:linear-gradient(90deg,#08733d,#18aa65);color:#fff;font-size:18px;font-weight:800;box-shadow:0 10px 23px rgba(9,116,62,.18)}.m-login b{font-size:23px;margin-left:20px}.m-or{display:flex;align-items:center;gap:12px;margin:18px 0;color:#667b8c;font-size:11px}.m-or:before,.m-or:after{content:'';flex:1;height:1px;background:#d9e2e4}
 .m-new{display:flex;align-items:center;justify-content:center;gap:11px;padding:13px;border-radius:15px;background:#eaf8ef}.m-new .people{font-size:25px;color:#087643}.m-new strong{display:block;font-size:13px;color:#075e38}.m-new small{display:block;margin-top:2px;font-size:10px;color:#536d62}
 .m-footer{margin-top:20px;padding-top:13px;border-top:1px solid #dfe9e2;text-align:center;font-size:9px;line-height:1.55;color:#61776b}.m-footer b{display:block;margin-top:2px;color:#3b6551}
 .m-values{display:flex;justify-content:center;gap:18px;padding:0 12px 20px;color:#087643;font-size:10px;font-weight:700}.m-values span{display:flex;align-items:center;gap:4px}.m-values i{font-style:normal;font-size:16px}
}
@media (max-width:380px){.mobile-hero{height:40svh;min-height:270px}.m-quote{bottom:72px;font-size:18px}.mobile-card{width:calc(100% - 20px);margin-top:-68px;padding:24px 15px 17px}.mobile-card h1{font-size:26px}.m-field{height:51px}.m-login{height:52px}.m-values{gap:10px;font-size:9px}}