/* Header */
.quran-header { background: linear-gradient(135deg, var(--teal-600,#0d9488) 0%, var(--teal-700,#0f766e) 50%, var(--teal-900,#064e3b) 100%); color: #fff; padding: 32px 0; position: relative; overflow: hidden; }
.quran-header::before { content: ''; position: absolute; top: -50%; right: -10%; width: 300px; height: 300px; background: radial-gradient(circle, rgba(255,255,255,.06) 0%, transparent 70%); border-radius: 50%; }
.quran-header-inner { display: flex; align-items: center; justify-content: space-between; position: relative; z-index: 1; }
.quran-header-info { display: flex; align-items: center; gap: 16px; }
.quran-header-num { width: 52px; height: 52px; display: flex; align-items: center; justify-content: center; border: 2px solid rgba(255,255,255,.25); border-radius: 14px; font-weight: 800; font-size: 18px; backdrop-filter: blur(4px); background: rgba(255,255,255,.08); }
.quran-header-name { font-size: 24px; font-weight: 800; margin: 0; letter-spacing: -.3px; }
.quran-header-meta { font-size: 13px; opacity: .85; display: flex; gap: 10px; margin-top: 5px; align-items: center; }
.quran-header-ar { font-family: 'Traditional Arabic', 'Scheherazade New', serif; font-size: 42px; direction: rtl; opacity: .85; text-shadow: 0 2px 8px rgba(0,0,0,.15); transition: opacity .3s; }
.quran-header:hover .quran-header-ar { opacity: 1; }

/* Mode Switcher */
.quran-mode-bar { display: flex; align-items: center; justify-content: center; }
.quran-mode-switch { display: inline-flex; background: #f1f5f9; border-radius: 12px; padding: 4px; gap: 3px; box-shadow: inset 0 1px 3px rgba(0,0,0,.06); }
.qm-btn { display: inline-flex; align-items: center; gap: 7px; padding: 9px 22px; border-radius: 9px; border: none; background: transparent; color: #64748b; font-size: 13px; font-weight: 600; cursor: pointer; transition: all .25s; }
.qm-btn:hover { color: #1e293b; }
.qm-btn.qm-active { background: #fff; color: var(--teal-600,#0d9488); box-shadow: 0 2px 8px rgba(0,0,0,.08); }

/* Controls */
.quran-controls { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.quran-controls-left, .quran-controls-right { display: flex; gap: 6px; }
.quran-ctrl-btn { display: inline-flex; align-items: center; gap: 6px; padding: 9px 16px; border-radius: 10px; border: 1px solid #e2e8f0; background: #fff; color: #475569; font-size: 13px; font-weight: 600; cursor: pointer; transition: all .2s; }
.quran-ctrl-btn:hover { border-color: var(--teal-600,#0d9488); color: var(--teal-600,#0d9488); box-shadow: 0 2px 8px rgba(13,148,136,.1); }
.quran-ctrl-btn.active { background: var(--teal-600,#0d9488); color: #fff; border-color: var(--teal-600,#0d9488); }
.quran-font-btn { padding: 9px 12px; font-size: 14px; font-weight: 700; }

/* Bismillah */
.quran-bismillah { text-align: center; padding: 24px 0 16px; }
.quran-bismillah-ar { font-family: 'Traditional Arabic', 'Scheherazade New', serif; font-size: 40px; color: var(--teal-600,#0d9488); opacity: 0; animation: bismFade .8s ease forwards .2s; }
@keyframes bismFade { from { opacity: 0; transform: scale(.95); } to { opacity: 1; transform: scale(1); } }

/* Ayahs */
.quran-ayahs { display: flex; flex-direction: column; gap: 3px; }
.quran-ayah {
    background: #fff; border-radius: 14px; padding: 20px 18px; border: 1px solid #f1f5f9;
    transition: all .3s ease; opacity: 0; animation: ayahSlide .35s ease forwards;
}
@keyframes ayahSlide { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
.quran-ayah:nth-child(1) { animation-delay: .05s; }
.quran-ayah:nth-child(2) { animation-delay: .1s; }
.quran-ayah:nth-child(3) { animation-delay: .15s; }
.quran-ayah:nth-child(4) { animation-delay: .2s; }
.quran-ayah:nth-child(n+5) { animation-delay: .25s; }
.quran-ayah.playing { border-color: var(--teal-600,#0d9488); background: linear-gradient(135deg, var(--teal-50,#f0fdfa), var(--teal-100,#ccfbf1)); box-shadow: 0 0 0 2px rgba(13,148,136,.15), 0 4px 16px rgba(13,148,136,.08); }
.quran-ayah-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.quran-ayah-badge { background: linear-gradient(135deg, var(--teal-600,#0d9488), var(--teal-800,#065f46)); color: #fff; font-size: 11px; font-weight: 700; padding: 5px 12px; border-radius: 10px; letter-spacing: .3px; }
.quran-ayah-actions { display: flex; gap: 5px; }
.quran-ayah-btn { width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; border-radius: 9px; border: 1px solid #e2e8f0; background: #fff; color: #64748b; cursor: pointer; transition: all .2s; }
.quran-ayah-btn:hover { border-color: var(--teal-600,#0d9488); color: var(--teal-600,#0d9488); background: var(--teal-50,#f0fdfa); }
.quran-ayah-btn.qab-playing { background: var(--teal-600,#0d9488); color: #fff; border-color: var(--teal-600,#0d9488); animation: btnPulse 1.5s ease-in-out infinite; }
@keyframes btnPulse { 0%,100%{ box-shadow: 0 0 0 0 rgba(13,148,136,.3); } 50%{ box-shadow: 0 0 0 6px rgba(13,148,136,0); } }
.quran-ayah-arabic { font-family: 'Traditional Arabic', 'Scheherazade New', 'KFGQPC Uthmanic Script HAFS', serif; font-size: 28px; line-height: 2; direction: rtl; text-align: right; color: #1e293b; padding: 8px 0; }
/* Word-by-word */
.quran-wbw { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 4px; direction: rtl; text-align: center; line-height: 1.4; }
.quran-word { display: inline-flex; flex-direction: column; align-items: center; padding: 6px 8px; border-radius: 10px; cursor: pointer; transition: all .25s ease; min-width: 40px; position: relative; }
.quran-word:hover { background: var(--teal-50,#f0fdfa); transform: scale(1.03); }
/* Tap-to-play single word */
.quran-word.qw-playing { background: var(--teal-200,#99f6e4); box-shadow: 0 0 0 2px var(--teal-600,#0d9488); transform: scale(1.08); }
.quran-word.qw-playing .qw-ar { color: var(--teal-600,#0d9488); }
/* Karaoke: active word during ayah playback */
.quran-word.qw-active { background: linear-gradient(135deg, var(--teal-200,#99f6e4), var(--teal-300,#5eead4)); box-shadow: 0 0 0 2.5px var(--teal-600,#0d9488), 0 4px 12px rgba(13,148,136,.2); transform: scale(1.1); z-index: 2; }
.quran-word.qw-active .qw-ar { color: var(--teal-800,#065f46); font-weight: 600; }
.quran-word.qw-active .qw-trans { color: var(--teal-600,#0d9488); font-weight: 700; opacity: 1; }
/* Karaoke: already read words */
.quran-word.qw-done { background: var(--teal-100,#ccfbf1); }
.quran-word.qw-done .qw-ar { color: #16a34a; opacity: .7; }
.quran-word.qw-done .qw-trans { color: #86efac; }
/* Karaoke: upcoming words */
.quran-word.qw-upcoming .qw-ar { color: #94a3b8; }
.qw-ar { font-size: 28px; line-height: 1.6; color: #1e293b; transition: color .2s, opacity .2s; }
.qw-trans { font-size: 10px; color: #94a3b8; margin-top: 2px; direction: ltr; max-width: 80px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: all .2s; }
.quran-word-end .qw-ar { font-size: 22px; color: var(--teal-600,#0d9488); }
.quran-word-end .qw-trans { display: none; }
.quran-word-end .qw-tooltip { display: none !important; }
/* Custom tooltip on hover */
.qw-tooltip { display: none; position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); background: #1e293b; color: #fff; font-size: 12px; padding: 6px 10px; border-radius: 8px; white-space: nowrap; z-index: 10; pointer-events: none; line-height: 1.5; box-shadow: 0 4px 12px rgba(0,0,0,.2); max-width: 200px; white-space: normal; text-align: center; }
.qw-tooltip em { color: var(--teal-300,#5eead4); font-style: italic; font-size: 11px; }
.qw-tooltip::after { content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border: 5px solid transparent; border-top-color: #1e293b; }
.quran-word:hover .qw-tooltip { display: block; }
/* Repeat indicator */
.qw-repeat-badge { position: absolute; top: -4px; right: -4px; background: #f59e0b; color: #fff; font-size: 9px; font-weight: 800; width: 16px; height: 16px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
@keyframes qwPulse { 0%,100%{box-shadow:0 0 0 2.5px var(--teal-600,#0d9488),0 4px 12px rgba(13,148,136,.2)} 50%{box-shadow:0 0 0 4px var(--teal-600,#0d9488),0 4px 16px rgba(13,148,136,.35)} }
.quran-word.qw-active { animation: qwPulse 1s ease-in-out infinite; }
.quran-ayah-translit { font-size: 14px; color: var(--teal-700,#0f766e); font-style: italic; padding: 8px 0 4px; line-height: 1.7; opacity: .85; }
.quran-ayah-translation { font-size: 15px; color: #475569; line-height: 1.8; padding: 8px 0; border-top: 1px dashed #e2e8f0; margin-top: 8px; }

/* Navigation */
.quran-nav { display: flex; justify-content: space-between; padding: 28px 0; }
.quran-nav-btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 20px; border-radius: 12px; background: #fff; border: 1px solid #e2e8f0; color: #475569; text-decoration: none; font-weight: 600; font-size: 14px; transition: all .25s; }
.quran-nav-btn:hover { border-color: var(--teal-600,#0d9488); color: var(--teal-600,#0d9488); box-shadow: 0 4px 12px rgba(13,148,136,.1); transform: translateY(-2px); }

/* Floating Player */
.quran-player { display: none; }
@keyframes playerSlideUp { from { transform: translateY(100%); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.quran-player-inner { display: flex; align-items: center; justify-content: space-between; padding: 10px 20px; max-width: 700px; margin: 0 auto; gap: 12px; }
.quran-player-progress { height: 3px; background: #e2e8f0; }
.quran-player-bar { height: 100%; background: linear-gradient(90deg, var(--teal-600,#0d9488), #10b981); width: 0%; transition: width .3s linear; border-radius: 2px; }
/* Left: icon + info */
.qp-left { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
.qp-icon { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--teal-600,#0d9488), var(--teal-800,#065f46)); color: #fff; border-radius: 10px; flex-shrink: 0; }
.qp-info { min-width: 0; }
.qp-surah { font-size: 13px; font-weight: 700; color: #1e293b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qp-ayah { font-size: 11px; color: var(--teal-600,#0d9488); font-weight: 600; }
/* Center: controls */
.qp-center { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.qp-btn { width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; border-radius: 50%; border: none; background: #f1f5f9; color: #475569; cursor: pointer; transition: all .2s; }
.qp-btn:hover { background: #e2e8f0; transform: scale(1.1); }
.qp-btn:active { transform: scale(.95); }
.qp-play { width: 50px; height: 50px; background: linear-gradient(135deg, var(--teal-600,#0d9488), var(--teal-800,#065f46)); color: #fff; box-shadow: 0 4px 14px rgba(13,148,136,.35); }
.qp-play:hover { box-shadow: 0 6px 20px rgba(13,148,136,.45); transform: scale(1.08); }
/* Right: close */
.qp-right { flex-shrink: 0; }
.qp-close-btn { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border-radius: 8px; border: none; background: transparent; color: #94a3b8; cursor: pointer; transition: all .2s; }
.qp-close-btn:hover { background: #fee2e2; color: #ef4444; }

@media (max-width: 576px) {
    .quran-player-inner { padding: 8px 12px; gap: 8px; }
    .qp-icon { width: 34px; height: 34px; border-radius: 8px; }
    .qp-icon svg { width: 14px; height: 14px; }
    .qp-surah { font-size: 12px; }
    .qp-ayah { font-size: 10px; }
    .qp-btn { width: 32px; height: 32px; }
    .qp-play { width: 42px; height: 42px; }
    .qp-play svg { width: 18px; height: 18px; }
}

/* Type badges */
.quran-surah-type { font-size: 9px; font-weight: 700; padding: 3px 10px; border-radius: 20px; text-transform: uppercase; letter-spacing: .5px; }
.quran-type-meccan { background: rgba(255,255,255,.15); color: rgba(255,255,255,.9); backdrop-filter: blur(4px); }
.quran-type-medinan { background: rgba(255,255,255,.15); color: rgba(255,255,255,.9); backdrop-filter: blur(4px); }

/* ── Large desktop ── */
@media (min-width: 1200px) {
    .quran-ayahs { max-width: 900px; margin: 0 auto; }
    /* .quran-col opts any other direct child of the page container into this same
       900px column. Without it the breadcrumbs, the surah overview paragraph and
       the trailing ad unit stayed flush against the full-width .container while
       everything below them was centred — two different left edges on one page. */
    .quran-controls, .quran-mode-bar, .quran-nav, .quran-col { max-width: 900px; margin-left: auto; margin-right: auto; }
}

/* ── Tablet ── */
@media (max-width: 768px) {
    .quran-header { padding: 24px 0; }
    .quran-header-ar { font-size: 32px; }
    .quran-header-name { font-size: 20px; }
    .quran-ayah-arabic { font-size: 26px; line-height: 1.9; }
    .quran-wbw { gap: 3px; }
    .quran-word { padding: 5px 6px; }
    .qw-ar { font-size: 24px !important; }
    .qw-trans { font-size: 9px; max-width: 60px; }
    .qw-tooltip { font-size: 11px; max-width: 160px; }
    .quran-ayah { padding: 16px 14px; }
}

/* ── Mobile ── */
@media (max-width: 576px) {
    .quran-header { padding: 18px 0; }
    .quran-header-inner { flex-direction: column; text-align: center; gap: 8px; }
    .quran-header-info { flex-direction: column; gap: 6px; }
    .quran-header-ar { font-size: 28px; }
    .quran-header-name { font-size: 18px; }
    .quran-header-num { width: 42px; height: 42px; font-size: 15px; }
    .quran-header-meta { justify-content: center; flex-wrap: wrap; font-size: 11px; }
    .quran-mode-bar { margin-bottom: 8px !important; }
    .qm-btn { padding: 7px 14px; font-size: 12px; gap: 5px; }
    .quran-controls { gap: 4px; }
    .quran-ctrl-btn { padding: 7px 10px; font-size: 12px; gap: 4px; }
    .quran-font-btn { padding: 7px 8px; }
    .quran-bismillah-ar { font-size: 30px; }
    .quran-ayah { padding: 12px 10px; border-radius: 10px; }
    .quran-ayah-header { margin-bottom: 10px; }
    .quran-ayah-badge { font-size: 10px; padding: 3px 8px; }
    .quran-ayah-btn { width: 30px; height: 30px; }
    .quran-ayah-arabic { font-size: 22px; line-height: 1.8; }
    .quran-wbw { gap: 2px; justify-content: center; }
    .quran-word { padding: 4px 5px; min-width: 32px; border-radius: 6px; }
    .qw-ar { font-size: 20px !important; line-height: 1.4; }
    .qw-trans { font-size: 8px; max-width: 50px; }
    .qw-tooltip { font-size: 10px; padding: 5px 8px; max-width: 140px; }
    .quran-ayah-translit { font-size: 12px; }
    .quran-ayah-translation { font-size: 13px; line-height: 1.7; }
    .quran-nav { flex-direction: column; gap: 8px; align-items: stretch; }
    .quran-nav-btn { justify-content: center; padding: 10px 14px; font-size: 13px; }
    .quran-player-inner { padding: 6px 10px; }
    .quran-player-info { font-size: 11px; }
    .qp-btn { width: 32px; height: 32px; }
    .qp-play { width: 40px; height: 40px; }
}

/* ── Very small phones ── */
@media (max-width: 360px) {
    .quran-header-name { font-size: 16px; }
    .quran-header-ar { font-size: 24px; }
    .qw-ar { font-size: 18px !important; }
    .qw-trans { display: none; }
    .quran-word { padding: 3px 4px; min-width: 28px; }
    .quran-ayah-translation { font-size: 12px; }
    .quran-ayah-badge { font-size: 9px; padding: 2px 6px; }
}

/* Settings drawer */
.quran-drawer-backdrop {
    position: fixed; inset: 0; background: rgba(15,23,42,.5);
    opacity: 0; pointer-events: none; transition: opacity .25s ease; z-index: 1010;
    backdrop-filter: blur(2px);
}
.quran-drawer-backdrop.is-open { opacity: 1; pointer-events: auto; }
.quran-drawer {
    position: fixed; top: 0; right: 0; bottom: 0; width: 380px; max-width: 92vw;
    background: #fff; box-shadow: -12px 0 32px rgba(15,23,42,.12);
    transform: translateX(100%); transition: transform .28s cubic-bezier(.32,.72,.32,1);
    z-index: 1011; display: flex; flex-direction: column;
}
.quran-drawer:not([hidden]) { display: flex; }
.quran-drawer.is-open { transform: translateX(0); }
.quran-drawer-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 18px 22px 16px;
    border-bottom: 1px solid #eef2f7;
    background: linear-gradient(180deg, #fafbfd 0%, #fff 100%);
    position: sticky; top: 0; z-index: 1;
    flex-shrink: 0;
}
.quran-drawer-head h2 {
    margin: 0; font-size: 17px; font-weight: 700; color: #0f172a;
    letter-spacing: -.2px;
}
.quran-drawer-close {
    width: 32px; height: 32px; display: flex; align-items: center; justify-content: center;
    background: #f1f5f9; border: none; border-radius: 8px;
    font-size: 22px; line-height: 1; color: #64748b; cursor: pointer;
    transition: all .15s;
}
.quran-drawer-close:hover { background: #fee2e2; color: #dc2626; }
.quran-drawer-body { flex: 1; overflow-y: auto; padding: 20px 22px 24px; }
.quran-drawer-body::-webkit-scrollbar { width: 6px; }
.quran-drawer-body::-webkit-scrollbar-thumb { background: #e2e8f0; border-radius: 3px; }
.quran-drawer-body::-webkit-scrollbar-thumb:hover { background: #cbd5e1; }

.quran-drawer-section {
    margin-bottom: 22px;
    padding-bottom: 22px;
    border-bottom: 1px solid #f1f5f9;
}
.quran-drawer-section:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: none; }
.quran-drawer-section h3 {
    display: flex; align-items: center; gap: 8px;
    font-size: 11px; font-weight: 800; color: var(--teal-600,#0d9488);
    text-transform: uppercase; letter-spacing: 1px;
    margin: 0 0 12px;
}
.quran-drawer-section h3::before {
    content: ''; width: 16px; height: 2px;
    background: linear-gradient(90deg, var(--teal-600,#0d9488), var(--teal-400,#2dd4bf));
    border-radius: 2px;
}

.quran-drawer-select {
    width: 100%;
    padding: 10px 36px 10px 12px;
    border: 1.5px solid #e2e8f0;
    border-radius: 10px;
    background: #fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>") no-repeat right 12px center;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    font-size: 14px;
    font-weight: 500;
    color: #0f172a;
    cursor: pointer;
    transition: all .18s ease;
}
.quran-drawer-select:hover { border-color: #cbd5e1; background-color: #fafbfd; }
.quran-drawer-select:focus {
    outline: none;
    border-color: var(--teal-600,#0d9488);
    box-shadow: 0 0 0 3px rgba(13,148,136,.18);
    background-color: #fff;
}

@media (max-width: 576px) {
    .quran-drawer { width: 100%; max-width: 100%; }
    .quran-drawer-body { padding: 16px 18px 20px; }
}

/* Tafsir modal */
.quran-tafsir-modal { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; }
.quran-tafsir-modal[hidden] { display: none; }
.quran-tafsir-backdrop { position: absolute; inset: 0; background: rgba(15,23,42,.55); }
.quran-tafsir-panel {
    position: relative; background: #fff; border-radius: 16px; max-width: 700px; width: calc(100% - 32px);
    max-height: 80vh; display: flex; flex-direction: column; box-shadow: 0 24px 48px rgba(0,0,0,.18);
    animation: qtmIn .25s ease;
}
@keyframes qtmIn { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.quran-tafsir-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid #e2e8f0; }
.quran-tafsir-head h2 { margin: 0; font-size: 15px; color: var(--teal-600,#0d9488); }
.quran-tafsir-close { background: transparent; border: none; font-size: 28px; line-height: 1; color: #94a3b8; cursor: pointer; }
.quran-tafsir-close:hover { color: #ef4444; }
.quran-tafsir-source { padding: 8px 20px; font-size: 12px; color: #64748b; border-bottom: 1px dashed #e2e8f0; }
.quran-tafsir-context { padding: 12px 20px; background: #f8fafc; border-bottom: 1px solid #e2e8f0; }
.quran-tafsir-ar { font-family: 'Traditional Arabic','Scheherazade New',serif; font-size: 22px; line-height: 1.8; color: #1e293b; margin-bottom: 6px; }
.quran-tafsir-tr { font-size: 14px; color: #475569; line-height: 1.6; }
.quran-tafsir-body { padding: 16px 20px; overflow-y: auto; line-height: 1.8; color: #1e293b; }
.quran-tafsir-body p { margin: 0 0 12px; }
.quran-tafsir-loading { color: #94a3b8; font-style: italic; }
.quran-tafsir-error { color: #ef4444; }
.quran-tafsir-error button { margin-left: 8px; padding: 4px 10px; border: 1px solid #ef4444; background: #fff; color: #ef4444; border-radius: 6px; cursor: pointer; }

@media (max-width: 576px) {
    .quran-tafsir-modal { align-items: flex-end; }
    .quran-tafsir-panel { width: 100%; max-height: 88vh; border-radius: 16px 16px 0 0; animation: qtmInBottom .25s ease; }
    @keyframes qtmInBottom { from { transform: translateY(100%); } to { transform: translateY(0); } }
}
/* Bookmarks */
.quran-bookmarks-wrap { position: relative; display: inline-block; }
.quran-bookmark-count {
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--teal-600,#0d9488); color: #fff; font-size: 10px; font-weight: 700;
    min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; margin-left: 4px;
}
.quran-bookmark-dropdown {
    position: absolute; top: 100%; right: 0; margin-top: 6px;
    background: #fff; border: 1px solid #e2e8f0; border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0,0,0,.12); min-width: 280px; max-width: 340px;
    z-index: 50; overflow: hidden;
}
.quran-bookmark-dropdown[hidden] { display: none; }
.quran-bookmark-head, .quran-bookmark-foot {
    padding: 10px 14px; font-size: 12px; color: #64748b; border-bottom: 1px solid #e2e8f0;
}
.quran-bookmark-foot { border-top: 1px solid #e2e8f0; border-bottom: none; }
.quran-bookmark-list { list-style: none; padding: 0; margin: 0; max-height: 320px; overflow-y: auto; }
.quran-bookmark-list li { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; border-bottom: 1px solid #f1f5f9; }
.quran-bookmark-list li:last-child { border-bottom: none; }
.quran-bookmark-list a { color: #1e293b; text-decoration: none; font-size: 13px; flex: 1; }
.quran-bookmark-list a:hover { color: var(--teal-600,#0d9488); }
.quran-bookmark-list .qbm-time { font-size: 11px; color: #94a3b8; margin-left: 8px; }
.quran-bookmark-list .qbm-remove { background: transparent; border: none; color: #94a3b8; cursor: pointer; font-size: 18px; line-height: 1; padding: 0 6px; }
.quran-bookmark-list .qbm-remove:hover { color: #ef4444; }
.quran-bookmark-empty { padding: 20px 14px; text-align: center; color: #94a3b8; font-size: 13px; }
.quran-bookmark-clear { background: transparent; border: none; color: #ef4444; cursor: pointer; font-size: 12px; }

.quran-ayah-bookmark.is-bookmarked svg { fill: var(--teal-600,#0d9488); stroke: var(--teal-600,#0d9488); }
.quran-ayah-bookmark.is-bookmarked { background: var(--teal-50,#f0fdfa); border-color: var(--teal-600,#0d9488); color: var(--teal-600,#0d9488); }

.quran-drawer-row {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; margin-bottom: 12px; min-height: 40px;
}
.quran-drawer-row:last-child { margin-bottom: 0; }
.quran-drawer-row label {
    font-size: 13px; color: #334155; font-weight: 500;
    flex: 1; line-height: 1.35;
}
.quran-drawer-row .quran-drawer-select {
    width: 140px; flex-shrink: 0; padding: 8px 30px 8px 12px;
    font-size: 13px; font-weight: 600;
}
.quran-drawer-group { display: flex; gap: 6px; flex-shrink: 0; }
.quran-drawer-row .quran-ctrl-btn {
    padding: 7px 12px; font-size: 13px; font-weight: 600;
    border: 1.5px solid #e2e8f0; border-radius: 8px; min-width: 38px;
    background: #fff; color: #475569; transition: all .15s;
}
.quran-drawer-row .quran-ctrl-btn:hover {
    border-color: var(--teal-600,#0d9488); color: var(--teal-600,#0d9488); background: var(--teal-50,#f0fdfa);
}
.quran-drawer-row .quran-ctrl-btn.active {
    border-color: var(--teal-600,#0d9488); background: var(--teal-600,#0d9488); color: #fff;
}

.quran-drawer-reset {
    width: 100%; padding: 12px 14px;
    border: 1.5px solid #fecaca; border-radius: 10px;
    background: #fff; color: #dc2626;
    font-size: 13px; font-weight: 600; letter-spacing: .2px;
    cursor: pointer; transition: all .18s ease;
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
}
.quran-drawer-reset:hover {
    background: #fef2f2; border-color: #ef4444; color: #b91c1c;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(239,68,68,.15);
}
.quran-drawer-reset:active { transform: translateY(0); box-shadow: none; }

/* ---- Bismillah card alignment -------------------------------------------
   The Bismillah renders as an ordinary .quran-ayah card (id="ayah-bismillah"),
   so it inherited the right-alignment that numbered ayahs correctly use. Being
   only three words, it then clung to the right edge of a wide card with a large
   empty gap to its left, while its translation sat hard left — a visible zigzag
   on desktop.

   A mushaf centres the Bismillah, so centre it here: the Arabic, the word-by-word
   flex row (which packs to flex-start = the right under direction:rtl), and the
   translation. Scoped to this one card by id — numbered ayahs keep proper RTL
   right-alignment, which is correct for Arabic and must not change.

   Supersedes the older .quran-bismillah rule above, which nothing renders. */
#ayah-bismillah .quran-ayah-arabic { text-align: center; }
#ayah-bismillah .quran-wbw { justify-content: center; }
#ayah-bismillah .quran-ayah-translation { text-align: center; }