/* ============================================================
   style.css — v2.0
   পবিত্র কুরআন — Islamic Green Design
   ============================================================ */

/* ============================================================
   0. SELF-HOSTED FONTS
   ============================================================ */
@font-face {
    font-family: 'Noorehuda';
    src: url('../fonts/noorehuda.woff2') format('woff2'),
         url('../fonts/noorehuda.ttf')   format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* ============================================================
   1. CSS VARIABLES  — Theme System (5 themes)
   Default = Dark (no data-theme attribute)
   ============================================================ */
:root {
    /* ── Core theme tokens ── */
    --accent:       #9B59E8;
    --accent-dark:  #7c3aed;
    --accent-2:     #E31E24;
    --accent-glow:  rgba(155,89,232,0.28);

    --bg:           #0a0a0f;
    --bg-card:      #111118;
    --bg-elevated:  #1a1a24;
    --bg-border:    rgba(255,255,255,0.08);

    --text:         #e8e8f0;
    --text-muted:   #7878a0;

    /* ── Legacy aliases — existing rules unchanged ── */
    --bg-page:    var(--bg);
    --bg-header:  var(--bg-elevated);
    --bg-hero:    var(--bg-card);

    --text-h:  var(--text);
    --text-b:  var(--text);
    --text-m:  var(--text-muted);
    --text-sm: var(--text-muted);

    --accent-hover: var(--accent-dark);
    --accent-light: rgba(155,89,232,0.12);
    --accent-text:  #ffffff;

    --border:       var(--bg-border);
    --border-focus: var(--accent);

    --shadow-card:       0 2px 12px rgba(0,0,0,0.55);
    --shadow-card-hover: 0 8px 28px rgba(0,0,0,0.75);
    --shadow-sm:         0 1px 4px rgba(0,0,0,0.4);

    /* ── g-palette (purple tones for dark theme) ── */
    --g900: #1e0b3e;
    --g800: #2d1260;
    --g700: #3d1a80;
    --g500: #7c3aed;
    --g300: #c4a4f5;
    --g200: #d9c2fc;
    --g100: #ede5ff;
    --g50:  #f5f0ff;
    --g30:  #faf8ff;

    /* ── Skeleton ── */
    --sk-base:  #1a1a24;
    --sk-shine: #252530;

    /* ── Tags ── */
    --mekki-bg:     rgba(155,89,232,0.12);
    --mekki-text:   #c4a4f5;
    --mekki-border: rgba(155,89,232,0.35);
    --madani-bg:    rgba(56,189,248,0.12);
    --madani-text:  #7dd3f8;
    --madani-border:rgba(56,189,248,0.35);

    /* ── Unchanged ── */
    --tr:      0.18s ease;
    --tr-slow: 0.3s ease;
    --r-sm:   6px;
    --r-md:   10px;
    --r-lg:   14px;
    --r-full: 9999px;
    --arabic-sm: 24px;
    --arabic-md: 30px;
    --arabic-lg: 38px;
    --arabic-size: var(--arabic-md);
    --arabic-font-family: 'Amiri Quran', 'Scheherazade New', serif;
    --trans-size: 15px;
}

/* ── Glass ── */
html[data-theme="glass"] {
    --accent:       #38bdf8;
    --accent-dark:  #0ea5e9;
    --accent-2:     #e879f9;
    --accent-glow:  rgba(56,189,248,0.25);
    --bg:           #0f1a3e;
    --bg-card:      #162044;
    --bg-elevated:  #1e2d52;
    --bg-border:    rgba(255,255,255,0.1);
    --text:         #e2eeff;
    --text-muted:   #7898cc;
    --accent-light: rgba(56,189,248,0.12);
    --g900: #061228; --g800: #0d1e42; --g700: #162a58;
    --g500: #38bdf8; --g300: #7dd3fb; --g200: #bae6fd;
    --g100: #e0f2fe; --g50:  #f0f9ff; --g30:  #f8fcff;
    --sk-base: #1e2d52; --sk-shine: #263a68;
    --mekki-bg: rgba(56,189,248,0.12); --mekki-text: #7dd3fb; --mekki-border: rgba(56,189,248,0.3);
    --madani-bg: rgba(232,121,249,0.12); --madani-text: #f0a8fc; --madani-border: rgba(232,121,249,0.3);
}

/* ── Light ── */
html[data-theme="light"] {
    --accent:       #6366f1;
    --accent-dark:  #4f46e5;
    --accent-2:     #ec4899;
    --accent-glow:  rgba(99,102,241,0.2);
    --bg:           #f2f2f8;
    --bg-card:      #ffffff;
    --bg-elevated:  #ffffff;
    --bg-border:    rgba(0,0,0,0.1);
    --text:         #1e1e2e;
    --text-muted:   #6b6b8a;
    --accent-light: rgba(99,102,241,0.1);
    --shadow-card:       0 1px 4px rgba(0,0,0,0.08), 0 0 0 1px rgba(99,102,241,0.08);
    --shadow-card-hover: 0 6px 20px rgba(99,102,241,0.18);
    --shadow-sm:         0 1px 3px rgba(0,0,0,0.07);
    --g900: #1e1b4b; --g800: #3730a3; --g700: #4338ca;
    --g500: #6366f1; --g300: #a5b4fc; --g200: #c7d2fe;
    --g100: #e0e7ff; --g50:  #eef2ff; --g30:  #f5f7ff;
    --sk-base: #e0e0ee; --sk-shine: #f0f0f8;
    --mekki-bg: rgba(99,102,241,0.08); --mekki-text: #4338ca; --mekki-border: rgba(99,102,241,0.25);
    --madani-bg: rgba(236,72,153,0.08); --madani-text: #be185d; --madani-border: rgba(236,72,153,0.25);
}

/* ── Purple ── */
html[data-theme="purple"] {
    --accent:       #d946ef;
    --accent-dark:  #c026d3;
    --accent-2:     #f43f5e;
    --accent-glow:  rgba(217,70,239,0.28);
    --bg:           #0d0520;
    --bg-card:      #150a2e;
    --bg-elevated:  #1e1040;
    --bg-border:    rgba(255,255,255,0.08);
    --text:         #f0e8ff;
    --text-muted:   #9878b8;
    --accent-light: rgba(217,70,239,0.12);
    --g900: #0a0318; --g800: #150a2e; --g700: #1e1040;
    --g500: #c026d3; --g300: #e879f9; --g200: #f0abfc;
    --g100: #fae8ff; --g50:  #fdf4ff; --g30:  #fefaff;
    --sk-base: #1e1040; --sk-shine: #281450;
    --mekki-bg: rgba(217,70,239,0.12); --mekki-text: #e879f9; --mekki-border: rgba(217,70,239,0.3);
    --madani-bg: rgba(244,63,94,0.12); --madani-text: #fb7185; --madani-border: rgba(244,63,94,0.3);
}

/* ── Cyber ── */
html[data-theme="cyber"] {
    --accent:       #00ff9f;
    --accent-dark:  #00cc7e;
    --accent-2:     #ff3e6c;
    --accent-glow:  rgba(0,255,159,0.25);
    --bg:           #050508;
    --bg-card:      #0d0d14;
    --bg-elevated:  #151520;
    --bg-border:    rgba(0,255,159,0.1);
    --text:         #e0ffe8;
    --text-muted:   #60a880;
    --accent-light: rgba(0,255,159,0.1);
    --accent-text:  #000000;
    --g900: #001a0d; --g800: #003318; --g700: #004d24;
    --g500: #00cc7e; --g300: #00ff9f; --g200: #80ffcf;
    --g100: #ccffe8; --g50:  #e6fff3; --g30:  #f0fff8;
    --sk-base: #151520; --sk-shine: #1e1e30;
    --mekki-bg: rgba(0,255,159,0.1); --mekki-text: #00cc7e; --mekki-border: rgba(0,255,159,0.25);
    --madani-bg: rgba(255,62,108,0.1); --madani-text: #ff6b8a; --madani-border: rgba(255,62,108,0.25);
}

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

html { scroll-behavior: smooth; font-size: 16px; }

body {
    font-family: 'Inter', 'Noto Sans Bengali', 'Segoe UI', sans-serif;
    background: var(--bg-page);
    color: var(--text-h);
    line-height: 1.6;
    transition: background var(--tr-slow), color var(--tr-slow);
    min-height: 100vh;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
input  { font-family: inherit; }
.hidden { display: none !important; }

/* ============================================================
   3. STICKY HEADER  (minimal — just controls)
   ============================================================ */
.main-header {
    background: var(--bg-header);
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: var(--shadow-sm);
    transition: background var(--tr-slow), border-color var(--tr-slow);
}
.header-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0.6rem 1.25rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}
.brand {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    text-decoration: none;
    color: inherit;
    flex-shrink: 0;
    transition: opacity var(--tr);
}
a.brand:hover { opacity: 0.8; }
.brand-icon {
    width: 36px; height: 36px;
    border-radius: var(--r-md);
    background: transparent;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
}
.brand-icon img {
    width: 36px; height: 36px;
    object-fit: contain;
    display: block;
}
.brand-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-h);
    font-family: 'Noto Sans Bengali', sans-serif;
}
.brand-subtitle {
    font-size: 0.7rem;
    color: var(--text-m);
    font-family: 'Amiri', serif;
}
.header-controls {
    display: flex;
    align-items: center;
    gap: 0.45rem;
}

