:root {
  --bg-base: #07090e;
  --apple-surface: rgba(22, 28, 42, 0.68);
  --apple-surface-hover: rgba(30, 39, 58, 0.85);
  --apple-border: rgba(255, 255, 255, 0.08);
  --apple-border-strong: rgba(255, 255, 255, 0.15);
  --apple-red: #ff453a;
  --apple-green: #30d158;
  --apple-blue: #0a84ff;
  --text-primary: #f5f5f7;
  --text-secondary: #86868b;
  --ease-apple: cubic-bezier(0.16, 1, 0.3, 1);
}

* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

html, body {
  background-color: var(--bg-base) !important;
  color: var(--text-primary) !important;
  margin: 0;
  padding: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Cairo', sans-serif;
  min-height: 100vh;
  overflow-x: hidden;
  letter-spacing: -0.01em;
}

body {
  animation: examPageEnter 0.6s ease both;
}

body.page-leave {
  animation: examPageLeave 0.4s ease-in both;
  pointer-events: none;
}

.page-transition {
  position: fixed;
  inset: 0;
  z-index: 999;
  display: grid;
  place-items: center;
  background: #07090e;
  opacity: 1;
  pointer-events: none;
  transition: opacity 0.42s var(--ease-apple);
}

.page-transition.is-ready {
  opacity: 0;
}

.page-transition.is-leaving {
  opacity: 1;
}

.page-transition-mark {
  width: 60px;
  height: 60px;
  transform: scale(0.9);
  transition: transform 0.42s var(--ease-apple);
}

.page-transition-logo {
  display: block;
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 0 18px rgba(10, 132, 255, 0.38));
}

.page-transition.is-ready .page-transition-mark,
.page-transition.is-leaving .page-transition-mark {
  transform: scale(1);
}

.page-transition-mark::after {
  content: none;
}

html.quiz-page,
html.quiz-page body {
  overflow-x: clip;
}

.quiz-header {
  position: sticky;
  top: 0;
  z-index: 100;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 16px;
  width: 100%;
  padding: 10px clamp(14px, 4vw, 48px);
  background: linear-gradient(180deg, rgba(14, 18, 28, 0.94) 0%, rgba(6, 7, 10, 0.88) 100%);
  border-bottom: 1px solid var(--apple-border);
}

.quiz-header + .container .sticky-bar {
  position: static;
  top: auto;
  z-index: auto;
}

.quiz-header::before,
.quiz-header::after {
  content: "";
  position: absolute;
  height: 2px;
  pointer-events: none;
}

.quiz-header::before {
  top: 0;
  right: 8%;
  width: 22%;
  background: linear-gradient(90deg, transparent, #0a84ff, transparent);
  box-shadow: 0 0 18px rgba(10, 132, 255, 0.55);
}

.quiz-header::after {
  bottom: 0;
  left: 50%;
  width: 20%;
  transform: translateX(-50%);
  background: linear-gradient(90deg, transparent 0%, rgba(255, 106, 0, 0.35) 25%, #ff6a00 50%, rgba(255, 106, 0, 0.35) 75%, transparent 100%);
  opacity: 0.75;
  animation: quizHeaderAccentPulse 3.2s ease-in-out infinite alternate;
}

@keyframes quizHeaderAccentPulse {
  from { width: 20%; opacity: 0.55; }
  to { width: 36%; opacity: 0.9; }
}

.quiz-brand {
  grid-column: 1;
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  direction: ltr;
  color: #ffffff;
  text-decoration: none;
  white-space: nowrap;
}

.quiz-brand-mark {
  width: 38px;
  height: 38px;
  flex: none;
}

.quiz-brand-mark .disc { fill: #0a84ff; }

.quiz-brand-name {
  font-family: 'Exo 2', 'Cairo', sans-serif;
  font-size: 23px;
  font-weight: 900;
  letter-spacing: 0.04em;
  line-height: 1;
}

.quiz-header-title {
  grid-column: 2;
  margin: 0;
  color: #aeb9ca;
  font-size: 0.88rem;
  line-height: 1.5;
  font-weight: 600;
  text-align: center;
  white-space: nowrap;
}

.quiz-back-link {
  grid-column: 3;
  justify-self: end;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 40px;
  padding: 8px 13px;
  border: 1px solid rgba(10, 132, 255, 0.32);
  border-radius: 12px;
  background: rgba(10, 132, 255, 0.1);
  box-shadow: 0 4px 14px rgba(10, 132, 255, 0.1);
  color: #ffffff;
  text-decoration: none;
  font-size: 0.88rem;
  font-weight: 700;
  white-space: nowrap;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.quiz-back-link:hover {
  background: #0a84ff;
  border-color: #0a84ff;
  transform: translateY(-1px);
}

.quiz-back-link:focus-visible {
  outline: 2px solid rgba(10, 132, 255, 0.55);
  outline-offset: 3px;
}

.quiz-back-link svg { flex: none; }
.quiz-back-link span { text-align: center; }

@media (max-width: 900px) {
  .quiz-header-title { display: none; }
}

@media (max-width: 680px) {
  .quiz-header {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 8px;
    padding: 9px 12px;
  }

  .quiz-brand { gap: 6px; }
  .quiz-brand-mark { width: 32px; height: 32px; }
  .quiz-brand-name { font-size: 17px; }
  .quiz-back-link { min-height: 36px; gap: 5px; padding: 7px 10px; font-size: 0.78rem; }
  .quiz-back-link svg { width: 15px; height: 15px; }
}

@media (max-width: 360px) {
  .quiz-header { padding-inline: 8px; gap: 5px; }
  .quiz-brand-mark { width: 29px; height: 29px; }
  .quiz-brand-name { font-size: 15px; }
  .quiz-back-link { gap: 4px; padding-inline: 7px; font-size: 0.72rem; }
}

@media (prefers-reduced-motion: reduce) {
  .quiz-header::after { animation: none; }
}

/* Shared report button and Netlify form */
.btn-bug-float {
  position: fixed;
  right: 24px;
  bottom: 36px;
  z-index: 99;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: rgba(18, 22, 34, 0.9);
  color: var(--text-primary);
  border: 1px solid var(--apple-border-strong);
  padding: 10px 18px;
  border-radius: 999px;
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.55);
  transition: all 0.28s var(--ease-apple);
}

.btn-bug-float svg { color: var(--apple-red); }

.btn-bug-float:hover {
  background: rgba(28, 35, 52, 0.98);
  border-color: rgba(225, 29, 72, 0.5);
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 12px 36px rgba(255, 69, 58, 0.22);
}

.report-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: rgba(4, 6, 10, 0.78);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s var(--ease-apple), visibility 0.3s ease;
}

.report-modal-overlay.active { opacity: 1; visibility: visible; }

.report-modal {
  width: min(480px, 100%);
  padding: 26px 24px;
  background: linear-gradient(180deg, rgba(22, 28, 44, 0.96) 0%, rgba(11, 14, 24, 0.98) 100%);
  border: 1px solid var(--apple-border-strong);
  border-radius: 22px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.65);
}

.report-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}

