/* ================================================================
   ARI Portfolio — Poetry Showcase (poetry/poetry.css)
   Digital Divan · Rubaiyat · چوارینەکان
   Illuminated Manuscript (Tazhib / تذهیب) Aesthetic System
   ================================================================ */

/* ── Google Fonts ─────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600&family=Cinzel+Decorative:wght@400;700&family=Amiri:ital,wght@0,400;0,700;1,400&family=Vazirmatn:wght@300;400;500;700&display=swap');

/* ================================================================
   CSS CUSTOM PROPERTIES — POETRY SYSTEM
   ================================================================ */
:root {
  --gold-bright:   #f5c842;
  --gold-mid:      #d4af37;
  --gold-deep:     #b8941f;
  --gold-glow:     rgba(245, 200, 66, 0.28);
  --gold-glow-sm:  rgba(245, 200, 66, 0.10);
  --amber:         #db7b2b;
  --amber-glow:    rgba(219, 123, 43, 0.22);

  --ink-deepest:   #04050d;
  --ink-dark:      #080c1a;
  --ink-surface:   #0e1425;
  --ink-elevated:  #141d32;
  --ink-card:      rgba(10, 15, 30, 0.94);

  --border-gold-outer: rgba(212, 175, 55, 0.48);
  --border-gold-inner: rgba(212, 175, 55, 0.22);

  --font-ltr: 'Cormorant Garamond', Georgia, serif;
  --font-rtl: 'Vazirmatn', 'Amiri', 'Noto Naskh Arabic', serif;
  --font-deco: 'Cinzel Decorative', Georgia, serif;
  --font-ui:  'Inter', system-ui, sans-serif;

  /* max layout width — matches 1200px layout in proofs-by-khusraw.php */
  --layout-max: 1200px;
  --layout-pad: clamp(16px, 4vw, 24px);

  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring:   cubic-bezier(0.34, 1.56, 0.64, 1);
  --t-fast: 150ms;
  --t-mid:  300ms;
  --t-slow: 580ms;
}

/* ================================================================
   RESET & BASE
   ================================================================ */
*,*::before,*::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  background-color: var(--ink-deepest);
  color: #e8eaf0;
  font-family: var(--font-ui);
  min-height: 100vh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

body::before {
  content: '';
  position: fixed;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 55% at 50% 0%, rgba(245, 200, 66, 0.045) 0%, transparent 65%),
    radial-gradient(ellipse 45% 35% at 15% 100%, rgba(96, 165, 250, 0.025) 0%, transparent 55%);
  pointer-events: none;
  z-index: 0;
}

/* ── Layout wrapper: everything constrained to 1440px centered ── */
.poetry-layout {
  width: 100%;
  max-width: var(--layout-max);
  margin-inline: auto;
  padding-inline: var(--layout-pad);
}

/* ================================================================
   PAGE WRAPPER
   ================================================================ */
.poetry-page {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  padding-top: 72px;
}

/* ================================================================
   HERO
   ================================================================ */
.poetry-hero {
  text-align: center;
  padding: clamp(36px, 6vw, 80px) 0 clamp(24px, 4vw, 48px);
  position: relative;
}

.poetry-hero::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: clamp(120px, 30vw, 280px);
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-mid), transparent);
  opacity: 0.35;
}

.hero-arabesque {
  font-size: clamp(0.9rem, 2vw, 1.5rem);
  color: var(--gold-mid);
  opacity: 0.45;
  letter-spacing: 0.8em;
  display: block;
  margin-bottom: 10px;
  animation: fadeInDown 1.1s var(--ease-out-expo) both;
  user-select: none;
}

.poetry-hero-title {
  font-family: var(--font-deco);
  font-size: clamp(1.8rem, 4.5vw, 3.6rem);
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.04em;
  line-height: 1.1;
  animation: fadeInDown 0.9s var(--ease-out-expo) 0.08s both;
}

.poetry-hero-title .gold {
  color: var(--gold-bright);
  text-shadow: 0 0 28px var(--gold-glow), 0 0 56px rgba(245, 200, 66, 0.10);
}

/* Fal button in hero */
.btn-fal {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: clamp(16px, 2.5vw, 28px);
  padding: 10px 28px;
  border: 1px solid rgba(212, 175, 55, 0.45);
  border-radius: 9999px;
  background: transparent;
  color: var(--gold-bright);
  font-family: var(--font-deco);
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  cursor: pointer;
  transition: all var(--t-mid) var(--ease-out-expo);
  text-transform: uppercase;
  animation: fadeInUp 0.9s var(--ease-out-expo) 0.2s both;
}

.btn-fal:hover, .btn-fal:focus-visible {
  background: var(--gold-glow-sm);
  box-shadow: 0 0 28px var(--gold-glow), inset 0 0 20px rgba(245,200,66,0.06);
  transform: translateY(-2px);
  outline: none;
}

.btn-fal svg { transition: transform var(--t-fast); }
.btn-fal:hover svg { transform: rotate(72deg); }

/* ================================================================
   LANGUAGE TAB NAV
   ================================================================ */
.lang-nav-wrapper {
  position: sticky;
  top: 72px;
  z-index: 90;
  background: rgba(4, 5, 14, 0.88);
  backdrop-filter: blur(24px) saturate(1.8);
  -webkit-backdrop-filter: blur(24px) saturate(1.8);
  border-bottom: 1px solid rgba(212, 175, 55, 0.16);
  box-shadow: 0 10px 32px -8px rgba(0, 0, 0, 0.65),
              inset 0 1px 0 rgba(255, 255, 255, 0.03);
  transition: background var(--t-mid), border-color var(--t-mid);
}

