/**
 * Main Stylesheet - Platform
 * AI-inspired design with responsive breakpoints
 * Requirements: 1.2, 1.4, 1.5, 8.1, 8.2, 8.3, 8.4, 8.5
 */

/* ============================================
   SELF-HOSTED ARABIC FONTS
   ============================================ */

@font-face {
  font-family: 'Cairo';
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url('../fonts/Cairo-400.ttf') format('truetype');
}

@font-face {
  font-family: 'Cairo';
  font-style: normal;
  font-weight: 500;
  font-display: block;
  src: url('../fonts/Cairo-500.ttf') format('truetype');
}

@font-face {
  font-family: 'Cairo';
  font-style: normal;
  font-weight: 600;
  font-display: block;
  src: url('../fonts/Cairo-600.ttf') format('truetype');
}

@font-face {
  font-family: 'Cairo';
  font-style: normal;
  font-weight: 700;
  font-display: block;
  src: url('../fonts/Cairo-700.ttf') format('truetype');
}

@font-face {
  font-family: 'Noto Kufi Arabic';
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url('../fonts/NotoKufiArabic-400.ttf') format('truetype');
}

@font-face {
  font-family: 'Noto Kufi Arabic';
  font-style: normal;
  font-weight: 500;
  font-display: block;
  src: url('../fonts/NotoKufiArabic-500.ttf') format('truetype');
}

@font-face {
  font-family: 'Noto Kufi Arabic';
  font-style: normal;
  font-weight: 600;
  font-display: block;
  src: url('../fonts/NotoKufiArabic-600.ttf') format('truetype');
}

@font-face {
  font-family: 'Noto Kufi Arabic';
  font-style: normal;
  font-weight: 700;
  font-display: block;
  src: url('../fonts/NotoKufiArabic-700.ttf') format('truetype');
}

@font-face {
  font-family: 'Tajawal';
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url('../fonts/Tajawal-400.ttf') format('truetype');
}

@font-face {
  font-family: 'Tajawal';
  font-style: normal;
  font-weight: 500;
  font-display: block;
  src: url('../fonts/Tajawal-500.ttf') format('truetype');
}

@font-face {
  font-family: 'Tajawal';
  font-style: normal;
  font-weight: 700;
  font-display: block;
  src: url('../fonts/Tajawal-700.ttf') format('truetype');
}

/* Amiri Quran — Self-hosted (King Fahd Complex Naskh style for Quran text) */
@font-face {
  font-family: 'Amiri Quran';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/AmiriQuran-Regular.ttf') format('truetype');
}

/* Noto Naskh Arabic — Self-hosted fallback for Quran text */
@font-face {
  font-family: 'Noto Naskh Arabic';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/NotoNaskhArabic-400.ttf') format('truetype');
}

@font-face {
  font-family: 'Noto Naskh Arabic';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/NotoNaskhArabic-700.ttf') format('truetype');
}

/* Poppins Font — Self-hosted */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('../fonts/Poppins-300.woff2') format('woff2');
}

@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/Poppins-400.woff2') format('woff2');
}

@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/Poppins-500.woff2') format('woff2');
}

@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/Poppins-600.woff2') format('woff2');
}

@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/Poppins-700.woff2') format('woff2');
}

@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('../fonts/Poppins-800.woff2') format('woff2');
}

/* ============================================
   CSS CUSTOM PROPERTIES (Variables)
   AI-inspired color palette derived from logo
   ============================================ */

:root {
  /* Primary Colors - AI-inspired blues and cyans */
  --color-primary: #2563eb;
  --color-primary-light: #3b82f6;
  --color-primary-dark: #1d4ed8;
  --color-primary-rgb: 37, 99, 235;

  /* Header / navigation accent. The header was hand-tuned in indigo/violet
     independent of --color-primary, so its hovers, dropdown glows and the
     hamburger bars are expressed through these variables rather than raw
     literals. They default to that indigo/violet, so the source platform is
     unchanged; a White_Label_Instance overrides them (see brand_nav_style) so
     the menus wear the instance's colour instead of the platform's purple. */
  --nav-accent: #6366f1;
  --nav-accent-rgb: 99, 102, 241;
  --nav-accent-2: #8b5cf6;
  --nav-accent-2-rgb: 139, 92, 246;

  /* Secondary Colors - Purple accents */
  --color-secondary: #7c3aed;
  --color-secondary-light: #8b5cf6;
  --color-secondary-dark: #6d28d9;

  /* Accent Colors - Cyan highlights */
  --color-accent: #06b6d4;
  --color-accent-light: #22d3ee;
  --color-accent-dark: #0891b2;

  /* Neutral Colors */
  --color-gray-50: #f9fafb;
  --color-gray-100: #f3f4f6;
  --color-gray-200: #e5e7eb;
  --color-gray-300: #d1d5db;
  --color-gray-400: #9ca3af;
  --color-gray-500: #6b7280;
  --color-gray-600: #4b5563;
  --color-gray-700: #374151;
  --color-gray-800: #1f2937;
  --color-gray-900: #111827;

  /* Semantic Colors */
  --color-success: #10b981;
  --color-warning: #f59e0b;
  --color-error: #ef4444;
  --color-info: #3b82f6;

  /* Light Theme (Default) */
  --bg-primary: #ffffff;
  --bg-secondary: var(--color-gray-50);
  --bg-tertiary: var(--color-gray-100);
  --text-primary: var(--color-gray-900);
  --text-secondary: var(--color-gray-600);
  --text-muted: var(--color-gray-400);
  --border-color: var(--color-gray-200);
  --shadow-color: rgba(0, 0, 0, 0.1);

  /* Alternating section surface.
     --bg-secondary (#f9fafb) sits a hair off #ffffff, so sections that alternated
     between the two read as one flat white sheet. This is a deliberately more
     visible off-white, tinted with the instance's own primary so each brand's
     alternating bands wear its colour rather than a generic grey. Kept as its own
     variable (not a change to --bg-secondary) so cards, inputs and every other
     surface that leans on --bg-secondary are untouched. Same color-mix recipe
     .book-shelf-section already uses. Redefined in every theme block that
     overrides the base surfaces, so it never inherits a light value into a dark
     theme. */
  --section-alt-bg: color-mix(in srgb, var(--color-primary) 6%, #eef1f7);

  /* Typography */
  --font-family-base: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
  --font-family-heading: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-family-arabic: 'Cairo', 'Noto Kufi Arabic', 'Tajawal', 'Traditional Arabic', serif;

  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.25rem;
  --font-size-2xl: 1.5rem;
  --font-size-3xl: 1.875rem;
  --font-size-4xl: 2.25rem;
  --font-size-5xl: 3rem;

  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  --line-height-tight: 1.25;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.75;

  /* Spacing */
  --spacing-xs: 0.25rem;
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --spacing-lg: 1.5rem;
  --spacing-xl: 2rem;
  --spacing-2xl: 3rem;
  --spacing-3xl: 4rem;

  /* Border Radius */
  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-sm: 0 1px 2px 0 var(--shadow-color);
  --shadow-md: 0 4px 6px -1px var(--shadow-color), 0 2px 4px -2px var(--shadow-color);
  --shadow-lg: 0 10px 15px -3px var(--shadow-color), 0 4px 6px -4px var(--shadow-color);
  --shadow-xl: 0 20px 25px -5px var(--shadow-color), 0 8px 10px -6px var(--shadow-color);

  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-normal: 250ms ease;
  --transition-slow: 350ms ease;

  /* Z-Index Scale */
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-fixed: 300;
  --z-modal-backdrop: 400;
  --z-modal: 500;
  --z-tooltip: 600;
}

/* ============================================
   DARK THEME
   ============================================ */

[data-theme="dark"] {
  /* Fallback dark mode colors for admin, homepage, dashboard.
     Reader pages override these with database-injected values. */
  --bg-primary: #0f172a;
  --bg-secondary: #1e293b;
  --bg-tertiary: #334155;
  --text-primary: #f1f5f9;
  --text-secondary: #cbd5e1;
  --text-muted: #64748b;
  --border-color: #334155;
  --shadow-color: rgba(0, 0, 0, 0.4);
  /* In dark mode, "darker" should mean "lighter" for interactive text: the light-mode
     hover darkens the accent for depth against a white page, but on a dark page that
     makes it harder to see. Swap the relationship so link hover goes brighter. */
  --color-primary-dark: var(--color-primary-light);
  /* A dark surface that belongs to the brand rather than generic slate: the base
     is a touch deeper than --bg-primary and carries more of the primary so the
     alternating bands read as "dark, in this brand's colour". */
  --section-alt-bg: color-mix(in srgb, var(--color-primary) 14%, #101a2e);
  --color-gray-50: #1e293b;
  --color-gray-100: #334155;
  --color-gray-200: #475569;
  --color-gray-800: #e2e8f0;
  --color-gray-900: #f1f5f9;
}

/* Dark mode orb enhancements - vivid ambient glow */
[data-theme="dark"] .hero-orb-1 {
  opacity: 0.7;
}

[data-theme="dark"] .hero-orb-2 {
  opacity: 0.65;
}

[data-theme="dark"] .hero-orb-3 {
  opacity: 0.6;
}

/* ============================================
   SEPIA / READING MODE THEME
   Warm sepia tones for extended reading
   ============================================ */

[data-theme="sepia"] {
  /* Colors injected by reader.php from database - DO NOT hardcode here */
  --shadow-color: rgba(92, 75, 55, 0.15);
}

/* ============================================
   HIGH CONTRAST THEME
   Maximum contrast for accessibility
   ============================================ */

[data-theme="high-contrast"] {
  /* Fallback high-contrast colors for admin, homepage, dashboard.
     Reader pages override these with database-injected values. */
  --bg-primary: #000000;
  --bg-secondary: #0a0a0a;
  --bg-tertiary: #1a1a1a;
  --text-primary: #ffffff;
  --text-secondary: #e0e0e0;
  --text-muted: #a0a0a0;
  --border-color: #00d4ff;
  /* High contrast must not gain a tinted band: keep it flat near-black so a
     section boundary never lowers contrast. */
  --section-alt-bg: #0a0a0a;
  --color-primary: #00d4ff;
  --color-secondary: #00ff88;
  --shadow-color: rgba(255, 255, 255, 0.2);
  --color-gray-50: #111111;
  --color-gray-100: #1a1a1a;
  --color-gray-200: #333333;
  --color-gray-800: #e0e0e0;
  --color-gray-900: #ffffff;
}


/* ============================================
   CSS RESET & BASE STYLES
   ============================================ */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  font-family: var(--font-family-base);
  font-size: var(--font-size-base);
  line-height: var(--line-height-normal);
  color: var(--text-primary);
  background-color: var(--bg-primary);
  /* Safari iOS: Use dvh (dynamic viewport height) to account for address bar */
  min-height: 100vh;
  min-height: 100dvh; /* Fallback for browsers that support dvh */
  transition: background-color var(--transition-normal), color var(--transition-normal);
}

/* Prevent FOUC (Flash of Unstyled Content) for theme */
html:not([data-theme]) {
  visibility: visible;
}

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
  height: auto;
}

input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
  border: none;
  background: none;
}

a {
  color: var(--color-primary);
  text-decoration: none;
  transition: color var(--transition-fast);
}

/* Generic link hover. The exclusions matter: this rule is specificity (0,2,1) — the
   element `a`, the :hover, and the class inside :not() — which beats a plain
   `.some-button:hover` at (0,2,0) no matter how late that rule is declared. Any
   anchor styled as a button therefore has to be listed here or it loses its own
   label colour to --color-primary-dark and, on a filled button, ends up with text
   almost exactly the shade of its own background.
   .btn was excluded from the start. .lp-btn is the landing-page button family
   (.lp-btn--primary / --ghost, used by the instance landing template): it was never
   added, which is why the landing CTA lost its label on hover while the same button
   on every .btn-based screen was fine. */
a:hover:not(.btn):not(.lp-btn) {
  color: var(--color-primary-dark);
}

ul,
ol {
  list-style: none;
}

/* The reset above belongs to navigation and chrome. An author's list inside a
   chapter is written prose, and with no counter-declaration the writing desk's
   Bullets and Numbering commands produced an indented block with no marker at
   all — which reads as a broken tool. Only an unclassed list is a written one:
   every generated component in a chapter body (.index-list, .toc-list, .btl-*)
   carries a class and declares its own styling, so none is reached here.
   Logical padding so the marker sits on the reading side of an Arabic chapter. */
.content-body ul:not([class]) {
  list-style: disc;
  padding-inline-start: 1.75em;
  margin: 0 0 1.1em;
}

.content-body ol:not([class]) {
  list-style: decimal;
  padding-inline-start: 1.75em;
  margin: 0 0 1.1em;
}

/* A nested list has to look nested, and a marker repeated at every depth says
   nothing. */
.content-body ul:not([class]) ul:not([class]) {
  list-style: circle;
  margin-bottom: 0;
}

.content-body ul:not([class]) ul:not([class]) ul:not([class]) {
  list-style: square;
}

.content-body ol:not([class]) ol:not([class]) {
  list-style: lower-alpha;
  margin-bottom: 0;
}

.content-body ol:not([class]) ol:not([class]) ol:not([class]) {
  list-style: lower-roman;
}

.content-body ul:not([class]) > li,
.content-body ol:not([class]) > li {
  margin-bottom: 0.3em;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-family-heading);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
  color: var(--text-primary);
}

h1 {
  font-size: var(--font-size-4xl);
}

h2 {
  font-size: var(--font-size-3xl);
}

h3 {
  font-size: var(--font-size-2xl);
}

h4 {
  font-size: var(--font-size-xl);
}

h5 {
  font-size: var(--font-size-lg);
}

h6 {
  font-size: var(--font-size-base);
}

p {
  margin-bottom: var(--spacing-md);
}

/* ============================================
   LAYOUT UTILITIES
   ============================================ */

.container {
  width: 100%;
  max-width: 1300px;
  margin: 0 auto;
  padding: 0 var(--spacing-md);
}

.section {
  padding: var(--spacing-2xl) 0;
}

/* Flexbox Utilities */
.flex {
  display: flex;
}

.flex-col {
  flex-direction: column;
}

.flex-wrap {
  flex-wrap: wrap;
}

.items-center {
  align-items: center;
}

.items-start {
  align-items: flex-start;
}

.items-end {
  align-items: flex-end;
}

.justify-center {
  justify-content: center;
}

.justify-between {
  justify-content: space-between;
}

.justify-end {
  justify-content: flex-end;
}

.gap-sm {
  gap: var(--spacing-sm);
}

.gap-md {
  gap: var(--spacing-md);
}

.gap-lg {
  gap: var(--spacing-lg);
}

/* Grid Utilities */
.grid {
  display: grid;
}

.grid-cols-1 {
  grid-template-columns: repeat(1, 1fr);
}

.grid-cols-2 {
  grid-template-columns: repeat(2, 1fr);
}

.grid-cols-3 {
  grid-template-columns: repeat(3, 1fr);
}

.grid-cols-4 {
  grid-template-columns: repeat(4, 1fr);
}

/* Text Utilities */
.text-center {
  text-align: center;
}

.text-left {
  text-align: left;
}

.text-right {
  text-align: right;
}

.text-primary {
  color: var(--text-primary);
}

.text-secondary {
  color: var(--text-secondary);
}

.text-muted {
  color: var(--text-muted);
}

.text-accent {
  color: var(--color-primary);
}

/* Spacing Utilities */
.mt-sm {
  margin-top: var(--spacing-sm);
}

.mt-md {
  margin-top: var(--spacing-md);
}

.mt-lg {
  margin-top: var(--spacing-lg);
}

.mt-xl {
  margin-top: var(--spacing-xl);
}

.mt-2xl {
  margin-top: var(--spacing-2xl);
}

.mt-3xl {
  margin-top: var(--spacing-3xl);
}

.mb-sm {
  margin-bottom: var(--spacing-sm);
}

.mb-md {
  margin-bottom: var(--spacing-md);
}

.mb-lg {
  margin-bottom: var(--spacing-lg);
}

.mb-xl {
  margin-bottom: var(--spacing-xl);
}

.py-sm {
  padding-top: var(--spacing-sm);
  padding-bottom: var(--spacing-sm);
}

.py-md {
  padding-top: var(--spacing-md);
  padding-bottom: var(--spacing-md);
}

.py-lg {
  padding-top: var(--spacing-lg);
  padding-bottom: var(--spacing-lg);
}

.px-sm {
  padding-left: var(--spacing-sm);
  padding-right: var(--spacing-sm);
}

.px-md {
  padding-left: var(--spacing-md);
  padding-right: var(--spacing-md);
}

.px-lg {
  padding-left: var(--spacing-lg);
  padding-right: var(--spacing-lg);
}


/* ============================================
   BUTTONS
   ============================================ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm) var(--spacing-lg);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  line-height: 1;
  border-radius: var(--radius-md);
  transition: all var(--transition-fast);
  cursor: pointer;
  text-decoration: none;
  border: 2px solid transparent;
}

.btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.btn-primary {
  background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
  color: white !important;
  box-shadow: var(--shadow-md);
}

.btn-primary:hover:not(:disabled),
a.btn-primary:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
  /* The unhovered button is built from --color-primary / --color-secondary, but this
     hover state was a hardcoded navy gradient, so on a branded instance every primary
     button flipped from the brand colour to the vendor's navy the moment the pointer
     touched it.
     These two variables are deliberately NOT declared in this file: on the source
     platform they stay undefined and the fallbacks below reproduce the original
     #26477e -> #1a3a6e gradient exactly. brand_style_block() declares them only when
     the instance has a Brand_Config, so nothing about the vendor's hover changes. Using
     --color-primary-dark here instead would not have been safe: main.css declares it at
     :root (#1d4ed8), so the fallback would never apply and the vendor's hover would
     silently change colour. */
  background: linear-gradient(135deg,
    var(--btn-primary-hover-from, #26477e),
    var(--btn-primary-hover-to, #1a3a6e)) !important;
  color: white !important;
}

.btn-secondary {
  background-color: var(--bg-secondary);
  color: var(--text-primary);
  border-color: var(--border-color);
}

.btn-secondary:hover:not(:disabled) {
  background-color: var(--bg-tertiary);
  border-color: var(--color-primary);
}

.btn-outline {
  background-color: transparent;
  color: var(--color-primary);
  border-color: var(--color-primary);
}

.btn-outline:hover:not(:disabled) {
  background-color: var(--color-primary);
  color: white;
}

.btn-ghost {
  background-color: transparent;
  color: var(--text-secondary);
}

.btn-ghost:hover:not(:disabled) {
  background-color: var(--bg-tertiary);
  color: var(--text-primary);
}

.btn-lg {
  padding: var(--spacing-md) var(--spacing-xl);
  font-size: var(--font-size-lg);
}

.btn-sm {
  padding: var(--spacing-xs) var(--spacing-md);
  font-size: var(--font-size-sm);
}

.btn-icon {
  padding: var(--spacing-sm);
  border-radius: var(--radius-full);
}

/* ============================================
   FORMS
   ============================================ */

.form-group {
  margin-bottom: var(--spacing-lg);
}

.form-label {
  display: block;
  margin-bottom: var(--spacing-sm);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--text-secondary);
}

.form-input,
.form-textarea,
.form-select {
  width: 100%;
  padding: var(--spacing-sm) var(--spacing-md);
  font-size: var(--font-size-base);
  background-color: var(--bg-primary);
  border: 2px solid var(--border-color);
  border-radius: var(--radius-md);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.form-input:focus,
.form-textarea:focus,
.form-select:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb), 0.1);
}

.form-input::placeholder,
.form-textarea::placeholder {
  color: var(--text-muted);
}

.form-input.error,
.form-textarea.error {
  border-color: var(--color-error);
}

.form-error {
  display: block;
  margin-top: var(--spacing-xs);
  font-size: var(--font-size-sm);
  color: var(--color-error);
}

.form-textarea {
  min-height: 120px;
  resize: vertical;
}

/* ============================================
   CARDS
   ============================================ */

.card {
  background-color: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.card-image {
  width: 100%;
  aspect-ratio: 3/4;
  object-fit: cover;
}

.card-body {
  padding: var(--spacing-lg);
}

.card-title {
  font-size: var(--font-size-xl);
  margin-bottom: var(--spacing-sm);
}

.card-subtitle {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  margin-bottom: var(--spacing-sm);
}

.card-text {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  line-height: var(--line-height-relaxed);
}


/* ============================================
   BOOK CARDS (Featured Books & Library)
   ============================================ */

.book-card {
  background-color: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  overflow: hidden;
  transition: transform var(--transition-normal), box-shadow var(--transition-normal);
  cursor: pointer;
  display: flex;
  flex-direction: column;
}

.book-card:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: var(--shadow-xl);
}

.book-card-cover {
  width: 100%;
  aspect-ratio: 2/3;
  object-fit: cover;
  background: linear-gradient(135deg, var(--color-primary-light), var(--color-secondary));
}

.book-card-body {
  padding: var(--spacing-lg);
  display: flex;
  flex-direction: column;
  flex: 1;
}

.book-card-title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  margin-bottom: var(--spacing-xs);
  color: var(--text-primary);
}

.book-card-author {
  font-size: var(--font-size-sm);
  color: var(--color-primary);
  margin-bottom: var(--spacing-sm);
}

.book-card-description {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  line-height: var(--line-height-relaxed);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ============================================
   NAVIGATION
   ============================================ */

/* --- Default: solid sticky header (terms, privacy, etc.) --- */
.main-nav {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  background-color: var(--bg-primary);
  border-bottom: 1px solid var(--border-color);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  transition: transform 0.35s ease, background-color 0.3s ease, border-color 0.3s ease;
}

/* --- Transparent variant: fixed overlay for hero pages --- */
.main-nav.nav-transparent {
  position: fixed;
  left: 0;
  right: 0;
  background-color: transparent;
  border-bottom-color: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* Force header to collapse when nav is fixed/transparent */
header:has(.nav-transparent) {
  height: 0;
  overflow: visible;
  background: transparent;
}

/* Body background matches hero gradient start — eliminates top gap */
body:has(.nav-transparent) {
  background-color: var(--bg-secondary);
}

/* When scrolled — frosted glass (transparent pages only) */
.main-nav.nav-transparent.nav-scrolled {
  background-color: rgba(255, 255, 255, 0.85);
  border-bottom: 1px solid var(--border-color);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  backdrop-filter: blur(16px) saturate(1.2);
}

[data-theme="dark"] .main-nav.nav-transparent.nav-scrolled {
  background-color: rgba(15, 15, 25, 0.85);
}

/* Dark mode: warm up the inactive nav link colour.
   --text-secondary in dark mode resolves to #cbd5e1 (cool slate), which reads as
   generic and clashes with warm gold / copper brand accents. A warmer off-white
   keeps the same lightness (still clearly secondary, not primary) but sits in the
   same temperature as the brand mark and the active/hover gold.
   --text-secondary is intentionally left alone — it is reused on card text,
   form labels, footer copy, etc., and those do not need to warm up. */
[data-theme="dark"] .nav-link {
  color: #e2d9c8;
}

/* Hover and active inherit --color-primary (the brand accent — gold/copper on this
   instance), so no change needed there. The separator should soften slightly to
   avoid looking too vivid against the warmer link text. */
[data-theme="dark"] .nav-separator {
  background: linear-gradient(180deg, transparent, rgba(226, 217, 200, 0.2), transparent);
}
[data-theme="dark"] .nav-dropdown-item {
  color: #e2d9c8;
}

/* Hidden state — auto-hide on scroll down (all pages) */
.main-nav.nav-hidden {
  transform: translateY(-100%);
}

.nav-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-md);
  max-width: 1300px;
  margin: 0 auto;
  position: relative;
  direction: ltr; /* Keep header layout LTR even on RTL pages */
}