.report-modal-header h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: #fff;
  font-size: 1.25rem;
}

.report-modal-header h3 svg { color: var(--apple-red); }

.btn-close-modal {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-secondary);
  cursor: pointer;
}

.report-modal-close {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  font-size: 24px;
  line-height: 1;
}

.report-modal-close:hover,
.report-modal-close:focus-visible {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-primary);
}

.report-form,
.report-form-group { display: flex; flex-direction: column; gap: 14px; }
.form-group { display: flex; flex-direction: column; gap: 6px; text-align: start; }
.form-group label { color: #cbd5e1; font-size: 13.5px; font-weight: 700; }

.form-group input,
.form-group select,
.form-group textarea,
.report-form-input,
.report-form-textarea {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid var(--apple-border);
  border-radius: 12px;
  background: rgba(10, 14, 24, 0.7);
  color: var(--text-primary);
  font: inherit;
  font-size: 14.5px;
}

.form-group textarea,
.report-form-textarea { min-height: 80px; resize: vertical; }
.form-group input:focus, .form-group select:focus, .form-group textarea:focus { outline: none; border-color: var(--apple-blue); }

.report-form-label {
 color: #cbd5e1;
 font-size: 13.5px;
 font-weight: 700;
}

.report-form-input:focus,
.report-form-textarea:focus {
 outline: none;
 border-color: var(--apple-blue);
}

.btn-submit-report,
.report-form-submit {
 margin-top: 6px;
 padding: 12px;
  border: 0;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--apple-red), #9f1239);
  color: #fff;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}

.report-form-submit:disabled {
  opacity: 0.65;
  cursor: wait;
}

.report-status { display: none; padding: 12px; border-radius: 12px; font-weight: 700; text-align: center; }
.report-status.success { display: block; background: rgba(48, 209, 88, 0.15); color: #85e99e; }
.report-status.error { display: block; background: rgba(255, 69, 58, 0.15); color: #ff9b94; }

@media (max-width: 480px) {
  .btn-bug-float { bottom: 20px; right: 16px; padding: 8px 14px; font-size: 13px; }
}

.masthead {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  padding: 20px clamp(20px, 6vw, 72px);
  background:
    radial-gradient(circle at 88% -30%, rgba(10, 132, 255, 0.2), transparent 36%),
    radial-gradient(circle at 12% -35%, rgba(255, 69, 58, 0.12), transparent 32%),
    linear-gradient(180deg, rgba(18, 24, 38, 0.96), rgba(7, 9, 14, 0.94));
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--apple-border);
  position: relative;
  z-index: 50;
  overflow: hidden;
}

.masthead::before,
.masthead::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.masthead::before {
  width: 22%;
  min-width: 180px;
  height: 2px;
  top: 0;
  right: 8%;
  background: linear-gradient(90deg, transparent, var(--apple-blue), transparent);
  box-shadow: 0 0 22px rgba(10, 132, 255, 0.7);
}

.masthead::after {
  width: 28%;
  height: 1px;
  bottom: -1px;
  left: 6%;
  background: linear-gradient(90deg, transparent, var(--apple-red));
  box-shadow: 0 0 16px rgba(255, 69, 58, 0.8);
}

.masthead > * {
  position: relative;
  z-index: 1;
}

.masthead .brand-line {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  flex: none;
}

.masthead .brand-mark {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 10px;
  background: linear-gradient(145deg, var(--apple-red), #9f1239 68%);
  box-shadow: 0 7px 22px rgba(255, 69, 58, 0.25);
}

.masthead .brand-mark span {
  width: 12px;
  height: 12px;
  border: 2px solid rgba(255, 255, 255, 0.92);
  border-radius: 50%;
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.12);
}

.masthead .brand {
  font-size: clamp(1.8rem, 4vw, 2.35rem);
  font-weight: 900;
  letter-spacing: 2px;
  color: #ffffff;
  display: inline-block;
  position: relative;
  text-decoration: none;
  text-shadow: 0 0 24px rgba(255, 255, 255, 0.14);
}

.masthead .brand::after {
  content: "";
  position: absolute;
  bottom: -5px;
  left: 10%;
  width: 80%;
  height: 3px;
  background: var(--apple-red);
  border-radius: 99px;
  box-shadow: 0 0 12px rgba(255, 69, 58, 0.7);
}

.masthead .sub-brand {
  display: flex;
  align-items: center;
  gap: 9px;
  max-width: 380px;
  color: #aeb9ca;
  font-size: 0.88rem;
  line-height: 1.5;
  font-weight: 500;
}

.masthead .sub-brand::before {
  content: "";
  width: 7px;
  height: 7px;
  flex: none;
  border-radius: 50%;
  background: var(--apple-green);
  box-shadow: 0 0 12px rgba(48, 209, 88, 0.8);
}

@media (max-width: 600px) {
  .masthead {
    flex-direction: column;
    justify-content: center;
    gap: 12px;
    padding: 18px 20px 20px;
  }

  .masthead .sub-brand {
    justify-content: center;
    text-align: center;
  }
}

@keyframes examPageEnter {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes examPageLeave {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  body {
    animation: none;
  }

  body.page-leave {
    animation: none;
  }

  .page-transition {
    transition: none;
  }
}

.container {
  max-width: 880px;
  margin: 0 auto;
  padding: 24px 20px 80px;
}

.bottom-nav-bar > a.btn-bottom-action:not(.btn-drive-action) {
  display: none;
}

.subject-title {
  font-size: 2rem;
  font-weight: 800;
  color: #ffffff;
  margin-bottom: 6px;
  text-align: center;
  letter-spacing: -0.02em;
}

.subject-subtitle {
  color: var(--text-secondary);
  font-size: 0.95rem;
  text-align: center;
  margin-bottom: 28px;
}

.sticky-bar {
  position: sticky;
  top: 18px;
  z-index: 99;
  background: rgba(18, 24, 38, 0.72) !important;
  backdrop-filter: blur(30px) saturate(180%);
  -webkit-backdrop-filter: blur(30px) saturate(180%);
  border: 1px solid var(--apple-border-strong);
  border-radius: 20px;
  padding: 12px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 32px;
  box-shadow: 0 20px 40px -15px rgba(0, 0, 0, 0.7), inset 0 1px 1px rgba(255, 255, 255, 0.1);
  transition: all 0.3s var(--ease-apple);
}

.sticky-bar:where(:not(:first-child)) {
  border-color: rgba(255, 255, 255, 0.22);
}

@media (max-width: 600px) {
  .sticky-bar {
    top: 10px;
    flex-wrap: wrap;
    gap: 10px;
    padding: 10px 14px;
  }

  .sticky-bar > div:last-child {
    width: 100%;
  }

  .sticky-bar .btn {
    flex: 1;
    min-width: 0;
    padding-inline: 10px;
  }
}

.score-text {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-primary);
}

.score-val {
  font-family: 'JetBrains Mono', monospace;
  color: var(--apple-red);
  font-size: 1.15rem;
  font-weight: 700;
  margin-right: 4px;
}

.btn {
  background: #ffffff;
  color: #000000;
  border: none;
  padding: 8px 18px;
  border-radius: 99px;
  font-weight: 700;
  font-size: 0.88rem;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(255, 255, 255, 0.12);
  transition: all 0.25s var(--ease-apple);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.btn:hover {
  background: #f0f0f2;
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(255, 255, 255, 0.2);
}

.btn:active {
  transform: scale(0.96);
  filter: brightness(0.92);
}

.btn-secondary {
  background: rgba(255, 255, 255, 0.08);
  color: #e5e5ea;
  border: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: none;
}

.btn-secondary:hover {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.15);
  color: #ffffff;
}

.q-card {
  background: var(--apple-surface) !important;
  backdrop-filter: blur(25px);
  -webkit-backdrop-filter: blur(25px);
  border: 1px solid var(--apple-border);
  border-radius: 24px;
  padding: 26px;
  margin-bottom: 24px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35), inset 0 1px 1px rgba(255, 255, 255, 0.06);
  transition: transform 0.4s var(--ease-apple), border-color 0.4s var(--ease-apple);
}

.q-card:hover {
  border-color: rgba(255, 255, 255, 0.14);
  transform: translateY(-2px);
}

.q-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
}

