/* ══════════════════════════════════════════════════════
   HIKAYA READER CSS — النسخة السينمائية v2
   يُحمَّل فقط على صفحة قراءة الفصل
   ══════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════
   7 THEMES — ثيمات لونية شبابية عصرية هادئة
   ══════════════════════════════════════════════════════

   theme-sand    — رمل دافئ     (الافتراضي)
   theme-mist    — ضباب أزرق
   theme-sage    — أخضر مريمية
   theme-dusk    — بنفسجي غسق
   theme-slate   — رمادي أردوازي
   theme-rose    — وردي ناعم
   theme-night   — ليلي عميق
   ══════════════════════════════════════════════════════ */

/* ── متغيرات ثابتة لا تتغير ──────────────────────────── */
:root {
  --f-story: 'Scheherazade New', 'Amiri', serif;
  --f-ui:    'Noto Naskh Arabic', serif;
  --story-size:  1.28rem;
  --story-lead:  2.15;
  --story-width: 60ch;
}

/* ══ 1 — SAND رمل دافئ (الافتراضي) ══════════════════ */
:root,
body.theme-sand {
  --bg:            #f0e8d8;
  --bg-deep:       #e6dbc8;
  --surface:       #f7f2e8;
  --ink:           #1c1108;
  --ink-secondary: #4a3520;
  --ink-ghost:     #9a7850;
  --accent:        #7a4828;
  --gold:          #9a7828;
  --gold-lt:       #c09840;
  --shadow:        rgba(28,17,8,0.10);
  --swatch:        #c8a870;
}

/* ══ 2 — MIST ضباب أزرق ══════════════════════════════ */
body.theme-mist {
  --bg:            #eef2f5;
  --bg-deep:       #e2e9ee;
  --surface:       #f4f7f9;
  --ink:           #0e1820;
  --ink-secondary: #2a3d50;
  --ink-ghost:     #7090a8;
  --accent:        #2a6080;
  --gold:          #3a8090;
  --gold-lt:       #58a8bc;
  --shadow:        rgba(14,24,32,0.09);
  --swatch:        #6098b8;
}

/* ══ 3 — SAGE أخضر مريمية ════════════════════════════ */
body.theme-sage {
  --bg:            #edf2ec;
  --bg-deep:       #e0ebe0;
  --surface:       #f3f7f3;
  --ink:           #0e1a10;
  --ink-secondary: #284030;
  --ink-ghost:     #6a9070;
  --accent:        #2a5a38;
  --gold:          #4a7848;
  --gold-lt:       #6a9860;
  --shadow:        rgba(14,26,16,0.09);
  --swatch:        #5a8858;
}

/* ══ 4 — DUSK بنفسجي غسق ════════════════════════════ */
body.theme-dusk {
  --bg:            #f0edf6;
  --bg-deep:       #e6e0f0;
  --surface:       #f6f3fa;
  --ink:           #130e20;
  --ink-secondary: #382858;
  --ink-ghost:     #8070a0;
  --accent:        #5038a0;
  --gold:          #7058b8;
  --gold-lt:       #9078d0;
  --shadow:        rgba(19,14,32,0.09);
  --swatch:        #7860b0;
}

/* ══ 5 — SLATE رمادي أردوازي ════════════════════════ */
body.theme-slate {
  --bg:            #f0f1f3;
  --bg-deep:       #e4e6ea;
  --surface:       #f6f7f8;
  --ink:           #0e1218;
  --ink-secondary: #303848;
  --ink-ghost:     #7080a0;
  --accent:        #304878;
  --gold:          #4060a0;
  --gold-lt:       #5878c0;
  --shadow:        rgba(14,18,24,0.09);
  --swatch:        #5070a8;
}

/* ══ 6 — ROSE وردي ناعم ══════════════════════════════ */
body.theme-rose {
  --bg:            #f5eff0;
  --bg-deep:       #ede3e5;
  --surface:       #faf5f6;
  --ink:           #1a0e10;
  --ink-secondary: #482830;
  --ink-ghost:     #a07880;
  --accent:        #8a3848;
  --gold:          #a85060;
  --gold-lt:       #c87080;
  --shadow:        rgba(26,14,16,0.09);
  --swatch:        #c07080;
}