/* Arabic (RTL) header: mirror the layout so the Arabic logo sits on the right
   and the search + account icons move to the left. Desktop only — mobile keeps
   its own hamburger-based layout. */
@media (min-width: 1201px) {
  html[lang="ar"] .nav-container {
    flex-direction: row-reverse;
  }
  html[lang="ar"] .nav-actions {
    margin-left: 0;
    margin-right: 16px;
  }
}

/* Arabic (RTL): reverse the header action icons so the reading order mirrors
   the LTR layout — avatar on the outer edge, then the notification bell, then
   search. Applies at every viewport (desktop + hamburger). */
html[lang="ar"] .nav-actions {
  flex-direction: row-reverse;
}

.nav-logo {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  flex-shrink: 0;
}

.nav-logo img {
  height: 80px;
  width: auto;
}

.nav-logo-text {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.nav-links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  direction: ltr;
  flex: 1;
  min-width: 0;
}

.nav-link {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.05em;
  color: var(--text-secondary);
  position: relative;
  display: inline-block;
  transition: color 0.2s ease, transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), text-shadow 0.2s ease;
  will-change: transform;
}

.nav-link::after {
  content: '';
  position: absolute;
  bottom: -3px;
  left: 50%;
  transform: translateX(-50%) scaleX(0);
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, var(--nav-accent), var(--nav-accent-2));
  border-radius: 2px;
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
  transform-origin: center;
}

.nav-link:hover {
  color: var(--color-primary);
  transform: scale(1.12) translateY(-1px);
  text-shadow: 0 0 20px rgba(var(--nav-accent-rgb), 0.35);
}

.nav-link:hover::after {
  transform: translateX(-50%) scaleX(1);
}

.nav-link.active {
  color: var(--color-primary);
}

.nav-link.active::after {
  transform: translateX(-50%) scaleX(1);
  opacity: 1;
}

.nav-separator {
  width: 1px;
  height: 16px;
  background: linear-gradient(180deg, transparent, var(--border-color, rgba(148, 163, 184, 0.5)), transparent);
  opacity: 1;
  flex-shrink: 0;
}

.nav-gap {
  width: calc(var(--spacing-md) + 2px);
  flex-shrink: 0;
}

/* Nav Dropdown (Business menu) */
.nav-dropdown {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.nav-dropdown-trigger {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  user-select: none;
}

.nav-dropdown-arrow {
  transition: transform 0.2s ease;
}

.nav-dropdown:hover .nav-dropdown-arrow {
  transform: rotate(180deg);
}

.nav-dropdown-menu {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%) translateY(6px) scale(0.95);
  transform-origin: top center;
  min-width: 175px;
  background: var(--bg-primary);
  border: 1px solid rgba(var(--nav-accent-rgb), 0.18);
  border-radius: 14px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.13), 0 2px 8px rgba(var(--nav-accent-rgb), 0.08);
  padding: 8px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.22s cubic-bezier(0.34, 1.56, 0.64, 1),
              visibility 0.22s ease,
              transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
  z-index: 1000;
}

.nav-dropdown:hover .nav-dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0) scale(1);
}

/* staggered item entrance */
.nav-dropdown:hover .nav-dropdown-item:nth-child(1) { transition-delay: 0.03s; }
.nav-dropdown:hover .nav-dropdown-item:nth-child(2) { transition-delay: 0.07s; }
.nav-dropdown:hover .nav-dropdown-item:nth-child(3) { transition-delay: 0.11s; }

.nav-dropdown-item {
  display: block;
  padding: 9px 16px;
  font-size: 13.5px;
  font-weight: var(--font-weight-medium);
  color: var(--text-secondary);
  border-radius: 8px;
  transition: background 0.18s ease, color 0.18s ease, transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.18s ease;
  white-space: nowrap;
  position: relative;
  overflow: hidden;
}

.nav-dropdown-item::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(var(--nav-accent-rgb), 0.08), rgba(var(--nav-accent-2-rgb), 0.06));
  opacity: 0;
  border-radius: 8px;
  transition: opacity 0.18s ease;
}

.nav-dropdown-item:hover {
  color: var(--color-primary);
  transform: scale(1.04) translateX(3px);
  box-shadow: 0 2px 12px rgba(var(--nav-accent-rgb), 0.12);
}

.nav-dropdown-item:hover::before {
  opacity: 1;
}

/* Mobile nav group (collapsible Business submenu) */
.nav-mobile-group {
  width: 100%;
}

.nav-mobile-group-trigger {
  display: flex;
  align-items: center;
  width: 100%;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  font: inherit;
  color: inherit;
  text-align: inherit;
  gap: 10px;
}

.nav-mobile-group-arrow {
  transition: transform 0.2s ease;
  margin-left: auto;
}

.nav-mobile-group.open .nav-mobile-group-arrow {
  transform: rotate(180deg);
}

.nav-mobile-group-items {
  display: none;
  padding-left: 2.5rem;
  flex-direction: column;
  gap: var(--spacing-md);
  margin-top: var(--spacing-sm);
}

[dir="rtl"] .nav-mobile-group-items {
  padding-left: 0;
  padding-right: 2.5rem;
}

.nav-mobile-group.open .nav-mobile-group-items {
  display: flex;
}

.nav-mobile-sub {
  font-size: 0.95em;
  opacity: 0.85;
  display: block;
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  direction: ltr;
  flex-shrink: 0;
  margin-left: 16px;
}

/* Nav Icon Button (Home, etc.) */
.nav-icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  transition: all var(--transition-fast);
}

.nav-icon-btn:hover {
  color: var(--color-primary);
  background-color: rgba(var(--color-primary-rgb), 0.1);
}

/* Mobile Navigation */
.nav-toggle {
  display: none;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  padding: 9px;
  border-radius: 12px;
  background: transparent;
  border: none;
  cursor: pointer;
  transition: background-color var(--transition-fast), box-shadow var(--transition-fast);
}

.nav-toggle:hover {
  background: rgba(var(--nav-accent-rgb), 0.10);
}

.nav-toggle span {
  display: block;
  height: 2.5px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--nav-accent), var(--nav-accent-2));
  transition: width var(--transition-fast), transform var(--transition-fast), opacity var(--transition-fast);
}

/* Staggered bar widths for a more refined, modern look */
.nav-toggle span:nth-child(1) { width: 22px; }
.nav-toggle span:nth-child(2) { width: 16px; }
.nav-toggle span:nth-child(3) { width: 19px; }

.nav-toggle:hover span:nth-child(2),
.nav-toggle:hover span:nth-child(3) {
  width: 22px;
}

/* Arabic (RTL): mirror the staggered hamburger bars so the ragged edge sits
   on the left, matching the flipped RTL header layout. */
html[lang="ar"] .nav-toggle {
  align-items: flex-end;
}

.nav-mobile {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--bg-primary);
  z-index: var(--z-modal);
  padding: var(--spacing-xl);
  flex-direction: column;
  gap: var(--spacing-md);
  overflow: hidden;
}

.nav-mobile.active {
  display: flex;
}

.nav-mobile-close {
  align-self: flex-end;
  font-size: var(--font-size-2xl);
}

.nav-mobile-links {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  margin-top: var(--spacing-sm);
  overflow-y: auto;
  flex: 1;
  min-height: 0;
}

.nav-mobile-link {
  font-size: 1.1rem;
  font-weight: var(--font-weight-medium);
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 10px;
}

.nav-mobile-link svg.nav-mobile-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  opacity: 0.7;
}

.nav-mobile-link.active {
  color: #667eea;
  font-weight: var(--font-weight-semibold);
}

.nav-mobile-links .btn.btn-primary.btn-lg {
  margin-top: 0.5rem;
  padding: 0.7rem 1.5rem;
  font-size: 0.95rem;
  text-align: center;
  flex-shrink: 0;
}

.nav-mobile-separator {
  height: 1px;
  background: var(--border-color, #e5e7eb);
  margin: 0.25rem 0;
}

/* Mobile Explore Accordion */
.nav-mobile-explore-items {
  max-height: 60vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.nav-mobile-explore-group {
  margin-bottom: 0.5rem;
}

.nav-mobile-explore-group-title {
  display: block;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-secondary, #94a3b8);
  padding: 0.5rem 0 0.25rem;
  margin-top: 0.25rem;
}

.nav-mobile-genre-link {
  font-size: var(--font-size-base, 0.95rem) !important;
  padding: 0.35rem 0 !important;
}

/* Mobile Explore Popular Books Grid */
.nav-mobile-popular-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  padding: 0.5rem 0;
}

.nav-mobile-popular-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-decoration: none;
  border-radius: 8px;
  overflow: hidden;
  background: var(--bg-secondary, #f1f5f9);
  transition: transform 0.15s;
}

.nav-mobile-popular-card:hover {
  transform: scale(1.02);
}

.nav-mobile-popular-card img {
  width: 100%;
  aspect-ratio: 2/3;
  object-fit: cover;
  border-radius: 8px 8px 0 0;
}

.nav-mobile-popular-title {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-primary, #1e293b);
  padding: 0 8px 8px;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ============================================
   HERO SECTION
   ============================================ */

.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 120px var(--spacing-md) var(--spacing-3xl);
  background: linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-primary) 50%, var(--bg-secondary) 100%);
  overflow: hidden;
}

.hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(ellipse at center, rgba(var(--color-primary-rgb), 0.04) 0%, transparent 60%);
  /* Static subtle glow — no animation needed; orbs handle the movement */
  pointer-events: none;
}

.hero-logo {
  width: 150px;
  height: auto;
  margin-bottom: var(--spacing-xl);
  animation: float 6s ease-in-out infinite;
  position: relative;
  z-index: 1;
}

/* Bouncing book animation for hero */
.hero-book-bounce {
  animation: book-bounce 2s ease-in-out infinite;
}

@keyframes book-bounce {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-20px);
  }
}

.hero-title {
  font-size: var(--font-size-4xl);
  font-weight: var(--font-weight-bold);
  font-family: var(--font-family-heading);
  margin-bottom: var(--spacing-md);
  background: linear-gradient(135deg, var(--color-primary), var(--color-secondary), var(--color-accent));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  position: relative;
  z-index: 1;
}

.hero-subtitle {
  font-size: var(--font-size-xl);
  color: var(--text-secondary);
  max-width: 600px;
  margin-bottom: var(--spacing-xl);
  position: relative;
  z-index: 1;
}

.hero-cta {
  position: relative;
  z-index: 1;
}


/* ============================================
   FEATURED BOOKS SECTION
   ============================================ */

.featured-books {
  padding: var(--spacing-3xl) var(--spacing-md);
  background-color: var(--bg-secondary);
}

.section-header {
  text-align: center;
  margin-bottom: var(--spacing-2xl);
}

.section-title {
  font-size: var(--font-size-3xl);
  margin-bottom: var(--spacing-sm);
}

.section-subtitle {
  font-size: var(--font-size-lg);
  color: var(--text-secondary);
}

.books-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--spacing-xl);
  max-width: 1300px;
  margin: 0 auto;
}

/* Featured books responsive columns */
@media (min-width: 560px) {
  .books-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 756px) {
  .books-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 1000px) {
  .books-grid { grid-template-columns: repeat(5, 1fr); }
}

/* ============================================
   FOOTER
   ============================================ */

.footer {
  background-color: var(--bg-secondary);
  border-top: 1px solid var(--border-color);
  padding: var(--spacing-3xl) var(--spacing-md);
}

.footer-container {
  max-width: 1300px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-2xl);
  text-align: left;
}

/* RTL footer - text alignment */
[dir="rtl"].footer .footer-brand,
[dir="rtl"].footer .footer-links,
[dir="rtl"].footer .footer-contact {
  text-align: right;
}

[dir="rtl"].footer .footer-logo {
  justify-content: flex-start;
}

.footer-brand {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

.footer-logo {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.footer-logo img {
  height: 32px;
}

.footer-description {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  max-width: 300px;
}

.footer-links {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.footer-links-title {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
  margin-bottom: var(--spacing-sm);
}

.footer-link {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  transition: color var(--transition-fast);
}

.footer-link:hover {
  color: var(--color-primary);
}

.footer-contact {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

.footer-bottom {
  margin-top: var(--spacing-xl);
  padding: 0.75rem var(--spacing-md);
  border-top: 1px solid var(--border-color);
  text-align: center;
  background: var(--bg-tertiary, rgba(0, 0, 0, 0.06));
  margin-left: calc(-1 * var(--spacing-md));
  margin-right: calc(-1 * var(--spacing-md));
  margin-bottom: calc(-1 * var(--spacing-3xl));
}

.footer-copyright {
  font-size: var(--font-size-xs);
  color: var(--text-secondary);
  margin: 0;
}

/* ============================================
   DASHBOARD
   ============================================ */

.dashboard {
  background-color: var(--bg-secondary);
  padding-top: 80px;
}

.dashboard-header {
  background: linear-gradient(135deg, rgba(102, 126, 234, 0.08) 0%, rgba(118, 75, 162, 0.06) 50%, rgba(59, 130, 246, 0.04) 100%);
  padding: 24px 0;
  margin-top: 40px;
  border-bottom: 1px solid var(--border-color);
}

.dashboard-header .container {
  max-width: 1300px;
  margin: 0 auto;
  padding: 0 var(--spacing-lg);
}

.dash-welcome-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}

.dash-welcome-left {
  display: flex;
  align-items: center;
  gap: 16px;
}

.dash-welcome-avatar {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: 700;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

.dash-welcome-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.dashboard-greeting {
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--text-primary, #1e293b);
  margin: 0;
  line-height: 1.3;
}

.dashboard-greeting-name {
  color: var(--color-primary);
}

.dash-welcome-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

[data-theme="dark"] .dashboard-header {
  background: linear-gradient(135deg, rgba(102, 126, 234, 0.06) 0%, rgba(118, 75, 162, 0.04) 50%, rgba(59, 130, 246, 0.03) 100%);
}

@media (max-width: 640px) {
  .dash-welcome-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
  .dash-welcome-avatar {
    width: 44px;
    height: 44px;
    font-size: 18px;
  }
  .dashboard-greeting {
    font-size: 1.15rem;
  }
  .dash-welcome-right {
    width: 100%;
  }
  .dash-welcome-right .dash-offline-library-btn {
    flex: 1;
    justify-content: center;
  }
}

.dashboard-content {
  padding: var(--spacing-lg) var(--spacing-md);
  max-width: 1300px;
  margin: 0 auto;
}

.library-empty {
  text-align: center;
  padding: var(--spacing-3xl);
  background-color: var(--bg-primary);
  border-radius: var(--radius-lg);
  border: 2px dashed var(--border-color);
}

.library-empty-icon {
  font-size: 4rem;
  margin-bottom: var(--spacing-lg);
  opacity: 0.5;
}

.library-empty-title {
  font-size: var(--font-size-xl);
  margin-bottom: var(--spacing-sm);
}

.library-empty-text {
  color: var(--text-secondary);
  margin-bottom: var(--spacing-lg);
}

/* ============================================
   AUTH PAGES (Login, Register, etc.)
   ============================================ */

.auth-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-xl);
  background: linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-primary) 100%);
}

.auth-card {
  position: relative;
  width: 100%;
  max-width: 420px;
  background-color: var(--bg-primary);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xl);
  padding: var(--spacing-2xl);
}

.auth-header {
  text-align: center;
  margin-bottom: var(--spacing-xl);
}

.auth-logo {
  width: 80px;
  height: auto;
  margin: 0 auto var(--spacing-lg);
}

/* Auth screens (sign in / sign up, readers + publishers) ship BOTH logo marks
   and show one per theme: the standard wordmark on light, the glowing icon mark
   on dark. Default = light; the dark mark takes over when the OS prefers dark
   OR an explicit [data-theme="dark"] is set. An explicit light theme always
   wins over the OS preference. */
.auth-logo--dark { display: none; }
@media (prefers-color-scheme: dark) {
  .auth-logo--light { display: none; }
  .auth-logo--dark { display: block; }
}
[data-theme="dark"] .auth-logo--light { display: none; }
[data-theme="dark"] .auth-logo--dark { display: block; }
[data-theme="light"] .auth-logo--light { display: block; }
[data-theme="light"] .auth-logo--dark { display: none; }

.auth-title {
  font-size: var(--font-size-2xl);
  margin-bottom: var(--spacing-sm);
}

.auth-subtitle {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
}

.auth-form {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

.auth-footer {
  margin-top: var(--spacing-xl);
  text-align: center;
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
}

.auth-footer a {
  color: var(--color-primary);
  font-weight: var(--font-weight-medium);
}

/* Publisher CTA on login page */
.auth-publisher-cta {
  margin-top: var(--spacing-md);
  padding-top: var(--spacing-md);
  border-top: 1px solid var(--border-color);
  text-align: center;
  font-size: var(--font-size-sm);
}

.auth-publisher-cta-label {
  color: var(--text-tertiary);
}

.auth-publisher-cta-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--color-primary);
  font-weight: var(--font-weight-medium);
  text-decoration: none;
  transition: opacity 0.2s;
}

.auth-publisher-cta-link:hover {
  opacity: 0.8;
  text-decoration: underline;
}

.auth-publisher-cta-link svg {
  transition: transform 0.2s;
}

.auth-publisher-cta-link:hover svg {
  transform: translateX(3px);
}

[dir="rtl"] .auth-publisher-cta-link:hover svg {
  transform: translateX(-3px);
}

/* Back to Home Link */
.back-to-home {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-sm);
  margin-top: var(--spacing-lg);
  padding: var(--spacing-sm) var(--spacing-md);
  font-size: var(--font-size-sm);
  color: var(--text-muted);
  transition: color var(--transition-fast), transform var(--transition-fast);
}

.back-to-home:hover {
  color: var(--color-primary);
  transform: translateX(-4px);
}

.back-to-home svg {
  transition: transform var(--transition-fast);
}

.back-to-home:hover svg {
  transform: translateX(-4px);
}

/* Alert Messages */
.alert {
  padding: var(--spacing-md);
  border-radius: var(--radius-md);
  margin-bottom: var(--spacing-lg);
  font-size: var(--font-size-sm);
}

.alert-error {
  background-color: rgba(239, 68, 68, 0.1);
  color: var(--color-error);
  border: 1px solid rgba(239, 68, 68, 0.2);
}

.alert-success {
  background-color: rgba(16, 185, 129, 0.1);
  color: var(--color-success);
  border: 1px solid rgba(16, 185, 129, 0.2);
}

.alert-info {
  background-color: rgba(59, 130, 246, 0.1);
  color: var(--color-info);
  border: 1px solid rgba(59, 130, 246, 0.2);
}


/* ============================================
   ADMIN INTERFACE
   ============================================ */

.admin-layout {
  display: flex;
  min-height: 100vh;
}

.admin-sidebar {
  width: 250px;
  background-color: var(--bg-primary);
  border-right: 1px solid var(--border-color);
  padding: var(--spacing-lg);
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  transition: width 0.25s ease, padding 0.25s ease;
  z-index: 100;
}

/* Collapsed sidebar — icons only */
.admin-sidebar.collapsed,
body.sidebar-collapsed .admin-sidebar {
  width: 62px;
  padding: var(--spacing-sm);
  overflow-x: hidden;
}

body.sidebar-collapsed .admin-sidebar .admin-sidebar-header .nav-logo-img {
  display: none;
}

body.sidebar-collapsed .admin-sidebar .admin-sidebar-header p {
  display: none;
}

body.sidebar-collapsed .admin-sidebar .admin-nav-link {
  justify-content: center;
  padding: var(--spacing-sm);
  font-size: 0;
  gap: 0;
  position: relative;
}

body.sidebar-collapsed .admin-sidebar .admin-nav-link svg {
  flex-shrink: 0;
  min-width: 18px;
}

body.sidebar-collapsed .admin-sidebar .admin-nav-link .nav-badge {
  position: absolute;
  top: 2px;
  right: 2px;
  margin-left: 0;
  font-size: 9px;
  padding: 1px 4px;
  min-width: 14px;
}

body.sidebar-collapsed .admin-sidebar .admin-nav-link .submenu-arrow {
  display: none;
}

body.sidebar-collapsed .admin-sidebar .admin-submenu {
  display: none !important;
}

body.sidebar-collapsed .admin-sidebar .admin-sidebar-footer .admin-nav-link {
  justify-content: center;
  font-size: 0;
  gap: 0;
}

/* Collapse toggle button */
.sidebar-collapse-btn {
  background: none;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  cursor: pointer;
  color: var(--text-secondary);
  padding: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  margin-left: auto;
}

.sidebar-collapse-btn:hover {
  background: var(--bg-tertiary);
  color: var(--color-primary);
}

.admin-sidebar.collapsed .sidebar-collapse-btn,
body.sidebar-collapsed .admin-sidebar .sidebar-collapse-btn {
  margin: 0 auto;
}

.admin-sidebar.collapsed .sidebar-collapse-btn svg,
body.sidebar-collapsed .admin-sidebar .sidebar-collapse-btn svg {
  transform: rotate(180deg);
}

/* Tooltip on hover when collapsed */
body.sidebar-collapsed .admin-sidebar .admin-nav-link:hover::after,
body.sidebar-collapsed .admin-sidebar .admin-sidebar-footer .admin-nav-link:hover::after {
  content: attr(title);
  position: absolute;
  left: 100%;
  top: 50%;
  transform: translateY(-50%);
  margin-left: 8px;
  background: var(--bg-primary);
  color: var(--text-primary);
  border: 1px solid var(--border-color);
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  font-size: 0.8rem;
  white-space: nowrap;
  z-index: 200;
  box-shadow: 0 2px 8px rgba(0,0,0,0.12);
  pointer-events: none;
}

.admin-sidebar-header {
  padding-bottom: var(--spacing-lg);
  border-bottom: 1px solid var(--border-color);
  margin-bottom: var(--spacing-lg);
}

.admin-nav {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.admin-nav-link {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm) var(--spacing-md);
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
  transition: all var(--transition-fast);
}

.admin-nav-link:hover,
.admin-nav-link.active {
  background-color: var(--bg-tertiary);
  color: var(--color-primary);
}

/* Nav icons carry their size as width/height attributes, so in a flex row a long
   (or translated) label silently shrinks them — a group icon ended up rendering at
   submenu size. Pin every icon in the nav at its declared box. */
.admin-nav-link svg,
.admin-submenu-link svg {
  flex: none;
}

/* Navigation Badge */
.nav-badge {
  margin-left: auto;
  background-color: #ef4444;
  color: white;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 10px;
  min-width: 18px;
  text-align: center;
}

.admin-nav-link.active .nav-badge {
  background-color: rgba(37, 99, 235, 0.2);
  color: var(--color-primary);
}

