*{box-sizing:border-box}html,body{height:100%;margin:0}
body{font:15px/1.45 system-ui,"Segoe UI",sans-serif;color:#17302a;position:relative;overflow-x:hidden;background:#0f2a24}
.bg{position:fixed;inset:0;background:url(poster.jpg) center/cover no-repeat;filter:blur(22px) brightness(.8);transform:scale(1.15)}
.poster{position:fixed;top:0;bottom:0;left:0;width:52%;z-index:2;background:url(poster.jpg) center/contain no-repeat}
.shade{position:fixed;inset:0;z-index:1;background:rgba(8,32,26,.4)}
.wrap{position:relative;z-index:3;margin-left:52%;min-height:100%;display:flex;align-items:center;justify-content:center;padding:20px}
.box{width:100%;max-width:380px;background:rgba(255,253,245,.96);border:2px solid #173f35;border-radius:16px;padding:26px 24px 20px;box-shadow:0 0 0 6px rgba(255,255,255,.18),0 24px 60px rgba(0,0,0,.45)}
.logo{width:58px;height:58px;margin:-56px auto 8px;border-radius:50%;background:linear-gradient(135deg,#173f35,#2a6b5a);border:4px solid #fffdf5;display:flex;align-items:center;justify-content:center;font-size:28px;box-shadow:0 6px 16px rgba(0,0,0,.35)}
h1{margin:0;text-align:center;font-size:22px;color:#173f35}
.brand{text-align:center;font-size:13px;color:#b32222;font-weight:600;margin:2px 0 4px}
.sub{text-align:center;color:#5a665f;font-size:13px;margin:0 0 14px}
label{display:block;font-size:12px;font-weight:600;color:#3d4a44;margin:10px 0 3px}
input{width:100%;padding:11px 12px;border:1.5px solid #9fb0a8;border-radius:9px;font:inherit;background:#fff;outline:0}
input:focus{border-color:#173f35;box-shadow:0 0 0 3px rgba(23,63,53,.18)}
button{width:100%;margin-top:14px;padding:12px;border:0;border-radius:9px;background:linear-gradient(135deg,#173f35,#2a6b5a);color:#fff;font:600 15px/1 inherit;font-family:inherit;cursor:pointer}
button:hover{filter:brightness(1.15)}button.s{background:#fff;color:#7a2a2a;border:1px solid #7a2a2a;margin-top:0;font-weight:500}
.otp{font-size:26px;letter-spacing:8px;text-align:center}.row{display:flex;gap:8px;margin-top:10px}
.err{color:#b32222;font-size:13px;margin:8px 0 0;min-height:4px}.ok{color:#17703a;font-size:13px;margin:6px 0 0}
.tag{text-align:center;font-size:12px;color:#7a6a2a;margin:14px 0 0}
@media(max-width:900px){.poster{position:relative;top:auto;bottom:auto;width:100%;aspect-ratio:1219/1290;max-height:70vh;margin:0 auto}.wrap{margin-left:0;min-height:auto;padding:46px 16px 24px}}