/* ==========================================================
   Login page - A&F Gujjar Water Tanker (provided design)
   ========================================================== */
:root{--bg:#05060a;--text:#f2f3f8;--muted:#9a9db0;--accent:#c9cadb;--line:rgba(255,255,255,.16)}
*{box-sizing:border-box;margin:0}
html,body{height:100%}
body{font-family:'Poppins',system-ui,sans-serif;color:var(--text);background:var(--bg);overflow-x:hidden;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
.stage{position:relative;min-height:100vh;display:grid;grid-template-columns:1.15fr 1fr;align-items:center;padding:3vw 5vw;overflow:hidden;background:#05060a}
.bgimg{position:absolute;left:-3%;bottom:0;width:80%;aspect-ratio:16/9;background:url(../img/login-bg.jpg) center/cover no-repeat;-webkit-mask-image:linear-gradient(90deg,#000 55%,transparent 100%),linear-gradient(180deg,transparent 0,#000 30%);-webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,#000 55%,transparent 100%),linear-gradient(180deg,transparent 0,#000 30%);mask-composite:intersect;opacity:.95;pointer-events:none}
.stage::after{content:"";position:absolute;inset:auto 0 0 0;height:22%;background:radial-gradient(120% 100% at 30% 100%,rgba(70,72,95,.35),transparent 60%);pointer-events:none}
.left{position:relative;z-index:1;align-self:stretch;display:flex;flex-direction:column;justify-content:space-between;padding-right:2vw}
.brand{display:flex;align-items:center;gap:22px;margin-top:2vh}
.brand svg{width:clamp(70px,8vw,128px);flex:none}
.brand h1{font-family:'Montserrat',sans-serif;font-style:italic;font-weight:800;font-size:clamp(24px,3.1vw,48px);line-height:1.05;letter-spacing:.5px;white-space:nowrap}
.sub{display:flex;align-items:center;gap:14px;margin-top:4px;font-weight:500;letter-spacing:.36em;font-size:clamp(16px,2.1vw,33px);color:#e3e4ee}
.sub i{flex:1;height:1px;background:var(--line);min-width:20px}
.tag{margin:12px 0 0 clamp(90px,10vw,150px);font-style:italic;font-weight:300;font-size:clamp(15px,1.8vw,27px);color:#dcdde8}
.feat{display:flex;align-items:center;gap:0;margin-bottom:2vh}
.feat div{display:flex;align-items:center;gap:14px;padding:0 clamp(12px,2vw,30px);font-size:clamp(12px,1.15vw,18px);line-height:1.3;color:#d7d8e3}
.feat div:first-child{padding-left:0}
.feat div+div{border-left:1px solid var(--line)}
.feat svg{width:clamp(28px,2.8vw,44px);height:auto;flex:none;stroke:#c9cadb;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.right{position:relative;z-index:1;display:flex;justify-content:flex-end;align-items:center;padding:60px 0 20px}
.card{position:relative;width:min(100%,440px);padding:66px clamp(22px,2.4vw,38px) 26px;border-radius:26px;border:1px solid rgba(255,255,255,.14);background:linear-gradient(160deg,rgba(40,42,56,.78),rgba(18,19,28,.82));backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);box-shadow:0 30px 80px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.08);text-align:center}
.badge{position:absolute;top:-52px;left:50%;transform:translateX(-50%);width:104px;height:104px;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 50% 30%,#1c1d2a,#0a0b12);border:2px solid rgba(200,200,230,.55);box-shadow:0 0 30px rgba(150,150,210,.35),inset 0 0 20px rgba(0,0,0,.6)}
.badge svg{width:40px}
h2{font-size:clamp(26px,2.4vw,34px);font-weight:600;letter-spacing:-.5px}
h2 span{color:#b4b5c6}
.card p.s{margin:6px 0 22px;font-size:15px;color:#e6e7f0}
.field{display:flex;align-items:center;height:54px;margin-bottom:16px;border-radius:14px;border:1px solid rgba(255,255,255,.17);background:rgba(10,11,18,.55);transition:border-color .2s,box-shadow .2s}
.field:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px rgba(201,202,219,.25)}
.field.invalid{border-color:#ff8a8a}
.field>svg{width:22px;height:22px;margin:0 14px 0 18px;flex:none;stroke:#d5d6e4;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.field:before{content:"";order:1;width:1px;height:24px;background:var(--line);margin-right:14px}
.field>svg{order:0}.field input{order:2}.field button{order:3}
.field input{flex:1;min-width:0;height:100%;background:none;border:0;outline:0;color:var(--text);font:400 15px 'Poppins',sans-serif}
.field input::placeholder{color:#8b8ea3}
.field input:-webkit-autofill{-webkit-text-fill-color:var(--text);-webkit-box-shadow:0 0 0 40px #0d0e16 inset;caret-color:var(--text)}
.field button{background:none;border:0;cursor:pointer;padding:0 22px;display:grid;place-items:center}
.field button svg{width:26px;stroke:#d5d6e4;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.row{display:flex;justify-content:space-between;align-items:center;margin:2px 0 22px;font-size:14px}
.row label{display:flex;align-items:center;gap:12px;cursor:pointer}
.row input{appearance:none;width:22px;height:22px;border-radius:6px;background:#6c6e84;display:grid;place-items:center;cursor:pointer;margin:0}
.row input:checked::after{content:"";width:6px;height:12px;border:solid #fff;border-width:0 2.5px 2.5px 0;transform:rotate(45deg) translate(-1px,-1px)}
.row input:focus-visible,.row a:focus-visible,.login:focus-visible,.field button:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.row a{font-style:italic;color:#d9dae6;text-decoration:none}
.row a:hover{text-decoration:underline}
.login{width:100%;height:54px;border-radius:14px;border:1px solid rgba(255,255,255,.18);cursor:pointer;color:#fff;font:500 18px 'Poppins',sans-serif;display:flex;align-items:center;justify-content:center;gap:14px;background:linear-gradient(180deg,#6e7086,#4a4c60);box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 8px 20px rgba(0,0,0,.35);transition:filter .2s,transform .1s}
.login:hover{filter:brightness(1.12)}.login:active{transform:translateY(1px)}
.login[disabled]{opacity:.7;cursor:wait}
.login svg{width:28px;stroke:#fff;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.or{display:flex;align-items:center;gap:18px;margin:16px 0 14px;color:#d7d8e3;font-size:14px}
.or i{flex:1;height:1px;background:var(--line)}
.foot{color:#9a9db0;font-size:14px}
.foot a{color:var(--accent);text-decoration:none;font-weight:500;margin-left:6px}
.foot a:hover{text-decoration:underline}
#msg{min-height:20px;margin-top:14px;font-size:14px;color:#ffb4b4}
#msg.ok{color:#b9f0c8}
#msg.info{color:#cfc7ff}
.splash{position:absolute;right:0;top:0;bottom:0;width:22%;pointer-events:none;z-index:0;background:radial-gradient(60% 40% at 100% 90%,rgba(200,210,240,.22),transparent 70%),radial-gradient(50% 30% at 100% 5%,rgba(200,210,240,.15),transparent 70%)}
@media(max-width:1000px){
 .stage{grid-template-columns:1fr;padding:28px 20px 40px;gap:28px}
 .left{padding:0;gap:26px}
 .brand{margin-top:0;gap:14px}.brand h1{white-space:normal}
 .tag{margin-left:0}
 .feat{flex-wrap:wrap;gap:14px}.feat div,.feat div+div{padding:0 14px 0 0;border:0}
 .right{padding-top:70px;justify-content:center}
}
@media(max-width:480px){.field,.login{height:52px}.card{padding-top:62px}.bgimg{width:160%;left:-30%;opacity:.5}}