.q-badge {
  background: rgba(255, 69, 58, 0.12);
  color: var(--apple-red);
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.82rem;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 99px;
  border: 1px solid rgba(255, 69, 58, 0.2);
}

.q-text {
  direction: ltr;
  text-align: left;
  font-size: 1.05rem;
  line-height: 1.65;
  color: #f1f2f6;
  margin-bottom: 20px;
  font-weight: 600;
}

.q-image-container {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  margin: 0;
  padding: 0;
  background: rgba(10, 14, 22, 0.85);
  border: 1px solid transparent;
  border-radius: 18px;
  text-align: center;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5), inset 0 1px 1px rgba(255, 255, 255, 0.05);
  transform: scale(0.96) translateY(-8px);
  filter: blur(8px);
  transition: 
    max-height 0.6s var(--ease-apple),
    opacity 0.4s var(--ease-apple),
    transform 0.5s var(--ease-apple),
    filter 0.4s var(--ease-apple),
    margin 0.4s var(--ease-apple),
    padding 0.4s var(--ease-apple),
    border-color 0.3s ease;
}

.q-image-container {
  display: flex !important;
  flex-direction: column;
  justify-content: center !important;
  align-items: center !important;
  text-align: center;
  direction: ltr !important; /* لمنع الـ RTL من رمي الصورة لليمين */
  width: 100%;
  box-sizing: border-box;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  filter: blur(8px);
  transform: scale(0.95) translateY(-10px);
  transition: all 0.4s var(--ease-apple);
  border: 1px solid transparent;
  border-radius: 14px;
  background: rgba(0, 0, 0, 0.4);
  margin: 0 auto;
}

.q-image-container.show {
  max-height: 1200px;
  opacity: 1;
  filter: blur(0px);
  transform: scale(1) translateY(0);
  margin: 16px auto 22px auto !important;
  padding: 16px;
  border-color: var(--apple-border-strong);
}

.q-original-img {
  max-width: 100%;
  max-height: 480px;
  height: auto;
  margin: 0 auto !important;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  display: block !important;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.65);
  transition: transform 0.4s var(--ease-apple);
}

.q-image-container.show .q-original-img {
  animation: appleScaleBounce 0.5s var(--ease-apple);
}

@keyframes appleScaleBounce {
  0% { transform: scale(0.97); }
  60% { transform: scale(1.01); }
  100% { transform: scale(1); }
}

.options-list {
  display: flex;
  flex-direction: column;
  gap: 11px;
  direction: ltr;
  text-align: left;
}

.options-list.locked {
  pointer-events: none;
}

.options-list.locked .option-item:not(.correct):not(.wrong) {
  opacity: 0.4;
  transform: scale(0.99);
}

.option-item {
  background: rgba(28, 36, 52, 0.55) !important;
  border: 1px solid var(--apple-border);
  border-radius: 14px;
  padding: 14px 18px;
  display: flex;
  align-items: center;
  cursor: pointer;
  color: #d1d5db;
  font-size: 0.96rem;
  font-weight: 500;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  transition: 
    background-color 0.25s var(--ease-apple),
    border-color 0.25s var(--ease-apple),
    transform 0.25s var(--ease-apple),
    color 0.25s var(--ease-apple),
    box-shadow 0.25s var(--ease-apple);
}

.option-item:hover {
  background: var(--apple-surface-hover) !important;
  border-color: rgba(255, 255, 255, 0.18);
  color: #ffffff;
  transform: translateX(4px);
}

.option-item:active {
  transform: scale(0.97);
}

.opt-letter {
  width: 28px;
  height: 28px;
  background: rgba(255, 255, 255, 0.07);
  color: #e5e5ea;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 14px;
  font-weight: 700;
  font-size: 0.85rem;
  flex-shrink: 0;
  transition: all 0.25s var(--ease-apple);
}

.option-item:hover .opt-letter {
  background: rgba(255, 255, 255, 0.15);
}

.option-item.correct {
  background: rgba(48, 209, 88, 0.14) !important;
  border-color: var(--apple-green) !important;
  color: #7bf197 !important;
  box-shadow: 0 0 20px rgba(48, 209, 88, 0.18);
  transform: scale(1.01);
}

.option-item.correct .opt-letter {
  background: var(--apple-green);
  color: #000000;
  font-weight: 800;
}

.option-item.wrong {
  background: rgba(255, 69, 58, 0.14) !important;
  border-color: var(--apple-red) !important;
  color: #ff9b94 !important;
  box-shadow: 0 0 20px rgba(255, 69, 58, 0.18);
  animation: appleShake 0.4s var(--ease-apple);
}

.option-item.wrong .opt-letter {
  background: var(--apple-red);
  color: #ffffff;
  font-weight: 800;
}

@keyframes appleShake {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-6px); }
  40%, 80% { transform: translateX(6px); }
}

.q-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 18px;
}

