:root{--bg:oklch(0.975 0.002 60);--ink:oklch(0.17 0.006 60);--or:oklch(0.68 0.19 45);--orT:oklch(0.95 0.035 50);--orD:oklch(0.52 0.16 42);--mu:oklch(0.48 0.01 60);--ln:oklch(0.91 0.004 60);--sf:oklch(0.96 0.003 60);--rd:oklch(0.55 0.19 28);--rdT:oklch(0.96 0.03 28)}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font-family:'IBM Plex Sans Arabic','IBM Plex Sans',system-ui,sans-serif;-webkit-font-smoothing:antialiased;min-height:100vh;display:flex;flex-direction:column}
a{color:var(--orD)}a:hover{color:var(--ink)}
.bar{height:64px;display:flex;align-items:center;padding:0 18px;background:var(--ink);color:#fff}
.brand{display:flex;align-items:center;gap:10px;font-family:'IBM Plex Sans',sans-serif;font-weight:600;letter-spacing:.14em;font-size:15px}
.brand b{color:var(--or);font-weight:600}
.mark{width:32px;height:32px;flex:none;display:block;background:url(/assets/brand/falak-mark-light.svg) center/contain no-repeat}
.mark i{display:none}
.wrap{flex:1;display:flex;align-items:center;justify-content:center;padding:24px 16px}
.card{width:min(460px,100%);background:#fff;border:1px solid var(--ln);border-radius:22px;padding:28px 24px;display:flex;flex-direction:column;gap:12px;animation:up .35s cubic-bezier(.2,.8,.2,1) both}
h1{margin:0;font-size:24px}
.eyebrow{margin:0;font-size:13px;font-weight:600;color:var(--orD)}
.muted{margin:0;color:var(--mu);line-height:1.7;font-size:14px}
.small{font-size:13px}
.alert{margin:0;padding:12px 14px;border-radius:12px;background:var(--rdT);color:var(--rd);font-size:14px;font-weight:600;line-height:1.6}
.form{display:flex;flex-direction:column;gap:12px;margin-top:4px}
label{display:flex;flex-direction:column;gap:6px}
label span{font-size:13px;font-weight:600}
input,select{height:46px;border-radius:12px;border:1px solid var(--ln);background:#fff;padding:0 14px;font-size:15px;font-family:inherit;color:var(--ink);outline:none}
input:focus,select:focus{border-color:var(--ink)}
.btn{height:48px;border-radius:12px;border:none;font-family:inherit;font-size:15px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;text-decoration:none;cursor:pointer}
.btn.primary{background:var(--or);color:var(--ink)}
.inline{margin:0}
.link{border:none;background:none;padding:0;color:var(--mu);font-family:inherit;font-size:13px;text-decoration:underline;cursor:pointer}
.spinner{width:34px;height:34px;border-radius:50%;border:3px solid var(--sf);border-top-color:var(--or);animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes up{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}