: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:560px;
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:hover{ transform: translateY(-1px); box-shadow: 0 16px 36px rgba(108,92,231,.32); }
.btn-brand:disabled{ opacity:.7; }

.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); } }