/* inner constrained row */
.lang-nav-inner {
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: var(--layout-max);
  margin-inline: auto;
  padding-inline: var(--layout-pad);
  padding-block: 10px;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  position: relative;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
}

.lang-nav-inner::-webkit-scrollbar { display: none; }

.lang-tab {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 8px 20px;
  min-height: 44px;
  border-radius: 9999px;
  border: 1px solid rgba(212, 175, 55, 0.10);
  background: rgba(255, 255, 255, 0.02);
  color: rgba(232, 234, 240, 0.65);
  font-family: var(--font-ui);
  font-size: 0.84rem;
  font-weight: 500;
  letter-spacing: 0.03em;
  cursor: pointer;
  white-space: nowrap;
  user-select: none;
  -webkit-user-select: none;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  text-decoration: none;
  flex-shrink: 0;
  scroll-snap-align: center;
}

.lang-tab .tab-name {
  display: inline-block;
  line-height: 1.2;
  transition: color 0.25s ease, transform 0.25s ease;
}

.tab-native {
  font-size: 0.66rem;
  opacity: 0.65;
  line-height: 1;
  display: block;
  letter-spacing: 0.02em;
  transition: opacity 0.25s ease, color 0.25s ease;
}

.tab-native[dir="rtl"] {
  font-family: 'Amiri', 'Vazirmatn', serif;
  font-size: 0.74rem;
}

.tab-count {
  /* HIDDEN — numbers/count not shown per user request */
  display: none;
}

.lang-tab:focus-visible {
  outline: 2px solid var(--gold-bright);
  outline-offset: 2px;
}

.lang-tab:hover {
  color: #ffffff;
  background: rgba(245, 200, 66, 0.07);
  border-color: rgba(245, 200, 66, 0.28);
  transform: translateY(-1.5px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35),
              0 0 14px rgba(245, 200, 66, 0.10);
}

.lang-tab:hover .tab-native {
  opacity: 0.9;
  color: rgba(245, 200, 66, 0.9);
}

.lang-tab[aria-selected="true"] {
  color: var(--gold-bright);
  font-weight: 600;
  background: linear-gradient(135deg, rgba(245, 200, 66, 0.16) 0%, rgba(212, 175, 55, 0.06) 100%);
  border-color: rgba(245, 200, 66, 0.45);
  box-shadow: 0 0 22px rgba(245, 200, 66, 0.16),
              inset 0 1px 1px rgba(255, 255, 255, 0.12);
  transform: translateY(0);
  text-shadow: 0 0 14px rgba(245, 200, 66, 0.35);
}

.lang-tab[aria-selected="true"] .tab-native {
  opacity: 0.95;
  color: rgba(245, 200, 66, 0.92);
}

/* Sliding gold underline indicator */
.lang-nav-indicator {
  position: absolute;
  bottom: 0px;
  height: 2.5px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent 0%, rgba(245, 200, 66, 0.5) 15%, var(--gold-bright) 50%, rgba(245, 200, 66, 0.5) 85%, transparent 100%);
  box-shadow: 0 -1px 8px rgba(245, 200, 66, 0.75),
              0 0 18px rgba(245, 200, 66, 0.40);
  transition: left 0.32s cubic-bezier(0.16, 1, 0.3, 1),
              width 0.32s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
  z-index: 2;
}

/* Share language button — end aligned (handles LTR & RTL) */
.btn-share-lang {
  margin-inline-start: auto;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 16px;
  min-height: 40px;
  border: 1px solid rgba(212, 175, 55, 0.28);
  border-radius: 9999px;
  background: linear-gradient(135deg, rgba(212, 175, 55, 0.08) 0%, rgba(0, 0, 0, 0.32) 100%);
  color: rgba(245, 200, 66, 0.85);
  font-size: 0.76rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  font-family: var(--font-ui);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.btn-share-lang svg {
  flex-shrink: 0;
  transition: transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.btn-share-lang:hover {
  color: #ffffff;
  border-color: rgba(245, 200, 66, 0.60);
  background: linear-gradient(135deg, rgba(245, 200, 66, 0.22) 0%, rgba(212, 175, 55, 0.12) 100%);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.45),
              0 0 16px rgba(245, 200, 66, 0.24);
  transform: translateY(-1.5px);
}

.btn-share-lang:hover svg {
  transform: scale(1.14) rotate(-8deg);
  color: var(--gold-bright);
}

.btn-share-lang:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

/* ================================================================
   SEARCH + FILTER BAR
   ================================================================ */
.filter-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  max-width: var(--layout-max);
  margin-inline: auto;
  padding-inline: var(--layout-pad);
  padding-block: clamp(12px, 1.8vw, 22px);
  position: relative;
}

.search-wrap {
  position: relative;
  flex: 1;
  max-width: 440px;
  min-width: 0;
}

.search-wrap .search-icon {
  position: absolute;
  inset-inline-start: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(245, 200, 66, 0.45);
  pointer-events: none;
  transition: color 0.25s ease, transform 0.25s ease;
}

