html,body{margin:0;padding:0;background-color:#f0f4f8}body.login-page{min-height:100vh;display:flex;flex-direction:column;background-color:#f0f4f8}body.login-page main{flex:1;display:flex;flex-direction:column;justify-content:flex-start;align-items:center}.login-container{width:480px;max-width:90%;background-color:rgba(255,255,255,0.9);backdrop-filter:blur(10px);padding:40px;border-radius:24px;border:1px solid rgba(255,255,255,0.6);box-shadow:0 20px 40px rgba(0,0,0,0.08);text-align:center;margin-top:110px;margin-bottom:40px;position:relative;overflow:hidden;animation:fadeInUp 0.6s cubic-bezier(0.22,1,0.36,1)}@media (orientation:landscape){.login-container{margin-top:100px;margin-bottom:60px}}.login-container h1{font-size:28px;font-weight:800;color:#1565c0;margin-bottom:30px;letter-spacing:-0.5px}.error-message{color:#ef4444;background:#fef2f2;padding:10px;border-radius:8px;font-weight:700;margin-bottom:20px;border:1px solid #fecaca}.form-group{position:relative;margin-bottom:20px}.form-input{position:relative;z-index:1;width:100%;height:50px;padding:0 40px;font-size:16px;background-color:#f8fafc;border:2px solid transparent;border-radius:12px;box-sizing:border-box;text-align:center;transition:.3s;color:#1e293b;font-weight:500}.form-input::placeholder{text-align:center;color:#94a3b8;font-weight:400}.form-input:focus{outline:0;background-color:#fff;border-color:#4a90e2;box-shadow:0 0 0 4px rgba(74,144,226,0.1);transform:translateY(-2px)}.form-group svg{position:absolute;z-index:10;top:50%;right:15px;transform:translateY(-50%);fill:#94a3b8;width:22px;height:22px;pointer-events:none;transition:fill .3s;opacity:1!important}.form-input:focus+svg{fill:#4a90e2;opacity:1!important;z-index:11}.btn-login{width:100%;padding:14px 0;font-size:1.2em;font-weight:700;color:#fff;background:linear-gradient(135deg,#4a90e2 0%,#2c6cd4 100%);border:none;border-radius:50px;cursor:pointer;transition:.3s;box-shadow:0 4px 10px rgba(74,144,226,0.3)}.btn-login:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(74,144,226,0.4);filter:brightness(1.1)}.login-container,body,button,input{user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none}:root{--brand:#0f766e;--brand-contrast:#fff;--page-bg:#f6f7f9;--radius:14px;--shadow:0 10px 30px rgba(0,0,0,.08)}.hidden{display:none!important}body.offline{background:var(--page-bg);min-height:100vh;margin:0;display:grid;place-items:center;direction:rtl}.offline-card{background:#fff;width:min(92vw,520px);padding:24px;border-radius:calc(var(--radius) + 2px);box-shadow:var(--shadow);text-align:center}.offline-card h1{margin:0 0 6px;font-size:20px}.offline-card p{margin:0 0 14px;color:#333}.offline-actions{margin-top:14px;display:flex;gap:10px;justify-content:center}.offline-actions .btn{padding:10px 14px;border-radius:var(--radius);border:0;background:var(--brand);color:var(--brand-contrast);font-weight:700;box-shadow:var(--shadow);cursor:pointer}@media (max-width:768px){.login-container{margin-top:80px;margin-bottom:60px;padding:28px}}.sr-only{position:absolute!important;width:1px;height:1px;margin:0;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}@keyframes fadeInUp{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}