/* ===== الشريط العلوي (عداد الزيارات + زر الوضع) ===== */
.main-col { display: flex; flex-direction: column; min-width: 0; height: 100vh; }
.main-col #main { flex: 1; }
#sitebar { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 30px; background: var(--card); border-bottom: 1px solid var(--line); font-size: 14px; }
#sitebar .visits { display: none; align-items: center; gap: 6px; color: var(--muted); }
#sitebar .visits.ready { display: inline-flex; }
#sitebar .visits b { color: var(--primary, #0e7490); font-size: 16px; font-weight: 800; }
.theme-btn { font: inherit; margin-inline-start: auto; display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); background: var(--bg); color: var(--ink); padding: 5px 14px; border-radius: 999px; cursor: pointer; font-weight: 700; font-size: 14px; }
.theme-btn:hover { border-color: var(--primary, #0e7490); }
@media (max-width: 860px) {
  .main-col { height: auto; }
  #sitebar { padding: 6px 14px; position: sticky; top: 46px; z-index: 30; }
  .theme-btn span { display: none; }
}

/* ===== الوضع الداكن ===== */
[data-theme='dark'] {
  --bg: #0b1220;
  --card: #151f32;
  --ink: #e5e9f0;
  --muted: #9aa7bb;
  --line: #27344d;
  --shadow: 0 2px 10px rgba(0, 0, 0, .35);
  --paper: #e9eef5; /* لوحة الرسم تبقى فاتحة لأن الرسوم مصمّمة على خلفية فاتحة */
  color-scheme: dark;
}
[data-theme='dark'] body { background: var(--bg); color: var(--ink); }
[data-theme='dark'] h1, [data-theme='dark'] h2, [data-theme='dark'] h3, [data-theme='dark'] h4, [data-theme='dark'] b, [data-theme='dark'] strong { color: inherit; }
[data-theme='dark'] :is(#main, .modal) a:not([class]) { color: #66d9e8; }
[data-theme='dark'] :is(.muted, .hint) { color: var(--muted); }

/* أسطح عامة */
[data-theme='dark'] :is(.card, .exp-card, .exp-head, .tabs, .sim-panel, .grade-card, .stat, .gal-card, .fig-panel, .modal, .empty, .challenge, .feature, .install-card, .founder, .seq li, .card-item, .tasks li, .pool, .lines, .waiting, .choice) {
  background: var(--card); color: var(--ink); border-color: var(--line);
}
[data-theme='dark'] :is(.btn, .chip, .pchip, .icon-btn, .opt, .ksign-btn) { background: #1c2840; color: var(--ink); border-color: var(--line); }
[data-theme='dark'] :is(.btn, .icon-btn, .chip):hover { background: #24324f; }
[data-theme='dark'] :is(.btn.primary, .chip.active, .tabs button.active, .lq-opt.right, .ord-w.in) { color: #fff; }
[data-theme='dark'] .btn.primary { background: var(--primary, #0e7490); border-color: transparent; }
[data-theme='dark'] :is(input, select, textarea) { background: #0f1a2c; color: var(--ink); border-color: var(--line); }
[data-theme='dark'] :is(.info-box, .formula, .task-now, .obs-now, .warn-line, .expr, .out-cell, .bin-readout div) { background: #12233a; color: var(--ink); border-color: #23415f; }
[data-theme='dark'] .tabs button { color: var(--muted); }

/* الجداول */
[data-theme='dark'] :is(table.data th, table.kv th, table.sheet th, table.sheet td.hdr, table.punnett th) { background: #1a2640; color: #c3cee0; border-color: var(--line); }
[data-theme='dark'] :is(table.data td, table.kv td, table.sheet td, table.punnett td) { border-color: var(--line); color: var(--ink); }
[data-theme='dark'] table.data tr.hl td { background: #1d3350; }

/* حالات صح/خطأ: ألوان داكنة مشبعة بدل الفاتحة */
[data-theme='dark'] :is(.q.right, .card-item.right, .seq li.right, td.right, .tasks li.ok, .pchip.ok, .result-box.good, .score-pill.ok) { background: #12351f; color: #b2f2bb; border-color: #2b8a3e; }
[data-theme='dark'] :is(.q.wrong, .card-item.wrong, .seq li.wrong, td.wrong, .opt.chosen-wrong, .lq-opt.wrong, .score-pill.low) { background: #3b1518; color: #ffc9c9; border-color: #c92a2a; }
[data-theme='dark'] .result-box.mid { background: #3a2c0e; color: #ffe8a3; border-color: #e8a317; }
[data-theme='dark'] :is(.badge.b-book, .badge.b-guide, .badge.b-sim, .badge.b-done) { background: #1f2e48; color: #d0dbec; border-color: transparent; }
[data-theme='dark'] .mitem.sel { background: #1d3a5c; }

/* لوحات الرسم تبقى فاتحة («ورقة») حتى تبقى الرسوم والكتابات عليها واضحة */
[data-theme='dark'] :is(.sim-stage, .measure-svg, .art-svg, .grid-svg, .coord-svg, .fig-grid .bio-fig, .html-view, .trace-cv, .bench svg) { background: var(--paper); color: #1f2937; }
[data-theme='dark'] .sim-stage :is(.info-box, .lq, .lq-q, h3, h4, p, label, .hint, small, b) { color: #1f2937; }
[data-theme='dark'] .sim-stage .info-box { background: #dfe9f3; border-color: #b6cde2; }
[data-theme='dark'] .sim-stage :is(.lq-opt.right) { background: #2f9e44; color: #fff; }
[data-theme='dark'] .sim-stage :is(.lq-opt.wrong) { background: #e03131; color: #fff; }
[data-theme='dark'] .fig-panel summary { color: var(--ink); }
[data-theme='dark'] .real-photo img { background: #1c2840; }

/* الشريط الجانبي داكن أصلاً؛ نزيده عمقاً قليلاً */
[data-theme='dark'] #sidebar { background: #070d18; }

/* ركن الصغار يبقى فاتحاً ملوّناً في الوضعين */
[data-theme='dark'] body.kids-mode { --bg: #f4f6fb; --card: #fff; --ink: #1f2937; --muted: #6b7280; --line: #e5e7eb; color-scheme: light; }
[data-theme='dark'] body.kids-mode #main :is(h1, h2, h3, p, b, small) { color: inherit; }

/* عناصر الأنشطة داخل لوحة النشاط («الورقة») تبقى فاتحة */
[data-theme='dark'] .sim-stage :is(.tag-sent, .ord-line, .lq, .seq li, .card-item, .pool, .bin) { background: #fff; color: #1f2937; border-color: #cfd8e3; }
[data-theme='dark'] .sim-stage :is(input, select, textarea) { background: #fff; color: #1f2937; border-color: #cfd8e3; }
[data-theme='dark'] .sim-stage .tag-w b { color: #1f2937; }
/* أزرار فوق الخلفيات الملوّنة (البطاقة الترحيبية وشريط ركن الصغار) */
[data-theme='dark'] :is(.hero, .kids-banner) .btn:not(.primary) { background: rgba(255,255,255,.18); color: #fff; border-color: rgba(255,255,255,.45); }
[data-theme='dark'] :is(.hero, .kids-banner, .quick, .founder-card) :is(small, p) { color: rgba(255,255,255,.88); }

/* ===== إصلاحات تباين الوضع الداكن (من فحص tools/test_contrast.js) ===== */
[data-theme='dark'] .new-chip { color: #212529; }
[data-theme='dark'] .tag { background: color-mix(in srgb, var(--c, #3bc9db) 22%, #151f32); color: color-mix(in srgb, var(--c, #3bc9db) 45%, white); }
[data-theme='dark'] .section-title[style] { color: color-mix(in srgb, var(--c) 50%, white); }
[data-theme='dark'] .safety li { color: #ffa94d; }
[data-theme='dark'] :is(label, .switch, .check) { color: var(--ink); }

/* «جزر فاتحة»: لوحات الرسم والأنشطة ومعرض الرسوم وركن الصغار تستعيد ألوان الوضع الفاتح كاملة
   (المتغيّرات نفسها تُعاد داخلها، فكل ما يستعمل var(--ink) و var(--line)… يصح تلقائياً) */
[data-theme='dark'] :is(.sim-stage, .fig-grid .bio-fig, body.kids-mode #main) {
  --bg: #f4f6fb; --card: #fff; --ink: #1f2937; --muted: #6b7280; --line: #e5e7eb; color-scheme: light; color: #1f2937;
}
[data-theme='dark'] :is(.sim-stage, .fig-grid .bio-fig, body.kids-mode #main) :is(.btn:not(.primary), .chip:not(.active), .pchip, .icon-btn, .opt, .lq-opt, .mitem, .ord-w, .bit, .tag-sent, .ord-line, .ksign-btn) { background: #fff; color: #1f2937; border-color: #d6dde6; }
[data-theme='dark'] :is(.sim-stage, .fig-grid .bio-fig, body.kids-mode #main) :is(table.data th, table.kv th, table.sheet th, table.sheet td.hdr, table.punnett th) { background: #f1f5f9; color: #475569; }
[data-theme='dark'] :is(.sim-stage, .fig-grid .bio-fig, body.kids-mode #main) :is(td, th, b, span, li, label, p, small, figcaption, h3, h4) { color: inherit; }
[data-theme='dark'] :is(.sim-stage, .fig-grid .bio-fig) :is(.muted, .hint, figcaption, small) { color: #5b6473; }
[data-theme='dark'] :is(.sim-stage, .fig-grid .bio-fig, body.kids-mode #main) :is(input, select, textarea) { background: #fff; color: #1f2937; border-color: #cfd8e3; }
[data-theme='dark'] :is(.sim-stage, .fig-grid .bio-fig, body.kids-mode #main) .info-box { background: #e7f5ff; color: #1f2937; border-color: #b6d4ec; }
/* لوحة المتغيّرات (sim-panel) داكنة: قراءاتها وجداولها بألوان فاتحة */
[data-theme='dark'] .sim-panel :is(b, td, label, span:not(.tag)) { color: inherit; }
[data-theme='dark'] :is(.sim-stage, body.kids-mode #main) :is(.btn.primary, .chip.active) { background: var(--primary, #0e7490); color: #fff; border-color: transparent; }
[data-theme='dark'] .sim-stage :is(.formula, .task-now, .obs-now, .warn-line, .expr, .out-cell, .bin-readout div) { background: #eef4fb; color: #1f2937; border-color: #c9d9ea; }
/* معرض الرسوم: بطاقة داكنة، الرسم فقط على «ورقة» فاتحة */
[data-theme='dark'] .gal-card .art-svg { background: var(--paper); border-radius: 10px; }
[data-theme='dark'] .gal-card :is(b, small, figcaption, h3) { color: var(--ink); }
[data-theme='dark'] .gal-card :is(small, figcaption) { color: var(--muted); }
[data-theme='dark'] .sim-stage .code li { color: #e2e8f0; }
[data-theme='dark'] .sim-stage .code li.cur { color: #0f172a; }
[data-theme='dark'] .gal-chap small { background: #22304a; color: var(--ink); }
[data-theme='dark'] :is(.sim-stage, .fig-grid .bio-fig, body.kids-mode #main) .tag { background: color-mix(in srgb, var(--c, #0e7490) 14%, white); color: color-mix(in srgb, var(--c, #0e7490) 85%, black); }

/* ===== الشريط السفلي (الموبايل فقط) ===== */
#bottom-nav { display: none; }
@media (max-width: 860px) {
  #bottom-nav { display: grid; grid-template-columns: repeat(4, 1fr); position: fixed; bottom: 0; inset-inline: 0; z-index: 45; background: var(--card); border-top: 1px solid var(--line); padding: 4px 4px calc(4px + env(safe-area-inset-bottom)); box-shadow: 0 -6px 20px rgba(0,0,0,.08); }
  #bottom-nav a, #bottom-nav button { font: inherit; font-size: 12.5px; font-weight: 700; display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 6px 2px; border: 0; background: none; color: var(--muted); text-decoration: none; border-radius: 12px; min-height: 52px; justify-content: center; }
  #bottom-nav span { font-size: 22px; line-height: 1; }
  #bottom-nav .active { color: var(--primary, #0e7490); background: color-mix(in srgb, var(--primary, #0e7490) 12%, transparent); }
  #main { padding-bottom: 90px !important; }
  /* أزرار أكبر للّمس */
  .btn, .chip { min-height: 40px; }
  .steps-bar button { flex: 1 1 auto; }
}
@media (max-width: 860px) {
  .hero .hero-stats, .hero .floaters { display: none; }
  .hero p { font-size: 14px; }
  #sitebar { position: static; }
  .pick-grades { grid-template-columns: 1fr; }
}
[data-theme='dark'] .steps-bar button i { background: rgba(255,255,255,.14); color: var(--ink); }
@media (max-width: 860px) {
  .fig-panel > summary { min-height: 44px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 8px 4px; }
  input[type=range] { height: 36px; }
  input[type=range]::-webkit-slider-thumb { width: 26px; height: 26px; }
}
[data-theme='dark'] .lesson-example details summary { color: #63e6be; }
.kg-stars { color: #7a5200 !important; }
[data-theme='dark'] .ct .lq-opt { background: #1c2840; color: var(--ink); border-color: var(--line); }
[data-theme='dark'] .ct-kind { color: #66d9e8; }
.icon-btn:disabled { color: #868e96; opacity: 1; }