.search-input {
  width: 100%;
  padding-block: 10px;
  padding-inline-start: 40px;
  padding-inline-end: 64px;
  background: linear-gradient(135deg, rgba(14, 20, 38, 0.75) 0%, rgba(8, 11, 24, 0.85) 100%);
  border: 1px solid rgba(212, 175, 55, 0.16);
  border-radius: 9999px;
  color: #e8eaf0;
  font-family: var(--font-ui);
  font-size: 0.84rem;
  letter-spacing: 0.02em;
  outline: none;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.03);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.search-input::-webkit-search-cancel-button,
.search-input::-webkit-search-decoration {
  -webkit-appearance: none;
  appearance: none;
  display: none;
}

.search-input::placeholder {
  color: rgba(232, 234, 240, 0.32);
  transition: color 0.2s ease;
}

.search-input:focus {
  border-color: rgba(245, 200, 66, 0.55);
  box-shadow: 0 0 0 3px rgba(245, 200, 66, 0.12),
              0 8px 24px -4px rgba(0, 0, 0, 0.55);
  background: rgba(14, 20, 38, 0.96);
  color: #ffffff;
}

.search-wrap:focus-within .search-icon {
  color: var(--gold-bright);
  transform: translateY(-50%) scale(1.1);
}

/* Clear search button inside input */
.search-clear-btn {
  position: absolute;
  inset-inline-end: 12px;
  top: 50%;
  transform: translateY(-50%) scale(0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid rgba(212, 175, 55, 0.25);
  background: rgba(245, 200, 66, 0.10);
  color: rgba(245, 200, 66, 0.85);
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.search-clear-btn.visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(-50%) scale(1);
}

.search-clear-btn:hover {
  background: rgba(245, 200, 66, 0.25);
  color: #ffffff;
  border-color: rgba(245, 200, 66, 0.55);
  transform: translateY(-50%) scale(1.08);
}

/* Shortcut badge `/` */
.search-kbd-hint {
  position: absolute;
  inset-inline-end: 14px;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 4px;
  font-family: var(--font-ui);
  font-size: 0.68rem;
  font-weight: 600;
  color: rgba(245, 200, 66, 0.5);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(212, 175, 55, 0.20);
  border-radius: 4px;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.search-kbd-hint.hidden {
  opacity: 0;
  transform: translateY(-50%) scale(0.8);
}

/* Script segmented toggle */
.kurdish-script-toggle {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  padding: 4px;
  border-radius: 9999px;
  border: 1px solid rgba(212, 175, 55, 0.20);
  background: linear-gradient(135deg, rgba(12, 17, 34, 0.80) 0%, rgba(6, 8, 18, 0.90) 100%);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.btn-script {
  position: relative;
  height: 32px;
  padding: 0 12px;
  border-radius: 16px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-muted);
  font-family: var(--font-en);
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: all 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.btn-script.active {
  border-color: rgba(212, 175, 55, 0.35);
  background: rgba(212, 175, 55, 0.15);
  color: var(--accent);
  box-shadow: 0 0 10px rgba(212, 175, 55, 0.1);
}
.btn-script:hover:not(.active) {
  color: var(--text);
  background: rgba(255, 255, 255, 0.05);
}

/* Font size segmented controls */
.font-controls {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  padding: 4px 6px;
  border-radius: 9999px;
  border: 1px solid rgba(212, 175, 55, 0.20);
  background: linear-gradient(135deg, rgba(12, 17, 34, 0.80) 0%, rgba(6, 8, 18, 0.90) 100%);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.btn-font {
  position: relative;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid rgba(212, 175, 55, 0.15);
  background: rgba(255, 255, 255, 0.03);
  color: rgba(245, 200, 66, 0.75);
  cursor: pointer;
  font-size: 0.74rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  font-family: var(--font-ui);
  user-select: none;
  -webkit-user-select: none;
}

.btn-font:hover:not(:disabled) {
  background: rgba(245, 200, 66, 0.15);
  color: #ffffff;
  border-color: rgba(245, 200, 66, 0.50);
  transform: scale(1.08);
  box-shadow: 0 0 12px rgba(245, 200, 66, 0.2);
}

.btn-font:active:not(:disabled) {
  transform: scale(0.96);
}

.btn-font:disabled,
.btn-font.disabled {
  opacity: 0.32;
  cursor: not-allowed;
  border-color: rgba(212, 175, 55, 0.08);
  color: rgba(232, 234, 240, 0.3);
}

.btn-font:focus-visible {
  outline: 2px solid var(--gold-bright);
  outline-offset: 2px;
}

/* Font size level pips */
.font-size-pips {
  display: flex;
  align-items: center;
  gap: 5px;
  padding-inline: 4px;
}

.font-pip {
  display: block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(212, 175, 55, 0.22);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.font-pip.active {
  background: var(--gold-bright);
  transform: scale(1.35);
  box-shadow: 0 0 8px rgba(245, 200, 66, 0.85);
}

/* Results info — hidden per user request */
.results-info { display: none; }

/* ================================================================
   QUATRAINS LAYOUT — Strict 1440px centred, full-bleed padding
   ================================================================ */
.quatrains-section {
  position: relative;
  z-index: 1;
  padding-bottom: 100px;
}

.quatrains-inner {
  max-width: var(--layout-max);
  margin-inline: auto;
  padding-inline: var(--layout-pad);
}

/* No results */
.no-results {
  text-align: center;
  padding: 80px 20px;
  display: none;
  max-width: var(--layout-max);
  margin-inline: auto;
  padding-inline: var(--layout-pad);
}

.no-results.visible { display: block; }

.no-results-ornament {
  font-size: 2.6rem;
  color: var(--gold-mid);
  opacity: 0.28;
  margin-bottom: 14px;
  display: block;
}

.no-results-text {
  font-family: var(--font-ltr);
  font-style: italic;
  color: rgba(232, 234, 240, 0.38);
  font-size: 1.05rem;
}

/* ── Single-column vertical layout: one quatrain per row, 100% width, centered ── */
.quatrains-grid {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  gap: 28px;
}

/* ================================================================
   QUATRAIN CARD — Tazhib Frame Component
   ================================================================ */
.quatrain-card {
  width: 100%;
  position: relative;
  box-sizing: border-box;
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity 0.48s var(--ease-out-expo),
    transform 0.48s var(--ease-out-expo);
}

/* SSR cards are already visible */
.quatrain-card[data-ssr="1"],
.quatrain-card.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Gradient border outer shell */
.card-outer {
  position: relative;
  width: 100%;
  box-sizing: border-box;
  border-radius: 14px;
  padding: 2px;
  background: linear-gradient(
    140deg,
    rgba(212, 175, 55, 0.42),
    rgba(212, 175, 55, 0.08) 45%,
    rgba(212, 175, 55, 0.28) 100%
  );
  box-shadow:
    0 4px 20px rgba(0,0,0,0.55),
    0 0 36px rgba(212, 175, 55, 0.07);
  transition:
    box-shadow var(--t-mid) var(--ease-out-expo),
    transform var(--t-mid) var(--ease-out-expo);
}

.quatrain-card:hover .card-outer {
  box-shadow:
    0 10px 40px rgba(0,0,0,0.70),
    0 0 56px rgba(212, 175, 55, 0.14);
  transform: translateY(-3px);
}

/* deep-link highlight pulse */
.quatrain-card.highlighted .card-outer {
  animation: goldPulse 2.2s var(--ease-out-expo);
}

@keyframes goldPulse {
  0%   { box-shadow: 0 0 0 2px var(--gold-bright), 0 0 60px rgba(245,200,66,0.45); }
  55%  { box-shadow: 0 0 0 3px var(--gold-bright), 0 0 90px rgba(245,200,66,0.25); }
  100% { box-shadow: 0 0 0 1px rgba(212,175,55,0.4), 0 0 36px rgba(212,175,55,0.07); }
}

/* Card inner surface */
.card-inner {
  position: relative;
  width: 100%;
  box-sizing: border-box;
  background: var(--ink-card);
  border-radius: 12px;
  overflow: hidden;
  backdrop-filter: blur(18px);
}

.card-inner::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 65% 45% at 50% 0%, rgba(245,200,66,0.045) 0%, transparent 70%);
  pointer-events: none;
}

/* ── Tazhib inner border frame ── */
.tazhib-frame {
  margin: 10px;
  box-sizing: border-box;
  border: 1px dashed rgba(212, 175, 55, 0.25);
  outline: 1px solid rgba(212, 175, 55, 0.08);
  outline-offset: -4px;
  border-radius: 9px;
  padding: clamp(16px, 3vw, 26px) clamp(14px, 3vw, 24px) 14px;
  position: relative;
}

/* ── SVG corner ornaments ── */
.tazhib-corner {
  position: absolute;
  width: 20px;
  height: 20px;
  opacity: 0.55;
  pointer-events: none;
  transition: opacity var(--t-mid);
}

.tazhib-corner img { width: 100%; height: 100%; }
.quatrain-card:hover .tazhib-corner { opacity: 0.9; }

.corner-tl { top: 4px;   left: 4px; }
.corner-tr { top: 4px;   right: 4px;  transform: scaleX(-1); }
.corner-bl { bottom: 4px; left: 4px;  transform: scaleY(-1); }
.corner-br { bottom: 4px; right: 4px;  transform: scale(-1,-1); }

/* ── Sarlowh (header ornament) ── */
.sarlowh {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 14px;
}

.sarlowh-line {
  height: 1px;
  flex: 1;
  max-width: 70px;
  background: linear-gradient(90deg, transparent, rgba(212,175,55,0.45), transparent);
}

.sarlowh-star {
  color: var(--gold-bright);
  font-size: 0.95rem;
  text-shadow: 0 0 10px var(--gold-glow);
  user-select: none;
  animation: starPulse 4.5s ease-in-out infinite;
}

@keyframes starPulse {
  0%,100% { text-shadow: 0 0 10px var(--gold-glow); opacity: 0.85; }
  50%     { text-shadow: 0 0 22px rgba(245,200,66,0.5); opacity: 1; }
}

/* Optional title */
.quatrain-title {
  text-align: center;
  margin-bottom: 10px;
  font-family: var(--font-deco);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--amber);
  text-shadow: 0 0 8px var(--amber-glow);
}

/* ── Verse layout — bayt couplet grid ── */
.poetry-bayts { margin: 0; padding: 0; }

/* Desktop: two hemistichs side-by-side with divider */
.poetry-bayt {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}

.poetry-bayt:last-child { margin-bottom: 0; }

/* Misra text */
.misra {
  font-size: clamp(0.88rem, 1.3vw, 1.05rem);
  line-height: 1.65;
  font-style: italic;
  font-weight: 500;
  color: #f0e6c8;
  word-break: break-word;
  text-shadow: 0 1px 6px rgba(0,0,0,0.6);
  transition: font-size 0.28s var(--ease-out-expo);
}

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

/* RTL languages */
[data-dir="rtl"] .misra {
  font-family: var(--font-rtl);
  font-style: normal;
  font-size: clamp(0.92rem, 1.4vw, 1.10rem);
  line-height: 1.9;
  direction: rtl;
  letter-spacing: 0;
}

[data-dir="ltr"] .misra {
  font-family: var(--font-ltr);
}

/* ✦ divider between hemistichs */
.bayt-divider {
  color: var(--gold-bright);
  font-size: 0.72rem;
  opacity: 0.7;
  align-self: center;
  flex-shrink: 0;
  text-shadow: 0 0 8px var(--gold-glow);
  user-select: none;
}

/* Horizontal rule between bayt 1 and bayt 2 */
.bayt-sep {
  margin: 8px 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(212,175,55,0.13), transparent);
}

/* ── Card footer — actions only, no numbers/themes ── */
.card-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end; /* actions push to right */
  padding: 8px 10px;
  border-top: 1px solid rgba(212,175,55,0.08);
}

/* Badge and themes HIDDEN per user request */
.qatrain-badge  { display: none; }
.qatrain-themes { display: none; }

/* Action buttons toolbar */
.card-actions {
  display: flex;
  align-items: center;
  gap: 2px;
}

.card-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(232, 234, 240, 0.35);
  transition: all var(--t-fast);
  position: relative;
}

.card-btn svg { width: 15px; height: 15px; stroke-width: 1.8; }

.card-btn:hover {
  background: rgba(245,200,66,0.09);
  color: var(--gold-bright);
  transform: scale(1.12);
}

.card-btn:focus-visible {
  outline: 2px solid var(--gold-mid);
  outline-offset: 2px;
}

.card-btn.favorited { color: var(--amber) !important; }
.card-btn.favorited svg { fill: var(--amber); stroke: var(--amber); }
.card-btn.copied { color: #34d399 !important; }

/* Tooltip */
.card-btn::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  background: rgba(10, 15, 30, 0.96);
  color: #e8eaf0;
  font-size: 0.66rem;
  white-space: nowrap;
  padding: 3px 8px;
  border-radius: 5px;
  border: 1px solid rgba(255,255,255,0.08);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.14s, transform 0.14s;
  z-index: 10;
  font-family: var(--font-ui);
}

.card-btn:hover::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ================================================================
   FONT SIZE MODIFIERS
   ================================================================ */