/* Header back-link (surah.html) */
.back-link {
    display: flex; align-items: center; gap: 0.35rem;
    color: var(--accent);
    font-size: 0.85rem;
    font-weight: 600;
    padding: 0.35rem 0.8rem;
    border-radius: var(--r-full);
    border: 1.5px solid var(--accent);
    transition: background var(--tr);
    text-decoration: none;
}
.back-link:hover { background: var(--accent-light); text-decoration: none; }

/* Surah title in header */
.surah-header-title { text-align: center; flex: 1; min-width: 0; }
.surah-header-title h1 {
    font-size: 0.95rem; font-weight: 700;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    font-family: 'Noto Sans Bengali', sans-serif;
}
.surah-header-title p { font-size: 0.7rem; color: var(--text-m); }

/* ---- Control buttons ---- */
.btn-icon {
    width: 36px; height: 36px;
    border-radius: var(--r-full);
    border: 1.5px solid var(--border);
    background: var(--bg-card);
    color: var(--text-h);
    display: flex; align-items: center; justify-content: center;
    font-size: 1rem;
    transition: background var(--tr), border-color var(--tr), transform var(--tr);
}
.btn-icon:hover {
    background: var(--accent-light);
    border-color: var(--accent);
    transform: scale(1.06);
}
.btn-icon-text {
    height: 36px; padding: 0 0.75rem;
    border-radius: var(--r-full);
    border: 1.5px solid var(--border);
    background: var(--bg-card);
    color: var(--text-m);
    font-size: 0.78rem; font-weight: 700; letter-spacing: 0.03em;
    transition: background var(--tr), border-color var(--tr), color var(--tr);
}
.btn-icon-text:hover {
    background: var(--accent-light);
    border-color: var(--accent);
    color: var(--accent);
}
.btn-primary {
    display: inline-flex; align-items: center; gap: 0.4rem;
    padding: 0.55rem 1.2rem;
    border-radius: var(--r-full);
    background: var(--accent);
    color: #fff;
    font-size: 0.875rem; font-weight: 600;
    border: none;
    transition: background var(--tr), transform var(--tr), box-shadow var(--tr);
    box-shadow: var(--shadow-sm);
}
.btn-primary:hover {
    background: var(--accent-hover);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0,80,0,0.2);
}
.btn-primary:active { transform: none; }

/* ============================================================
   4. HERO SECTION  (index.html)
   ============================================================ */
.hero-section {
    /* ---- Unsplash: open Quran on wooden table ---- */
    background-image:
        linear-gradient(to bottom, rgba(5,20,10,0.52) 0%, rgba(5,20,10,0.80) 100%),
        url('https://plus.unsplash.com/premium_photo-1676208746513-59d3b93d4aad?auto=format&fit=crop&w=1920&q=85');

    /* নিজের ছবি ব্যবহার করতে চাইলে — ফাইল quran-app/ ফোল্ডারে রাখুন:
    background-image:
        linear-gradient(to bottom, rgba(5,20,10,0.52) 0%, rgba(5,20,10,0.80) 100%),
        url('../quran-bg.jpg');
    */

    background-color: var(--bg-hero);
    background-size: cover;
    background-position: center 40%;
    position: relative;
    padding: 2.5rem 1.25rem 2rem;
    text-align: center;
    color: #fff;
    overflow: hidden;
    transition: background-color var(--tr-slow);
}

/* subtle star-like pattern overlay */
.hero-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle at 20% 30%, rgba(255,255,255,0.03) 1px, transparent 1px),
        radial-gradient(circle at 70% 60%, rgba(255,255,255,0.03) 1px, transparent 1px),
        radial-gradient(circle at 50% 80%, rgba(200,230,200,0.04) 2px, transparent 2px);
    background-size: 80px 80px, 60px 60px, 120px 120px;
    pointer-events: none;
}

.hero-content { position: relative; max-width: 700px; margin: 0 auto; }

.hero-title {
    font-family: 'Noto Sans Bengali', sans-serif;
    font-size: clamp(1.6rem, 5vw, 2.4rem);
    font-weight: 800;
    color: #fff;
    text-shadow: 0 2px 12px rgba(0,0,0,0.5);
    margin-bottom: 0.5rem;
    letter-spacing: -0.01em;
}
.hero-subtitle {
    font-size: 0.95rem;
    color: rgba(255,255,255,0.75);
    margin-bottom: 0.25rem;
    font-family: 'Noto Sans Bengali', sans-serif;
}
.hero-total {
    font-size: 0.85rem;
    color: rgba(200,230,200,0.7);
    margin-bottom: 1.5rem;
}

/* Search in hero */
.hero-search-label {
    font-size: 0.8rem;
    color: rgba(255,255,255,0.6);
    margin-bottom: 0.5rem;
    letter-spacing: 0.04em;
}
.hero-search-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    max-width: 560px;
    margin: 0 auto;
}
.hero-search-icon {
    position: absolute;
    left: 1rem;
    width: 18px; height: 18px;
    color: var(--text-m);
    pointer-events: none;
    z-index: 1;
}
.hero-search-input {
    width: 100%;
    height: 50px;
    padding: 0 3rem 0 2.75rem;
    border-radius: var(--r-full);
    border: none;
    background: #fff;
    color: var(--text-h);
    font-size: 0.95rem;
    outline: none;
    box-shadow: 0 4px 20px rgba(0,0,0,0.25);
    transition: box-shadow var(--tr);
}
.hero-search-input::placeholder { color: #9E9E9E; }
.hero-search-input:focus {
    box-shadow: 0 4px 24px rgba(0,0,0,0.35), 0 0 0 3px rgba(76,175,80,0.35);
}
.hero-search-clear {
    position: absolute;
    right: 0.75rem;
    width: 28px; height: 28px;
    border-radius: var(--r-full);
    background: #eee;
    color: #777;
    font-size: 0.75rem;
    display: flex; align-items: center; justify-content: center;
    transition: background var(--tr);
}
.hero-search-clear:hover { background: #ddd; color: #333; }

/* Count badge */
.search-count {
    margin-top: 0.75rem;
    font-size: 0.8rem;
    color: rgba(255,255,255,0.6);
}

/* ============================================================
   5. TAB NAVIGATION
   ============================================================ */
.tab-nav {
    background: var(--bg-card);
    border-bottom: 2px solid var(--border);
    transition: background var(--tr-slow), border-color var(--tr-slow);
    position: sticky;
    top: 57px; /* below header */
    z-index: 90;
}
.tab-nav-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1.25rem;
    display: flex;
    gap: 0;
}
.tab-btn {
    padding: 0.9rem 1.5rem;
    font-family: 'Noto Sans Bengali', sans-serif;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-m);
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
    transition: color var(--tr), border-color var(--tr);
    cursor: pointer;
    background: none;
    border-left: none; border-right: none; border-top: none;
}
.tab-btn.active {
    color: var(--accent);
    border-bottom-color: var(--accent);
}
.tab-btn:hover:not(.active) { color: var(--text-b); }

/* ============================================================
   6. MAIN CONTENT WRAPPER
   ============================================================ */
.main-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 1.5rem 1.25rem 3rem;
}

