*{box-sizing:border-box}
html,body{width:100%;min-height:100%;margin:0}
html{background:#101e43}
body{min-height:100vh;min-height:100svh;min-height:100dvh;display:flex;align-items:center;justify-content:center;padding:max(28px,env(safe-area-inset-top)) max(28px,env(safe-area-inset-right)) max(28px,env(safe-area-inset-bottom)) max(28px,env(safe-area-inset-left));font-family:"Segoe UI",Arial,sans-serif;color:#17233c;background:#101e43;overflow-x:hidden;overflow-y:auto;-webkit-text-size-adjust:100%}
button,input{font:inherit}
.mt-bg{position:fixed;z-index:0;inset:0;overflow:hidden;pointer-events:none;background:linear-gradient(135deg,#07152f 0%,#194477 45%,#6a2f82 75%,#bd4777 100%)}
.mt-bg:after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 8% 95%,rgba(21,210,205,.34),transparent 34%),radial-gradient(circle at 92% 5%,rgba(255,187,82,.34),transparent 30%)}
.mt-bg .grid{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);background-size:40px 40px}
.glow{position:absolute;border-radius:50%;opacity:.48}
.glow-a{width:430px;height:430px;top:-220px;right:-80px;background:#f7a94e;filter:blur(90px)}
.glow-b{width:480px;height:480px;bottom:-270px;left:-130px;background:#12bfd0;filter:blur(100px)}
.mt-shell{position:relative;z-index:1;width:100%;max-width:980px;min-height:590px;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(360px,.95fr);overflow:hidden;border:1px solid rgba(255,255,255,.28);border-radius:24px;background:#fff;box-shadow:0 28px 80px rgba(3,9,28,.42)}
.mt-hero{position:relative;min-width:0;background:#14264d url("../img/loginPic.jpg") center center/cover no-repeat;overflow:hidden}
.mt-hero-shade{position:absolute;inset:0;background:linear-gradient(150deg,rgba(9,23,55,.12),rgba(17,26,62,.58))}
.mt-hero-logo{position:absolute;left:34px;bottom:34px;width:76px;height:76px;padding:10px;border-radius:20px;background:rgba(255,255,255,.94);box-shadow:0 12px 32px rgba(4,12,35,.3)}
.mt-card{position:relative;min-width:0;padding:58px 46px 54px;display:flex;flex-direction:column;justify-content:center;background:linear-gradient(165deg,#fff,#f5f7ff)}
.mt-brand{display:flex;align-items:center;gap:14px;margin-bottom:32px}
.mt-brand-mark{width:58px;height:58px;filter:drop-shadow(0 8px 15px rgba(53,61,132,.2))}
.mt-brand-text .b1{font-size:18px;font-weight:800;letter-spacing:1.6px;color:#14244a}
.mt-brand-text .b2{margin-top:5px;font-size:10px;letter-spacing:1.8px;color:#a66f19}
.mt-title{margin:0;font-size:29px;line-height:1.2;color:#122040}
.mt-sub{margin:8px 0 4px;font-size:13.5px;line-height:1.55;color:#687790}
.mt-field{margin-top:18px}
.mt-field label{display:block;margin-bottom:7px;font-size:12px;font-weight:700;color:#34445f}
.mt-input-wrap{position:relative}
.mt-input-wrap .ic{position:absolute;z-index:1;left:14px;top:50%;width:18px;transform:translateY(-50%);color:#8795ac;pointer-events:none}
.mt-input-wrap input{display:block;width:100%;height:50px;padding:0 45px 0 43px;border:1.5px solid #d7dfec;border-radius:12px;background:#fff;color:#16223b;font-size:14px;outline:none;transition:border-color .18s,box-shadow .18s}
.mt-input-wrap input:focus{border-color:#6758d8;box-shadow:0 0 0 4px rgba(103,88,216,.13)}
.mt-input-wrap:focus-within .ic{color:#6758d8}
.eye{position:absolute;z-index:2;right:8px;top:50%;width:35px;height:35px;padding:0;border:0;border-radius:9px;transform:translateY(-50%);display:flex;align-items:center;justify-content:center;background:transparent;color:#8492a7;cursor:pointer}
.eye:hover{background:#eef1fa;color:#5547c4}
.eye svg{width:19px;height:19px}
.eye-closed{display:none}
.eye.is-open .eye-open{display:none}
.eye.is-open .eye-closed{display:block}
.mt-btn-login{width:100%;height:51px;margin-top:25px;border:0;border-radius:12px;display:flex;align-items:center;justify-content:center;gap:9px;background:linear-gradient(100deg,#3e55cc,#7c3fd0 55%,#d94383);color:#fff;font-size:14px;font-weight:800;letter-spacing:1.1px;text-transform:uppercase;cursor:pointer;box-shadow:0 12px 24px rgba(91,57,190,.28);transition:transform .18s,filter .18s,box-shadow .18s}
.mt-btn-login:hover{transform:translateY(-1px);filter:brightness(1.06);box-shadow:0 15px 28px rgba(91,57,190,.34)}
.mt-btn-login:focus-visible,.eye:focus-visible{outline:3px solid rgba(103,88,216,.3);outline-offset:2px}
.mt-btn-login svg{width:18px;height:18px}
.mt-error{margin-top:16px;padding:11px 13px;border:1px solid #ffc5ce;border-radius:10px;background:#fff0f3;color:#a2233a;font-size:12.5px}
.mt-note{margin:23px 0 0;text-align:center;color:#8490a3;font-size:11.5px}
.mt-foot{position:absolute;right:46px;bottom:17px;color:#98a3b5;font-size:10.5px}
.dot{margin:0 4px;color:#be4f90}
@media(max-width:900px){body{align-items:flex-start;padding:max(18px,env(safe-area-inset-top)) max(18px,env(safe-area-inset-right)) max(18px,env(safe-area-inset-bottom)) max(18px,env(safe-area-inset-left))}.mt-shell{max-width:520px;min-height:0;display:block;margin:auto}.mt-hero{height:170px}.mt-hero-logo{left:24px;bottom:22px;width:62px;height:62px;border-radius:16px}.mt-card{padding:34px 30px 52px}.mt-brand{margin-bottom:24px}.mt-foot{right:0;left:0;bottom:14px;text-align:center}.mt-input-wrap input{font-size:16px}}
@media(max-width:480px){body{padding:0;align-items:stretch}.mt-shell{max-width:none;min-height:100vh;min-height:100svh;min-height:100dvh;border:0;border-radius:0;margin:0}.mt-hero{height:128px}.mt-hero-logo{left:20px;bottom:17px;width:52px;height:52px;padding:7px;border-radius:13px}.mt-card{min-height:calc(100vh - 128px);min-height:calc(100svh - 128px);min-height:calc(100dvh - 128px);padding:25px max(22px,env(safe-area-inset-right)) max(52px,env(safe-area-inset-bottom)) max(22px,env(safe-area-inset-left));justify-content:flex-start}.mt-brand{margin-bottom:22px}.mt-brand-mark{width:49px;height:49px}.mt-title{font-size:25px}.mt-input-wrap input,.mt-btn-login{height:48px}}
@media(min-width:901px) and (max-width:1100px){body{padding:20px}.mt-shell{max-width:960px;grid-template-columns:minmax(0,1fr) minmax(390px,.9fr)}.mt-card{padding:44px 36px 48px}.mt-brand{margin-bottom:26px}.mt-foot{right:36px}}
@media(max-height:650px) and (min-width:821px){body{align-items:flex-start;padding-top:18px;padding-bottom:18px}.mt-shell{min-height:540px}.mt-card{padding-top:38px;padding-bottom:42px}}