*{
  margin:0;
  padding:0;
  box-sizing:border-box;
  font-family:'Cairo', sans-serif;
}
body{
  background-color:var(--bg-dark);
  color:var(--text-primary);
  line-height:1.4;
  overflow-x:hidden;
}
body.exam-mode header,
body.exam-mode footer{
  display:none;
}
header{
  padding:30px 20px;
  text-align:center;
  border-bottom:1px solid var(--border);
  backdrop-filter:blur(10px);
}
header h1{
  color:var(--primary);
  font-size:1.8rem;
  margin-bottom:5px;
  font-weight:900;
}
header p{
  color:var(--text-secondary);
  font-size:0.95rem;
}
.container{
  max-width:1200px;
  margin:0 auto;
  padding:20px;
}
.search-container{
  margin-bottom:30px;
  max-width:500px;
  margin-left:auto;
  margin-right:auto;
}
.search-wrapper{
  position:relative;
}
.search-wrapper i{
  position:absolute;
  right:15px;
  top:50%;
  transform:translateY(-50%);
  color:var(--text-secondary);
}
#search-input{
  width:100%;
  padding:12px 45px 12px 15px;
  border:1px solid var(--border);
  border-radius:50px;
  font-size:0.95rem;
  transition:all 0.3s ease;
}
#search-input:focus{
  outline:none;
}
.back-btn{
  background:none;
  border:1px solid var(--border);
  color:var(--text-primary);
  padding:8px 16px;
  border-radius:8px;
  cursor:pointer;
  font-weight:600;
  margin-bottom:20px;
  transition:all 0.3s ease;
}
.back-btn:hover{
  background:var(--card-bg);
  border-color:var(--text-secondary);
}
.exam-box{
  border:1px solid var(--mizan-border);
  border-radius:16px;
  padding:24px;
  max-width:700px;
  margin:0 auto;
}
.exam-stats-bar{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:10px;
  margin-bottom:20px;
}
.stat-item{
  border:1px solid var(--mizan-border);
  border-radius:12px;
  padding:10px 6px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:4px;
}
.stat-label{
  font-size:0.75rem;
  font-weight:600;
}
.stat-value{
  font-size:1.15rem;
  font-weight:800;
}
.stat-wrong{
  border-color:var(--mizan-danger-100);
}
.stat-correct{
  border-color:var(--mizan-success-50);
}
.stat-progress .stat-value{
  color:var(--mizan-text);
}
.stat-time .stat-value{
  color:var(--mizan-primary-500);
}
.stat-time{
  border-color:var(--mizan-primary-500-border);
}
.exam-header{
  border-bottom:1px solid var(--mizan-border);
  padding-bottom:15px;
  margin-bottom:20px;
}
.exam-title{
  font-size:1.1rem;
  font-weight:700;
}
.exam-timer{
  font-weight:700;
  color:var(--mizan-primary-500);
  font-size:1.1rem;
}
.progress-bar-container{
  height:6px;
  border-radius:3px;
  margin-bottom:25px;
  overflow:hidden;
}
.progress-bar-fill{
  height:100%;
  width:0%;
  transition:width 0.3s ease;
}
.question-container{
  margin-bottom:25px;
}
.question-text{
  font-size:1.2rem;
  font-weight:700;
  margin-bottom:20px;
}
.options-list{
  display:flex;
  flex-direction:column;
  gap:12px;
}
.option-btn{
  width:100%;
  text-align:right;
  padding:14px 20px;
  border-radius:10px;
  cursor:pointer;
  font-size:1rem;
  font-weight:600;
}
.option-btn:disabled{
  cursor:not-allowed;
}
.exam-footer{
  display:flex;
  justify-content:space-between;
  margin-top:20px;
}
.exam-btn{
  padding:10px 24px;
  border-radius:8px;
  font-weight:700;
  cursor:pointer;
  border:none;
}
.exam-btn.prev{
  background:var(--border);
  color:var(--text-primary);
}
.results-box{
  border:1px solid var(--border);
  border-radius:16px;
  padding:30px;
  max-width:600px;
  margin:0 auto;
  text-align:center;
}
.result-emoji{
  font-size:4rem;
  margin-bottom:15px;
}
.result-grade{
  font-size:1.8rem;
  font-weight:900;
  color:var(--primary);
  margin-bottom:5px;
}
.result-score{
  font-size:1.3rem;
  font-weight:700;
  margin-bottom:20px;
}
.result-details{
  border-radius:12px;
  padding:15px;
  margin-bottom:25px;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.detail-item{
  display:flex;
  justify-content:space-between;
  font-size:0.95rem;
}
.detail-value{
  font-weight:700;
}
.results-actions{
  display:flex;
  gap:12px;
}
.results-actions button{
  flex:1;
}
.review-item{
  border:1px solid var(--border);
  border-radius:12px;
  padding:16px;
  margin-bottom:15px;
  text-align:right;
}
.review-question{
  font-size:1.05rem;
  font-weight:700;
  margin-bottom:12px;
}
.review-answer{
  padding:10px 15px;
  border-radius:8px;
  font-size:0.95rem;
  margin-bottom:8px;
  font-weight:600;
}
.review-answer.incorrect{
  background:var(--mizan-danger-soft);
  color:var(--error);
  border:1px solid var(--mizan-danger-border);
}
.review-answer.correct{
  background:var(--mizan-success-soft);
  color:var(--success);
  border:1px solid var(--mizan-success-border);
}
.review-explanation{
  background:var(--bg-dark);
  padding:12px;
  border-radius:8px;
  font-size:0.9rem;
  border-right:3px solid var(--primary);
  margin-top:10px;
}
footer{
  text-align:center;
}
.footer-bottom{
  border-top:1px solid var(--border);
  padding-top:20px;
}
.footer-bottom p{
  font-size:0.85rem;
  color:var(--text-secondary);
}
@media (max-width: 600px){
  .question-text{
    font-size:1.1rem;
  }
  .exam-box,
  .results-box{
    padding:16px;
  }
}
/* =========================================================
   FINAL DESIGN POLISH — لمسة فاخرة متناسقة مع الكتب
   ========================================================= */
/* خلفية الصفحة: عمق خفيف جداً خلف البطاقات */
body{
  background:var(--mizan-page-background);
}
/* الهيدر أكثر هدوءاً واحترافية */
header{
  box-shadow:var(--mizan-header-shadow);
}
/* شبكة الكتب */
/* البطاقة نفسها: تدرج داخلي وحافة ذهبية شبه مخفية */
/* خط ذهبي دقيق جداً أعلى البطاقة */
/* أزرار المنصة — مرتبطة بالنظام المركزي (تصميم غلاف الكتاب مستثنى) */
.book-card button,
.card button,
.start-exam-btn{
  position:relative;
  overflow:hidden;
  background:var(--mizan-btn-surface-gradient);
  color:var(--mizan-white);
  border-radius:13px;
  box-shadow:var(--mizan-btn-surface-shadow);
  text-shadow:none;
  transition:transform .25s ease,box-shadow .25s ease,filter .25s ease;
}
.book-card button::before,
.card button::before,
.start-exam-btn::before{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  left:-70%;
  width:45%;
  background:var(--mizan-btn-surface-shine);
  transform:skewX(-20deg);
  transition:left .55s ease;
  pointer-events:none;
}
.book-card button:hover,
.card button:hover,
.start-exam-btn:hover{
  background:var(--mizan-btn-surface-gradient-hover);
  filter:brightness(1.04);
  transform:translateY(-2px);
  box-shadow:var(--mizan-btn-surface-shadow-hover);
}
.book-card button:hover::before,
.card button:hover::before,
.start-exam-btn:hover::before{
  left:125%;
}
.book-card button:focus-visible,
.card button:focus-visible,
.start-exam-btn:focus-visible{
  outline:var(--mizan-focus-ring-width) solid var(--mizan-focus-ring);
  outline-offset:var(--mizan-focus-ring-offset);
}
/* البحث بنفس لغة التصميم */
#search-input{
  border-color:var(--mizan-search-border);
  box-shadow:var(--mizan-search-shadow);
}
#search-input:focus{
  border-color:var(--mizan-search-focus-border);
  box-shadow:var(--mizan-search-focus-shadow);
}
/* تقليل الحركة لمن يفضل ذلك */
@media (prefers-reduced-motion: reduce){
  .book-card,
  .book-card button,
  .card button,
  .start-exam-btn{
    transition:none;
  }
  .book-card:hover,
  .book-card button:hover,
  .card button:hover,
  .start-exam-btn:hover{
    transform:none;
  }
}
/* سهم زر عام */
.btn-arrow{
  font-size:0.9em;
  transition:transform 0.25s ease;
}
.book-card button:hover .btn-arrow{
  transform:translateX(-3px);
}
/* =========================================================
   بطاقة السؤال — تبرز بوضوح فوق الخيارات
   ========================================================= */
