/* فونت‌های محلی - بدون CDN. تمام فایل‌های ttf در public/fonts قرار دارند. */
@font-face {
    font-family: 'Vazirmatn';
    font-style: normal;
    font-weight: 400;
    src: url('/fonts/vazirmatn-regular.ttf') format('truetype');
    font-display: swap;
}
@font-face {
    font-family: 'Vazirmatn';
    font-style: normal;
    font-weight: 600;
    src: url('/fonts/vazirmatn-semibold.ttf') format('truetype');
    font-display: swap;
}
@font-face {
    font-family: 'Vazirmatn';
    font-style: normal;
    font-weight: 700;
    src: url('/fonts/vazirmatn-bold.ttf') format('truetype');
    font-display: swap;
}
@font-face {
    font-family: 'Amiri';
    font-style: normal;
    font-weight: 400;
    src: url('/fonts/amiri-regular.ttf') format('truetype');
    font-display: swap;
}
@font-face {
    font-family: 'Amiri';
    font-style: normal;
    font-weight: 700;
    src: url('/fonts/amiri-bold.ttf') format('truetype');
    font-display: swap;
}

:root {
    --bg: #f5f7fb;
    --panel: #ffffff;
    --text: #1c2230;
    --muted: #5b6779;
    --border: #d9e0ea;
    --primary: #1f7a3a;
    --primary-soft: #e6f3ea;
    --accent: #1e6fbf;
    --warning: #e65100;
    --hero-num: #e0432a;
    --shadow: 0 1px 3px rgba(20, 30, 60, .08);
    --highlight: #b9f6ca;
    --highlight2: #ffe082;
    --highlight3: #ce93d8;
    --ayah-color: #0d2818;            /* سبز تیره مایل به مشکی برای آیه‌ی عربی */
    --sun-glow: #fff4b3;
    --sun-glow-2: #ffd966;
    --header-yellow: #fff7c2;
    --header-yellow-2: #ffe572;
    --hero-blue: #1976d2;
    --hero-blue-soft: #e3f2fd;
}
[data-theme="dark"] {
    --bg: #11151c;
    --panel: #1c222b;
    --text: #e8ebf1;
    --muted: #9aa3b3;
    --border: #2a313c;
    --primary: #62c277;
    --primary-soft: #1e3a23;
    --accent: #64b5f6;
    --hero-num: #ff7043;
    --highlight: #2e7d32;
    --highlight2: #b07d00;
    --highlight3: #6a1b9a;
    --ayah-color: #c8e6c9;
    --header-yellow: #2a2410;
    --header-yellow-2: #3d3010;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
    font-family: 'Vazirmatn', Tahoma, sans-serif;
    background: var(--bg);
    color: var(--text);
    line-height: 1.7;
    font-size: 15px;
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ===== هدر با تم زرد و افکت خورشید ===== */
.topbar {
    position: relative;
    display: flex; justify-content: space-between; align-items: center;
    padding: 14px 24px;
    background: linear-gradient(180deg, var(--header-yellow-2) 0%, var(--header-yellow) 100%);
    border-bottom: 1px solid #f0d040;
    box-shadow: 0 2px 6px rgba(180, 140, 0, 0.18);
    overflow: visible;
    z-index: 5;
}
.topbar::before {
    /* درخشش خورشیدی پشت برند — کمرنگ‌تر، مایل به سفید-زرد طبیعی */
    content: '';
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 280px;
    height: 220px;
    background: radial-gradient(circle, rgba(255, 244, 179, 0.70) 0%, rgba(255, 217, 102, 0.30) 35%, rgba(255, 244, 179, 0) 72%);
    pointer-events: none;
    z-index: 0;
}
.topbar > * { position: relative; z-index: 1; }
.topbar nav a, .topbar nav button.link { margin-left: 16px; color: #4a3500; font-weight: 600; }
.topbar nav a:hover { color: #1c2230; text-decoration: none; }
.brand { display: flex; align-items: center; gap: 14px; flex-wrap: nowrap; min-width: 0; }
.brand a { color: #1c2230; text-decoration: none; }
.brand-title { min-width: 0; }
.brand-khorshid, .brand-abjad { white-space: nowrap; }
@media (max-width: 700px) {
    .topbar { flex-wrap: wrap; padding: 10px 12px; gap: 8px; }
    .topbar nav { display: flex; flex-wrap: wrap; gap: 4px 12px; width: 100%; }
    .topbar nav a, .topbar nav button.link { margin-left: 0; font-size: 14px; }
    .brand-khorshid { font-size: 19px; }
    .brand-abjad { font-size: 13px; }
    .brand-sun { width: 36px; height: 36px; }
    .topbar::before { width: 200px; height: 160px; opacity: 0.6; }
}
.brand-sun {
    display: inline-block;
    width: 42px; height: 42px;
    border-radius: 50%;
    /* قرص خورشید پررنگ، اما هاله/اشعه‌های اطراف ملایم‌تر و سفید-زرد طبیعی */
    background: radial-gradient(circle, #fff 0%, #fff2a8 40%, #ffd966 75%);
    box-shadow: 0 0 14px 4px rgba(255, 230, 130, 0.45), 0 0 26px 10px rgba(255, 244, 179, 0.30);
    flex-shrink: 0;
}
.brand-title { display: flex; flex-direction: column; line-height: 1.1; }
.brand-khorshid {
    font-size: 22px;
    font-weight: 800;
    color: #6a4400;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.7);
    letter-spacing: 0.5px;
}
.brand-abjad {
    font-size: 15px;
    font-weight: 700;
    /* متمایز از «خورشید آتلانتیس»: مایل به آبی-سبز برای جدا شدن دو هویت */
    color: #1565c0;
    margin-top: 2px;
    letter-spacing: 0.3px;
}
[data-theme="dark"] .brand-khorshid { color: #ffd54a; text-shadow: none; }
[data-theme="dark"] .brand-abjad { color: #64b5f6; }
[data-theme="dark"] .topbar nav a, [data-theme="dark"] .topbar nav button.link { color: #ffd54a; }

button.link { background: none; border: none; color: var(--accent); cursor: pointer; font: inherit; padding: 0; }
.container { max-width: 1100px; margin: 24px auto; padding: 0 16px; }
.alert { padding: 10px 16px; border-radius: 8px; margin: 12px 0; }
.alert-success { background: var(--primary-soft); color: var(--primary); border: 1px solid var(--primary); }
.alert-error { background: #fdecea; color: #b71c1c; border: 1px solid #b71c1c; }
[data-theme="dark"] .alert-error { background: #3a1a1a; color: #ffab91; }

.card {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 18px;
    margin-bottom: 16px;
    box-shadow: var(--shadow);
}
.grid { display: grid; gap: 14px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 800px) { .grid-2, .grid-4 { grid-template-columns: 1fr; } }

label { display: block; font-size: 13px; color: var(--muted); margin-bottom: 4px; }
input[type=text], input[type=email], input[type=password], input[type=number], textarea, select {
    width: 100%; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px;
    background: var(--panel); color: var(--text); font: inherit;
}
button.btn, .btn {
    background: var(--primary); color: #fff; border: 0; padding: 8px 18px; border-radius: 8px; cursor: pointer; font: inherit;
}
.btn.secondary { background: var(--accent); }
.btn.danger { background: #c62828; }
.btn.outline { background: transparent; color: var(--text); border: 1px solid var(--border); }

table { width: 100%; border-collapse: collapse; background: var(--panel); border-radius: 8px; overflow: hidden; }
th, td { padding: 10px; border-bottom: 1px solid var(--border); text-align: right; }
th { background: var(--bg); font-weight: 600; }

.search-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
@media (max-width: 700px) { .search-grid { grid-template-columns: 1fr; } }
.search-box { display: grid; grid-template-columns: 1fr auto; gap: 6px; align-items: end; }

/* ===== سوره و آیه ===== */
.surah-header { padding: 10px 14px; background: var(--primary-soft); border-radius: 8px; cursor: pointer; display: flex; justify-content: space-between; align-items: center; }
.count-badge {
    background: var(--primary); color: #fff; padding: 4px 14px; border-radius: 999px;
    font-size: 14px; font-weight: 700;
}
.ayah-card { background: var(--panel); border: 1px solid var(--border); border-radius: 8px; padding: 12px; margin: 8px 0; }

/* آیه‌ی عربی: سبز تیره مایل به مشکی، پررنگ، بالای کارت */
.ayah-text {
    font-family: 'Amiri', 'Vazirmatn', serif;
    font-size: 30px;
    font-weight: 700;
    line-height: 2.2;
    direction: rtl;
    color: var(--ayah-color);
}
.ayah-text.big {
    font-size: 36px;
    font-weight: 800;
    line-height: 2.4;
    letter-spacing: 0.5px;
    margin: 6px 0 14px;
    padding: 10px 12px;
    background: linear-gradient(180deg, rgba(255, 247, 194, 0.35) 0%, rgba(255, 255, 255, 0) 100%);
    border-radius: 10px;
    border-bottom: 2px solid rgba(13, 40, 24, 0.10);
}
[data-theme="dark"] .ayah-text.big {
    background: linear-gradient(180deg, rgba(255, 213, 74, 0.10) 0%, rgba(255,255,255,0) 100%);
    border-bottom-color: rgba(200, 230, 201, 0.15);
}
@media (max-width: 700px) {
    .ayah-text { font-size: 24px; }
    .ayah-text.big { font-size: 28px; }
}

/* رنگ‌های آبرنگی - یکدست در همه‌ی بخش‌ها */
.match { background: var(--highlight); color: inherit; padding: 0 2px; border-radius: 3px; }
.match.alt { background: var(--highlight2); }
.match.alt2 { background: var(--highlight3); }
.meta { color: var(--muted); font-size: 13px; margin-top: 6px; }

/* جستجوی صفحهٔ اصلی — کادر آبی متناسب با خورشید */
.search-hero {
    background: linear-gradient(180deg, #e3f2fd 0%, #f6fbff 100%);
    border-color: #90caf9;
}
.search-hero h2 { color: #0d47a1; }
[data-theme="dark"] .search-hero {
    background: linear-gradient(180deg, #0f2236 0%, #11151c 100%);
    border-color: #1e6fbf;
}
[data-theme="dark"] .search-hero h2 { color: #64b5f6; }
.hero-num { color: var(--hero-num); font-weight: 800; font-size: 1.25em; letter-spacing: 1px; }
.mode-label { display: inline-block; margin-right: 6px; padding: 2px 10px; border-radius: 999px; font-size: 15px; font-weight: 800; letter-spacing: .5px; }
.kabir-label { background: var(--primary-soft); color: var(--primary); }
.saghir-label { background: #fff3e0; color: #e65100; }
[data-theme="dark"] .saghir-label { background: #4a2a00; color: #ffb74d; }

/* کلمه‌های ورودی محاسبه‌گر — متن آبرنگی بدون کادر مربعی */
.word-chip {
    display: inline-block;
    margin: 0 6px 4px;
    padding: 0;
    background: none !important;
    border: none;
    font-family: 'Amiri', 'Vazirmatn', serif;
    line-height: 1.8;
    font-weight: 700;
}
.word-chip .word-sum { display: none; }
.word-chip-0 { color: #1b5e20; }
.word-chip-1 { color: #b35a00; }
.word-chip-2 { color: #6a1b9a; }
.word-chip-3 { color: #0d47a1; }
[data-theme="dark"] .word-chip-0 { color: #a5d6a7; }
[data-theme="dark"] .word-chip-1 { color: #ffcc80; }
[data-theme="dark"] .word-chip-2 { color: #ce93d8; }
[data-theme="dark"] .word-chip-3 { color: #90caf9; }

/* رنگ‌بندی متفاوت برای کادرهای چهار سیستم ابجد */
.abjad-card { border-width: 1px; }
.abjad-card-0 { background: linear-gradient(180deg, #eaf3fb 0%, #ffffff 100%); }
.abjad-card-1 { background: linear-gradient(180deg, #eef7ee 0%, #ffffff 100%); }
.abjad-card-2 { background: linear-gradient(180deg, #fdf3e7 0%, #ffffff 100%); }
.abjad-card-3 { background: linear-gradient(180deg, #f4ecfb 0%, #ffffff 100%); }
[data-theme="dark"] .abjad-card-0 { background: linear-gradient(180deg, #182230 0%, #1f242b 100%); }
[data-theme="dark"] .abjad-card-1 { background: linear-gradient(180deg, #1b2a1d 0%, #1f242b 100%); }
[data-theme="dark"] .abjad-card-2 { background: linear-gradient(180deg, #2a2018 0%, #1f242b 100%); }
[data-theme="dark"] .abjad-card-3 { background: linear-gradient(180deg, #251a2e 0%, #1f242b 100%); }

.surah-block > .surah-header {
    background: #d4edda; color: #052010; font-weight: 800;
    border: 1px solid #b6dfc1;
}
[data-theme="dark"] .surah-block > .surah-header { background: #1e3a23; color: #c8e6c9; }
.surah-block > .surah-header strong { color: #052010; }
[data-theme="dark"] .surah-block > .surah-header strong { color: #c8e6c9; }

.result-list { list-style: none; padding: 0; margin: 8px 0; }
.result-list li { padding: 6px 0; border-bottom: 1px dashed var(--border); word-wrap: break-word; overflow-wrap: anywhere; }

/* حروف به سبک ابجدی: «الف باء جیم» */
.abjad-letters {
    font-family: 'Amiri', 'Scheherazade New', serif;
    font-size: 22px;
    font-weight: 700;
    color: var(--primary);
    direction: rtl;
    word-spacing: 6px;
}
.abjad-letters .ltr-piece { display: inline-block; margin: 0 4px; }
.match-letters {
    font-family: 'Amiri', 'Scheherazade New', serif;
    font-size: 22px;
    font-weight: 700;
    margin-left: 10px;
    color: var(--primary);
    direction: rtl;
}
.match-joined { font-family: 'Amiri', 'Scheherazade New', serif; font-size: 20px; direction: rtl; }
.match-original {
    font-family: 'Amiri', 'Scheherazade New', serif;
    font-size: 22px;
    direction: rtl;
    color: var(--ayah-color);
    background: rgba(46, 125, 50, 0.08);
    padding: 4px 8px;
    border-radius: 6px;
    display: inline-block;
}

/* تکرار آیه برای هر نتیجه + هایلایت آبرنگیِ کم‌رنگ */
.per-match-list { margin-top: 10px; border-top: 1px solid var(--border); padding-top: 8px; }
.per-match-row { padding: 6px 0; border-bottom: 1px dashed var(--border); }

/* جستجوی آزاد و جستجو در یک آیه: حذف کادرها — فقط متن رنگی */
.in-ayah-results .abjad-card-bare,
.free-search-results .abjad-card-bare {
    background: transparent !important;
    border: none !important;
    box-shadow: none;
    padding: 14px 4px;
    margin-top: 18px;
}
.free-search-results .per-match-list,
.in-ayah-results .per-match-list {
    border-top: none;
}
.free-search-results .per-match-row,
.in-ayah-results .per-match-row {
    border-bottom: none;
    padding: 4px 0;
}
.per-match-label { margin-bottom: 4px; }
.ayah-text.watercolor { font-weight: 700; }
.match.wc { background: rgba(46, 125, 50, 0.18); padding: 2px 3px; border-radius: 4px; }
.match.wc.alt { background: rgba(255, 152, 0, 0.20); }
.match.wc.alt2 { background: rgba(156, 39, 176, 0.18); }
[data-theme="dark"] .match.wc { background: rgba(102, 187, 106, 0.30); }
[data-theme="dark"] .match.wc.alt { background: rgba(255, 167, 38, 0.30); }
[data-theme="dark"] .match.wc.alt2 { background: rgba(186, 104, 200, 0.30); }

/* اطمینان از wrap در موبایل برای متن‌های طولانی */
.ayah-text, .ayah-card, .card { word-wrap: break-word; overflow-wrap: anywhere; }

details { margin: 6px 0; }
details > summary { cursor: pointer; color: var(--accent); }
details.surah-block { border: 1px solid #b6dfc1; }
[data-theme="dark"] details.surah-block { border-color: #2a4a30; }

.admin-body { background: var(--bg); }
.admin-shell { display: grid; grid-template-columns: 240px 1fr; gap: 0; min-height: calc(100vh - 60px); }
@media (max-width: 800px) { .admin-shell { grid-template-columns: 1fr; } }
.sidebar { background: var(--panel); border-left: 1px solid var(--border); padding: 16px 0; }
.sidebar ul { list-style: none; padding: 0; margin: 0; }
.sidebar a { display: block; padding: 10px 18px; color: var(--text); }
.sidebar a:hover, .sidebar a.active { background: var(--primary-soft); color: var(--primary); border-right: 3px solid var(--primary); }
.admin-content { padding: 24px; }

.kbd { font-family: monospace; background: var(--bg); padding: 1px 6px; border-radius: 4px; border: 1px solid var(--border); }
.tag { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 12px; }
.tag.green { background: var(--primary-soft); color: var(--primary); }
.tag.gray { background: var(--bg); color: var(--muted); }
.tag.red { background: #fdecea; color: #b71c1c; }
.tag.blue { background: #e3f2fd; color: #0d47a1; }
.tag.purple { background: #f3e5f5; color: #6a1b9a; }
.tag.orange { background: #fff3e0; color: #e65100; }
.tag.gold { background: #fff8dc; color: #8a6d00; border: 1px solid #d4a017; }
.tag.teal { background: #e0f2f1; color: #00695c; }
[data-theme="dark"] .tag.red { background: #3a1a1a; color: #ffab91; }
[data-theme="dark"] .tag.blue { background: #15293c; color: #90caf9; }
[data-theme="dark"] .tag.purple { background: #2a1a35; color: #ce93d8; }
[data-theme="dark"] .tag.orange { background: #3d2810; color: #ffb74d; }
[data-theme="dark"] .tag.gold { background: #3d3010; color: #ffd54f; border-color: #b8860b; }
[data-theme="dark"] .tag.teal { background: #102a28; color: #80cbc4; }
.tag.big { font-size: 16px; padding: 6px 14px; font-weight: 800; }
.tag.bigger { font-size: 18px; padding: 8px 16px; font-weight: 800; }

/* عنوان نتایج — عدد جستجوشده، سیستم ابجد و حالت کبیر/صغیر هر کدام رنگی */
.results-heading { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0; font-size: 22px; }
.results-heading .label { color: var(--muted); font-weight: 600; }
.results-heading .num {
    color: #c62828; font-weight: 900; font-size: 1.4em; letter-spacing: 1px;
    background: #fdecea; padding: 2px 14px; border-radius: 8px;
}
.results-heading .system { color: #0d47a1; font-weight: 800; background: #e3f2fd; padding: 2px 12px; border-radius: 8px; }
.results-heading .mode-kabir { color: #1f7a3a; font-weight: 800; background: #e6f3ea; padding: 2px 12px; border-radius: 8px; }
.results-heading .mode-saghir { color: #e65100; font-weight: 800; background: #fff3e0; padding: 2px 12px; border-radius: 8px; }
[data-theme="dark"] .results-heading .num { background: #3a1a1a; color: #ff7043; }
[data-theme="dark"] .results-heading .system { background: #15293c; color: #90caf9; }
[data-theme="dark"] .results-heading .mode-kabir { background: #1e3a23; color: #c8e6c9; }
[data-theme="dark"] .results-heading .mode-saghir { background: #3d2810; color: #ffb74d; }

/* نقطهٔ آنلاین/آفلاین برای فهرست کاربران ادمین */
.online-dot {
    display: inline-block; width: 10px; height: 10px; border-radius: 50%;
    margin-left: 4px; vertical-align: middle;
}
.online-dot.online { background: #2e7d32; box-shadow: 0 0 0 2px rgba(46,125,50,0.18); animation: online-pulse 2s infinite; }
.online-dot.offline { background: #9e9e9e; }
@keyframes online-pulse {
    0%, 100% { box-shadow: 0 0 0 2px rgba(46,125,50,0.18); }
    50% { box-shadow: 0 0 0 5px rgba(46,125,50,0.30); }
}

/* badge قرمز کنار آیتم‌های ناوبری (شبیه واتساپ) */
.nav-with-badge { position: relative; display: inline-flex; align-items: center; gap: 6px; }
.badge {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 20px; height: 20px; padding: 0 6px;
    border-radius: 999px; font-size: 12px; font-weight: 800; line-height: 1;
}
.badge.red { background: #e53935; color: #fff; box-shadow: 0 1px 3px rgba(229,57,53,0.4); }
.badge.green { background: #2e7d32; color: #fff; }
.sidebar .badge { margin-right: 6px; }

/* قابلیت کپی - دکمهٔ کوچک کنار رشتهٔ حروف */
.copy-btn {
    display: inline-block; margin-right: 8px; padding: 2px 10px;
    font-size: 12px; background: var(--bg); color: var(--text);
    border: 1px solid var(--border); border-radius: 6px; cursor: pointer; font: inherit;
}
.copy-btn:hover { background: var(--primary-soft); color: var(--primary); }
.copy-btn.copied { background: var(--primary); color: #fff; }

/* صندوق نتایج جستجوی قرآن - برجسته‌تر */
.quran-search-card { border: 2px solid var(--primary); }
.search-hit { background: #ffeb3b; color: #000; padding: 0 2px; border-radius: 3px; font-weight: 700; }

/* ===== صفحه‌ی ورود/ثبت‌نام با برندینگ ===== */
.auth-hero {
    text-align: center;
    padding: 30px 16px 10px;
    margin: 30px auto 16px;
    max-width: 480px;
}
.auth-hero .brand-sun { width: 90px; height: 90px; margin: 0 auto 12px; }
.auth-hero .brand-khorshid { font-size: 36px; color: #6a4400; }
.auth-hero .brand-abjad { font-size: 22px; color: #1565c0; margin-top: 6px; }
[data-theme="dark"] .auth-hero .brand-khorshid { color: #ffd54a; }
[data-theme="dark"] .auth-hero .brand-abjad { color: #64b5f6; }

/* ===== پیام خوش‌آمد و تصویر اوورلی ===== */
.welcome-overlay {
    position: fixed; inset: 0; z-index: 9999;
    background: rgba(0, 0, 0, 0.85);
    display: flex; align-items: center; justify-content: center;
    opacity: 0;
    transition: opacity 0.6s ease-in-out;
    pointer-events: none;
}
.welcome-overlay.visible { opacity: 1; pointer-events: auto; }
.welcome-overlay img { max-width: 100%; max-height: 100%; object-fit: contain; }

.welcome-msg {
    /* درون جریان صفحه — بالای کارت‌های پشتیبانی، با امکان بستن دستی */
    position: relative;
    margin: 14px auto;
    z-index: 5;
    background: linear-gradient(180deg, rgba(207, 232, 252, 0.96), rgba(225, 240, 255, 0.96));
    color: #0f1a2c;
    border: 1px solid #88baef;
    border-radius: 14px;
    padding: 14px 44px 14px 22px;
    max-width: min(720px, 92vw);
    box-shadow: 0 4px 18px rgba(20, 60, 110, 0.18);
    opacity: 0;
    transition: opacity 0.5s ease-in-out, max-height 0.5s ease;
    text-align: center;
    font-weight: 600;
}
.welcome-msg.visible { opacity: 1; }
.welcome-msg .close {
    position: absolute; top: 6px; left: 10px;
    background: none; border: 0; cursor: pointer;
    color: #0f1a2c; font-size: 18px; font-weight: 700; line-height: 1;
}

/* پیام ادمین (۳۰ ثانیه‌ای) */
.admin-notice {
    position: fixed; left: 50%; bottom: 24px;
    transform: translateX(-50%);
    z-index: 9000;
    background: rgba(255, 247, 200, 0.78);
    border: 1px dashed #d4a017;
    color: #4a3500;
    border-radius: 12px;
    padding: 12px 22px;
    max-width: min(680px, 92vw);
    box-shadow: 0 4px 16px rgba(120, 90, 0, 0.15);
    backdrop-filter: blur(2px);
    opacity: 0.78;
    transition: opacity 0.4s;
}
.admin-notice .close {
    background: none; border: 0; cursor: pointer; color: #4a3500;
    margin-right: 10px; font-weight: 700;
}

/* ===== پنل تیکت/پشتیبانی ===== */
.support-shell { max-width: 880px; margin: 24px auto; padding: 0 16px; }
.support-card { background: var(--panel); border-radius: 14px; padding: 22px; box-shadow: var(--shadow); border: 1px solid var(--border); }
.broadcast-card {
    background: linear-gradient(180deg, #fff7d6 0%, #fffdf0 100%);
    border: 1px solid #f0d97a;
    border-radius: 14px;
    padding: 16px 20px;
    margin-bottom: 16px;
}
[data-theme="dark"] .broadcast-card { background: linear-gradient(180deg, #2a2410 0%, #11151c 100%); border-color: #4d3d10; }
.trial-expired-banner {
    background: linear-gradient(180deg, #fdecea 0%, #fff5f4 100%);
    border: 1px solid #e57373;
    border-right: 4px solid #b71c1c;
    border-radius: 14px;
    padding: 16px 20px;
    margin-bottom: 16px;
    color: #b71c1c;
}
[data-theme="dark"] .trial-expired-banner { background: linear-gradient(180deg, #3a1a1a 0%, #11151c 100%); border-color: #b71c1c; color: #ffab91; }
.ticket-msg-mine { background: var(--primary-soft); border: 1px solid var(--primary); padding: 10px 14px; border-radius: 12px 12px 2px 12px; margin: 6px 0 6px 60px; }
.ticket-msg-admin { background: #e3f2fd; border: 1px solid #64b5f6; padding: 10px 14px; border-radius: 12px 12px 12px 2px; margin: 6px 60px 6px 0; }
[data-theme="dark"] .ticket-msg-admin { background: #15293c; border-color: #1e6fbf; }
.ticket-msg .meta { font-size: 11px; }
.ticket-status {
    display: inline-block; padding: 3px 12px; border-radius: 999px; font-size: 12px; font-weight: 700;
}
.ticket-status.open { background: #e6f3ea; color: #1f7a3a; }
.ticket-status.answered { background: #e3f2fd; color: #1e6fbf; }
.ticket-status.closed { background: #f5f5f5; color: #666; }

/* فرم ساده با بک‌آپ خودکار */
[data-persist-form] textarea, [data-persist-form] input[type=text] { width: 100%; }

/* ===== نشان‌گر اشتراک در هدر ===== */
.header-status { display: inline-flex; gap: 8px; align-items: center; margin-right: 12px; }
.sub-badge {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 12px; border-radius: 999px;
    font-weight: 800; font-size: 13px; text-decoration: none;
    border: 1px solid transparent;
}
.sub-badge .sub-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.sub-badge .sub-num { font-size: 16px; }
.sub-badge.green { background: #e6f3ea; color: #1f7a3a; border-color: #b6dfc1; }
.sub-badge.green .sub-dot { background: #2e7d32; box-shadow: 0 0 0 2px rgba(46,125,50,0.18); }
.sub-badge.red { background: #fdecea; color: #b71c1c; border-color: #f5c6c2; animation: sub-pulse 1.4s infinite; }
.sub-badge.red .sub-dot { background: #e53935; box-shadow: 0 0 0 2px rgba(229,57,53,0.20); }
[data-theme="dark"] .sub-badge.green { background: #1e3a23; color: #c8e6c9; border-color: #2a4a30; }
[data-theme="dark"] .sub-badge.red { background: #3a1a1a; color: #ffab91; border-color: #5a2a2a; }
@keyframes sub-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(229,57,53,0.4); }
    50% { box-shadow: 0 0 0 6px rgba(229,57,53,0.0); }
}
.trial-timer {
    display: inline-flex; gap: 4px; align-items: center;
    padding: 4px 10px; border-radius: 999px;
    background: #fdecea; color: #b71c1c; border: 1px solid #f5c6c2;
    font-weight: 800; font-size: 13px;
    font-variant-numeric: tabular-nums;
}
.trial-timer.trial-end { background: #c62828; color: #fff; }
[data-theme="dark"] .trial-timer { background: #3a1a1a; color: #ffab91; border-color: #5a2a2a; }

/* ===== پنل وضعیت اشتراک در پروفایل ===== */
.subscription-panel .sub-summary { padding: 10px 14px; border-radius: 10px; margin-top: 4px; }
.sub-summary.sub-ok { background: #e6f3ea; color: #1f7a3a; border: 1px solid #b6dfc1; }
.sub-summary.sub-warn { background: #fff3e0; color: #b35a00; border: 1px solid #f0d97a; }
.sub-summary.sub-expired { background: #fdecea; color: #b71c1c; border: 1px solid #f5c6c2; }
[data-theme="dark"] .sub-summary.sub-ok { background: #1e3a23; color: #c8e6c9; border-color: #2a4a30; }
[data-theme="dark"] .sub-summary.sub-warn { background: #2a2018; color: #ffb74d; border-color: #4d3d10; }
[data-theme="dark"] .sub-summary.sub-expired { background: #3a1a1a; color: #ffab91; border-color: #5a2a2a; }
.sub-days { font-size: 22px; font-weight: 900; }
.sub-days.expired { color: #b71c1c; }
.sub-dates { margin-top: 4px; }

/* ===== کادر اعلان (Announcement Bar) ===== */
.announcement-bar {
    background: linear-gradient(180deg, #fff9d6 0%, #fffdf0 100%);
    border: 1px solid #f0d97a;
    color: #4a3500;
    font-weight: 600;
}
[data-theme="dark"] .announcement-bar {
    background: linear-gradient(180deg, #2a2410 0%, #11151c 100%);
    border-color: #4d3d10; color: #ffd54a;
}
.announcement-bar .announcement-text { font-size: 15px; }
.announcement-bar .announcement-countdown {
    display: inline-block; margin-top: 6px; padding: 4px 12px;
    background: #fff; border: 1px dashed #d4a017; border-radius: 999px;
    font-variant-numeric: tabular-nums; color: #b71c1c; font-weight: 800;
}

/* ===== ردیف تیکت تمدید در پنل ادمین ===== */
.ticket-row-renewal { background: linear-gradient(90deg, rgba(186, 104, 200, 0.10), transparent); }
.ticket-row-renewal td { border-right: 3px solid #6a1b9a; }
[data-theme="dark"] .ticket-row-renewal { background: linear-gradient(90deg, rgba(186, 104, 200, 0.18), transparent); }

.ticket-row-purchase { background: linear-gradient(90deg, rgba(212, 160, 23, 0.14), transparent); }
.ticket-row-purchase td { border-right: 3px solid #d4a017; }
[data-theme="dark"] .ticket-row-purchase { background: linear-gradient(90deg, rgba(255, 213, 79, 0.16), transparent); }

.ticket-row-trial { background: linear-gradient(90deg, rgba(0, 105, 92, 0.10), transparent); }
.ticket-row-trial td { border-right: 3px solid #00695c; }
[data-theme="dark"] .ticket-row-trial { background: linear-gradient(90deg, rgba(128, 203, 196, 0.16), transparent); }

/* ===== خلاصهٔ آیه در نتایج: شماره رنگی، بدون کادر ===== */
.ayah-summary .ayah-ref {
    color: #0d47a1; font-weight: 800; font-size: 18px; margin-left: 8px;
}
[data-theme="dark"] .ayah-summary .ayah-ref { color: #90caf9; }
.ayah-summary .match-count {
    color: #e65100; font-weight: 800; font-size: 14px;
}
[data-theme="dark"] .ayah-summary .match-count { color: #ffb74d; }

/* ===== معنی کلمه به کلمه ===== */
.word-by-word {
    display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 6px;
    line-height: 1.8;
}
.wbw-pair { display: inline-flex; flex-direction: column; align-items: center; padding: 4px 6px; }
.wbw-ar { font-family: 'Amiri', 'Vazirmatn', serif; font-size: 22px; color: var(--ayah-color); }
.wbw-fa { font-size: 12px; color: var(--muted); }

/* ===== نمایش پیام خوش‌آمد بالای صفحه ===== */
.welcome-msg.visible { opacity: 1; }