.poetry-size-sm .misra { font-size: clamp(0.74rem, 1.1vw, 0.88rem); }
.poetry-size-md .misra { font-size: clamp(0.88rem, 1.3vw, 1.05rem); }
.poetry-size-lg .misra { font-size: clamp(1.0rem,  1.6vw, 1.22rem); }
.poetry-size-xl .misra { font-size: clamp(1.1rem,  2.0vw, 1.44rem); }

/* ================================================================
   SHARE MODAL
   ================================================================ */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(4, 5, 13, 0.78);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--t-mid), visibility var(--t-mid);
}

.modal-overlay.open {
  opacity: 1;
  visibility: visible;
}

.share-modal {
  background: linear-gradient(145deg, #0c1222, #121a2e);
  border: 1px solid rgba(212,175,55,0.32);
  border-radius: 18px;
  padding: clamp(18px, 4vw, 34px);
  max-width: 520px;
  width: 100%;
  position: relative;
  box-shadow: 0 24px 80px rgba(0,0,0,0.85), 0 0 60px rgba(212,175,55,0.09);
  transform: translateY(18px) scale(0.97);
  transition: transform var(--t-mid) var(--ease-spring);
}

.modal-overlay.open .share-modal {
  transform: translateY(0) scale(1);
}

.modal-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.04);
  color: rgba(232,234,240,0.55);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  transition: all var(--t-fast);
}

.modal-close:hover { background: rgba(255,255,255,0.10); color: #fff; }

.modal-title {
  font-family: var(--font-deco);
  font-size: 1rem;
  letter-spacing: 0.08em;
  color: var(--gold-bright);
  margin-bottom: 4px;
  text-align: center;
  width: 100%;
}

.modal-subtitle {
  font-size: 0.78rem;
  color: rgba(232,234,240,0.5);
  margin-bottom: 18px;
  font-style: italic;
  text-align: center;
  width: 100%;
}

/* Verse preview inside modal — centered */
.modal-preview {
  background: rgba(5, 8, 18, 0.65);
  border: 1px solid rgba(212, 175, 55, 0.22);
  border-radius: 12px;
  padding: 16px 20px;
  margin-bottom: 16px;
  font-family: var(--font-ltr);
  font-size: 0.92rem;
  font-style: italic;
  color: #f7eed9;
  line-height: 1.95;
  white-space: pre-line;
  text-align: center !important;
  width: 100%;
  box-sizing: border-box;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 4px 18px rgba(0, 0, 0, 0.35);
  max-height: 45vh;
  overflow-y: auto;
  overflow-wrap: break-word;
  word-wrap: break-word;
  word-break: break-word;
}

.modal-preview[dir="rtl"] {
  font-family: var(--font-rtl);
  font-style: normal;
  font-size: 1rem;
  line-height: 2.2;
  text-align: center !important;
  direction: rtl;
}

.modal-preview[dir="ltr"] {
  text-align: center !important;
  direction: ltr;
}

/* Link copy row */
.link-copy-row {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(4,5,13,0.55);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 10px;
  padding: 6px 6px 6px 13px;
  margin-bottom: 16px;
  overflow: hidden;
}

.link-copy-url {
  flex: 1;
  font-family: monospace;
  font-size: 0.72rem;
  color: rgba(232,234,240,0.45);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.btn-copy-link {
  padding: 5px 14px;
  border-radius: 7px;
  border: 1px solid rgba(212,175,55,0.28);
  background: rgba(212,175,55,0.07);
  color: var(--gold-bright);
  font-size: 0.73rem;
  letter-spacing: 0.06em;
  cursor: pointer;
  flex-shrink: 0;
  transition: all var(--t-fast);
  font-family: var(--font-ui);
}

.btn-copy-link:hover { background: rgba(212,175,55,0.16); }
.btn-copy-link.copied { background: rgba(52,211,153,0.12); color: #34d399; border-color: rgba(52,211,153,0.28); }

/* ── Compact Social share buttons with real brand colors ── */
.social-grid {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  margin: 14px 0 12px 0;
}

.social-btn {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: all 0.22s var(--ease-out-expo);
  cursor: pointer;
  text-decoration: none;
  flex-shrink: 0;
  position: relative;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
  border: 1px solid transparent;
}

.social-btn svg {
  width: 18px;
  height: 18px;
  transition: transform 0.22s var(--ease-out-expo);
}

.social-btn:hover {
  transform: translateY(-2px) scale(1.10);
  filter: brightness(1.12);
}

.social-btn:hover svg {
  transform: scale(1.06);
}

/* ── Brand colors (Authentic Real Brand Palettes) ── */

/* X (Twitter) — Pure Black / White */
.social-btn.x-btn {
  background: #000000;
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.26);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.55);
}
.social-btn.x-btn:hover {
  background: #141414;
  border-color: #ffffff;
  box-shadow: 0 0 14px rgba(255, 255, 255, 0.40);
}

/* WhatsApp — Official #25D366 */
.social-btn.wa-btn {
  background: #25D366;
  color: #ffffff;
  box-shadow: 0 2px 10px rgba(37, 211, 102, 0.42);
}
.social-btn.wa-btn:hover {
  background: #20bd5a;
  box-shadow: 0 0 16px rgba(37, 211, 102, 0.65);
}

/* Telegram — Official #24A1DE */
.social-btn.tg-btn {
  background: #24A1DE;
  color: #ffffff;
  box-shadow: 0 2px 10px rgba(36, 161, 222, 0.42);
}
.social-btn.tg-btn:hover {
  background: #1f92ca;
  box-shadow: 0 0 16px rgba(36, 161, 222, 0.65);
}

/* LinkedIn — Official #0A66C2 */
.social-btn.li-btn {
  background: #0A66C2;
  color: #ffffff;
  box-shadow: 0 2px 10px rgba(10, 102, 194, 0.42);
}
.social-btn.li-btn:hover {
  background: #0958a8;
  box-shadow: 0 0 16px rgba(10, 102, 194, 0.65);
}

/* Facebook — Official #1877F2 */
.social-btn.fb-btn {
  background: #1877F2;
  color: #ffffff;
  box-shadow: 0 2px 10px rgba(24, 119, 242, 0.42);
}
.social-btn.fb-btn:hover {
  background: #1466d3;
  box-shadow: 0 0 16px rgba(24, 119, 242, 0.65);
}

/* Threads — Monochrome #111111 */
.social-btn.threads-btn {
  background: #111111;
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.26);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.55);
}
.social-btn.threads-btn:hover {
  background: #222222;
  border-color: #ffffff;
  box-shadow: 0 0 14px rgba(255, 255, 255, 0.40);
}

/* Reddit — Official #FF4500 */
.social-btn.reddit-btn {
  background: #FF4500;
  color: #ffffff;
  box-shadow: 0 2px 10px rgba(255, 69, 0, 0.42);
}
.social-btn.reddit-btn:hover {
  background: #e03d00;
  box-shadow: 0 0 16px rgba(255, 69, 0, 0.65);
}

/* Email — Official #EA4335 */
.social-btn.email-btn {
  background: #EA4335;
  color: #ffffff;
  box-shadow: 0 2px 10px rgba(234, 67, 53, 0.42);
}
.social-btn.email-btn:hover {
  background: #d3382b;
  box-shadow: 0 0 16px rgba(234, 67, 53, 0.65);
}

/* Device Share button */
.btn-device-share {
  width: 100%;
  padding: 9px 12px;
  margin-bottom: 8px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.06);
  color: #fff;
  font-family: var(--font-ui);
  font-size: 0.78rem;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  transition: all var(--t-fast);
}

.btn-device-share:hover {
  background: rgba(255,255,255,0.12);
  border-color: rgba(255,255,255,0.24);
  transform: translateY(-1px);
}

/* Export card button */
.btn-export-card {
  width: 100%;
  padding: 10px;
  border-radius: 10px;
  border: 1px solid rgba(212,175,55,0.28);
  background: linear-gradient(90deg, rgba(212,175,55,0.08), rgba(219,123,43,0.08));
  color: var(--gold-bright);
  font-family: var(--font-deco);
  font-size: 0.74rem;
  letter-spacing: 0.09em;
  cursor: pointer;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: all var(--t-mid);
}

.btn-export-card:hover {
  background: linear-gradient(90deg, rgba(212,175,55,0.18), rgba(219,123,43,0.18));
  box-shadow: 0 0 18px rgba(245,200,66,0.10);
}