.question-card{
  position:relative;
  border:1px solid var(--mizan-question-card-border);
  border-right:4px solid var(--primary);
  border-radius:14px;
  padding:20px 20px 18px;
  margin-bottom:22px;
}
.question-label{
  display:inline-block;
  font-size:0.76rem;
  font-weight:800;
  border:1px solid var(--mizan-primary-500-border);
  padding:4px 11px;
  border-radius:20px;
  margin-bottom:12px;
  letter-spacing:0.2px;
}
.question-card .question-text{
  font-size:1.32rem;
  font-weight:800;
  line-height:1.7;
  margin-bottom:0;
}
@media (max-width: 600px){
  .question-card{
    padding:16px 16px 15px;
    border-radius:12px;
    margin-bottom:18px;
  }
  .question-card .question-text{
    font-size:1.12rem;
    line-height:1.6;
  }
  .question-label{
    font-size:0.7rem;
    padding:3px 9px;
  }
}
/* =========================================================
   FINAL CHAPTER CARDS — بطاقات الفصول
   تصميم متجاوب وأنيق للنصوص الطويلة على الهاتف
   ========================================================= */
.chapters-list{
  gap:16px;
}
.chapter-item{
  width:100%;
  min-width:0;
  box-sizing:border-box;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:22px;
  padding:18px 20px;
  border-radius:18px;
  border:1px solid var(--mizan-chapter-card-border);
  overflow:hidden;
  transition:transform 0.25s ease,
    border-color 0.25s ease,
    box-shadow 0.25s ease;
}
.chapter-item:hover{
  transform:translateY(-2px);
}
.chapter-info{
  flex:1 1 auto;
  min-width:0;
  text-align:right;
}
.chapter-number{
  position:relative;
  display:inline-block;
  font-size:1.22rem;
  font-weight:800;
  line-height:1.35;
  margin-bottom:7px;
  padding-right:12px;
}
.chapter-number::before{
  content:"";
  position:absolute;
  right:0;
  top:4px;
  bottom:4px;
  width:3px;
  border-radius:4px;
  opacity:0.9;
}
.chapter-info p{
  margin:0;
  font-size:0.94rem;
  line-height:1.75;
  font-weight:500;
  white-space:normal;
  overflow-wrap:anywhere;
  word-break:normal;
}
.chapter-start-btn{
  flex:0 0 122px;
  width:122px;
  min-width:122px;
  min-height:52px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  padding:11px 16px;
  margin:0;
  border:1px solid var(--mizan-btn-primary-border);
  border-radius:13px;
  font-size:1rem;
  font-weight:800;
  box-shadow:var(--mizan-chapter-button-shadow);
  white-space:nowrap;
  flex-shrink:0;
}
.chapter-start-btn:hover{
  transform:translateY(-1px);
}
.chapter-start-icon{
  font-size:1rem;
  line-height:1;
}
@media (max-width: 600px){
  .chapters-list{
    gap:13px;
  }
  .chapter-item{
    align-items:stretch;
    flex-direction:column;
    gap:13px;
    padding:17px 16px 15px;
    border-radius:17px;
  }
  .chapter-info{
    width:100%;
  }
  .chapter-number{
    font-size:1.16rem;
    margin-bottom:6px;
  }
  .chapter-info p{
    font-size:0.91rem;
    line-height:1.7;
  }
  .chapter-start-btn{
    flex:0 0 auto;
    width:100%;
    min-width:0;
    min-height:48px;
    border-radius:12px;
    padding:10px 16px;
    font-size:0.98rem;
  }
}
@media (max-width: 380px){
  .chapter-item{
    padding:15px 14px 14px;
  }
  .chapter-number{
    font-size:1.1rem;
  }
  .chapter-info p{
    font-size:0.88rem;
  }
}
/* ===== Public Firebase authentication ===== */
.auth-modal{
  padding:16px;
  background:var(--mizan-auth-overlay-bg);
  backdrop-filter:blur(5px);
}
.auth-modal-content{
  position:relative;
  width:min(100%,430px);
  padding:28px 24px 24px;
  border:1px solid var(--mizan-primary-500-border);
  border-radius:18px;
  background:var(--mizan-auth-content-bg);
  box-shadow:var(--mizan-auth-content-shadow);
  color:var(--text-primary);
}
.auth-modal-close{
  position:absolute;
  top:10px;
  left:14px;
  width:34px;
  height:34px;
  border:0;
  background:var(--mizan-transparent);
  color:var(--mizan-neutral-300);
  font-size:28px;
  line-height:1;
  cursor:pointer;
}
.auth-modal-heading{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
}
.auth-modal-heading h2{
  margin:0;
  font-size:22px;
}
.auth-modal-subtitle{
  margin:8px 0 20px;
  color:var(--text-secondary);
  text-align:center;
  font-size:14px;
}
.google-signin-btn,
.auth-submit-btn{
  width:100%;
  min-height:46px;
  border:0;
  border-radius:10px;
  font:inherit;
  font-weight:700;
  cursor:pointer;
}
.auth-submit-btn{
  margin-top:12px;
}
.google-signin-btn:disabled,
.auth-submit-btn:disabled{
  opacity:.6;
  cursor:wait;
}
.auth-divider{
  display:flex;
  align-items:center;
  gap:10px;
  margin:18px 0;
  color:var(--mizan-neutral-500);
  font-size:13px;
}
.auth-divider::before,
.auth-divider::after{
  content:'';
  height:1px;
  flex:1;
  background:var(--mizan-auth-divider-line);
}
.auth-modal-content label{
  display:block;
  margin:12px 0 6px;
  color:var(--mizan-neutral-300);
  font-size:13px;
  font-weight:700;
}
.auth-modal-content input{
  width:100%;
  box-sizing:border-box;
  padding:11px 12px;
  border:1px solid var(--mizan-neutral-600);
  border-radius:9px;
  background:var(--mizan-primary-900);
  color:var(--mizan-bg-light);
  font:inherit;
  direction:ltr;
  text-align:left;
}
.auth-modal-content input:focus{
  outline:2px solid var(--mizan-primary-500-border);
  border-color:var(--primary);
}
.auth-error{
  min-height:22px;
  margin:10px 0 0;
  font-size:13px;
  text-align:center;
}
.auth-reset-btn,
.auth-switch button{
  border:0;
  background:var(--mizan-transparent);
  color:var(--mizan-primary-300);
  font:inherit;
  cursor:pointer;
}
.auth-reset-btn{
  display:block;
  margin:13px auto 0;
  font-size:13px;
}
.auth-switch{
  margin-top:18px;
  color:var(--text-secondary);
  text-align:center;
  font-size:13px;
}
.auth-switch button{
  font-weight:700;
}
@media (max-width: 480px){
  .auth-modal{
    padding:0;
  }
  .auth-modal-content{
    border-radius:18px 18px 0 0;
    padding:26px 18px 22px;
  }
}
/* =========================================================
   GENERATION 5 — تصميم الكتاب ثلاثي الأبعاد (نهائي)
   يُلغي كل تصاميم .book-card / .books-grid السابقة في هذا الملف
   عبر الترتيب المتأخر في الملف (لم تُحذف الأجيال القديمة تفادياً
   لكسر محددات مشتركة مثل .start-exam-btn / .card button)
   ========================================================= */