.btn-action {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--apple-border);
  color: #b0b3b8;
  padding: 7px 16px;
  border-radius: 99px;
  cursor: pointer;
  font-size: 0.86rem;
  font-weight: 600;
  transition: all 0.25s var(--ease-apple);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.btn-action:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.2);
  color: #ffffff;
  transform: translateY(-1px);
}

.btn-action:active {
  transform: scale(0.95);
}

.btn-reset-q {
  display: none;
  background: rgba(255, 69, 58, 0.12);
  border: 1px solid rgba(255, 69, 58, 0.3);
  color: #ff6b62;
  padding: 7px 16px;
  border-radius: 99px;
  cursor: pointer;
  font-size: 0.86rem;
  font-weight: 700;
  transition: all 0.25s var(--ease-apple);
}

.btn-reset-q:hover {
  background: rgba(255, 69, 58, 0.22);
  border-color: var(--apple-red);
  color: #ffffff;
  transform: translateY(-1px);
}

.btn-reset-q:active {
  transform: scale(0.95);
}

.solution-box {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  margin: 0;
  padding: 0;
  background: rgba(12, 17, 26, 0.7);
  backdrop-filter: blur(15px);
  border-right: 4px solid var(--apple-blue);
  border-radius: 12px;
  font-size: 0.94rem;
  line-height: 1.65;
  color: #d1d5db;
  transform: translateY(-4px);
  transition: 
    max-height 0.45s var(--ease-apple),
    opacity 0.35s var(--ease-apple),
    transform 0.35s var(--ease-apple),
    margin 0.35s var(--ease-apple),
    padding 0.35s var(--ease-apple);
}

.solution-box.show {
  max-height: 400px;
  opacity: 1;
  transform: translateY(0);
  margin-top: 14px;
  padding: 16px 20px;
}

body .solution-box {
  display: block;
  margin: 0;
  padding: 0;
}

body .solution-box.show {
  margin-top: 14px;
  padding: 16px 20px;
}

.solution-box strong {
  color: var(--apple-blue);
}

/* =========================================================
   Exams Modern Layout & Filter Tabs (شبكة الكروت والتبويبات)
   ========================================================= */
.exams-filter-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  overflow-x: auto;
  padding: 4px 2px 16px;
  margin-bottom: 20px;
  scrollbar-width: none;
}

.exams-filter-bar::-webkit-scrollbar {
  display: none;
}

.exam-filter-btn {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--apple-border);
  color: var(--text-secondary);
  padding: 7px 16px;
  border-radius: 999px;
  font: inherit;
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  transition: all 0.25s var(--ease-apple);
}

.exam-filter-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
  border-color: var(--apple-border-strong);
}

.exam-filter-btn.active {
  background: var(--apple-blue);
  color: #ffffff;
  border-color: var(--apple-blue);
  box-shadow: 0 4px 16px rgba(10, 132, 255, 0.35);
}

.exams-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}

.exam-grid-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: var(--apple-surface);
  border: 1px solid var(--apple-border);
  border-radius: 18px;
  padding: 18px 20px;
  backdrop-filter: blur(25px);
  -webkit-backdrop-filter: blur(25px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35), inset 0 1px 1px rgba(255, 255, 255, 0.06);
  transition: all 0.28s var(--ease-apple);
  position: relative;
  overflow: hidden;
}

.exam-grid-card:hover {
  background: var(--apple-surface-hover);
  border-color: var(--apple-border-strong);
  transform: translateY(-4px);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.55), inset 0 1px 1px rgba(255, 255, 255, 0.1);
}

.exam-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.exam-type-pill {
  font-size: 11.5px;
  font-family: 'JetBrains Mono', monospace;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 6px;
}

.pill-final {
  background: rgba(255, 69, 58, 0.16);
  color: #ff9b94;
  border: 1px solid rgba(255, 69, 58, 0.25);
}

.pill-mid {
  background: rgba(10, 132, 255, 0.16);
  color: #7dd3fc;
  border: 1px solid rgba(10, 132, 255, 0.25);
}

.pill-first {
  background: rgba(245, 158, 11, 0.16);
  color: #fcd34d;
  border: 1px solid rgba(245, 158, 11, 0.25);
}

.pill-quiz {
  background: rgba(48, 209, 88, 0.16);
  color: #85e99e;
  border: 1px solid rgba(48, 209, 88, 0.25);
}

.pill-other {
  background: rgba(255, 255, 255, 0.08);
  color: #cbd5e1;
  border: 1px solid var(--apple-border);
}

.exam-grid-card .name {
  font-size: 15.5px;
  font-weight: 800;
  color: #ffffff;
  line-height: 1.4;
  margin-bottom: 6px;
}

.exam-grid-card .note {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.5;
  margin-bottom: 16px;
}

