/* ==========================================================================
   مكوّنات: الاختبارات، الدروس، النتائج، لوحة التدريب
   ========================================================================== */

/* ===== الصفحة الرئيسية: البطل ===== */
.hero{
  position:relative; overflow:hidden;
  background:radial-gradient(1100px 480px at 80% -10%, var(--brand-100), transparent),
             radial-gradient(900px 420px at 5% 10%, var(--quant-100), transparent);
  padding-block:64px 40px;
}
.hero-grid{ display:grid; grid-template-columns:1.1fr .9fr; gap:40px; align-items:center; }
.hero-badges{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:18px; }
.hero p.lead{ font-size:1.12rem; color:var(--ink-600); max-width:52ch; }
.hero-actions{ display:flex; flex-wrap:wrap; gap:14px; margin-top:26px; }
.hero-stats{ display:flex; gap:28px; margin-top:34px; flex-wrap:wrap; }
.hero-stat b{ display:block; font-family:var(--font-head); font-size:1.5rem; color:var(--ink-900); }
.hero-stat span{ font-size:.82rem; color:var(--ink-500); }

.hero-visual{
  background:#fff; border-radius:var(--radius-xl); padding:26px; box-shadow:var(--shadow-lg);
  border:1px solid var(--ink-100);
}
.mini-report-row{ display:flex; align-items:center; gap:12px; padding:11px 0; border-bottom:1px dashed var(--ink-200); }
.mini-report-row:last-child{ border-bottom:none; }
.mini-report-row .dot{ width:10px; height:10px; border-radius:50%; flex:none; }
.mini-bar{ flex:1; height:8px; border-radius:999px; background:var(--ink-100); overflow:hidden; }
.mini-bar > i{ display:block; height:100%; border-radius:999px; }
.mini-report-row .pct{ font-weight:800; font-size:.85rem; color:var(--ink-700); width:34px; text-align:left; }