:root{
  --bk-gold-primary:var(--mizan-gold-metal-1);
  --bk-gold-light:var(--mizan-gold-metal-2);
  --bk-gold-dark:var(--mizan-gold-metal-3);
  --bk-gold-shimmer:var(--mizan-gold-metal-gradient);
  --bk-paper-cream:var(--mizan-paper-cream);
  --bk-paper-edge:var(--mizan-paper-edge);
  --bk-paper-dark:var(--mizan-paper-dark);
}
.books-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:24px;
  margin-top:10px;
}
@media (max-width: 900px){
  .books-grid{
    grid-template-columns:repeat(2, 1fr);
  }
}
@media (max-width: 480px){
  .books-grid{
    grid-template-columns:repeat(2, 1fr);
    gap:12px;
  }
}
.book-card{
  border:1px solid var(--mizan-border);
  border-radius:20px;
  padding:24px 14px 18px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  position:relative;
  box-shadow:0 12px 30px rgba(0,0,0,0.6);
  transition:transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
  overflow:hidden;
  cursor:pointer;
  user-select:none;
}
.book-card::after{
  content:none;
}
/* يلغي أي زخرفة قديمة كانت تُضاف بـ ::after */
.book-card:hover{
  border-color:var(--mizan-primary-400) !important;
  transform:translateY(-5px);
  box-shadow:0 15px 35px rgba(0,0,0,0.85), 0 0 25px rgba(212, 175, 55, 0.15);
}
.book-card .stage{
  position:relative;
  width:100%;
  height:245px;
  display:flex;
  justify-content:center;
  align-items:center;
  perspective:1200px;
  perspective-origin:50% 35%;
}
.book-card .bg-watermark{
  position:absolute;
  width:170px;
  height:170px;
  top:45%;
  left:50%;
  transform:translate(-50%, -50%);
  opacity:0.06;
  pointer-events:none;
  z-index:0;
  transition:opacity 0.4s ease;
}
.book-card:hover .bg-watermark{
  opacity:0.12;
}
.book-card .bg-watermark svg{
  width:100%;
  height:100%;
  stroke:var(--bk-gold-light);
  fill:none;
  stroke-width:1;
}
.book-card .top-gold-glow{
  position:absolute;
  width:150px;
  height:80px;
  top:10px;
  left:50%;
  transform:translateX(-50%);
  background:radial-gradient(ellipse at center, rgba(212, 175, 55, 0.28) 0%, transparent 70%);
  filter:blur(14px);
  pointer-events:none;
  z-index:0;
}
.book-card .side-gold-glow{
  position:absolute;
  width:190px;
  height:40px;
  bottom:8px;
  left:50%;
  transform:translateX(-50%);
  background:radial-gradient(ellipse at center, rgba(212, 175, 55, 0.3) 0%, rgba(212, 175, 55, 0.08) 50%, transparent 80%);
  filter:blur(12px);
  pointer-events:none;
  z-index:0;
  transition:transform 0.4s ease, opacity 0.4s ease;
}
.book-card:hover .side-gold-glow{
  transform:translateX(-50%) scale(1.2);
  opacity:0.9;
}
.book-card .shadow-base{
  position:absolute;
  width:150px;
  height:22px;
  bottom:12px;
  left:50%;
  transform:translateX(-50%) rotateX(75deg);
  background:radial-gradient(ellipse at center, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.6) 50%, transparent 80%);
  filter:blur(6px);
  pointer-events:none;
  z-index:0;
}
.book-card .book{
  --w:135px;
  --h:185px;
  --d:42px;
  position:relative;
  width:var(--w);
  height:var(--h);
  transform-style:preserve-3d;
  transform:rotateX(15deg) rotateY(-32deg) rotateZ(2deg);
  transition:transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
  z-index:1;
}
.book-card.is-open .book{
  transform:rotateX(5deg) rotateY(0deg) translateX(28px) translateY(-4px) translateZ(0);
}
.book-card .face{
  position:absolute;
  transform-style:preserve-3d;
}
.book-card .front-cover-wrapper{
  position:absolute;
  width:var(--w);
  height:var(--h);
  left:0;
  top:0;
  transform-origin:left center;
  transform-style:preserve-3d;
  transform:translateZ(calc(var(--d) / 2));
  transition:transform 0.85s cubic-bezier(0.4, 0, 0.2, 1);
  z-index:8;
}
.book-card.is-open .front-cover-wrapper{
  transform:translateZ(calc(var(--d) / 2)) rotateY(-115deg);
}
.book-card .front{
  position:absolute;
  inset:0;
  border-radius:2px 6px 6px 2px;
  box-shadow:inset 2px 0 4px rgba(255, 255, 255, 0.3), inset -3px 0 5px rgba(0,0,0,0.8);
  overflow:hidden;
  padding:18px 10px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:12px;
  backface-visibility:hidden;
}
.book-card .front::before{
  content:"";
  position:absolute;
  inset:0;
  background:repeating-linear-gradient(135deg, rgba(255,255,255,0.03) 0px, rgba(255,255,255,0.03) 1px, transparent 1px, transparent 3px);
  opacity:0.7;
}
/* ---- الثيمات اللونية الخمسة (توزَّع تلقائياً عبر getBookTheme في book-icons.js) ---- */
.book-card .book.book-blue .front,
.book-card .book:not([class*="book-"]) .front{
  background:linear-gradient(135deg, rgba(255,255,255,0.18) 0%, rgba(0,0,0,0.4) 100%),
              linear-gradient(150deg, var(--mizan-book-blue-1) 0%, var(--mizan-book-blue-2) 60%, var(--mizan-book-blue-3) 100%);
}
.book-card .book.book-blue .spine{
  background:linear-gradient(90deg, var(--mizan-book-blue-spine-1) 0%, var(--mizan-book-blue-spine-2) 25%, var(--mizan-book-blue-spine-3) 50%, var(--mizan-book-blue-spine-4) 75%, var(--mizan-book-blue-spine-1) 100%);
}
.book-card .book.book-burgundy .front{
  background:linear-gradient(135deg, rgba(255,255,255,0.18) 0%, rgba(0,0,0,0.5) 100%),
              linear-gradient(150deg, #3d0e17 0%, #22080e 60%, #0d0205 100%);
}
.book-card .book.book-burgundy .spine{
  background:linear-gradient(90deg, #080103 0%, #21070d 25%, #3b0e18 50%, #21070d 75%, #080103 100%);
}
.book-card .book.book-emerald .front{
  background:linear-gradient(135deg, rgba(255,255,255,0.18) 0%, rgba(0,0,0,0.5) 100%),
              linear-gradient(150deg, #092e1e 0%, #041a10 60%, #010a06 100%);
}
.book-card .book.book-emerald .spine{
  background:linear-gradient(90deg, #010805 0%, #092619 25%, #103d29 50%, #092619 75%, #010805 100%);
}
.book-card .book.book-brown .front{
  background:linear-gradient(135deg, rgba(255,255,255,0.18) 0%, rgba(0,0,0,0.5) 100%),
              linear-gradient(150deg, #331d0d 0%, #1c0e05 60%, #0a0401 100%);
}
.book-card .book.book-brown .spine{
  background:linear-gradient(90deg, #080300 0%, #241307 25%, #3d220e 50%, #241307 75%, #080300 100%);
}
.book-card .book.book-purple .front{
  background:linear-gradient(135deg, rgba(255,255,255,0.18) 0%, rgba(0,0,0,0.5) 100%),
              linear-gradient(150deg, #231238 0%, #12081f 60%, #06020c 100%);
}
.book-card .book.book-purple .spine{
  background:linear-gradient(90deg, #040108 0%, #180b29 25%, #2a1445 50%, #180b29 75%, #040108 100%);
}
/* ---- نهاية الثيمات ---- */
.book-card .front-inside{
  position:absolute;
  inset:0;
  background:var(--mizan-primary-900);
  border-radius:6px 2px 2px 6px;
  transform:rotateY(180deg);
  backface-visibility:hidden;
  border:1px solid rgba(212, 175, 55, 0.3);
  display:flex;
  justify-content:center;
  align-items:center;
  padding:10px;
  box-shadow:inset 0 0 10px rgba(0,0,0,0.8);
}
.book-card .front-inside-pattern{
  width:100%;
  height:100%;
  border:1px dashed rgba(212, 175, 55, 0.3);
  display:flex;
  justify-content:center;
  align-items:center;
  font-family:'Amiri', serif;
  font-size:11px;
  color:#a3b8d7;
  text-align:center;
}
.book-card .flipping-page{
  position:absolute;
  width:calc(var(--w) - 6px);
  height:calc(var(--h) - 6px);
  top:3px;
  left:3px;
  background:linear-gradient(90deg, #e8da9b 0%, var(--mizan-paper-cream) 100%);
  transform-origin:left center;
  transform-style:preserve-3d;
  transform:translateZ(calc((var(--d) / 2) - 3px));
  transition:transform 0.8s cubic-bezier(0.35, 0, 0.25, 1) 0.12s;
  border-radius:2px 4px 4px 2px;
  box-shadow:2px 2px 6px rgba(0,0,0,0.3);
  z-index:6;
  backface-visibility:hidden;
}
.book-card.is-open .flipping-page{
  transform:translateZ(calc((var(--d) / 2) - 3px)) rotateY(-100deg);
}
.book-card .inside-page-body{
  position:absolute;
  width:calc(var(--w) - 6px);
  height:calc(var(--h) - 6px);
  top:3px;
  left:3px;
  background:radial-gradient(ellipse at center, #fbf7db 0%, #ebd899 100%);
  transform:translateZ(0);
  border-radius:2px 4px 4px 2px;
  padding:8px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  color:#2b2106;
  text-align:center;
  z-index:2;
  box-shadow:inset 6px 0 12px rgba(0,0,0,0.3);
  overflow:hidden;
}
.book-card .page-border-frame{
  position:absolute;
  inset:5px;
  border:1px solid #917235;
  outline:1px solid #c2a35d;
  outline-offset:-3px;
  pointer-events:none;
  z-index:1;
}
.book-card .page-corner{
  position:absolute;
  width:8px;
  height:8px;
  border:1.5px solid #70541e;
  z-index:2;
  pointer-events:none;
}
.book-card .p-c-tl{
  top:3px;
  left:3px;
  border-right:none;
  border-bottom:none;
}
.book-card .p-c-tr{
  top:3px;
  right:3px;
  border-left:none;
  border-bottom:none;
}
.book-card .p-c-bl{
  bottom:3px;
  left:3px;
  border-right:none;
  border-top:none;
}
.book-card .p-c-br{
  bottom:3px;
  right:3px;
  border-left:none;
  border-top:none;
}
.book-card .inside-page-title{
  font-family:'Aref Ruqaa', serif;
  font-size:13px;
  font-weight:700;
  color:#4a3608;
  margin-bottom:6px;
  border-bottom:1px double #8a6a27;
  padding-bottom:4px;
  position:relative;
  z-index:3;
}
.book-card .inside-page-text{
  font-size:10px;
  font-weight:700;
  line-height:1.4;
  color:#3b2f0a;
  position:relative;
  z-index:3;
  padding:0 4px;
}
.book-card .gold-frame{
  position:absolute;
  inset:7px;
  border:1.5px solid transparent;
  border-image:var(--bk-gold-shimmer) 1;
  border-radius:2px;
  box-shadow:inset 0 0 4px rgba(212, 175, 55, 0.3), 0 0 6px rgba(0,0,0,0.8);
}
.book-card .gold-frame-inner{
  position:absolute;
  inset:11px;
  border:1px solid rgba(212, 175, 55, 0.45);
}
.book-card .corner-ornament{
  position:absolute;
  width:12px;
  height:12px;
  border:1.5px solid var(--bk-gold-primary);
  z-index:3;
}
.book-card .c-tl{
  top:9px;
  left:9px;
  border-right:none;
  border-bottom:none;
}
.book-card .c-tr{
  top:9px;
  right:9px;
  border-left:none;
  border-bottom:none;
}
.book-card .c-bl{
  bottom:9px;
  left:9px;
  border-right:none;
  border-top:none;
}
.book-card .c-br{
  bottom:9px;
  right:9px;
  border-left:none;
  border-top:none;
}
.book-card .emblem-container{
  position:relative;
  width:48px;
  height:48px;
  display:flex;
  justify-content:center;
  align-items:center;
  z-index:2;
}
.book-card .emblem-ring{
  position:absolute;
  inset:0;
  border:1.2px dashed var(--bk-gold-primary);
  border-radius:50%;
  animation:bkRotateRing 30s linear infinite;
  box-shadow:0 0 6px rgba(212, 175, 55, 0.3);
}
@keyframes bkRotateRing{ from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.book-card .emblem-icon{
  width:28px;
  height:28px;
  fill:none;
  stroke:url(#bkGoldGrad);
  stroke-width:1.3;
  filter:drop-shadow(0 2px 3px rgba(0,0,0,0.9));
}
.book-card .book-title-front{
  font-family:'Aref Ruqaa', 'Amiri', serif;
  font-size:14px;
  font-weight:700;
  background:var(--bk-gold-shimmer);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  text-align:center;
  z-index:2;
  line-height:1.3;
  filter:drop-shadow(0 2px 3px rgba(0,0,0,0.9));
  max-width:90%;
}
.book-card .top-ribbon-bookmark{
  position:absolute;
  top:-4px;
  left:28px;
  width:9px;
  height:38px;
  background:var(--bk-gold-shimmer);
  z-index:10;
  box-shadow:2px 2px 5px rgba(0,0,0,0.5);
  clip-path:polygon(0 0, 100% 0, 100% 100%, 50% 82%, 0 100%);
  pointer-events:none;
}
.book-card .spine{
  width:var(--d);
  height:var(--h);
  left:calc(0px - (var(--d) / 2));
  top:0;
  transform:rotateY(-90deg) translateZ(0);
  border-radius:3px 0 0 3px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  align-items:center;
  padding:14px 0;
  box-shadow:inset 0 0 8px rgba(0,0,0,0.9);
  transition:opacity 0.5s ease;
}
.book-card.is-open .spine{
  opacity:0;
}
.book-card .spine-rib{
  width:100%;
  height:5px;
  background:linear-gradient(90deg, var(--bk-gold-dark), var(--bk-gold-light), var(--bk-gold-dark));
  box-shadow:0 1px 3px rgba(0,0,0,0.8);
}
.book-card .spine-text{
  writing-mode:vertical-rl;
  font-family:'Amiri', serif;
  font-size:11px;
  font-weight:700;
  background:var(--bk-gold-shimmer);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  letter-spacing:0.5px;
}
.book-card .fore-edge{
  width:var(--d);
  height:calc(var(--h) - 8px);
  left:calc(var(--w) - (var(--d) / 2) - 3px);
  top:4px;
  transform:rotateY(90deg) translateZ(0);
  background:repeating-linear-gradient(90deg, var(--bk-paper-cream) 0px, var(--bk-paper-cream) 1px, var(--bk-paper-edge) 2px, var(--bk-paper-dark) 3px);
  box-shadow:inset 0 0 8px rgba(0,0,0,0.5);
  border-radius:2px;
}
.book-card .pages-top{
  width:calc(var(--w) - 6px);
  height:var(--d);
  left:3px;
  top:calc(0px - (var(--d) / 2) + 3px);
  transform:rotateX(90deg) translateZ(0);
  background:var(--bk-paper-edge);
  box-shadow:inset 0 0 6px rgba(0,0,0,0.6);
}
.book-card .pages-bottom{
  width:calc(var(--w) - 6px);
  height:var(--d);
  left:3px;
  bottom:calc(0px - (var(--d) / 2) + 3px);
  transform:rotateX(-90deg) translateZ(0);
  background:var(--bk-paper-dark);
}
.book-card .back{
  width:var(--w);
  height:var(--h);
  left:0;
  top:0;
  transform:rotateY(180deg) translateZ(calc(var(--d) / 2));
  background:var(--mizan-primary-900-deep);
}
.book-card .card-title{
  font-family:'Tajawal', sans-serif;
  font-size:17px;
  font-weight:800;
  color:var(--mizan-surface);
  text-align:center;
  margin-top:10px;
}
.book-card .card-author{
  font-size:12px;
  color:var(--mizan-muted);
  margin-top:4px;
  text-align:center;
}
.book-card .book-stats{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  margin-top:10px;
  width:100%;
}
.book-card .book-stat-badge{
  min-width:78px;
  box-sizing:border-box;
  background:var(--mizan-bg-dark);
  border:1px solid var(--mizan-border-dark);
  border-radius:12px;
  padding:5px 8px;
  font-size:11px;
  color:var(--mizan-text-dark);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:4px;
  line-height:1.2;
  white-space:nowrap;
}
.book-card .book-stat-icon{
  font-size:11px;
  line-height:1;
}
.book-card .book-stat-value{
  font-weight:800;
  color:var(--mizan-primary-500);
}
.book-card .book-stat-label{
  color:var(--mizan-muted);
}
.book-card .questions-stat{
  border-color:var(--mizan-primary-500-border);
  background:var(--mizan-bg-dark);
}
.book-card .test-btn{
  width:100%;
  background:var(--mizan-btn-primary-bg);
  color:var(--mizan-btn-primary-fg);
  font-family:'Tajawal',sans-serif;
  font-size:14px;
  font-weight:800;
  border:1px solid var(--mizan-btn-primary-border);
  border-radius:12px;
  padding:10px 0;
  margin-top:14px;
  cursor:pointer;
  transition:background .2s,transform .1s;
  display:flex;
  justify-content:center;
  align-items:center;
  gap:6px;
  box-shadow:var(--mizan-btn-primary-shadow);
}
.book-card .test-btn:hover{
  background:var(--mizan-btn-primary-bg-hover);
  color:var(--mizan-btn-primary-fg);
}
@media (max-width: 480px){
  .book-card{
    padding:14px 6px 12px;
  }
  .book-card .card-title{
    font-size:14px;
  }
  .book-card .card-author{
    font-size:10px;
  }
  .book-card .book{
    --w:92px;
    --h:135px;
    --d:28px;
  }
  .book-card .stage{
    height:175px;
  }
  .book-card.is-open .book{
    transform:rotateX(5deg) rotateY(0deg) translateX(22px) translateY(-3px) translateZ(0);
  }
  .book-card.is-open .front-cover-wrapper{
    transform:translateZ(calc(var(--d) / 2)) rotateY(-110deg);
  }
  .book-card.is-open .flipping-page{
    transform:translateZ(calc((var(--d) / 2) - 3px)) rotateY(-95deg);
  }
  .book-card .top-ribbon-bookmark{
    height:26px;
    left:16px;
    width:7px;
  }
  .book-card .inside-page-title{
    font-size:11px;
  }
  .book-card .inside-page-text{
    font-size:8.5px;
  }
  .book-card .book-stats{
    gap:5px;
  }
  .book-card .book-stat-badge{
    min-width:0;
    flex:1 1 0;
    padding:5px 5px;
    font-size:10px;
  }
}
/* عدد أسئلة الفصل - بيانات خفيفة من فهرس الأسئلة */
.chapter-question-count{
  display:inline-block;
  margin-top:6px;
  font-size:0.82rem;
  font-weight:700;
  color:var(--text-secondary);
  opacity:0.95;
}
/* Mizan homepage header controls */
.mizan-header > #install-app-btn,
.mizan-header > #ios-install-hint{
  position:absolute;
  right:52px;
}
.mizan-header > #install-app-btn{
  top:12px;
}
.mizan-header > #ios-install-hint{
  top:58px;
}
@media (max-width: 560px){
  .mizan-header{
    min-height:108px;
  }
  .mizan-header > #install-app-btn,
  .mizan-header > #ios-install-hint{
    right:50px;
  }
}
/* Light theme audit repair */
html[data-theme="light"] .auth-modal{
  background:var(--mizan-auth-light-overlay-bg);
}
html[data-theme="light"] .auth-modal-content{
  background:var(--mizan-auth-light-content-bg);
  border-color:var(--mizan-border-light);
  color:var(--mizan-text-light);
  box-shadow:var(--mizan-auth-light-content-shadow);
}
html[data-theme="light"] .auth-modal-close{
  color:var(--mizan-muted-light);
}
html[data-theme="light"] .auth-modal-content label{
  color:var(--mizan-text-light);
}
html[data-theme="light"] .auth-modal-content input{
  background:var(--mizan-surface);
  color:var(--mizan-text-light);
  border-color:var(--mizan-border-light);
}
html[data-theme="light"] .auth-divider{
  color:var(--mizan-muted-light);
}
html[data-theme="light"] .auth-reset-btn,
html[data-theme="light"] .auth-switch button{
  color:var(--mizan-primary-700);
}
/* ===== Light mode: exam question readability ===== */
html[data-theme="light"] .chapter-item .chapter-info p{
  color:var(--mizan-muted-light);
}


/* Layout helpers migrated from index.html inline styles. */


.review-exam-action { width: 100%; margin-top: 15px; }
.review-section-heading { margin-bottom: 20px; }


/* Home and exam section spacing helpers. */
.chapters-header { margin-bottom: 25px; }
.restart-exam-action { background: var(--primary); color: var(--bg-dark); }
.back-books-action { margin-bottom: 0; }

/* Exam answer and final-result presentation — uses existing Mizan central tokens. */
.results-box{
  max-width:880px;
  padding:clamp(20px,4vw,36px);
  background:var(--mizan-card);
  color:var(--mizan-text);
  border:1px solid var(--mizan-border);
  border-radius:var(--mizan-radius-xl,20px);
  box-shadow:var(--mizan-shadow-surface-soft,0 12px 32px rgba(0,0,0,.12));
}
.result-emoji{margin-bottom:8px;font-size:clamp(2.5rem,7vw,4rem)}
.result-grade{color:var(--mizan-heading);font-size:clamp(1.45rem,4vw,2rem)}
.result-score{color:var(--mizan-muted);font-size:1rem;margin-bottom:18px}
.result-details{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;
  padding:0;margin:22px 0;background:transparent;
}
.result-details .detail-item{
  display:flex;flex-direction:column;align-items:flex-start;gap:8px;
  min-width:0;padding:14px;text-align:right;background:var(--mizan-bg);
  border:1px solid var(--mizan-border);border-radius:var(--mizan-radius-md,14px);
}
.result-details .detail-label{color:var(--mizan-muted);font-size:.82rem}
.result-details .detail-value{color:var(--mizan-heading);font-size:1.15rem}
.results-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.results-actions button,.review-exam-action{
  min-height:46px;border-radius:var(--mizan-radius-control,12px);
}
.review-exam-action{width:100%;margin-top:10px}
#results-review-summary{margin-top:24px;text-align:right}
#results-review-summary .results-review-heading{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 0 12px}
#results-review-summary .results-review-heading h3{margin:0;color:var(--mizan-heading);font-size:1.1rem}
#results-review-summary .results-review-heading span{color:var(--mizan-muted);font-size:.85rem}
#results-review-summary .review-item{margin:0 0 12px;padding:clamp(14px,3vw,20px);background:var(--mizan-bg);border-color:var(--mizan-border);border-radius:var(--mizan-radius-lg,16px)}
#results-review-summary .review-question{color:var(--mizan-heading);line-height:1.85}
#results-review-summary .review-answer{line-height:1.8;overflow-wrap:anywhere}
#results-review-summary .review-explanation{background:var(--mizan-card);color:var(--mizan-muted);border-right-color:var(--mizan-primary-500);line-height:1.9}
#results-review-summary .results-review-empty{padding:18px;border:1px solid var(--mizan-success-500);background:var(--mizan-success-100);color:var(--mizan-success-700);border-radius:var(--mizan-radius-md,14px);text-align:center;font-weight:700}
.question-card{background:var(--mizan-card);border-color:var(--mizan-border);border-right-color:var(--mizan-primary-500)}
.question-label{background:var(--mizan-accent-tile-bg);border-color:var(--mizan-primary-200);color:var(--mizan-primary-700)}
.option-btn{background:var(--mizan-card);color:var(--mizan-text);border-color:var(--mizan-border);border-radius:var(--mizan-radius-control,12px);text-align:right;line-height:1.8}
.option-btn.correct{background:var(--mizan-success-100);border-color:var(--mizan-success-500);color:var(--mizan-success-700)}
.option-btn.incorrect{background:var(--mizan-danger-100);border-color:var(--mizan-danger-500);color:var(--mizan-danger-700)}
html[data-theme="light"] .results-box{background:var(--mizan-card-light);border-color:var(--mizan-border-light);color:var(--mizan-text-light)}
html[data-theme="light"] .result-details .detail-item{background:var(--mizan-bg-light);border-color:var(--mizan-border-light)}
html[data-theme="light"] #results-review-summary .review-item{background:var(--mizan-bg-light);border-color:var(--mizan-border-light)}
html[data-theme="light"] #results-review-summary .review-explanation{background:var(--mizan-surface-light);color:var(--mizan-muted-light)}
html[data-theme="light"] #results-review-summary .review-question{color:var(--mizan-heading-light)}
html[data-theme="light"] .option-btn{background:var(--mizan-card-light);color:var(--mizan-text-light);border-color:var(--mizan-border-light)}
@media(max-width:600px){
  .results-box{padding:18px 14px;border-radius:var(--mizan-radius-lg,16px)}
  .result-details{grid-template-columns:1fr;gap:8px}
  .result-details .detail-item{flex-direction:row;align-items:center;justify-content:space-between;padding:12px}
  .result-details .detail-value{font-size:1rem}
  .results-actions{grid-template-columns:1fr}
  #results-review-summary .results-review-heading{align-items:flex-start;flex-direction:column}
}