:root{
  --brand:#246bce;--page:#fff;--card:#fff;--text:#111827;--muted:#4b5563;
  --input:#f8fafc;--inputText:#111827;--buttonText:#fff;--border:#cbd5e1;
}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;font-family:Arial,sans-serif;color:var(--text)}
body{background:var(--page);background-size:cover;background-position:center;background-attachment:fixed}
.wrap{min-height:100vh;padding:24px 16px;display:flex;justify-content:center;align-items:flex-start}
.card{width:min(520px,100%);background:var(--card);border:1px solid var(--border);padding:28px;border-radius:6px;box-shadow:0 10px 30px rgba(0,0,0,.08)}
.logo-box{height:105px;border:1px solid var(--border);display:flex;align-items:center;justify-content:center;margin-bottom:22px;overflow:hidden;background:var(--input)}
.logo-box img{max-width:300px;max-height:100px;display:block}.logo-box span{color:var(--muted);font-weight:700}
h1{font-size:34px;line-height:1.1;margin:0 0 24px}.field{margin-bottom:16px}label{display:block;font-size:14px;font-weight:700;margin-bottom:6px}
input{width:100%;padding:14px 12px;border:1px solid var(--border);border-radius:4px;background:var(--input);color:var(--inputText);font-size:16px;outline:none}
input:focus{border-color:var(--brand);box-shadow:0 0 0 3px rgba(36,107,206,.15)}
button{width:100%;border:0;border-radius:4px;background:var(--brand);color:var(--buttonText);font-size:16px;font-weight:700;padding:15px;cursor:pointer}
button:disabled{opacity:.65;cursor:wait}.status{margin-top:16px;padding:12px;border:1px solid var(--border);background:var(--input);white-space:pre-wrap}.status.ok{color:#166534}.status.error{color:#b91c1c}
@media(max-width:520px){.card{padding:20px}.wrap{padding:12px}h1{font-size:30px}}