font-size: 0.88rem;
  color: var(--color-charcoal-lt);
  font-style: italic;
  margin-bottom: 0.6rem;
  line-height: 1.6;
}

.notes-text {
  font-size: 0.95rem;
  color: var(--color-charcoal);
  line-height: 1.7;
}

.notes-date {
  font-family: var(--font-sans);
  font-size: 0.68rem;
  color: var(--color-muted);
  margin-top: 0.5rem;
}

/* ═══════════════════════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 1024px) {
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .reader-layout { grid-template-columns: 1fr; }
  .study-panel { position: static; }
}

@media (max-width: 768px) {
  :root { --sidebar-w: 0px; }

  .sidebar {
    transform: translateX(-280px);
    width: 280px;
  }

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

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

  .btn-menu-toggle { display: flex; }

  .page-content { padding: 1.25rem; }

  .topbar { padding: 0.6rem 1rem; }

  .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 0.75rem; }

  .books-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }

  .verses-container { padding: 1.5rem 1.25rem; }

  .auth-card { padding: 1.75rem; }
}

@media (max-width: 480px) {
  .stats-grid { grid-template-columns: 1fr 1fr; }
  .books-grid { grid-template-columns: 1fr 1fr; }
}

/* ── Utility classes ──────────────────────────────────────────────────────── */
.text-gold   { color: var(--color-gold); }
.text-muted  { color: var(--color-muted); }
.text-center { text-align: center; }
.text-right  { text-align: right; }
.font-sans   { font-family: var(--font-sans); }
.d-flex      { display: flex; }
.align-center{ align-items: center; }
.gap-sm      { gap: 0.5rem; }
.gap-md      { gap: 1rem; }
.mt-1        { margin-top: 0.5rem; }
.mt-2        { margin-top: 1rem; }
.mt-3        { margin-top: 1.5rem; }
.mb-1        { margin-bottom: 0.5rem; }
.mb-2        { margin-bottom: 1rem; }
.mb-3        { margin-bottom: 1.5rem; }
.hidden      { display: none !important; }
.divider     { height: 1px; background: var(--color-border-lt); margin: 1rem 0; }