/* ════════════════════════════════════════════════════════════════
   جاویدنامان راه آزادی ایران — استایل اصلی
   طراحی: تیره، باوقار، یادبودی · با حال‌وهوای جان‌فشانی و آزادی
   ════════════════════════════════════════════════════════════════ */

/* ---------- پایه ---------- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
:root{
  --bg: #07090f;
  --bg2: #0b1020;
  --rose: #f43f5e;
  --rose-deep: #be123c;
  --gold: #f5c451;
  --purple: #a855f7;
  --green: #22c55e;
  --text: #e9ecf4;
  --muted: #9aa3b6;
  /* ---------- چیدمانِ دکمه‌های شناور (هماهنگ، بدون همپوشانی) ----------
     همهٔ دکمه‌های شناور از این متغیرها استفاده می‌کنند تا هرگز روی هم نیفتند.
     لبه‌ها امنِ دستگاه‌های دارای ناچ (safe-area) را هم رعایت می‌کنند. */
  --fab-gap: 12px;                                  /* فاصلهٔ عمودی میان دکمه‌ها */
  --fab-edge: calc(18px + env(safe-area-inset-right, 0px));   /* فاصله از راست */
  --fab-edge-left: calc(18px + env(safe-area-inset-left, 0px)); /* فاصله از چپ */
  --fab-bottom: calc(18px + env(safe-area-inset-bottom, 0px)); /* فاصله از پایین */
  --fab-h: 52px;     /* بلندیِ تقریبیِ دکمهٔ افزودنِ جاویدنام (لنگرِ پایین) */
  --nav-h: 44px;     /* بلندیِ دکمه‌های ناوبری (پرش/بالا) */
}
body {
  font-family: 'Vazirmatn', system-ui, sans-serif;
  direction: rtl;
  margin: 0;
  background: var(--bg);
  color: var(--text);
  line-height: 1.95;
  overflow-x: hidden;
}

/* ---------- پس‌زمینهٔ یادبودی متحرک ---------- */
.hero-bg {
  position: relative;
  background:
    radial-gradient(circle at 18% 15%, rgba(190,18,60,0.20), transparent 42%),
    radial-gradient(circle at 82% 22%, rgba(168,85,247,0.13), transparent 46%),
    radial-gradient(circle at 50% 88%, rgba(34,197,94,0.10), transparent 52%),
    linear-gradient(165deg, #07090f 0%, #0b1020 60%, #090c16 100%);
}
/* لایهٔ ذرات نور (شمع‌های دوردست) */
.hero-bg::before{
  content:"";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    radial-gradient(1.5px 1.5px at 12% 30%, rgba(245,196,81,.45), transparent),
    radial-gradient(1.5px 1.5px at 28% 70%, rgba(255,255,255,.30), transparent),
    radial-gradient(2px 2px at 55% 20%, rgba(244,63,94,.35), transparent),
    radial-gradient(1.5px 1.5px at 73% 60%, rgba(245,196,81,.40), transparent),
    radial-gradient(1.5px 1.5px at 90% 35%, rgba(255,255,255,.25), transparent),
    radial-gradient(1.5px 1.5px at 40% 88%, rgba(168,85,247,.30), transparent);
  animation: drift 22s ease-in-out infinite alternate;
}
@keyframes drift { from{transform:translateY(0)} to{transform:translateY(-18px)} }

/* محتوای بالای پس‌زمینه */
nav, header, section, footer, main { position: relative; z-index: 1; }

/* ---------- اسکرول‌بار ---------- */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: #0a0f1d; }
::-webkit-scrollbar-thumb { background: linear-gradient(#3a2030,#2d3a52); border-radius: 6px; }
::-webkit-scrollbar-thumb:hover { background: #5a2a3a; }

/* ---------- خط زمانی عمودی ---------- */
.timeline-line {
  position: absolute; right: 50%; top: 0; bottom: 0; width: 3px;
  background: linear-gradient(to bottom, var(--rose-deep), var(--purple), var(--green));
  transform: translateX(50%);
  box-shadow: 0 0 14px rgba(190,18,60,.4);
}
@media (max-width: 768px) {
  .timeline-line { right: 22px; transform: none; }
}

/* ---------- کارت‌ها ---------- */
.protest-card {
  background: rgba(17,23,40,0.66);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 18px;
  backdrop-filter: blur(10px);
  transition: transform .28s cubic-bezier(.2,.8,.2,1), box-shadow .28s, border-color .28s;
}
.protest-card:hover {
  transform: translateY(-5px);
  border-color: rgba(244,63,94,0.45);
  box-shadow: 0 16px 48px rgba(0,0,0,0.55), 0 0 0 1px rgba(244,63,94,.12);
}

/* نقطهٔ روی خط زمانی */
.tl-dot {
  width: 18px; height: 18px; border-radius: 50%;
  border: 3px solid var(--bg);
  box-shadow: 0 0 0 3px currentColor, 0 0 16px currentColor;
}

/* ---------- انیمیشن ورود ---------- */
.fade-in { animation: fadeIn .6s ease forwards; opacity: 0; transform: translateY(20px); }
@keyframes fadeIn { to { opacity: 1; transform: translateY(0); } }

.reveal { opacity:0; transform: translateY(26px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.8,.2,1); }
.reveal.in { opacity:1; transform:none; }

/* ---------- مودال ---------- */
.modal-backdrop { background: rgba(4,6,12,0.88); backdrop-filter: blur(7px); }
.modal-box {
  background: linear-gradient(165deg, #121a30, #0b1120);
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: 0 30px 90px rgba(0,0,0,.6);
  animation: modalPop .35s cubic-bezier(.2,.9,.2,1) both;
}
@keyframes modalPop { from{opacity:0; transform:scale(.94) translateY(10px)} to{opacity:1; transform:none} }

/* ---------- فیلتر فعال ---------- */
.filter-btn.active {
  background: linear-gradient(135deg, var(--rose-deep), #9f1239);
  color: #fff; border-color: transparent;
  box-shadow: 0 4px 16px rgba(190,18,60,.35);
}

/* ---------- badge دسته ---------- */
.cat-badge { font-size: 0.7rem; padding: 2px 10px; border-radius: 999px; }

/* ---------- عدد آماری بزرگ ---------- */
.stat-num {
  background: linear-gradient(135deg, var(--rose), var(--purple));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.stat-gold {
  background: linear-gradient(135deg, var(--gold), #ff8a4c);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ---------- تیتر فصل ---------- */
.section-title { display:flex; align-items:center; gap:12px; }
.section-title::before {
  content: ''; display: inline-block; width: 6px; height: 28px;
  background: linear-gradient(to bottom, var(--rose-deep), var(--purple));
  border-radius: 4px;
}

/* ════════════════════════════════════════════════════════════════
   شمع یادبود (CSS pure) — برای هدر صفحهٔ جاویدنام
   ════════════════════════════════════════════════════════════════ */
.candle-wrap{ position:relative; width:64px; height:96px; margin:0 auto; }
.candle-body{
  position:absolute; bottom:0; left:50%; transform:translateX(-50%);
  width:26px; height:56px; border-radius:6px 6px 3px 3px;
  background:linear-gradient(90deg,#d8c4a0,#f6ecd8 45%,#cdb893);
  box-shadow:inset -3px 0 6px rgba(0,0,0,.18), 0 0 22px rgba(245,196,81,.18);
}
.candle-flame{
  position:absolute; bottom:56px; left:50%; transform:translateX(-50%);
  width:16px; height:30px; border-radius:50% 50% 50% 50% / 60% 60% 40% 40%;
  background:radial-gradient(ellipse at 50% 75%, #fff7d6 0%, #ffd45e 35%, #ff8a2b 70%, #ff5a1f 100%);
  box-shadow:0 0 18px 6px rgba(255,168,43,.55), 0 0 42px 14px rgba(255,90,31,.30);
  transform-origin:50% 100%;
  animation:flicker 1.4s ease-in-out infinite alternate;
}
.candle-glow{
  position:absolute; bottom:42px; left:50%; transform:translateX(-50%);
  width:120px; height:120px; border-radius:50%;
  background:radial-gradient(circle, rgba(255,176,60,.30), transparent 65%);
  animation:glow 2.6s ease-in-out infinite alternate;
}
@keyframes flicker{
  0%{ transform:translateX(-50%) rotate(-2deg) scaleY(1); }
  50%{ transform:translateX(-52%) rotate(1.5deg) scaleY(1.08); }
  100%{ transform:translateX(-48%) rotate(-1deg) scaleY(.96); }
}
@keyframes glow{ from{opacity:.55; transform:translateX(-50%) scale(.92)} to{opacity:.9; transform:translateX(-50%) scale(1.06)} }

/* ---------- کارت چهره (جاویدنام) ---------- */
.jv-card{ animation: jvfade .3s ease both; }
@keyframes jvfade{ from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:none} }
.ev-btn.active, .verif-btn.active{
  background:rgba(244,63,94,0.18); border-color:rgba(244,63,94,0.45)!important; color:#fda4af;
}
.line-clamp-1{ display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden; }
.line-clamp-2{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.line-clamp-3{ display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }

/* عکس چهره با fallback */
.jv-photo{
  width:100%; aspect-ratio:1/1; object-fit:cover; border-radius:12px;
  background:#10162a; transition:transform .4s ease, filter .4s ease;
  filter:grayscale(.25) contrast(1.02);
}
.jv-card:hover .jv-photo{ transform:scale(1.04); filter:grayscale(0); }
.jv-photo-ph{
  width:100%; aspect-ratio:1/1; border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  background:radial-gradient(circle at 50% 35%, rgba(244,63,94,.10), rgba(17,23,40,.6));
  color:rgba(244,63,94,.45); font-size:2.2rem;
}

/* قاب نور دور کارت چهرهٔ سرشناس */
.jv-notable{ box-shadow:0 0 0 1px rgba(245,196,81,.30), 0 8px 30px rgba(245,196,81,.06); }
.jv-notable .jv-photo{ filter:grayscale(0) contrast(1.04); }

/* عکس در حال لود (lazy) */
img.jv-photo.lazy{ background:radial-gradient(circle at 50% 35%, rgba(244,63,94,.08), rgba(17,23,40,.6)); }

/* عکس بزرگ در مودال */
.jv-modal-photo-wrap{
  width:140px; height:140px; margin:0 auto; border-radius:20px; overflow:hidden;
  box-shadow:0 12px 40px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.06);
}
.jv-modal-photo{ width:100%; height:100%; object-fit:cover; }
.jv-modal-ph{
  width:140px; height:140px; margin:0 auto; border-radius:20px;
  display:flex; align-items:center; justify-content:center; font-size:3rem;
  background:radial-gradient(circle at 50% 35%, rgba(244,63,94,.12), rgba(17,23,40,.7));
  box-shadow:0 12px 40px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.06);
}

/* تاگل فیلتر (عکس‌دار/سرشناس) */
.jv-toggle{
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 12px; border-radius:999px; font-size:12px; cursor:pointer;
  border:1px solid rgba(255,255,255,.15); background:rgba(255,255,255,.02);
  color:#cbd2e0; transition:.2s;
}
.jv-toggle:hover{ background:rgba(255,255,255,.06); }
.jv-toggle.active{ background:rgba(245,196,81,.15); border-color:rgba(245,196,81,.4); color:#f5c451; }

/* ---------- پلیر آهنگ شناور ---------- */
#audio-dock{
  position:fixed; z-index:40; bottom:var(--fab-bottom); left:var(--fab-edge-left);
  display:flex; align-items:center; gap:10px;
  padding:9px 12px; border-radius:999px;
  background:rgba(12,16,28,.86); backdrop-filter:blur(14px);
  border:1px solid rgba(245,196,81,.22);
  box-shadow:0 10px 36px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.04);
  transition:transform .4s cubic-bezier(.2,.9,.2,1), opacity .45s ease, filter .45s ease, box-shadow .45s ease;
  max-width:calc(100vw - 36px);
  /* پیش‌فرض: نیمه‌شفاف و کمی محو تا مزاحم تماشای صفحه نباشد */
  opacity:.42;
  filter:saturate(.85);
}
/* فوکوس: با هاور، انتخاب با کیبورد/فوکوس داخلی، یا لمس موبایل (.active) */
#audio-dock:hover,
#audio-dock:focus-within,
#audio-dock.active{
  opacity:1;
  filter:none;
  box-shadow:0 14px 44px rgba(0,0,0,.55), 0 0 22px rgba(245,196,81,.3), 0 0 0 1px rgba(245,196,81,.4);
}
/* هنگام پخش، حضور ملایم‌تری دارد تا کاربر بداند آهنگ روشن است */
#audio-dock:not(.paused){ opacity:.55; }
#audio-dock:not(.paused):hover,
#audio-dock:not(.paused):focus-within,
#audio-dock:not(.paused).active{ opacity:1; }
#audio-dock.collapsed{ padding:8px; }
#audio-dock .ad-btn{
  width:38px; height:38px; border-radius:50%; flex:0 0 auto;
  display:flex; align-items:center; justify-content:center;
  border:none; cursor:pointer; color:#0a0e1a;
  background:radial-gradient(circle at 40% 35%, #ffe08a, #f5c451 60%, #e0a93a);
  box-shadow:0 0 16px rgba(245,196,81,.45);
  transition:transform .2s;
}
#audio-dock .ad-btn:hover{ transform:scale(1.08); }
#audio-dock .ad-eq{ display:flex; align-items:flex-end; gap:2px; height:18px; }
#audio-dock .ad-eq i{
  width:3px; background:#f5c451; border-radius:2px; height:6px;
  animation:eq 1s ease-in-out infinite;
}
#audio-dock .ad-eq i:nth-child(2){ animation-delay:.2s; }
#audio-dock .ad-eq i:nth-child(3){ animation-delay:.4s; }
#audio-dock .ad-eq i:nth-child(4){ animation-delay:.1s; }
#audio-dock.paused .ad-eq i{ animation-play-state:paused; height:6px; }
@keyframes eq{ 0%,100%{height:5px} 50%{height:18px} }
#audio-dock .ad-meta{ display:flex; flex-direction:column; line-height:1.25; min-width:0; }
#audio-dock .ad-title{ font-size:12.5px; font-weight:700; white-space:nowrap; }
#audio-dock .ad-sub{ font-size:10.5px; color:var(--muted); white-space:nowrap; }
#audio-dock .ad-x{
  width:24px;height:24px;border-radius:50%;border:none;cursor:pointer;flex:0 0 auto;
  background:rgba(255,255,255,.08); color:#cbd2e0; font-size:11px;
}
#audio-dock .ad-x:hover{ background:rgba(244,63,94,.25); color:#fff; }
#audio-dock .ad-info{
  width:24px;height:24px;border-radius:50%;border:none;cursor:pointer;flex:0 0 auto;
  background:rgba(255,255,255,.06); color:#9aa3b6; font-size:11px;
}
#audio-dock .ad-info:hover{ background:rgba(245,196,81,.2); color:#f5c451; }

/* دکمهٔ احیای پلیر (وقتی بسته شده) */
#audio-revive{
  position:fixed; z-index:40; bottom:var(--fab-bottom); left:var(--fab-edge-left); display:none;
  width:46px; height:46px; border-radius:50%; border:none; cursor:pointer;
  background:radial-gradient(circle at 40% 35%, #ffe08a, #f5c451 60%, #e0a93a);
  color:#0a0e1a; box-shadow:0 8px 28px rgba(0,0,0,.5), 0 0 18px rgba(245,196,81,.4);
  animation:pulseGold 2.4s ease-in-out infinite;
}
@keyframes pulseGold{ 0%,100%{box-shadow:0 8px 28px rgba(0,0,0,.5),0 0 14px rgba(245,196,81,.35)} 50%{box-shadow:0 8px 28px rgba(0,0,0,.5),0 0 26px rgba(245,196,81,.6)} }

@media (max-width:520px){
  #audio-dock .ad-meta{ display:none; }
}

/* ════════════════════════════════════════════════════════════════
   ریسپانسیو حرفه‌ای و پیشرفته — موبایل، تبلت، دسکتاپ و نمایشگرهای بزرگ
   ════════════════════════════════════════════════════════════════ */

/* --- موبایل کوچک (≤400px): فشرده‌سازی هدر و کارت‌ها --- */
@media (max-width:400px){
  header .candle-wrap{ width:52px; height:78px; }
  h1.text-4xl, h1{ font-size:2rem !important; }
  .jv-card{ padding:7px; }
  .jv-card h3{ font-size:13px; }
  #jv-footer-jump{ padding:9px 13px; font-size:12px; }
  #jv-footer-jump .jv-fj-text{ display:none; }
}

/* --- موبایل (≤640px): چیدمان تک‌ستونه‌ترِ کنترل‌ها --- */
@media (max-width:640px){
  :root{
    --fab-edge: calc(14px + env(safe-area-inset-right, 0px));
    --fab-edge-left: calc(14px + env(safe-area-inset-left, 0px));
    --fab-bottom: calc(14px + env(safe-area-inset-bottom, 0px));
  }
  .max-w-6xl, .max-w-4xl{ padding-left:14px; padding-right:14px; }
  header{ padding-top:8px; }
  /* پلیر صوتی کمی فشرده‌تر در گوشهٔ چپ (هماهنگ با متغیرها) */
  #audio-dock{ bottom:var(--fab-bottom); left:var(--fab-edge-left); padding:8px 10px; gap:8px; }
  #audio-revive{ bottom:var(--fab-bottom); left:var(--fab-edge-left); }
  /* راهنمای صدا بالای پلیر، بدونِ همپوشانی */
  #audio-hint{ bottom:calc(var(--fab-bottom) + 56px); left:var(--fab-edge-left); font-size:11.5px; padding:8px 13px; }
  /* مودال‌ها فضای بیشتری بگیرند */
  .modal-box{ padding:18px !important; }
  .jv-modal-photo-wrap, .jv-modal-ph{ width:118px; height:118px; }
}

/* --- موبایلِ کوچک (≤520px): دکمهٔ افزودن دایره‌ای و کوچک‌تر می‌شود --- */
@media (max-width:520px){
  :root{ --fab-h: 46px; }   /* دکمهٔ افزودن در این عرض دایره‌ای ~۴۶px است */
}

/* --- تبلت (641px–1023px): شبکهٔ سه‌ستونه و کنترل‌های متعادل --- */
@media (min-width:641px) and (max-width:1023px){
  #jv-grid{ gap:14px; }
}

/* --- دسکتاپ بزرگ (≥1536px): شبکهٔ پنج‌ستونه با فاصلهٔ بیشتر --- */
@media (min-width:1536px){
  #jv-grid{ gap:18px; }
}

/* --- نمایشگرهای فوق‌عریض (≥1800px): شش ستون --- */
@media (min-width:1800px){
  .max-w-6xl{ max-width:1500px; }
  #jv-grid{ grid-template-columns:repeat(6, minmax(0,1fr)); }
}

/* --- چیدمان افقی موبایل (landscape کوتاه): مودال اسکرول‌پذیر --- */
@media (max-height:480px) and (orientation:landscape){
  .modal-box{ max-height:96vh !important; }
  header{ padding-top:6px; padding-bottom:6px; }
}

/* --- بهبود لمس: هدف لمسی حداقل ۴۴px روی دستگاه‌های لمسی --- */
@media (hover:none) and (pointer:coarse){
  .ev-btn, .verif-btn, .jv-toggle, .jv-chip{ min-height:36px; }
  .jv-select{ min-height:42px; }
  .wallet-copy{ min-height:38px; }
}

/* --- جلوگیری از سرریز افقی متن آدرس کیف پول در صفحات بسیار باریک --- */
@media (max-width:360px){
  .wallet-row{ flex-direction:column; align-items:stretch; }
  .wallet-addr{ white-space:normal; word-break:break-all; font-size:10.5px; }
  .wallet-copy{ width:100%; }
}

/* ---------- نوار فیلتر هوشمند ---------- */
#jv-filterbar .jv-filterbar-inner{
  transition:background .3s, backdrop-filter .3s, box-shadow .3s;
  background:rgba(10,13,22,0.9); backdrop-filter:blur(14px);
  border-radius:18px;
}
/* بدنهٔ فیلترها هنگام جمع‌شدن دستی */
#jv-filter-body{
  overflow:hidden;
  max-height:800px; opacity:1;
  transition:max-height .45s ease, opacity .3s ease, margin .3s ease;
}
#jv-filterbar.filters-collapsed #jv-filter-body{
  max-height:0; opacity:0; margin-top:-4px;
}

/* ---------- منوهای انتخابی (Sort/فیلترها) ---------- */
.jv-select{
  appearance:none; -webkit-appearance:none;
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1);
  border-radius:12px; color:#e9ecf4; font-family:inherit;
  font-size:12.5px; padding:9px 14px 9px 12px; cursor:pointer;
  transition:border-color .2s, background .2s;
  max-width:100%;
}
.jv-select:hover{ background:rgba(255,255,255,.07); }
.jv-select:focus{ outline:none; border-color:rgba(244,63,94,.5); }
.jv-select option{ background:#0c1120; color:#e9ecf4; }

/* دکمهٔ پاک‌کردن جستجو */
.jv-search-clear{
  position:absolute; left:10px; top:50%; transform:translateY(-50%);
  width:24px; height:24px; border-radius:50%; border:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.08); color:#9aa3b6; font-size:11px; transition:.2s;
}
.jv-search-clear:hover{ background:rgba(244,63,94,.25); color:#fff; }

/* ---------- چیپ‌های فیلتر فعال ---------- */
.jv-chip{
  display:inline-flex; align-items:center; gap:6px;
  padding:5px 11px; border-radius:999px; font-size:12px; cursor:pointer;
  background:rgba(244,63,94,.12); border:1px solid rgba(244,63,94,.3);
  color:#fda4af; transition:.2s; font-family:inherit;
}
.jv-chip:hover{ background:rgba(244,63,94,.22); color:#fff; }
.jv-chip i{ font-size:10px; opacity:.85; }
.jv-chip-reset{
  background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.15); color:#cbd2e0;
}
.jv-chip-reset:hover{ background:rgba(255,255,255,.1); color:#fff; }

/* ---------- نشانگر «برای اطلاعات بیشتر» روی کارت ---------- */
.jv-hover-hint{
  position:absolute; inset:0; border-radius:12px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px;
  text-align:center; padding:12px;
  background:linear-gradient(to top, rgba(7,9,15,.92), rgba(7,9,15,.55));
  color:#fde8ec; font-size:11.5px; font-weight:600; line-height:1.6;
  opacity:0; transform:scale(1.02);
  transition:opacity .28s ease, transform .28s ease;
  pointer-events:none;
}
.jv-hover-hint i{
  font-size:1.5rem; color:#fda4af;
  filter:drop-shadow(0 0 10px rgba(244,63,94,.55));
}
.jv-card:hover .jv-hover-hint,
.jv-card:focus-visible .jv-hover-hint{ opacity:1; transform:scale(1); }
.jv-card:focus-visible{ outline:2px solid rgba(244,63,94,.6); outline-offset:2px; }
/* روی دستگاه‌های لمسی، هینت دائمی کوچک پایین کارت */
@media (hover:none){
  .jv-hover-hint{
    inset:auto 0 0 0; height:auto; padding:6px;
    background:linear-gradient(to top, rgba(7,9,15,.85), transparent);
    opacity:1; transform:none; flex-direction:row; gap:5px;
    font-size:9.5px; border-radius:0 0 12px 12px;
  }
  .jv-hover-hint i{ font-size:.85rem; }
  .jv-hover-hint span{ display:none; }
  .jv-hover-hint::after{ content:'جزئیات'; }
}

/* ---------- بخش «به‌زودی کامنت» در مودال ---------- */
.jv-comment-soon{
  display:flex; align-items:center; gap:12px;
  padding:13px 15px; border-radius:14px;
  background:rgba(168,85,247,.08); border:1px dashed rgba(168,85,247,.35);
}
.jv-comment-soon > i{ font-size:1.3rem; color:#c084fc; flex:0 0 auto; }
.jv-comment-soon strong{ display:block; font-size:13px; color:#e9ecf4; margin-bottom:2px; }
.jv-comment-soon span{ font-size:12px; color:#9aa3b6; }

/* ---------- دکمه‌های ناوبری حمایت/گیت‌هاب ---------- */
.nav-support{
  background:rgba(244,63,94,.14); color:#fda4af; border:1px solid rgba(244,63,94,.3);
}
.nav-support:hover{ background:rgba(244,63,94,.26); color:#fff; }
.nav-github{
  background:rgba(255,255,255,.06); color:#cbd2e0; border:1px solid rgba(255,255,255,.12);
}
.nav-github:hover{ background:rgba(255,255,255,.13); color:#fff; }

/* ════════════════════════════════════════════════════════════════
   ستونِ دکمه‌های شناورِ گوشهٔ پایین-راست (بدونِ همپوشانی)
   ----------------------------------------------------------------
   چیدمانِ عمودی از پایین به بالا:
     [۱] دکمهٔ «افزودنِ جاویدنام» (.cm-add-fab) — لنگرِ پایین
     [۲] دکمهٔ «پرش به فوتر»     (#jv-footer-jump) — بالای آن
     [۳] دکمهٔ «بازگشت به بالا»  (#jv-back-top)   — بالاترین
   چون دکمهٔ افزودن همیشه حاضر است، بقیه نسبت به آن بالاتر می‌نشینند.
   ════════════════════════════════════════════════════════════════ */

/* ---------- دکمهٔ پرش به فوتر (ردیفِ دومِ ستون) ---------- */
#jv-footer-jump{
  position:fixed; z-index:38;
  bottom:calc(var(--fab-bottom) + var(--fab-h) + var(--fab-gap));
  right:var(--fab-edge);
  display:flex; align-items:center; gap:8px;
  padding:11px 16px; border-radius:999px; border:none; cursor:pointer;
  font-family:inherit; font-size:13px; font-weight:700; color:#0a0e1a;
  background:linear-gradient(135deg, #fda4af, #f43f5e 70%);
  box-shadow:0 10px 30px rgba(244,63,94,.4), 0 0 0 1px rgba(255,255,255,.1);
  transition:transform .2s, box-shadow .25s;
}
#jv-footer-jump:hover{ transform:translateY(-3px); box-shadow:0 16px 40px rgba(244,63,94,.5); }
#jv-footer-jump i{ animation:fjBounce 1.6s ease-in-out infinite; }
@keyframes fjBounce{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(4px)} }

/* ---------- دکمهٔ بازگشت به بالا (ردیفِ سومِ ستون) ---------- */
#jv-back-top{
  position:fixed; z-index:38;
  bottom:calc(var(--fab-bottom) + var(--fab-h) + var(--fab-gap));
  right:var(--fab-edge);
  width:44px; height:44px; border-radius:50%; border:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center; font-size:16px;
  background:rgba(12,16,28,.86); backdrop-filter:blur(12px); color:#e9ecf4;
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 8px 24px rgba(0,0,0,.45);
  opacity:0; transform:translateY(20px) scale(.85); pointer-events:none;
  transition:opacity .3s, transform .3s, background .2s, bottom .25s;
}
#jv-back-top.show{ opacity:1; transform:none; pointer-events:auto; }
#jv-back-top:hover{ background:rgba(244,63,94,.25); border-color:rgba(244,63,94,.4); }
/* وقتی دکمهٔ «پرش به فوتر» هم دیده می‌شود، «بازگشت به بالا» یک ردیف بالاتر می‌رود */
#jv-footer-jump[style*="flex"] ~ #jv-back-top.show{
  bottom:calc(var(--fab-bottom) + var(--fab-h) + var(--nav-h) + var(--fab-gap) * 2);
}

/* ---------- نوار راهنمای صدا ---------- */
#audio-hint{
  position:fixed; z-index:41; bottom:calc(var(--fab-bottom) + 56px); left:var(--fab-edge-left);
  display:none; align-items:center; gap:9px;
  padding:9px 15px; border-radius:999px; border:none; cursor:pointer;
  font-family:inherit; font-size:12.5px; font-weight:600; color:#0a0e1a;
  background:linear-gradient(135deg, #ffe08a, #f5c451 70%);
  box-shadow:0 8px 26px rgba(245,196,81,.45);
  animation:hintPop .4s ease both;
}
#audio-hint.show{ display:flex; }
.audio-hint-pulse{
  display:flex; align-items:center; justify-content:center;
  width:22px; height:22px; border-radius:50%; background:rgba(10,14,26,.18);
  animation:hintPulse 1.4s ease-in-out infinite;
}
@keyframes hintPop{ from{opacity:0; transform:translateY(12px)} to{opacity:1; transform:none} }
@keyframes hintPulse{ 0%,100%{transform:scale(1)} 50%{transform:scale(1.18)} }

/* ---------- مودال حمایت ---------- */
.donate-box{ border-top:3px solid var(--rose); }
.donate-icon{
  width:58px; height:58px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; font-size:1.6rem;
  background:radial-gradient(circle at 40% 35%, rgba(244,63,94,.3), rgba(244,63,94,.1));
  color:#fda4af; border:1px solid rgba(244,63,94,.35);
  box-shadow:0 0 26px rgba(244,63,94,.25);
}
.wallet-card{
  background:rgba(255,255,255,.035); border:1px solid rgba(255,255,255,.1);
  border-radius:14px; padding:13px 14px; transition:border-color .2s, background .2s;
}
.wallet-card:hover{ border-color:rgba(244,63,94,.3); background:rgba(255,255,255,.05); }
.wallet-head{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:9px; flex-wrap:wrap; }
.wallet-net{ font-weight:800; font-size:13px; color:#f5c451; display:inline-flex; align-items:center; gap:6px; }
.wallet-tag{ font-size:10.5px; color:#9aa3b6; }
.wallet-row{ display:flex; align-items:center; gap:8px; }
.wallet-addr{
  flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  background:rgba(0,0,0,.3); border-radius:9px; padding:7px 10px;
  font-size:11.5px; color:#bcd; font-family:ui-monospace, monospace;
}
.wallet-copy{
  flex:0 0 auto; border:none; cursor:pointer; font-family:inherit;
  padding:7px 12px; border-radius:9px; font-size:11.5px; font-weight:700;
  background:rgba(244,63,94,.15); color:#fda4af; border:1px solid rgba(244,63,94,.3);
  transition:.2s; white-space:nowrap;
}
.wallet-copy:hover{ background:rgba(244,63,94,.28); color:#fff; }
.wallet-copy.copied{ background:rgba(34,197,94,.2); color:#86efac; border-color:rgba(34,197,94,.4); }

/* ---------- نشانگر لود خودکار (اسکرول بی‌نهایت) ---------- */
.jv-loader{
  display:flex; align-items:center; justify-content:center; gap:8px;
  padding:26px 0 8px; color:var(--muted); font-size:13px;
}
.jv-loader .jv-dot{
  width:8px; height:8px; border-radius:50%;
  background:radial-gradient(circle at 40% 35%, #ffe08a, #f5c451 70%);
  animation:jvBounce 1s ease-in-out infinite;
}
.jv-loader .jv-dot:nth-child(2){ animation-delay:.15s; }
.jv-loader .jv-dot:nth-child(3){ animation-delay:.3s; }
.jv-loader .jv-loader-text{ margin-right:6px; }
@keyframes jvBounce{ 0%,100%{ transform:translateY(0); opacity:.5; } 50%{ transform:translateY(-7px); opacity:1; } }

/* ---------- پیام پایان فهرست ---------- */
.jv-end{
  display:flex; align-items:center; justify-content:center; gap:9px;
  padding:34px 0 10px; color:#d7c7a8; font-size:14px;
}
.jv-end i{ color:#f5c451; }

/* ---------- مودال توضیح آهنگ ---------- */
.music-note-box{ border-right:3px solid var(--gold); }

/* ---------- لینک‌های یادبود در مودال ---------- */
.mem-link{
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 12px; border-radius:10px; font-size:12.5px;
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1);
  color:#bcd; text-decoration:none; transition:.2s;
}
.mem-link:hover{ background:rgba(244,63,94,.16); border-color:rgba(244,63,94,.35); color:#fda4af; }

/* ---------- خط جداکنندهٔ تزئینی ---------- */
.divider-glow{
  height:1px; border:0; margin:0;
  background:linear-gradient(90deg, transparent, rgba(244,63,94,.5), rgba(168,85,247,.4), transparent);
}

/* ---------- متن نقل‌قول یادبود ---------- */
.memorial-quote{
  font-size:1.05rem; color:#d7c7a8; font-style:normal;
  text-shadow:0 0 30px rgba(245,196,81,.15);
}

/* احترام به کاربرانی که انیمیشن کمتری می‌خواهند */
@media (prefers-reduced-motion: reduce){
  .hero-bg::before, .candle-flame, .candle-glow, #audio-dock .ad-eq i, #audio-revive, .jv-loader .jv-dot { animation:none !important; }
  .reveal{ opacity:1; transform:none; transition:none; }
  #jv-filterbar{ transition:none; }
}