/* ================================================================
   ZEN MODAL — Full Screen Fal
   ================================================================ */
.zen-overlay {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(4, 5, 13, 0.96);
  backdrop-filter: blur(40px);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--t-slow) var(--ease-out-expo), visibility var(--t-slow);
}

.zen-overlay.open { opacity: 1; visibility: visible; }

.zen-card {
  max-width: 660px;
  width: 100%;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: clamp(28px, 5vw, 52px) clamp(20px, 4vw, 44px);
  border: 1px solid rgba(212, 175, 55, 0.35);
  border-radius: 22px;
  background: linear-gradient(145deg, rgba(8, 12, 26, 0.94), rgba(15, 22, 42, 0.94));
  box-shadow: 
    0 24px 80px rgba(0, 0, 0, 0.85),
    0 0 60px rgba(212, 175, 55, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  animation: zenIn 0.55s var(--ease-out-expo);
  box-sizing: border-box;
  position: relative;
}

@keyframes zenIn {
  from { opacity: 0; transform: scale(0.93) translateY(18px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

.zen-ornament {
  font-size: 1.4rem;
  color: var(--gold-bright);
  opacity: 0.65;
  margin: 0 auto 20px auto;
  letter-spacing: 0.5em;
  user-select: none;
  text-shadow: 0 0 12px rgba(212, 175, 55, 0.4);
  text-align: center;
}

.zen-verse {
  font-size: clamp(1rem, 2.5vw, 1.42rem);
  font-style: italic;
  color: #f7eed9;
  line-height: 2.15;
  margin: 0 auto 22px auto;
  max-width: 580px;
  width: 100%;
  white-space: pre-line;
  text-align: center !important;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.6);
  box-sizing: border-box;
  max-height: 55vh;
  overflow-y: auto;
  overflow-wrap: break-word;
  word-wrap: break-word;
  word-break: break-word;
}

.zen-verse[dir="rtl"] {
  font-family: var(--font-rtl);
  font-style: normal;
  text-align: center !important;
  line-height: 2.3;
  direction: rtl;
}

.zen-verse[dir="ltr"] {
  font-family: var(--font-ltr);
  text-align: center !important;
  direction: ltr;
}

.zen-lang-label {
  font-family: var(--font-deco);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  color: var(--gold-mid);
  text-transform: uppercase;
  margin: 0 auto 24px auto;
  display: block;
  text-align: center;
  width: 100%;
}

.zen-actions {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.zen-btn {
  padding: 8px 22px;
  border-radius: 999px;
  font-size: 0.78rem;
  cursor: pointer;
  font-family: var(--font-ui);
  transition: all var(--t-mid);
  letter-spacing: 0.04em;
}

.zen-btn-next {
  border: 1px solid rgba(212,175,55,0.32);
  background: transparent;
  color: var(--gold-bright);
}
.zen-btn-next:hover { background: var(--gold-glow-sm); }

.zen-btn-share {
  border: 1px solid rgba(212,175,55,0.20);
  background: transparent;
  color: rgba(245,200,66,0.7);
}
.zen-btn-share:hover { background: var(--gold-glow-sm); color: var(--gold-bright); }

.zen-btn-close {
  border: 1px solid rgba(255,255,255,0.10);
  background: transparent;
  color: rgba(232,234,240,0.45);
}
.zen-btn-close:hover { background: rgba(255,255,255,0.05); color: #e8eaf0; }

/* ================================================================
   KEYBOARD HINT BAR (Multilingual, Glassmorphic Floating Pill)
   ================================================================ */
.keyboard-hints {
  display: none;
  position: fixed;
  bottom: 74px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(8, 12, 26, 0.88);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid rgba(212, 175, 55, 0.26);
  border-radius: 999px;
  padding: 6px 18px;
  gap: 12px;
  align-items: center;
  z-index: 50;
  letter-spacing: 0.03em;
  white-space: nowrap;
  box-shadow: 
    0 10px 30px rgba(0, 0, 0, 0.65),
    0 0 22px rgba(212, 175, 55, 0.09),
    inset 0 1px 0 rgba(255, 255, 255, 0.15);
  transition: all 0.28s var(--ease-out-expo);
  user-select: none;
}

.keyboard-hints:hover {
  border-color: rgba(212, 175, 55, 0.45);
  box-shadow: 
    0 14px 40px rgba(0, 0, 0, 0.75),
    0 0 30px rgba(212, 175, 55, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

.keyboard-hints[dir="rtl"] {
  direction: rtl;
  font-family: var(--font-rtl);
}

.hint-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  padding: 3px 7px;
  border-radius: 999px;
  transition: all 0.2s var(--ease-out-expo);
  outline: none;
}

.hint-item:hover,
.hint-item:focus-visible {
  background: rgba(212, 175, 55, 0.14);
}

.hint-item:hover .hint-label,
.hint-item:focus-visible .hint-label {
  color: var(--gold-bright);
}

.hint-item:hover .kbd,
.hint-item:focus-visible .kbd {
  border-color: var(--gold-bright);
  color: #ffffff;
  box-shadow: 0 0 10px rgba(212, 175, 55, 0.45);
  transform: translateY(-1px);
}

.hint-label {
  font-family: var(--font-ui);
  font-size: 0.72rem;
  font-weight: 500;
  color: rgba(235, 238, 245, 0.72);
  transition: color 0.2s ease;
  line-height: 1;
}

.keyboard-hints[dir="rtl"] .hint-label {
  font-family: var(--font-rtl);
  font-size: 0.80rem;
}

.hint-sep {
  font-size: 0.52rem;
  color: rgba(212, 175, 55, 0.35);
  line-height: 1;
  user-select: none;
}

.kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border: 1px solid rgba(255, 255, 255, 0.20);
  border-bottom: 2px solid rgba(212, 175, 55, 0.45);
  border-radius: 5px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.03) 100%);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.67rem;
  font-weight: 600;
  color: var(--gold-bright);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.18);
  transition: all 0.2s var(--ease-out-expo);
  line-height: 1;
}

.keyboard-hints[dir="rtl"] .kbd {
  direction: ltr; /* keep keys like Esc, F, / in standard orientation */
}

@media (hover: hover) and (min-width: 900px) {
  .keyboard-hints {
    display: flex;
  }
}

@media (hover: hover) and (min-width: 768px) and (max-width: 899px) {
  .keyboard-hints {
    display: flex;
    padding: 5px 14px;
    gap: 8px;
    bottom: 72px;
  }
  .hint-label {
    font-size: 0.66rem;
  }
  .kbd {
    min-width: 17px;
    height: 17px;
    font-size: 0.62rem;
    padding: 0 4px;
  }
}

/* ================================================================
   ANIMATIONS
   ================================================================ */
@keyframes fadeInDown {
  from { opacity: 0; transform: translateY(-14px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ================================================================
   MOBILE OVERRIDES
   ================================================================ */
@media (max-width: 640px) {
  /* On mobile: stack hemistichs vertically */
  .poetry-bayt {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    margin-bottom: 10px;
  }

  .misra { text-align: center !important; }
  .bayt-divider { display: none; }
  .bayt-sep { margin: 6px 0; }

  .lang-nav-inner {
    gap: 6px;
    padding-block: 8px;
  }
  .lang-tab {
    padding: 6px 14px;
    min-height: 40px;
    font-size: 0.80rem;
  }
  .tab-native {
    font-size: 0.62rem;
    opacity: 0.75;
  }
  .tab-native[dir="rtl"] {
    font-size: 0.70rem;
  }
  .btn-share-lang {
    padding: 6px 12px;
    min-height: 36px;
    font-size: 0.72rem;
  }

  .filter-bar {
    gap: 10px;
    padding-block: 10px;
  }
  .search-wrap {
    max-width: none;
  }
  .search-input {
    padding-block: 8px;
    padding-inline-end: 42px;
    font-size: 0.80rem;
  }
  .search-kbd-hint {
    display: none;
  }
  .font-controls, .kurdish-script-toggle {
    padding: 3px 5px;
    gap: 4px;
  }
  .btn-font {
    width: 29px;
    height: 29px;
    font-size: 0.70rem;
  }
  .btn-script {
    height: 29px;
    padding: 0 10px;
    font-size: 0.70rem;
  }
  .font-size-pips {
    gap: 3px;
    padding-inline: 2px;
  }
  .font-pip {
    width: 4px;
    height: 4px;
  }

  .share-modal { border-radius: 14px; padding: 18px; }
  .modal-preview { text-align: center !important; }
  .social-grid { gap: 6px; margin: 12px 0; }
  .social-btn { width: 35px; height: 35px; }
  .social-btn svg { width: 16px; height: 16px; }

  .zen-card { padding: 24px 18px; }
  .zen-verse { font-size: 0.92rem; text-align: center !important; }
}

@media (max-width: 380px) {
  .lang-nav-inner {
    gap: 4px;
    padding-inline: 8px;
  }
  .lang-tab {
    padding: 5px 10px;
    font-size: 0.75rem;
    min-height: 36px;
  }
  .tab-native {
    font-size: 0.58rem;
  }
  .btn-share-lang {
    padding: 5px 9px;
  }
  .filter-bar {
    gap: 6px;
    padding-inline: 8px;
  }
  .search-input {
    padding-inline-start: 34px;
    padding-inline-end: 32px;
    font-size: 0.76rem;
  }
  .btn-font {
    width: 26px;
    height: 26px;
    font-size: 0.66rem;
  }
  .btn-script {
    height: 26px;
    padding: 0 8px;
    font-size: 0.66rem;
  }
  .font-pip {
    display: none;
  }
  .misra { font-size: 0.82rem; }
  .social-btn { width: 31px; height: 31px; }
  .social-btn svg { width: 14px; height: 14px; }
  .social-grid { gap: 4px; }
}

/* ================================================================
   PRINT
   ================================================================ */
@media print {
  .lang-nav-wrapper, .filter-bar, .card-actions,
  .card-footer, .btn-fal, .keyboard-hints,
  .modal-overlay, .zen-overlay { display: none !important; }

  .quatrain-card { break-inside: avoid; opacity: 1 !important; transform: none !important; }
  .card-outer { box-shadow: none; border: 1px solid #888; }
  .misra { color: #111 !important; text-shadow: none; }
  body { background: white; }
}

/* Premium Download Book Button */
.btn-download-book {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: transparent;
    color: var(--text-muted);
    border: 1px solid var(--border-color);
    padding: 6px 12px;
    border-radius: 4px;
    font-family: var(--font-mono);
    font-size: 0.8rem;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.2s ease;
    cursor: pointer;
}

.btn-download-book:hover {
    color: var(--gold-mid);
    border-color: var(--gold-mid);
    background: rgba(212, 175, 55, 0.05);
}