/* Publisher nav divider — visual gap between sections */
.admin-nav-divider {
  border: none;
  border-top: 1px solid var(--border-color);
  margin: var(--spacing-sm) var(--spacing-md);
  opacity: 0.5;
}

/* Admin Submenu Styles */
.admin-nav-group {
  position: relative;
}

.admin-nav-group > .admin-nav-link {
  position: relative;
}

.admin-nav-group > .admin-nav-link .submenu-arrow {
  margin-left: auto;
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.admin-nav-group.expanded > .admin-nav-link .submenu-arrow {
  transform: rotate(180deg);
}

.admin-submenu {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 0;
  margin-left: var(--spacing-lg);
  padding-left: var(--spacing-sm);
  border-left: 2px solid var(--border-color);
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transform: translateY(-4px);
  transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1),
              opacity 0.22s ease,
              transform 0.25s cubic-bezier(0.4, 0, 0.2, 1),
              margin-top 0.25s ease;
  pointer-events: none;
}

.admin-nav-group.expanded .admin-submenu {
  max-height: 600px;
  opacity: 1;
  transform: translateY(0);
  margin-top: 4px;
  pointer-events: auto;
}

.admin-submenu-link {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  font-size: 0.8rem;
  transition: all var(--transition-fast);
}

.admin-submenu-link:hover {
  background-color: var(--bg-tertiary);
  color: var(--color-primary);
}

.admin-submenu-link.active {
  background-color: rgba(var(--color-primary-rgb), 0.1);
  color: var(--color-primary);
  font-weight: 600;
  border-left: 2px solid var(--color-primary);
  margin-left: -2px;
  padding-left: 10px;
}

/* Horizontal in-page tabs: a collapsed submenu rendered inside its parent page.
   Named -htabs (not .admin-tabs) so pre-existing per-page .admin-tabs blocks
   (book-suggestions, book-intakes, feedback, help-center) keep their own styling. */
.admin-htabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  border-bottom: 2px solid var(--border-color);
  margin-bottom: 1.5rem;
}

.admin-htab {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  text-decoration: none;
  color: var(--text-secondary);
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  transition: color 0.2s, border-color 0.2s;
  font-weight: 500;
  font-size: 0.9rem;
  white-space: nowrap;
}

.admin-htab:hover {
  color: var(--color-primary);
}

.admin-htab.active {
  color: var(--color-primary);
  border-bottom-color: var(--color-primary);
}

.admin-htab svg {
  flex: none;
}

.admin-main {
  flex: 1;
  margin-left: 250px;
  padding: var(--spacing-xl);
  background-color: var(--bg-secondary);
  transition: margin-left 0.25s ease;
}

body.sidebar-collapsed .admin-main {
  margin-left: 62px;
}

.admin-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--spacing-xl);
}

.admin-title {
  font-size: var(--font-size-2xl);
}

/* Admin Tables */
.admin-table {
  width: 100%;
  background-color: var(--bg-primary);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.admin-table th,
.admin-table td {
  padding: var(--spacing-md);
  text-align: start;
  border-bottom: 1px solid var(--border-color);
}

.admin-table th {
  background-color: var(--bg-tertiary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--text-secondary);
}

.admin-table tr:last-child td {
  border-bottom: none;
}

.admin-table tr:hover td {
  background-color: var(--bg-secondary);
}

/* Search Box */
.search-box {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  background-color: var(--bg-primary);
  border: 2px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: var(--spacing-sm) var(--spacing-md);
  max-width: 300px;
}

.search-box input {
  flex: 1;
  border: none;
  background: none;
  outline: none;
  font-size: var(--font-size-sm);
}

.search-box:focus-within {
  border-color: var(--color-primary);
}

/* Status Badges */
.badge {
  display: inline-flex;
  align-items: center;
  padding: var(--spacing-xs) var(--spacing-sm);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  border-radius: var(--radius-full);
}

.badge-success {
  background-color: rgba(16, 185, 129, 0.1);
  color: var(--color-success);
}

.badge-warning {
  background-color: rgba(245, 158, 11, 0.1);
  color: var(--color-warning);
}

.badge-error {
  background-color: rgba(239, 68, 68, 0.1);
  color: var(--color-error);
}

.badge-expired {
  background-color: #f3f4f6;
  color: #dc2626;
}

.badge-info {
  background-color: rgba(59, 130, 246, 0.1);
  color: var(--color-info);
}

/* ============================================
   THEME TOGGLE BUTTON
   ============================================ */

.theme-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  background-color: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.theme-toggle:hover {
  background-color: var(--bg-secondary);
  border-color: var(--color-primary);
}

.theme-toggle-icon {
  width: 20px;
  height: 20px;
  transition: transform var(--transition-normal);
}

.theme-toggle:hover .theme-toggle-icon {
  transform: rotate(15deg);
}

/* Sun icon (shown in dark mode) */
.theme-icon-sun {
  display: none;
}

/* Moon icon (shown in light mode) */
.theme-icon-moon {
  display: block;
}

[data-theme="dark"] .theme-icon-sun {
  display: block;
}

[data-theme="dark"] .theme-icon-moon {
  display: none;
}


/* ============================================
   ANIMATIONS
   Requirements: 1.4 - Smooth animations and visual transitions
   ============================================ */

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(-30px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(30px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.9);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes float {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-10px);
  }
}

/* Hero Orb Animations - Dramatic Circular Orbit with Glow Pulsing */
/* Ambient light animations handled by JS (requestAnimationFrame) for 60fps smoothness */

@keyframes pulse-bg {

  0%,
  100% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0.5;
  }

  50% {
    transform: translate(-50%, -50%) scale(1.1);
    opacity: 0.3;
  }
}

@keyframes shimmer {
  0% {
    background-position: -200% 0;
  }

  100% {
    background-position: 200% 0;
  }
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

/* Animation Utility Classes */
.animate-fade-in {
  animation: fadeIn var(--transition-normal) ease-out forwards;
}

.animate-fade-in-up {
  animation: fadeInUp var(--transition-slow) ease-out forwards;
}

.animate-fade-in-down {
  animation: fadeInDown var(--transition-slow) ease-out forwards;
}

.animate-slide-in-left {
  animation: slideInLeft var(--transition-slow) ease-out forwards;
}

.animate-slide-in-right {
  animation: slideInRight var(--transition-slow) ease-out forwards;
}

.animate-scale-in {
  animation: scaleIn var(--transition-slow) ease-out forwards;
}

.animate-float {
  animation: float 6s ease-in-out infinite;
}

.animate-spin {
  animation: spin 1s linear infinite;
}

/* Staggered Animation Delays */
.animate-delay-100 {
  animation-delay: 100ms;
}

.animate-delay-200 {
  animation-delay: 200ms;
}

.animate-delay-300 {
  animation-delay: 300ms;
}

.animate-delay-400 {
  animation-delay: 400ms;
}

.animate-delay-500 {
  animation-delay: 500ms;
}

/* Scroll Animation (triggered by JS) */
.scroll-animate {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.scroll-animate.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Loading Skeleton */
.skeleton {
  background: linear-gradient(90deg,
      var(--bg-tertiary) 25%,
      var(--bg-secondary) 50%,
      var(--bg-tertiary) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: var(--radius-md);
}

/* Loading Spinner */
.spinner {
  width: 24px;
  height: 24px;
  border: 3px solid var(--border-color);
  border-top-color: var(--color-primary);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}


/* ============================================
   RESPONSIVE BREAKPOINTS
   Mobile-first approach
   Requirements: 1.5, 8.1, 8.2, 8.3
   
   Breakpoints:
   - Mobile: < 768px (default styles)
   - Tablet: 768px - 1023px
   - Desktop: >= 1024px
   ============================================ */

/* Mobile Navigation (default - shown on mobile) */
@media (max-width: 1200px) {
  .nav-links {
    display: none;
  }

  .nav-toggle {
    display: flex;
  }

  .hero-title {
    font-size: var(--font-size-3xl);
  }

  .hero-subtitle {
    font-size: var(--font-size-base);
  }

  .hero-logo {
    width: 80px;
  }

  .section-title {
    font-size: var(--font-size-2xl);
  }

  .books-grid {
    gap: var(--spacing-md);
    justify-items: center;
  }

  /* Compact book cards for mobile 2-column layout */
  .books-grid .book-card {
    border-radius: var(--radius-lg);
    width: 100%;
  }

  .books-grid .book-card-body {
    padding: var(--spacing-md);
  }

  .books-grid .book-card-title {
    font-size: var(--font-size-sm);
    margin-bottom: var(--spacing-xs);
    line-height: 1.3;
  }

  .books-grid .book-card-author {
    font-size: 11px;
    margin-bottom: var(--spacing-xs);
  }

  .books-grid .book-card-description {
    display: none;
  }

  .books-grid .book-card-footer {
    flex-direction: column;
    align-items: stretch;
    gap: var(--spacing-xs);
    padding-top: var(--spacing-sm);
  }

  .books-grid .book-card-tag {
    font-size: 10px;
    text-align: center;
    padding: 2px var(--spacing-xs);
  }

  .books-grid .book-card-cta {
    font-size: 12px;
    padding: 6px 10px;
    justify-content: center;
  }

  .books-grid .book-card-cta svg {
    width: 14px;
    height: 14px;
  }

  .books-grid .book-card-coming-soon .book-card-body {
    padding: var(--spacing-md);
  }

  .footer-container {
    grid-template-columns: 1fr;
    text-align: left;
  }

  .footer-brand {
    align-items: flex-start;
  }

  .footer-description {
    max-width: 100%;
  }

  /* Admin Mobile */
  .admin-sidebar {
    transform: translateX(-100%);
    transition: transform var(--transition-normal);
    z-index: var(--z-modal);
  }

  .admin-sidebar.open {
    transform: translateX(0);
  }

  .admin-main {
    margin-left: 0;
  }

  .admin-table {
    display: block;
    overflow-x: auto;
  }

  /* Auth Card Mobile */
  .auth-card {
    padding: var(--spacing-lg);
  }
}

/* ============================================
   TABLET BREAKPOINT (768px - 1023px)
   ============================================ */

@media (min-width: 1201px) {
  .container {
    padding: 0 var(--spacing-lg);
  }

  .nav-toggle {
    display: none;
  }

  .nav-links {
    display: flex;
  }

  .hero {
    min-height: 100vh;
  }

  .hero-title {
    font-size: var(--font-size-4xl);
  }

  .hero-logo {
    width: 100px;
  }

  .footer-container {
    grid-template-columns: repeat(2, 1fr);
  }

  .dashboard-content {
    padding: var(--spacing-xl) var(--spacing-lg);
  }

  /* Grid utilities for tablet */
  .tablet\:grid-cols-2 {
    grid-template-columns: repeat(2, 1fr);
  }

  .tablet\:grid-cols-3 {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ============================================
   DESKTOP BREAKPOINT (>= 1024px)
   ============================================ */

@media (min-width: 1024px) {
  .container {
    padding: 0 var(--spacing-xl);
  }

  .hero {
    min-height: 100vh;
  }

  .hero-title {
    font-size: var(--font-size-5xl);
  }

  .hero-subtitle {
    font-size: var(--font-size-xl);
  }

  .hero-logo {
    width: 120px;
  }

  .section-title {
    font-size: var(--font-size-3xl);
  }

  .footer-container {
    grid-template-columns: 2fr 1fr 1fr 2fr;
  }

  /* LTR desktop: Brand | Quick Links | Account | Contact */
  .footer:not([dir="rtl"]) .footer-brand {
    order: 1;
  }
  
  .footer:not([dir="rtl"]) .footer-links-quick {
    order: 2;
  }
  
  .footer:not([dir="rtl"]) .footer-links-account {
    order: 3;
  }
  
  .footer:not([dir="rtl"]) .footer-contact {
    order: 4;
  }

  /* RTL desktop: Contact | Account | Quick Links | Brand (mirrored) */
  .footer[dir="rtl"] .footer-contact {
    order: 1;
  }
  
  .footer[dir="rtl"] .footer-links-account {
    order: 2;
  }
  
  .footer[dir="rtl"] .footer-links-quick {
    order: 3;
  }
  
  .footer[dir="rtl"] .footer-brand {
    order: 4;
  }

  /* Grid utilities for desktop */
  .desktop\:grid-cols-3 {
    grid-template-columns: repeat(3, 1fr);
  }

  .desktop\:grid-cols-4 {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* ============================================
   LARGE DESKTOP (>= 1280px)
   ============================================ */

@media (min-width: 1280px) {
  .container {
    max-width: 1280px;
  }
}

/* ============================================
   EXTRA LARGE DESKTOP (>= 1536px)
   ============================================ */

@media (min-width: 1536px) {
  .container {
    max-width: 1480px;
  }
}

/* ============================================
   PRINT STYLES
   ============================================ */

@media print {

  .main-nav,
  .footer,
  .theme-toggle,
  .btn {
    display: none !important;
  }

  body {
    background: white;
    color: black;
  }

  .card,
  .book-card {
    box-shadow: none;
    border: 1px solid #ccc;
  }
}

/* ============================================
   REDUCED MOTION
   Accessibility: Respect user preferences
   ============================================ */

@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  html {
    scroll-behavior: auto;
  }
}

/* ============================================
   HIGH CONTRAST MODE
   ============================================ */

@media (prefers-contrast: high) {
  :root {
    --border-color: var(--text-primary);
  }

  .btn-primary {
    background: var(--color-primary);
  }

  .card,
  .book-card {
    border-width: 2px;
  }
}


/* ============================================
   LANDING PAGE ENHANCEMENTS
   Requirements: 1.1, 1.3, 1.4, 1.6
   ============================================ */

/* Hero Section Enhancements */
.hero-background {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
  z-index: 0;
}

.hero-gradient-orb {
  position: absolute;
  border-radius: 50%;
  opacity: 0.6;
  mix-blend-mode: normal;
  /* Use translate3d for GPU compositing without triggering expensive blur recalculations */
  transform: translate3d(0, 0, 0);
  will-change: transform, opacity;
  /* Pre-blurred via large radial-gradient spread — no runtime filter: blur() needed.
     This is the key Safari/iOS fix: blur() on large elements causes severe jank */
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.hero-orb-1 {
  width: 500px;
  height: 500px;
  /* Soft gradient that looks blurred without filter: blur() */
  background: radial-gradient(circle at center, rgba(139, 92, 246, 0.6) 0%, rgba(124, 58, 237, 0.3) 30%, rgba(124, 58, 237, 0.05) 60%, transparent 75%);
  top: -15%;
  right: -10%;
}

.hero-orb-2 {
  width: 420px;
  height: 420px;
  /* Cyan accent (#22d3ee → #06b6d4) to match theme accent + new hero visual */
  background: radial-gradient(circle at center, rgba(34, 211, 238, 0.5) 0%, rgba(6, 182, 212, 0.25) 30%, rgba(6, 182, 212, 0.05) 60%, transparent 75%);
  bottom: -10%;
  left: -8%;
}

.hero-orb-3 {
  width: 380px;
  height: 380px;
  background: radial-gradient(circle at center, rgba(59, 130, 246, 0.5) 0%, rgba(37, 99, 235, 0.25) 30%, rgba(37, 99, 235, 0.05) 60%, transparent 75%);
  top: 40%;
  left: 40%;
}

/* Reduced motion: disable all orb animations */
@media (prefers-reduced-motion: reduce) {
  .hero-gradient-orb {
    will-change: auto;
    animation: none !important;
  }
  .hero::before {
    animation: none !important;
  }
  .hero-logo {
    animation: none !important;
  }
}

/* Mobile: smaller orbs to save GPU memory */
@media (max-width: 768px) {
  .hero-orb-1 {
    width: 280px;
    height: 280px;
  }
  .hero-orb-2 {
    width: 240px;
    height: 240px;
  }
  .hero-orb-3 {
    width: 200px;
    height: 200px;
  }
}

.hero-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 800px;
  padding: 0 var(--spacing-md);
}

.hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-md);
  justify-content: center;
}

.hero-scroll-indicator {
  position: absolute;
  bottom: var(--spacing-xl);
  left: 0;
  right: 0;
  margin: 0 auto;
  width: fit-content;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-sm);
  color: var(--text-muted);
  font-size: var(--font-size-sm);
  animation: float 3s ease-in-out infinite;
}

.hero-scroll-indicator svg {
  opacity: 0.6;
}

/* Features Section */
.features-section {
  padding: var(--spacing-3xl) var(--spacing-md);
  background-color: var(--bg-primary);
}

.features-grid {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: var(--spacing-xl);
  max-width: 1300px;
  margin: 0 auto;
}

.feature-card {
  background-color: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: var(--spacing-xl);
  text-align: center;
  transition: transform var(--transition-normal), box-shadow var(--transition-normal), border-color var(--transition-normal);
}

.feature-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: var(--color-primary);
}

.feature-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
  border-radius: var(--radius-lg);
  margin-bottom: var(--spacing-lg);
  color: white;
}

.feature-title {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semibold);
  margin-bottom: var(--spacing-sm);
  color: var(--text-primary);
}

.feature-description {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  line-height: var(--line-height-relaxed);
  margin: 0;
}

/* ============================================
   AI TOOLS SECTION
   ============================================ */

.ai-tools-section {
  padding: var(--spacing-3xl) var(--spacing-md);
  background: #edf0f5;
  position: relative;
  overflow: hidden;
}

.ai-tools-section .section-title,
.ai-tools-section .ai-tool-title {
  color: var(--text-primary);
}

.ai-tools-section .section-subtitle,
.ai-tools-section .ai-tool-subtitle {
  color: var(--text-secondary, #cbd5e1);
}

.ai-tools-section .ai-tool-description {
  color: var(--text-secondary);
}

.ai-tools-section .ai-tool-row-image {
  border-color: var(--border-color);
  background: var(--bg-primary);
}

[data-theme="dark"] .ai-tools-section {
  background: #1a1f2e;
}

.ai-tools-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(circle at 20% 50%, rgba(124, 58, 237, 0.1) 0%, transparent 50%),
    radial-gradient(circle at 80% 50%, rgba(6, 182, 212, 0.1) 0%, transparent 50%);
  pointer-events: none;
}

.ai-tools-rows {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2xl);
  max-width: 1140px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

/* Each tool row: content + image side by side */
.ai-tool-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-xl);
  align-items: center;
  overflow: hidden;
}

@media (min-width: 768px) {
  .ai-tool-row {
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-2xl);
  }
  /* Reverse rows: image first, content second */
  .ai-tool-row-reverse .ai-tool-row-content { order: 2; }
  .ai-tool-row-reverse .ai-tool-row-image { order: 1; }

  /* RTL: flip ALL rows so alternation pattern works correctly */
  [dir="rtl"] .ai-tool-row:not(.ai-tool-row-reverse) .ai-tool-row-content { order: 2; }
  [dir="rtl"] .ai-tool-row:not(.ai-tool-row-reverse) .ai-tool-row-image { order: 1; }
  [dir="rtl"] .ai-tool-row-reverse .ai-tool-row-content { order: 1; }
  [dir="rtl"] .ai-tool-row-reverse .ai-tool-row-image { order: 2; }
}

.ai-tool-row-content {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  padding: 0 12px;
  text-align: center;
  align-items: center;
}

@media (min-width: 768px) {
  .ai-tool-row-content {
    padding: 0;
    text-align: left;
    align-items: flex-start;
  }
  [dir="rtl"] .ai-tool-row-content {
    text-align: right;
  }
}

.ai-tool-row-image {
  position: relative;
  border-radius: 16px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
  border: 1px solid var(--border-color);
  background: var(--bg-primary);
  padding: 16px;
  max-width: 100%;
  width: 100%;
  margin: 0 auto;
  overflow: hidden;
  box-sizing: border-box;
  min-width: 0;
}

@media (min-width: 768px) {
  .ai-tool-row-image {
    max-width: 480px;
  }
}

@media (max-width: 767px) {
  .ai-tool-row-image {
    padding: 10px;
    max-width: 100%;
    width: auto;
  }
  
  .ai-tool-row {
    max-width: 100%;
  }
  
  .ai-tool-row-content {
    max-width: 100%;
    overflow: hidden;
    min-width: 0;
  }
  
  .ai-tools-rows {
    max-width: 100%;
  }
}

.ai-tool-row-image::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.25), rgba(59, 130, 246, 0.25));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  z-index: 1;
}

.ai-tool-row-image img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: 10px;
  transition: transform 0.4s ease;
}

.ai-tool-row:hover .ai-tool-row-image img {
  transform: scale(1.03);
}

/* Keep existing card styles for icon, title, subtitle, description */
.ai-tools-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-xl);
  max-width: 1300px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

@media (min-width: 1024px) {
  .ai-tools-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.ai-tool-card {
  background: var(--bg-primary);
  border-radius: var(--radius-xl);
  padding: var(--spacing-xl);
  border: 1px solid var(--border-color);
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
  transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}

.ai-tool-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-xl);
}

.ai-tool-icon {
  width: 80px;
  height: 80px;
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.ai-tool-icon-chat {
  background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
  color: white;
}

.ai-tool-icon-clarify {
  background: linear-gradient(135deg, var(--color-secondary), var(--color-accent));
  color: white;
}

.ai-tool-icon-translate {
  background: linear-gradient(135deg, #7c3aed, #14b8a6);
  color: white;
}

.ai-tool-icon-listen {
  background: linear-gradient(135deg, #3b82f6, #8b5cf6);
  color: white;
}

.ai-tool-content {
  flex: 1;
}

.ai-tool-title {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  color: var(--text-primary);
  margin-bottom: var(--spacing-xs);
}

.ai-tool-subtitle {
  font-size: var(--font-size-sm);
  color: var(--color-primary);
  font-weight: var(--font-weight-medium);
  margin-bottom: var(--spacing-md);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.ai-tool-description {
  font-size: var(--font-size-base);
  color: var(--text-secondary);
  line-height: var(--line-height-relaxed);
  margin-bottom: var(--spacing-md);
}

.ai-tool-features {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.ai-tool-features li {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
}

.ai-tool-features li::before {
  content: '✓';
  color: var(--color-success);
  font-weight: var(--font-weight-bold);
}

/* AI Tool Demo Boxes */
.ai-tool-demo {
  background: var(--bg-secondary);
  border-radius: var(--radius-lg);
  padding: var(--spacing-md);
  border: 1px solid var(--border-color);
}

/* Chat Demo */
.chat-demo {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.chat-demo-message {
  padding: var(--spacing-sm) var(--spacing-md);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  max-width: 85%;
}

.chat-demo-user {
  background: var(--color-primary);
  color: white;
  align-self: flex-end;
  border-bottom-right-radius: 4px;
}

.chat-demo-ai {
  background: var(--bg-primary);
  color: var(--text-primary);
  border: 1px solid var(--border-color);
  align-self: flex-start;
  border-bottom-left-radius: 4px;
}

/* Clarify Demo */
.clarify-demo {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.clarify-demo-text {
  font-size: var(--font-size-base);
  color: var(--text-primary);
  line-height: 1.6;
}

.clarify-demo-highlight {
  background: linear-gradient(120deg, rgba(124, 58, 237, 0.3) 0%, rgba(124, 58, 237, 0.3) 100%);
  padding: 2px 4px;
  border-radius: 4px;
  cursor: pointer;
}

.clarify-demo-popup {
  background: var(--bg-primary);
  border: 1px solid var(--color-secondary);
  border-radius: var(--radius-md);
  padding: var(--spacing-sm) var(--spacing-md);
  font-size: var(--font-size-sm);
  color: var(--text-primary);
  box-shadow: var(--shadow-md);
}

.clarify-demo-popup strong {
  color: var(--color-secondary);
}

/* AI Tools CTA */
.ai-tools-cta {
  text-align: center;
  margin-top: var(--spacing-2xl);
  position: relative;
  z-index: 1;
}

.ai-tools-cta p {
  font-size: var(--font-size-lg);
  color: var(--text-secondary);
  margin-bottom: var(--spacing-md);
}

/* Enhanced Book Cards */
.book-card-cover-wrapper {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.book-card-cover-img {
  width: 100%;
  height: auto;
  aspect-ratio: 2/3;
  object-fit: cover;
  display: block;
  transition: transform var(--transition-normal);
}

.book-card:hover .book-card-cover-img {
  transform: scale(1.05);
}

.book-card-cover {
  width: 100%;
  aspect-ratio: 2/3;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.book-card-cover-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--spacing-lg);
  color: white;
}

.book-card-cover-title {
  font-family: var(--font-family-arabic);
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  margin-bottom: var(--spacing-sm);
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.book-card-cover-subtitle {
  font-size: var(--font-size-sm);
  opacity: 0.9;
}

.book-card-cover-placeholder {
  background: linear-gradient(135deg, var(--color-gray-400), var(--color-gray-500));
}

.book-card-cover-placeholder svg {
  opacity: 0.5;
  margin-bottom: var(--spacing-sm);
}

.book-card-badge {
  position: absolute;
  top: var(--spacing-md);
  right: var(--spacing-md);
  background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
  color: white;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  padding: var(--spacing-xs) var(--spacing-sm);
  border-radius: var(--radius-full);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Public Badge - Top Corner Ribbon */
.book-badge-public {
  position: absolute;
  top: 0;
  right: 0;
  background: linear-gradient(135deg, #27ae60, #229954);
  color: white;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 6px 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  box-shadow: 0 2px 8px rgba(39, 174, 96, 0.4);
  display: flex;
  align-items: center;
  gap: 4px;
  z-index: 10;
  border-radius: 0 var(--radius-lg) 0 8px;
}

.book-badge-public svg {
  flex-shrink: 0;
}

[data-theme="dark"] .book-badge-public {
  background: linear-gradient(135deg, #2ecc71, #27ae60);
  box-shadow: 0 2px 8px rgba(46, 204, 113, 0.5);
}

.book-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
  margin-top: var(--spacing-md);
}

.book-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-sm);
  margin-top: auto;
  padding-top: var(--spacing-md);
}

.book-card-tag {
  font-size: var(--font-size-xs);
  color: var(--color-primary);
  background-color: rgba(var(--color-primary-rgb), 0.1);
  padding: var(--spacing-xs) var(--spacing-sm);
  border-radius: var(--radius-full);
}

.book-card-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--font-size-sm);
  padding: 8px 16px;
  white-space: nowrap;
  transition: all var(--transition-fast);
}

.book-card-cta:hover {
  transform: translateY(-2px) scale(1.02);
}

.book-card-coming-soon {
  opacity: 0.7;
  cursor: default;
}

.book-card-coming-soon:hover {
  transform: none;
  box-shadow: var(--shadow-md);
}

/* About Section */
.about-section {
  padding: var(--spacing-3xl) var(--spacing-md);
  background-color: var(--bg-primary);
}

.about-content {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-2xl);
  max-width: 1300px;
  margin: 0 auto;
  align-items: center;
}

.about-text {
  order: 2;
}

.about-text p {
  color: var(--text-secondary);
  line-height: var(--line-height-relaxed);
  margin-bottom: var(--spacing-lg);
}

.about-stats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-xl);
  margin-top: var(--spacing-xl);
}

.stat-item {
  text-align: center;
}

.stat-number {
  display: block;
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-bold);
  background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.stat-label {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
}

.about-image {
  order: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Logo Flares Container */
.logo-flares-container {
  position: relative;
  display: inline-block;
}

.about-logo {
  max-width: 300px;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 10px 30px rgba(var(--color-primary-rgb), 0.2));
  animation: logoPulse 4s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  will-change: transform, filter;
  position: relative;
  z-index: 1;
}

/* Professional Logo Pulse Animation - Subtle breathing effect */
@keyframes logoPulse {
  0%, 100% {
    transform: scale(1);
    filter: drop-shadow(0 10px 30px rgba(var(--color-primary-rgb), 0.2));
  }
  50% {
    transform: scale(1.05);
    filter: drop-shadow(0 15px 40px rgba(var(--color-primary-rgb), 0.35));
  }
}

/* Pause animation on hover for interactivity */
.logo-flares-container:hover .about-logo {
  animation-play-state: paused;
  transform: scale(1.08);
  filter: drop-shadow(0 20px 50px rgba(var(--color-primary-rgb), 0.4));
  transition: transform 0.3s ease, filter 0.3s ease;
}

/* Sparkle Flares */
.flare {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: radial-gradient(circle, #fff 0%, rgba(167, 139, 250, 0.8) 40%, transparent 70%);
  box-shadow: 0 0 10px 3px rgba(167, 139, 250, 0.6),
              0 0 20px 6px rgba(124, 58, 237, 0.3);
  opacity: 0;
  z-index: 2;
  pointer-events: none;
}

/* Star-burst shape using pseudo-elements */
.flare::before,
.flare::after {
  content: '';
  position: absolute;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.9), transparent);
}

.flare::before {
  width: 20px;
  height: 2px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.flare::after {
  width: 2px;
  height: 20px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* Position each flare around the logo */
.flare-1 {
  top: 5%;
  right: 15%;
  animation: sparkle 3s ease-in-out infinite;
  animation-delay: 0s;
}

.flare-2 {
  top: 20%;
  left: 5%;
  animation: sparkle 3.5s ease-in-out infinite;
  animation-delay: 0.7s;
}

.flare-3 {
  bottom: 25%;
  right: 5%;
  animation: sparkle 2.8s ease-in-out infinite;
  animation-delay: 1.4s;
}

.flare-4 {
  top: 45%;
  right: 0%;
  animation: sparkle 3.2s ease-in-out infinite;
  animation-delay: 2.1s;
}

.flare-5 {
  bottom: 10%;
  left: 20%;
  animation: sparkle 3s ease-in-out infinite;
  animation-delay: 0.5s;
}

/* Sparkle Animation */
@keyframes sparkle {
  0%, 100% {
    opacity: 0;
    transform: scale(0.3) rotate(0deg);
  }
  20% {
    opacity: 1;
    transform: scale(1) rotate(45deg);
  }
  40% {
    opacity: 0.8;
    transform: scale(1.2) rotate(90deg);
  }
  60% {
    opacity: 1;
    transform: scale(0.9) rotate(135deg);
  }
  80% {
    opacity: 0.6;
    transform: scale(0.6) rotate(180deg);
  }
}

/* Pause flares on hover */
.logo-flares-container:hover .flare {
  animation-play-state: paused;
  opacity: 1;
  transform: scale(1.3);
}

/* About — Mission & Vision cards */
.about-mv-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-xl);
  max-width: 1300px;
  margin: var(--spacing-2xl) auto 0;
}

.about-mv-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 16px;
  padding: var(--spacing-xl) var(--spacing-lg);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.about-mv-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08);
}

[data-theme="dark"] .about-mv-card:hover {
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.3);
}

.about-mv-icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--spacing-md);
}

.about-mv-mission .about-mv-icon {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.12), rgba(99, 102, 241, 0.05));
  color: var(--color-primary);
}

.about-mv-vision .about-mv-icon {
  background: linear-gradient(135deg, rgba(168, 85, 247, 0.12), rgba(168, 85, 247, 0.05));
  color: #a855f7;
}

.about-mv-title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  color: var(--text-primary);
  margin-bottom: var(--spacing-sm);
}

.about-mv-text {
  font-size: var(--font-size-base);
  line-height: var(--line-height-relaxed);
  color: var(--text-secondary);
  margin: 0;
}

/* About — Stats row (redesigned) */
.about-section .about-stats {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--spacing-2xl);
  margin-top: var(--spacing-2xl);
  padding-top: var(--spacing-xl);
  border-top: 1px solid var(--border-color);
  max-width: 1300px;
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 768px) {
  .about-mv-cards {
    grid-template-columns: 1fr;
  }
  .about-section .about-stats {
    gap: var(--spacing-lg);
  }
}

/* CTA Section */
.cta-section {
  padding: var(--spacing-3xl) var(--spacing-md);
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
  text-align: center;
}

.cta-content {
  max-width: 600px;
  margin: 0 auto;
}

.cta-title {
  font-size: var(--font-size-3xl);
  color: white;
  margin-bottom: var(--spacing-md);
}

.cta-subtitle {
  font-size: var(--font-size-lg);
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: var(--spacing-xl);
}

.cta-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-md);
  justify-content: center;
}

.cta-section .btn-primary {
  background: white;
  color: var(--color-primary) !important;
}

.cta-section .btn-primary:hover {
  background: linear-gradient(135deg, #26477e, #1a3a6e) !important;
  color: white !important;
  transform: translateY(-2px);
}

.cta-section .btn-outline {
  border-color: white;
  color: white;
}

.cta-section .btn-outline:hover {
  background: white;
  color: var(--color-primary);
}

/* CTA Hero Button — big transparent marketing style */
.btn-cta-hero {
  display: inline-block;
  padding: 16px 48px;
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: white;
  background: rgba(255, 255, 255, 0.12);
  border: 2px solid rgba(255, 255, 255, 0.5);
  border-radius: 50px;
  backdrop-filter: blur(8px);
  transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, transform 0.2s ease;
  text-decoration: none;
}

.btn-cta-hero:hover {
  background: rgba(255, 255, 255, 0.22);
  border-color: rgba(255, 255, 255, 0.8);
  box-shadow: 0 0 24px rgba(255, 255, 255, 0.15);
  transform: translateY(-2px);
  color: white;
}

/* Nav Logo Image - Theme-based switching */
.nav-logo-img {
  height: 80px;
  width: auto;
}

/* Show dark bg logo in dark mode, light bg logo in light mode */
.nav-logo-dark {
  display: block;
}

.nav-logo-light {
  display: none;
}

[data-theme="light"] .nav-logo-dark {
  display: none;
}

/* Word Games hub is ALWAYS dark by concept: pin the on-dark-bg logo regardless
   of the saved theme. Tying it to the page (not [data-theme]) makes it race-proof
   against theme.js briefly applying a stored "light" theme before the hub's
   MutationObserver forces dark back — no light-logo flash on slow devices. */
body.wg-force-dark .nav-logo-dark {
  display: block !important;
}

body.wg-force-dark .nav-logo-light {
  display: none !important;
}

body.wg-force-dark .footer-logo-dark {
  display: block !important;
}

body.wg-force-dark .footer-logo-light {
  display: none !important;
}

[data-theme="light"] .nav-logo-light {
  display: block;
}

/* Footer logo theme switching */
.footer-logo img {
  height: 80px;
  width: auto;
}

.footer-logo .nav-logo-dark,
.footer-logo-dark {
  display: block;
}

.footer-logo .nav-logo-light,
.footer-logo-light {
  display: none;
}

[data-theme="light"] .footer-logo .nav-logo-dark,
[data-theme="light"] .footer-logo-dark {
  display: none;
}

[data-theme="light"] .footer-logo .nav-logo-light,
[data-theme="light"] .footer-logo-light {
  display: block;
}

/* ============================================
   LANDING PAGE RESPONSIVE ADJUSTMENTS
   ============================================ */

/* Mobile: shrink about logo and fit stats in one row */
@media (max-width: 767px) {
  .about-logo {
    max-width: 180px;
  }

  .about-stats {
    flex-wrap: nowrap;
    gap: 1rem;
    justify-content: space-between;
  }

  .stat-number {
    font-size: 1.4rem;
  }

  .stat-label {
    font-size: 0.75rem;
  }

  .stat-item {
    flex: 1;
    min-width: 0;
  }
}

@media (min-width: 768px) {
  .features-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .about-content {
    grid-template-columns: 1fr 1fr;
  }

  .about-text {
    order: 1;
  }

  .about-image {
    order: 2;
  }

  .hero-orb-1 {
    width: 700px;
    height: 700px;
  }

  .hero-orb-2 {
    width: 550px;
    height: 550px;
  }
}

@media (min-width: 1024px) {
  .features-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .hero-orb-1 {
    width: 900px;
    height: 900px;
  }

  .hero-orb-2 {
    width: 700px;
    height: 700px;
  }

  .hero-orb-3 {
    width: 550px;
    height: 550px;
  }
}


/* ============================================
   NAVBAR SCROLL STATE
   ============================================ */

/* (Handled by .nav-scrolled and .nav-hidden in the NAVIGATION section above) */

/* Feature icon transition */
.feature-icon {
  transition: transform var(--transition-normal);
}

/* ============================================
   BACK TO TOP BUTTON
   ============================================ */

.back-to-top {
  position: fixed;
  bottom: 2rem;
  right: 1rem;
  z-index: 90;
  width: 44px;
  height: 44px;
  border: none;
  border-radius: 50%;
  background: var(--color-primary, #2563eb);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease, background 0.2s ease;
}

.back-to-top.visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.back-to-top:hover {
  background: var(--color-primary-dark, #1d4ed8);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(37, 99, 235, 0.35);
}

.back-to-top svg {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  stroke-width: 2.5;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

[dir="rtl"] .back-to-top {
  right: auto;
  left: 1rem;
}


/* ============================================
   CONTACT FORM IN FOOTER
   Requirements: 5.2, 5.4
   ============================================ */

.contact-form {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  margin-top: var(--spacing-md);
}

.contact-form-group {
  display: flex;
  flex-direction: column;
}

.contact-form-input,
.contact-form-textarea {
  width: 100%;
  padding: var(--spacing-sm) var(--spacing-md);
  font-size: var(--font-size-sm);
  background-color: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
  color: var(--text-primary);
}

.contact-form-input:focus,
.contact-form-textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px rgba(var(--color-primary-rgb), 0.1);
}

.contact-form-input::placeholder,
.contact-form-textarea::placeholder {
  color: var(--text-muted);
}

.contact-form-input.error,
.contact-form-textarea.error {
  border-color: var(--color-error);
}

.contact-form-textarea {
  min-height: 80px;
  resize: vertical;
}

.contact-form-error {
  display: none;
  font-size: var(--font-size-xs);
  color: var(--color-error);
  margin-top: var(--spacing-xs);
}

.contact-form-submit {
  margin-top: var(--spacing-sm);
  width: 100%;
}

.contact-form-submit-loading {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.contact-form-submit-loading .spinner {
  width: 16px;
  height: 16px;
  border-width: 2px;
}

.contact-form-message {
  padding: var(--spacing-sm) var(--spacing-md);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  margin-top: var(--spacing-sm);
  text-align: center;
}

.contact-form-success {
  background-color: rgba(16, 185, 129, 0.1);
  color: var(--color-success);
  border: 1px solid rgba(16, 185, 129, 0.2);
}

.contact-form-error-msg {
  background-color: rgba(239, 68, 68, 0.1);
  color: var(--color-error);
  border: 1px solid rgba(239, 68, 68, 0.2);
}

/* Footer Contact Section Adjustments */
.footer-contact {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.footer-contact .footer-description {
  margin-bottom: 0;
}

/* Responsive adjustments for contact form */
@media (max-width: 767px) {
  .footer-contact {
    align-items: stretch;
    text-align: left;
  }

  .contact-form {
    width: 100%;
    max-width: 100%;
  }

  .contact-form-input,
  .contact-form-textarea {
    font-size: 16px;
    padding: 0.875rem;
  }

  .contact-form-textarea {
    min-height: 120px;
  }

  /* RTL adjustments for mobile */
  [dir="rtl"] .footer-contact {
    text-align: right;
  }
}

/* Tablet adjustments */
@media (min-width: 768px) and (max-width: 1023px) {
  .contact-form {
    max-width: 100%;
  }
}

@media (min-width: 1024px) {
  .contact-form {
    max-width: 280px;
  }
}


/* ============================================
   PRIVACY PAGE
   Requirements: 4.1, 4.2
   ============================================ */

.privacy-page {
  padding: var(--spacing-2xl) var(--spacing-md);
  background-color: var(--bg-secondary);
  min-height: calc(100vh - 200px);
}

.privacy-content {
  max-width: 800px;
  margin: 0 auto;
  background-color: var(--bg-primary);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: var(--spacing-2xl);
}

.privacy-header {
  text-align: center;
  margin-bottom: var(--spacing-2xl);
  padding-bottom: var(--spacing-xl);
  border-bottom: 1px solid var(--border-color);
}

.privacy-header h1 {
  font-size: var(--font-size-3xl);
  margin-bottom: var(--spacing-md);
  background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.privacy-updated {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  font-style: italic;
}

.privacy-section {
  margin-bottom: var(--spacing-xl);
}

.privacy-section h2 {
  font-size: var(--font-size-xl);
  color: var(--text-primary);
  margin-bottom: var(--spacing-md);
  padding-bottom: var(--spacing-sm);
  border-bottom: 2px solid var(--color-primary);
}

.privacy-section h3 {
  font-size: var(--font-size-lg);
  color: var(--text-primary);
  margin-top: var(--spacing-lg);
  margin-bottom: var(--spacing-sm);
}

.privacy-section p {
  color: var(--text-secondary);
  line-height: var(--line-height-relaxed);
  margin-bottom: var(--spacing-md);
}

.privacy-section ul {
  margin-left: var(--spacing-lg);
  margin-bottom: var(--spacing-md);
}

.privacy-section li {
  color: var(--text-secondary);
  line-height: var(--line-height-relaxed);
  margin-bottom: var(--spacing-sm);
  list-style-type: disc;
}

.privacy-section li strong {
  color: var(--text-primary);
}

.privacy-section a {
  color: var(--color-primary);
  text-decoration: underline;
}

.privacy-section a:hover {
  color: var(--color-primary-dark);
}

.contact-info {
  background-color: var(--bg-secondary);
  padding: var(--spacing-lg);
  border-radius: var(--radius-md);
  border-left: 4px solid var(--color-primary);
}

.contact-info p {
  margin-bottom: var(--spacing-sm);
}

.contact-info p:last-child {
  margin-bottom: 0;
}

/* Responsive adjustments */
@media (max-width: 767px) {
  .privacy-content {
    padding: var(--spacing-lg);
  }

  .privacy-header h1 {
    font-size: var(--font-size-2xl);
  }

  .privacy-section h2 {
    font-size: var(--font-size-lg);
  }
}


/* ============================================
   OAUTH / SOCIAL LOGIN BUTTONS
   ============================================ */

.oauth-buttons {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-lg);
}

.btn-oauth {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-sm);
  width: 100%;
  padding: var(--spacing-md) var(--spacing-lg);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-color);
  background-color: var(--bg-primary);
  color: var(--text-primary);
  text-decoration: none;
  transition: all var(--transition-fast);
}

.btn-oauth:hover {
  background-color: var(--bg-secondary);
  border-color: var(--text-muted);
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}

.btn-oauth svg {
  flex-shrink: 0;
}

.btn-google:hover {
  border-color: #4285F4;
}

.btn-facebook {
  background-color: #1877F2;
  border-color: #1877F2;
  color: white;
}

.btn-facebook:hover {
  background-color: #166FE5;
  border-color: #166FE5;
  color: white;
}

.btn-facebook svg {
  fill: white;
}

.btn-microsoft:hover {
  border-color: #00A4EF;
}

.auth-divider {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  margin: var(--spacing-lg) 0;
  color: var(--text-muted);
  font-size: var(--font-size-sm);
}

.auth-divider::before,
.auth-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background-color: var(--border-color);
}


/* ============================================
   LANGUAGE SWITCHER
   ============================================ */

/* Page-level language switcher (fixed position) */
.page-lang-switcher {
  position: fixed;
  top: var(--spacing-md);
  right: var(--spacing-md);
  z-index: var(--z-fixed);
}

[dir="rtl"] .page-lang-switcher {
  right: auto;
  left: var(--spacing-md);
}

/* Mobile: Prevent overflow and adjust positioning */
@media (max-width: 768px) {
  .page-lang-switcher {
    top: var(--spacing-sm, 0.5rem);
    right: var(--spacing-sm, 0.5rem);
    max-width: calc(100vw - 1rem);
  }

  [dir="rtl"] .page-lang-switcher {
    left: var(--spacing-sm, 0.5rem);
    right: auto;
  }
}

.lang-switcher {
  position: relative;
}

.lang-switcher-btn {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm) var(--spacing-md);
  background-color: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.lang-switcher-btn:hover {
  background-color: var(--bg-secondary);
  border-color: var(--color-primary);
  color: var(--text-primary);
}

.lang-switcher-btn svg {
  width: 16px;
  height: 16px;
}

.lang-switcher-dropdown {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: var(--spacing-xs);
  min-width: 140px;
  background-color: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: all var(--transition-fast);
  z-index: var(--z-dropdown);
}

/* Mobile: Prevent dropdown overflow */
@media (max-width: 768px) {
  .lang-switcher-dropdown {
    right: 0;
    left: auto;
    min-width: 120px;
    max-width: calc(100vw - 1rem);
  }

  [dir="rtl"] .lang-switcher-dropdown {
    left: 0;
    right: auto;
  }
}

.lang-switcher:hover .lang-switcher-dropdown,
.lang-switcher:focus-within .lang-switcher-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.lang-switcher-dropdown a {
  display: block;
  padding: var(--spacing-sm) var(--spacing-md);
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  transition: all var(--transition-fast);
}

.lang-switcher-dropdown a:hover {
  background-color: var(--bg-tertiary);
  color: var(--color-primary);
}

.lang-switcher-dropdown a.active {
  background-color: rgba(var(--color-primary-rgb), 0.1);
  color: var(--color-primary);
  font-weight: var(--font-weight-medium);
}

/* ============================================
   RTL (Right-to-Left) SUPPORT
   ============================================ */

[dir="rtl"] {
  direction: rtl;
  text-align: right;
}

[dir="rtl"] .form-group {
  text-align: right;
}

[dir="rtl"] .auth-footer {
  text-align: center;
}

[dir="rtl"] .back-to-home {
  flex-direction: row-reverse;
}

[dir="rtl"] .back-to-home:hover {
  transform: translateX(4px);
}

[dir="rtl"] .back-to-home:hover svg {
  transform: translateX(4px) scaleX(-1);
}

[dir="rtl"] .back-to-home svg {
  transform: scaleX(-1);
}

[dir="rtl"] .lang-switcher-dropdown {
  right: auto;
  left: 0;
}

[dir="rtl"] .hero-cta {
  flex-direction: row-reverse;
}

[dir="rtl"] .nav-links {
  direction: rtl;
}

html[lang="ar"] .nav-links {
  direction: rtl;
}

html[lang="ar"] .nav-mobile-links {
  direction: rtl;
  text-align: right;
}

[dir="rtl"] .feature-card,
[dir="rtl"] .ai-tool-card,
[dir="rtl"] .ai-tool-row-content {
  text-align: right;
}

[dir="rtl"] .footer-container,
.footer[dir="rtl"] .footer-container {
  text-align: right;
}

.footer[dir="rtl"] .footer-links,
.footer[dir="rtl"] .footer-brand,
.footer[dir="rtl"] .footer-contact {
  align-items: flex-start;
}

.footer[dir="rtl"] .contact-form-input,
.footer[dir="rtl"] .contact-form-textarea {
  text-align: right;
}

[dir="rtl"] .admin-sidebar {
  left: auto;
  right: 0;
  border-right: none;
  border-left: 1px solid var(--border-color);
}

[dir="rtl"] .admin-main {
  margin-left: 0;
  margin-right: 250px;
}

[dir="rtl"] body.sidebar-collapsed .admin-main {
  margin-right: 62px;
}

[dir="rtl"] .admin-sidebar.collapsed .sidebar-collapse-btn svg {
  transform: rotate(0deg);
}

[dir="rtl"] .admin-sidebar:not(.collapsed) .sidebar-collapse-btn svg {
  transform: rotate(180deg);
}

[dir="rtl"] .admin-sidebar.collapsed .admin-nav-link:hover::after {
  left: auto;
  right: 100%;
  margin-left: 0;
  margin-right: 8px;
}

[dir="rtl"] .admin-nav-link {
  flex-direction: row;
}

[dir="rtl"] .admin-sidebar .sidebar-collapse-btn,
[dir="rtl"] .admin-sidebar .nav-badge,
[dir="rtl"] .admin-sidebar .submenu-arrow {
  margin-left: 0;
  margin-inline-start: auto;
}

[dir="rtl"] .admin-submenu {
  margin-left: 0;
  margin-inline-start: var(--spacing-lg);
  padding-left: 0;
  padding-inline-start: var(--spacing-sm);
  border-left: 0;
  border-inline-start: 2px solid var(--border-color);
}

[dir="rtl"] .admin-submenu-link.active {
  border-left: 0;
  border-inline-start: 2px solid var(--color-primary);
  margin-left: 0;
  margin-inline-start: -2px;
  padding-left: 12px;
  padding-inline-start: 10px;
}

[dir="rtl"] .admin-topbar-back svg {
  transform: scaleX(-1);
}

@media (max-width: 768px) {
  [dir="rtl"] .admin-main,
  [dir="rtl"] body.sidebar-collapsed .admin-main {
    margin-right: 0;
    margin-left: 0;
  }

  [dir="rtl"] .admin-sidebar {
    transform: translateX(100%);
  }

  [dir="rtl"] .admin-sidebar.active {
    transform: translateX(0);
  }

  [dir="rtl"] .admin-sidebar-close {
    right: auto;
    left: var(--spacing-md);
  }
}

/* Arabic font adjustments */
[lang="ar"] body,
.footer[dir="rtl"] {
  font-family: 'Noto Kufi Arabic', var(--font-family-base);
}

[lang="ar"] h1,
[lang="ar"] h2,
[lang="ar"] h3,
[lang="ar"] h4,
[lang="ar"] h5,
[lang="ar"] h6,
[lang="ar"] .hero-title,
[lang="ar"] .section-title,
[lang="ar"] .auth-title,
[lang="ar"] .cta-title,
.footer[dir="rtl"] .footer-links-title {
  font-family: 'Cairo', var(--font-family-heading);
}

[lang="ar"] .btn,
[lang="ar"] .nav-link,
[lang="ar"] .nav-mobile-link {
  font-family: 'Noto Kufi Arabic', var(--font-family-base);
}

/* Larger nav font for Arabic */
[lang="ar"] .nav-link {
  font-size: 15px;
}

/* Tighter nav for French (longer labels) */
[lang="fr"] .nav-links {
  gap: 0.85rem;
}

[lang="fr"] .nav-link {
  font-size: 14px;
  letter-spacing: 0.03em;
}

[lang="ar"] .nav-mobile-link {
  font-size: var(--font-size-2xl);
}

/* Slightly larger font for Arabic readability */
[lang="ar"] .hero-subtitle,
[lang="ar"] .section-subtitle,
[lang="ar"] .feature-description {
  font-size: calc(var(--font-size-lg) * 1.1);
  line-height: 1.8;
}


/* ============================================
   SETTINGS DROPDOWN (Language + Theme)
   ============================================ */

.settings-dropdown {
  position: relative;
}

.settings-dropdown-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  background-color: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.settings-dropdown-btn:hover {
  background-color: var(--bg-secondary);
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.settings-dropdown-btn svg {
  transition: transform var(--transition-normal);
}

.settings-dropdown:hover .settings-dropdown-btn svg {
  transform: rotate(45deg);
}

.settings-dropdown-menu {
  position: absolute;
  top: calc(100% + var(--spacing-sm));
  right: 0;
  min-width: 200px;
  background-color: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: all var(--transition-fast);
  z-index: var(--z-dropdown);
  overflow: hidden;
}

/* Show on hover (desktop) or when active (mobile click) */
@media (hover: hover) {
  .settings-dropdown:hover .settings-dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
}
.settings-dropdown.active .settings-dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

[dir="rtl"] .settings-dropdown-menu {
  right: auto;
  left: 0;
}

/* Arabic (RTL) header: the action icons live on the LEFT, so their dropdown
   panels must anchor to the left edge and open inward — otherwise they overflow
   off the left side of the viewport. The header has no dir="rtl" ancestor, so
   these are scoped to html[lang="ar"]. Desktop only; mobile uses fixed panels. */
@media (min-width: 601px) {
  html[lang="ar"] .settings-dropdown-menu,
  html[lang="ar"] .header-profile-menu,
  html[lang="ar"] .header-notif-menu {
    right: auto;
    left: 0;
  }
}

@media (max-width: 600px) {
  .settings-dropdown-menu {
    position: fixed;
    top: 70px;
    right: 16px;
    left: 16px;
    width: auto;
    min-width: unset;
  }
  [dir="rtl"] .settings-dropdown-menu {
    right: 16px;
    left: 16px;
  }
}

.settings-section {
  padding: var(--spacing-md);
}

.settings-section+.settings-section {
  border-top: 1px solid var(--border-color);
}

.settings-section-title {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--spacing-sm);
}

.settings-section-title svg {
  opacity: 0.7;
}

/* Language Options */
.settings-lang-options {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.settings-lang-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-sm) var(--spacing-md);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  transition: all var(--transition-fast);
}

.settings-lang-option:hover {
  background-color: var(--bg-tertiary);
  color: var(--text-primary);
}

.settings-lang-option.active {
  background-color: rgba(var(--color-primary-rgb), 0.1);
  color: var(--color-primary);
  font-weight: var(--font-weight-medium);
}

.settings-lang-option svg {
  color: var(--color-primary);
}

/* Theme Toggle Switch */
.settings-theme-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: var(--spacing-sm);
  background-color: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.settings-theme-toggle:hover {
  border-color: var(--color-primary);
}

.settings-theme-label {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  color: var(--text-muted);
  padding: 0 var(--spacing-sm);
  transition: color var(--transition-fast);
}

.settings-theme-switch {
  width: 36px;
  height: 20px;
  background-color: var(--color-primary);
  border-radius: var(--radius-full);
  position: relative;
  transition: background-color var(--transition-fast);
}

.settings-theme-switch::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  background-color: white;
  border-radius: var(--radius-full);
  transition: transform var(--transition-fast);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

/* Light theme state */
.settings-theme-light {
  color: var(--color-primary);
}

/* Dark theme state */
[data-theme="dark"] .settings-theme-switch::after {
  transform: translateX(16px);
}

[data-theme="dark"] .settings-theme-light {
  color: var(--text-muted);
}

[data-theme="dark"] .settings-theme-dark {
  color: var(--color-primary);
}


/* Admin link inside settings dropdown */
.settings-admin-link {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm) var(--spacing-md);
  color: var(--color-primary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  border-radius: var(--radius-md);
  transition: all var(--transition-fast);
}

.settings-admin-link:hover {
  background-color: rgba(var(--color-primary-rgb), 0.1);
}

.settings-admin-link svg {
  opacity: 0.8;
}

/* ============================================
   MOBILE RESPONSIVE - Hide Sign In on Mobile
   ============================================ */

/* Hide desktop Sign In button on mobile */
.nav-signin-desktop {
  display: none;
}

/* Mobile header layout: hamburger + book icon grouped left, icons grouped right */
@media (max-width: 1200px) {
  .nav-container {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
  }

  .nav-toggle {
    display: flex;
    order: 1;
    flex-shrink: 0;
  }

  .nav-logo {
    order: 2;
    /* Push the action icons to the far right while keeping the logo
       snug against the hamburger. The logo is the flexible item so it
       shrinks first and NEVER pushes the action icons off-screen. */
    margin-right: auto;
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
  }

  .nav-logo .nav-logo-full {
    height: auto;
    max-height: 50px;
    max-width: 100%;
    width: auto;
  }

  .nav-actions {
    order: 3;
    flex-shrink: 0;
    gap: 6px;
    margin-left: 0;
    padding-right: 8px;
  }

  /* Guarantee every action icon stays visible on narrow screens */
  .nav-actions > * {
    flex-shrink: 0;
  }

  .nav-links {
    display: none;
  }

  /* Arabic (RTL) hamburger header: mirror the mobile layout so the hamburger
     sits on the right, the logo stays snug beside it, and the action icons
     move to the far left — matching the desktop RTL flip. */
  html[lang="ar"] .nav-toggle {
    order: 3;
  }
  html[lang="ar"] .nav-logo {
    order: 2;
    margin-right: 0;
    margin-left: auto;
  }
  html[lang="ar"] .nav-actions {
    order: 1;
    margin-left: 0;
    padding-right: 0;
    padding-left: 8px;
  }
}

/* Narrow mobile: tighter nav layout */
@media (max-width: 767px) {
  .main-nav .nav-container {
    padding: 8px 8px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 6px;
  }

  .main-nav .nav-mobile-toggle,
  .main-nav .nav-toggle {
    order: 1;
    flex-shrink: 0;
  }

  .main-nav .nav-logo {
    order: 2;
    position: static;
    transform: none;
    /* Keep the logo tight against the hamburger and push actions right.
       Logo shrinks first so action icons are never clipped. */
    margin-right: auto;
    padding-left: 0;
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
  }

  .main-nav .nav-actions {
    order: 3;
    gap: 6px;
    margin-left: 0;
    padding-right: 0;
    flex-shrink: 0;
  }

  .main-nav .nav-actions > * {
    flex-shrink: 0;
  }

  .main-nav .nav-icon-btn {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
  }

  .main-nav .nav-logo .nav-logo-full {
    height: auto;
    max-height: 44px;
    max-width: 100%;
    width: auto;
  }

  /* Arabic (RTL) narrow-mobile header: same mirror as the wider hamburger
     breakpoint — hamburger on the right, actions on the left. */
  html[lang="ar"] .main-nav .nav-mobile-toggle,
  html[lang="ar"] .main-nav .nav-toggle {
    order: 3;
  }
  html[lang="ar"] .main-nav .nav-logo {
    order: 2;
    margin-right: 0;
    margin-left: auto;
  }
  html[lang="ar"] .main-nav .nav-actions {
    order: 1;
    margin-left: 0;
    padding-right: 0;
  }

  /* Remove horizontal padding from dashboard content on mobile */
  .dashboard-content {
    padding-left: 0;
    padding-right: 0;
  }

  .dashboard-content > .container {
    padding-left: 0;
    padding-right: 0;
  }
}

/* Show on tablet and desktop */
@media (min-width: 1201px) {
  .nav-signin-desktop {
    display: inline-flex;
  }

  .nav-toggle {
    display: none;
  }
}


/* ============================================
   MOBILE NAV MENU STYLES
   ============================================ */

.nav-mobile-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: var(--spacing-sm);
  margin-bottom: var(--spacing-sm);
  border-bottom: 1px solid var(--border-color);
}

.nav-mobile-logo img {
  height: 50px;
  width: auto;
}

/* Mobile logo theme switching */
.nav-mobile-logo .nav-logo-dark {
  display: block;
}
.nav-mobile-logo .nav-logo-light {
  display: none;
}
[data-theme="light"] .nav-mobile-logo .nav-logo-dark {
  display: none;
}
[data-theme="light"] .nav-mobile-logo .nav-logo-light {
  display: block;
}

.nav-mobile-close {
  font-size: 2rem;
  background: none;
  border: none;
  color: var(--text-primary);
  cursor: pointer;
  padding: var(--spacing-sm);
  line-height: 1;
}

.nav-mobile-close:hover {
  color: var(--color-primary);
}


/* ============================================
   ADMIN MOBILE STYLES
   ============================================ */

/* Mobile Admin Header - hidden on desktop */
.admin-mobile-header {
  display: none;
}

/* Mobile sidebar close button - hidden on desktop */
.admin-sidebar-close {
  display: none;
}

/* Mobile overlay */
.admin-sidebar-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 998;
  opacity: 0;
  transition: opacity var(--transition-normal);
}

.admin-sidebar-overlay.active {
  display: block;
  opacity: 1;
}

@media (max-width: 768px) {

  /* Admin layout becomes single column */
  .admin-layout {
    display: block;
  }

  /* Show mobile header */
  .admin-mobile-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-md);
    background-color: var(--bg-primary);
    border-bottom: 1px solid var(--border-color);
    position: sticky;
    top: 0;
    z-index: 100;
  }

  .admin-mobile-toggle {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    width: 28px;
    height: 28px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
  }

  .admin-mobile-toggle span {
    display: block;
    width: 100%;
    height: 3px;
    background-color: var(--text-primary);
    border-radius: 2px;
    transition: all var(--transition-fast);
  }

  .admin-mobile-logo img {
    height: 40px;
    width: auto;
  }

  /* Theme toggle in mobile admin header */
  .admin-mobile-header .theme-toggle {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-full);
    cursor: pointer;
    transition: all var(--transition-fast);
    flex-shrink: 0;
  }

  .admin-mobile-header .theme-toggle:hover,
  .admin-mobile-header .theme-toggle:active {
    background-color: var(--bg-secondary);
    border-color: var(--color-primary);
  }

  .admin-mobile-header .theme-toggle-icon {
    width: 20px;
    height: 20px;
  }

  /* Hide desktop sidebar */
  .admin-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 280px;
    transform: translateX(-100%);
    transition: transform var(--transition-normal);
    z-index: 999;
    display: flex;
    flex-direction: column;
  }

  .admin-sidebar.active {
    transform: translateX(0);
  }

  /* Show close button on mobile */
  .admin-sidebar-close {
    display: block;
    position: absolute;
    top: var(--spacing-md);
    right: var(--spacing-md);
    background: none;
    border: none;
    font-size: 1.5rem;
    color: var(--text-secondary);
    cursor: pointer;
    padding: var(--spacing-xs);
    line-height: 1;
  }

  .admin-sidebar-close:hover {
    color: var(--color-primary);
  }

  /* Hide collapse button on mobile */
  .sidebar-collapse-btn {
    display: none !important;
  }

  /* Reset collapsed state on mobile */
  body.sidebar-collapsed .admin-sidebar,
  .admin-sidebar.collapsed {
    width: 280px;
    padding: var(--spacing-lg);
  }

  body.sidebar-collapsed .admin-sidebar .admin-nav-link,
  .admin-sidebar.collapsed .admin-nav-link {
    font-size: var(--font-size-sm);
    justify-content: flex-start;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-md);
  }

  body.sidebar-collapsed .admin-sidebar .admin-sidebar-header .nav-logo-img,
  body.sidebar-collapsed .admin-sidebar .admin-sidebar-header p,
  body.sidebar-collapsed .admin-sidebar .admin-nav-link .submenu-arrow,
  .admin-sidebar.collapsed .admin-sidebar-header .nav-logo-img,
  .admin-sidebar.collapsed .admin-sidebar-header p,
  .admin-sidebar.collapsed .admin-nav-link .submenu-arrow {
    display: unset;
  }

  body.sidebar-collapsed .admin-sidebar .admin-submenu,
  .admin-sidebar.collapsed .admin-submenu {
    display: none !important;
  }

  body.sidebar-collapsed .admin-sidebar .admin-nav-group.expanded .admin-submenu,
  .admin-sidebar.collapsed .admin-nav-group.expanded .admin-submenu {
    display: flex !important;
  }

  body.sidebar-collapsed .admin-main {
    margin-left: 0;
  }

  body.sidebar-collapsed .admin-sidebar .admin-sidebar-footer .admin-nav-link {
    font-size: var(--font-size-sm);
    justify-content: flex-start;
    gap: var(--spacing-sm);
  }

  body.sidebar-collapsed .admin-sidebar .admin-nav-link:hover::after {
    display: none;
  }

  /* Main content takes full width */
  .admin-main {
    margin-left: 0;
    padding: var(--spacing-md);
  }

  /* Hide desktop header actions in admin-main on mobile */
  .admin-header .nav-actions {
    display: none;
  }

  /* Hide topbar theme toggle on mobile (mobile header has its own) */
  .admin-top-bar .nav-actions {
    display: none;
  }

  /* Hide entire topbar utility row on mobile (bell + toggle moved to mobile header) */
  .admin-top-bar .header-utility {
    display: none;
  }

  /* Admin header adjustments */
  .admin-header {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-sm);
  }

  .admin-title {
    font-size: var(--font-size-xl);
  }

  /* Remove horizontal scroll for card-based tables on mobile */
  .admin-card-body {
    overflow-x: visible;
  }

  .admin-table {
    display: block;
    min-width: 0;
    box-shadow: none;
  }

  /* Convert table to card layout on mobile */
  .admin-table thead {
    display: none;
  }

  .admin-table tbody {
    display: block;
  }

  .admin-table tr {
    display: block;
    margin-bottom: var(--spacing-md);
    background-color: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: var(--spacing-md);
    box-shadow: var(--shadow-sm);
  }

  .admin-table td {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) 0;
    border-bottom: 1px solid var(--border-color);
    text-align: right;
    min-height: 32px;
  }

  .admin-table td:last-child {
    border-bottom: none;
    padding-top: var(--spacing-md);
    margin-top: var(--spacing-xs);
    border-top: 1px solid var(--border-color);
  }

  /* Add labels before each cell using data-label attribute */
  .admin-table td::before {
    content: attr(data-label);
    font-weight: var(--font-weight-semibold);
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    flex-shrink: 0;
    margin-right: var(--spacing-md);
    min-width: 80px;
    text-align: left;
  }

  /* Hide label for empty data-label (Actions column) */
  .admin-table td[data-label=""]::before {
    content: "Actions";
  }

  /* User info styling in mobile cards */
  .admin-table .user-info {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    flex: 1;
    justify-content: flex-end;
  }

  .admin-table .user-avatar {
    width: 32px;
    height: 32px;
    font-size: var(--font-size-sm);
  }

  /* Book info styling in mobile cards */
  .admin-table .book-info {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    flex: 1;
    justify-content: flex-end;
  }

  .admin-table .book-preview-swatch {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
  }

  /* Action buttons in mobile cards */
  .admin-table td .action-buttons,
  .admin-table td .btn-group {
    display: flex;
    gap: var(--spacing-xs);
    flex-wrap: wrap;
    justify-content: flex-end;
    width: 100%;
  }

  .admin-table td .btn-sm {
    font-size: var(--font-size-xs);
    padding: var(--spacing-xs) var(--spacing-sm);
    white-space: nowrap;
  }

  /* Badges in mobile cards */
  .admin-table .badge {
    font-size: var(--font-size-xs);
    padding: 4px 8px;
  }

  /* Code elements in mobile cards */
  .admin-table code {
    font-size: var(--font-size-xs);
    word-break: break-all;
  }

  /* Theme preview in mobile cards */
  .admin-table .theme-preview {
    display: flex;
    gap: 4px;
    justify-content: flex-end;
  }

  .admin-table .color-dot {
    width: 20px;
    height: 20px;
  }

  /* Stats grid single column */
  .stats-grid {
    grid-template-columns: 1fr !important;
  }

  /* Tools grid single column */
  .tools-grid {
    grid-template-columns: 1fr !important;
  }
}


/* ============================================================
   ADMIN MOBILE HARDENING (global, scoped to .admin-main)
   Catches common mobile-overflow patterns across all admin
   pages without per-file edits. Desktop is untouched (lives
   entirely inside the max-width:768px media query).
   ============================================================ */
@media (max-width: 768px) {

  /* Stop wide content from forcing horizontal page scroll.
     The off-canvas sidebar/overlay are position:fixed, so they
     are unaffected by this. Wide tables scroll inside their own
     .table-responsive wrapper instead of pushing the page. */
  .admin-layout {
    overflow-x: hidden;
  }

  .admin-main {
    min-width: 0;
    max-width: 100%;
  }

  /* Neutralize page-specific fixed column widths so the
     table-to-card transform isn't crushed (e.g. books.php sets
     td[data-label="Actions"]{width:200px}). !important beats the
     non-important page rules regardless of their selector weight. */
  .admin-main .admin-table,
  .admin-main .admin-table thead,
  .admin-main .admin-table tbody,
  .admin-main .admin-table tr,
  .admin-main .admin-table th,
  .admin-main .admin-table td {
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
  }

  /* Card cells should flow text naturally, not stay fixed-layout */
  .admin-main .admin-table {
    table-layout: auto !important;
  }

  /* Action button clusters wrap and fill the card row */
  .admin-main .admin-table td .actions-row,
  .admin-main .admin-table td .action-buttons,
  .admin-main .admin-table td .btn-group {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-xs);
    justify-content: flex-end;
    width: 100%;
  }

  /* Any raw / unstyled table that is NOT using the card transform
     scrolls horizontally instead of overflowing the viewport. */
  .admin-main table:not(.admin-table) {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Scroll wrappers behave on touch */
  .admin-main .table-responsive {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Inputs, selects and textareas never exceed the viewport */
  .admin-main input,
  .admin-main select,
  .admin-main textarea,
  .admin-main .form-control,
  .admin-main .premium-input,
  .admin-main .premium-select,
  .admin-main .premium-textarea {
    max-width: 100%;
  }

  /* Common toolbar / filter / header rows wrap instead of overflowing */
  .admin-main .admin-toolbar,
  .admin-main .toolbar,
  .admin-main .filter-bar,
  .admin-main .filters,
  .admin-main .header-actions,
  .admin-main .card-actions,
  .admin-main .btn-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
  }

  /* Generic responsive grids collapse to a single column.
     auto-fit/minmax grids already adapt; this catches the
     hardcoded repeat(N, 1fr) cases used in some admin pages. */
  .admin-main .premium-grid-2,
  .admin-main .premium-grid-3,
  .admin-main .settings-field-grid,
  .admin-main .form-grid,
  .admin-main .grid-2,
  .admin-main .grid-3,
  .admin-main .grid-4 {
    grid-template-columns: 1fr !important;
  }

  /* Wide media (images, iframes, canvas, video) stay inside */
  .admin-main img,
  .admin-main iframe,
  .admin-main video,
  .admin-main canvas {
    max-width: 100%;
    height: auto;
  }

  /* Pre/code blocks scroll rather than overflow */
  .admin-main pre {
    max-width: 100%;
    overflow-x: auto;
  }
}


/* Admin sidebar footer */
.admin-sidebar-footer {
  margin-top: auto;
  padding-top: var(--spacing-xl);
  border-top: 1px solid var(--border-color);
}

/* Added by Knowledge Base Page Fix */
.btn-danger {
  background-color: var(--color-error);
  color: white;
}
.btn-danger:hover {
  background-color: #dc2626;
  color: white;
}

.flex-1 {
  flex: 1;
}

/* ========================================
   Partners Section (Homepage)
   ======================================== */
.partners-section {
  padding: var(--spacing-3xl) var(--spacing-md);
  background: var(--section-alt-bg);
  border-top: 1px solid var(--border-color);
}

.partners-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-xl);
  margin-top: var(--spacing-xl);
}

.partner-card {
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: var(--spacing-xl);
  text-align: center;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.partner-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.1);
}

.partner-card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
  color: white;
  margin-bottom: var(--spacing-md);
}

.partner-card h3 {
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: var(--spacing-sm);
  color: var(--text-primary);
}

.partner-card p {
  font-size: 0.95rem;
  color: var(--text-secondary);
  line-height: 1.6;
}

/* Partners Highlights */
.partners-highlights {
  display: flex;
  justify-content: center;
  gap: var(--spacing-2xl);
  margin-top: var(--spacing-2xl);
  flex-wrap: wrap;
}

.partners-highlight-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-xs);
}

.partners-highlight-number {
  font-size: 2rem;
  font-weight: 700;
  color: var(--color-primary);
  line-height: 1;
}

.partners-highlight-label {
  font-size: 0.85rem;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Partners CTA button */
.partners-cta {
  margin-top: var(--spacing-xl);
  text-align: center;
}

/* Partners CTA variant */
.cta-section-partners {
  background: linear-gradient(135deg, #1a0a3e 0%, #2d1b69 40%, #1e3a8a 100%);
}

/* Responsive: Partners grid */
@media (max-width: 768px) {
  .partners-grid {
    grid-template-columns: 1fr;
    gap: var(--spacing-md);
  }

  .partners-highlights {
    gap: var(--spacing-lg);
  }

  .partners-highlight-number {
    font-size: 1.5rem;
  }
}

@media (min-width: 769px) and (max-width: 1024px) {
  .partners-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ============================================
   UNIFIED NOTES (FOOTNOTES & ENDNOTES)
   ============================================ */

.note-tooltip {
  position: absolute;
  background-color: var(--bg-primary, #ffffff);
  border: 1px solid var(--border-color, #e5e7eb);
  border-radius: var(--radius-md, 0.5rem);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  padding: 0;
  z-index: 9999;
  max-width: 350px;
  width: 90vw;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--text-primary, #111827);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s, visibility 0.2s;
  pointer-events: none;
}

.note-tooltip.visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.note-tooltip-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border-color, #e5e7eb);
  background-color: var(--bg-tertiary, #f3f4f6);
  border-radius: var(--radius-md, 0.5rem) var(--radius-md, 0.5rem) 0 0;
  font-weight: 600;
  font-size: 0.8rem;
}

.note-tooltip-close {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1.2rem;
  line-height: 1;
  color: var(--text-secondary, #6b7280);
  padding: 0 4px;
}

.note-tooltip-close:hover {
  color: var(--text-primary, #111827);
}

.note-tooltip-content {
  padding: 12px;
  max-height: 200px;
  overflow-y: auto;
}

/* Note References in Text */
.footnote-ref,
.endnote-ref,
.note-ref {
  cursor: pointer;
  color: var(--color-primary, #2563eb);
  font-weight: 600;
  font-size: 0.75em;
  vertical-align: super;
  text-decoration: none;
  padding: 0 2px;
  border-radius: 4px;
  transition: background-color 0.2s;
  margin-left: 1px;
}

.footnote-ref:hover,
.endnote-ref:hover,
.note-ref:hover,
.footnote-ref.active,
.note-ref.active {
  background-color: rgba(37, 99, 235, 0.1);
  text-decoration: none;
}

/* ============================================================
   PREMIUM MOBILE MENU — immersive, tech-forward overlay
   A signature "command deck" experience: glass + gradient +
   animated grid, staggered reveals, gradient icon chips.
   Overrides the earlier .nav-mobile* base styles.
   ============================================================ */
:root {
  --mm-ease: cubic-bezier(0.16, 1, 0.3, 1);
  /* Mobile-menu accent palette. These default to the platform's own
     indigo/violet/pink, and every colour in the overlay below is expressed
     through them (the rgb triplets feed the many rgba() glows). A
     White_Label_Instance overrides this set from its Brand_Config — see
     brand_mobile_menu_style() — so the menu wears the instance's colours
     instead of the platform's. On the source platform nothing overrides them,
     so the computed result is unchanged. */
  --mm-indigo: #6366f1;
  --mm-violet: #8b5cf6;
  --mm-pink: #ec4899;
  --mm-indigo-rgb: 99, 102, 241;
  --mm-violet-rgb: 139, 92, 246;
}

/* ---- Overlay shell -------------------------------------------------- */
.nav-mobile {
  display: flex !important;
  position: fixed;
  inset: 0;
  z-index: var(--z-modal, 1000);
  flex-direction: column;
  gap: 0;
  padding: 0;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  overflow: hidden;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  background:
    radial-gradient(1100px 560px at 12% -12%, rgba(var(--mm-indigo-rgb), 0.30), transparent 60%),
    radial-gradient(900px 520px at 112% 8%, rgba(var(--mm-violet-rgb), 0.26), transparent 55%),
    linear-gradient(160deg, #0b0f1e 0%, #0d1226 45%, #090c19 100%);
  -webkit-backdrop-filter: blur(26px) saturate(1.35);
  backdrop-filter: blur(26px) saturate(1.35);
  transition: opacity 0.45s var(--mm-ease), visibility 0s linear 0.45s;
}

.nav-mobile.active {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  transition: opacity 0.45s var(--mm-ease), visibility 0s;
}

/* Faint technical grid, masked toward the center-top */
.nav-mobile::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
  background-size: 46px 46px;
  -webkit-mask-image: radial-gradient(circle at 50% 26%, #000 0%, transparent 80%);
  mask-image: radial-gradient(circle at 50% 26%, #000 0%, transparent 80%);
  opacity: 0;
  transition: opacity 0.7s ease 0.1s;
}
.nav-mobile.active::before { opacity: 1; }

/* Floating brand glow orb */
.nav-mobile::after {
  content: '';
  position: absolute;
  z-index: 0;
  width: 440px;
  height: 440px;
  left: 50%;
  top: 82%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(var(--mm-indigo-rgb), 0.38), transparent 66%);
  filter: blur(34px);
  pointer-events: none;
  animation: mmFloat 9s ease-in-out infinite;
}
@keyframes mmFloat {
  0%, 100% { transform: translate(-50%, -50%) translateY(0); }
  50%      { transform: translate(-50%, -50%) translateY(-28px); }
}

/* ---- Header --------------------------------------------------------- */
.nav-mobile-header {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px;
  margin: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.045), transparent);
}
/* Animated brand accent line beneath the header */
.nav-mobile-header::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--mm-indigo), var(--mm-violet), var(--mm-pink), transparent);
  background-size: 200% 100%;
  opacity: 0.85;
  animation: mmScan 4.5s linear infinite;
}
@keyframes mmScan {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Logo: always use the on-dark variant inside the dark overlay */
.nav-mobile-logo { display: flex; align-items: center; }
.nav-mobile-logo img { height: 42px; width: auto; filter: drop-shadow(0 4px 14px rgba(var(--mm-indigo-rgb), 0.35)); }
.nav-mobile-logo .nav-logo-dark,
[data-theme="light"] .nav-mobile-logo .nav-logo-dark { display: block !important; }
.nav-mobile-logo .nav-logo-light,
[data-theme="light"] .nav-mobile-logo .nav-logo-light { display: none !important; }

/* ---- Close button (rotating glass) ---------------------------------- */
.nav-mobile-close {
  position: relative;
  z-index: 2;
  align-self: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  line-height: 1;
  color: #fff;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  cursor: pointer;
  transition: transform 0.4s var(--mm-ease), background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
.nav-mobile-close:hover,
.nav-mobile-close:focus-visible {
  transform: rotate(90deg);
  background: linear-gradient(135deg, var(--mm-indigo), var(--mm-violet));
  border-color: transparent;
  box-shadow: 0 8px 26px rgba(var(--mm-indigo-rgb), 0.55);
  outline: none;
}

/* ---- Links list ----------------------------------------------------- */
.nav-mobile-links {
  position: relative;
  z-index: 2;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 18px 16px calc(24px + env(safe-area-inset-bottom, 0px));
  margin: 0;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.18) transparent;
}
.nav-mobile-links::-webkit-scrollbar { width: 6px; }
.nav-mobile-links::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.16); border-radius: 3px; }

/* ---- Link rows ------------------------------------------------------ */
.nav-mobile-link {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 13px 14px;
  border-radius: 14px;
  font-size: 1.02rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.86);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  text-align: inherit;
  overflow: hidden;
  transition: transform 0.35s var(--mm-ease), background 0.3s ease, border-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
}
/* Left accent bar reveal */
.nav-mobile-link::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%) scaleY(0);
  width: 3px;
  height: 58%;
  border-radius: 0 3px 3px 0;
  background: linear-gradient(180deg, var(--mm-indigo), var(--mm-violet));
  transition: transform 0.3s var(--mm-ease);
}
.nav-mobile-link:hover {
  transform: translateX(6px);
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(var(--mm-violet-rgb), 0.42);
  color: #fff;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
}
.nav-mobile-link:hover::before { transform: translateY(-50%) scaleY(1); }

.nav-mobile-link.active {
  color: #fff;
  background: linear-gradient(135deg, rgba(var(--mm-indigo-rgb), 0.24), rgba(var(--mm-violet-rgb), 0.14));
  border-color: rgba(var(--mm-violet-rgb), 0.5);
  box-shadow: inset 0 0 0 1px rgba(var(--mm-violet-rgb), 0.15), 0 6px 20px rgba(var(--mm-indigo-rgb), 0.2);
}
.nav-mobile-link.active::before { transform: translateY(-50%) scaleY(1); }

/* Icon becomes a gradient chip */
.nav-mobile-link svg.nav-mobile-icon {
  box-sizing: border-box;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  padding: 8px;
  border-radius: 10px;
  opacity: 1;
  color: #c7d2fe;
  background: linear-gradient(135deg, rgba(var(--mm-indigo-rgb), 0.18), rgba(var(--mm-violet-rgb), 0.12));
  border: 1px solid rgba(var(--mm-violet-rgb), 0.18);
  transition: background 0.3s ease, color 0.3s ease, transform 0.35s var(--mm-ease);
}
.nav-mobile-link:hover svg.nav-mobile-icon,
.nav-mobile-link.active svg.nav-mobile-icon {
  color: #fff;
  background: linear-gradient(135deg, var(--mm-indigo), var(--mm-violet));
  border-color: transparent;
  transform: scale(1.05);
}

/* ---- Separator ------------------------------------------------------ */
.nav-mobile-separator {
  height: 1px;
  border: none;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.12), transparent);
  margin: 8px 6px;
}

/* ---- Collapsible groups (Business / Explore) ------------------------ */
.nav-mobile-group-arrow {
  color: rgba(255, 255, 255, 0.7);
  flex-shrink: 0;
  width: 14px;
  height: 14px;
}
.nav-mobile-group-items {
  padding-left: 2.75rem;
  border-left: 1px solid rgba(255, 255, 255, 0.08);
  margin-left: 20px;
}
[dir="rtl"] .nav-mobile-group-items {
  padding-left: 0;
  padding-right: 2.75rem;
  border-left: none;
  border-right: 1px solid rgba(255, 255, 255, 0.08);
  margin-left: 0;
  margin-right: 20px;
}
.nav-mobile-sub {
  background: transparent !important;
  border: none !important;
  color: rgba(255, 255, 255, 0.72);
  padding: 10px 12px;
  font-weight: 500;
}
.nav-mobile-sub:hover {
  background: rgba(255, 255, 255, 0.05) !important;
  color: #fff;
  transform: translateX(4px);
}
.nav-mobile-sub::before { display: none; }

/* Explore accordion text tuned for the dark surface */
.nav-mobile-explore-group-title { color: rgba(255, 255, 255, 0.5); }
.nav-mobile-genre-link { color: rgba(255, 255, 255, 0.72); }
.nav-mobile-popular-title { color: rgba(255, 255, 255, 0.82); }
.nav-mobile-popular-card {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.07);
}

/* ---- Sign in / out CTA ---------------------------------------------- */
.nav-mobile-links .btn.btn-primary.btn-lg {
  margin-top: 14px;
  padding: 14px 1.5rem;
  border: none;
  border-radius: 14px;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.3px;
  color: #fff;
  background: linear-gradient(135deg, var(--mm-indigo), var(--mm-violet));
  box-shadow: 0 12px 32px rgba(var(--mm-indigo-rgb), 0.42);
  transition: transform 0.3s var(--mm-ease), box-shadow 0.3s ease;
}
.nav-mobile-links .btn.btn-primary.btn-lg:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 40px rgba(var(--mm-indigo-rgb), 0.55);
}

/* ---- Staggered entrance --------------------------------------------- */
.nav-mobile.active .nav-mobile-header {
  animation: mmHeaderIn 0.55s var(--mm-ease) both;
}
@keyframes mmHeaderIn {
  from { opacity: 0; transform: translateY(-14px); }
  to   { opacity: 1; transform: none; }
}

.nav-mobile.active .nav-mobile-links > * {
  opacity: 0;
  animation: mmItemIn 0.5s var(--mm-ease) forwards;
}
@keyframes mmItemIn {
  from { opacity: 0; transform: translateY(16px) scale(0.98); }
  to   { opacity: 1; transform: none; }
}
.nav-mobile.active .nav-mobile-links > *:nth-child(1)  { animation-delay: 0.10s; }
.nav-mobile.active .nav-mobile-links > *:nth-child(2)  { animation-delay: 0.14s; }
.nav-mobile.active .nav-mobile-links > *:nth-child(3)  { animation-delay: 0.18s; }
.nav-mobile.active .nav-mobile-links > *:nth-child(4)  { animation-delay: 0.22s; }
.nav-mobile.active .nav-mobile-links > *:nth-child(5)  { animation-delay: 0.26s; }
.nav-mobile.active .nav-mobile-links > *:nth-child(6)  { animation-delay: 0.30s; }
.nav-mobile.active .nav-mobile-links > *:nth-child(7)  { animation-delay: 0.34s; }
.nav-mobile.active .nav-mobile-links > *:nth-child(8)  { animation-delay: 0.38s; }
.nav-mobile.active .nav-mobile-links > *:nth-child(9)  { animation-delay: 0.42s; }
.nav-mobile.active .nav-mobile-links > *:nth-child(10) { animation-delay: 0.46s; }
.nav-mobile.active .nav-mobile-links > *:nth-child(11) { animation-delay: 0.50s; }
.nav-mobile.active .nav-mobile-links > *:nth-child(12) { animation-delay: 0.54s; }
.nav-mobile.active .nav-mobile-links > *:nth-child(n+13) { animation-delay: 0.58s; }

/* ---- RTL polish ----------------------------------------------------- */
[dir="rtl"] .nav-mobile-link:hover { transform: translateX(-6px); }
[dir="rtl"] .nav-mobile-link::before { left: auto; right: 0; border-radius: 3px 0 0 3px; }
[dir="rtl"] .nav-mobile-sub:hover { transform: translateX(-4px); }

/* ---- Respect reduced-motion ----------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .nav-mobile,
  .nav-mobile *,
  .nav-mobile::before,
  .nav-mobile::after {
    animation: none !important;
    transition-duration: 0.001s !important;
  }
}

/* ============================================================
   PROFESSIONAL HEADER — unified action-icon system (all sizes)
   One consistent "ghost" treatment for utility icons, the
   account avatar separated at the edge with a divider.
   Standard order:  [search] · [notifications] · [account]
   ============================================================ */
.main-nav .nav-actions {
  gap: 6px;
  align-items: center;
}

/* Global-standard order: search → notifications → account */
.main-nav .nav-actions .header-search-btn     { order: 0; }
.main-nav .nav-actions .nav-help-icon-desktop { order: 0; }
.main-nav .nav-actions .settings-dropdown      { order: 1; }
.main-nav .nav-actions .header-notif-dropdown  { order: 2; }
.main-nav .nav-actions .header-profile-dropdown,
.main-nav .nav-actions .header-account-guest { order: 3; }

