@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@400;500;600;700&family=Space+Grotesk:wght@500;600&display=swap');
:root { color-scheme: dark; --cyan: #38e6ca; --blue: #5d8dff; --text: #f3f7ff; --muted: #8190a8; --line: rgba(159,184,219,.15); }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; min-height: 100dvh; color: var(--text); font-family: 'IBM Plex Sans Arabic', system-ui, sans-serif; background: radial-gradient(circle at 75% 0, #163451 0, transparent 38%), radial-gradient(circle at 5% 95%, rgba(56,230,202,.12), transparent 28%), #050b15; }
body::before { content: ''; position: fixed; inset: 0; pointer-events: none; opacity: .32; background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px); background-size: 42px 42px; mask-image: linear-gradient(to bottom, #000, transparent); }
.login-shell { min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; padding: 24px; position: relative; }
.login-card { width: min(440px, 100%); padding: 30px; border: 1px solid var(--line); border-radius: 22px; background: linear-gradient(145deg, rgba(16,31,52,.96), rgba(7,14,26,.96)); box-shadow: 0 28px 90px rgba(0,0,0,.38); }
.brand { display: flex; align-items: center; gap: 13px; direction: ltr; }
.logo-frame { width: 62px; height: 62px; flex: 0 0 62px; display: grid; place-items: center; border-radius: 12px; overflow: hidden; background: #fff; border: 1px solid rgba(245,187,45,.35); }
.logo-frame img { width: 58px; height: 58px; object-fit: contain; }
.brand p { margin: 0; color: var(--muted); font: 600 9px 'Space Grotesk'; letter-spacing: .15em; }
.brand h1 { margin: 5px 0 0; font: 600 21px 'Space Grotesk'; letter-spacing: -.03em; }
.lock { width: 52px; height: 52px; margin: 34px 0 16px auto; display: grid; place-items: center; color: var(--cyan); border: 1px solid rgba(56,230,202,.2); border-radius: 15px; background: rgba(56,230,202,.1); box-shadow: 0 0 28px rgba(56,230,202,.08); }
.lock svg { width: 25px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
h2 { margin: 0 0 6px; font-size: 25px; }
.intro { margin: 0 0 24px; color: var(--muted); font-size: 13px; line-height: 1.7; }
label { display: block; margin: 14px 0 7px; color: #aab7ca; font-size: 12px; }
input { width: 100%; height: 48px; padding: 0 14px; color: var(--text); font: inherit; direction: ltr; border: 1px solid var(--line); border-radius: 11px; outline: 0; background: rgba(3,9,18,.72); transition: .2s; }
input:focus { border-color: rgba(56,230,202,.65); box-shadow: 0 0 0 4px rgba(56,230,202,.1); }
.error { min-height: 20px; margin: 9px 0 3px; color: #ff8294; font-size: 12px; }
button { width: 100%; height: 48px; display: flex; align-items: center; justify-content: center; gap: 12px; color: #06131a; font: 700 14px 'IBM Plex Sans Arabic'; border: 0; border-radius: 11px; cursor: pointer; background: linear-gradient(135deg, #38e6ca, #69d4ff); box-shadow: 0 12px 32px rgba(56,230,202,.16); transition: transform .2s, box-shadow .2s; }
button:hover { transform: translateY(-2px); box-shadow: 0 16px 38px rgba(56,230,202,.24); }
button:disabled { opacity: .65; cursor: wait; }
button.loading i { animation: move .8s ease-in-out infinite alternate; }
@keyframes move { to { transform: translateX(-6px); } }
footer { margin-top: 25px; padding-top: 18px; color: #637187; border-top: 1px solid var(--line); text-align: center; direction: ltr; font: 500 10px 'Space Grotesk'; }
@media (max-width: 480px) { .login-shell { padding: 12px; }.login-card { padding: 22px 18px; border-radius: 17px; }.logo-frame { width: 52px; height: 52px; flex-basis: 52px; }.logo-frame img { width: 48px; height: 48px; }.brand h1 { font-size: 18px; }.lock { margin-top: 28px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }