/* ============================================================
   جامع الأذكار — طبقة الهوية الفاخرة (polish.css)  v31
   تُحمَّل بعد كل ملفات الأنماط. تغيّر الشكل فقط: الألوان، الأسطح،
   الخطوط، والعمق. لا تلمس بنية التخطيط على الكمبيوتر إطلاقًا،
   ولا تحذف أي محتوى أو ميزة.
   ============================================================ */

:root {
  /* لوحة فاخرة: ليل عميق + ذهب مصقول */
  --lx-night-900: #070B16;
  --lx-night-800: #0C1220;
  --lx-night-700: #121A2C;
  --lx-night-600: #1A2438;

  --lx-ivory-50: #FDFBF6;
  --lx-ivory-100: #F7F1E4;
  --lx-ivory-200: #EFE6D3;

  --lx-gold-100: #F5E3B0;
  --lx-gold-300: #E3C778;
  --lx-gold-500: #C9A44C;
  --lx-gold-700: #9A7526;

  --lx-ink: #221D15;
  --lx-muted: #6E6455;

  --lx-hair: 1px solid rgba(201, 164, 76, .26);
  --lx-hair-soft: 1px solid rgba(201, 164, 76, .14);

  --lx-r-xl: 26px;
  --lx-r-lg: 20px;
  --lx-r-md: 14px;

  --lx-elev-1: 0 1px 1px rgba(10, 8, 4, .04), 0 6px 18px rgba(10, 8, 4, .06);
  --lx-elev-2: 0 2px 4px rgba(10, 8, 4, .06), 0 18px 44px rgba(10, 8, 4, .12);
  --lx-elev-3: 0 30px 70px rgba(6, 10, 20, .32);

  --lx-gold-line: linear-gradient(90deg, transparent, rgba(201, 164, 76, .55), rgba(245, 227, 176, .9), rgba(201, 164, 76, .55), transparent);
  --lx-gold-fill: linear-gradient(135deg, #F5E3B0 0%, #C9A44C 45%, #9A7526 100%);
}

/* ---------- أساسيات لطيفة وآمنة ---------- */
html { -webkit-text-size-adjust: 100%; }
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
* { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 2px solid var(--lx-gold-500); outline-offset: 3px; border-radius: 10px; }
::selection { background: rgba(201, 164, 76, .26); }

/* خلفية فاخرة بتوهّج خفيف خلف المحتوى (لا تؤثر على التخطيط) */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(1100px 620px at 82% -12%, rgba(201, 164, 76, .10), transparent 62%),
    radial-gradient(900px 520px at 8% 6%, rgba(201, 164, 76, .07), transparent 60%);
}
body:not(.light)::before {
  background:
    radial-gradient(1100px 620px at 82% -12%, rgba(201, 164, 76, .16), transparent 62%),
    radial-gradient(900px 520px at 8% 6%, rgba(90, 130, 200, .10), transparent 60%);
}

/* ---------- الأسطح: زجاج وحواف ذهبية ---------- */
.real-mushaf-shell,
.mushaf-mode-chooser,
.library-hero,
.quran-controls,
.quran-display,
.tafseer-panel,
.recitation-player,
.real-mushaf-recitation,
.library-card,
.paper-book-shell {
  border-radius: var(--lx-r-xl);
  border: var(--lx-hair);
  box-shadow: var(--lx-elev-1);
  backdrop-filter: saturate(140%) blur(6px);
  -webkit-backdrop-filter: saturate(140%) blur(6px);
}
body:not(.light) .real-mushaf-shell,
body:not(.light) .mushaf-mode-chooser,
body:not(.light) .library-hero,
body:not(.light) .quran-controls,
body:not(.light) .quran-display,
body:not(.light) .tafseer-panel,
body:not(.light) .recitation-player,
body:not(.light) .real-mushaf-recitation,
body:not(.light) .library-card,
body:not(.light) .paper-book-shell {
  box-shadow: var(--lx-elev-3);
}

/* خيط ذهبي علوي رفيع يمنح إحساس التطعيم */
.real-mushaf-shell, .mushaf-mode-chooser, .library-hero, .paper-book-shell { position: relative; }
.real-mushaf-shell::after,
.mushaf-mode-chooser::after,
.library-hero::after,
.paper-book-shell::after {
  content: '';
  position: absolute;
  inset-inline: 14%;
  top: 0;
  height: 1px;
  pointer-events: none;
  background: var(--lx-gold-line);
  opacity: .85;
}

/* ---------- العناوين: ذهب متدرّج ---------- */
.library-hero h1,
.real-mushaf-heading h2,
.mushaf-mode-heading h2,
.surah-name {
  background: var(--lx-gold-fill);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  letter-spacing: -.2px;
}
.mushaf-mode-kicker,
.library-kicker {
  letter-spacing: 2.4px;
  text-transform: none;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--lx-gold-700);
}
body:not(.light) .mushaf-mode-kicker,
body:not(.light) .library-kicker { color: var(--lx-gold-300); }

/* ---------- الأزرار: لمسة معدنية ---------- */
.real-mushaf-tool,
.btn-control,
.library-back,
.real-mushaf-view-tab,
.mushaf-mode-option {
  border-radius: var(--lx-r-md);
  transition: transform 200ms cubic-bezier(.2, .8, .3, 1), box-shadow 200ms ease, background 200ms ease, border-color 200ms ease;
}
.real-mushaf-tool:active,
.btn-control:active,
.library-back:active,
.mushaf-mode-option:active { transform: translateY(1px) scale(.985); }
@media (hover: hover) {
  .real-mushaf-tool:hover,
  .btn-control:hover,
  .library-back:hover {
    border-color: rgba(201, 164, 76, .5);
    box-shadow: 0 6px 18px rgba(201, 164, 76, .18);
  }
}
.real-mushaf-tool.real-mushaf-play,
.btn-control:not(.secondary) {
  background-image: var(--lx-gold-fill);
  border-color: rgba(154, 117, 38, .5);
  color: #1B1408;
  font-weight: 700;
}

/* مبدّل الأوضاع كعنصر مقسّم أنيق */
.real-mushaf-view-switcher {
  gap: 4px;
  padding: 5px;
  border-radius: 999px;
  border: var(--lx-hair-soft);
  background: rgba(201, 164, 76, .08);
}
.real-mushaf-view-tab { border-radius: 999px; }
.real-mushaf-view-tab.active {
  background-image: var(--lx-gold-fill);
  color: #1B1408;
  box-shadow: 0 4px 12px rgba(201, 164, 76, .3);
}

/* بطاقات التفسير: هدوء وترف */
.real-mushaf-tafsir-ayah { border-radius: 16px; border: var(--lx-hair-soft); }
.real-mushaf-tafsir-ayah.is-active { box-shadow: inset 3px 0 0 var(--lx-gold-500); }

/* ---------- واجهة الجوال: هيكل تطبيق ---------- */
@media (max-width: 767px) {
  body { padding-bottom: calc(72px + env(safe-area-inset-bottom)); }

  .library-hero, .real-mushaf-shell, .mushaf-mode-chooser, .paper-book-shell {
    border-radius: 22px;
    margin-inline: 12px;
    width: auto;
  }
  .library-hero h1, .real-mushaf-heading h2 { font-size: 27px; line-height: 1.32; }

  /* شريط تبويب سفلي زجاجي — يعمل على iOS وأندرويد */
  .library-header .library-nav,
  .quran-mobile-app-nav {
    position: fixed;
    inset-inline: 10px;
    bottom: calc(8px + env(safe-area-inset-bottom));
    z-index: 70;
    display: flex;
    justify-content: space-around;
    gap: 2px;
    padding: 8px 6px;
    border: var(--lx-hair);
    border-radius: 22px;
    background: rgba(253, 251, 246, .78);
    backdrop-filter: saturate(180%) blur(22px);
    -webkit-backdrop-filter: saturate(180%) blur(22px);
    box-shadow: 0 12px 34px rgba(10, 8, 4, .16);
    overflow-x: auto;
    scrollbar-width: none;
  }
  .library-header .library-nav::-webkit-scrollbar,
  .quran-mobile-app-nav::-webkit-scrollbar { display: none; }
  body:not(.light) .library-header .library-nav,
  body:not(.light) .quran-mobile-app-nav {
    background: rgba(12, 18, 32, .74);
    box-shadow: 0 16px 40px rgba(0, 0, 0, .5);
  }
  .library-header .library-nav a,
  .quran-mobile-app-nav .nav-link {
    flex: 0 0 auto;
    display: grid;
    justify-items: center;
    gap: 3px;
    min-width: 60px;
    padding: 6px 8px;
    border: 0;
    border-radius: 14px;
    background: transparent;
    font-size: 10px;
    font-weight: 700;
    line-height: 1.2;
  }
  .library-header .library-nav a i,
  .quran-mobile-app-nav .nav-link i { font-size: 18px; }
  .library-header .library-nav a.active,
  .quran-mobile-app-nav .nav-link.active {
    color: #1B1408;
    background-image: var(--lx-gold-fill);
    box-shadow: 0 5px 14px rgba(201, 164, 76, .3);
  }
  .library-header { background: transparent; border: 0; box-shadow: none; }

  /* أدوات المصحف: صفّان مريحان للإبهام */
  .real-mushaf-page-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .real-mushaf-tool { padding: 11px 12px; font-size: 12px; }
  .real-mushaf-arrow { width: 42px; height: 42px; }
}

/* ---------- قارئ الكتب على الجوال ---------- */
@media (max-width: 767px) {
  .paper-book-shell .real-mushaf-book { width: min(100%, 460px) !important; margin-inline: auto !important; }
  .paper-book-shell .real-mushaf-page-primary {
    aspect-ratio: auto !important;
    height: calc(100dvh - 320px) !important;
    min-height: 360px !important;
  }
  .paper-book-shell .real-mushaf-page-adjacent,
  .paper-book-shell .real-mushaf-gutter { display: none !important; }
  .paper-page-body { padding: 18px 16px 30px !important; font-size: 17px !important; line-height: 2.05 !important; }
  .paper-font-2 .paper-page-body { font-size: 19px !important; }
  .paper-font-3 .paper-page-body { font-size: 21px !important; }
  .paper-book-shell .real-mushaf-control-group { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .paper-book-shell .real-mushaf-page-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 768px) {
  .paper-book-shell .paper-page-body { font-size: 18px; line-height: 2.1; }
}

/* ---------- تفاصيل ختامية ---------- */
.real-mushaf-page, .mushaf-flip-face { border-radius: 6px; }
.library-footer, .quran-footer { opacity: .92; }
@media (min-width: 768px) {
  * { scrollbar-width: thin; scrollbar-color: rgba(201, 164, 76, .32) transparent; }
  *::-webkit-scrollbar { width: 10px; height: 10px; }
  *::-webkit-scrollbar-thumb { background: rgba(201, 164, 76, .3); border-radius: 99px; border: 3px solid transparent; background-clip: padding-box; }
  *::-webkit-scrollbar-track { background: transparent; }
}
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}
:root { --jame-polish-version: "31"; }