/* Scoped styles under .examApp-root */
.examApp-root{
    --primary:#005b99;
    --accent:#007acc;
    --danger:#d9534f;
    --bg:#f4f9ff;
    font-family: "Cairo", Tahoma, sans-serif;
    direction: rtl;
    color: #333;
    background: var(--bg);
    box-sizing: border-box;
    padding: 12px;
    min-height: 100vh;
  }
  
  .examApp-root .container{
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 10px;
    height: 100vh;
  }
  
  /* sidebar */
  .examApp-root #sidebar{
    background: #fff;
    padding: 12px;
    border-radius: 8px;
    overflow-y: auto;
    text-align: center;
    box-shadow: 0 2px 6px rgba(0,0,0,0.04);
  }
  .examApp-root #sidebar h4{ margin:6px 0 12px; color:var(--primary); }
  .examApp-root #sidebar ul{ list-style:none; padding:0; margin:0; }
  .examApp-root #sidebar li{
    padding:8px;
    border-bottom:1px solid #eee;
    font-size:14px;
    cursor:pointer;
    transition:all .16s ease;
  }
  .examApp-root #sidebar li:hover{
    background:#e6f2ff;
    transform:translateY(-2px);
    color:var(--primary);
    font-weight:700;
    border-radius:6px;
  }

  /* حالة العنصر النشط في الشريط الجانبي */
.examApp-root #sidebar li.active{
  background: #dff2ff;
  color: var(--primary);
  font-weight: 700;
  transform: translateY(-2px);
  border-radius: 6px;
}

  
  /* main area */
  .examApp-root #quizArea{
    background:#fff;
    border-radius:8px;
    padding:20px;
    overflow:auto;
    text-align:right;
    box-shadow:0 2px 8px rgba(0,0,0,0.04);
    display:flex;
    flex-direction:column;
    height: calc(100vh - 24px);
  }
  .examApp-root .quizTitle{
    color:var(--primary);
    font-size:20px;
    margin:0 0 10px;
    text-align:center;
    flex: 0 0 auto;
  }
  
  /* question card */
  .examApp-root .question{
    display:none;
    margin:12px 0;
    padding:12px;
    border-radius:8px;
    background:#fbfeff;
    box-shadow:0 1px 4px rgba(0,0,0,0.03);
    flex: 0 0 auto;
  }
  .examApp-root .question.active{ display:block; animation:fadeIn .22s ease; }
  @keyframes fadeIn{ from{opacity:0; transform:translateX(12px);} to{opacity:1; transform:none;} }
  
  .examApp-root .question h4{ margin:0 0 10px; color:#222; font-size:16px; }
  .examApp-root .options label{ display:block; margin:8px 0; cursor:pointer; padding:6px; border-radius:6px; transition:background .12s; }
  .examApp-root .options label:hover{ background:#f1fbff; }
  .examApp-root .options input{ margin-left:8px; }
  
  /* زر التأكيد تحت الاختيارات */
  .examApp-root .confirm-wrap{
    margin-top:12px;
    display:flex;
    justify-content:center;
  }
  .examApp-root .confirm-wrap .btn{
    min-width:180px;
    padding:10px 18px;
    font-size:15px;
    border-radius:8px;
  }
  
  /* feedback */
  .examApp-root .feedback{
    margin-top:12px;
    padding:12px;
    border-radius:8px;
    display:none;
    line-height:1.6;
    flex: 0 0 auto;
  }
  .examApp-root .feedback.show{ display:block; }
  .examApp-root .feedback.correct{ background:#ebf8f0; border:1px solid #c7eed8; color:#1a7f3c; }
  .examApp-root .feedback.wrong{ background:#fff5f5; border:1px solid #f3c5c5; color:var(--danger); }
  .examApp-root .feedback .title{ font-weight:700; margin-bottom:8px; }
  
  .examApp-root .q-controls{ margin-top:12px; display:flex; gap:8px; justify-content:flex-end; align-items:center; }
  
  .examApp-root .btn{
    padding:8px 14px;
    border-radius:6px;
    border:none;
    background:var(--primary);
    color:#fff;
    cursor:pointer;
    font-size:14px;
  }
  .examApp-root .btn.secondary{ background:#6c757d; }
  .examApp-root .btn[disabled]{ opacity:.6; cursor:not-allowed; }
  
  /* code block */
  .examApp-root pre{
    background:#f7f9fc;
    color:#111;
    border-radius:6px;
    padding:10px;
    overflow:auto;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, "Fira Code", monospace;
    font-size:13px;
    direction:ltr;
    text-align:left;
    border:1px solid #e2e8f0;
    margin-top:10px;
    white-space:pre-wrap;
  }
  
  /* end screen */
  .examApp-root #endScreen{ display:none; text-align:center; margin-top:18px; flex:0 0 auto; }
  .examApp-root #endScreen h3{ color:var(--primary); margin-bottom:8px; }
  
  /* popup */
  .examApp-root .popup{
    display:none;
    position:fixed;
    inset:0;
    background:rgba(0,0,0,0.55);
    z-index:9999;
    justify-content:center;
    align-items:center;
  }
  .examApp-root .popup .box{
    background:#fff; padding:18px 20px; border-radius:10px; text-align:center; max-width:480px; width:90%;
    box-shadow:0 8px 30px rgba(0,0,0,0.18);
  }
  .examApp-root .popup .box p{ margin:0 0 12px; font-size:16px; color:var(--danger); }
  
  /* responsive */
  @media (max-width:820px){
    .examApp-root .container{ grid-template-columns: 1fr; height:auto; }
    .examApp-root #sidebar{ order:2; }
    .examApp-root #quizArea{ order:1; height:auto; }
    .examApp-root .confirm-wrap{ justify-content:center; }
    .examApp-root .q-controls{ justify-content:center; }
  }