/* ============================================================
   7. SURAH GRID
   ============================================================ */
.surah-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.65rem;
}
@media (min-width: 600px) {
    .surah-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 960px) {
    .surah-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ============================================================
   8. SURAH CARD  (new layout matching screenshot)
   ============================================================ */
.surah-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    padding: 0.9rem 1rem;
    display: flex;
    align-items: center;
    gap: 0.8rem;
    cursor: pointer;
    transition:
        transform var(--tr),
        box-shadow var(--tr),
        border-color var(--tr),
        background var(--tr-slow);
    text-decoration: none;
    color: inherit;
    box-shadow: var(--shadow-card);
}
.surah-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-card-hover);
    border-color: var(--g200);
    text-decoration: none;
    color: inherit;
}

/* Diamond number badge */
.surah-num-wrap {
    flex-shrink: 0;
    width: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.surah-num-diamond {
    width: 34px; height: 34px;
    background: var(--g50);
    border: 1.5px solid var(--g200);
    border-radius: 5px;
    transform: rotate(45deg);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    transition: background var(--tr-slow), border-color var(--tr-slow);
}
.surah-num-diamond span {
    transform: rotate(-45deg);
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--g900);
    font-family: 'Noto Sans Bengali', 'Inter', sans-serif;
    line-height: 1;
    transition: color var(--tr-slow);
}

/* Card body */
.surah-card-body {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

/* Left side: name + meaning + tag */
.surah-card-left { flex: 1; min-width: 0; }

.surah-bn-name {
    font-family: 'Noto Sans Bengali', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-h);
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.surah-meaning {
    font-size: 0.775rem;
    color: var(--text-m);
    margin-top: 0.1rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.surah-meta-row {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.35rem;
}

/* Tags */
.tag {
    display: inline-flex; align-items: center; gap: 0.2rem;
    font-size: 0.68rem; font-weight: 600;
    padding: 0.15rem 0.5rem;
    border-radius: var(--r-full);
    border: 1px solid;
    letter-spacing: 0.01em;
    white-space: nowrap;
    transition: background var(--tr-slow), color var(--tr-slow);
}
.tag-mekki  { background: var(--mekki-bg);  color: var(--mekki-text);  border-color: var(--mekki-border); }
.tag-madani { background: var(--madani-bg); color: var(--madani-text); border-color: var(--madani-border);}

/* Right side: Arabic name + ayah count */
.surah-card-right {
    text-align: right;
    flex-shrink: 0;
}
.surah-arabic-name {
    font-family: var(--arabic-font-family);
    font-size: 1.3rem;
    color: var(--text-h);
    direction: rtl;
    line-height: 1.3;
}
.surah-ayah-count {
    font-size: 0.72rem;
    color: var(--text-sm);
    font-family: 'Noto Sans Bengali', sans-serif;
    margin-top: 0.1rem;
}

/* ============================================================
   9. SKELETON LOADER
   ============================================================ */
@keyframes shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}
.skeleton {
    background: linear-gradient(90deg, var(--sk-base) 25%, var(--sk-shine) 50%, var(--sk-base) 75%);
    background-size: 200% 100%;
    animation: shimmer 1.4s infinite linear;
    border-radius: 4px;
}
.skeleton-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    padding: 0.9rem 1rem;
    display: flex;
    align-items: center;
    gap: 0.8rem;
    box-shadow: var(--shadow-card);
}
.sk-diamond {
    width: 34px; height: 34px;
    border-radius: 5px;
    transform: rotate(45deg);
    flex-shrink: 0;
}
.sk-body { flex: 1; display: flex; flex-direction: column; gap: 0.4rem; }
.sk-line { height: 11px; border-radius: 4px; }

/* Ayah skeleton */
.skeleton-ayah {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    padding: 1.1rem;
    margin-bottom: 0.65rem;
    display: flex; flex-direction: column; gap: 0.65rem;
}

/* ============================================================
   10. ERROR & NO-RESULTS STATES
   ============================================================ */
.error-container {
    text-align: center;
    padding: 3rem 1.5rem;
    max-width: 380px;
    margin: 0 auto;
}
.error-icon  { font-size: 2.8rem; margin-bottom: 0.875rem; }
.error-title { font-size: 1.15rem; font-weight: 700; margin-bottom: 0.4rem; }
.error-msg   { font-size: 0.875rem; color: var(--text-m); margin-bottom: 1.25rem; line-height: 1.6; }

.no-results { text-align: center; padding: 3rem 1rem; color: var(--text-m); font-size: 0.95rem; }
.no-results-emoji { font-size: 2.5rem; margin-bottom: 0.6rem; }

/* ============================================================
   11. "TOPIC" COMING SOON PLACEHOLDER
   ============================================================ */
.coming-soon {
    text-align: center;
    padding: 4rem 1.5rem;
    color: var(--text-m);
}
.coming-soon-emoji { font-size: 3rem; margin-bottom: 1rem; }
.coming-soon h3 { font-size: 1.1rem; font-weight: 700; margin-bottom: 0.5rem; color: var(--text-b); }
.coming-soon p  { font-size: 0.875rem; }

/* ============================================================
   12. PAGE LAYOUT + SIDEBAR  (surah.html)
   ============================================================ */

/* Header-left group (sidebar toggle + back link) */
.header-left {
    display: flex; align-items: center; gap: 0.4rem; flex-shrink: 0;
}

/* Font size control (in settings panel) */
.font-size-row {
    display: flex; align-items: center; gap: 0.5rem; margin-top: 0.25rem;
}
.fs-btn {
    padding: 0.35rem 0.75rem;
    font-size: 0.8rem; font-weight: 700;
    color: var(--text-m);
    border: 1.5px solid var(--border);
    border-radius: var(--r-full);
    background: var(--bg-card);
    transition: background var(--tr), color var(--tr), border-color var(--tr-slow);
    cursor: pointer;
}
.fs-btn:hover    { background: var(--accent-light); color: var(--accent); border-color: var(--accent); }
.fs-btn:disabled { opacity: 0.35; cursor: not-allowed; }
.fs-display {
    min-width: 3.2rem; text-align: center;
    font-size: 0.85rem; font-weight: 600;
    color: var(--accent);
    background: var(--accent-light);
    border-radius: var(--r-full);
    padding: 0.2rem 0.6rem;
}

/* Full-width page layout (no sidebar) */
.surah-page { display: flex; flex-direction: column; min-height: 100vh; }

/* Main reading area — full width, centered */
.surah-main {
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
    padding: 1.25rem 1.25rem 2.5rem;
}

/* ============================================================
   SURAH NAV BAR  (secondary sticky bar below header)
   ============================================================ */
