:root{
  --bg:#0f172a;
  --card:#0c1430;
  --text:#e5e7eb;
  --muted:#94a3b8;
  --ring:#22d3ee55;
  --blue:#38bdf8;
  --ok:#22c55e;
  --bad:#ef4444;
  --gold:#facc15;
  --violet:#a855f7;
}
*{box-sizing:border-box}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:system-ui,-apple-system,'Segoe UI','Cairo',Arial;
}
.container{width:min(960px,98%);margin:auto}

/* الهيدر */
.header-center{text-align:center;padding:18px 0 10px}
.name{margin:0 0 .25rem;font-weight:900;font-size:2rem}
.phone-line{
  margin:0;
  color:#fff;
  font-weight:700;
  letter-spacing:.08em;
  font-size:1.35rem;
  line-height:1.2;
}
.title-en{
  margin:.3rem 0 0;
  font-weight:900;
  font-size:2.4rem;
  color:var(--blue);
}

/* المنطقة الرئيسية */
.slide-container{
  padding:20px 0 110px; /* مساحة للأسفل بسبب شريط التنقل */
}

/* الكارت */
.card{
  background:linear-gradient(180deg,var(--card),#0a1028);
  border:1px solid #18213a;
  border-radius:18px;
  padding:16px 16px 18px;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.top-line{
  border:3px solid var(--bad);
  border-radius:999px;
  padding:4px 0;
  text-align:center;
  font-weight:700;
  color:var(--bad);
  font-size:.9rem;
}
.en{
  margin:6px 0 2px;
  font-size:1.05rem;
  line-height:1.5;
  direction:ltr;
  font-weight:800;
}
.ar{
  margin:0;
  color:#d1d5db;
  font-size:1.02rem;
  line-height:1.6;
}

/* شريط التنقل أسفل الشاشة */
.nav-bar{
  position:fixed;
  bottom:0;
  left:0;
  right:0;
  background:#050816f0;
  border-top:1px solid #1f2937;
  backdrop-filter:blur(8px);
  z-index:50;
}
.nav-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:8px 0 10px;
}
.nav-btn{
  flex:1;
  border-radius:999px;
  border:1px solid #243047;
  background:#0a1224;
  color:#e5e7eb;
  padding:10px 14px;
  font-weight:800;
  font-size:1rem;
  cursor:pointer;
}
.nav-btn:disabled{
  opacity:.4;
  cursor:not-allowed;
}

/* دائرة الأسكور */
.score-circle{
  width:70px;
  height:70px;
  border-radius:50%;
  background:radial-gradient(circle at 30% 20%,#e9d5ff, #7c3aed);
  border:3px solid var(--violet);
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 0 20px rgba(168,85,247,.55);
}
#score-value{
  font-weight:900;
  font-size:1.4rem;
  color:#fff;
}

/* كارت الاختبار */
.test-card .top-line{display:none;}
.test-title{
  margin:0 0 4px;
  text-align:center;
  font-size:1.4rem;
  color:var(--gold);
  font-weight:900;
}
.test-item{
  margin-top:10px;
  padding:10px 12px;
  border-radius:14px;
  background:#050b1f;
  border:1px solid #1f2937;
}
.test-label{
  font-size:.85rem;
  color:var(--muted);
  margin-bottom:4px;
}
.test-en{ /* الجملة الإنجليزية فى شاشة الاختبار */
  margin:2px 0;
}
.test-input{
  width:100%;
  margin-top:8px;
  padding:8px 10px;
  border-radius:12px;
  border:1px solid #243047;
  background:#020617;
  color:var(--blue);
  font-size:1.05rem;
  font-weight:800;
  direction:ltr;
}
.test-input::placeholder{color:#64748b;font-weight:600}

/* أزرار الاختبار */
.test-actions{
  margin-top:14px;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.btn-wide{
  width:100%;
  border-radius:999px;
  border:1px solid transparent;
  padding:10px 14px;
  font-weight:900;
  font-size:1rem;
  cursor:pointer;
}
.btn-yellow{
  background:var(--gold);
  color:#000;
}
.btn-green{
  background:#16a34a;
  color:#e5fdf0;
}
.btn-blue{
  background:#38bdf8;
  color:#022c3a;
}

/* صندوق الدرجة */
.test-score-box{
  margin-top:4px;
  border-radius:12px;
  padding:8px;
  border:1px solid #22c55e;
  text-align:center;
  font-weight:800;
  color:#bbf7d0;
  background:rgba(22,163,74,.15);
  font-size:.95rem;
}
.test-score-value{
  font-weight:900;
}

/* التغذية الراجعة تحت كل سؤال */
.feedback{
  margin-top:6px;
  font-size:1.05rem; /* مساوية لحجم خط الكتابة داخل المربع الأزرق */
}
.feedback-wrong{
  color:var(--bad);
  font-weight:900;
}
.feedback-correct{
  color:var(--ok);
  font-weight:900;
}

/* الفوتر */
.footer{
  border-top:1px solid #1f2937;
  color:var(--muted);
  text-align:center;
  padding:18px 0 80px; /* مساحة زيادة لعدم التعارض مع الشريط */
}

@media (max-width:480px){
  .title-en{font-size:2rem}
  .nav-inner{gap:10px}
  .score-circle{
    width:64px;
    height:64px;
  }
  #score-value{font-size:1.25rem}
}

/* من القالب الأصلي: الكروت + أزرار التسجيل + منطقة الكتابة */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px;padding:20px 0 34px}
.card{background:linear-gradient(180deg,var(--card),#0a1028);border:1px solid #18213a;border-radius:18px;padding:16px;display:flex;flex-direction:column;gap:10px}
.top-line{border:3px solid var(--bad);border-radius:999px;padding:4px 0;text-align:center;font-weight:700;color:var(--bad)}
.en{margin:0;font-size:1.05rem;line-height:1.45;direction:ltr;font-weight:800;cursor:pointer;transition:color .15s ease}
.en.reading{color:#38bdf8}
.ar{margin:0;color:#d1d5db;font-size:1.02rem;line-height:1.5}

.controls{display:flex;gap:9px;flex-wrap:wrap;align-items:center;justify-content:flex-end}
.btn{border:1px solid #243047;background:#0a1224;color:#e5e7eb;border-radius:14px;padding:6px 14px;font-weight:700;cursor:pointer;font-size:.7rem;display:flex;align-items:center;gap:4px}
.btn.rec{background:rgba(239,68,68,.13);border-color:#ef4444}
.btn.stop{background:rgba(252,211,77,.05);border-color:#f59e0b}
.btn.play{background:rgba(56,189,248,.05);border-color:#38bdf8}
.btn.compare{background:rgba(59,130,246,.03);border-color:#60a5fa}
.btn:disabled{opacity:.45;cursor:not-allowed}
.duration{font-variant-numeric:tabular-nums;font-size:.7rem;color:#e5e7eb;margin-inline-start:4px}
audio{display:none}

/* practice area as contenteditable */
.practice{border:1px solid #243047;background:#0a1224;color:#e5e7eb;border-radius:14px;padding:10px 12px;font-weight:900;font-size:1rem;direction:ltr;min-height:44px}
.practice:empty:before{content:attr(data-placeholder);color:#64748b;font-weight:600}
.practice .ok{color:var(--ok)}
.practice .bad{color:var(--bad)}

/* praise badge */
.praise{display:none;margin-top:6px;background:rgba(250,204,21,.08);border:1px solid #fde68a;color:var(--gold);padding:6px 10px;border-radius:999px;font-weight:900;text-align:center}
.praise.show{display:block;animation:fade 1.1s ease both}
@keyframes fade{0%{opacity:0;transform:translateY(-4px)}20%{opacity:1}100%{opacity:0;transform:translateY(-6px)}}

.footer{border-top:1px solid #1f2937;color:var(--muted);text-align:center;padding:18px 0 40px}
@media (max-width:480px){
  .title-en{font-size:2rem}
  .title-ar{font-size:1.8rem}
  .grid{grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
  .controls{gap:6px}
}


/* تعديلات بناءً على طلب المستر:
   - أزرار التسجيل/التشغيل/المقارنة فى منتصف الكارت
   - بدون تغيير أى إعدادات أخرى */
.controls{
  justify-content:center;
}


/* جعل أزرار شاشة "اختبر نفسك" فى أعلى الكارت */
.test-card .test-actions{
  order:-1;
  margin-bottom:12px;
}


/* جعل جملة التصحيح الإنجليزية تبدأ من اليسار فى شاشة التسميع */
.test-card .feedback{
  direction:ltr;
  text-align:left;
}