/* ══ 7 — NIGHT ليلي عميق ════════════════════════════ */
body.theme-night {
  --bg:            #131820;
  --bg-deep:       #0e1218;
  --surface:       #1a2030;
  --ink:           #d8e0ec;
  --ink-secondary: #98a8c0;
  --ink-ghost:     #485870;
  --accent:        #5888c8;
  --gold:          #4878b8;
  --gold-lt:       #6898d8;
  --shadow:        rgba(0,0,0,0.40);
  --swatch:        #4878b8;
}

/* ── إخفاء عناصر نقطة في صفحة القراءة ──────────────── */
body.reader-page .site-nav,
body.reader-page .site-footer,
body.reader-page .site-header { display: none; }

/* ── Reset داخلي ────────────────────────────────────── */
body.reader-page {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--f-story);
  direction: rtl;
  min-height: 100vh;
  overflow-x: hidden;
  transition: background 2.5s ease, color 1.5s ease;
}

/* يخفي هيدر وفوتر القالب في صفحة القراءة */
body.reader-page .site-header,
body.reader-page .site-footer { display: none; }

/* ══════════════════════════════════════════════════════
   INTRO SCREEN
   ══════════════════════════════════════════════════════ */
.intro-screen {
  position: fixed; inset: 0; z-index: 1000;
  background: #0e0804;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 1.2rem;
  animation: introFade 0.7s 2.6s ease forwards;
  pointer-events: none;
}
@keyframes introFade { to { opacity:0; visibility:hidden; } }

.intro-site {
  font-family: 'Amiri', serif;
  font-size: 0.78rem; letter-spacing: 0.6em;
  color: rgba(180,130,60,0.55);
  animation: introUp 0.8s 0.1s ease both;
}
.intro-title {
  font-family: 'Scheherazade New', serif;
  font-size: clamp(1.8rem,5vw,3.2rem); font-weight: 700;
  color: #f0e0c0; text-align: center; line-height: 1.2;
  animation: introUp 0.8s 0.3s ease both;
}
.intro-chapter {
  font-family: var(--f-ui);
  font-size: 0.68rem; letter-spacing: 0.28em;
  color: rgba(190,140,60,0.5);
  animation: introUp 0.8s 0.5s ease both;
}
.intro-line {
  width: 0; height: 1px;
  background: rgba(180,120,40,0.4);
  animation: introLine 0.9s 0.7s ease forwards;
}
@keyframes introUp {
  from { opacity:0; transform:translateY(14px); }
  to   { opacity:1; transform:translateY(0); }
}
@keyframes introLine { to { width: 100px; } }

/* ══════════════════════════════════════════════════════
   AMBIENT BACKGROUND
   ══════════════════════════════════════════════════════ */