.surah-nav-bar {
    background: var(--bg-card);
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 57px;
    z-index: 90;
    box-shadow: var(--shadow-sm);
    transition: background var(--tr-slow), border-color var(--tr-slow);
}
.snb-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0.5rem 1.25rem;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
}
.snb-selects {
    display: flex;
    align-items: flex-end;
    gap: 0.5rem;
    flex: 1;
    min-width: 0;
}
.snb-select-group {
    display: flex;
    flex-direction: column;
    gap: 0.18rem;
    min-width: 0;
    flex: 1;
}
.snb-label {
    font-size: 0.6rem;
    font-weight: 700;
    color: var(--text-sm);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-family: 'Noto Sans Bengali', sans-serif;
}
.snb-select {
    height: 34px;
    padding: 0 0.45rem;
    border: 1.5px solid var(--border);
    border-radius: var(--r-md);
    background: var(--bg-page);
    color: var(--text-h);
    font-size: 0.78rem;
    font-family: 'Noto Sans Bengali', sans-serif;
    outline: none;
    cursor: pointer;
    width: 100%;
    appearance: auto;
    transition: border-color var(--tr), background var(--tr-slow), color var(--tr-slow);
}
.snb-select:focus { border-color: var(--accent); }
.snb-tabs {
    display: flex;
    gap: 0.2rem;
    background: var(--bg-page);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    padding: 0.2rem;
    flex-shrink: 0;
    transition: background var(--tr-slow), border-color var(--tr-slow);
}
.snb-tab {
    padding: 0.35rem 0.8rem;
    border-radius: calc(var(--r-md) - 2px);
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-m);
    font-family: 'Noto Sans Bengali', sans-serif;
    background: none;
    border: none;
    cursor: pointer;
    white-space: nowrap;
    transition: background var(--tr), color var(--tr);
}
.snb-tab.active { background: var(--accent); color: #fff; }
.snb-tab:hover:not(.active) { background: var(--g50); color: var(--accent); }

/* Legacy: keep .sidebar styles for code that may reference them */
.sidebar-inner { display: flex; flex-direction: column; height: 100%; }

.sidebar-tabs {
    display: flex;
    border-bottom: 1.5px solid var(--border);
    flex-shrink: 0;
    background: var(--bg-header);
    transition: background var(--tr-slow), border-color var(--tr-slow);
}
.stab {
    flex: 1;
    padding: 0.65rem 0.5rem;
    font-size: 0.875rem; font-weight: 600;
    color: var(--text-m);
    font-family: 'Noto Sans Bengali', sans-serif;
    border-bottom: 2.5px solid transparent;
    margin-bottom: -1.5px;
    transition: color var(--tr), border-color var(--tr);
    background: none; cursor: pointer;
}
.stab.active { color: var(--accent); border-bottom-color: var(--accent); }
.stab:hover:not(.active) { color: var(--text-b); }

.sidebar-para-coming {
    padding: 1.25rem 0.75rem;
    text-align: center;
    color: var(--text-m);
    font-size: 0.85rem;
    font-family: 'Noto Sans Bengali', sans-serif;
}

.sidebar-body { display: flex; flex: 1; overflow: hidden; }

.sidebar-panel {
    flex: 1;
    overflow-y: auto;
    border-right: 1px solid var(--border);
}

/* Surah list items */
.sbl-item {
    display: flex; align-items: center; gap: 0.45rem;
    padding: 0.5rem 0.6rem;
    border-bottom: 1px solid var(--border);
    text-decoration: none; color: inherit;
    font-family: 'Noto Sans Bengali', sans-serif;
    transition: background var(--tr), color var(--tr);
}
.sbl-item:hover  { background: var(--g50); color: var(--accent); text-decoration: none; }
.sbl-item.active {
    background: var(--g100);
    border-left: 3px solid var(--accent);
    padding-left: calc(0.6rem - 3px);
}
.sbl-item.active .sbl-name { color: var(--accent); font-weight: 700; }
.sbl-num {
    font-size: 0.68rem; color: var(--text-sm);
    min-width: 18px; text-align: right; flex-shrink: 0;
    font-family: 'Noto Sans Bengali', sans-serif;
}
.sbl-name {
    font-size: 0.82rem; line-height: 1.3;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    color: var(--text-b); transition: color var(--tr);
}

/* Ayah number strip */
.sidebar-ayah-strip {
    width: 50px; flex-shrink: 0;
    overflow-y: auto;
    display: flex; flex-direction: column; align-items: center;
}
.strip-header {
    font-size: 0.6rem; font-weight: 700;
    color: var(--text-sm); letter-spacing: 0.04em;
    padding: 0.45rem 0 0.3rem; text-align: center;
    border-bottom: 1px solid var(--border); width: 100%;
    flex-shrink: 0; font-family: 'Noto Sans Bengali', sans-serif;
}
#sidebar-ayah-nums {
    display: flex; flex-direction: column; align-items: center;
    width: 100%; padding: 0.2rem 0;
}
.ayah-strip-btn {
    width: 36px; height: 25px;
    border-radius: 4px;
    font-size: 0.68rem; font-weight: 600;
    color: var(--text-m);
    font-family: 'Noto Sans Bengali', sans-serif;
    display: flex; align-items: center; justify-content: center;
    transition: background var(--tr), color var(--tr);
    cursor: pointer; border: none; background: none; margin: 1px 0;
}
.ayah-strip-btn:hover  { background: var(--g50); color: var(--accent); }
.ayah-strip-btn.active { background: var(--accent); color: #fff; }

/* Mobile overlay */
.sidebar-overlay {
    display: none;
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.52);
    z-index: 199;
}
.sidebar-overlay.show { display: block; }

/* .surah-main defined above in new layout section */

/* ============================================================
   13. BOOKMARK BANNER
   ============================================================ */
.bookmark-banner { max-width: 1200px; margin: 0.65rem auto; padding: 0 1.25rem; }
.bookmark-inner {
    display: flex; align-items: center; gap: 0.65rem;
    padding: 0.65rem 0.875rem;
    background: #1A1500;
    border: 1px solid #5D4037;
    border-radius: var(--r-md);
    color: #FDD835;
    font-size: 0.85rem; font-weight: 500;
    transition: background var(--tr-slow);
}
html[data-theme="light"] .bookmark-inner {
    background: #FFFDE7;
    border-color: #FDD835;
    color: #5D4037;
}
.bookmark-icon { flex-shrink: 0; }
.bookmark-text { flex: 1; font-family: 'Noto Sans Bengali', sans-serif; }
.bookmark-continue {
    padding: 0.3rem 0.75rem;
    border-radius: var(--r-full);
    background: #5D4037;
    color: #FFF8E1;
    font-size: 0.78rem; font-weight: 600;
    border: none; cursor: pointer;
    font-family: 'Noto Sans Bengali', sans-serif;
    white-space: nowrap;
    transition: opacity var(--tr);
}
.bookmark-continue:hover { opacity: 0.85; }
.bookmark-dismiss {
    width: 26px; height: 26px;
    border-radius: var(--r-full);
    background: none;
    border: 1px solid #C8A86A;
    color: #5D4037;
    font-size: 0.7rem;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; flex-shrink: 0;
    font-family: inherit;
    transition: background var(--tr);
}
.bookmark-dismiss:hover { background: rgba(0,0,0,0.08); }

/* ============================================================
   14. SURAH DETAIL — Info header, bismillah, ayah cards
   ============================================================ */

/* Surah info header — full-width hero (same structure as index hero section) */
.surah-info-header {
    background-image:
        linear-gradient(to bottom, rgba(5,10,20,0.62) 0%, rgba(5,10,20,0.88) 100%),
        url('https://plus.unsplash.com/premium_photo-1676208746513-59d3b93d4aad?auto=format&fit=crop&w=1920&q=85');
    background-color: var(--bg-card);
    background-size: cover;
    background-position: center 40%;
    color: #fff;
    padding: 2.5rem 0 2rem;
    text-align: center;
    position: relative;
    overflow: hidden;
}
.surah-info-header::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle at 20% 30%, rgba(255,255,255,0.03) 1px, transparent 1px),
        radial-gradient(circle at 75% 65%, rgba(255,255,255,0.03) 1px, transparent 1px);
    background-size: 80px 80px, 60px 60px;
    pointer-events: none;
}
.sih-skeleton {
    display: flex; flex-direction: column; gap: 6px;
    max-width: 1200px; margin: 0 auto; padding: 0 1.25rem;
}
.sih-sk-title { height: 20px; width: 55%; border-radius: 5px; margin: 0 auto; }
.sih-sk-sub   { height: 13px; width: 32%; border-radius: 4px; margin: 0 auto; }
.sih-inner {
    position: relative;
    display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.5rem;
    max-width: 1200px; margin: 0 auto; padding: 0 1.25rem;
}
.sih-left { min-width: 0; }
.sih-arabic-name {
    font-family: var(--arabic-font-family);
    font-size: clamp(1.8rem, 6vw, 2.8rem);
    direction: rtl;
    color: #fff;
    text-shadow: 0 2px 12px rgba(0,0,0,0.6);
    line-height: 1.7;
    margin-bottom: 0.1rem;
}
.sih-title {
    font-family: 'Noto Sans Bengali', sans-serif;
    font-size: 1.05rem; font-weight: 700;
    color: rgba(255,255,255,0.92);
    text-shadow: 0 1px 6px rgba(0,0,0,0.5);
}
.sih-meaning {
    font-size: 0.82rem;
    color: rgba(255,255,255,0.68);
    font-family: 'Noto Sans Bengali', sans-serif;
}
.sih-tags { display: flex; align-items: center; justify-content: center; gap: 0.4rem; flex-wrap: wrap; margin-top: 0.25rem; }
.sih-tag {
    font-size: 0.7rem; padding: 0.18rem 0.6rem;
    border-radius: var(--r-full);
    background: rgba(255,255,255,0.15);
    border: 1px solid rgba(255,255,255,0.2);
    color: rgba(255,255,255,0.9);
    font-family: 'Noto Sans Bengali', sans-serif;
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}
.sih-audio-row {
    display: flex; flex-direction: column; align-items: center;
    gap: 0.35rem; margin-top: 0.75rem;
}

