/* ========== إعادة تعيين ومتغيرات الأساسيات ========== */
* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
    --primary: #818CF8;
    --primary-dark: #6366F1;
    --primary-glow: rgba(99,102,241,0.12);
    --accent: #A78BFA;
    --bg: #09090B;
    --bg-deep: #050506;
    --bg-light: #131316;
    --card: #111114;
    --card-hover: #18181C;
    --card-border: #1E1E24;
    --text: #F4F4F5;
    --text-secondary: #A1A1AA;
    --text-muted: #52525B;
    --success: #60A5FA;
    --success-bg: rgba(96,165,250,0.1);
    --warning: #FBBF24;
    --warning-bg: rgba(251,191,36,0.1);
    --error: #F87171;
    --error-bg: rgba(248,113,113,0.1);
    --border: #1E1E24;
    --border-light: #27272A;
    --shadow: 0 4px 24px rgba(0,0,0,0.6);
    --shadow-lg: 0 8px 40px rgba(0,0,0,0.7);
    --nav-bg: rgba(9,9,11,0.97);
    --topbar-bg: rgba(9,9,11,0.97);
}

body.light {
    --primary: #6366F1;
    --primary-dark: #4F46E5;
    --primary-glow: rgba(99,102,241,0.08);
    --accent: #7C3AED;
    --bg: #FAFAFA;
    --bg-deep: #F0F0F2;
    --bg-light: #FFFFFF;
    --card: #FFFFFF;
    --card-hover: #F5F5F5;
    --card-border: #E4E4E7;
    --text: #18181B;
    --text-secondary: #3F3F46;
    --text-muted: #71717A;
    --success: #3B82F6;
    --success-bg: rgba(59,130,246,0.08);
    --warning: #F59E0B;
    --warning-bg: rgba(245,158,11,0.08);
    --error: #EF4444;
    --error-bg: rgba(239,68,68,0.08);
    --border: #E4E4E7;
    --border-light: #D4D4D8;
    --shadow: 0 4px 24px rgba(0,0,0,0.05);
    --shadow-lg: 0 8px 40px rgba(0,0,0,0.08);
    --nav-bg: rgba(255,255,255,0.97);
    --topbar-bg: rgba(250,250,250,0.97);
}

html { scroll-behavior: smooth; }

body {
    font-family: 'Inter', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background: var(--bg);
    color: var(--text);
    min-height: 100vh;
    max-width: 480px;
    margin: 0 auto;
    overflow-x: hidden;
    direction: rtl;
    -webkit-font-smoothing: antialiased;
    transition: background 0.4s, color 0.4s;
}

.page { display: none; padding-bottom: 90px; }
.page.active { display: block; }

.input {
    width: 100%;
    padding: 15px 16px;
    background: var(--card);
    border: 1.5px solid var(--card-border);
    border-radius: 14px;
    color: var(--text);
    font-size: 15px;
    direction: rtl;
    transition: all 0.3s;
}
.input:focus {
    outline: none;
    border-color: var(--primary);
}
.input::placeholder { color: var(--text-muted); }

.btn-primary {
    padding: 18px;
    background: linear-gradient(135deg, #4F46E5, #6366F1);
    border: none;
    border-radius: 16px;
    color: white;
    font-size: 17px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-shadow: 0 8px 32px rgba(99,102,241,0.4);
    position: relative;
    overflow: hidden;
}
.btn-primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 40px rgba(99,102,241,0.5);
}
.btn-primary:active { transform: scale(0.97); }

.btn-full { width: 100%; }

.btn-back-text {
    display: block;
    width: 100%;
    padding: 14px;
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    margin-top: 8px;
    transition: color 0.3s;
}
.btn-back-text:hover { color: var(--text); }

.toggle-pass {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 4px;
    display: flex;
    align-items: center;
    transition: color 0.2s;
    flex-shrink: 0;
}
.toggle-pass:hover { color: var(--primary); }