.ambient {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
}
.amb-base {
  position: absolute; inset: -20%;
  background:
    radial-gradient(ellipse 75% 55% at 95% 5%,  rgba(138,98,24,0.10) 0%,transparent 55%),
    radial-gradient(ellipse 65% 75% at 5%  95%,  rgba(107,36,22,0.08) 0%,transparent 60%),
    radial-gradient(ellipse 90% 45% at 50% 105%, rgba(80,45,10,0.14)  0%,transparent 50%);
  animation: ambShift 22s ease-in-out infinite alternate;
}
@keyframes ambShift {
  from { opacity:.7; transform:scale(1); }
  to   { opacity:1;  transform:scale(1.04); }
}
.amb-lines {
  position: absolute; inset: 0;
  background-image: repeating-linear-gradient(
    to bottom,
    transparent 0, transparent 2.14rem,
    rgba(28,17,8,0.025) 2.14rem, rgba(28,17,8,0.025) calc(2.14rem + 1px)
  );
  background-size: 100% 2.15rem;
}
body.night-mode .amb-lines {
  background-image: repeating-linear-gradient(
    to bottom,
    transparent 0, transparent 2.14rem,
    rgba(232,213,181,0.018) 2.14rem, rgba(232,213,181,0.018) calc(2.14rem + 1px)
  );
}
.amb-grain {
  position: absolute; inset: 0; opacity: 0.022;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='0.72' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='400' height='400' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ══════════════════════════════════════════════════════
   PROGRESS THREAD — خيط في أقصى اليمين
   ══════════════════════════════════════════════════════ */
.progress-thread {
  position: fixed; top:0; right:0;
  width: 2px; height: 100vh;
  z-index: 90;
  background: rgba(28,17,8,0.05);
}
.progress-fill {
  width: 100%; height: 0%;
  background: linear-gradient(to bottom, var(--accent) 0%, var(--gold-lt) 100%);
  transition: height 0.18s linear;
}

/* ══════════════════════════════════════════════════════
   TOPBAR
   ══════════════════════════════════════════════════════ */
.topbar {
  position: fixed; top:0; left:0; right:0; z-index:100;
  height: 52px;
  display: flex; align-items: center;
  justify-content: space-between;
  padding: 0 2.5rem;
  opacity: 0; transform: translateY(-8px);
  transition: opacity 0.5s, transform 0.5s, background 0.4s;
  pointer-events: none;
}
.topbar.visible {
  opacity: 1; transform: translateY(0);
  background: linear-gradient(to bottom, rgba(240,232,216,0.96) 0%, transparent 100%);
  pointer-events: all;
}
body.night-mode .topbar.visible {
  background: linear-gradient(to bottom, rgba(24,18,10,0.96) 0%, transparent 100%);
}
.topbar-logo {
  font-family: 'Amiri', serif; font-size: 1.1rem;
  color: var(--ink-secondary); letter-spacing: 0.1em;
  text-decoration: none; opacity: 0.7; transition: opacity 0.2s;
}
.topbar-logo:hover { opacity: 1; }
.topbar-info { text-align:center; display:flex; flex-direction:column; gap:.1rem; }
.topbar-story {
  font-family: var(--f-story); font-size: 0.82rem;
  color: var(--ink-secondary); text-decoration: none;
  transition: color .2s;
}
.topbar-story:hover { color: var(--accent); }
.topbar-ch {
  font-family: var(--f-ui); font-size: 0.58rem;
  letter-spacing: 0.2em; color: var(--ink-ghost);
}
.topbar-btn {
  width: 32px; height: 32px; background: transparent;
  border: 1px solid rgba(28,17,8,0.12); border-radius: 2px;
  cursor: pointer; color: var(--ink-ghost); font-size: .82rem;
  display: flex; align-items: center; justify-content: center;
  transition: all .2s; font-family: var(--f-ui);
}
.topbar-btn:hover {
  background: rgba(28,17,8,0.05); color: var(--ink);
  border-color: rgba(28,17,8,0.25);
}

/* ══════════════════════════════════════════════════════
   CHAPTER HERO
   ══════════════════════════════════════════════════════ */
.chapter-hero {
  position: relative; z-index: 10;
  min-height: 100vh;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 6rem 2rem; overflow: hidden;
}
.hero-ghost-letter {
  position: absolute; top:50%; left:50%;
  transform: translate(-50%,-50%);
  font-family: 'Amiri', serif;
  font-size: clamp(16rem,42vw,30rem); font-weight: 700;
  color: rgba(28,17,8,0.032);
  pointer-events: none; user-select: none; line-height: 1;
  animation: ghostBreath 9s ease-in-out infinite;
}
body.night-mode .hero-ghost-letter { color: rgba(232,213,181,0.04); }
@keyframes ghostBreath {
  0%,100% { transform:translate(-50%,-50%) scale(1);     opacity:1; }
  50%     { transform:translate(-50%,-51%) scale(1.025); opacity:.65; }
}
.hero-chapter-marker {
  display:flex; flex-direction:column; align-items:center; gap:.8rem;
  margin-bottom: 2.5rem; position:relative; z-index:2;
  animation: heroUp 1s 1s ease both;
}
.marker-line {
  width:1px; height:55px;
  background: linear-gradient(to bottom,transparent,var(--ink-ghost));
}
.marker-text {
  font-family: var(--f-ui); font-size:.62rem;
  letter-spacing:.42em; color:var(--accent);
}
.hero-title {
  font-family: 'Amiri', serif;
  font-size: clamp(2.8rem,7.5vw,6rem); font-weight:700;
  color: var(--ink); text-align:center; line-height:1.1;
  position:relative; z-index:2;
  text-shadow: 2px 3px 0 rgba(28,17,8,0.04), 0 10px 35px rgba(28,17,8,0.055);
  animation: heroUp 1.1s 1.1s ease both;
}
.hero-sub {
  margin-top: 2.2rem;
  display:flex; flex-direction:column; align-items:center; gap:.55rem;
  position:relative; z-index:2;
  animation: heroUp 1.1s 1.3s ease both;
}
.hero-story-name {
  font-family: var(--f-story); font-size:1rem;
  color: var(--ink-secondary); text-decoration:none; letter-spacing:.05em;
  transition: color .2s;
}
.hero-story-name:hover { color: var(--accent); }
.hero-divider {
  width:38px; height:1px;
  background: linear-gradient(90deg,transparent,var(--gold),transparent);
}
.hero-author {
  font-family: var(--f-ui); font-size:.67rem;
  letter-spacing:.2em; color:var(--ink-ghost);
}
.hero-scroll-hint {
  position:absolute; bottom:3rem; left:50%;
  transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:.5rem;
  animation: heroUp 1s 2s ease both, scrollBounce 2s 3.5s ease-in-out infinite;
  z-index:2;
}
@keyframes heroUp {
  from { opacity:0; transform:translateY(18px); }
  to   { opacity:1; transform:translateY(0); }
}
@keyframes scrollBounce {
  0%,100% { transform:translateX(-50%) translateY(0); }
  50%     { transform:translateX(-50%) translateY(6px); }
}
.scroll-hint-line {
  width:1px; height:38px;
  background: linear-gradient(to bottom,transparent,var(--ink-ghost));
}
.scroll-hint-dot {
  width:4px; height:4px; border-radius:50%; background:var(--ink-ghost);
}

/* ══════════════════════════════════════════════════════
   STORY BODY — قلب التجربة
   ══════════════════════════════════════════════════════ */
.story-body {
  position: relative; z-index:10;
  max-width: var(--story-width);
  margin: 0 auto;
  padding: 2rem 2rem 1rem;
}

/* الفقرة */
.para-wrap {
  position: relative;
  padding: .5rem 0;
  transition: all .5s ease;
}
.para-wrap p,
.para-wrap .dialogue {
  font-size: var(--story-size);
  line-height: var(--story-lead);
  color: var(--ink);
  opacity: .42;
  transition: opacity .65s ease, color .4s ease;
  text-align: justify;
  hyphens: auto;
}
.para-wrap.active p,
.para-wrap.active .dialogue { opacity:1; }
.para-wrap.read p,
.para-wrap.read .dialogue   { opacity:.5; }

/* مسافة بادئة بعد الأولى */
.para-wrap + .para-wrap p { text-indent: 2.2em; }
.para-wrap .dialogue { text-indent: 0 !important; }

/* drop cap */
.para-wrap:first-child p::first-letter {
  font-size: 5.5rem; font-weight:700; float:right;
  line-height:.76; margin-left:.08em; margin-bottom:-.04em;
  color: var(--accent);
  text-shadow: 1px 2px 0 rgba(107,36,22,.18);
  transition: color .4s;
}

/* حوار */
.para-wrap p.dialogue,
.para-wrap .dialogue {
  font-style:italic; color:var(--ink-secondary);
  padding-right:1.2rem;
  border-right: 1.5px solid rgba(28,17,8,0.1);
  transition: border-color .4s;
}
.para-wrap.active p.dialogue,
.para-wrap.active .dialogue { border-right-color: var(--gold); }

/* فاصل المشاهد */
.scene-sep {
  display:flex; align-items:center; gap:1.5rem;
  padding: 2rem 0;
  opacity: .3; transition: opacity .5s;
}
.scene-sep.active { opacity:1; }
.sep-line {
  flex:1; height:1px;
  background: linear-gradient(90deg,transparent,var(--ink-ghost),transparent);
}
.sep-mark {
  font-family: var(--f-ui); font-size:.5rem;
  letter-spacing:.75em; color:var(--ink-ghost);
}

/* شريط الفقرة النشطة */
.para-wrap::before {
  content:''; position:absolute;
  right:-1.3rem; top:50%;
  transform:translateY(-50%) scaleY(0);
  width:2px; height:55%;
  background:var(--accent); border-radius:1px;
  transition: transform .4s cubic-bezier(.34,1.56,.64,1), opacity .4s;
  opacity:0;
}
.para-wrap.active::before {
  transform:translateY(-50%) scaleY(1); opacity:1;
}

/* ══════════════════════════════════════════════════════
   CHAPTER END
   ══════════════════════════════════════════════════════ */
.chapter-end {
  position:relative; z-index:10;
  max-width: var(--story-width);
  margin: 4rem auto 0;
  padding: 0 2rem 8rem;
}
.end-ornament {
  display:flex; align-items:center; gap:1.5rem;
  margin-bottom:4rem; opacity:0; transition:opacity 1.2s ease;
}
.end-ornament.visible { opacity:1; }
.orn-line {
  flex:1; height:1px;
  background: linear-gradient(90deg,var(--ink-ghost),transparent);
}
.orn-line:last-child { background: linear-gradient(90deg,transparent,var(--ink-ghost)); }
.orn-text {
  font-family: var(--f-ui); font-size:.6rem;
  letter-spacing:.35em; color:var(--ink-ghost);
}

/* التنقل */
.chapter-nav {
  display:grid; grid-template-columns:1fr 1fr; gap:1.5rem;
}
.nav-link {
  display:flex; flex-direction:column; gap:.35rem;
  text-decoration:none;
  padding: 1.2rem 0;
  border-top: 1px solid rgba(28,17,8,0.1);
  transition: border-color .3s;
}
.nav-link:hover { border-top-color: var(--accent); }
.nav-link.right { align-items:flex-end; }
.nav-link.left  { align-items:flex-start; }
.nav-link.muted { opacity:.45; }
.nav-dir {
  font-family: var(--f-ui); font-size:.58rem;
  letter-spacing:.25em; color:var(--ink-ghost);
}
.nav-title {
  font-family: var(--f-story); font-size:1rem;
  color:var(--ink-secondary); line-height:1.4;
  transition: color .2s;
}
.nav-link:hover .nav-title { color:var(--ink); }

/* ══════════════════════════════════════════════════════
   TIME INDICATOR
   ══════════════════════════════════════════════════════ */
.time-indicator {
  position:fixed; bottom:2.2rem; left:2rem;
  z-index:50;
  display:flex; flex-direction:column; gap:.3rem;
  opacity:0; transition:opacity .5s; pointer-events:none;
}
.time-indicator.visible { opacity:1; }
.time-greeting {
  font-family: var(--f-ui); font-size:.58rem;
  letter-spacing:.18em; color:var(--ink-ghost);
}
.time-clock {
  font-family:'Amiri',serif; font-size:.72rem; color:var(--ink-ghost); opacity:.7;
}

/* ══════════════════════════════════════════════════════
   NIGHT TOGGLE
   ══════════════════════════════════════════════════════ */
.night-toggle {
  position:fixed; bottom:2rem; right:2.8rem;
  z-index:50; width:36px; height:36px;
  background:var(--surface); border:1px solid rgba(28,17,8,0.13);
  border-radius:50%; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  font-size:.9rem; color:var(--ink-ghost);
  transition:all .3s; box-shadow:0 2px 12px var(--shadow);
}
.night-toggle:hover {
  color:var(--ink); border-color:rgba(28,17,8,.28);
  transform:scale(1.06);
}

/* ══════════════════════════════════════════════════════
   CHAPTERS PANEL
   ══════════════════════════════════════════════════════ */
.panel-mask {
  position:fixed; inset:0; z-index:500; pointer-events:none;
}
.panel-mask.open { pointer-events:all; }
.panel-backdrop {
  position:absolute; inset:0;
  background:rgba(18,10,4,0.42); backdrop-filter:blur(3px);
  opacity:0; transition:opacity .35s;
}
.panel-mask.open .panel-backdrop { opacity:1; }
.chapters-panel {
  position:absolute; left:0; top:0; bottom:0;
  width:min(340px,88vw);
  background:var(--surface);
  border-right:1px solid rgba(28,17,8,0.09);
  transform:translateX(-100%);
  transition:transform .4s cubic-bezier(.4,0,.2,1);
  overflow-y:auto;
  display:flex; flex-direction:column;
}
.panel-mask.open .chapters-panel { transform:translateX(0); }
.panel-head {
  padding:2.8rem 2rem 1.6rem;
  border-bottom:1px solid rgba(28,17,8,0.07); flex-shrink:0;
}
.panel-logo {
  font-family:'Amiri',serif; font-size:.78rem;
  letter-spacing:.42em; color:var(--ink-ghost);
  display:block; margin-bottom:1.1rem; text-decoration:none;
}
.panel-story {
  font-family:var(--f-story); font-size:1.25rem;
  color:var(--ink); font-weight:700; margin-bottom:.3rem;
}
.panel-author {
  font-family:var(--f-ui); font-size:.68rem;
  letter-spacing:.12em; color:var(--ink-ghost);
}
.panel-list { flex:1; padding:.8rem 0; }
.ch-item {
  display:flex; align-items:flex-start; gap:1rem;
  padding:.95rem 2rem;
  text-decoration:none;
  border-bottom:1px solid rgba(28,17,8,0.045);
  transition:background .15s; position:relative;
}
.ch-item::after {
  content:''; position:absolute;
  right:0; top:20%; bottom:20%;
  width:2px; background:var(--accent);
  transform:scaleY(0); transition:transform .2s;
}
.ch-item:hover::after,
.ch-item.current::after { transform:scaleY(1); }
.ch-item:hover,
.ch-item.current { background:rgba(28,17,8,0.028); }
.ch-num {
  font-family:var(--f-ui); font-size:.62rem;
  color:var(--accent); letter-spacing:.08em;
  padding-top:3px; flex-shrink:0; width:1.8rem;
}
.ch-title {
  font-family:var(--f-story); font-size:.97rem;
  color:var(--ink-secondary); line-height:1.45; transition:color .15s;
}
.ch-item:hover .ch-title,
.ch-item.current .ch-title { color:var(--ink); }
.chapters-panel::-webkit-scrollbar { width:2px; }
.chapters-panel::-webkit-scrollbar-thumb { background:rgba(28,17,8,0.14); }

/* ══════════════════════════════════════════════════════
   COMMENTS — تعليقات ووردبريس مُنسَّقة
   ══════════════════════════════════════════════════════ */
.comments-area {
  margin-top: 4rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(28,17,8,0.1);
}
.comments-title {
  font-family:'Amiri',serif; font-size:1.4rem;
  color:var(--ink-secondary); margin-bottom:1.5rem;
  display:flex; align-items:center; gap:1rem;
}
.comments-title::after {
  content:''; flex:1; height:1px;
  background: linear-gradient(90deg,rgba(28,17,8,0.12),transparent);
}
.comment-list { list-style:none; display:flex; flex-direction:column; gap:1.2rem; }
.comment-body {
  background:rgba(28,17,8,0.024);
  border-right:2px solid rgba(28,17,8,0.08);
  padding:.9rem 1.1rem;
}
.comment-author { font-family:var(--f-ui); font-size:.8rem; color:var(--ink-secondary); font-weight:600; }
.comment-metadata a { font-size:.65rem; color:var(--ink-ghost); }
.comment-content p { font-size:1rem; line-height:1.8; color:var(--ink-secondary); }
.comment-form { margin-top:2rem; }
.comment-form-comment textarea,
.comment-form input[type="text"],
.comment-form input[type="email"] {
  width:100%; padding:.75rem 1rem;
  background:transparent;
  border:1px solid rgba(28,17,8,0.12); border-radius:2px;
  font-family:var(--f-story); font-size:.97rem;
  color:var(--ink); direction:rtl; outline:none;
  transition:border-color .2s;
}
.comment-form-comment textarea:focus,
.comment-form input:focus { border-color:var(--gold); }
.form-submit input[type="submit"] {
  padding:.65rem 1.8rem; cursor:pointer;
  background:transparent; border:1px solid var(--accent);
  color:var(--accent); font-family:var(--f-ui); font-size:.85rem;
  letter-spacing:.15em; transition:all .2s;
}
.form-submit input[type="submit"]:hover {
  background:var(--accent); color:var(--surface);
}

/* ══════════════════════════════════════════════════════
   THEME PICKER — منتقي الثيمات
   ══════════════════════════════════════════════════════ */

/* زر فتح المنتقي */
.theme-toggle {
  position: fixed; bottom: 2rem; right: 2.8rem;
  z-index: 50; width: 36px; height: 36px;
  background: var(--surface);
  border: 1px solid rgba(128,128,128,0.18);
  border-radius: 50%; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: .88rem;
  transition: all .3s;
  box-shadow: 0 2px 12px var(--shadow);
}
.theme-toggle:hover {
  transform: scale(1.08);
  border-color: var(--accent);
}

/* لوحة الألوان */
.theme-picker {
  position: fixed; bottom: 4.8rem; right: 2rem;
  z-index: 60;
  background: var(--surface);
  border: 1px solid rgba(128,128,128,0.14);
  border-radius: 14px;
  padding: .9rem 1.1rem;
  display: flex; flex-direction: column; gap: .7rem;
  box-shadow: 0 8px 32px var(--shadow), 0 2px 8px var(--shadow);

  opacity: 0; transform: translateY(8px) scale(0.96);
  pointer-events: none;
  transition: opacity .25s, transform .25s;
}
.theme-picker.open {
  opacity: 1; transform: translateY(0) scale(1);
  pointer-events: all;
}

.picker-label {
  font-family: var(--f-ui);
  font-size: .6rem; letter-spacing: .22em;
  color: var(--ink-ghost); text-align: center;
  padding-bottom: .4rem;
  border-bottom: 1px solid rgba(128,128,128,0.1);
}

.swatches {
  display: flex; flex-direction: column; gap: .45rem;
}

.swatch-btn {
  display: flex; align-items: center; gap: .75rem;
  padding: .42rem .6rem;
  background: transparent; border: none;
  border-radius: 8px; cursor: pointer;
  transition: background .15s;
  width: 100%;
}
.swatch-btn:hover { background: rgba(128,128,128,0.07); }
.swatch-btn.active { background: rgba(128,128,128,0.1); }

.swatch-dot {
  width: 18px; height: 18px; border-radius: 50%;
  flex-shrink: 0;
  border: 2px solid rgba(255,255,255,0.4);
  box-shadow: 0 1px 4px rgba(0,0,0,0.15);
}
.swatch-btn.active .swatch-dot {
  box-shadow: 0 0 0 2px var(--accent), 0 1px 4px rgba(0,0,0,0.2);
}

.swatch-name {
  font-family: var(--f-ui);
  font-size: .72rem;
  color: var(--ink-secondary);
  letter-spacing: .05em;
}
.swatch-btn.active .swatch-name { color: var(--ink); font-weight: 600; }

/* ألوان النقاط لكل ثيم */
.dot-sand  { background: #c8a870; }
.dot-mist  { background: #6098b8; }
.dot-sage  { background: #5a8858; }
.dot-dusk  { background: #7860b0; }
.dot-slate { background: #5070a8; }
.dot-rose  { background: #c07080; }
.dot-night { background: #4878b8; }

/* تغيير الـ topbar حسب الثيم */
body.theme-night .topbar.visible {
  background: linear-gradient(to bottom, rgba(13,18,24,0.97) 0%, transparent 100%);
}

/* ══════════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════════ */
@media (max-width: 600px) {
  :root { --story-size:1.1rem; --story-lead:2; }
  .story-body   { padding:1.4rem 1.4rem; }
  .chapter-hero { min-height:80vh; }
  .hero-title   { font-size:2.4rem; }
  .hero-ghost-letter { font-size:13rem; }
  .para-wrap::before { display:none; }
  .chapter-nav  { grid-template-columns:1fr; }
  .topbar       { padding:0 1.2rem; }
}