/* ============================================================
   American English Grammar Encyclopedia — Styles
   ============================================================ */

/* ============ المتغيرات ============ */
:root {
  --bg: #f6f7fb;
  --bg-alt: #ffffff;
  --bg-elevated: #ffffff;
  --text: #0f172a;
  --text-muted: #64748b;
  --text-soft: #94a3b8;
  --primary: #4f46e5;
  --primary-dark: #4338ca;
  --primary-soft: #eef2ff;
  --accent: #06b6d4;
  --border: #e2e8f0;
  --border-strong: #cbd5e1;

  --sidebar-bg: #0f172a;
  --sidebar-text: #cbd5e1;
  --sidebar-hover: rgba(255,255,255,.06);
  --sidebar-active-bg: rgba(99,102,241,.18);
  --sidebar-active-text: #fff;

  --success: #10b981;
  --warning: #f59e0b;
  --danger: #ef4444;

  --note-bg: #eff6ff;      --note-border: #3b82f6;   --note-text: #1e40af;
  --concept-bg: #ecfdf5;   --concept-border: #10b981; --concept-text: #065f46;
  --pitfall-bg: #fef2f2;   --pitfall-border: #ef4444; --pitfall-text: #991b1b;
  --advanced-bg: #faf5ff;  --advanced-border: #a855f7; --advanced-text: #6b21a8;
  --practice-bg: #fffbeb;  --practice-border: #f59e0b; --practice-text: #92400e;
  --analysis-bg: #f0f9ff;  --analysis-border: #0ea5e9; --analysis-text: #075985;

  --radius: 12px;
  --radius-lg: 18px;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.05);
  --shadow: 0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.04);
  --shadow-lg: 0 10px 30px rgba(0,0,0,.1);
  --header-h: 68px;
  /* Inter للاتيني + IBM Plex Sans Arabic للعربي (انظر css/fonts.css) */
  --font-ar: 'Inter', 'IBM Plex Sans Arabic', 'Segoe UI', Tahoma, system-ui, -apple-system, sans-serif;
  --font-en: 'Inter', 'IBM Plex Sans Arabic', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-code: 'JetBrains Mono', 'Consolas', 'Monaco', 'Courier New', monospace;
  --transition: .25s cubic-bezier(.4,0,.2,1);
}

[data-theme="dark"] {
  --bg: #0b1220;
  --bg-alt: #111a2e;
  --bg-elevated: #1a2540;
  --text: #e2e8f0;
  --text-muted: #94a3b8;
  --text-soft: #64748b;
  --primary-soft: #1e1b4b;
  --border: #1e293b;
  --border-strong: #334155;
  --sidebar-bg: #030712;

  --note-bg: #0c2d5c;      --note-text: #bfdbfe;
  --concept-bg: #064e3b;   --concept-text: #a7f3d0;
  --pitfall-bg: #4c0519;   --pitfall-text: #fecaca;
  --advanced-bg: #3b0764;  --advanced-text: #e9d5ff;
  --practice-bg: #451a03;  --practice-text: #fde68a;
  --analysis-bg: #082f49;  --analysis-text: #bae6fd;
}

/* ============ Reset & Base ============ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; }

/* ============ الهيدر ============ */
.menu-toggle {
  display: none; background: none; border: none; cursor: pointer;
  font-size: 22px; color: var(--text); padding: 6px 10px; border-radius: 8px;
}
.menu-toggle:hover { background: var(--primary-soft); }
.logo-mark {
  width: 40px; height: 40px; border-radius: 10px;
  background: linear-gradient(135deg, var(--primary), var(--accent));
  color: #fff; display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 15px; letter-spacing: -.5px;
  box-shadow: 0 4px 12px rgba(79,70,229,.3);
}
.logo-text { display: flex; flex-direction: column; line-height: 1.2; }
.logo-text { font-weight: 800; font-size: 16px; color: var(--text); }
.logo-text small { font-size: 11px; font-weight: 500; color: var(--text-muted); }