/* Unified ghost icon buttons — bell + settings share ONE look */
.main-nav .header-notif-btn,
.main-nav .settings-dropdown-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: transparent;
  border: none;
  color: var(--text-secondary, #64748b);
  box-shadow: none;
  transition: background-color 0.2s ease, color 0.2s ease, transform 0.15s ease;
}
.main-nav .header-notif-btn:hover,
.main-nav .settings-dropdown-btn:hover,
.main-nav .header-notif-btn:focus-visible,
.main-nav .settings-dropdown-btn:focus-visible {
  background: rgba(var(--nav-accent-rgb), 0.12);
  color: var(--color-primary, #6366f1);
  border-color: transparent;
  outline: none;
}
.main-nav .header-notif-btn:active,
.main-nav .settings-dropdown-btn:active {
  transform: scale(0.92);
}
.main-nav .header-notif-btn svg,
.main-nav .settings-dropdown-btn svg {
  width: 21px;
  height: 21px;
}

/* Account cluster: subtle divider then the avatar at the edge */
.main-nav .nav-actions .header-profile-dropdown {
  display: flex;
  align-items: center;
  gap: 0;
}
.main-nav .nav-actions .header-profile-dropdown::before {
  content: '';
  flex-shrink: 0;
  width: 1px;
  height: 22px;
  margin-right: 8px;
  background: var(--border-color, rgba(148, 163, 184, 0.35));
}
.main-nav .header-profile-btn {
  width: 40px;
  height: 40px;
  border: 2px solid rgba(var(--nav-accent-rgb), 0.28);
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.12);
  transition: border-color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
}
.main-nav .header-profile-btn:hover {
  border-color: var(--color-primary, #6366f1);
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(var(--nav-accent-rgb), 0.3);
}

/* The guest account button stays a ghost icon (no ring) */
.main-nav .header-account-btn.header-profile-btn {
  border: none;
  box-shadow: none;
}

/* Unread badge stays crisp on the ghost bell */
.main-nav .header-notif-badge {
  border: 2px solid var(--bg-primary, #fff);
}

/* RTL: divider flips to the other side of the avatar */
[dir="rtl"] .main-nav .nav-actions .header-profile-dropdown::before {
  margin-right: 0;
  margin-left: 8px;
}

/* The Arabic header mirrors the action cluster with `flex-direction: row-reverse`
   while .nav-actions itself keeps `direction: ltr` (it drives order physically).
   The divider is the dropdown's ::before — physically the button's LEFT edge — so
   with the cluster mirrored to the left it landed on the outer edge, to the left
   of the avatar, instead of between the avatar and the search icon beside it.
   Reverse the dropdown's own flow so ::before moves to the avatar's inner side,
   and keep the 8px gap on that side (self-contained so it does not lean on the
   generic [dir="rtl"] rule above). The dropdown menu is position:absolute, so
   reordering the flex children does not move it. */
html[lang="ar"] .main-nav .nav-actions .header-profile-dropdown {
  flex-direction: row-reverse;
}
html[lang="ar"] .main-nav .nav-actions .header-profile-dropdown::before {
  margin-right: 0;
  margin-left: 8px;
}

/* ============================================================
   HEADER SEARCH + SETTINGS-IN-PROFILE (mobile)
   - Search: leftmost utility action, ghost style, routes to
     the library search.
   - When authenticated on mobile, the standalone settings gear
     is hidden and Language + Theme live inside the profile menu.
   ============================================================ */

/* Search: a utility action on ALL breakpoints (leftmost of the cluster) */
.header-search-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  color: var(--text-secondary, #64748b);
  background: transparent;
  border: none;
  cursor: pointer;
  flex-shrink: 0;
  order: 0;
  transition: background-color 0.2s ease, color 0.2s ease, transform 0.15s ease;
}
.main-nav .header-search-btn:hover,
.main-nav .header-search-btn:focus-visible {
  background: rgba(var(--nav-accent-rgb), 0.12);
  color: var(--color-primary, #6366f1);
  outline: none;
}
.main-nav .header-search-btn:active { transform: scale(0.92); }

/* Standalone gear folds away on ALL sizes — language/theme now live inside
   the account menu (profile menu when logged in, guest menu when logged out) */
.main-nav .settings-dropdown { display: none !important; }

/* Standalone desktop help icon also folds into the account menu */
.main-nav .nav-help-icon-desktop { display: none !important; }

/* Language + Theme block lives inside the account menu on all sizes */
.profile-settings-only-mobile { display: block; }

/* Layout of the folded settings block so it aligns with menu items */
.header-profile-settings { padding: 4px 16px 10px; }
.header-profile-settings .settings-section { padding: 8px 0; }
.header-profile-settings .settings-section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--text-secondary, #6b7280);
  margin-bottom: 8px;
}
.header-profile-settings .settings-section-title svg { opacity: 0.7; }
.header-profile-settings .settings-lang-options {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.header-profile-settings .settings-lang-option {
  display: flex;
  align-items: center;
  padding: 8px 10px;
  border-radius: 8px;
  color: var(--text-primary, #374151);
  font-size: 14px;
  transition: background-color 0.2s ease;
}
.header-profile-settings .settings-lang-option:hover { background: var(--bg-secondary, #f3f4f6); }
.header-profile-settings .settings-lang-option.active { color: var(--color-primary, #6366f1); font-weight: 600; }
.header-profile-settings .settings-lang-option .lang-name { flex: 1; }

/* On very small screens the profile menu is a full-width fixed panel;
   let it scroll if the folded settings make it tall */
@media (max-width: 600px) {
  .header-profile-menu {
    max-height: calc(100vh - 90px);
    overflow-y: auto;
  }
}

/* ============================================================
   GUEST ACCOUNT MENU (logged out) — person icon → Sign in +
   Create account + Language + Theme. Mobile-only; mirrors the
   logged-in profile menu. Desktop keeps the gear + Sign in btn.
   ============================================================ */

/* Guest account menu shown on all sizes; rightmost action. On desktop it
   sits next to the (kept) Sign in button, on mobile it's the last icon. */
.header-account-guest { display: flex; order: 3; }

/* The guest button is a ghost icon, consistent with search/bell */
.header-account-btn.header-profile-btn {
  background: transparent;
  border: none;
  color: var(--text-secondary, #64748b);
  box-shadow: none;
}
.header-account-btn.header-profile-btn:hover {
  background: rgba(var(--nav-accent-rgb), 0.12);
  color: var(--color-primary, #6366f1);
  transform: none;
  box-shadow: none;
}

/* Guest menu header avatar shows a person glyph on the brand gradient */
.header-account-guest .header-profile-menu-avatar svg { color: #fff; }

/* Emphasise the Sign in entry */
.account-signin-item {
  color: var(--color-primary, #6366f1) !important;
  font-weight: 600;
}
.account-signin-item svg { opacity: 1 !important; color: var(--color-primary, #6366f1); }

/* ============================================================
   PREMIUM MOBILE MENU — LIGHT THEME VARIANT
   Bright frosted-glass panel that mirrors light mode, keeping
   the same layout, gradients and animations as the dark one.
   ============================================================ */
[data-theme="light"] .nav-mobile {
  background:
    radial-gradient(1100px 560px at 12% -12%, rgba(var(--mm-indigo-rgb), 0.16), transparent 60%),
    radial-gradient(900px 520px at 112% 8%, rgba(var(--mm-violet-rgb), 0.14), transparent 55%),
    linear-gradient(160deg, #ffffff 0%, #f5f6ff 45%, #eef0fb 100%);
  -webkit-backdrop-filter: blur(26px) saturate(1.2);
  backdrop-filter: blur(26px) saturate(1.2);
}

/* Technical grid: darken the lines so they read on a light surface */
[data-theme="light"] .nav-mobile::before {
  background-image:
    linear-gradient(rgba(15, 23, 42, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15, 23, 42, 0.05) 1px, transparent 1px);
}

/* Softer brand glow on light */
[data-theme="light"] .nav-mobile::after {
  background: radial-gradient(circle, rgba(var(--mm-indigo-rgb), 0.20), transparent 66%);
}

/* Header divider + glass */
[data-theme="light"] .nav-mobile-header {
  border-bottom-color: rgba(15, 23, 42, 0.08);
  background: linear-gradient(180deg, rgba(var(--mm-indigo-rgb), 0.05), transparent);
}

/* Logo: use the on-LIGHT variant inside the bright panel */
[data-theme="light"] .nav-mobile-logo .nav-logo-dark { display: none !important; }
[data-theme="light"] .nav-mobile-logo .nav-logo-light { display: block !important; }
[data-theme="light"] .nav-mobile-logo img { filter: drop-shadow(0 4px 12px rgba(var(--mm-indigo-rgb), 0.2)); }

/* Close button */
[data-theme="light"] .nav-mobile-close {
  color: #1e293b;
  background: rgba(15, 23, 42, 0.04);
  border-color: rgba(15, 23, 42, 0.12);
}
[data-theme="light"] .nav-mobile-close:hover,
[data-theme="light"] .nav-mobile-close:focus-visible {
  color: #fff;
  background: linear-gradient(135deg, var(--mm-indigo), var(--mm-violet));
  border-color: transparent;
}

/* Link rows */
[data-theme="light"] .nav-mobile-link {
  color: #1e293b;
  background: rgba(15, 23, 42, 0.025);
  border-color: rgba(15, 23, 42, 0.07);
}
[data-theme="light"] .nav-mobile-link:hover {
  background: #fff;
  border-color: rgba(var(--mm-violet-rgb), 0.35);
  color: #0f172a;
  box-shadow: 0 8px 24px rgba(var(--mm-indigo-rgb), 0.12);
}
[data-theme="light"] .nav-mobile-link.active {
  color: #4338ca;
  background: linear-gradient(135deg, rgba(var(--mm-indigo-rgb), 0.12), rgba(var(--mm-violet-rgb), 0.08));
  border-color: rgba(var(--mm-violet-rgb), 0.4);
  box-shadow: inset 0 0 0 1px rgba(var(--mm-violet-rgb), 0.12), 0 6px 18px rgba(var(--mm-indigo-rgb), 0.12);
}

/* Icon chips */
[data-theme="light"] .nav-mobile-link svg.nav-mobile-icon {
  color: var(--mm-indigo);
  background: linear-gradient(135deg, rgba(var(--mm-indigo-rgb), 0.14), rgba(var(--mm-violet-rgb), 0.10));
  border-color: rgba(var(--mm-violet-rgb), 0.2);
}

/* Separators, sub-groups and accordion text on light */
[data-theme="light"] .nav-mobile-separator {
  background: linear-gradient(90deg, transparent, rgba(15, 23, 42, 0.12), transparent);
}
[data-theme="light"] .nav-mobile-group-items {
  border-left-color: rgba(15, 23, 42, 0.1);
}
[dir="rtl"][data-theme="light"] .nav-mobile-group-items {
  border-right-color: rgba(15, 23, 42, 0.1);
}
[data-theme="light"] .nav-mobile-sub { color: rgba(30, 41, 59, 0.78); }
[data-theme="light"] .nav-mobile-sub:hover { background: rgba(15, 23, 42, 0.04) !important; color: #0f172a; }
[data-theme="light"] .nav-mobile-group-arrow { color: rgba(30, 41, 59, 0.5); }
[data-theme="light"] .nav-mobile-explore-group-title { color: rgba(30, 41, 59, 0.5); }
[data-theme="light"] .nav-mobile-genre-link { color: rgba(30, 41, 59, 0.78); }
[data-theme="light"] .nav-mobile-popular-title { color: rgba(30, 41, 59, 0.85); }
[data-theme="light"] .nav-mobile-popular-card {
  background: rgba(15, 23, 42, 0.03);
  border-color: rgba(15, 23, 42, 0.08);
}

/* ============================================================
   HEADER CSS TOOLTIPS
   Styled tooltips for the header action icons, replacing the
   native browser title tooltips. Enabled only where a real
   hover pointer exists (desktop), so touch taps aren't affected.
   aria-label still carries the accessible name.
   ============================================================ */
@media (hover: hover) and (pointer: fine) {
  .nav-tooltip { position: relative; }

  /* The avatar button clips its contents (overflow:hidden); the avatar image
     is already self-rounded, so allow overflow here so the tooltip can show */
  .header-profile-btn.nav-tooltip { overflow: visible; }

  .nav-tooltip::after {
    content: attr(data-tooltip);
    position: absolute;
    top: calc(100% + 9px);
    left: 50%;
    transform: translateX(-50%) translateY(-4px);
    padding: 5px 10px;
    border-radius: 8px;
    background: #0f172a;
    color: #fff;
    font-size: 12px;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
    letter-spacing: 0.2px;
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.28);
    opacity: 0;
    pointer-events: none;
    z-index: 1002;
    transition: opacity 0.16s ease, transform 0.16s ease;
  }

  /* Little arrow */
  .nav-tooltip::before {
    content: '';
    position: absolute;
    top: calc(100% + 3px);
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-bottom-color: #0f172a;
    opacity: 0;
    pointer-events: none;
    z-index: 1002;
    transition: opacity 0.16s ease;
  }

  .nav-tooltip:hover::after,
  .nav-tooltip:focus-visible::after {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
  .nav-tooltip:hover::before,
  .nav-tooltip:focus-visible::before {
    opacity: 1;
  }

  /* Light theme: darker-on-light is fine, but soften the shadow */
  [data-theme="light"] .nav-tooltip::after {
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.18);
  }
}

/* ============================================================
   DARK THEME — unify dashboard & community page background
   These transparent-nav pages fell back to the lighter
   --bg-secondary (#1e293b). Match the darker --bg-primary
   (#0f172a) used by library / authors / timeline so the dark
   surface is consistent across the app.
   ============================================================ */
[data-theme="dark"] .dashboard,
[data-theme="dark"] .community-page {
  background-color: var(--bg-primary);
}
[data-theme="dark"] .community-page {
  min-height: 100vh;
}
/* Cover any area beyond the page container (short content) */
[data-theme="dark"] body:has(.dashboard),
[data-theme="dark"] body:has(.community-page) {
  background-color: var(--bg-primary);
}

/* ============================================================
   SHARED APP PRELOADER (.mib-preloader)
   Branded full-page loader — the book logo "fills up" with the
   brand gradient — for the main app pages (Dashboard, Library,
   Authors, Timeline, Community). Included via includes/preloader.php.
   ============================================================ */
.mib-preloader {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  background: var(--bg-primary, #0f172a);
  opacity: 1;
  transition: opacity 0.5s ease;
}
.mib-preloader.is-hidden {
  opacity: 0;
  pointer-events: none;
}

/* Book silhouette (inline SVG, guaranteed transparent) used as a mask;
   the brand gradient fill rises inside it while the empty shape stays visible */
.mib-preloader-logo {
  position: relative;
  width: 88px;
  height: 88px;
  background: rgba(148, 163, 184, 0.4);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 6.2C10.2 5 7.7 4.4 5.4 4.4c-1.2 0-2.4.2-3.4.5v13.9c1-.3 2.2-.5 3.4-.5 2.3 0 4.8.6 6.6 1.8V6.2zm0 0C13.8 5 16.3 4.4 18.6 4.4c1.2 0 2.4.2 3.4.5v13.9c-1-.3-2.2-.5-3.4-.5-2.3 0-4.8.6-6.6 1.8V6.2z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 6.2C10.2 5 7.7 4.4 5.4 4.4c-1.2 0-2.4.2-3.4.5v13.9c1-.3 2.2-.5 3.4-.5 2.3 0 4.8.6 6.6 1.8V6.2zm0 0C13.8 5 16.3 4.4 18.6 4.4c1.2 0 2.4.2 3.4.5v13.9c-1-.3-2.2-.5-3.4-.5-2.3 0-4.8.6-6.6 1.8V6.2z'/%3E%3C/svg%3E") center / contain no-repeat;
  /* The glow and the rising fill below were the platform's indigo/violet as raw
     literals, so the loader every app page shows first stayed purple on a branded
     instance — the comment above already called it "the brand gradient". The
     defaults are those same literals, so the source platform is unchanged. */
  filter: drop-shadow(0 6px 22px rgba(var(--nav-accent-rgb, 99, 102, 241), 0.4));
  animation: mibPreloaderPulse 1.6s ease-in-out infinite;
}
.mib-preloader-logo::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 0;
  background: linear-gradient(180deg, var(--nav-accent-2, #8b5cf6) 0%, var(--nav-accent, #6366f1) 100%);
  animation: mibPreloaderFill 1.8s ease-in-out infinite;
}
@keyframes mibPreloaderFill {
  0%, 100% { height: 0; }
  50%      { height: 100%; }
}
@keyframes mibPreloaderPulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.05); }
}

.mib-preloader-text {
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.3px;
  color: var(--text-secondary, #94a3b8);
}
.mib-preloader-dots::after {
  content: '';
  animation: mibPreloaderDots 1.4s steps(4, end) infinite;
}
@keyframes mibPreloaderDots {
  0%   { content: ''; }
  25%  { content: '.'; }
  50%  { content: '..'; }
  75%  { content: '...'; }
  100% { content: ''; }
}

@media (prefers-reduced-motion: reduce) {
  .mib-preloader-logo,
  .mib-preloader-logo::after,
  .mib-preloader-dots::after {
    animation-duration: 0.001s;
  }
  .mib-preloader-logo::after { height: 100%; }
}

/* ==========================================================================
   Footer: instance brand mark + platform credit
   ==========================================================================
   A generated instance shows its own logo in the footer brand slot, then
   credits the platform it was built on beneath it. The credit only renders
   when includes/config.php defines the vendor constants, which only happens
   in an instance — see brand_vendor_attribution(). */

/* The generic `.footer-logo img` rule pins a height (32px / 80px) and would
   otherwise win on specificity over a single class, which squashed the
   publisher mark. Scope this to `.footer-logo .footer-logo-brand` so the
   intrinsic aspect ratio survives inside a 220x90 box. */
.footer-logo .footer-logo-brand,
img.footer-logo-brand {
    display: block;
    max-height: 90px;
    max-width: min(100%, 220px);
    width: auto;
    height: auto;
    object-fit: contain;
}

/* Theme swap for the publisher logo, when the instance supplies a dark mark. footer.php emits
   both, one .nav-logo-light and one .nav-logo-dark. Re-stated at (0,2,0) AFTER the sizing rule
   above so the generic `.footer-logo-brand{display:block}` cannot win on source order and show
   both at once — the same trap the .footer-powered-logo swap already fixes. Default (no
   [data-theme]) shows the dark mark, matching the platform's dark-first default. */
.footer-logo-brand.nav-logo-dark {
    display: block;
}

.footer-logo-brand.nav-logo-light {
    display: none;
}

[data-theme="light"] .footer-logo-brand.nav-logo-dark {
    display: none;
}

[data-theme="light"] .footer-logo-brand.nav-logo-light {
    display: block;
}

.footer-powered {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.375rem;
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--border-color);
}

.footer-powered-label {
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.footer-powered-link {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    /* Slightly muted so the credit reads as attribution, not as the site's own
       branding, and lifts on interaction to show it is a link. */
    opacity: 0.85;
    transition: opacity 0.18s ease;
}

.footer-powered-link:hover,
.footer-powered-link:focus-visible {
    opacity: 1;
}

.footer-powered-logo {
    display: block;
    max-height: 2.25rem;
    max-width: min(100%, 11rem);
    width: auto;
    height: auto;
}

/* Theme swap for the platform credit mark, re-stated at (0,2,0).
   includes/footer.php emits BOTH variants — one .nav-logo-dark, one
   .nav-logo-light — and relies on the generic toggles near the top of this file
   to show one. But `.footer-powered-logo { display: block }` above is (0,1,0),
   the same specificity as `.nav-logo-light { display: none }`, and sits LATER in
   the file, so it won on source order and un-hid the light variant: the credit
   logo rendered twice, side by side, in both themes. Raising these to two
   classes settles it regardless of source order. Same failure mode the
   .nav-logo-picture block below was written to fix. */
.footer-powered-logo.nav-logo-dark {
    display: block;
}

.footer-powered-logo.nav-logo-light {
    display: none;
}

[data-theme="light"] .footer-powered-logo.nav-logo-dark {
    display: none;
}

[data-theme="light"] .footer-powered-logo.nav-logo-light {
    display: block;
}

.footer-powered-name {
    font-weight: 600;
    color: var(--text-primary);
}

.footer-powered-tagline {
    font-size: 0.75rem;
    line-height: 1.5;
    color: var(--text-muted);
}

[dir="rtl"] .footer-powered {
    align-items: flex-start;
}

@media (max-width: 48rem) {
    .footer-powered {
        align-items: center;
        text-align: center;
    }
}

/* Instance brand mark.
   Not paired with .nav-logo-dark/.nav-logo-light because Brand_Config collects a
   single image, so one mark serves both themes and must stay visible in each.

   This class is on TWO elements (see includes/header.php): the mark in the top
   bar, and the mark in the mobile slide-out menu's own header. They are separate
   surfaces with separate sizing, so only the shared, size-agnostic behaviour
   belongs here. */
.nav-logo-brand {
    display: block;
    width: auto;
    height: auto;
    object-fit: contain;
}

/* <picture> wrapper, present only when the instance supplies a separate mobile
   mark. It becomes the flex item in .nav-logo, so it has to carry the flex
   behaviour the <img> would otherwise have had — without min-width:0 a wide
   wordmark refuses to shrink and pushes the hamburger off the bar. */
.nav-logo-picture {
    display: flex;
    align-items: center;
    min-width: 0;
}

/* Light/dark theme swap for the instance brand logo, when the instance supplies
   a dark-theme mark. includes/header.php emits two <picture> wrappers — one
   .nav-logo-light, one .nav-logo-dark — and one is shown per theme. The generic
   .nav-logo-light / .nav-logo-dark toggles above sit earlier in this file, and
   .nav-logo-picture (display:flex) would beat them by source order at equal
   specificity, keeping both visible — so the swap is re-stated here at (0,2,0),
   one class more specific, so it wins regardless of order. Default (no
   [data-theme]) shows the dark mark, mirroring the platform wordmark's default;
   theme.js sets the attribute before paint, so the default rarely paints. */
.nav-logo-picture.nav-logo-dark { display: flex; }
.nav-logo-picture.nav-logo-light { display: none; }
[data-theme="light"] .nav-logo-picture.nav-logo-dark { display: none; }
[data-theme="light"] .nav-logo-picture.nav-logo-light { display: flex; }

/* Size caps for the TOP BAR only.
   An uploaded mark may be a wide wordmark or a small square emblem, so both axes
   are capped and neither is stretched. The caps are custom properties so a
   generated instance can set its own header logo height (Instance_Config
   layout.headerLogoHeight, emitted by includes/header.php); the fallbacks are the
   historic values, so the source platform and every instance that sets nothing
   render exactly as before.

   Scoped to .nav-logo rather than left on .nav-logo-brand, because the mobile
   menu PANEL carries the same class and was therefore being resized by a setting
   that names the header. The panel sizes its own logo (.nav-mobile-logo img) with
   a drop-shadow to match its dark backdrop; a max-height inherited from the top
   bar squashed it below that — visibly so at smaller configured heights — and at
   any value replaced a size chosen for that panel with one chosen for a nav bar.

   The WIDTH cap has to scale with the height, not stay fixed: with only the
   height raised, a wide wordmark hits the 13rem width cap first and never grows,
   so the setting would appear to do nothing on precisely the marks people most
   often want bigger. Height leads, width follows the aspect ratio — which is why
   width is `auto` above and only the cap moves. */
.nav-logo .nav-logo-brand {
    max-height: var(--brand-nav-logo-h, 3rem);
    max-width: min(100%, var(--brand-nav-logo-w, 13rem));
}

@media (max-width: 48rem) {
    .nav-logo .nav-logo-brand {
        max-height: var(--brand-nav-logo-h-sm, 2.5rem);
        max-width: min(100%, var(--brand-nav-logo-w-sm, 10rem));
    }
}

/* ============================================
   READING MODES SECTION
   ============================================
   Deliberately built from the same tokens as .feature-card rather than the
   landing.css lp- classes, which belong to the generated-instance landing page
   and carry a different visual language. */

.reading-modes-section {
  padding: var(--spacing-3xl) var(--spacing-md);
  background-color: var(--section-alt-bg);
  position: relative;
}

.reading-modes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
  gap: var(--spacing-xl);
  max-width: 1300px;
  margin: 0 auto;
}

.reading-mode-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: start;
  background-color: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: var(--spacing-xl);
  transition: transform var(--transition-normal), box-shadow var(--transition-normal), border-color var(--transition-normal);
}

.reading-mode-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: var(--color-primary);
}

.reading-mode-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
  border-radius: var(--radius-lg);
  margin-bottom: var(--spacing-lg);
  color: white;
  flex: none;
}

.reading-mode-title {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semibold);
  margin-bottom: var(--spacing-sm);
  color: var(--text-primary);
}

.reading-mode-description {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  line-height: var(--line-height-relaxed);
  /* Pushes the link to the card foot so every card's CTA aligns, including the
     third card which has no link at all. */
  flex: 1 1 auto;
  margin: 0 0 var(--spacing-lg);
}

.reading-mode-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-primary);
  text-decoration: none;
  transition: gap var(--transition-normal);
}

.reading-mode-link:hover {
  gap: 10px;
  text-decoration: underline;
}

/* The arrow points along the reading direction. */
[dir="rtl"] .reading-mode-link svg {
  transform: scaleX(-1);
}

/* ============================================
   AUTHORS TEASER SECTION
   ============================================ */

.authors-teaser-section {
  padding: var(--spacing-3xl) var(--spacing-md);
  background-color: var(--section-alt-bg);
  position: relative;
}

/* Fixed column counts rather than auto-fit.
 *
 * auto-fit packed as many ~11rem cards as fitted, which at desktop width came
 * out as six across and left the last two stranded beside a wide gap. Eight
 * cards divide evenly by two and four, so these counts always produce full
 * rows: 4x2 on mobile, 2x4 from 768px up.
 *
 * The grid is also narrower than the 1300px used by the wider sections, because
 * a card holding an 88px portrait, a name and a count looks stranded in a
 * 325px column. */
.authors-teaser-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--spacing-lg);
  max-width: 62rem;
  margin: 0 auto;
}

@media (min-width: 768px) {
  .authors-teaser-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.author-teaser-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-lg) var(--spacing-md);
  background-color: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  text-align: center;
  text-decoration: none;
  transition: transform var(--transition-normal), box-shadow var(--transition-normal), border-color var(--transition-normal);
}

.author-teaser-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: var(--color-primary);
}

.author-teaser-portrait {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  object-fit: cover;
  background-color: var(--bg-primary);
  border: 2px solid transparent;
  transition: border-color var(--transition-normal);
}

.author-teaser-card:hover .author-teaser-portrait {
  border-color: var(--color-primary);
}

/* Stand-in for an author with no portrait on file, so the grid keeps a single
   rhythm instead of collapsing rows of different heights. */
.author-teaser-initial {
  display: grid;
  place-items: center;
  width: 88px;
  height: 88px;
  border-radius: 50%;
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  color: white;
  background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
}

.author-teaser-name {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
  margin: 0;
  line-height: 1.3;
  /* Two lines' worth of space whether or not the name needs it, so the book
     count sits on one baseline across the row. Names like "Abbas Mahmoud
     al-Aqqad" wrap while "Leo Tolstoy" does not, which otherwise left the
     counts stepping up and down. */
  min-height: 2.6em;
  display: flex;
  align-items: center;
  justify-content: center;
}

.author-teaser-count {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  margin: 0;
}

/* ============================================================
   MOBILE MENU — SLIDING DRAWER VARIANT
   ============================================================
   An alternative to the full-page overlay, selected per instance
   (layout.menuStyle = "drawer"). The panel slides in from the
   inline-start edge over a dimmed backdrop — a different motion
   from the platform's full-screen fade — and leaves the page
   visible behind it. Everything is scoped under .nav-mobile--drawer
   so the default overlay and the source platform are untouched.

   The open/close is still driven by the .active class that
   main.js toggles; only the geometry and transition change here. */

/* Dimmed backdrop behind the drawer. Present only in drawer mode
   (header.php emits it), shown while the menu is open. */
.nav-mobile-backdrop {
    position: fixed;
    inset: 0;
    z-index: calc(var(--z-modal, 1000) - 1);
    background: rgba(9, 12, 25, 0.5);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.35s ease;
}
.nav-mobile-backdrop.is-visible {
    opacity: 1;
    pointer-events: auto;
}

/* Panel: anchored to the inline-start edge, sized as a drawer, hidden
   off-canvas until active. Overrides the overlay's inset:0 full cover. */
.nav-mobile.nav-mobile--drawer {
    inset: 0 auto 0 0;
    width: min(86vw, 360px);
    max-width: 360px;
    border-inline-end: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 0 60px rgba(0, 0, 0, 0.5);
    transform: translateX(-102%);
    /* A springy slide rather than a fade. */
    transition: transform 0.42s cubic-bezier(0.16, 1, 0.3, 1), visibility 0s linear 0.42s;
}
[dir="rtl"] .nav-mobile.nav-mobile--drawer {
    inset: 0 0 0 auto;
    border-inline-end: none;
    border-inline-start: 1px solid rgba(255, 255, 255, 0.08);
    transform: translateX(102%);
}
.nav-mobile.nav-mobile--drawer.active {
    transform: translateX(0);
    transition: transform 0.42s cubic-bezier(0.16, 1, 0.3, 1), visibility 0s;
}

/* The drawer does not need the floating brand orb (it is a narrow panel). */
.nav-mobile--drawer::after { display: none; }

/* The staggered link entrance still reads well; keep it, just a touch quicker
   so it finishes with the slide. */
.nav-mobile--drawer.active .nav-mobile-links > * {
    animation-duration: 0.42s;
}

@media (prefers-reduced-motion: reduce) {
    .nav-mobile.nav-mobile--drawer,
    .nav-mobile.nav-mobile--drawer.active { transition-duration: 0.001s; }
    .nav-mobile-backdrop { transition-duration: 0.001s; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   QURAN RUKU MARKERS (ركوع)
   ─────────────────────────────────────────────────────────────────────────
   Thematic dividers in the Quran that group ayahs into topically-related
   sections. Styled as circular badges with the Arabic letter ع (ayn)
   followed by the ruku number in Arabic-Indic digits.
   EPUB reference: <span class="ruku-marker" epub:type="pagebreak">ع١</span>
   ═══════════════════════════════════════════════════════════════════════════ */

/* Ruku "seal" — set in Cairo (geometric sans) to distinguish this scholarly
   navigational marker from the Amiri Quran calligraphy of the divine ayah text.
   Soft gradient medallion with an inner ring and a light lift shadow. */
.content-body .ruku-marker {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #14512f;
    margin: 0 0.45em;
    font-size: 0.8em;
    font-weight: 700;
    vertical-align: middle;
    border: 1.5px solid #7fae95;
    border-radius: 50%;
    width: 2.1em;
    height: 2.1em;
    line-height: 1;
    text-align: center;
    font-family: 'Cairo', 'Noto Kufi Arabic', 'Tajawal', 'Traditional Arabic', sans-serif;
    background:
        radial-gradient(circle at 30% 25%, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0) 62%),
        linear-gradient(160deg, rgba(23, 92, 58, 0.14), rgba(23, 92, 58, 0.05));
    box-shadow:
        0 1px 3px rgba(20, 81, 47, 0.18),
        inset 0 0 0 2px rgba(255, 255, 255, 0.35);
    letter-spacing: 0;
    user-select: none;
    -webkit-user-select: none;
    flex-shrink: 0;
}

/* Dark mode ruku markers */
[data-theme="dark"] .content-body .ruku-marker {
    color: #9fe0bd;
    border-color: #3f6d57;
    background:
        radial-gradient(circle at 30% 25%, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0) 62%),
        linear-gradient(160deg, rgba(126, 200, 164, 0.18), rgba(126, 200, 164, 0.06));
    box-shadow:
        0 1px 4px rgba(0, 0, 0, 0.4),
        inset 0 0 0 2px rgba(126, 200, 164, 0.10);
}

/* Sepia/reading mode ruku markers */
[data-theme="sepia"] .content-body .ruku-marker {
    color: #5a3e1b;
    border-color: #c1a375;
    background:
        radial-gradient(circle at 30% 25%, rgba(255, 255, 255, 0.40), rgba(255, 255, 255, 0) 62%),
        linear-gradient(160deg, rgba(90, 62, 27, 0.13), rgba(90, 62, 27, 0.05));
    box-shadow:
        0 1px 3px rgba(90, 62, 27, 0.18),
        inset 0 0 0 2px rgba(255, 252, 245, 0.40);
}

/* High contrast mode ruku markers */
[data-theme="high-contrast"] .content-body .ruku-marker {
    color: #00d4ff;
    border-color: #00d4ff;
    background: rgba(0, 212, 255, 0.12);
    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.6);
}

/* ══════════════════════════════════════════════════════════════════════════
   QURAN JUZ MARKERS (الجزء)
   ─────────────────────────────────────────────────────────────────────────
   The Quran is divided into 30 Juz (parts). These markers appear between
   ayahs to indicate the start of a new Juz. Styled as a centered ornamental
   divider with decorative elements, following traditional Mushaf conventions.
   EPUB reference: <div class="juz-marker" epub:type="pagebreak">الجزء ٢</div>
   ═══════════════════════════════════════════════════════════════════════════ */

.content-body .juz-marker {
    text-align: center;
    margin: 2em 0;
    padding: 0.8em 0;
    font-family: 'Amiri Quran', 'Noto Naskh Arabic', 'Traditional Arabic', 'Scheherazade New', serif;
    font-size: 1.1em;
    font-weight: 700;
    color: #1a5c3a;
    letter-spacing: 0.05em;
    user-select: none;
    -webkit-user-select: none;
    /* Subtle decorative border top and bottom */
    border-top: 1px solid rgba(143, 184, 163, 0.3);
    border-bottom: 1px solid rgba(143, 184, 163, 0.3);
}

/* Dark mode Juz markers */
[data-theme="dark"] .content-body .juz-marker {
    color: #7ec8a4;
    border-top-color: rgba(59, 98, 81, 0.5);
    border-bottom-color: rgba(59, 98, 81, 0.5);
}

/* Sepia mode Juz markers */
[data-theme="sepia"] .content-body .juz-marker {
    color: #5a3e1b;
    border-top-color: rgba(196, 169, 125, 0.5);
    border-bottom-color: rgba(196, 169, 125, 0.5);
}

/* High contrast mode Juz markers */
[data-theme="high-contrast"] .content-body .juz-marker {
    color: #00d4ff;
    border-top-color: rgba(0, 212, 255, 0.5);
    border-bottom-color: rgba(0, 212, 255, 0.5);
}

/* ═══════════════════════════════════════════════════════════════════════════
   QURAN BISMILLAH (بِسۡمِ اللّٰهِ الرَّحۡمٰنِ الرَّحِيۡمِ)
   ─────────────────────────────────────────────────────────────────────────
   The Basmallah appears at the start of every Surah (except At-Tawbah).
   Styled as a centered, elevated element with traditional calligraphic
   presence — larger, bolder, and visually separated from the ayah text.
   EPUB reference: <div class="bismillah" dir="rtl">بِسمِ اللّٰهِ...</div>
   ═══════════════════════════════════════════════════════════════════════════ */

.content-body .bismillah {
    text-align: center;
    margin: 0.5em 0 1.5em 0;
    padding: 0.8em 0;
    font-family: 'Amiri Quran', 'Noto Naskh Arabic', 'Traditional Arabic', 'Scheherazade New', serif;
    font-size: 1.35em;
    font-weight: 700;
    color: #1a5c3a;
    line-height: 2;
    letter-spacing: 0.01em;
    user-select: none;
    -webkit-user-select: none;
}

/* Dark mode Bismillah */
[data-theme="dark"] .content-body .bismillah {
    color: #7ec8a4;
}

/* Sepia mode Bismillah */
[data-theme="sepia"] .content-body .bismillah {
    color: #5a3e1b;
}

/* High contrast mode Bismillah */
[data-theme="high-contrast"] .content-body .bismillah {
    color: #00d4ff;
}

/* ═══════════════════════════════════════════════════════════════════════════
   QURAN INDEX PAGES (فهرس السور / فهرس الاجزاء)
   ─────────────────────────────────────────────────────────────────────────
   The first two chapters of the Quran book are navigational indexes:
   a surah index and a juz index. Each entry is a link to the corresponding
   surah/juz chapter. Styled as a clean, right-aligned list with subtle
   separators, following the Quran green design language.
   EPUB reference: <div class="main-wrapper"><h1>فهرس السور</h1>
                   <div class="index-list"><div class="index-item">
                   <a class="index-link" href="...">…</a></div></div></div>
   ═══════════════════════════════════════════════════════════════════════════ */

.content-body .main-wrapper {
    text-align: right;
    direction: rtl;
}

.content-body .main-wrapper > h1 {
    text-align: center;
    font-family: 'Amiri Quran', 'Noto Naskh Arabic', 'Traditional Arabic', serif;
    font-size: 1.6em;
    font-weight: 700;
    color: #1a5c3a;
    margin: 0.2em 0 0.8em 0;
    padding-bottom: 0.5em;
    border-bottom: 2px solid rgba(26, 92, 58, 0.15);
}

.content-body .index-list {
    margin: 0.5em 2%;
    line-height: 2.2;
}

.content-body .index-item {
    margin-bottom: 0.15em;
    font-size: 1.1em;
    border-bottom: 1px solid rgba(143, 184, 163, 0.25);
    padding: 0.35em 0.5em;
    transition: background-color 0.15s ease;
    border-radius: 4px;
}

.content-body .index-item:hover {
    background-color: rgba(26, 92, 58, 0.05);
}

.content-body .index-link {
    text-decoration: none;
    color: #1a5c3a;
    font-family: 'Cairo', 'Noto Kufi Arabic', 'Tajawal', sans-serif;
    font-weight: 500;
    display: block;
    padding: 0.15em 0.3em;
    transition: color 0.15s ease;
}

.content-body .index-link:hover {
    color: #174d35;
    text-decoration: underline;
}

.content-body .index-link::after {
    content: '←';
    float: left;
    opacity: 0;
    transition: opacity 0.15s ease;
    font-size: 0.85em;
    line-height: 2.2;
}

.content-body .index-item:hover .index-link::after {
    opacity: 0.5;
}

/* Dark mode index */
[data-theme="dark"] .content-body .main-wrapper > h1 {
    color: #7ec8a4;
    border-bottom-color: rgba(126, 200, 164, 0.2);
}
[data-theme="dark"] .content-body .index-item {
    border-bottom-color: rgba(59, 98, 81, 0.35);
}
[data-theme="dark"] .content-body .index-item:hover {
    background-color: rgba(126, 200, 164, 0.08);
}
[data-theme="dark"] .content-body .index-link {
    color: #9fe0bd;
}
[data-theme="dark"] .content-body .index-link:hover {
    color: #b8ebd0;
}

/* Sepia mode index */
[data-theme="sepia"] .content-body .main-wrapper > h1 {
    color: #5a3e1b;
    border-bottom-color: rgba(196, 169, 125, 0.3);
}
[data-theme="sepia"] .content-body .index-item {
    border-bottom-color: rgba(196, 169, 125, 0.35);
}
[data-theme="sepia"] .content-body .index-item:hover {
    background-color: rgba(90, 62, 27, 0.06);
}
[data-theme="sepia"] .content-body .index-link {
    color: #5a3e1b;
}
[data-theme="sepia"] .content-body .index-link:hover {
    color: #3d2a12;
}

/* High contrast mode index */
[data-theme="high-contrast"] .content-body .main-wrapper > h1 {
    color: #00d4ff;
    border-bottom-color: rgba(0, 212, 255, 0.3);
}
[data-theme="high-contrast"] .content-body .index-item {
    border-bottom-color: rgba(0, 212, 255, 0.2);
}
[data-theme="high-contrast"] .content-body .index-item:hover {
    background-color: rgba(0, 212, 255, 0.08);
}
[data-theme="high-contrast"] .content-body .index-link {
    color: #00d4ff;
}
[data-theme="high-contrast"] .content-body .index-link:hover {
    color: #66e5ff;
}

/* ═══════════════════════════════════════════════════════════════════════════
   BIBLE EVENTS TIMELINE (تاريخ أحداث الكتاب المقدّس)
   ─────────────────────────────────────────────────────────────────────────
   Appendix chapter 78240 of the Arabic Bible (book 1404). The printed page is
   a vertical time scale down the right edge, an era per stop, and two king
   lists that run Judah and Israel side by side with a prophet column between
   them. Everything is scoped under .btl so only this chapter changes, and
   every colour is a reader theme variable so the four reading themes inherit.
   The rail sits at inline-start, which is the right edge in this RTL book.
   ═══════════════════════════════════════════════════════════════════════════ */

.content-body .btl-legend-row {
    margin: 0 0 1.4rem;
}

.content-body ul.btl-legend {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin: 0;
    padding: 0;
}

.content-body .btl-chip {
    margin: 0;
    padding: 0.3rem 0.7rem;
    font-size: 0.82em;
    line-height: 1.4;
    border: 1px solid var(--border-color, rgba(0, 0, 0, 0.12));
    border-radius: 999px;
    background: var(--bg-secondary, rgba(0, 0, 0, 0.03));
    white-space: nowrap;
}

.content-body .btl-chip b {
    color: var(--heading-color, inherit);
    font-weight: 700;
    margin-inline-end: 0.3rem;
}

/* The three part titles are h3s so the chapter outline and the section
   bookmark keep them, but the reader strips a heading's own class at render,
   so they are reached through the container that keeps its class. */
.content-body .btl-kingdoms h3,
.content-body .btl-exile h3,
.content-body .btl-maps h3 {
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin: 2rem 0 1rem;
    font-size: 1.25em;
    color: var(--heading-color, inherit);
    text-align: center;
}

/* ── the rail and its stops ────────────────────────────────────────────── */
.content-body .btl-eras,
.content-body .btl-exile {
    position: relative;
    margin: 0 0 1rem;
    padding-inline-start: 0;
}

/* Rail geometry is in em, not rem: the reader font-size control restyles
   `.content-body div` with !important, so a rem gutter drifts out of the date
   it is meant to hold. */
.content-body .btl-era {
    position: relative;
    margin: 0;
    padding: 0 0 1.5rem 0;
    padding-inline-start: 9.33em;
    border-inline-start: 0;
    min-height: 1rem;
}

/* the vertical line every era hangs from */
.content-body .btl-era::before {
    content: '';
    position: absolute;
    inset-inline-start: 7.38em;
    inset-block-start: 0;
    inset-block-end: 0;
    width: 2px;
    background: color-mix(in srgb, var(--heading-color, #667eea) 26%, transparent);
}

.content-body .btl-era:last-child::before {
    inset-block-end: auto;
    height: 1.6rem;
}

/* the dot on the line */
.content-body .btl-era::after {
    content: '';
    position: absolute;
    inset-inline-start: 7.07em;
    inset-block-start: 0.35rem;
    width: 0.75rem;
    height: 0.75rem;
    border-radius: 50%;
    background: var(--bg-primary, #fff);
    border: 2px solid var(--heading-color, #667eea);
}

.content-body .btl-era-name {
    margin: 0 0 0.45rem;
    font-size: 1.05em;
    line-height: 1.4;
    font-weight: 700;
    color: var(--heading-color, inherit);
}

.content-body .btl-era-date {
    display: block;
    position: absolute;
    inset-inline-start: 0;
    inset-block-start: 0.1rem;
    width: 6.66em;
    text-align: start;
    line-height: 1.25;
    color: var(--heading-color, inherit);
}

.content-body .btl-era-num {
    display: block;
    font-weight: 700;
    font-size: 0.95em;
    white-space: nowrap;
}

.content-body .btl-era-bc {
    display: block;
    font-size: 0.82em;
    font-weight: 700;
    opacity: 0.88;
    white-space: nowrap;
}

.content-body ol.btl-events {
    margin: 0;
    padding: 0;
    padding-inline-start: 1.15rem;
}

.content-body .btl-event {
    margin: 0 0 0.3rem;
    padding: 0;
    line-height: 1.7;
}

.content-body .btl-event:last-child {
    margin-bottom: 0;
}

.content-body .btl-note {
    margin: 0.4rem 0 0;
    padding-inline-start: 9.33em;
    font-style: italic;
    opacity: 0.8;
}

.content-body .btl-note small {
    font-size: 0.85em;
}

/* ── السبي والرد: same rail, era tinted as a period ────────────────────── */
.content-body .btl-era-exile .btl-era-name {
    font-size: 1.1em;
}

.content-body ul.btl-prophets {
    margin: 0.6rem 0 0;
}

.content-body .btl-prophets-label {
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    font-size: 0.78em;
    font-weight: 700;
    color: var(--heading-color, inherit);
    opacity: 0.75;
}

.content-body .btl-tag {
    font-style: italic;
}

/* ── المملكتان: four columns on a tablet and up ────────────────────────── */
.content-body .btl-table-wrap {
    margin: 0 0 1.2rem;
}

.content-body table.btl-kings {
    width: 100%;
    margin: 0;
    table-layout: fixed;
    border-collapse: collapse;
    border-spacing: 0;
    font-size: 0.92em;
    line-height: 1.55;
    background: transparent;
}

.content-body table.btl-kings thead .btl-col-judah { width: 34%; }
.content-body table.btl-kings thead .btl-col-prophets { width: 18%; }
.content-body table.btl-kings thead .btl-col-israel { width: 48%; }

.content-body table.btl-kings thead th {
    padding: 0.5rem 0.6rem;
    border: 0;
    border-bottom: 2px solid color-mix(in srgb, var(--heading-color, #667eea) 55%, transparent);
    background: transparent;
    color: var(--heading-color, inherit);
    text-align: start;
    vertical-align: bottom;
    font-size: 0.92em;
}

.content-body table.btl-kings thead .btl-col-judah,
.content-body table.btl-kings thead .btl-col-israel {
    text-align: center;
}

.content-body .btl-kingdom {
    display: block;
    font-weight: 700;
}

.content-body .btl-kingdom-years,
.content-body .btl-kingdom-role {
    display: block;
    font-weight: 400;
    font-size: 0.85em;
    opacity: 0.75;
}

.content-body table.btl-kings tbody tr.btl-band th {
    padding: 0.75rem 0.6rem 0.3rem;
    border: 0;
    border-bottom: 1px solid color-mix(in srgb, var(--heading-color, #667eea) 28%, transparent);
    background: transparent;
    color: var(--heading-color, inherit);
    font-size: 0.95em;
    font-weight: 700;
    text-align: start;
}

.content-body table.btl-kings tbody td {
    padding: 0.3rem 0.6rem;
    border: 0;
    border-bottom: 1px solid color-mix(in srgb, var(--body-color, #4b5563) 14%, transparent);
    background: transparent;
    vertical-align: top;
    text-align: start;
}

/* kill the house zebra stripe so the two kingdoms stay scannable */
.content-body table.btl-kings tbody tr:nth-child(even) td {
    background: transparent;
}

.content-body .btl-c-prophets {
    font-style: italic;
    opacity: 0.9;
    text-align: center;
    border-inline-start: 1px solid color-mix(in srgb, var(--body-color, #4b5563) 14%, transparent);
}

.content-body .btl-c-israel {
    border-inline-start: 1px solid color-mix(in srgb, var(--body-color, #4b5563) 14%, transparent);
}

/* ── الخرائط: the appendix maps survive only as their printed legends ───── */
.content-body .btl-maps {
    margin: 2rem 0 0;
}

.content-body p.btl-maps-note {
    margin: 0 0 1.2rem;
    font-size: 0.88em;
    font-style: italic;
    opacity: 0.8;
    text-align: center;
}

.content-body .btl-map {
    margin: 0 0 1.2rem;
    padding: 0.9rem 1.1rem 1.1rem;
    border: 1px solid var(--border-color, rgba(0, 0, 0, 0.12));
    border-radius: 10px;
    background: var(--bg-secondary, rgba(0, 0, 0, 0.02));
}

.content-body .btl-map h4 {
    margin: 0 0 0.15rem;
    font-size: 1.02em;
    color: var(--heading-color, inherit);
}

.content-body p.btl-map-sub {
    margin: 0 0 0.6rem;
    font-size: 0.84em;
    opacity: 0.75;
}

.content-body ul.btl-keys {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin: 0 0 0.7rem;
    padding: 0;
}

.content-body .btl-key {
    margin: 0;
    padding: 0.18rem 0.6rem;
    font-size: 0.8em;
    line-height: 1.5;
    border-radius: 6px;
    border: 1px solid color-mix(in srgb, var(--heading-color, #667eea) 30%, transparent);
    background: var(--bg-primary, #fff);
}

.content-body p.btl-places {
    margin: 0;
    font-size: 0.86em;
    line-height: 1.75;
    opacity: 0.92;
    columns: 3;
    column-gap: 1.4rem;
    column-rule: 1px solid color-mix(in srgb, var(--body-color, #4b5563) 14%, transparent);
}

/* The colour sheet replaces the printed B/W figure; the white plate keeps the
   map legible on dark themes and the rem cap stops portrait sheets (Jerusalem,
   Palestine, the provinces) from towering over their card. */
.content-body figure.btl-map-fig {
    margin: 0.2rem 0 0.7rem;
    text-align: center;
    clear: none;
}

.content-body .btl-map-fig img {
    display: inline-block;
    max-width: 100%;
    height: auto;
    border: 1px solid var(--border-color, rgba(0, 0, 0, 0.12));
    border-radius: 8px;
    background: #fff;
}

.content-body .btl-map-fig-tall img {
    max-width: 26rem;
}

/* ── tablet: only the place list tightens; the em rail scales with the font ── */
@media (max-width: 1024px) {
    .content-body p.btl-places { columns: 2; }
}

/* ── phone: the rail tightens, the king list becomes one card per reign ── */
@media (max-width: 767px) {
    .content-body .btl-era {
        padding-inline-start: 1.4rem;
        padding-block-start: 0;
        margin-bottom: 1.35rem;
        border-inline-start: 0;
    }
    .content-body .btl-era::before {
        inset-inline-start: 0.32rem;
        inset-block-start: 0.4rem;
        inset-block-end: 0;
    }
    .content-body .btl-era::after {
        inset-inline-start: 0.01rem;
        inset-block-start: 0.45rem;
        width: 0.62rem;
        height: 0.62rem;
    }
    .content-body .btl-era-date {
        position: static;
        display: block;
        width: auto;
        margin: 0 0 0.1rem;
        font-size: 0.95em;
    }
    .content-body .btl-era-num,
    .content-body .btl-era-bc {
        display: inline;
        font-size: 1em;
        opacity: 1;
    }
    .content-body .btl-era-bc {
        font-weight: 700;
        margin-inline-start: 0.35rem;
        opacity: 0.8;
    }
    .content-body .btl-era-name {
        position: static;
        width: auto;
        margin: 0 0 0.4rem;
        font-size: 1em;
    }
    .content-body .btl-note {
        padding-inline-start: 1.4rem;
    }
    .content-body ol.btl-events {
        padding-inline-start: 1.15rem;
        margin-top: 0;
    }
    .content-body .btl-event {
        line-height: 1.75;
    }

    .content-body table.btl-kings,
    .content-body table.btl-kings tbody,
    .content-body table.btl-kings tr {
        display: block;
        width: 100%;
    }
    .content-body table.btl-kings thead {
        display: none;
    }
    .content-body table.btl-kings tbody tr.btl-band {
        margin-top: 1rem;
    }
    .content-body table.btl-kings tbody tr.btl-band th {
        display: block;
        padding: 0.4rem 0.5rem;
        text-align: center;
    }
    .content-body table.btl-kings tbody td {
        display: flex;
        gap: 0.6rem;
        align-items: baseline;
        padding: 0.22rem 0.55rem;
        border: 0;
    }
    .content-body table.btl-kings tbody tr {
        border-bottom: 1px solid color-mix(in srgb, var(--body-color, #4b5563) 14%, transparent);
    }
    .content-body table.btl-kings tbody td::before {
        content: attr(data-label);
        flex: 0 0 4.4rem;
        font-size: 0.78em;
        font-weight: 700;
        opacity: 0.65;
        text-align: start;
    }
    .content-body table.btl-kings tbody td:empty {
        display: none;
    }
    .content-body .btl-c-prophets {
        text-align: start;
        font-style: normal;
    }
    .content-body p.btl-places {
        columns: 1;
        font-size: 0.84em;
    }
    .content-body .btl-map {
        padding: 0.75rem 0.85rem 0.9rem;
        border-radius: 8px;
    }
    .content-body .btl-map-fig-tall img {
        max-width: 100%;
    }
}