.exam-card-actions {
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.exam-card-actions .btn-quiz {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  background: linear-gradient(135deg, rgba(255, 69, 58, 0.18) 0%, rgba(10, 132, 255, 0.18) 100%);
  border: 1px solid var(--apple-red);
  color: #ff9b94;
  padding: 8px 18px;
  border-radius: 99px;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  transition: all 0.25s var(--ease-apple);
}

.exam-card-actions .btn-quiz:hover {
  background: var(--apple-red);
  color: #ffffff;
  transform: translateY(-1px) scale(1.01);
  box-shadow: 0 4px 18px rgba(255, 69, 58, 0.35);
}

.exam-card-actions .filelink {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  color: var(--apple-blue);
  text-decoration: none;
  font-weight: 600;
}

.exam-card-actions .filelink:hover {
  text-decoration: underline;
}

@media (max-width: 600px) {
  .exams-grid {
    grid-template-columns: 1fr;
  }
}

.bottom-nav-bar {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 25px;
}

.btn-bottom-back {
  background: var(--apple-surface);
  border: 1px solid var(--apple-border-strong);
  color: var(--text-primary);
  padding: 12px 28px;
  border-radius: 99px;
  text-decoration: none;
  font-weight: 700;
  font-size: 0.95rem;
  display: inline-flex;
  align-items: center;
  gap: 16px;
  backdrop-filter: blur(20px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
  transition: all 0.25s var(--ease-apple);
}

.btn-bottom-back:hover {
  background: var(--apple-surface-hover);
  border-color: rgba(255, 255, 255, 0.25);
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45);
}

.btn-bottom-back:active {
  transform: scale(0.96);
}

/* ---------- Footer ---------- */
footer {
  background: rgba(10, 14, 22, 0.85);
  border-top: 1px solid var(--apple-border);
  padding: 22px 22px;
  margin-top: auto;
  text-align: left;
  backdrop-filter: blur(15px);
}

footer p {
  margin: 4px;
  color: var(--text-secondary);
  font-size: 14px;
  font-weight: 700;
}

/* =========================================================
   LIGHT THEME (يفعّل فقط لما data-theme="light" على <html>)
   ========================================================= */
:root[data-theme="light"] {
  color-scheme: light;
  --bg-base: #f3f7ff;
  --apple-surface: rgba(255, 255, 255, 0.86);
  --apple-surface-hover: #ffffff;
  --apple-border: rgba(15, 40, 90, 0.10);
  --apple-border-strong: rgba(15, 40, 90, 0.18);
  --apple-red: #e11d48;
  --apple-green: #16a34a;
  --apple-blue: #0a6cf0;
  --text-primary: #0f1b33;
  --text-secondary: #55627d;
  --ink: #0b1b3d;
}

/* الخلفية: ألوان الأطراف الزرقاء والبرتقالية تتحرك وتتداخل (مثل الـ index) */
:root[data-theme="light"] { background-color: #f3f7ff !important; }
:root[data-theme="light"] body {
  background-color: transparent !important;
  color: #0f1b33 !important;
}
:root[data-theme="light"] body::before,
:root[data-theme="light"] body::after {
  content: "";
  position: fixed;
  inset: -25%;
  z-index: -1;
  pointer-events: none;
  will-change: transform;
}
:root[data-theme="light"] body::before {
  background:
    radial-gradient(46% 50% at 10% 14%, rgba(10, 108, 240, 0.55), transparent 70%),
    radial-gradient(44% 50% at 90% 86%, rgba(90, 169, 255, 0.60), transparent 70%),
    radial-gradient(30% 34% at 56% 6%,  rgba(37, 99, 235, 0.30), transparent 70%);
  animation: lightBlendBlue 20s ease-in-out infinite alternate;
}
:root[data-theme="light"] body::after {
  background:
    radial-gradient(44% 48% at 92% 12%, rgba(255, 122, 0, 0.50), transparent 70%),
    radial-gradient(44% 48% at 8% 90%,  rgba(255, 179, 71, 0.56), transparent 70%),
    radial-gradient(28% 32% at 46% 58%, rgba(255, 140, 90, 0.20), transparent 70%);
  animation: lightBlendOrange 24s ease-in-out infinite alternate;
}
@keyframes lightBlendBlue {
  0%   { transform: translate3d(-6%, 4%, 0) rotate(0deg) scale(1); }
  100% { transform: translate3d(14%, -10%, 0) rotate(18deg) scale(1.2); }
}
@keyframes lightBlendOrange {
  0%   { transform: translate3d(6%, -4%, 0) rotate(0deg) scale(1.1); }
  100% { transform: translate3d(-14%, 10%, 0) rotate(-20deg) scale(1.02); }
}
/* لا يتأثر body::before/after بـ overflow-x: لأنها fixed */
:root[data-theme="light"] .page-transition { background: #f3f7ff; }
:root[data-theme="light"] .page-transition-logo { filter: drop-shadow(0 0 18px rgba(10, 108, 240, 0.30)); }

/* ---------- الهيدر ---------- */
:root[data-theme="light"] .quiz-header,
:root[data-theme="light"] .masthead {
  background-color: transparent;
  background-image:
    radial-gradient(closest-side, rgba(10, 108, 240, 0.18), transparent),
    radial-gradient(closest-side, rgba(255, 122, 0, 0.16), transparent),
    linear-gradient(180deg, rgba(255, 255, 255, 0.86), rgba(243, 248, 255, 0.78));
  background-size: 42% 240%, 36% 240%, 100% 100%;
  background-repeat: no-repeat;
  background-position: 8% 0, 92% 100%, 0 0;
  -webkit-backdrop-filter: blur(16px) saturate(1.5);
          backdrop-filter: blur(16px) saturate(1.5);
  border-bottom-color: rgba(15, 40, 90, 0.08);
  box-shadow: 0 8px 30px rgba(15, 40, 90, 0.12);
}
:root[data-theme="light"] .quiz-brand,
:root[data-theme="light"] .masthead .brand { color: #0b1b3d; text-shadow: none; }
:root[data-theme="light"] .quiz-header-title,
:root[data-theme="light"] .masthead .sub-brand { color: #55627d; }
:root[data-theme="light"] .quiz-back-link {
  background: rgba(255, 255, 255, 0.92);
  border-color: rgba(10, 108, 240, 0.32);
  color: #0a4fb8;
  box-shadow: 0 4px 14px rgba(10, 108, 240, 0.12);
}
:root[data-theme="light"] .quiz-back-link:hover { background: #0a6cf0; border-color: #0a6cf0; color: #fff; }

/* ---------- العناوين والشريط العلوي للنتيجة ---------- */
:root[data-theme="light"] .subject-title { color: #0b1b3d; }
:root[data-theme="light"] .sticky-bar {
  background: rgba(255, 255, 255, 0.82) !important;
  box-shadow: 0 14px 34px -14px rgba(15, 40, 90, 0.28), inset 0 1px 1px rgba(255, 255, 255, 0.9);
}
:root[data-theme="light"] .sticky-bar:where(:not(:first-child)) { border-color: rgba(15, 40, 90, 0.18); }
:root[data-theme="light"] .score-val { color: #e11d48; }

/* ---------- الأزرار ---------- */
:root[data-theme="light"] .btn {
  background: #0a6cf0;
  color: #ffffff;
  box-shadow: 0 4px 14px rgba(10, 108, 240, 0.30);
}
:root[data-theme="light"] .btn:hover { background: #0856c4; box-shadow: 0 8px 22px rgba(10, 108, 240, 0.40); }
:root[data-theme="light"] .btn-secondary {
  background: rgba(255, 255, 255, 0.92);
  color: #334155;
  border-color: rgba(15, 40, 90, 0.14);
  box-shadow: none;
}
:root[data-theme="light"] .btn-secondary:hover { background: #eaf2ff; color: #0a4fb8; border-color: #0a6cf0; box-shadow: none; }
:root[data-theme="light"] .btn-action { background: rgba(255, 255, 255, 0.9); color: #475569; }
:root[data-theme="light"] .btn-action:hover { background: #eaf2ff; color: #0a4fb8; border-color: #0a6cf0; }
:root[data-theme="light"] .btn-reset-q { background: rgba(225, 29, 72, 0.08); color: #be123c; border-color: rgba(225, 29, 72, 0.3); }
:root[data-theme="light"] .btn-reset-q:hover { background: #e11d48; color: #fff; }

/* ---------- كروت الأسئلة ---------- */
:root[data-theme="light"] .q-card {
  background: rgba(255, 255, 255, 0.90) !important;
  box-shadow: 0 10px 26px rgba(15, 40, 90, 0.12), inset 0 1px 1px rgba(255, 255, 255, 0.9);
}
:root[data-theme="light"] .q-card:hover { border-color: rgba(10, 108, 240, 0.30); }
:root[data-theme="light"] .q-text { color: #0f1b33; }
:root[data-theme="light"] .q-badge { background: rgba(225, 29, 72, 0.08); color: #be123c; border-color: rgba(225, 29, 72, 0.25); }
:root[data-theme="light"] .q-image-container { background: rgba(243, 247, 255, 0.9); }
:root[data-theme="light"] .q-image-container.show { box-shadow: 0 12px 28px rgba(15, 40, 90, 0.16); }
:root[data-theme="light"] .q-original-img { border-color: rgba(15, 40, 90, 0.12); box-shadow: 0 10px 26px rgba(15, 40, 90, 0.18); }

/* ---------- الخيارات ---------- */
:root[data-theme="light"] .option-item {
  background: rgba(255, 255, 255, 0.95) !important;
  color: #1e293b;
  box-shadow: 0 2px 8px rgba(15, 40, 90, 0.20);
}
:root[data-theme="light"] .option-item:hover {
  background: #eaf2ff !important;
  border-color: rgba(10, 108, 240, 0.45);
  color: #0b1b3d;
}
:root[data-theme="light"] .opt-letter { background: rgba(15, 40, 90, 0.07); color: #334155; }
:root[data-theme="light"] .option-item:hover .opt-letter { background: rgba(10, 108, 240, 0.15); }
:root[data-theme="light"] .option-item.correct {
  background: rgba(22, 163, 74, 0.12) !important;
  border-color: #16a34a !important;
  color: #14532d !important;
  box-shadow: 0 0 18px rgba(22, 163, 74, 0.16);
}
:root[data-theme="light"] .option-item.correct .opt-letter { background: #16a34a; color: #fff; }
:root[data-theme="light"] .option-item.wrong {
  background: rgba(225, 29, 72, 0.10) !important;
  border-color: #e11d48 !important;
  color: #9f1239 !important;
  box-shadow: 0 0 18px rgba(225, 29, 72, 0.14);
}

/* ---------- صندوق الحل ---------- */
:root[data-theme="light"] .solution-box { background: rgba(234, 242, 255, 0.92); color: #1e293b; }
:root[data-theme="light"] .solution-box strong { color: #0a6cf0; }

/* ---------- كروت الامتحانات والفلاتر ---------- */
:root[data-theme="light"] .exam-filter-btn { background: rgba(255, 255, 255, 0.92); color: #475569; border-color: rgba(15, 40, 90, 0.14); }
:root[data-theme="light"] .exam-filter-btn:hover { background: #eaf2ff; color: #0a4fb8; border-color: #0a6cf0; }
:root[data-theme="light"] .exam-filter-btn.active { background: #0a6cf0; color: #fff; border-color: #0a6cf0; box-shadow: 0 4px 14px rgba(10, 108, 240, 0.35); }
:root[data-theme="light"] .exam-grid-card { box-shadow: 0 10px 26px rgba(15, 40, 90, 0.12); }
:root[data-theme="light"] .exam-grid-card:hover { border-color: rgba(10, 108, 240, 0.35); box-shadow: 0 16px 34px rgba(15, 40, 90, 0.18); }
:root[data-theme="light"] .exam-grid-card .name { color: #0f1b33; }
:root[data-theme="light"] .exam-card-actions { border-top-color: rgba(15, 40, 90, 0.08); }
:root[data-theme="light"] .pill-final { background: rgba(225, 29, 72, 0.10); color: #be123c; border-color: rgba(225, 29, 72, 0.28); }
:root[data-theme="light"] .pill-mid   { background: rgba(10, 108, 240, 0.10); color: #1d4ed8; border-color: rgba(10, 108, 240, 0.28); }
:root[data-theme="light"] .pill-first { background: rgba(245, 158, 11, 0.14); color: #b45309; border-color: rgba(245, 158, 11, 0.35); }
:root[data-theme="light"] .pill-quiz  { background: rgba(22, 163, 74, 0.12); color: #15803d; border-color: rgba(22, 163, 74, 0.30); }
:root[data-theme="light"] .pill-other { background: rgba(15, 40, 90, 0.06); color: #475569; }
:root[data-theme="light"] .exam-card-actions .btn-quiz { background: linear-gradient(135deg, #0a6cf0, #2563eb); border-color: #0a6cf0; color: #fff; box-shadow: 0 4px 14px rgba(10, 108, 240, 0.28); }
:root[data-theme="light"] .exam-card-actions .btn-quiz:hover { background: linear-gradient(135deg, #0856c4, #1d4ed8); box-shadow: 0 8px 22px rgba(10, 108, 240, 0.40); }

/* ---------- أزرار التنقل السفلية + الفوتر ---------- */
:root[data-theme="light"] .btn-bottom-back { box-shadow: 0 8px 22px rgba(15, 40, 90, 0.14); }
:root[data-theme="light"] .btn-bottom-back:hover { border-color: #0a6cf0; box-shadow: 0 12px 28px rgba(15, 40, 90, 0.20); }
:root[data-theme="light"] footer {
  background: rgba(255, 255, 255, 0.82);
  -webkit-backdrop-filter: blur(16px) saturate(1.5);
          backdrop-filter: blur(16px) saturate(1.5);
  box-shadow: 0 -8px 30px rgba(15, 40, 90, 0.10);
}

/* ---------- زر التبليغ + المودال ---------- */
:root[data-theme="light"] .btn-bug-float { background: #ffffff; color: #0f1b33; box-shadow: 0 10px 26px rgba(15, 40, 90, 0.20); }
:root[data-theme="light"] .btn-bug-float:hover { background: #fff1f3; border-color: rgba(225, 29, 72, 0.5); }
:root[data-theme="light"] .report-modal-overlay { background: rgba(15, 30, 60, 0.45); }
:root[data-theme="light"] .report-modal { background: #ffffff; box-shadow: 0 24px 60px rgba(15, 40, 90, 0.28); }
:root[data-theme="light"] .report-modal-header h3 { color: #0b1b3d; }
:root[data-theme="light"] .btn-close-modal { background: rgba(15, 40, 90, 0.07); color: #475569; }
:root[data-theme="light"] .form-group label,
:root[data-theme="light"] .report-form-label { color: #334155; }
:root[data-theme="light"] .form-group input,
:root[data-theme="light"] .form-group select,
:root[data-theme="light"] .form-group textarea,
:root[data-theme="light"] .report-form-input,
:root[data-theme="light"] .report-form-textarea { background: #f3f7ff; color: #0f1b33; border-color: rgba(15, 40, 90, 0.16); }
:root[data-theme="light"] .report-status.success { background: rgba(22, 163, 74, 0.12); color: #15803d; }
:root[data-theme="light"] .report-status.error { background: rgba(225, 29, 72, 0.10); color: #be123c; }

/* ---------- عناصر مضافة من transition.js (التكبير) ---------- */
:root[data-theme="light"] .img-zoom-controls {
  background: rgba(255, 255, 255, 0.92) !important;
  border-color: rgba(15, 40, 90, 0.16) !important;
  box-shadow: 0 4px 12px rgba(15, 40, 90, 0.16) !important;
}
:root[data-theme="light"] .img-zoom-btn { color: #334155 !important; }
:root[data-theme="light"] .img-zoom-btn:hover { background: rgba(10, 108, 240, 0.12) !important; color: #0a4fb8 !important; }
:root[data-theme="light"] .img-zoom-viewport { background: rgba(243, 247, 255, 0.8) !important; border-color: rgba(15, 40, 90, 0.12) !important; }

/* ---------- العناصر المكتوبة داخل كل صفحة (inline <style>) ---------- */
:root[data-theme="light"] .bottom-nav-bar { border-top-color: rgba(15, 40, 90, 0.10); }
:root[data-theme="light"] .btn-bottom-action { box-shadow: 0 8px 22px rgba(15, 40, 90, 0.14); }
:root[data-theme="light"] .btn-bottom-action:hover { border-color: #0a6cf0; box-shadow: 0 12px 28px rgba(15, 40, 90, 0.20); }
:root[data-theme="light"] .btn-drive-action { background: linear-gradient(135deg, rgba(10, 108, 240, 0.10), rgba(22, 163, 74, 0.10)); border-color: rgba(10, 108, 240, 0.4); color: #0a4fb8; }
:root[data-theme="light"] .btn-drive-action:hover { background: #0a6cf0; color: #fff; border-color: #0a6cf0; }
:root[data-theme="light"] .parent-q-title { color: #0a6cf0; }
:root[data-theme="light"] .sub-question-card { background: rgba(255, 255, 255, 0.7); }
:root[data-theme="light"] pre.code-block { background: #eef3fc; color: #0b4a9e; border-color: rgba(15, 40, 90, 0.16); }
:root[data-theme="light"] .dnd-terminal-block { background: #eef3fc; border-color: rgba(15, 40, 90, 0.16); color: #1e293b; box-shadow: inset 0 2px 6px rgba(15, 40, 90, 0.08); }
:root[data-theme="light"] .dnd-slot-target { background: rgba(10, 108, 240, 0.08); color: #0a4fb8; }
:root[data-theme="light"] .dnd-slot-target.filled { background: #0a6cf0; color: #fff; }
:root[data-theme="light"] .dnd-slot-target.slot-correct { background: #16a34a !important; border-color: #16a34a !important; color: #fff !important; }
:root[data-theme="light"] .dnd-options-pool { background: rgba(255, 255, 255, 0.6); }
:root[data-theme="light"] .dnd-chip { background: #ffffff; color: #1e293b; border-color: rgba(15, 40, 90, 0.18); }
:root[data-theme="light"] .dnd-chip:hover { color: #0a4fb8; }
:root[data-theme="light"] .dnd-instructions { color: #55627d; }
:root[data-theme="light"] select.sub-select { background: #ffffff; color: #0a4fb8; border-color: rgba(15, 40, 90, 0.2); }
:root[data-theme="light"] select.sub-select.correct { border-color: #16a34a; background: rgba(22, 163, 74, 0.12); }
:root[data-theme="light"] select.sub-select.wrong { border-color: #e11d48; background: rgba(225, 29, 72, 0.10); }
:root[data-theme="light"] .option-item.correct .opt-indicator { border-color: #16a34a; background: #16a34a; }
:root[data-theme="light"] .option-item.wrong .opt-indicator { border-color: #e11d48; background: #e11d48; }

/* ---------- سحب وإفلات (النمط الثاني) + حقل الإجابة + رسمة الشجرة ---------- */
:root[data-theme="light"] .dnd-item {
  background: #ffffff;
  color: #0f1b33;
  border-color: rgba(15, 40, 90, 0.20);
  box-shadow: 0 2px 8px rgba(15, 40, 90, 0.08);
}
:root[data-theme="light"] .dnd-item:hover { border-color: #0a6cf0; color: #0a4fb8; }
:root[data-theme="light"] .dnd-zone { background: rgba(255, 255, 255, 0.65); border-color: rgba(15, 40, 90, 0.22); }
:root[data-theme="light"] .dnd-zone.drag-over { background: rgba(10, 108, 240, 0.10); border-color: #0a6cf0; }
:root[data-theme="light"] .dnd-zone.correct { background: rgba(22, 163, 74, 0.12) !important; border-color: #16a34a !important; }
:root[data-theme="light"] .dnd-zone.wrong { background: rgba(225, 29, 72, 0.10) !important; border-color: #e11d48 !important; }
:root[data-theme="light"] .dnd-pool-title,
:root[data-theme="light"] .dnd-target-title,
:root[data-theme="light"] .dnd-hint { color: #55627d; }
:root[data-theme="light"] .user-ans-input { background: #ffffff; color: #0f1b33; border-color: rgba(15, 40, 90, 0.22); }
:root[data-theme="light"] .user-ans-input:focus { border-color: #0a6cf0; }
:root[data-theme="light"] .user-ans-input.correct { border-color: #16a34a !important; background: rgba(22, 163, 74, 0.12) !important; }
:root[data-theme="light"] .user-ans-input.wrong { border-color: #e11d48 !important; background: rgba(225, 29, 72, 0.10) !important; }
:root[data-theme="light"] .svg-tree-container { background: rgba(255, 255, 255, 0.75); border-color: rgba(15, 40, 90, 0.12); }
:root[data-theme="light"] .svg-tree-container text[fill="#fff"],
:root[data-theme="light"] .svg-tree-container text[fill="#ffffff"] { fill: #0f1b33; }
:root[data-theme="light"] .svg-tree-container text[fill="#5ac8fa"] { fill: #0a6cf0; }
:root[data-theme="light"] .svg-tree-container line[stroke="#5ac8fa"],
:root[data-theme="light"] .svg-tree-container path[stroke="#5ac8fa"] { stroke: #0a6cf0; }
:root[data-theme="light"] .svg-tree-container path[fill="#5ac8fa"],
:root[data-theme="light"] .svg-tree-container polygon[fill="#5ac8fa"] { fill: #0a6cf0; }
:root[data-theme="light"] .svg-tree-container ellipse[fill="rgba(255,255,255,0.06)"],
:root[data-theme="light"] .svg-tree-container rect[fill="rgba(255,255,255,0.06)"] { fill: rgba(15, 40, 90, 0.06); }
:root[data-theme="light"] .svg-tree-container ellipse[fill="rgba(10,132,255,0.15)"] { fill: rgba(10, 108, 240, 0.14); }

/* ---------- جداول قواعد البيانات + صندوق SQL + شارة الأجزاء ---------- */
:root[data-theme="light"] .part-badge { background: rgba(10, 108, 240, 0.12); color: #0a4fb8; border-color: rgba(10, 108, 240, 0.40); }
:root[data-theme="light"] .db-table-card {
  background: #ffffff;
  border-color: rgba(10, 108, 240, 0.22);
  box-shadow: 0 8px 22px rgba(15, 40, 90, 0.10);
}
:root[data-theme="light"] .db-table-title { color: #0a4fb8; }
:root[data-theme="light"] .raw-table { color: #0f1b33; }
:root[data-theme="light"] .raw-table th,
:root[data-theme="light"] .raw-table td { border-color: rgba(15, 40, 90, 0.22); }
:root[data-theme="light"] .raw-table th {
  background: linear-gradient(180deg, #2b84f5, #0a6cf0);
  color: #ffffff;
  border-color: #0a6cf0;
}
:root[data-theme="light"] .raw-table tr:nth-child(even) td { background: rgba(10, 108, 240, 0.07); }
:root[data-theme="light"] .raw-table tr:hover td { background: rgba(10, 108, 240, 0.16); }
:root[data-theme="light"] .null-val { color: #64748b; }
:root[data-theme="light"] .code-sql-box {
  background: #f1f5fd;
  border-color: rgba(10, 108, 240, 0.28);
  color: #0f1b33;
  box-shadow: inset 0 1px 3px rgba(15, 40, 90, 0.08);
}
:root[data-theme="light"] .code-sql-box b,
:root[data-theme="light"] .code-sql-box strong { color: #0a4fb8; }

/* ---------- صفحات الـ ERD/الجداول (final2 وأشباهها): متغيرات الصفحة + الرسومات + الجداول ---------- */
:root[data-theme="light"] {
  --bg-primary: #f3f7ff;
  --bg-secondary: #ffffff;
  --apple-blue-glow: rgba(10, 108, 240, 0.18);
  --apple-orange: #ea8a00;
}
:root[data-theme="light"] .controls-bar {
  background: rgba(255, 255, 255, 0.90);
  box-shadow: 0 10px 26px rgba(15, 40, 90, 0.10);
}
:root[data-theme="light"] .btn-ctrl { background: rgba(255, 255, 255, 0.92); color: #334155; }
:root[data-theme="light"] .btn-ctrl:hover { background: #eaf2ff; color: #0a4fb8; border-color: #0a6cf0; }
:root[data-theme="light"] .btn-ctrl.btn-danger:hover { background: rgba(225, 29, 72, 0.10); color: #be123c; }
:root[data-theme="light"] .btn-ctrl.btn-reset-all { background: #0a6cf0; border-color: #0a6cf0; color: #ffffff; box-shadow: 0 4px 14px rgba(10, 108, 240, 0.30); }
:root[data-theme="light"] .btn-ctrl.btn-reset-all:hover { background: #0856c4; border-color: #0856c4; color: #ffffff; }
:root[data-theme="light"] .sub-question-card:hover { box-shadow: 0 10px 28px rgba(15, 40, 90, 0.14); }
:root[data-theme="light"] .sol-header { color: #0a6cf0; }
:root[data-theme="light"] .sol-body { color: #1e293b; }
:root[data-theme="light"] .sol-body strong { color: #0b1b3d; }

/* صندوق الرسمة (كان أسود) */
:root[data-theme="light"] .diagram-container {
  background: #ffffff;
  border-color: rgba(10, 108, 240, 0.22);
  box-shadow: 0 8px 22px rgba(15, 40, 90, 0.10);
}
:root[data-theme="light"] .diagram-container .box,
:root[data-theme="light"] .diagram-container .diamond,
:root[data-theme="light"] .diagram-container .attr,
:root[data-theme="light"] .diagram-container .attr-derived,
:root[data-theme="light"] .diagram-container .symc { fill: #f4f8ff; }
:root[data-theme="light"] .diagram-container .box,
:root[data-theme="light"] .diagram-container .box2 { stroke: #0a6cf0; }
:root[data-theme="light"] .diagram-container .diamond { stroke: #ea8a00; }
:root[data-theme="light"] .diagram-container .attr,
:root[data-theme="light"] .diagram-container .attr-derived { stroke: #64748b; }
:root[data-theme="light"] .diagram-container .line { stroke: #475569; }
:root[data-theme="light"] .diagram-container .sym,
:root[data-theme="light"] .diagram-container .symc { stroke: #16a34a; }
:root[data-theme="light"] .diagram-container .txt { fill: #0f1b33; }
:root[data-theme="light"] .diagram-container .txt-role { fill: #0a58c9; }
:root[data-theme="light"] .diagram-container .diag-title { fill: #55627d; }
:root[data-theme="light"] .diagram-container .attr-multi { fill: #f4f8ff; stroke: #64748b; }
:root[data-theme="light"] .diagram-container .schema-box { fill: #f4f8ff; stroke: #0a6cf0; }
:root[data-theme="light"] .diagram-container .schema-txt { fill: #0f1b33; }
:root[data-theme="light"] .diagram-container .card { fill: #15803d; }
:root[data-theme="light"] .diagram-container .arrow-line { stroke: #ea8a00; }
:root[data-theme="light"] .diagram-container svg [fill="#30d158"],
:root[data-theme="light"] .diagram-container svg [style*="fill:#30d158"],
:root[data-theme="light"] .diagram-container svg [style*="fill: #30d158"] { fill: #16a34a !important; }

/* الجداول: النص والرؤوس والحدود */
:root[data-theme="light"] .db-table-card { background: #ffffff; box-shadow: 0 6px 18px rgba(15, 40, 90, 0.10); border-color: rgba(10, 108, 240, 0.22); }
:root[data-theme="light"] .raw-table th,
:root[data-theme="light"] .raw-table td { border-color: rgba(15, 40, 90, 0.22); color: #0f1b33; }
:root[data-theme="light"] .raw-table th { background: linear-gradient(180deg, #2b84f5, #0a6cf0); color: #ffffff; border-color: #0a6cf0; }
:root[data-theme="light"] .raw-table tr:nth-child(even) td { background: rgba(10, 108, 240, 0.07); }
:root[data-theme="light"] .raw-table tr:hover td { background: rgba(10, 108, 240, 0.16); }
:root[data-theme="light"] .raw-table td u,
:root[data-theme="light"] .raw-table th u { text-decoration-color: currentColor; }

@media (prefers-reduced-motion: reduce) {
  :root[data-theme="light"] body::before,
  :root[data-theme="light"] body::after { animation: none; }
}