/* الحديث الذكي — نظام سمات كامل: ليل/نهار · ٥ ألوان · ٣ خلفيات · حجم خط */

/* ── الألوان الأساسية (Accent) ─────────────────────────────────────── */
:root, html[data-accent="emerald"] { --accent:#34d399; --accent-ink:#06281c; }
html[data-accent="gold"]   { --accent:#d4af37; --accent-ink:#241d06; }
html[data-accent="blue"]   { --accent:#60a5fa; --accent-ink:#0a1a33; }
html[data-accent="purple"] { --accent:#a78bfa; --accent-ink:#1d1533; }
html[data-accent="rose"]   { --accent:#fb7185; --accent-ink:#33101a; }

/* ── الخلفيات: ليل ─────────────────────────────────────────────────── */
:root, html[data-bg="1"] { --bg:#0f1a17; }
html[data-bg="2"] { --bg:#0e1420; }
html[data-bg="3"] { --bg:#0c0c0e; }
:root {
  --panel:  color-mix(in srgb, var(--bg), #ffffff 5%);
  --panel2: color-mix(in srgb, var(--bg), #ffffff 9%);
  --border: color-mix(in srgb, var(--bg), #ffffff 15%);
  --text:#e8efe9; --muted:#93a8a0;
  --gold:#d4af37; --pos:#6ee7b7; --neg:#fca5a5;
  --pos-bg:#052e1b; --pos-bd:#14532d; --neg-bg:#2b0f0f; --neg-bd:#7f1d1d;
  --mark:#d4af3755; --mark-text:#ffe9a8;
  --shadow:0 10px 30px -12px rgba(0,0,0,.5);
  --radius:14px;
  --accent-soft: color-mix(in srgb, var(--accent), transparent 82%);
  --accent-line: color-mix(in srgb, var(--accent), transparent 60%);
}

/* ── الخلفيات: نهار ────────────────────────────────────────────────── */
html[data-theme="light"] { --bg:#f6f3ea; }
html[data-theme="light"][data-bg="2"] { --bg:#ffffff; }
html[data-theme="light"][data-bg="3"] { --bg:#eef4f0; }
html[data-theme="light"] {
  --panel:  color-mix(in srgb, var(--bg), #ffffff 60%);
  --panel2: color-mix(in srgb, var(--bg), #000000 4%);
  --border: color-mix(in srgb, var(--bg), #000000 12%);
  --text:#1d2823; --muted:#5f6f68;
  --gold:#9a7b1a; --pos:#0f7a4d; --neg:#b33535;
  --pos-bg:#e7f6ee; --pos-bd:#b5e0c9; --neg-bg:#fbeaea; --neg-bd:#eec3c3;
  --mark:#f3dd9a; --mark-text:#5f4a00;
  --shadow:0 10px 25px -14px rgba(30,40,35,.25);
  --accent-soft: color-mix(in srgb, var(--accent), #ffffff 84%);
  --accent-line: color-mix(in srgb, var(--accent), #ffffff 40%);
}
html[data-theme="light"][data-accent="emerald"] { --accent:#0e9f6e; --accent-ink:#ffffff; }
html[data-theme="light"][data-accent="gold"]   { --accent:#a8821c; --accent-ink:#ffffff; }
html[data-theme="light"][data-accent="blue"]   { --accent:#2563eb; --accent-ink:#ffffff; }
html[data-theme="light"][data-accent="purple"] { --accent:#7c3aed; --accent-ink:#ffffff; }
html[data-theme="light"][data-accent="rose"]   { --accent:#e11d48; --accent-ink:#ffffff; }

/* ── الأساس ─────────────────────────────────────────────────────────── */
* { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
body {
  font-family:"Tajawal","Noto Naskh Arabic",Tahoma,sans-serif;
  background:
    radial-gradient(1100px 500px at 85% -10%, var(--accent-soft), transparent 60%),
    var(--bg);
  color:var(--text); min-height:100vh; display:flex;
  transition:background .3s, color .3s;
}
::selection { background:var(--accent); color:var(--accent-ink); }

/* ── الشريط الجانبي ─────────────────────────────────────────────────── */
aside {
  width:264px; flex-shrink:0; min-height:100vh; position:sticky; top:0;
  background:var(--panel); border-left:1px solid var(--border);
  display:flex; flex-direction:column;
}
.brand { display:flex; gap:12px; align-items:center; padding:20px 18px 16px; border-bottom:1px solid var(--border); }
.brand .icon {
  width:44px; height:44px; border-radius:13px; flex-shrink:0;
  background:linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent), #000 25%));
  color:var(--accent-ink); display:grid; place-items:center;
  font-family:Amiri,serif; font-size:1.5rem; font-weight:700; box-shadow:var(--shadow);
}
.brand h1 { font-family:Amiri,serif; font-size:1.25rem; line-height:1.2; }
.brand p { font-size:.68rem; color:var(--muted); margin-top:2px; }
nav { padding:10px; flex:1; overflow-y:auto; }
nav .sec-title { font-size:.66rem; color:var(--muted); letter-spacing:.5px; padding:12px 12px 4px; }
nav button {
  display:flex; align-items:center; gap:10px; width:100%; text-align:right;
  background:none; border:none; color:var(--text); font-family:inherit;
  font-size:.92rem; padding:10px 12px; border-radius:10px; cursor:pointer;
  transition:background .15s, color .15s; margin-bottom:1px;
}
nav button:hover { background:var(--panel2); }
nav button.active { background:var(--accent-soft); color:var(--accent); font-weight:700; box-shadow:inset 2px 0 0 var(--accent); }
.side-foot { padding:12px 16px; border-top:1px solid var(--border); font-size:.72rem; color:var(--muted); }
.side-foot .stats { display:grid; grid-template-columns:1fr 1fr; gap:6px; margin-bottom:10px; }
.side-foot .stat b { color:var(--accent); font-size:.95rem; display:block; }

/* ── الرأس والمحتوى ─────────────────────────────────────────────────── */
main { flex:1; min-width:0; display:flex; flex-direction:column; }
header.top {
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  padding:14px clamp(14px,3vw,36px); border-bottom:1px solid var(--border);
  background:color-mix(in srgb, var(--panel), transparent 35%);
  position:sticky; top:0; z-index:20; backdrop-filter:blur(10px);
}
header.top .title { font-family:Amiri,serif; font-size:1.25rem; }
header.top .sub { font-size:.75rem; color:var(--muted); width:100%; }
.spacer { flex:1; }
.content { padding:22px clamp(14px,3vw,36px) 60px; max-width:1150px; width:100%; }

.pill {
  display:inline-flex; align-items:center; gap:7px; font-size:.75rem;
  background:var(--panel2); border:1px solid var(--border); color:var(--muted);
  padding:6px 12px; border-radius:999px;
}
.dot { width:8px; height:8px; border-radius:50%; background:var(--pos); }
.dot.off { background:var(--neg); }

/* ── الأزرار والحقول ────────────────────────────────────────────────── */
button { font-family:inherit; }
.go {
  background:linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent), #000 18%));
  color:var(--accent-ink); border:none; border-radius:10px; padding:11px 26px;
  font-size:.95rem; font-weight:700; cursor:pointer; transition:filter .15s, transform .1s;
  box-shadow:var(--shadow);
}
.go:hover { filter:brightness(1.08); } .go:active { transform:translateY(1px); }
.go:disabled { opacity:.55; cursor:wait; }
.ghost {
  background:var(--panel2); color:var(--accent); border:1px solid var(--accent-line);
  border-radius:9px; padding:8px 16px; font-size:.83rem; cursor:pointer; transition:background .15s;
}
.ghost:hover { background:var(--accent-soft); }
.iconbtn {
  background:var(--panel2); border:1px solid var(--border); color:var(--text);
  border-radius:9px; width:34px; height:34px; cursor:pointer; font-size:.95rem;
  display:inline-grid; place-items:center; transition:background .15s;
}
.iconbtn:hover { background:var(--accent-soft); border-color:var(--accent-line); }
input, select, textarea {
  background:var(--panel2); border:1px solid var(--border); border-radius:10px;
  color:var(--text); font-family:inherit; font-size:.98rem; padding:11px 14px; width:100%;
  transition:border-color .15s, box-shadow .15s;
}
textarea { min-height:76px; resize:vertical; line-height:1.9; }
input:focus, select:focus, textarea:focus {
  outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft);
}
.row { display:flex; flex-wrap:wrap; gap:10px; align-items:flex-end; margin-bottom:10px; }
.field { display:flex; flex-direction:column; gap:5px; flex:1 1 190px; }
.field.small { flex:0 1 110px; }
.field label { font-size:.75rem; color:var(--muted); }
.radios { display:flex; gap:14px; flex-wrap:wrap; padding:8px 2px; }
.radios label { display:flex; gap:6px; align-items:center; font-size:.86rem; cursor:pointer; }
.radios input { width:auto; accent-color:var(--accent); }
.seg { display:inline-flex; background:var(--panel2); border:1px solid var(--border); border-radius:10px; overflow:hidden; }
.seg button { background:none; border:none; color:var(--muted); padding:9px 18px; font-size:.86rem; cursor:pointer; }
.seg button.on { background:var(--accent); color:var(--accent-ink); font-weight:700; }

/* ── الألواح والبطاقات ─────────────────────────────────────────────── */
.panel { display:none; animation:fadein .25s ease; }
.panel.active { display:block; }
@keyframes fadein { from { opacity:0; transform:translateY(6px);} to { opacity:1; transform:none; } }
.box { background:var(--panel); border:1px solid var(--border); border-radius:var(--radius); padding:18px; margin-bottom:16px; }
.card {
  background:var(--panel); border:1px solid var(--border); border-radius:var(--radius);
  padding:16px 20px; margin-bottom:12px; transition:border-color .15s;
}
.card:hover { border-color:var(--accent-line); }
.muted { color:var(--muted); font-size:.82rem; line-height:1.9; }
.muted code, .hint code { background:var(--panel2); padding:1px 7px; border-radius:5px; color:var(--accent); font-size:.85em; }
.chips { display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin-bottom:10px; }
.badge {
  display:inline-flex; align-items:center; padding:3px 11px; border-radius:999px;
  font-size:.72rem; background:var(--panel2); border:1px solid var(--border); color:var(--muted);
}
.badge.gold  { color:var(--gold); border-color:color-mix(in srgb, var(--gold), transparent 55%); background:color-mix(in srgb, var(--gold), transparent 90%); }
.badge.pos   { color:var(--pos); border-color:var(--pos-bd); background:var(--pos-bg); }
.badge.neg   { color:var(--neg); border-color:var(--neg-bd); background:var(--neg-bg); }
.badge.accent{ color:var(--accent); border-color:var(--accent-line); background:var(--accent-soft); }
.lnk { cursor:pointer; color:var(--accent); font-size:.82rem; text-decoration:underline dotted; }
.lnk:hover { text-decoration:underline; }

/* ── النصوص الحديثية ────────────────────────────────────────────────── */
.matn { font-family:Amiri,serif; font-size:1.22rem; line-height:2.3; text-align:justify; }
.matn-box {
  background:color-mix(in srgb, var(--gold), transparent 93%);
  border-inline-start:4px solid var(--gold);
  padding:14px 18px; border-radius:10px; margin:10px 0;
  font-family:Amiri,serif; font-size:1.3rem; line-height:2.4;
}
.isnad-box { color:var(--muted); font-family:Amiri,serif; font-size:1.02rem; line-height:2.1; }
.en-box {
  direction:ltr; text-align:left; font-family:Georgia,serif; font-size:.9rem;
  background:var(--panel2); border-left:3px solid var(--accent); border-radius:8px;
  padding:12px 16px; color:var(--muted); line-height:1.7; margin-top:8px;
}
mark { background:var(--mark); color:var(--mark-text); border-radius:4px; padding:0 3px; }
.d-add { color:#4ade80; font-weight:700; }
.d-del { color:#f87171; text-decoration:line-through; opacity:.8; }
html[data-theme="light"] .d-add { color:#15803d; }
html[data-theme="light"] .d-del { color:#b91c1c; }
.sec-h { font-size:.76rem; color:var(--accent); font-weight:700; margin:16px 0 8px; letter-spacing:.4px; }

/* ── شجرة الإسناد ───────────────────────────────────────────────────── */
.chain { list-style:none; margin:8px 0; }
.chain li { position:relative; padding:10px 32px 10px 8px; border-right:2px solid var(--accent-line); margin-right:12px; }
.chain li::before {
  content:''; position:absolute; right:-7px; top:16px; width:12px; height:12px;
  border-radius:50%; background:var(--accent); border:2.5px solid var(--bg);
}
.chain li.prophet::before { background:var(--gold); box-shadow:0 0 0 4px color-mix(in srgb, var(--gold), transparent 75%); }
.chain .nname { font-family:Amiri,serif; font-size:1.08rem; }
.chain .ninfo { font-size:.76rem; color:var(--muted); margin-top:3px; display:flex; gap:6px; flex-wrap:wrap; }
.grade-tag { padding:1px 9px; border-radius:999px; font-size:.7rem; border:1px solid; }
.grade-thiqa { color:var(--pos); border-color:var(--pos-bd); background:var(--pos-bg); }
.grade-weak  { color:var(--neg); border-color:var(--neg-bd); background:var(--neg-bg); }
.grade-mid   { color:var(--gold); border-color:color-mix(in srgb, var(--gold), transparent 55%); }

/* ── الجداول ────────────────────────────────────────────────────────── */
.rulings { margin-top:10px; overflow-x:auto; }
table { width:100%; border-collapse:collapse; font-size:.9rem; }
th, td { padding:9px 12px; text-align:right; border-bottom:1px solid var(--border); vertical-align:top; }
th { color:var(--muted); font-size:.74rem; font-weight:500; }
tr:hover td { background:color-mix(in srgb, var(--panel2), transparent 40%); }
td.pos { color:var(--pos); } td.neg { color:var(--neg); }
.sim-bar { height:5px; border-radius:3px; background:var(--panel2); overflow:hidden; min-width:64px; display:inline-block; vertical-align:middle; }
.sim-bar > div { height:100%; background:var(--accent); }

/* ── الاستعلام الذكي ───────────────────────────────────────────────── */
.stages { display:flex; gap:8px; margin:12px 0; flex-wrap:wrap; }
.stage { font-size:.74rem; color:var(--muted); border:1px dashed var(--border); border-radius:999px; padding:4px 13px; }
.stage.on { color:var(--accent); border-color:var(--accent); border-style:solid; animation:pulse 1.2s infinite; }
.stage.done { color:var(--pos); border-color:var(--pos-bd); border-style:solid; }
@keyframes pulse { 50% { opacity:.55; } }
.answer { background:var(--panel); border:1px solid var(--border); border-radius:var(--radius); padding:20px 22px; line-height:2.15; font-size:1.02rem; white-space:pre-wrap; }
.answer .hd { font-family:Amiri,serif; font-size:1.15rem; color:var(--accent); margin-bottom:10px; white-space:normal; }
.answer h3 { font-family:Amiri,serif; color:var(--gold); font-size:1.08rem; margin:14px 0 4px; white-space:normal; }
.answer b { color:var(--gold); }
.refs { margin-top:14px; padding-top:12px; border-top:1px dashed var(--border); white-space:normal; }
.ref { font-size:.86rem; color:var(--muted); padding:4px 0; line-height:1.9; }
.provider { margin-top:10px; font-size:.72rem; color:var(--muted); white-space:normal; }
.err-box { background:var(--neg-bg); border:1px solid var(--neg-bd); color:var(--neg); padding:13px 16px; border-radius:10px; margin:8px 0; display:flex; gap:12px; align-items:center; flex-wrap:wrap; }

/* ── الكتب ──────────────────────────────────────────────────────────── */
.books-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(225px,1fr)); gap:12px; }
.book-card { background:var(--panel); border:1px solid var(--border); border-radius:12px; padding:14px; transition:transform .15s, border-color .15s; }
.book-card:hover { transform:translateY(-2px); border-color:var(--accent-line); }
.book-card b { color:var(--accent); font-family:Amiri,serif; font-size:1.04rem; }
.book-card small { display:block; color:var(--muted); margin-top:4px; font-size:.76rem; }
.code {
  direction:ltr; text-align:left; background:color-mix(in srgb, var(--bg), #000 20%);
  border:1px solid var(--border); border-radius:10px; padding:13px; font-size:.8rem;
  overflow-x:auto; color:var(--pos); font-family:Consolas,monospace; line-height:1.7;
}
html[data-theme="light"] .code { background:#f4f6f5; color:#0f7a4d; }

/* ── الإعدادات (السمات) ─────────────────────────────────────────────── */
.settings-wrap { position:relative; }
.settings-pop {
  position:absolute; top:calc(100% + 8px); left:0; z-index:50; width:282px;
  background:var(--panel); border:1px solid var(--border); border-radius:14px;
  padding:16px; box-shadow:var(--shadow); display:none;
}
.settings-pop.open { display:block; }
.settings-pop .st { font-size:.72rem; color:var(--muted); margin:12px 0 7px; }
.settings-pop .st:first-child { margin-top:0; }
.swatches { display:flex; gap:8px; }
.swatch { width:26px; height:26px; border-radius:50%; cursor:pointer; border:2px solid transparent; transition:transform .1s; }
.swatch:hover { transform:scale(1.12); }
.swatch.on { box-shadow:0 0 0 2px var(--bg), 0 0 0 4px var(--accent); }
.bg-swatch { width:38px; height:26px; border-radius:7px; border:1.5px solid var(--border); cursor:pointer; }
.bg-swatch.on { outline:2px solid var(--accent); outline-offset:1px; }
.fontctl { display:flex; gap:8px; align-items:center; }
.fontctl span { font-size:.8rem; color:var(--muted); min-width:44px; text-align:center; }

/* ── إشعار Toast ────────────────────────────────────────────────────── */
#toast {
  position:fixed; bottom:26px; right:50%; transform:translateX(50%) translateY(8px);
  background:var(--accent); color:var(--accent-ink); font-weight:700; font-size:.86rem;
  padding:10px 26px; border-radius:999px; opacity:0; transition:.3s; pointer-events:none; z-index:99;
  box-shadow:var(--shadow);
}
#toast.show { opacity:1; transform:translateX(50%); }

/* ── التباين والحركة ────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation:none !important; transition:none !important; } }

/* ── الجوال ─────────────────────────────────────────────────────────── */
@media (max-width: 820px) {
  body { flex-direction:column; }
  aside { width:100%; min-height:unset; position:static; border-left:none; border-bottom:1px solid var(--border); }
  nav { display:flex; overflow-x:auto; padding:6px 10px; }
  nav .sec-title { display:none; }
  nav button { white-space:nowrap; width:auto; }
  .side-foot { display:none; }
}

/* ── الطباعة / PDF ──────────────────────────────────────────────────── */
@media print {
  body { background:#fff !important; color:#111 !important; display:block; }
  aside, header.top, .toolbar, button, textarea, .row, #toast, .stages, .no-print { display:none !important; }
  .content { padding:0; max-width:100%; }
  .card, .box, .answer { background:#fff !important; border:1px solid #ccc !important; color:#111 !important; break-inside:avoid; box-shadow:none; }
  .matn-box { background:#faf6e9 !important; color:#111 !important; border-color:#b08d00 !important; }
  .isnad-box, .muted, .ref, .provider { color:#333 !important; }
  .sec-h, .answer .hd { color:#0a5c3f !important; }
  .answer h3, .answer b { color:#6b5a1e !important; }
  th, td { border-color:#ccc !important; color:#111 !important; }
  .badge { color:#333 !important; background:#f0f0f0 !important; border-color:#ccc !important; }
  .badge.pos { color:#14532d !important; } .badge.neg { color:#7f1d1d !important; }
  mark { background:#ffe9a8 !important; color:#111 !important; }
  .chain li { border-color:#999 !important; }
  .en-box { background:#f5f7f9 !important; color:#333 !important; }
}