:root{
/* ألوان عصرية وخفيفة — غيرها براحتك */
--brand: #6C5CE7;      /* بنفسجي فاخر */
--accent: #00E5A8;     /* تركواز نيون */
--ink: #0f172a;        /* نص داكن */
--muted:#64748b;       /* نص ثانوي */
--bg: #f5f7fb;         /* خلفية ناعمة */
--card:#ffffff;        /* كارت أبيض */
--ring: rgba(108,92,231,.25);
}
*{box-sizing:border-box}
body{
font-family:'Tajawal', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
background:
radial-gradient(1200px 600px at 120% -10%, rgba(108,92,231,.12), transparent 60%),
radial-gradient(800px 500px at -10% 110%, rgba(0,229,168,.12), transparent 60%),
var(--bg);
min-height:100vh;
display:flex;
flex-direction:column;
color:var(--ink);
}
/* Navbar نفس شكل صفحة الدخول */
.navbar{
backdrop-filter:saturate(140%) blur(10px);
background:rgba(255,255,255,.6)!important;
border-bottom:1px solid var(--border);
}
.navbar-brand{
font-weight:800; display:flex; align-items:center; gap:.5rem;
background: linear-gradient(45deg, var(--brand), var(--accent));
-webkit-background-clip:text; background-clip:text; color:transparent;
}
.nav-link{ font-weight:700 }
.nav-link.active{
background: linear-gradient(45deg, var(--brand), var(--accent));
-webkit-background-clip:text; background-clip:text; color:transparent !important;
}

.auth-wrap{ flex:1; display:grid; place-items:center; padding:48px 16px; }
.card-auth{
width:100%; max-width:520px;
background:var(--card);
border:1px solid #e9eef5;
border-radius:20px;
box-shadow: 0 20px 60px rgba(31,41,55,.08);
padding:28px;
position:relative;
overflow:hidden;
}
.card-auth:before{
content:""; position:absolute; inset:auto -40% -40% auto; width:320px; height:320px;
background: radial-gradient(closest-side, rgba(108,92,231,.15), transparent 70%);
filter: blur(8px); pointer-events:none;
}
.card-auth h3{ font-weight:800; margin-bottom:16px; }
.card-auth p{ color:var(--muted); margin:0 0 18px; }

.form-control{
border-radius:14px; padding:12px 14px;
border:1px solid #dfe7f3;
background:#fbfcfe;
transition: all .2s ease;
}
.form-control:focus{
border-color: var(--brand);
box-shadow: 0 0 0 6px var(--ring);
background:#fff;
}
.btn-brand{
background: linear-gradient(90deg, var(--brand), var(--accent));
border:0; border-radius:14px; padding:12px 18px; font-weight:800;
width:100%; box-shadow: 0 12px 30px rgba(108,92,231,.25);
transition: transform .08s ease, box-shadow .2s ease;
color:#fff;
}
.btn-brand:disabled{ opacity:.7; }
.btn-brand:hover{ transform: translateY(-1px); box-shadow: 0 16px 36px rgba(108,92,231,.32); }

.link-muted{ color:var(--brand); text-decoration:none; font-weight:700 }
.link-muted:hover{ opacity:.8 }

.alert{
border:0; border-radius:14px;
backdrop-filter: blur(6px);
}

footer{
border-top:1px solid #e9eef5;
background:#fff8;
backdrop-filter: blur(6px);
padding:22px 0;
}
.social a{
width:40px; height:40px; border-radius:12px;
display:inline-flex; align-items:center; justify-content:center;
background:#f3f6fb; color:var(--ink);
margin:0 6px; border:1px solid #e9eef5;
transition:all .2s ease;
}
.social a:hover{ transform:translateY(-2px); background:linear-gradient(90deg,var(--brand),var(--accent)); color:#fff; border-color:transparent; }

/* سبينر داخل الزر */
.spinner{
display:inline-block; width:16px; height:16px; margin-inline-start:8px;
border:2px solid #fff; border-top-color: transparent; border-radius:50%;
animation: spin 1s linear infinite;
vertical-align: middle;
}
@keyframes spin{ to{ transform: rotate(360deg); } }