:root { --primary:#1d6fd8; --primary-dark:#1558ad; --dark:#0b2545; --text:#1e3a5f; --muted:#5b7a99; --border:#d6e4f5; --error:#d64545; --radius:12px; }
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:'Tajawal',sans-serif; background:linear-gradient(135deg,#f0f6ff 0%,#dbe9fb 60%,#c9ddf6 100%); min-height:100vh; display:flex; align-items:center; justify-content:center; color:var(--text); }
.login-wrapper { width:100%; max-width:420px; padding:20px; }
.login-card { background:#fff; border-radius:20px; padding:44px 38px; box-shadow:0 20px 60px rgba(11,37,69,.14); }
.logo-area { text-align:center; margin-bottom:30px; }
.logo-icon { width:70px; height:70px; background:linear-gradient(135deg,var(--primary),var(--primary-dark)); border-radius:50%; display:flex; align-items:center; justify-content:center; margin:0 auto 14px; font-size:30px; color:#fff; }
.logo-area h1 { font-size:22px; font-weight:700; color:var(--dark); margin-bottom:4px; }
.logo-area p { font-size:14px; color:var(--muted); }
.form-group { margin-bottom:18px; }
label { display:block; font-size:14px; font-weight:500; margin-bottom:8px; }
input[type="text"], input[type="password"] { width:100%; padding:13px 16px; border:2px solid var(--border); border-radius:var(--radius); font-family:inherit; font-size:15px; color:var(--dark); background:#f8fbff; outline:none; transition:border-color .2s, box-shadow .2s; }
input:focus { border-color:var(--primary); box-shadow:0 0 0 4px rgba(29,111,216,.12); background:#fff; }
.btn-login { width:100%; padding:14px; background:linear-gradient(135deg,var(--primary),var(--primary-dark)); color:#fff; border:none; border-radius:var(--radius); font-family:inherit; font-size:16px; font-weight:700; cursor:pointer; margin-top:6px; }
.btn-login:hover { opacity:.92; }
.error-msg { background:#fef2f2; border:1px solid #fecaca; color:var(--error); padding:12px 16px; border-radius:var(--radius); font-size:14px; margin-bottom:18px; text-align:center; }
.ok-msg { background:#e8f5e9; border:1px solid #c8e6c9; color:#2e7d32; padding:12px 16px; border-radius:var(--radius); font-size:14px; margin-bottom:18px; text-align:center; }
.footer-note { text-align:center; margin-top:22px; font-size:12px; color:var(--muted); }