/* Qavenza Admin – login page */
:root{--blue:#1b4de4;--blue2:#123bb8;--ink:#14181f;--mute:#6b7280;--line:#e5e7ef;--bg:#f4f6fb;--org:#f59e0b;--org2:#e08a00;box-sizing:border-box}
*{box-sizing:border-box;margin:0}
html{color-scheme:light}
body{font-family:"Segoe UI",system-ui,-apple-system,Arial,sans-serif;background:var(--bg);color:var(--ink);min-height:100vh;-webkit-font-smoothing:antialiased}
button,input{font:inherit;color:inherit}button{cursor:pointer;border:0;background:none}
:focus-visible{outline:3px solid rgba(245,158,11,.55);outline-offset:2px}

.lw{display:grid;grid-template-columns:1.1fr 1fr;min-height:100vh}

/* ---------- left brand panel ---------- */
.lp{position:relative;overflow:hidden;color:#fff;padding:56px 64px;display:flex;flex-direction:column;justify-content:center;
  background:radial-gradient(900px 500px at 10% -10%,#4f86ff55,transparent 60%),linear-gradient(145deg,#081b66 0%,#1b4de4 55%,#3d8bff 100%)}
.lp:before,.lp:after{content:"";position:absolute;border-radius:50%;pointer-events:none}
.lp:before{width:460px;height:460px;right:-150px;top:-140px;background:rgba(255,255,255,.07)}
.lp:after{width:360px;height:360px;left:-120px;bottom:-140px;background:rgba(245,158,11,.22);filter:blur(2px)}
.lp>*{position:relative;z-index:1}
.br{display:flex;align-items:center;gap:10px;font-size:28px;font-weight:800;letter-spacing:-.6px;margin-bottom:40px}
.br i{width:40px;height:40px;border-radius:12px;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.3);display:grid;place-items:center;font-style:normal;font-size:20px}
.br small{font-size:11px;font-weight:700;background:#fdebd3;color:#d9730d;padding:3px 9px;border-radius:20px;letter-spacing:.3px}
.lp h2{font-size:clamp(30px,3.4vw,46px);line-height:1.08;letter-spacing:-1px;max-width:460px}
.lp>p{margin:16px 0 26px;opacity:.9;max-width:430px;font-size:17px;line-height:1.55}
.lp ul{list-style:none;padding:0;display:grid;gap:12px;font-size:15px}
.lp li{display:flex;align-items:center;gap:10px}.lp li span{width:32px;height:32px;border-radius:10px;background:rgba(255,255,255,.14);display:grid;place-items:center;font-size:15px}
.pv{margin-top:38px;max-width:360px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.25);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-radius:16px;padding:16px 18px;box-shadow:0 18px 40px rgba(5,20,90,.35)}
.pvh{display:flex;justify-content:space-between;font-size:12px;opacity:.85;margin-bottom:10px}
.pvr{display:flex;justify-content:space-between;align-items:baseline;font-size:13px;opacity:.95;margin-top:4px}.pvr b{font-size:20px}
.pvb{display:flex;align-items:flex-end;gap:6px;height:46px;margin-top:12px}.pvb i{flex:1;border-radius:5px 5px 2px 2px;background:linear-gradient(180deg,#fff,rgba(255,255,255,.35))}

/* ---------- form side ---------- */
.lf{display:grid;place-items:center;padding:32px;background:
  radial-gradient(600px 300px at 90% 0%,#dfe8ff,transparent 70%),var(--bg)}
form{width:100%;max-width:420px;background:#fff;border:1px solid var(--line);border-radius:22px;padding:34px 32px 28px;box-shadow:0 24px 60px rgba(20,40,120,.12),0 2px 6px rgba(20,40,120,.05);animation:up .5s ease both}
form h1{font-size:28px;letter-spacing:-.5px}
.sub{color:var(--mute);margin:6px 0 20px;font-size:15px}
label{display:block;font-size:13px;font-weight:600;color:#374151;margin:14px 0 7px}
.fld{position:relative}
.fld .ic{position:absolute;left:14px;top:50%;transform:translateY(-50%);font-size:16px;opacity:.7;pointer-events:none}
.fld input{width:100%;border:1.5px solid var(--line);border-radius:12px;padding:13px 14px 13px 42px;background:#f8f9fd;outline:0;font-size:15px;transition:border-color .15s,box-shadow .15s,background .15s}
.fld input::placeholder{color:#9aa1b2}
.fld input:hover{border-color:#cdd3e6}
.fld input:focus{border-color:var(--blue);background:#fff;box-shadow:0 0 0 4px rgba(27,77,228,.12)}
.fld.pw input{padding-right:70px}
.fld .tg{position:absolute;right:8px;top:50%;transform:translateY(-50%);font-size:13px;font-weight:700;color:var(--blue);padding:7px 10px;border-radius:8px}
.fld .tg:hover{background:#eef3ff}
.rw{display:flex;justify-content:space-between;align-items:center;gap:8px;margin:16px 0 18px;font-size:13px;flex-wrap:wrap}
.rw .cb{display:flex;align-items:center;gap:8px;margin:0;font-weight:500;color:var(--ink);cursor:pointer}
.rw .cb input{width:17px;height:17px;accent-color:var(--blue)}
.rw a{color:var(--blue);font-weight:600;text-decoration:none}.rw a:hover{text-decoration:underline}
.go{width:100%;display:flex;align-items:center;justify-content:center;gap:8px;background:linear-gradient(180deg,#ffb020,var(--org));color:#fff;font-weight:800;font-size:16px;padding:14px;border-radius:12px;box-shadow:0 10px 22px rgba(245,158,11,.38);transition:transform .15s,box-shadow .15s,filter .15s;letter-spacing:.2px}
.go:hover{transform:translateY(-1px);box-shadow:0 14px 28px rgba(245,158,11,.45);filter:brightness(1.03)}
.go:active{transform:translateY(0)}
.go:disabled{opacity:.65;cursor:not-allowed;transform:none;box-shadow:none}
.go.ld:before{content:"";width:16px;height:16px;border-radius:50%;border:2.5px solid rgba(255,255,255,.4);border-top-color:#fff;animation:sp .7s linear infinite}
.er{display:none;background:#fff1f2;color:#b42318;border:1px solid #fecdd3;border-radius:12px;padding:11px 14px;font-size:13px;line-height:1.45}
.er.on{display:block}.er.ok{background:#ecfdf3;color:#067647;border-color:#abefc6}
.hn{display:flex;align-items:center;justify-content:center;gap:6px;text-align:center;color:var(--mute);font-size:12px;margin-top:16px}
.demo{margin-top:16px;background:#eef3ff;border:1px dashed #b9c9ff;color:#1e3a8a;border-radius:12px;padding:11px 14px;font-size:12px;line-height:1.7}
.demo b{display:block;font-size:12px;margin-bottom:2px}

@keyframes up{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes sp{to{transform:rotate(360deg)}}
.shake{animation:sh .38s}
@keyframes sh{20%,60%{transform:translateX(-7px)}40%,80%{transform:translateX(7px)}}

/* ---------- responsive ---------- */
@media (max-width:980px){.lp{padding:44px 36px}.pv{display:none}}
@media (max-width:820px){
  .lw{grid-template-columns:1fr}
  .lp{padding:26px 24px 30px}.lp>p,.lp ul,.pv{display:none}.lp h2{font-size:24px}.br{margin-bottom:14px;font-size:24px}
  .lf{padding:20px 14px 30px;align-items:start}
  form{padding:26px 20px;margin-top:-18px}
}
@media (prefers-reduced-motion:reduce){form,.shake,.go.ld:before{animation:none}.go,.fld input{transition:none}}

.rb{border-radius:12px;padding:11px 14px;font-size:13px;line-height:1.45;margin-bottom:6px}.rb.good{background:#ecfdf3;color:#067647;border:1px solid #abefc6}.rb.bad{background:#fff1f2;color:#b42318;border:1px solid #fecdd3}.rb.wait{background:#eef3ff;color:#1e3a8a;border:1px solid #c9d8ff}
.have{background:#fff7e6;color:#8a5a00;border-radius:10px;padding:9px 12px;font-size:13px;margin-bottom:6px}.have a,.hn a{color:var(--blue);font-weight:700}
.have[hidden]{display:none}
form{max-width:440px}