/* ═══════════════════════════════════════════════
   عفراء للتوظيف — المتغيرات والثيم
═══════════════════════════════════════════════ */
:root {
  --p:       #0d9488;
  --pd:      #0f766e;
  --pl:      #14b8a6;
  --acc:     #f59e0b;
  --accl:    #fbbf24;
  --danger:  #ef4444;
  --success: #22c55e;
  --info:    #3b82f6;
  --purple:  #8b5cf6;
  --bg:      #f0fdf9;
  --bgc:     #ffffff;
  --bgc2:    #f8fafc;
  --bgs:     #0f172a;
  --tx:      #0f172a;
  --tx2:     #475569;
  --tx3:     #94a3b8;
  --br:      #e2e8f0;
  --br2:     #cbd5e1;
  --sh:      0 1px 3px rgba(0,0,0,0.07), 0 4px 16px rgba(0,0,0,0.05);
  --shl:     0 8px 32px rgba(0,0,0,0.12);
  --r:       16px;
  --rs:      10px;
  --rl:      24px;
}

[data-theme="dark"] {
  --bg:   #0a0f1e;
  --bgc:  #131929;
  --bgc2: #1a2235;
  --tx:   #f1f5f9;
  --tx2:  #94a3b8;
  --tx3:  #64748b;
  --br:   #1e2d45;
  --br2:  #243349;
  --sh:   0 1px 3px rgba(0,0,0,0.3), 0 4px 16px rgba(0,0,0,0.2);
}

/* ═══ Reset ═══ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
html  { scroll-behavior: smooth; overscroll-behavior: none; }
body  {
  font-family: 'Cairo', sans-serif; background: var(--bg); color: var(--tx);
  min-height: 100vh; direction: rtl; overflow-x: hidden;
  transition: background .3s, color .3s;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overscroll-behavior: none;
}
button { cursor: pointer; font-family: 'Cairo', sans-serif; border: none; outline: none; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
input, textarea, select { font-family: 'Cairo', sans-serif; outline: none; touch-action: manipulation; }
a  { text-decoration: none; color: inherit; }
img { max-width: 100%; }

/* ═══ Scrollbar ═══ */
::-webkit-scrollbar       { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--br2); border-radius: 99px; }

/* ═══ Gradient Presets ═══ */
:root {
  --grad-p:       linear-gradient(135deg, var(--p), var(--pl));
  --grad-acc:     linear-gradient(135deg, var(--acc), var(--accl));
  --grad-danger:  linear-gradient(135deg, #ef4444, #f87171);
  --grad-success: linear-gradient(135deg, #22c55e, #4ade80);
  --grad-purple:  linear-gradient(135deg, var(--purple), #a78bfa);
  --grad-info:    linear-gradient(135deg, var(--info), #60a5fa);
  --grad-dark:    linear-gradient(145deg, #060d1a 0%, #0f1f35 60%, #060d1a 100%);
  --glow-p:       0 0 24px rgba(13,148,136,.22);
  --glow-acc:     0 0 24px rgba(245,158,11,.22);
  --shxl:         0 20px 60px rgba(0,0,0,.15), 0 4px 16px rgba(0,0,0,.08);
}

/* ═══ Keyframe Animations ═══ */
@keyframes spin      { to { transform: rotate(360deg); } }
@keyframes fadeUp    { from { opacity:0; transform:translateY(14px); } to { opacity:1; transform:translateY(0); } }
@keyframes fadeIn    { from { opacity:0; } to { opacity:1; } }
@keyframes scaleIn   { from { opacity:0; transform:scale(.94); } to { opacity:1; transform:scale(1); } }
@keyframes slideDown { from { opacity:0; transform:translateY(-10px); } to { opacity:1; transform:translateY(0); } }
@keyframes pulse2    { 0%,100% { transform:scale(1); } 50% { transform:scale(1.05); } }
@keyframes float     { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-6px); } }

/* ═══ Animation Utilities ═══ */
.fade-up   { animation: fadeUp   .38s cubic-bezier(.4,0,.2,1) both; }
.fade-in   { animation: fadeIn   .28s ease both; }
.scale-in  { animation: scaleIn  .32s cubic-bezier(.4,0,.2,1) both; }
.del1 { animation-delay:.06s; }
.del2 { animation-delay:.12s; }
.del3 { animation-delay:.18s; }
.del4 { animation-delay:.24s; }
.del5 { animation-delay:.30s; }

/* ═══ Utility ═══ */
.page  { display: none; }
.page.on { display: block; }
.spin  { display: inline-block; animation: spin .8s linear infinite; }
.div   { border: none; border-top: 1px solid var(--br); margin: 14px 0; }