/* Bismillah block */
.bismillah-block {
    background: var(--g50);
    border: 1px solid var(--g200);
    border-radius: var(--r-lg);
    padding: 1.1rem 1rem;
    text-align: center;
    margin-bottom: 0.875rem;
    transition: background var(--tr-slow), border-color var(--tr-slow);
}
.bismillah-arabic {
    font-family: var(--arabic-font-family);
    font-size: 1.85rem; color: var(--accent);
    direction: rtl; line-height: 2;
    transition: color var(--tr-slow);
}
.bismillah-bn {
    font-size: 0.85rem; color: var(--text-m);
    font-family: 'Noto Sans Bengali', sans-serif;
    margin-top: 0.2rem;
}

/* ---- Ayah card (Modern Card Style) ---- */
.ayah-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    padding: 1.1rem 1.25rem 1rem;
    margin-bottom: 0.875rem;
    transition: background var(--tr-slow), border-color var(--tr), box-shadow var(--tr);
    scroll-margin-top: 120px;
    box-shadow: var(--shadow-card);
}
.ayah-card:hover  { box-shadow: var(--shadow-card-hover); }
.ayah-card.playing {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px var(--accent-glow);
}

/* Card header: ayah number badge at top-left */
.ayah-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.875rem;
}
.ayah-num-badge {
    min-width: 32px; height: 28px;
    padding: 0 8px;
    border-radius: var(--r-md);
    background: var(--accent);
    color: #fff;
    font-size: 0.78rem; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
    font-family: 'Noto Sans Bengali', sans-serif;
    flex-shrink: 0;
    box-shadow: 0 2px 8px var(--accent-glow);
}

/* Arabic text: full width, centered */
.ayah-arabic {
    font-family: var(--arabic-font-family);
    font-size: var(--arabic-size);
    line-height: 2.2;
    direction: rtl;
    text-align: center;
    color: var(--text-h);
    word-spacing: 0.1em;
    padding: 0.25rem 0 0.5rem;
    transition: font-size var(--tr), color var(--tr-slow);
}

/* Divider between Arabic/transliteration and translation */
.ayah-divider {
    height: 1px;
    background: var(--border);
    margin: 0.75rem 0;
    transition: background var(--tr-slow);
}

/* Bengali translation text */
.ayah-bn-text {
    font-family: 'Noto Sans Bengali', sans-serif;
    font-size: 0.95rem; color: var(--text-b);
    line-height: 1.85;
    padding: 0.6rem 0;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    margin-bottom: 0.55rem;
    transition: color var(--tr-slow), border-color var(--tr-slow);
}
.ayah-ref {
    display: block;
    font-size: 0.75em; color: var(--text-muted); font-weight: 500;
    margin-top: 0.3em;
    font-family: 'Noto Sans Bengali', sans-serif;
}

/* Action bar */
.ayah-action-bar {
    display: flex; align-items: center;
    justify-content: center;
    gap: 0.3rem; flex-wrap: wrap;
    margin-top: 0.1rem;
}
.ayah-action-btn {
    display: inline-flex; align-items: center; gap: 0.25rem;
    padding: 0.25rem 0.6rem;
    border-radius: var(--r-full);
    border: 1px solid var(--border);
    background: var(--bg-card);
    color: var(--text-m);
    font-size: 0.75rem; font-weight: 500;
    font-family: 'Noto Sans Bengali', sans-serif;
    cursor: pointer; white-space: nowrap;
    transition: background var(--tr), border-color var(--tr), color var(--tr);
}
.ayah-action-btn:hover {
    background: var(--g50);
    border-color: var(--accent);
    color: var(--accent);
}
.ayah-action-btn.active {
    background: var(--accent-light);
    border-color: var(--accent);
    color: var(--accent);
}
.ayah-action-btn.playing {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}
@keyframes spin { to { transform: rotate(360deg); } }
.ayah-action-btn.loading::after {
    content: '';
    width: 11px; height: 11px;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    display: block;
    animation: spin 0.5s linear infinite;
    flex-shrink: 0;
}
.ayah-action-btn.loading svg { display: none; }

.ayah-num-badge-action {
    width: 27px; height: 27px;
    border-radius: 50%;
    background: var(--accent); color: #fff;
    font-size: 0.7rem; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
    font-family: 'Noto Sans Bengali', sans-serif;
    flex-shrink: 0;
}

