:root { --blue:#1f3a5f; --bg:#f3f5f8; --line:#d5dbe5; --err:#a31f34; }
* { box-sizing:border-box; }
body::before { content:''; position:fixed; inset:0; z-index:-1; background:url(/login-bg.webp) center/cover no-repeat; opacity:0; transition:opacity .6s; } body.ready::before { opacity:1; }
body { margin:0; min-height:100vh; min-height:100dvh; display:flex; justify-content:center; align-items:stretch; padding:16px; background:linear-gradient(160deg,#6b4a1f,#1f3a5f) center/cover no-repeat; font:16px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; color:#1b2433; }
form { width:min(420px,100%); min-height:calc(100dvh - 32px); display:flex; flex-direction:column; background:none; border:0; padding:8px 0 0; }
h1 { margin:0 0 auto; font-size:24px; color:#fff; text-align:center; text-shadow:0 1px 3px rgba(0,0,0,.8),0 0 14px rgba(0,0,0,.55); }
p { margin:0 0 18px; color:#5b6678; font-size:14px; }
label { display:block; font-size:13px; margin:12px 0 4px; color:#fff; font-weight:600; text-shadow:0 1px 3px rgba(0,0,0,.85); }
input { background:rgba(255,255,255,.6); backdrop-filter:blur(6px); width:100%; padding:10px 12px; border:1px solid var(--line); border-radius:8px; font:inherit; }
input:focus { outline:2px solid #7fa3d6; border-color:#7fa3d6; }
button { margin-top:18px; width:100%; padding:11px; border:0; border-radius:8px; background:var(--blue); color:#fff; font:inherit; font-weight:600; cursor:pointer; }
button:disabled { opacity:.6; cursor:default; }
#err { min-height:22px; margin-top:10px; color:#fff; background:rgba(163,31,52,.75); border-radius:8px; font-size:14px; padding:0 8px; } #err:empty { background:none; }

@media (max-width:480px) { input,button { font-size:16px; } }