.search-wrap input {
  width: 100%; padding: 10px 42px 10px 16px;
  border: 1px solid var(--border); border-radius: 10px;
  background: var(--bg); color: var(--text); font-size: 14px;
  font-family: inherit; outline: none; transition: border var(--transition);
}
.search-wrap input:focus { border-color: var(--primary); background: var(--bg-alt); }
.search-wrap::before {
  content: "🔍"; position: absolute; right: 14px; top: 50%;
  transform: translateY(-50%); font-size: 14px; opacity: .5; pointer-events: none;
}
.search-results { display: none; }
.search-results.open { display: block; }
.search-result-item {
  padding: 12px 16px; border-bottom: 1px solid var(--border);
  cursor: pointer; transition: background var(--transition);
}
.search-result-item:last-child { border-bottom: none; }
.search-result-item:hover { background: var(--primary-soft); }
.search-result-item .sr-title { font-weight: 700; font-size: 14px; margin-bottom: 4px; color: var(--text); }
.search-result-item .sr-snippet { font-size: 12.5px; color: var(--text-muted); }
.search-result-item mark { background: #fde68a; color: #78350f; padding: 0 3px; border-radius: 3px; }
[data-theme="dark"] .search-result-item mark { background: #78350f; color: #fde68a; }

.icon-btn:hover { background: var(--primary); color: #fff; border-color: var(--primary); transform: translateY(-1px); }

/* ============ شريط التقدم ============ */
.progress-bar {
  position: fixed; top: var(--header-h); left: 0; right: 0; height: 3px;
  background: var(--border); z-index: 99;
}
.progress-bar .fill {
  height: 100%;
  background: linear-gradient(90deg, var(--primary), var(--accent));
  width: 0%; transition: width .5s cubic-bezier(.4,0,.2,1);
  box-shadow: 0 0 10px rgba(79,70,229,.5);
}

/* ============ الشريط الجانبي ============ */
#sidebar::-webkit-scrollbar { width: 6px; }
#sidebar::-webkit-scrollbar-track { background: transparent; }
#sidebar::-webkit-scrollbar-thumb { background: #334155; border-radius: 3px; }
#sidebar::-webkit-scrollbar-thumb:hover { background: #475569; }

.nav-home {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 20px; margin: 0 8px 12px;
  border-radius: 10px; color: var(--sidebar-text);
  font-weight: 600; font-size: 14px;
  transition: all var(--transition);
}
.nav-home:hover { background: var(--sidebar-hover); color: #fff; text-decoration: none; }
.nav-home.active { background: var(--sidebar-active-bg); color: var(--sidebar-active-text); }

.nav-phase { margin-bottom: 6px; }
.nav-phase-title {
  padding: 12px 20px; font-weight: 700; font-size: 13.5px;
  color: #fff; cursor: pointer; user-select: none;
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; transition: background var(--transition);
}
.nav-phase-title:hover { background: var(--sidebar-hover); }
.nav-phase-title .phase-left { display: flex; align-items: center; gap: 10px; }
.nav-phase-title .phase-icon { font-size: 16px; }
.nav-phase-title .phase-badge {
  font-size: 10px; background: rgba(255,255,255,.12); color: #cbd5e1;
  padding: 2px 8px; border-radius: 20px; font-weight: 600;
  letter-spacing: .3px; white-space: nowrap;
}
.nav-phase-title .caret {
  font-size: 11px; opacity: .6; transition: transform var(--transition);
}
.nav-phase.open .caret { transform: rotate(90deg); }
.nav-list { max-height: 0; overflow: hidden; transition: max-height var(--transition); }
.nav-phase.open .nav-list { max-height: 2500px; }
.nav-list a {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 20px 9px 40px; font-size: 13px;
  color: var(--sidebar-text); position: relative;
  border-right: 3px solid transparent;
  transition: all var(--transition);
}
.nav-list a:hover { background: var(--sidebar-hover); color: #fff; text-decoration: none; }
.nav-list a.active {
  background: var(--sidebar-active-bg); color: #fff;
  border-right-color: var(--primary); font-weight: 600;
}
.nav-list a .ch-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: #475569; flex-shrink: 0; transition: all var(--transition);
}
.nav-list a.active .ch-dot { background: var(--primary); box-shadow: 0 0 8px var(--primary); }
.nav-list a.done .ch-dot { background: var(--success); }
.nav-list a .ch-title { flex: 1; }

/* ============ المحتوى الرئيسي ============ */
#main {
  flex: 1; margin: 0 auto; width: 100%;
}
.chapter { animation: fadeIn .4s ease; }
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

/* ============ ترويسة الفصل ============ */

.chapter-header .phase-label {
  font-size: 12px; text-transform: uppercase; letter-spacing: 1.5px;
  opacity: .9; font-weight: 700; display: inline-block;
  background: rgba(255,255,255,.18); padding: 4px 12px; border-radius: 20px;
  margin-bottom: 12px;
}
.chapter-header h1 { font-size: 30px; margin: 4px 0 8px; font-weight: 800; line-height: 1.3; }
.chapter-header p { font-size: 15.5px; opacity: .95; max-width: 700px; }

/* ============ الصفحة الرئيسية ============ */
.home-hero { text-align: center; padding: 24px 0 48px; }
.home-hero h1 {
  font-size: clamp(30px, 5vw, 42px); font-weight: 800;
  background: linear-gradient(135deg, var(--primary), var(--accent));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text; margin-bottom: 16px; line-height: 1.25;
}
.home-hero p { font-size: 17px; color: var(--text-muted); max-width: 640px; margin: 0 auto; }

.phase-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px; margin-top: 40px;
}
.phase-card {
  background: var(--bg-alt); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 24px; cursor: pointer;
  transition: all var(--transition); box-shadow: var(--shadow-sm);
  position: relative; overflow: hidden;
}
.phase-card::before {
  content: ""; position: absolute; top: 0; right: 0; width: 4px; height: 100%;
  background: linear-gradient(var(--primary), var(--accent));
  transform: scaleY(0); transform-origin: top; transition: transform var(--transition);
}
.phase-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--primary); }
.phase-card:hover::before { transform: scaleY(1); }
.phase-card .pc-num {
  font-size: 11px; font-weight: 800; color: var(--primary);
  letter-spacing: 1.5px; text-transform: uppercase;
}
.phase-card h3 { margin: 8px 0 4px; font-size: 19px; font-weight: 700; }
.phase-card .pc-level {
  font-size: 11.5px; color: var(--text-muted);
  background: var(--bg); display: inline-block;
  padding: 3px 10px; border-radius: 20px; margin-top: 6px;
  border: 1px solid var(--border);
}
.phase-card p { font-size: 13.5px; color: var(--text-muted); margin: 12px 0 0; line-height: 1.7; }

/* ============ المحتوى ============ */
.chapter h2 {
  font-size: 23px; margin: 36px 0 16px; color: var(--text);
  border-bottom: 2px solid var(--border); padding-bottom: 10px;
  font-weight: 800;
}
.chapter h3 { font-size: 19px; margin: 28px 0 12px; color: var(--primary); font-weight: 700; }
.chapter h4 { font-size: 16.5px; margin: 20px 0 8px; color: var(--text); font-weight: 700; }
.chapter h5 { font-size: 14.5px; margin: 14px 0 6px; color: var(--text-muted); font-weight: 700; }
.chapter p { margin: 10px 0; }