/* Tafsir / English translation panel */
.tafsir-panel {
    margin-top: 0.6rem;
    padding: 0.8rem 0.9rem;
    background: #1A1500;
    border: 1px solid #4A3500;
    border-radius: var(--r-md);
    border-left: 3px solid #B8860B;
    transition: background var(--tr-slow), border-color var(--tr-slow);
}
html[data-theme="light"] .tafsir-panel {
    background: #FFFDE7;
    border-color: #EDD57A;
    border-left-color: #D4A017;
}
.tafsir-heading {
    font-size: 0.8rem; font-weight: 700;
    color: #D4A017;
    font-family: 'Noto Sans Bengali', sans-serif;
    margin-bottom: 0.3rem;
    text-align: center;
}
html[data-theme="light"] .tafsir-heading { color: #8B6914; }
.tafsir-text {
    font-family: 'Noto Sans Bengali', 'Inter', sans-serif;
    font-size: var(--trans-size); line-height: 1.85;
    color: var(--text-b); font-style: italic;
    text-align: center;
}

/* Bottom prev/next nav */
.surah-nav-bottom {
    display: flex; justify-content: space-between; gap: 1rem;
    margin-top: 1.75rem;
    padding-top: 1.1rem;
    border-top: 1px solid var(--border);
    transition: border-color var(--tr-slow);
}
.btn-nav-bottom {
    display: inline-flex; align-items: center; gap: 0.4rem;
    padding: 0.5rem 1rem;
    border-radius: var(--r-full);
    border: 1.5px solid var(--border);
    background: var(--bg-card);
    color: var(--text-m);
    font-size: 0.85rem; font-weight: 500;
    font-family: 'Noto Sans Bengali', sans-serif;
    cursor: pointer;
    transition: background var(--tr), border-color var(--tr), color var(--tr);
}
.btn-nav-bottom:hover  { background: var(--g50); border-color: var(--accent); color: var(--accent); }
.btn-nav-bottom:disabled { opacity: 0.35; cursor: not-allowed; }
.btn-nav-bottom:disabled:hover { background: var(--bg-card); border-color: var(--border); color: var(--text-m); }

/* Skeleton for ayah loading */
.skeleton-ayah {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    padding: 1rem 1.1rem;
    margin-bottom: 0.65rem;
    display: flex; flex-direction: column; gap: 0.6rem;
}

/* ============================================================
   15. TOAST
   ============================================================ */
.toast {
    position: fixed;
    bottom: 1.5rem; left: 50%;
    transform: translateX(-50%) translateY(10px);
    background: #212121;
    color: #fff;
    padding: 0.6rem 1.2rem;
    border-radius: var(--r-full);
    font-size: 0.85rem; font-weight: 500;
    z-index: 999;
    white-space: nowrap;
    box-shadow: 0 4px 20px rgba(0,0,0,0.3);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, transform 0.3s cubic-bezier(0.34,1.56,0.64,1), visibility 0.25s;
    pointer-events: none;
    font-family: 'Noto Sans Bengali', sans-serif;
}
.toast.show {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

/* ============================================================
   16. FOOTER
   ============================================================ */
.main-footer {
    text-align: center;
    padding: 1.25rem 1rem;
    border-top: 1px solid var(--border);
    color: var(--text-sm);
    font-size: 0.78rem;
    transition: border-color var(--tr-slow);
}
.main-footer a { color: var(--accent); }

/* ============================================================
   17. AUDIO LOADING SPINNER
   ============================================================ */
@keyframes spin { to { transform: rotate(360deg); } }
.play-btn.loading::after {
    content: '';
    width: 13px; height: 13px;
    border: 2px solid var(--accent);
    border-top-color: transparent;
    border-radius: 50%;
    display: block;
    animation: spin 0.55s linear infinite;
}
.play-btn.loading svg { display: none; }

/* ============================================================
   18. RESPONSIVE
   ============================================================ */

/* Tablet: compact nav bar */
@media (max-width: 768px) {
    .surah-main { padding: 0.875rem 1rem 2.5rem; }
    .snb-inner  { padding: 0.45rem 1rem; gap: 0.6rem; }
    .snb-select { font-size: 0.74rem; height: 30px; }
    .snb-tab    { font-size: 0.75rem; padding: 0.3rem 0.6rem; }
}

/* Mobile: stack selects above tabs */
@media (max-width: 540px) {
    .snb-inner {
        flex-direction: column;
        align-items: stretch;
        gap: 0.4rem;
        padding: 0.4rem 0.875rem;
    }
    .snb-selects {
        gap: 0.35rem;
    }
    .snb-tabs {
        align-self: center;
    }
    .ayah-card { padding: 1rem 1rem 0.875rem; }
}

@media (max-width: 480px) {
    .header-content  { padding: 0.5rem 0.875rem; gap: 0.5rem; }
    .brand-title     { display: none; }
    .brand-subtitle  { display: none; }
    .hero-section    { padding: 1.75rem 1rem 1.5rem; }
    .hero-title      { font-size: 1.5rem; }
    .main-content    { padding-left: 1rem; padding-right: 1rem; }
    .tab-btn         { padding: 0.8rem 1rem; font-size: 0.875rem; }
}

/* ============================================================
   19. FOCUS & ACCESSIBILITY
   ============================================================ */
:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: 3px;
}

/* ============================================================
   20. PRINT
   ============================================================ */
@media print {
    .main-header, .surah-nav, .play-btn, .main-footer,
    .bookmark-banner, .tab-nav { display: none; }
    .arabic-text { font-size: 24pt; }
    body { color: black; background: white; }
}

/* ============================================================
   21. SIDEBAR SEARCH & GOTO
   ============================================================ */
.sidebar-search-wrap {
    position: relative;
    padding: 0.45rem 0.5rem;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
    background: var(--bg-header);
    transition: background var(--tr-slow), border-color var(--tr-slow);
}
.sidebar-search-icon {
    position: absolute;
    left: 0.85rem; top: 50%;
    transform: translateY(-50%);
    width: 12px; height: 12px;
    color: var(--text-sm);
    pointer-events: none;
}
.sidebar-search-input {
    width: 100%;
    height: 30px;
    padding: 0 0.45rem 0 1.65rem;
    border: 1.5px solid var(--border);
    border-radius: var(--r-full);
    background: var(--bg-page);
    color: var(--text-h);
    font-size: 0.77rem;
    font-family: 'Noto Sans Bengali', sans-serif;
    outline: none;
    transition: border-color var(--tr), background var(--tr-slow);
}
.sidebar-search-input:focus { border-color: var(--accent); }
.sidebar-search-input::placeholder { color: var(--text-sm); }

/* Para list items */
.para-item {
    display: flex; align-items: center; gap: 0.45rem;
    padding: 0.45rem 0.6rem;
    border-bottom: 1px solid var(--border);
    text-decoration: none; color: inherit;
    font-family: 'Noto Sans Bengali', sans-serif;
    cursor: pointer;
    transition: background var(--tr), color var(--tr);
}
.para-item:hover { background: var(--g50); color: var(--accent); text-decoration: none; }
.para-num {
    width: 20px; height: 20px;
    border-radius: 50%;
    background: var(--accent);
    color: #fff;
    font-size: 0.62rem; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    font-family: 'Noto Sans Bengali', sans-serif;
}
.para-name { font-size: 0.79rem; color: var(--text-b); }

/* Goto input at sidebar bottom */
.sidebar-goto {
    flex-shrink: 0;
    padding: 0.45rem 0.5rem;
    border-top: 1px solid var(--border);
    background: var(--bg-header);
    transition: background var(--tr-slow), border-color var(--tr-slow);
}
.goto-label {
    font-size: 0.65rem; font-weight: 700;
    color: var(--text-sm); letter-spacing: 0.04em;
    font-family: 'Noto Sans Bengali', sans-serif;
    margin-bottom: 0.3rem;
}
.goto-inputs {
    display: flex; align-items: center; gap: 0.25rem;
}
.goto-inputs input {
    flex: 1;
    height: 28px;
    padding: 0 0.4rem;
    border: 1.5px solid var(--border);
    border-radius: var(--r-sm);
    background: var(--bg-page);
    color: var(--text-h);
    font-size: 0.77rem;
    font-family: 'Noto Sans Bengali', sans-serif;
    outline: none;
    min-width: 0;
    transition: border-color var(--tr), background var(--tr-slow);
}
.goto-inputs input:focus { border-color: var(--accent); }
.goto-inputs span {
    font-weight: 700; color: var(--text-m); font-size: 0.8rem;
    flex-shrink: 0;
}
.goto-inputs button {
    height: 28px; padding: 0 0.6rem;
    border-radius: var(--r-sm);
    background: var(--accent); color: #fff;
    border: none; font-size: 0.8rem; font-weight: 700;
    cursor: pointer; flex-shrink: 0;
    transition: opacity var(--tr);
}
.goto-inputs button:hover { opacity: 0.85; }

/* ============================================================
   22. MAIN CONTENT TABS (অনুবাদ | তিলাওয়াত)
   ============================================================ */
.main-tabs {
    display: flex; gap: 0.2rem;
    padding: 0.2rem;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    margin-bottom: 0.875rem;
    transition: background var(--tr-slow), border-color var(--tr-slow);
}
.main-tab {
    flex: 1;
    padding: 0.42rem 0.75rem;
    border-radius: calc(var(--r-md) - 2px);
    font-size: 0.82rem; font-weight: 600;
    color: var(--text-m);
    font-family: 'Noto Sans Bengali', sans-serif;
    background: none; border: none; cursor: pointer;
    transition: background var(--tr), color var(--tr);
}
.main-tab.active { background: var(--accent); color: #fff; }
.main-tab:hover:not(.active) { background: var(--g50); color: var(--accent); }

/* ============================================================
   23. SETTINGS BUTTON & PANEL
   ============================================================ */
.settings-btn {
    width: 34px; height: 34px;
    border-radius: var(--r-full);
    border: 1.5px solid var(--border);
    background: var(--bg-card);
    color: var(--text-m);
    display: flex; align-items: center; justify-content: center;
    font-size: 0.95rem; cursor: pointer; flex-shrink: 0;
    transition: background var(--tr), border-color var(--tr), color var(--tr), transform 0.3s;
}
.settings-btn:hover  { background: var(--g50); border-color: var(--accent); color: var(--accent); }
.settings-btn.active { background: var(--g50); border-color: var(--accent); color: var(--accent); transform: rotate(45deg); }

.settings-panel {
    position: fixed;
    top: 60px; right: 0.75rem;
    width: 272px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    box-shadow: 0 8px 32px rgba(0,0,0,0.18);
    z-index: 350;
    padding: 0.875rem;
    transition: background var(--tr-slow), border-color var(--tr-slow);
}
.settings-header {
    font-size: 0.875rem; font-weight: 700;
    color: var(--text-h);
    font-family: 'Noto Sans Bengali', sans-serif;
    margin-bottom: 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--border);
    transition: color var(--tr-slow), border-color var(--tr-slow);
}
.settings-section { margin-bottom: 0.6rem; }
.settings-label {
    display: block;
    font-size: 0.75rem; font-weight: 600;
    color: var(--text-m);
    font-family: 'Noto Sans Bengali', sans-serif;
    margin-bottom: 0.25rem;
}
.settings-select {
    width: 100%; height: 32px;
    padding: 0 0.6rem;
    border: 1.5px solid var(--border);
    border-radius: var(--r-md);
    background: var(--bg-page);
    color: var(--text-h);
    font-size: 0.8rem;
    font-family: 'Noto Sans Bengali', sans-serif;
    outline: none; cursor: pointer;
    transition: border-color var(--tr), background var(--tr-slow), color var(--tr-slow);
}
.settings-select:focus { border-color: var(--accent); }

/* Toggle switch row */
.toggle-row {
    display: flex; align-items: center;
    justify-content: space-between;
    padding: 0.25rem 0;
}
.toggle-label {
    font-size: 0.8rem; color: var(--text-b);
    font-family: 'Noto Sans Bengali', sans-serif;
    transition: color var(--tr-slow);
}
.toggle-label.disabled { color: var(--text-sm); }
.toggle-badge {
    font-size: 0.58rem; padding: 0.08rem 0.35rem;
    border-radius: var(--r-full);
    background: var(--g100); color: var(--g700);
    margin-left: 0.25rem;
    font-family: 'Noto Sans Bengali', sans-serif;
    vertical-align: middle;
}
.toggle-switch {
    position: relative; width: 36px; height: 20px; flex-shrink: 0;
}
.toggle-switch input { opacity: 0; width: 0; height: 0; position: absolute; }
.toggle-track {
    position: absolute; inset: 0;
    background: var(--border);
    border-radius: var(--r-full); cursor: pointer;
    transition: background var(--tr);
}
.toggle-switch input:checked + .toggle-track { background: var(--accent); }
.toggle-track::after {
    content: '';
    position: absolute; left: 3px; top: 3px;
    width: 14px; height: 14px;
    border-radius: 50%; background: #fff;
    transition: transform var(--tr);
}
.toggle-switch input:checked + .toggle-track::after { transform: translateX(16px); }
.toggle-switch input:disabled + .toggle-track { opacity: 0.38; cursor: not-allowed; }

/* ============================================================
   24. FULL SURAH AUDIO BUTTON (inside sih-right)
   ============================================================ */
.sih-right {
    display: flex; flex-direction: column;
    align-items: center; gap: 0.35rem;
}
.full-audio-btn {
    display: inline-flex; align-items: center; gap: 0.3rem;
    padding: 0.38rem 0.875rem;
    border-radius: var(--r-full);
    background: rgba(255,255,255,0.18);
    color: #fff;
    border: 1px solid rgba(255,255,255,0.32);
    font-size: 0.77rem; font-weight: 600;
    font-family: 'Noto Sans Bengali', sans-serif;
    cursor: pointer; white-space: nowrap;
    transition: background var(--tr);
}
.full-audio-btn:hover   { background: rgba(255,255,255,0.28); }
.full-audio-btn.playing { background: rgba(255,255,255,0.32); border-color: rgba(255,255,255,0.6); }
.full-audio-progress {
    font-size: 0.67rem; color: rgba(255,255,255,0.68);
    font-family: 'Noto Sans Bengali', sans-serif; text-align: right;
}

/* ============================================================
   25. BENGALI TRANSLITERATION LAYER
   ============================================================ */
.ayah-transliteration {
    display: none; /* Hidden by default; shown when .show-transliteration is on #ayah-list */
    font-family: 'Noto Sans Bengali', sans-serif;
    font-size: 0.86rem; color: var(--text-m);
    font-style: italic; line-height: 1.75;
    text-align: center;
    padding: 0.3rem 0 0.35rem;
    border-bottom: 1px dashed var(--border);
    margin-bottom: 0.35rem;
    transition: color var(--tr-slow), border-color var(--tr-slow);
}
#ayah-list.show-transliteration .ayah-transliteration { display: block; }

/* ============================================================
   26. তিলাওয়াত PANEL (Mushaf continuous Arabic)
   ============================================================ */
.tilawat-container {
    background: var(--g50);
    border: 1px solid var(--g200);
    border-radius: var(--r-lg);
    padding: 1.5rem 1.25rem 1.75rem;
    margin-bottom: 0.875rem;
    transition: background var(--tr-slow), border-color var(--tr-slow);
}
.tilawat-heading {
    font-size: 0.78rem; font-weight: 700;
    color: var(--accent);
    font-family: 'Noto Sans Bengali', sans-serif;
    text-align: center;
    margin-bottom: 1.25rem;
    letter-spacing: 0.04em;
}
.tilawat-arabic {
    font-family: var(--arabic-font-family);
    font-size: 1.7rem;
    line-height: 3.2;
    direction: rtl;
    text-align: justify;
    color: var(--text-h);
    word-spacing: 0.12em;
    transition: color var(--tr-slow), font-size var(--tr);
}
.ayah-end-mark {
    display: inline;
    color: var(--accent);
    font-size: 1rem;
    font-family: var(--arabic-font-family);
    font-style: normal;
    margin: 0 0.2em;
    opacity: 0.85;
}

/* ============================================================
   27. SIDEBAR INNER FLEX LAYOUT FIX (with goto)
   ============================================================ */
.sidebar-inner {
    display: flex; flex-direction: column; height: 100%;
}

@media (max-width: 480px) {
    .settings-panel { right: 0.5rem; width: calc(100vw - 1rem); }
    .main-tab { font-size: 0.76rem; padding: 0.38rem 0.5rem; }
    .tilawat-arabic { font-size: 1.4rem; line-height: 2.9; }
}

/* ============================================================
   28. SIDEBAR DROPDOWNS (replaces tabs/list/strip)
   ============================================================ */
.sb-nav {
    display: flex; flex-direction: column;
    gap: 0.75rem; padding: 0.875rem 0.75rem;
}
.sb-nav-group {
    display: flex; flex-direction: column; gap: 0.28rem;
}
.sb-nav-label {
    font-size: 0.68rem; font-weight: 700;
    color: var(--text-sm); letter-spacing: 0.05em;
    font-family: 'Noto Sans Bengali', sans-serif;
    text-transform: uppercase;
}
.sb-nav-select {
    width: 100%; height: 36px;
    padding: 0 0.55rem;
    border: 1.5px solid var(--border);
    border-radius: var(--r-md);
    background: var(--bg-page);
    color: var(--text-h);
    font-size: 0.8rem;
    font-family: 'Noto Sans Bengali', sans-serif;
    outline: none; cursor: pointer;
    transition: border-color var(--tr), background var(--tr-slow), color var(--tr-slow);
    appearance: auto;
}
.sb-nav-select:focus { border-color: var(--accent); }

/* ============================================================
   29. AUDIO PLAYER BAR (fixed bottom)
   ============================================================ */
.audio-player-bar {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    background: var(--bg-card);
    border-top: 2px solid var(--accent);
    z-index: 450;
    padding: 0.45rem 1rem 0.55rem;
    box-shadow: 0 -4px 24px rgba(0,0,0,0.14);
    transition: transform 0.35s cubic-bezier(0.4,0,0.2,1), background var(--tr-slow);
    transform: translateY(0);
}
.audio-player-bar.hidden { transform: translateY(115%); }

/* Push main content up when player is visible */
body.audio-playing .surah-main  { padding-bottom: 80px; }
body.audio-playing .main-footer { padding-bottom: 72px; }

.apb-row1 {
    display: flex; align-items: center;
    justify-content: space-between; gap: 0.75rem;
    margin-bottom: 0.35rem;
}
.apb-info { flex: 1; min-width: 0; }
.apb-title {
    font-size: 0.82rem; font-weight: 600;
    color: var(--text-h);
    font-family: 'Noto Sans Bengali', sans-serif;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    transition: color var(--tr-slow);
}
.apb-controls {
    display: flex; align-items: center; gap: 0.3rem; flex-shrink: 0;
}
.apb-btn {
    width: 32px; height: 32px;
    border-radius: 50%;
    border: 1.5px solid var(--border);
    background: var(--bg-page);
    color: var(--text-m);
    display: flex; align-items: center; justify-content: center;
    font-size: 0.8rem; cursor: pointer;
    transition: background var(--tr), border-color var(--tr), color var(--tr);
}
.apb-btn:hover { background: var(--g50); border-color: var(--accent); color: var(--accent); }
.apb-btn.apb-main {
    width: 36px; height: 36px;
    background: var(--accent); border-color: var(--accent); color: #fff;
}
.apb-btn.apb-main:hover { background: var(--g700); border-color: var(--g700); }
.apb-btn.apb-close { font-size: 0.75rem; }

.apb-row2 {
    display: flex; align-items: center; gap: 0.5rem;
}
.apb-time {
    font-size: 0.72rem; font-weight: 600;
    color: var(--text-m); font-family: 'Inter', sans-serif;
    min-width: 32px; flex-shrink: 0;
    transition: color var(--tr-slow);
}
.apb-track {
    flex: 1; position: relative; height: 20px;
    display: flex; align-items: center;
}
.apb-track-bg {
    position: absolute; left: 0; right: 0;
    height: 3px; background: var(--border);
    border-radius: 2px;
    transition: background var(--tr-slow);
}
.apb-fill {
    position: absolute; left: 0;
    height: 3px; background: var(--accent);
    border-radius: 2px; pointer-events: none;
    transition: width 0.1s linear;
    z-index: 1;
}
.apb-seek {
    width: 100%; height: 3px;
    appearance: none;
    background: transparent;
    border-radius: 2px; cursor: pointer;
    position: relative; z-index: 2;
    outline: none;
}
.apb-seek::-webkit-slider-thumb {
    appearance: none;
    width: 13px; height: 13px;
    border-radius: 50%;
    background: var(--accent);
    cursor: pointer;
    box-shadow: 0 1px 4px rgba(0,0,0,0.25);
}
.apb-seek::-moz-range-thumb {
    width: 13px; height: 13px;
    border-radius: 50%;
    background: var(--accent);
    border: none; cursor: pointer;
}

/* ============================================================
   30. TAFSIR LANGUAGE TOGGLE
   ============================================================ */
.tafsir-header {
    display: flex; align-items: center;
    justify-content: space-between;
    margin-bottom: 0.35rem;
}
.tl-toggle {
    display: flex; gap: 0.2rem;
}
.tlt-btn {
    height: 22px; padding: 0 0.5rem;
    border-radius: var(--r-full);
    border: 1px solid var(--border);
    background: none;
    color: var(--text-sm);
    font-size: 0.68rem; font-weight: 600;
    font-family: 'Noto Sans Bengali', sans-serif;
    cursor: pointer;
    transition: background var(--tr), border-color var(--tr), color var(--tr);
}
.tlt-btn:hover { border-color: var(--accent); color: var(--accent); }
.tlt-btn.active {
    background: var(--accent); border-color: var(--accent); color: #fff;
}

/* ============================================================
   31. COPY BUTTON (same base as share, accent color)
   ============================================================ */
.copy-ayah-btn { color: var(--text-m); }
.copy-ayah-btn:hover { color: var(--accent); }
.copy-ayah-btn.copied { color: #16A34A; }

/* ============================================================
   32. ARABIC FONT FAMILY VARIABLE
   Amiri Quran: Uthmanic script with correct lam-alif ligatures
   ============================================================ */
:root { --arabic-font-family: 'Amiri Quran', 'Scheherazade New', serif; }

/* ============================================================
   33. INLINE LANGUAGE TOGGLE (বাং / EN per ayah translation row)
   ============================================================ */

/* Body class controls which translation text is visible */
body.trans-lang-bn .trans-lang-en-text { display: none; }
body.trans-lang-en .trans-lang-bn-text { display: none; }
/* Default: show Bengali (no body class = same as trans-lang-bn) */
body:not(.trans-lang-en) .trans-lang-en-text { display: none; }

.ayah-trans-row {
    margin: 0.55rem 0 0;
}
.ayah-trans-texts { width: 100%; }
.ayah-trans-text {
    margin: 0;
    font-size: var(--trans-size);
    line-height: 1.7;
    color: var(--text-b);
    text-align: center;
    transition: color var(--tr-slow);
}

.ayah-lang-toggle {
    display: flex;
    gap: 3px;
}
.ltg-btn {
    padding: 2px 7px;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: transparent;
    color: var(--text-m);
    font-size: 0.67rem;
    font-weight: 700;
    cursor: pointer;
    transition: all var(--tr);
    font-family: inherit;
}
.ltg-btn:hover { border-color: var(--accent); color: var(--accent); }

/* Active state via body class */
body.trans-lang-bn .ltg-btn[data-lang="bn"],
body.trans-lang-en .ltg-btn[data-lang="en"],
body:not(.trans-lang-en) .ltg-btn[data-lang="bn"] {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
}
body.trans-lang-bn .ltg-btn[data-lang="bn"]:hover,
body.trans-lang-en .ltg-btn[data-lang="en"]:hover,
body:not(.trans-lang-en) .ltg-btn[data-lang="bn"]:hover { color: #fff; }

/* ============================================================
   34. TAFSIR SOURCE LABEL
   ============================================================ */
.tafsir-source-label {
    font-size: 0.67rem;
    font-weight: 600;
    color: var(--text-sm);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 0.3rem;
    opacity: 0.75;
    text-align: center;
}

/* ============================================================
   35. THEME PANEL
   ============================================================ */
.theme-panel-wrap {
    position: relative;
}
.theme-panel {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    width: 210px;
    background: var(--bg-elevated);
    border: 1px solid var(--bg-border);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-card-hover), 0 0 0 1px rgba(255,255,255,0.04);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    padding: 0.875rem;
    z-index: 400;
    display: none;
    animation: tpFadeIn 0.15s ease;
}
.theme-panel.open { display: block; }
@keyframes tpFadeIn {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}
.theme-panel-title {
    display: block;
    font-size: 0.65rem;
    font-weight: 700;
    color: var(--text-muted);
    letter-spacing: 0.07em;
    text-transform: uppercase;
    margin-bottom: 0.45rem;
}
.theme-opts {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-bottom: 0.75rem;
}
.theme-opt {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.38rem 0.6rem;
    border-radius: var(--r-md);
    border: 1px solid transparent;
    background: transparent;
    color: var(--text-m);
    font-size: 0.8rem;
    font-weight: 500;
    font-family: 'Noto Sans Bengali', sans-serif;
    cursor: pointer;
    transition: background var(--tr), border-color var(--tr), color var(--tr);
    text-align: left;
    width: 100%;
}
.theme-opt:hover {
    background: var(--accent-light);
    color: var(--accent);
    border-color: rgba(155,89,232,0.3);
}
.theme-opt.active {
    background: var(--accent-light);
    color: var(--accent);
    border-color: var(--accent);
    font-weight: 700;
}
.theme-swatch {
    width: 13px;
    height: 13px;
    border-radius: 50%;
    flex-shrink: 0;
    border: 1.5px solid rgba(255,255,255,0.2);
}
/* Swatch colors — keyed to button's data-theme (always fixed) */
.theme-opt[data-theme="dark"]   .theme-swatch { background: #9B59E8; }
.theme-opt[data-theme="glass"]  .theme-swatch { background: #38bdf8; }
.theme-opt[data-theme="light"]  .theme-swatch { background: #6366f1; }
.theme-opt[data-theme="purple"] .theme-swatch { background: #d946ef; }
.theme-opt[data-theme="cyber"]  .theme-swatch { background: #00ff9f; }

/* Custom color pickers */
.cp-section {
    border-top: 1px solid var(--bg-border);
    padding-top: 0.7rem;
}
.cp-row {
    display: flex;
    gap: 0.4rem;
    margin-bottom: 0.55rem;
}
.cp-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    flex: 1;
}
.cp-item input[type="color"] {
    width: 38px;
    height: 26px;
    border: 1.5px solid var(--bg-border);
    border-radius: var(--r-sm);
    background: var(--bg-card);
    cursor: pointer;
    padding: 2px 3px;
}
.cp-item span {
    font-size: 0.6rem;
    color: var(--text-muted);
    font-family: 'Noto Sans Bengali', sans-serif;
}
.cp-reset {
    width: 100%;
    padding: 0.3rem;
    border-radius: var(--r-md);
    border: 1px solid var(--bg-border);
    background: transparent;
    color: var(--text-muted);
    font-size: 0.72rem;
    font-family: 'Noto Sans Bengali', sans-serif;
    cursor: pointer;
    transition: background var(--tr), color var(--tr), border-color var(--tr);
}
.cp-reset:hover {
    background: var(--accent-light);
    color: var(--accent);
    border-color: var(--accent);
}

/* ============================================================
   36. HEADER LOGO (Onik Creation)
   ============================================================ */
.header-logo-link {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    text-decoration: none;
    opacity: 0.9;
    transition: opacity var(--tr), transform var(--tr);
}
.header-logo-link:hover {
    opacity: 1;
    transform: scale(1.04);
}
.header-logo {
    height: 30px;
    width: auto;
    object-fit: contain;
    display: block;
}