/* ===== مسار التعلم / خطوات ===== */
.steps{ counter-reset:step; display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.step-card{ position:relative; margin-top:16px; }
.step-card::before{
  counter-increment:step; content:counter(step);
  position:absolute; top:-16px; inset-inline-start:20px;
  width:34px; height:34px; border-radius:10px; background:var(--brand-600); color:#fff;
  display:flex; align-items:center; justify-content:center; font-weight:900; font-family:var(--font-head);
  box-shadow:0 4px 10px rgba(76,52,184,.35); z-index:2;
}

/* ===== بطاقات القسمين (كمي/لفظي) ===== */
.track-card{ border-radius:var(--radius-lg); padding:30px; color:#fff; position:relative; overflow:hidden; }
.track-card.quant{ background:linear-gradient(150deg,var(--quant-700),var(--quant-500)); }
.track-card.verbal{ background:linear-gradient(150deg,var(--verbal-700),var(--verbal-500)); }
.track-card h3{ color:#fff; }
.track-card p{ color:rgba(255,255,255,.88); }
.track-card .btn{ margin-top:10px; }
.track-card ul{ color:rgba(255,255,255,.92); list-style:none; padding:0; margin:16px 0; }
.track-card ul li{ padding:6px 0 6px 0; display:flex; align-items:center; gap:8px; font-weight:600; font-size:.93rem; }
.track-card ul li::before{ content:'✓'; font-weight:900; }

/* ===== شبكة المهارات ===== */
.skill-card{ display:flex; flex-direction:column; height:100%; }
.skill-card .skill-icon{
  width:46px; height:46px; border-radius:12px; display:flex; align-items:center; justify-content:center;
  font-size:1.35rem; margin-bottom:14px;
}
.skill-card.quant .skill-icon{ background:var(--quant-100); color:var(--quant-700); }
.skill-card.verbal .skill-icon{ background:var(--verbal-100); color:var(--verbal-700); }
.skill-card .spacer{ flex:1; }

/* ===== صفحة الاختبار ===== */
.quiz-shell{ max-width:760px; margin-inline:auto; }
.quiz-topbar{ display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:10px; }
.quiz-topbar .timer{
  font-family:var(--font-head); font-weight:800; background:var(--ink-100); border-radius:999px;
  padding:8px 16px; font-size:.92rem; color:var(--ink-700); display:flex; align-items:center; gap:6px;
}
.quiz-topbar .timer.low{ background:var(--danger-100); color:var(--danger-600); }
.quiz-meta{ display:flex; justify-content:space-between; font-size:.83rem; color:var(--ink-500); margin:10px 2px 22px; font-weight:700; }

.question-card{ background:#fff; border-radius:var(--radius-lg); border:1px solid var(--ink-100); box-shadow:var(--shadow-sm); padding:28px; }
.question-skill-tag{ font-size:.78rem; font-weight:800; color:var(--brand-600); margin-bottom:10px; display:block; }
.question-stem{ font-size:1.14rem; font-weight:700; color:var(--ink-900); margin-bottom:22px; line-height:1.8; white-space:pre-line; }
.question-passage{
  background:var(--ink-50); border:1px solid var(--ink-100); border-radius:var(--radius-md);
  padding:18px 20px; margin-bottom:20px; font-size:.98rem; color:var(--ink-700); line-height:2;
}

.choices{ display:flex; flex-direction:column; gap:12px; margin-bottom:6px; }
.choice{
  display:flex; align-items:center; gap:14px; text-align:start;
  border:2px solid var(--ink-200); background:#fff; border-radius:var(--radius-md);
  padding:14px 18px; cursor:pointer; font-size:1rem; font-weight:600; color:var(--ink-800);
  transition:border-color .15s, background .15s, transform .1s;
  width:100%;
}
.choice:hover{ border-color:var(--brand-400); background:var(--brand-50); }
.choice .choice-letter{
  width:30px; height:30px; border-radius:9px; background:var(--ink-100); color:var(--ink-600);
  display:flex; align-items:center; justify-content:center; font-weight:900; flex:none; font-family:var(--font-head);
  transition:background .15s,color .15s;
}
.choice.selected{ border-color:var(--brand-500); background:var(--brand-50); box-shadow:var(--shadow-glow); }
.choice.selected .choice-letter{ background:var(--brand-500); color:#fff; }
.choice.correct{ border-color:var(--success-600); background:var(--success-100); }
.choice.correct .choice-letter{ background:var(--success-600); color:#fff; }
.choice.incorrect{ border-color:var(--danger-600); background:var(--danger-100); }
.choice.incorrect .choice-letter{ background:var(--danger-600); color:#fff; }
.choice[disabled]{ cursor:default; }

.quiz-actions{ display:flex; justify-content:space-between; align-items:center; margin-top:24px; gap:12px; }
.quiz-dots{ display:flex; gap:6px; flex-wrap:wrap; justify-content:center; margin:18px 0; }
.quiz-dots span{ width:9px; height:9px; border-radius:50%; background:var(--ink-200); display:block; }
.quiz-dots span.done{ background:var(--brand-400); }
.quiz-dots span.current{ background:var(--brand-600); width:22px; border-radius:5px; }

.feedback-box{ margin-top:20px; border-radius:var(--radius-md); padding:18px 20px; display:none; }
.feedback-box.show{ display:block; }
.feedback-box.correct{ background:var(--success-100); border:1px solid #9adfc0; }
.feedback-box.incorrect{ background:var(--danger-100); border:1px solid #f3b4bf; }
.feedback-head{ display:flex; align-items:center; gap:8px; font-weight:900; font-family:var(--font-head); margin-bottom:6px; }
.feedback-box.correct .feedback-head{ color:var(--success-600); }
.feedback-box.incorrect .feedback-head{ color:var(--danger-600); }
.feedback-guidance{ font-size:.95rem; color:var(--ink-700); line-height:1.85; }
.feedback-guidance b{ color:var(--ink-900); }

/* ===== صفحة النتائج ===== */
.score-hero{
  text-align:center; padding:40px 20px; border-radius:var(--radius-xl);
  background:linear-gradient(150deg,var(--brand-700),var(--brand-500)); color:#fff; margin-bottom:36px;
}
.score-ring{
  width:160px; height:160px; border-radius:50%; margin:0 auto 16px; position:relative;
  display:flex; align-items:center; justify-content:center;
  background:conic-gradient(#fff calc(var(--pct,0)*1%), rgba(255,255,255,.25) 0);
}
.score-ring::before{ content:''; position:absolute; inset:10px; border-radius:50%; background:var(--brand-600); }
.score-ring b{ position:relative; font-family:var(--font-head); font-size:2.1rem; }
.score-ring span{ position:relative; font-size:.72rem; opacity:.85; }

.skill-bar-row{ display:grid; grid-template-columns:200px 1fr 54px; gap:14px; align-items:center; padding:11px 0; }
.skill-bar-row .name{ font-weight:700; font-size:.92rem; color:var(--ink-800); }
.skill-bar-row .bar-track{ height:12px; border-radius:999px; background:var(--ink-100); overflow:hidden; }
.skill-bar-row .bar-fill{ height:100%; border-radius:999px; }
.skill-bar-row .val{ font-weight:800; font-family:var(--font-head); font-size:.9rem; text-align:left; }

.level-tag{ font-size:.72rem; font-weight:800; padding:3px 10px; border-radius:999px; }
.level-strong{ background:var(--success-100); color:var(--success-600); }
.level-mid{ background:var(--warning-100); color:var(--warning-600); }
.level-weak{ background:var(--danger-100); color:var(--danger-600); }

.plan-item{ display:flex; gap:16px; align-items:flex-start; padding:18px 0; border-bottom:1px solid var(--ink-100); }
.plan-item:last-child{ border-bottom:none; }
.plan-rank{
  width:36px; height:36px; border-radius:10px; background:var(--brand-100); color:var(--brand-700);
  display:flex; align-items:center; justify-content:center; font-weight:900; font-family:var(--font-head); flex:none;
}
.plan-item .plan-title{ font-weight:800; color:var(--ink-900); margin-bottom:4px; }
.plan-item .plan-desc{ font-size:.9rem; color:var(--ink-500); margin:0; }

/* ===== صفحة الدرس ===== */
.lesson-layout{ display:grid; grid-template-columns:250px 1fr; gap:36px; align-items:start; }
.lesson-toc{
  position:sticky; top:90px; background:#fff; border:1px solid var(--ink-100); border-radius:var(--radius-md);
  padding:16px; font-size:.88rem;
}
.lesson-toc a{ display:block; padding:8px 10px; border-radius:8px; color:var(--ink-600); font-weight:700; }
.lesson-toc a:hover, .lesson-toc a.active{ background:var(--brand-100); color:var(--brand-700); }
.lesson-hero{ padding:34px 0 10px; }
.lesson-hero .kicker{ font-weight:800; color:var(--brand-600); font-size:.85rem; margin-bottom:8px; }
.lesson-hero.quant .kicker{ color:var(--quant-600); }
.lesson-hero.verbal .kicker{ color:var(--verbal-600); }
.lesson-hero.foundation{ background:radial-gradient(900px 380px at 85% -10%, var(--brand-100), transparent); }
.lesson-hero.foundation .kicker{ color:var(--brand-600); }

.example-box{
  border:1px solid var(--ink-150,var(--ink-200)); border-radius:var(--radius-lg); overflow:hidden; margin:22px 0; background:#fff;
}
.example-head{ background:var(--brand-600); color:#fff; padding:12px 20px; font-weight:800; font-family:var(--font-head); }
.example-body{ padding:20px; }
.trace-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin:16px 0; }
.trace-step{ background:var(--ink-50); border-radius:var(--radius-sm); padding:12px 14px; border-top:3px solid var(--brand-500); }
.trace-step b{ display:block; font-size:.78rem; color:var(--brand-700); margin-bottom:4px; font-family:var(--font-head); }
.trace-step p{ margin:0; font-size:.87rem; color:var(--ink-700); }

.formula-box{
  background:var(--ink-900); color:#fff; border-radius:var(--radius-md); padding:16px 20px; margin:16px 0;
  font-family:'Cairo',monospace; font-size:1.05rem; text-align:center; letter-spacing:.3px;
}

.lesson-nav-footer{ display:flex; justify-content:space-between; gap:14px; margin-top:44px; flex-wrap:wrap; }

/* ===== لوحة التدريب / التقدم ===== */
.dash-stat-card{ text-align:center; }
.dash-stat-card b{ display:block; font-family:var(--font-head); font-size:1.9rem; color:var(--ink-900); }
.dash-stat-card span{ font-size:.82rem; color:var(--ink-500); }

.checklist-item{ display:flex; align-items:center; gap:12px; padding:13px 0; border-bottom:1px solid var(--ink-100); }
.checklist-item:last-child{ border-bottom:none; }
.checklist-item .chk{ width:24px; height:24px; border-radius:7px; border:2px solid var(--ink-300); flex:none; display:flex; align-items:center; justify-content:center; }
.checklist-item.done .chk{ background:var(--success-600); border-color:var(--success-600); color:#fff; }

.empty-state{ text-align:center; padding:60px 20px; }
.empty-state .emoji{ font-size:2.6rem; margin-bottom:14px; }

/* ===== استجابة ===== */
@media (max-width:980px){
  .hero-grid{ grid-template-columns:1fr; }
  .hero-visual{ order:-1; }
  .steps{ grid-template-columns:repeat(2,1fr); }
  .lesson-layout{ grid-template-columns:1fr; }
  .lesson-toc{ position:static; display:flex; overflow-x:auto; gap:4px; padding:10px; }
  .lesson-toc a{ white-space:nowrap; }
  .trace-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:760px){
  .steps{ grid-template-columns:1fr; }
  .score-hero{ padding:30px 16px; }
  .skill-bar-row{ grid-template-columns:1fr; gap:6px; }
  .skill-bar-row .val{ text-align:right; }
  .question-card{ padding:18px; border-radius:var(--radius-md); }
  .question-stem{ font-size:1.05rem; }
  .quiz-actions{ flex-direction:column-reverse; }
  .quiz-actions .btn{ width:100%; padding-block:15px; }
  .trace-grid{ grid-template-columns:1fr; }
  .plan-item{ flex-direction:column; }
  .choice{ padding:15px 16px; min-height:52px; }
  .btn{ min-height:44px; }
  h1{ line-height:1.3; }
  .hero{ padding-block:36px 28px; }
}

/* =========================================================================
   شريط التنقل السفلي (الجوال فقط)
   ========================================================================= */
.bottom-nav{
  position:fixed; inset-inline:0; bottom:0; z-index:200;
  display:flex; background:rgba(255,255,255,.96); backdrop-filter:blur(14px) saturate(180%);
  border-top:1px solid var(--ink-200); box-shadow:0 -4px 20px rgba(36,26,94,.08);
  padding-bottom:env(safe-area-inset-bottom);
}
.bottom-nav-item{
  flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:3px; padding:9px 4px 8px; color:var(--ink-500); text-decoration:none;
  transition:color .15s, transform .1s; position:relative;
}
.bottom-nav-item:active{ transform:scale(.94); }
.bottom-nav-item .bn-icon{ display:flex; width:22px; height:22px; }
.bottom-nav-item .bn-icon svg{ width:100%; height:100%; }
.bottom-nav-item .bn-label{ font-size:.68rem; font-weight:700; }
.bottom-nav-item.active{ color:var(--brand-600); }
.bottom-nav-item.active::before{
  content:''; position:absolute; top:2px; width:28px; height:3px; border-radius:99px;
  background:var(--brand-500);
}

/* =========================================================================
   ورقة منزلقة عامة (تُستخدم لقائمة "المزيد" ونافذة رقم الاسترجاع)
   ========================================================================= */
.sheet-overlay{
  position:fixed; inset:0; z-index:300; background:rgba(25,21,39,.5);
  display:flex; align-items:flex-end; justify-content:center;
  opacity:0; pointer-events:none; transition:opacity .2s ease;
}
.sheet-overlay.open{ opacity:1; pointer-events:auto; }
.sheet-panel{
  width:100%; max-width:520px; background:#fff; border-radius:24px 24px 0 0;
  padding:14px 22px calc(26px + env(safe-area-inset-bottom));
  transform:translateY(100%); transition:transform .28s cubic-bezier(.2,.8,.2,1);
  max-height:82vh; overflow-y:auto; position:relative;
  box-shadow:0 -10px 40px rgba(36,26,94,.25);
}
.sheet-overlay.open .sheet-panel{ transform:translateY(0); }
.sheet-handle{ width:42px; height:5px; border-radius:99px; background:var(--ink-200); margin:0 auto 16px; }
.sheet-close-x{
  position:absolute; top:10px; left:12px; width:44px; height:44px; border-radius:50%;
  border:none; background:var(--ink-100); color:var(--ink-600); font-size:.9rem; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
}
@media (min-width:761px){
  .sheet-overlay{ align-items:center; }
  .sheet-panel{ border-radius:var(--radius-xl); max-height:88vh; }
}

.more-sheet-grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.more-sheet-item{
  display:flex; align-items:center; gap:10px; padding:14px 14px; border-radius:var(--radius-md);
  background:var(--ink-50); color:var(--ink-800); font-weight:700; font-size:.92rem; text-decoration:none;
  border:1px solid transparent;
}
.more-sheet-item span{ font-size:1.1rem; }
.more-sheet-item.active{ background:var(--brand-100); color:var(--brand-700); border-color:var(--brand-300); }

/* =========================================================================
   نافذة رقم استرجاع التقدم
   ========================================================================= */
.sync-panel h3{ margin-bottom:6px; }
.sync-code-display{
  font-family:var(--font-head); font-size:1.55rem; font-weight:800; letter-spacing:2px;
  text-align:center; background:var(--brand-50); color:var(--brand-700);
  border:1.5px dashed var(--brand-300); border-radius:var(--radius-md);
  padding:18px 10px; margin:16px 0; direction:ltr;
}
.sync-divider{
  display:flex; align-items:center; gap:12px; margin:22px 0 14px; color:var(--ink-400);
  font-size:.82rem; font-weight:700;
}
.sync-divider::before, .sync-divider::after{ content:''; flex:1; height:1px; background:var(--ink-200); }
.sync-input{
  width:100%; padding:14px 16px; border:2px solid var(--ink-200); border-radius:var(--radius-md);
  font-size:1rem; text-align:center; direction:ltr; font-family:var(--font-head);
}
.sync-input:focus{ outline:none; border-color:var(--brand-400); }
.sync-status{ margin-top:10px; font-size:.85rem; font-weight:700; text-align:center; min-height:1.2em; }
.sync-status.success{ color:var(--success-600); }
.sync-status.error{ color:var(--danger-600); }

@media (min-width:761px){
  .bottom-nav{ display:none; }
}

/* =========================================================================
   كتلة الاختبار القبلي/البعدي
   ========================================================================= */
.assess-card{
  border-radius:var(--radius-lg); padding:24px 26px; margin:18px 0 30px;
  border:1.5px dashed var(--brand-300); background:var(--brand-50);
}
.assess-card.done{ border-style:solid; border-color:var(--ink-100); background:#fff; box-shadow:var(--shadow-sm); }
.assess-score{ font-size:1.05rem; font-weight:700; color:var(--ink-900); margin:10px 0 0; }
.assess-skip-note{ padding:14px; }

.compare-row{ display:grid; grid-template-columns:110px 1fr 46px; align-items:center; gap:12px; padding:8px 0; }
.compare-row span:first-child{ font-weight:700; font-size:.88rem; color:var(--ink-700); }
.compare-row .bar-track{ height:11px; border-radius:999px; background:var(--ink-100); overflow:hidden; display:block; }
.compare-row .bar-fill{ height:100%; border-radius:999px; display:block; transition:width .5s ease; }
.compare-row b{ font-family:var(--font-head); font-size:.92rem; text-align:left; }
.compare-delta{ margin:14px 0 0; font-weight:800; font-size:.95rem; padding:10px 14px; border-radius:var(--radius-sm); text-align:center; }
.compare-delta.up{ background:var(--success-100); color:var(--success-600); }
.compare-delta.down{ background:var(--danger-100); color:var(--danger-600); }
.compare-delta.flat{ background:var(--warning-100); color:var(--warning-600); }

@media (max-width:760px){
  .assess-card{ padding:18px; }
  .compare-row{ grid-template-columns:90px 1fr 40px; gap:8px; }
}