.chapter li { margin: 6px 0; }
.chapter strong { color: var(--text); font-weight: 700; }
.chapter em { font-style: normal; color: var(--text-muted); }

.chapter code {
  background: var(--primary-soft); color: var(--primary);
  padding: 2px 8px; border-radius: 6px; font-size: .88em;
  font-family: var(--font-code); direction: ltr;
  display: inline-block; unicode-bidi: embed; font-weight: 600;
  border: 1px solid rgba(79,70,229,.15);
}
[data-theme="dark"] .chapter code { color: #a5b4fc; }

/* ============ الجداول ============ */
.chapter table {
  width: 100%; border-collapse: collapse;
  background: var(--bg-alt); font-size: 14.5px;
}
.chapter th, .chapter td {
  padding: 12px 16px; text-align: right;
  border-bottom: 1px solid var(--border); vertical-align: top;
}
.chapter th {
  background: var(--primary); color: #fff; font-weight: 700;
  font-size: 13px; letter-spacing: .2px;
}
.chapter tr:last-child td { border-bottom: none; }
.chapter tbody tr:nth-child(even) td { background: rgba(0,0,0,.02); }
[data-theme="dark"] .chapter tbody tr:nth-child(even) td { background: rgba(255,255,255,.02); }
.chapter tbody tr:hover td { background: var(--primary-soft); }
[data-theme="dark"] .chapter tbody tr:hover td { background: rgba(99,102,241,.08); }

/* ============ التنبيهات ============ */
.callout {
  background: var(--bg-alt);
  position: relative;
}
.callout .ctitle {
  font-weight: 800; font-size: 14.5px;
  margin-bottom: 8px; display: flex; align-items: center; gap: 8px;
}
.callout > *:last-child { margin-bottom: 0; }
.callout p { margin: 8px 0; }
.callout ul, .callout ol { margin: 8px 24px 8px 0; }

.callout.concept  { background: var(--concept-bg);  border-color: var(--concept-border); }
.callout.concept  .ctitle { color: var(--concept-text); }
.callout.pitfall  { background: var(--pitfall-bg);  border-color: var(--pitfall-border); }
.callout.pitfall  .ctitle { color: var(--pitfall-text); }
.callout.note     { background: var(--note-bg);     border-color: var(--note-border); }
.callout.note     .ctitle { color: var(--note-text); }
.callout.advanced { background: var(--advanced-bg); border-color: var(--advanced-border); }
.callout.advanced .ctitle { color: var(--advanced-text); }
.callout.practice { background: var(--practice-bg); border-color: var(--practice-border); }
.callout.practice .ctitle { color: var(--practice-text); }
.callout.analysis { background: var(--analysis-bg); border-color: var(--analysis-border); }
.callout.analysis .ctitle { color: var(--analysis-text); }

/* ============ الأزرار ============ */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--primary); color: #fff; border: none;
  padding: 10px 20px; border-radius: 10px; cursor: pointer;
  font-size: 14px; font-weight: 700; font-family: inherit;
  transition: all var(--transition);
  box-shadow: 0 2px 8px rgba(79,70,229,.25);
}
.btn:hover { background: var(--primary-dark); transform: translateY(-1px); box-shadow: 0 4px 14px rgba(79,70,229,.35); }
.btn:active { transform: translateY(0); }
.btn.outline {
  background: transparent; color: var(--primary);
  border: 2px solid var(--primary); box-shadow: none;
}
.btn.outline:hover { background: var(--primary); color: #fff; }
.btn.success { background: var(--success); box-shadow: 0 2px 8px rgba(16,185,129,.25); }
.btn.success:hover { background: #059669; box-shadow: 0 4px 14px rgba(16,185,129,.35); }
.btn.success.marked { background: var(--text-soft); cursor: default; }
.btn.success.marked:hover { transform: none; }

.chapter-actions {
  display: flex; gap: 12px; margin: 32px 0 12px;
  flex-wrap: wrap; padding-top: 20px; border-top: 1px solid var(--border);
}

/* ============ إظهار الحلول ============ */
.answer-key h4 { color: var(--concept-text); margin-top: 0; margin-bottom: 10px; }
.answer-key ol, .answer-key ul { margin: 8px 22px 8px 0; }
.answer-key li { margin: 4px 0; }

/* ============ الفوتر ============ */
.app-footer {
  text-align: center; padding: 32px 20px;
  color: var(--text-muted); font-size: 13px;
  border-top: 1px solid var(--border);
  background: var(--bg-alt);
}

/* ============ الجوال ============ */
@media (max-width: 950px) {
  .logo-text small { display: none; }
}
@media (max-width: 560px) {
  .chapter table { font-size: 13px; }
  .chapter th, .chapter td { padding: 9px 10px; }
}

/* ============ الطباعة ============ */
@media print {
  .app-header, #sidebar, .chapter-actions, .progress-bar, .app-footer { display: none; }
  #main { padding: 0; max-width: 100%; }
  .chapter-header { background: none; color: #000; box-shadow: none; padding: 0; margin-bottom: 20px; }
  .chapter-header h1 { color: #000; }
  .callout { break-inside: avoid; }
}

/* ============================================================
   Auto-Direction for Mixed Arabic / English Content
   ============================================================ */

.chapter p,
.chapter li,
.chapter td,
.chapter th,
.chapter h1,
.chapter h2,
.chapter h3,
.chapter h4,
.chapter h5,
.chapter h6,
.chapter .ctitle,
.chapter .answer-key h4,
.chapter-header h1,
.chapter-header p,
.chapter-header .phase-label,
.home-hero h1,
.home-hero p,
.phase-card h3,
.phase-card p,
.phase-card .pc-num,
.phase-card .pc-level {
  unicode-bidi: plaintext;
  text-align: start;
}

/* استثناء: القوائم تحتفظ بمحاذاة عناصرها الداخلية تلقائيًا */
.chapter ul,
.chapter ol {
  unicode-bidi: plaintext;
}
/* ============================================================
   QUIZ — الاختبارات التفاعلية
   ============================================================ */
.callout.practice.quiz-ready ol { padding-inline-start: 1.6em; }
.quiz-item { margin: .55em 0; padding: .45em .6em; border-radius: 10px;
  border: 1px solid transparent; transition: background var(--transition), border-color var(--transition); }
.quiz-item.is-ok  { background: rgba(16,185,129,.10); border-color: rgba(16,185,129,.45); }
.quiz-item.is-bad { background: rgba(239,68,68,.08);  border-color: rgba(239,68,68,.40); }
.quiz-item.is-self{ background: rgba(79,70,229,.08);  border-color: rgba(79,70,229,.35); }

.quiz-blank, .quiz-line {
  font: inherit; color: var(--text); background: var(--bg-alt);
  border: 1.5px solid var(--border-strong); border-radius: 8px;
  padding: .15em .5em; outline: none; transition: border-color var(--transition), box-shadow var(--transition);
}
.quiz-blank { width: 7ch; min-width: 5ch; margin: 0 .2em; text-align: center; border-width: 0 0 2px; border-radius: 6px 6px 0 0; }
.quiz-line  { display: block; width: 100%; margin-top: .4em; padding: .45em .7em; }
.quiz-blank:focus, .quiz-line:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(79,70,229,.18); }
.quiz-blank.ok,  .quiz-line.ok  { border-color: var(--success); color: var(--success); font-weight: 600; }
.quiz-blank.bad, .quiz-line.bad { border-color: var(--danger); }
.quiz-blank[readonly], .quiz-line[readonly] { background: transparent; }

.quiz-choices { display: inline-flex; flex-wrap: wrap; gap: .35em; margin: 0 .3em; vertical-align: middle; }
.quiz-choice {
  font: inherit; font-size: .92em; cursor: pointer; color: var(--text);
  background: var(--bg-alt); border: 1.5px solid var(--border-strong); border-radius: 999px;
  padding: .12em .8em; transition: all var(--transition);
}
.quiz-choice:hover { border-color: var(--primary); color: var(--primary); }
.quiz-choice.picked { border-color: var(--primary); background: var(--primary-soft); }
.quiz-choice.right { border-color: var(--success); background: var(--success); color: #fff; }
.quiz-choice.wrong { border-color: var(--danger); background: var(--danger); color: #fff; text-decoration: line-through; }

.quiz-row { display: flex; align-items: center; flex-wrap: wrap; gap: .5em; margin-top: .35em; direction: rtl; }
.quiz-feedback { font-size: .88em; font-weight: 600; }
.is-ok  .quiz-feedback { color: var(--success); }
.is-bad .quiz-feedback { color: var(--danger); }
.is-ok .quiz-btn.check { display: none; }

.quiz-btn {
  font: inherit; font-size: .85em; cursor: pointer; color: var(--text);
  background: var(--bg-alt); border: 1px solid var(--border-strong); border-radius: 8px;
  padding: .25em .8em; transition: all var(--transition);
}
.quiz-btn:hover { border-color: var(--primary); color: var(--primary); }
.quiz-btn.primary { background: var(--primary); border-color: var(--primary); color: #fff; }
.quiz-btn.primary:hover { background: var(--primary-dark); color: #fff; }
.quiz-link { font: inherit; font-size: .95em; background: none; border: 0; padding: 0 .2em;
  color: var(--primary); cursor: pointer; text-decoration: underline; }

.quiz-explain { display: none; margin-top: .4em; padding: .45em .7em; font-size: .9em;
  border-inline-start: 3px solid var(--primary); background: var(--bg-alt); border-radius: 6px; color: var(--text-muted); }
.quiz-explain.show { display: block; animation: quizIn .25s ease; }
.quiz-explain b { color: var(--text); }

.quiz-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: .6em;
  margin-top: 1em; padding-top: .8em; border-top: 1px dashed var(--practice-border); direction: rtl; }
.quiz-spacer { flex: 1; }
.quiz-badge { font-size: .8em; font-weight: 700; padding: .2em .7em; border-radius: 999px;
  background: var(--practice-border); color: #fff; }
.quiz-score { font-weight: 800; font-size: 1.05em; direction: ltr; }
.quiz-score.full { color: var(--success); }
.quiz-best { font-size: .82em; color: var(--text-muted); }
.callout.practice.quiz-perfect { box-shadow: 0 0 0 2px var(--success); }

.quiz-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: .8em; margin: 1.2em 0; }
.quiz-stats > div { background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius);
  padding: .9em; text-align: center; box-shadow: var(--shadow-sm); }
.quiz-stats b { display: block; font-size: 1.5em; color: var(--primary); direction: ltr; }
.quiz-stats span { font-size: .85em; color: var(--text-muted); }

@keyframes quizIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.quiz-choices.block { display: flex; flex-direction: column; align-items: flex-start; margin: .4em 0; }
.quiz-slot { display: inline-block; min-width: 6ch; padding: 0 .3em; border-bottom: 2px solid var(--primary); font-weight: 600; text-align: center; }
.quiz-area { font-family: inherit; line-height: 1.7; resize: vertical; min-height: 6em; }
.quiz-table td .quiz-line { margin-top: 0; min-width: 16ch; }
.quiz-table td .quiz-row { margin-top: .25em; }
.quiz-table tr.quiz-item { border-radius: 0; }
.quiz-table tr.is-ok td { background: rgba(16,185,129,.10); }
.quiz-table tr.is-bad td { background: rgba(239,68,68,.08); }
.quiz-table tr.is-self td { background: rgba(79,70,229,.08); }

/* ============================================================
   SPEECH — النطق الصوتي
   ============================================================ */
.speak-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.75em; height: 1.75em; margin-inline-end: .4em; padding: 0; vertical-align: middle;
  font-size: .82em; line-height: 1; cursor: pointer;
  background: var(--primary-soft); border: 1px solid transparent; border-radius: 50%;
  opacity: .7; transition: all var(--transition);
}
.speak-btn:hover { opacity: 1; border-color: var(--primary); transform: scale(1.1); }
.speak-btn.playing { opacity: 1; background: var(--primary); animation: speakPulse 1s ease-in-out infinite; }
.quiz-explain .speak-btn { margin-inline-start: .4em; }
.speaking { background-image: linear-gradient(90deg, rgba(79,70,229,.10), rgba(6,182,212,.10)); border-radius: 6px; }
body.speech-icons-off .speak-btn { display: none; }
@keyframes speakPulse { 0%,100% { box-shadow: 0 0 0 0 rgba(79,70,229,.5); } 50% { box-shadow: 0 0 0 6px rgba(79,70,229,0); } }

.speak-float {
  position: absolute; z-index: 1000; transform: translateX(-50%) translateY(4px);
  padding: .35em .9em; font: inherit; font-size: .85em; font-weight: 600; color: #fff; cursor: pointer;
  background: var(--primary); border: 0; border-radius: 999px; box-shadow: var(--shadow-lg);
  opacity: 0; pointer-events: none; transition: opacity .15s, transform .15s;
}
.speak-float.show { opacity: 1; pointer-events: auto; transform: translateX(-50%) translateY(0); }

.speech-settings-wrap { position: relative; }
.speech-panel {
  display: none; position: absolute; top: calc(100% + 8px); left: 0; z-index: 200; width: 270px;
  padding: 1em; background: var(--bg-elevated); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-lg);
}
.speech-panel.open { display: block; }
.sp-title { font-weight: 700; margin-bottom: .7em; }
.sp-row { display: flex; flex-direction: column; gap: .3em; margin-bottom: .75em; font-size: .9em; }
.sp-row select { font: inherit; padding: .35em; border-radius: 8px; border: 1px solid var(--border-strong); background: var(--bg-alt); color: var(--text); }
.sp-row input[type=range] { width: 100%; accent-color: var(--primary); }
.sp-check { flex-direction: row; align-items: center; }
.sp-test { width: 100%; font-size: .85em; }
.sp-hint { margin: .7em 0 0; font-size: .8em; color: var(--text-muted); }

/* ============================================================
   PRODUCTION TRACKER — دفتر الإنتاج
   ============================================================ */
.prod-chapter { margin-top: 2.2em; }
.prod-box {
  margin-top: 1em; padding: 1em 1.1em; border-radius: var(--radius);
  background: var(--bg-elevated); border: 1.5px dashed var(--primary); box-shadow: var(--shadow-sm);
}
.prod-box.compact { background: var(--bg-alt); border-color: var(--practice-border); }
.prod-head { display: flex; align-items: center; justify-content: space-between; gap: .6em; flex-wrap: wrap; margin-bottom: .4em; }
.prod-title { font-weight: 800; color: var(--primary); }
.prod-box.compact .prod-title { color: var(--practice-text); }
.prod-link { font-size: .85em; }
.prod-prompt { margin: .2em 0 .6em; color: var(--text-muted); font-size: .95em; }
.prod-text {
  display: block; width: 100%; min-height: 6.5em; resize: vertical; box-sizing: border-box;
  padding: .7em .85em; font: inherit; line-height: 1.8; color: var(--text); text-align: left;
  background: var(--bg); border: 1.5px solid var(--border-strong); border-radius: 10px; outline: none;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.prod-text:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(79,70,229,.15); }
.prod-bar { display: flex; align-items: center; flex-wrap: wrap; gap: .7em; margin-top: .6em; font-size: .88em; }
.prod-count { color: var(--text-muted); }
.prod-count b { color: var(--text); }
.prod-meter { width: 90px; height: 6px; background: var(--border); border-radius: 99px; overflow: hidden; }
.prod-meter i { display: block; height: 100%; width: 0; background: var(--warning); transition: width .3s, background .3s; }
.prod-meter i.done { background: var(--success); }
.prod-status { color: var(--text-soft); font-size: .92em; }
.prod-spacer { flex: 1; }
.prod-save:disabled { opacity: .45; cursor: not-allowed; }
.prod-list { margin-top: .8em; }
.prod-list-title { font-size: .85em; font-weight: 700; color: var(--text-muted); margin-bottom: .4em; }

.prod-entry {
  margin: .6em 0; padding: .7em .9em; border-radius: 10px;
  background: var(--bg-alt); border: 1px solid var(--border); border-inline-start: 4px solid var(--success);
}
.prod-entry.due { border-inline-start-color: var(--warning); }
.pe-meta { display: flex; align-items: center; flex-wrap: wrap; gap: .4em .9em; font-size: .8em; color: var(--text-muted); }
.pe-ch { font-weight: 700; }
.pe-rev { color: var(--success); }
.pe-actions { margin-inline-start: auto; display: inline-flex; gap: .2em; }
.pe-actions button {
  width: 2em; height: 2em; padding: 0; font-size: .95em; cursor: pointer; border-radius: 8px;
  background: transparent; border: 1px solid transparent; transition: all var(--transition);
}
.pe-actions button:hover { background: var(--primary-soft); border-color: var(--border-strong); }
.pe-prompt { margin-top: .3em; font-size: .82em; color: var(--text-soft); }
.pe-text { margin-top: .45em; line-height: 1.8; text-align: left; white-space: normal; word-wrap: break-word; }
.pe-edit-bar { display: flex; flex-wrap: wrap; align-items: center; gap: .5em; margin-top: .5em; }
.pe-hint { font-size: .82em; color: var(--text-muted); }

/* صفحة الدفتر */
.nb-stats { grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); }
.nb-review .nb-how { font-size: .9em; }
.nb-actions, .nb-remind { display: flex; flex-wrap: wrap; align-items: center; gap: .6em; margin-top: .7em; }
.nb-remind { padding-top: .7em; border-top: 1px dashed var(--note-border); font-size: .9em; }
.nb-remind select, .nb-toolbar select {
  font: inherit; padding: .35em .5em; border-radius: 8px; border: 1px solid var(--border-strong); background: var(--bg-alt); color: var(--text);
}
.nb-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: .6em; margin: 1.4em 0 .6em; }
.nb-search {
  flex: 1 1 220px; font: inherit; padding: .5em .8em; border-radius: 10px;
  border: 1px solid var(--border-strong); background: var(--bg-alt); color: var(--text);
}
.nb-import { cursor: pointer; }
.nb-group h3 { margin: 1.4em 0 .3em; }
.nb-group h3 small { color: var(--text-muted); font-weight: 400; }
.nb-empty { padding: 2.5em 1em; text-align: center; color: var(--text-muted); border: 2px dashed var(--border); border-radius: var(--radius); }
.nb-print-head { display: none; }

/* زر الهيدر + الشريط */
.nb-btn { position: relative; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; }
.nb-badge {
  position: absolute; top: -4px; left: -4px; min-width: 18px; height: 18px; padding: 0 4px;
  font-size: 11px; font-weight: 700; line-height: 18px; text-align: center; color: #fff;
  background: var(--danger); border-radius: 99px;
}
.prod-banner {
  display: flex; align-items: center; flex-wrap: wrap; gap: .7em; margin-bottom: 1.2em; padding: .85em 1.1em;
  border-radius: var(--radius); color: var(--text);
  background: linear-gradient(90deg, rgba(245,158,11,.16), rgba(79,70,229,.12));
  border: 1px solid var(--warning); animation: quizIn .3s ease;
}
.pb-icon { font-size: 1.4em; }
.pb-text { flex: 1 1 250px; }

/* طباعة الدفتر فقط ← PDF */
@media print {
  body.print-notebook .notebook > :not(.nb-list):not(.nb-print-head) { display: none !important; }
  body.print-notebook .nb-print-head { display: block; text-align: center; margin-bottom: 1.2em; }
  body.print-notebook .nb-print-head h1 { font-size: 22px; margin: 0 0 .2em; }
  body.print-notebook .pe-actions, body.print-notebook .speak-btn, body.print-notebook .prod-banner { display: none !important; }
  body.print-notebook .prod-entry { break-inside: avoid; background: #fff; border-color: #ccc; }
  body.print-notebook .nb-group h3 a { color: #000; text-decoration: none; }
  .prod-box { display: none; }
}

/* ============================================================
   INDEX — الفهرس الأبجدي
   ============================================================ */
.idx-tools { position: sticky; top: calc(var(--header-h) + 6px); z-index: 20; margin-bottom: 1em; padding: .8em;
  background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); }
#idxSearch { width: 100%; box-sizing: border-box; font: inherit; padding: .55em .85em; border-radius: 10px;
  border: 1px solid var(--border-strong); background: var(--bg-alt); color: var(--text); }
.idx-az { display: flex; flex-wrap: wrap; gap: .25em; margin-top: .6em; direction: ltr; justify-content: center; }
.idx-az button { min-width: 2em; padding: .2em .4em; font: inherit; font-weight: 700; font-size: .85em; cursor: pointer;
  color: var(--primary); background: var(--primary-soft); border: 1px solid transparent; border-radius: 6px; }
.idx-az button:hover { border-color: var(--primary); }
.idx-letter { margin: 1.4em 0 .4em; padding-bottom: .2em; border-bottom: 2px solid var(--primary); color: var(--primary);
  direction: ltr; text-align: left; scroll-margin-top: calc(var(--header-h) + 130px); }
.idx-entry { padding: .65em .2em; border-bottom: 1px solid var(--border); }
.idx-term { display: flex; flex-wrap: wrap; align-items: baseline; gap: .3em .8em; }
.idx-term strong { font-size: 1.05em; }
.idx-ar { color: var(--text-muted); font-size: .9em; }
.idx-refs { display: flex; flex-wrap: wrap; align-items: center; gap: .35em; margin-top: .35em; direction: ltr; justify-content: flex-start; }
.idx-arrow { color: var(--text-soft); }
.idx-ref { font-size: .82em; padding: .15em .6em; border-radius: 999px; text-decoration: none;
  background: var(--bg-alt); border: 1px solid var(--border-strong); color: var(--text); transition: all var(--transition); }
.idx-ref:hover { border-color: var(--primary); color: var(--primary); text-decoration: none; }
.idx-ref.main { background: var(--primary); border-color: var(--primary); color: #fff; font-weight: 700; }
.idx-more { font-size: .78em; color: var(--text-soft); }
.idx-def { margin-top: .3em; font-size: .85em; color: var(--text-muted); }

mark.idx-hit { background: rgba(250,204,21,.45); color: inherit; border-radius: 3px; padding: 0 1px; }
mark.idx-hit.current { background: #f59e0b; color: #000; box-shadow: 0 0 0 2px #f59e0b; }
.idx-bar { position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%); z-index: 900;
  display: flex; align-items: center; gap: .5em; padding: .45em .8em; font-size: .9em;
  background: var(--bg-elevated); color: var(--text); border: 1px solid var(--border-strong);
  border-radius: 999px; box-shadow: var(--shadow-lg); animation: quizIn .25s ease; }
.idx-bar button { width: 2em; height: 2em; cursor: pointer; font: inherit; border-radius: 50%;
  background: var(--primary-soft); color: var(--text); border: 1px solid transparent; }
.idx-bar button:hover { border-color: var(--primary); }
.idx-bar a { font-size: .85em; }
.idx-pos { color: var(--text-muted); direction: ltr; min-width: 3.5em; text-align: center; }
@media print { .idx-bar, .idx-tools { display: none !important; } }

/* ============================================================
   DASHBOARD — تقدمي
   ============================================================ */
.dashboard h2 { margin-top: 1.8em; }
.db-muted { color: var(--text-muted); font-size: .9em; }
.db-small { font-size: .8em; margin-top: .8em; }
.db-hero { display: flex; flex-wrap: wrap; align-items: center; gap: 1.4em; margin: 1em 0 1.2em; }
.db-hero-ring { flex: 0 0 auto; margin-inline: auto; }
.db-ring-arc { transition: stroke-dashoffset 1.2s cubic-bezier(.4,0,.2,1); }
.db-ring-val { font-size: 34px; font-weight: 800; fill: var(--text); direction: ltr; }
.db-ring-sub { font-size: 12px; fill: var(--text-muted); }
.db-cards { flex: 1 1 320px; display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: .7em; }
.db-card { padding: .9em; text-align: center; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.db-card b { display: block; font-size: 1.6em; color: var(--primary); direction: ltr; }
.db-card b small { font-size: .55em; color: var(--text-soft); font-weight: 600; }
.db-card span { font-size: .82em; color: var(--text-muted); }
.db-card.fire b { color: var(--warning); }

.db-next { display: flex; flex-direction: column; gap: .15em; padding: 1em 1.2em; border-radius: var(--radius-lg); text-decoration: none;
  color: #fff; background: linear-gradient(120deg, var(--primary), var(--accent)); box-shadow: var(--shadow-lg); transition: transform var(--transition); }
.db-next:hover { transform: translateY(-2px); text-decoration: none; color: #fff; }
.db-next-k { font-size: .85em; opacity: .9; }
.db-next b { font-size: 1.2em; }
.db-next small { opacity: .85; }
.db-next.done { text-align: center; font-weight: 700; }

.db-phases { display: grid; gap: .8em; }
.db-phase { padding: .9em 1em; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius); }
.db-phase.complete { border-color: var(--success); }
.db-phase-head, .db-phase-foot { display: flex; justify-content: space-between; align-items: center; gap: .6em; flex-wrap: wrap; }
.db-phase-name small { color: var(--text-muted); margin-inline-start: .4em; direction: ltr; display: inline-block; }
.db-phase-num { font-weight: 800; direction: ltr; }
.db-track { display: block; height: 10px; margin: .55em 0; background: var(--border); border-radius: 99px; overflow: hidden; }
.db-track.sm { height: 6px; margin: 0; flex: 1; }
.db-fill { display: block; height: 100%; background: linear-gradient(90deg, var(--primary), var(--accent)); border-radius: 99px; transition: width 1s cubic-bezier(.4,0,.2,1); }
.db-phase.complete .db-fill { background: var(--success); }
.db-chdots { display: flex; flex-wrap: wrap; gap: 4px; }
.db-chdot { width: 12px; height: 12px; border-radius: 50%; background: var(--border-strong); transition: transform .15s; }
.db-chdot:hover { transform: scale(1.4); }
.db-chdot.done { background: var(--success); }
.db-chdot.cp { border-radius: 3px; }
.db-phase-acc { font-size: .82em; color: var(--text-muted); }
.db-extra { display: grid; gap: .4em; margin-top: .8em; }
.db-mini { display: flex; align-items: center; gap: .7em; font-size: .85em; color: var(--text-muted); }
.db-mini > span:first-child { min-width: 9em; }

.db-cps { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: .7em; }
.db-cp { display: flex; flex-direction: column; gap: .15em; padding: .9em; border-radius: var(--radius); text-decoration: none; color: var(--text);
  background: var(--bg-elevated); border: 1.5px solid var(--border); transition: transform var(--transition); }
.db-cp:hover { transform: translateY(-2px); text-decoration: none; }
.db-cp.pass { border-color: var(--success); background: rgba(16,185,129,.08); }
.db-cp.fail { border-color: var(--warning); background: rgba(245,158,11,.08); }
.db-cp.todo { opacity: .75; border-style: dashed; }
.db-cp-icon { font-size: 1.5em; }
.db-cp-name { font-weight: 700; }
.db-cp-status { font-size: .85em; font-weight: 600; }
.db-cp.pass .db-cp-status { color: var(--success); }
.db-cp.fail .db-cp-status { color: var(--warning); }
.db-cp-meta { font-size: .78em; color: var(--text-muted); }

.db-grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1em; margin-top: 1.4em; }
.db-panel { padding: 1em; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.db-panel h3 { margin: 0 0 .7em; font-size: 1.02em; }
.db-chart, .db-heat { width: 100%; height: auto; display: block; direction: ltr; }
.db-grid { stroke: var(--border); stroke-width: 1; }
.db-axis { font-size: 10px; fill: var(--text-muted); }
.db-bar-ok { fill: var(--success); }
.db-bar-bad { fill: var(--danger); opacity: .75; }
.db-line { fill: none; stroke: var(--primary); stroke-width: 2.5; stroke-linejoin: round; }
.db-dot { fill: var(--bg-elevated); stroke: var(--primary); stroke-width: 2.5; }
.db-legend { display: flex; flex-wrap: wrap; gap: .9em; justify-content: center; margin-top: .5em; font-size: .8em; color: var(--text-muted); }
.db-legend i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; vertical-align: middle; margin-inline-end: .3em; }
.lg-ok { background: var(--success); } .lg-bad { background: var(--danger); opacity: .75; }
.lg-line { background: var(--primary); height: 3px !important; }
.db-acc { display: grid; gap: .6em; }
.db-acc-row { display: grid; grid-template-columns: 7.5em 1fr 3em; align-items: center; gap: .6em; font-size: .88em; }
.db-acc-track { height: 14px; background: var(--border); border-radius: 99px; overflow: hidden; }
.db-acc-fill { display: block; height: 100%; border-radius: 99px; transition: width 1s cubic-bezier(.4,0,.2,1); }
.db-acc-val { font-weight: 700; direction: ltr; text-align: left; }
.hm { fill: var(--border); }
.hm-0 { fill: var(--border); } .hm-1 { fill: #bbf7d0; } .hm-2 { fill: #4ade80; } .hm-3 { fill: #16a34a; } .hm-4 { fill: #166534; }
.hm--1 { fill: transparent; }
.hm-legend { align-items: center; gap: .25em; }
.hm-legend i { margin: 0; }
.hm-legend .hm-0 { background: var(--border); } .hm-legend .hm-1 { background: #bbf7d0; } .hm-legend .hm-2 { background: #4ade80; }
.hm-legend .hm-3 { background: #16a34a; } .hm-legend .hm-4 { background: #166534; }
.db-weak { display: flex; justify-content: space-between; padding: .55em .8em; margin-bottom: .4em; border-radius: 8px; text-decoration: none; color: var(--text);
  background: rgba(239,68,68,.07); border: 1px solid rgba(239,68,68,.25); }
.db-weak:hover { text-decoration: none; border-color: var(--danger); }
.db-weak-acc { font-weight: 800; color: var(--danger); direction: ltr; }

/* ============================================================
   PAGER — السابق / التالي
   ============================================================ */
.pager { display: grid; grid-template-columns: 1fr auto 1fr; align-items: stretch; gap: 12px; margin: 18px 0 8px; }
.pager-btn {
  display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 14px 18px; text-decoration: none; color: var(--text);
  background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm);
  transition: border-color var(--transition), transform var(--transition), box-shadow var(--transition);
}
.pager-btn:hover { border-color: var(--primary); transform: translateY(-2px); box-shadow: var(--shadow); text-decoration: none; }
.pager-btn.next { text-align: left; align-items: flex-end; }
.pager-btn.prev { text-align: right; align-items: flex-start; }
.pager-btn.empty { visibility: hidden; }
.pager-k { font-size: 13px; font-weight: 700; color: var(--primary); }
.pager-t { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.pager-phase { font-size: 12px; color: var(--text-muted); }
.pager-btn.next .pager-k { color: #fff; background: var(--primary); padding: 2px 10px; border-radius: 99px; }
.pager-pos { align-self: center; font-size: 12px; color: var(--text-soft); direction: ltr; white-space: nowrap; }
@media print { .pager { display: none; } }

/* ============================================================
   TYPOGRAPHY — ضبط القراءة مع الخطوط الجديدة
   ============================================================ */
body {
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
  font-kerning: normal;
  text-rendering: optimizeLegibility;
  -moz-osx-font-smoothing: grayscale;
}
/* Inter: أرقام متناسقة في الجداول والعدادات + شكل أوضح لحروف مثل l / I / 1 */
.chapter, .quiz-stats, .db-card, .idx-ref, .pager-pos { font-feature-settings: "kern" 1, "cv11" 1, "ss01" 1; }
table, .quiz-score, .db-card b, .db-phase-num, .db-acc-val, .pager-pos { font-variant-numeric: tabular-nums; }
/* العناوين: وزن أثقل وتباعد أضيق قليلًا */
.chapter h1, .chapter h2, .chapter h3, .chapter-header h1, .home-hero h1 { font-weight: 700; letter-spacing: -0.01em; }
.chapter h2 { font-weight: 700; }
.ctitle { font-weight: 600; }
strong, b { font-weight: 600; }
/* الفقرات الإنجليزية الخالصة (dir=ltr تلقائي) تحتاج تباعد أسطر أقل من العربية */
.chapter [dir="ltr"], .chapter p:lang(en), .pe-text, .prod-text, .quiz-line, .quiz-blank { line-height: 1.7; }
code, kbd, pre, .quiz-blank { font-family: var(--font-code); }
code { font-size: .88em; font-feature-settings: "calt" 0; }
.quiz-blank { font-family: var(--font-en); }
input, select, textarea, button { font-family: inherit; }

/* ============ إصلاح: الهيدر على الشاشات الصغيرة (5 أزرار) ============ */
@media (max-width: 560px) {
  .app-header { padding: 10px 12px; }
  .header-actions { gap: 5px; }
  .icon-btn { width: 34px; height: 34px; font-size: 16px; border-radius: 8px; }
  .speech-panel { position: fixed; top: calc(var(--header-h) + 6px); left: 10px; right: 10px; width: auto; }
}
/* زر البحث للجوال */
.m-search-btn { display: none; }

/* ===== RESTORED SOURCE CONTENT (integrated inline) ===== */
.src-add{margin:.4rem 0}
em.ex{font-style:normal;direction:ltr;unicode-bidi:isolate;background:rgba(148,163,184,.15);padding:0 .3em;border-radius:4px}