/* --- MUSHAF PREMIUM DESIGN SYSTEM --- */

:root {
    /* Mushaf Specific Colors */
    --mushaf-bg: #fffbf2;
    /* Creamy paper background */
    --mushaf-border: #2d6a4f;
    /* Deep Green */
    --mushaf-accent: #d4a373;
    /* Gold/Bronze */
    --mushaf-text: #000000;
    --glass-panel: rgba(255, 255, 255, 0.95);
    /* Arabic text thickness (font-weight) — changed by changeWeight() */
    --arabic-weight: 400;
    
    /* Responsive scaling for Arabic text */
    --device-scale: 0.85; /* Default for small screens */
}

@media (min-width: 1025px) {
    :root {
        --device-scale: 1; /* Tablets */
    }
}

@media (min-width: 1200px) {
    :root {
        --device-scale: 1.25; /* Large screens / Desktops */
    }
}

.quran-container {
    max-width: 100%;
    width: 100%;
    margin: 0 auto;
    transition: max-width 0.3s ease;
    position: relative;
    z-index: 105 !important;
}

@media (min-width: 600px) {
    .quran-container {
        max-width: 600px;
    }
}

@media (min-width: 1025px) {
    .quran-container {
        max-width: 800px;
    }
}

@media (min-width: 1200px) {
    .quran-container {
        max-width: 1000px;
    }
}



/* Body background is controlled by data-theme in style.css and [data-theme="dark/natural"] below */

[data-theme="dark"] {
    --mushaf-bg: #1e293b;
    /* Darker paper for dark mode */
    --mushaf-border: rgba(255, 255, 255, 0.08);
    --mushaf-text: #f8fafc;
    --glass-panel: rgba(30, 41, 59, 0.95);
    --mushaf-accent: #10b981;
}

[data-theme="natural"] {
    --mushaf-bg: #fffbf2;
    /* Warm paper */
    --mushaf-border: #4d6a4c;
    /* Olive Green */
    --mushaf-text: #44403c;
    --glass-panel: rgba(255, 255, 252, 0.95);
}

/* PAGE TRANSITION STYLES */
.page {
    display: none;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.page.active {
    display: block;
    opacity: 1;
    animation: fadeIn 0.4s ease-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* PREMIUM CONTINUE READING CARD */
.premium-resume-card {
    position: relative;
    background: linear-gradient(135deg, #02231b 0%, #043e30 40%, #0a6c51 100%);
    border-radius: 24px;
    padding: 24px;
    color: white;
    margin-bottom: 30px;
    cursor: pointer;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    box-shadow: 0 20px 45px rgba(2, 37, 29, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-top: 1px solid rgba(255, 255, 255, 0.22);
    display: flex;
    align-items: center;
}

.premium-resume-card:active {
    transform: scale(0.97);
    box-shadow: 0 5px 15px rgba(16, 185, 129, 0.2);
}

.prc-bg-glow {
    position: absolute;
    top: -50%;
    right: -20%;
    width: 200px;
    height: 200px;
    background: radial-gradient(circle, rgba(255,255,255,0.15) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}

.prc-pattern {
    position: absolute;
    inset: 0;
    background-image: 
        linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
    background-size: 20px 20px;
    opacity: 0.3;
    pointer-events: none;
    mask-image: linear-gradient(to bottom, black 40%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, black 40%, transparent 100%);
}

.prc-content {
    display: flex;
    align-items: center;
    gap: 20px;
    position: relative;
    z-index: 2;
    width: 100%;
}

.prc-icon-wrapper {
    width: 64px;
    height: 64px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    color: white;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.2);
    flex-shrink: 0;
    transition: transform 0.3s ease;
}

.premium-resume-card:hover .prc-icon-wrapper {
    transform: rotate(-5deg) scale(1.05);
}

.prc-text-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.prc-subtitle {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.85);
    margin-bottom: 4px;
}

.prc-title {
    font-size: 1.6rem;
    font-weight: 800;
    margin-bottom: 6px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    font-family: 'Plus Jakarta Sans', sans-serif;
}

.prc-action {
    font-size: 0.85rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
    display: flex;
    align-items: center;
    gap: 6px;
    opacity: 0.9;
}

.prc-arrow {
    font-size: 0.8rem;
    transition: transform 0.3s ease;
}

.premium-resume-card:hover .prc-arrow {
    transform: translateX(4px);
}

/* SURAH LIST STYLES */
.surah-list-container {
    padding-bottom: 120px;
}

.surah-item {
    background: var(--glass-bg, rgba(255,255,255,0.85));
    border: 1px solid var(--glass-border);
    border-radius: 20px;
    padding: 16px 20px;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: all 0.2s ease-out;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.02);
    cursor: pointer;
    position: relative;
    overflow: hidden;
    /* Hardware acceleration for smoother scrolling & hover state */
    transform: translateZ(0);
    will-change: transform, box-shadow;
}

.surah-item::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, transparent, rgba(255,255,255,0.4), transparent);
    transform: translateX(-100%);
    transition: transform 0.6s;
    pointer-events: none;
}

[data-theme="dark"] .surah-item {
    background: var(--glass-bg, rgba(30,41,59,0.85));
}

[data-theme="dark"] .surah-item::after {
    background: linear-gradient(120deg, transparent, rgba(255,255,255,0.05), transparent);
}

.surah-item:hover {
    transform: translateY(-2px) translateZ(0);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    border-color: var(--primary);
}

.surah-item:hover::after {
    transform: translateX(100%);
}

.surah-item:active {
    transform: scale(0.98) translateZ(0);
}

.surah-number-badge {
    position: relative;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 0.9rem;
    margin-right: 16px;
    color: var(--primary);
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M50 2 L65 15 L85 15 L85 35 L98 50 L85 65 L85 85 L65 85 L50 98 L35 85 L15 85 L15 65 L2 50 L15 35 L15 15 L35 15 Z' stroke='%2310b981' stroke-width='5' /%3E%3Ccircle cx='50' cy='50' r='36' stroke='%2310b981' stroke-width='1.5' opacity='0.3' /%3E%3Ccircle cx='50' cy='18' r='2' fill='%2310b981' /%3E%3Ccircle cx='50' cy='82' r='2' fill='%2310b981' /%3E%3Ccircle cx='18' cy='50' r='2' fill='%2310b981' /%3E%3Ccircle cx='82' cy='50' r='2' fill='%2310b981' /%3E%3C/g%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    flex-shrink: 0;
    /* Removed drop-shadow for performance */
    transition: transform 0.2s ease-out;
}

[data-theme="dark"] .surah-number-badge {
    color: #34d399;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M50 2 L65 15 L85 15 L85 35 L98 50 L85 65 L85 85 L65 85 L50 98 L35 85 L15 85 L15 65 L2 50 L15 35 L15 15 L35 15 Z' stroke='%2334d399' stroke-width='5' /%3E%3Ccircle cx='50' cy='50' r='36' stroke='%2334d399' stroke-width='1.5' opacity='0.3' /%3E%3Ccircle cx='50' cy='18' r='2' fill='%2334d399' /%3E%3Ccircle cx='50' cy='82' r='2' fill='%2334d399' /%3E%3Ccircle cx='18' cy='50' r='2' fill='%2334d399' /%3E%3Ccircle cx='82' cy='50' r='2' fill='%2334d399' /%3E%3C/g%3E%3C/svg%3E");
}

.surah-item-title {
    font-weight: 800;
    font-size: 1.05rem;
    color: var(--text-main);
    margin-bottom: 2px;
}

.surah-item-subtitle {
    font-size: 0.75rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
}

.surah-item-arabic {
    font-family: 'Amiri', serif;
    font-size: 1.6rem;
    color: var(--primary);
    font-weight: 700;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.surah-item:hover .surah-item-arabic {
    transform: scale(1.1) translateX(-4px);
}

.reader-sticky-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding: calc(15px + var(--safe-area-top, env(safe-area-inset-top, 0px))) 24px 15px;
    position: sticky;
    top: 0;
    z-index: 200;
    background: var(--glass-bg);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--glass-border);
    margin-left: -24px;
    margin-right: -24px;
    transition: background 0.3s ease;
}

@media (max-width: 480px) {
    .reader-sticky-header {
        margin-left: -10px;
        margin-right: -10px;
        padding-left: 10px;
        padding-right: 10px;
    }
}

@media (max-width: 400px) {
    .reader-sticky-header {
        margin-left: -8px;
        margin-right: -8px;
        padding-left: 8px;
        padding-right: 8px;
    }
}

/* Hide global header in reader mode */
body.reader-mode header {
    display: none !important;
}

/* Base App Safe Area Refinements */
body {
    padding-bottom: calc(110px + env(safe-area-inset-bottom, 20px));
}

/* --- MUSHAF MODE STYLES (The Core Request) --- */
.mushaf-container {
    max-width: 100%;
    margin: 0 auto;
    border: 3px double var(--mushaf-border);
    /* Outer Frame */
    background: var(--mushaf-bg);
    padding: 2px;
    border-radius: 4px;
    /* Slight radius */
    position: relative;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
}

.mushaf-inner-frame {
    border: 1px solid var(--mushaf-border);
    /* Inner line */
    padding: 8px 5px;
    min-height: 80vh;
    border-radius: 2px;
    position: relative;
}

/* The decorative corner bits simulated */
.mushaf-inner-frame::before,
.mushaf-inner-frame::after {
    content: "❖";
    position: absolute;
    color: var(--mushaf-border);
    font-size: 1.2rem;
}

.mushaf-inner-frame::before {
    top: -14px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--mushaf-bg);
    padding: 0 10px;
}

.mushaf-inner-frame::after {
    bottom: -14px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--mushaf-bg);
    padding: 0 10px;
}

/* --- DESIGN STYLE: ORNATE BORDER (Full Traditional Mushaf) --- */
.mushaf-ornate {
    max-width: 100%;
    margin: 0 auto;
    background: var(--mushaf-bg);
    padding: 8px;
    border-radius: 6px;
    position: relative;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
    border: 6px solid transparent;
    border-image: repeating-linear-gradient(45deg,
            var(--mushaf-border),
            var(--mushaf-border) 8px,
            var(--mushaf-accent) 8px,
            var(--mushaf-accent) 16px,
            var(--mushaf-border) 16px,
            var(--mushaf-border) 24px) 6;
}

.mushaf-ornate-inner {
    border: 2px solid var(--mushaf-border);
    padding: 12px 6px;
    min-height: 80vh;
    position: relative;
    background: linear-gradient(to bottom,
            rgba(45, 106, 79, 0.02) 0%,
            transparent 20%,
            transparent 80%,
            rgba(45, 106, 79, 0.02) 100%);
}

/* Ornate corner decorations */
.mushaf-ornate-inner::before,
.mushaf-ornate-inner::after {
    content: '';
    position: absolute;
    width: 25px;
    height: 25px;
    border: 2px solid var(--mushaf-border);
}

.mushaf-ornate-inner::before {
    top: -2px;
    left: -2px;
    border-right: none;
    border-bottom: none;
    background: linear-gradient(135deg, var(--mushaf-accent) 0%, transparent 50%);
}

.mushaf-ornate-inner::after {
    top: -2px;
    right: -2px;
    border-left: none;
    border-bottom: none;
    background: linear-gradient(225deg, var(--mushaf-accent) 0%, transparent 50%);
}

/* Bottom corners using additional wrapper */
.ornate-corners::before,
.ornate-corners::after {
    content: '';
    position: absolute;
    width: 25px;
    height: 25px;
    border: 2px solid var(--mushaf-border);
}

.ornate-corners::before {
    bottom: -2px;
    left: -2px;
    border-right: none;
    border-top: none;
    background: linear-gradient(45deg, var(--mushaf-accent) 0%, transparent 50%);
}

.ornate-corners::after {
    bottom: -2px;
    right: -2px;
    border-left: none;
    border-top: none;
    background: linear-gradient(315deg, var(--mushaf-accent) 0%, transparent 50%);
}

/* Ornate header banner */
.ornate-header-banner {
    border: 3px solid var(--mushaf-border);
    background: linear-gradient(135deg, rgba(45, 106, 79, 0.08), rgba(212, 163, 115, 0.08));
    margin: 20px auto;
    padding: 15px;
    text-align: center;
    width: 85%;
    position: relative;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(45, 106, 79, 0.2);
}

.ornate-header-banner::before,
.ornate-header-banner::after {
    content: '◆';
    position: absolute;
    color: var(--mushaf-accent);
    font-size: 1.5rem;
    top: 50%;
    transform: translateY(-50%);
}

.ornate-header-banner::before {
    left: 10px;
}

.ornate-header-banner::after {
    right: 10px;
}

/* Page number at bottom */
.ornate-page-number {
    text-align: center;
    margin-top: 20px;
    padding: 10px;
    position: relative;
}

.ornate-page-number::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 60px;
    height: 60px;
    border: 2px solid var(--mushaf-border);
    border-radius: 50%;
    background: radial-gradient(circle, var(--mushaf-accent) 0%, transparent 70%);
    opacity: 0.3;
}

.ornate-page-number span {
    position: relative;
    z-index: 2;
    font-family: 'Amiri', serif;
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--mushaf-text);
}

/* --- DESIGN STYLE: MINIMAL HEADER (Clean with decorative banner) --- */
.mushaf-minimal {
    max-width: 100%;
    margin: 0 auto;
    background: var(--mushaf-bg);
    padding: 8px;
    border-radius: 4px;
    position: relative;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
}

.mushaf-minimal-inner {
    padding: 10px 6px;
    min-height: 80vh;
    position: relative;
}

/* Minimal decorative header */
.minimal-header-banner {
    background: linear-gradient(90deg,
            transparent 0%,
            var(--mushaf-border) 5%,
            var(--mushaf-accent) 50%,
            var(--mushaf-border) 95%,
            transparent 100%);
    padding: 2px;
    margin: 15px auto 25px;
    width: 90%;
    border-radius: 4px;
    position: relative;
}

.minimal-header-content {
    background: var(--mushaf-bg);
    padding: 12px 20px;
    text-align: center;
    border-radius: 3px;
    position: relative;
}

.minimal-header-content::before,
.minimal-header-content::after {
    content: '✦';
    position: absolute;
    color: var(--mushaf-accent);
    font-size: 1rem;
    top: 50%;
    transform: translateY(-50%);
}

.minimal-header-content::before {
    left: 15px;
}

.minimal-header-content::after {
    right: 15px;
}

/* --- DESIGN STYLE: MODERN CLEAN (Contemporary minimal) --- */
.mushaf-modern {
    max-width: 100%;
    margin: 0 auto;
    background: var(--glass-bg);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid var(--glass-border);
    border-radius: 16px;
    padding: 12px;
    position: relative;
    box-shadow: var(--glass-shadow);
}

.mushaf-modern-inner {
    padding: 12px 6px;
    min-height: 80vh;
    position: relative;
}

/* Modern header */
.modern-header {
    background: var(--primary-gradient);
    color: white;
    padding: 16px 24px;
    margin: 0 -10px 25px;
    border-radius: 16px;
    text-align: center;
    box-shadow: 0 8px 20px var(--primary-glow);
}

.modern-header .surah-name-arabic {
    color: white;
    font-size: 1.6rem;
    margin: 0;
}

/* Shared text styles for all designs */
.design-text-block {
    font-family: 'Noto Naskh Arabic', 'Amiri', serif;
    font-size: calc(var(--arabic-size, 26px) * var(--device-scale, 1));
    font-weight: var(--arabic-weight, 400);

    line-height: 2.3;
    color: var(--mushaf-text);
    text-align: justify;
    text-align-last: center;
    direction: rtl;
    padding: 0 5px;
}

/* The Header Box */
.surah-header-box {
    border: 2px solid var(--mushaf-border);
    background: rgba(45, 106, 79, 0.05);
    margin: 20px auto;
    padding: 10px;
    text-align: center;
    width: 80%;
    position: relative;
    border-radius: 4px;
    /* Slight fix */
}

.surah-header-box::before,
.surah-header-box::after {
    content: "";
    position: absolute;
    width: 10px;
    height: 10px;
    border: 1px solid var(--mushaf-border);
    border-radius: 50%;
    background: var(--mushaf-accent);
    top: 50%;
    transform: translateY(-50%);
}

.surah-header-box::before {
    left: -6px;
}

.surah-header-box::after {
    right: -6px;
}

.surah-name-arabic {
    font-family: 'Amiri', serif;
    font-size: 1.8rem;
    color: var(--mushaf-text);
    font-weight: 700;
}

.mushaf-bismillah {
    text-align: center;
    font-family: 'Noto Naskh Arabic', serif;
    font-size: 1.6rem;
    font-weight: var(--arabic-weight, 400);
    margin: 15px 0 25px;
    color: var(--mushaf-text);
}

/* The Text Block */
.mushaf-text-block {
    font-family: 'Noto Naskh Arabic', 'Amiri', serif;
    /* Indo-Pak approx */
    font-size: calc(var(--arabic-size, 26px) * var(--device-scale, 1));
    font-weight: var(--arabic-weight, 400);

    line-height: 2.3;
    color: var(--mushaf-text);
    text-align: justify;
    text-align-last: center;
    /* Critical for Mushaf look */
    direction: rtl;
    padding: 0 5px;
}

.ayah-marker {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    /* Exact Replica of User Screenshot - 8-Lobe Rosette with Loops */
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='none' stroke='black' stroke-width='2' d='M50,15 C52,15 55,18 55,20 C58,19 62,20 65,23 C68,26 69,30 68,33 C71,33 74,36 76,39 C78,42 78,46 76,49 C78,52 78,56 76,59 C74,62 71,65 68,65 C69,68 68,72 65,75 C62,78 58,79 55,78 C55,80 52,83 50,83 C48,83 45,80 45,78 C42,79 38,78 35,75 C32,72 31,68 32,65 C29,65 26,62 24,59 C22,56 22,52 24,49 C22,46 22,42 24,39 C26,36 29,33 32,33 C31,30 32,26 35,23 C38,20 42,19 45,20 C45,18 48,15 50,15 Z' /%3E%3Ccircle cx='50' cy='49' r='23' fill='none' stroke='black' stroke-width='1.5'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    font-family: 'Amiri', 'Noto Naskh Arabic', serif;
    font-size: 0.75rem;
    /* Smaller to fit 3 digits comfortably */
    font-weight: 700;
    color: black;
    margin: 0 5px;
    vertical-align: middle;
    padding-top: 5px;
    white-space: nowrap;
    overflow: visible;
    filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.05));
    transition: filter 0.3s;
}

/* Dark Mode: Invert the marker to make it white-ish */
[data-theme="dark"] .ayah-marker,
[data-theme="dark"] .ayah-marker span {
    filter: invert(1) brightness(1.2);
    color: black;
}

/* --- READER/LIST VIEW (Alternative) --- */
.ayah-list-view .ayah-block {
    padding: 20px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    background: var(--glass-panel);
    margin-bottom: 10px;
    border-radius: 12px;
}

/* --- TRANSLATION ROW WITH PLAY BUTTON --- */
.ayah-translation-row {
    display: none;
    align-items: flex-start;
    gap: 10px;
    margin-top: 8px;
    padding-top: 10px;
    border-top: 1px solid rgba(128, 128, 128, 0.15);
}

.ayah-translation-row.show {
    display: flex;
}

.trans-play-btn {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    background: var(--primary, #10b981);
    color: white;
    font-size: 0.7rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.35);
    transition: transform 0.2s, box-shadow 0.2s;
    margin-top: 2px;
}

.trans-play-btn:active {
    transform: scale(0.9);
    box-shadow: 0 1px 4px rgba(16, 185, 129, 0.2);
}

.trans-play-btn:hover {
    transform: scale(1.08);
    box-shadow: 0 4px 14px rgba(16, 185, 129, 0.45);
}

.ayah-translation {
    flex: 1;
    font-size: 0.88rem;
    color: var(--text-muted);
    line-height: 1.6;
}

/* --- SLEEK PRO ISLAND AUDIO PLAYER (V3 Professional) --- */
.premium-player-island {
    position: fixed;
    bottom: calc(95px + var(--safe-area-bottom, env(safe-area-inset-bottom, 0px)));
    left: 12px;
    right: 12px;
    max-width: 580px;
    margin: 0 auto);
    background: rgba(255, 255, 255, 0.85); /* Premium Frosted White */
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    border-radius: 20px; /* More refined "Pro" rounding */
    border: 0.5px solid rgba(255, 255, 255, 0.3);
    box-shadow: 
        0 12px 35px rgba(0, 0, 0, 0.08),
        inset 0 0 0 1px rgba(255, 255, 255, 0.1);
    z-index: 10000;
    display: none;
    flex-direction: column;
    overflow: visible;
    transition: all 0.4s cubic-bezier(0.19, 1, 0.22, 1);
}

[data-theme="dark"] .premium-player-island {
    background: rgba(15, 23, 42, 0.82); /* Sleek Midnight Glass */
    border: 0.5px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 15px 45px rgba(0, 0, 0, 0.45);
}

.premium-player-island.reader-active {
    bottom: calc(20px + var(--safe-area-bottom, env(safe-area-inset-bottom, 0px)));
}

/* 1. Ultra-Thin Top Neon Progress */
.island-progress-track {
    position: absolute;
    top: 0;
    left: 20px;
    right: 20px;
    height: 3px);
    background: rgba(0, 0, 0, 0.03);
    cursor: pointer;
    overflow: hidden;
    z-index: 20;
    border-radius: 0 0 4px 4px; /* subtle rounding at the bottom of the track */
    /* Remove the mask as it's no longer needed when inset */
}

[data-theme="dark"] .island-progress-track { background: rgba(255, 255, 255, 0.05); }

.island-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #10b981, #34d399);
    width: 0%;
    transition: width 0.1s linear;
}

/* 2. Professional Grid Layout */
.island-inner {
    display: grid;
    grid-template-columns: 1fr auto 1fr; /* Metadata | Controls | Utils */
    align-items: center;
    padding: 0 16px;
    gap: 12px;
    height: 64px; /* Pro Slim Height */
}

/* Metadata Dock (Left) */
.island-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.island-title-row {
    width: 100%;
    overflow: hidden;
}

.island-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-main);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    letter-spacing: -0.2px;
    font-family: 'Plus Jakarta Sans', sans-serif;
}

/* Smooth Auto-Marquee if Title is too long */
.island-title.is-long {
    display: inline-block;
    padding-left: 100%;
    animation: marqueePro 12s linear infinite;
}

@keyframes marqueePro {
    0% { transform: translateX(0); }
    100% { transform: translateX(-100%); }
}

.island-reciter {
    font-size: 0.7rem;
    color: var(--text-muted);
    font-weight: 600;
    opacity: 0.7;
    margin-top: -1px;
}

/* Dynamic Controls (Center) */
.island-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.island-time { display: none; } /* Kept hidden on mobile for pro look */

.island-play-cluster {
    display: flex;
    align-items: center;
    gap: 10px;
}

.island-icon-btn {
    background: transparent;
    border: none;
    color: var(--text-main);
    width: 32px;
    height: 32px;
    font-size: 0.85rem;
    opacity: 0.5;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.island-icon-btn:hover, .island-icon-btn:active { opacity: 1; transform: scale(1.1); }

.island-play-btn {
    width: 44px;
    height: 44px;
    background: var(--primary-gradient);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    box-shadow: 0 8px 20px rgba(16, 185, 129, 0.4);
    border: none;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.is-playing .island-play-btn { /* Removed breathing glow */ }

@keyframes breathingGlowPro {
    0% { box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3); }
    100% { box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3); transform: scale(1.04); }
}

/* Utility Dock (Right) */
.island-utils {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
}

.island-util-btn, .island-close-btn {
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    color: var(--text-muted);
    font-size: 0.95rem;
    opacity: 0.6;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.2s;
}

.island-util-btn:hover, .island-close-btn:hover { background: rgba(0,0,0,0.05); opacity: 1; }
[data-theme="dark"] .island-util-btn:hover { background: rgba(255,255,255,0.08); }

.island-waveform { display: none; } /* Keep hidden in V3 compact view */
.island-divider { display: none; }

/* ELITE DASHBOARD POPUP V4 (Professional Micro-Dock) */
.island-dashboard-popup {
    position: absolute;
    bottom: calc(100% + 10px);
    right: 0; /* Aligned to the 3-dot trigger area */
    left: auto;
    width: 270px; /* Precise Professional Width */
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(28px) saturate(180%);
    -webkit-backdrop-filter: blur(28px) saturate(180%);
    border-radius: 14px; /* Sharper "Pro" aesthetic */
    padding: 10px 14px;
    box-shadow: 
        0 18px 45px rgba(0, 0, 0, 0.12),
        inset 0 0 0 0.5px rgba(255, 255, 255, 0.4);
    display: none;
    flex-direction: column;
    gap: 8px; /* High Density Gap */
    border: 0.5px solid rgba(0, 0, 0, 0.04);
    transform-origin: 92% 100%; /* MacBook Pro "Pop" Origin (near 3-dot) */
    z-index: 10001;
}

[data-theme="dark"] .island-dashboard-popup {
    background: rgba(20, 28, 41, 0.92);
    border: 0.5px solid rgba(255, 255, 255, 0.06);
}

.island-dashboard-popup.active { 
    display: flex; 
    animation: dashboardLiquidIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes dashboardLiquidIn {
    0% { 
        opacity: 0; 
        transform: scale(0.3) translateY(40px); 
        filter: blur(10px);
    }
    100% { 
        opacity: 1; 
        transform: scale(1) translateY(0); 
        filter: blur(0);
    }
}

.dashboard-row.volume {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(0, 0, 0, 0.02);
    padding: 6px 12px;
    border-radius: 10px;
}
[data-theme="dark"] .dashboard-row.volume { background: rgba(255, 255, 255, 0.03); }

.volume-icon { font-size: 0.85rem; opacity: 0.6; }

.controls-grid { display: flex; gap: 8px; }

.dashboard-pill {
    flex: 1;
    background: rgba(0, 0, 0, 0.02);
    border-radius: 10px;
    padding: 6px 4px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    cursor: pointer;
    transition: all 0.2s;
    color: var(--text-main);
    border: none;
}
[data-theme="dark"] .dashboard-pill { background: rgba(255, 255, 255, 0.03); }

.dashboard-pill.active { 
    background: var(--primary-gradient); 
    color: white; 
    box-shadow: 0 4px 10px rgba(16, 185, 129, 0.3);
}

.pill-label { font-size: 0.52rem; text-transform: uppercase; font-weight: 800; opacity: 0.5; }
.pill-value { font-size: 0.82rem; font-weight: 800; }

/* RESPONSIVE POLISH V3 (Restored Controls) */
@media screen and (max-width: 420px) {
    .premium-player-island {
        left: 6px;
        right: 6px;
        bottom: calc(88px + var(--safe-area-bottom, env(safe-area-inset-bottom, 0px)));
    }
    
    .island-inner { 
        padding: 0 10px; 
        gap: 6px; 
        grid-template-columns: 1fr auto 0.8fr; /* Responsive Balances */
    }

    .island-info { min-width: 0; }
    .island-title { font-size: 0.88rem; }
    .island-reciter { font-size: 0.65rem; }

    .island-play-cluster { gap: 4px; }
    .island-play-btn { width: 44px; height: 44px; font-size: 1rem; }
    .island-icon-btn { 
        display: flex; /* Force show */
        width: 30px; 
        height: 30px; 
        font-size: 0.82rem; 
        opacity: 0.7;
    }

    .island-util-btn, .island-close-btn { width: 32px; height: 32px; font-size: 0.9rem); }
}

/* Elite scaling for ultra-small devices (iPhone 5/SE/Mini) */
@media screen and (max-width: 340px) {
    .island-inner { gap: 4px; padding: 0 6px; }
    .island-title { font-size: 0.78rem; }
    .island-play-btn { width: 38px; height: 38px; }
    .island-icon-btn { width: 26px; height: 26px; font-size: 0.75rem; }
}

@media screen and (min-width: 1024px) {
    .premium-player-island { bottom: 25px; max-width: 600px; border-radius: 24px; }
    .island-time { display: block; }
    .island-inner { height: 70px; padding: 0 24px; }
    .island-icon-btn { display: flex; opacity: 0.7; }
    .island-waveform { display: flex; }
}

/* --- NATURAL THEME V3 --- */
[data-theme="natural"] .premium-player-island {
    background: rgba(255, 255, 255, 0.82);
    border: 0.5px solid rgba(77, 106, 76, 0.2);
    box-shadow: 0 10px 30px rgba(77, 106, 76, 0.1);
}
[data-theme="natural"] .island-progress-fill { background: linear-gradient(90deg, #4d6a4c, #a3e635); }
[data-theme="natural"] .island-play-btn { background: var(--primary-gradient); box-shadow: 0 8px 20px rgba(77, 106, 76, 0.3); }
[data-theme="natural"] .island-dashboard-popup { background: rgba(255, 255, 255, 0.95); border: 0.5px solid rgba(77, 106, 76, 0.2); }

@media screen and (min-width: 1024px) {
    .premium-player-island {
        bottom: 30px;
        max-width: 650px;
    }
}

/* --- NATURAL THEME INTEGRATION --- */
[data-theme="natural"] .premium-player-island {
    background: rgba(255, 255, 255, 0.45);
    border: 1px solid rgba(77, 106, 76, 0.15);
    box-shadow: 
        0 10px 30px rgba(77, 106, 76, 0.08),
        inset 0 0 15px rgba(255, 255, 255, 0.5);
}

[data-theme="natural"] .island-progress-fill {
    background: linear-gradient(90deg, #4d6a4c, #a3e635, #4d6a4c);
}

[data-theme="natural"] .island-play-btn {
    background: linear-gradient(135deg, #6c8a6b 0%, #364e35 100%);
    box-shadow: 0 10px 25px rgba(77, 106, 76, 0.35);
}

[data-theme="natural"] .island-dashboard-popup {
    background: rgba(255, 255, 255, 0.65);
    border: 1px solid rgba(77, 106, 76, 0.1);
}

[data-theme="natural"] .dashboard-pill.active {
    background: linear-gradient(135deg, #a3e635 0%, #4d6a4c 100%);
}

[data-theme="natural"] .island-waveform .bar {
    background: #4d6a4c;
}



/* Top Nav Override */
header {
    padding: calc(15px + var(--safe-area-top, env(safe-area-inset-top, 0px))) 20px 15px !important;
}

#headerBackBtn {
    width: 44px !important;
    height: 44px !important;
}

/* --- MODERN SETTINGS DESIGN SYSTEM --- */
.bottom-sheet {
    position: fixed;
    bottom: -100%;
    left: 0;
    width: 100%);
    background: rgba(30, 41, 59, 0.85);
    /* Dark Glass Default */
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(25px) saturate(180%);
    -webkit-backdrop-filter: blur(25px) saturate(180%);
    border-top-left-radius: 32px;
    border-top-right-radius: 32px;
    padding: 24px 24px 0 24px;
    /* Safe area padding moved to scrollable container */
    z-index: 2000;
    transition: transform 0.4s cubic-bezier(0.19, 1, 0.22, 1), bottom 0.6s cubic-bezier(0.19, 1, 0.22, 1);
    box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.2);
    display: flex;
    flex-direction: column;
    gap: 20px;
    max-height: 85vh;
    max-height: 85dvh;
    overflow-y: hidden;
    transform: translateY(0);
    will-change: transform;
}

.sheet-body {
    flex: 1;
    overflow-y: auto;
    overscroll-behavior: contain;
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding-bottom: calc(40px + env(safe-area-inset-bottom, 20px));
    /* Custom premium scrollbar styling */
    scrollbar-width: thin);
    scrollbar-color: rgba(148, 163, 184, 0.3) transparent;
}

.sheet-body::-webkit-scrollbar {
    width: 6px;
}

.sheet-body::-webkit-scrollbar-track {
    background: transparent;
}

.sheet-body::-webkit-scrollbar-thumb {
    background-color: rgba(148, 163, 184, 0.3);
    border-radius: 20px;
}

.bottom-sheet.active {
    bottom: 0;
}

.bottom-sheet.dragging {
    transition: none !important;
    user-select: none;
    -webkit-user-select: none;
}

[data-theme="light"] .bottom-sheet {
    background: rgba(255, 255, 255, 0.9);
    border-top: 1px solid rgba(0, 0, 0, 0.05);
    box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.1);
}

.sheet-handle {
    width: 48px;
    height: 5px;
    background: rgba(148, 163, 184, 0.3);
    border-radius: 10px;
    margin: -8px auto 12px;
    transition: background 0.3s, transform 0.3s;
    cursor: grab;
    flex-shrink: 0;
    position: relative;
    opacity: 0.6;
}

.sheet-handle:active,
.bottom-sheet.dragging .sheet-handle {
    cursor: grabbing;
    background: rgba(148, 163, 184, 0.8);
    transform: scaleX(1.1);
    opacity: 1;
}

.bottom-sheet.active .sheet-handle {
    background: rgba(148, 163, 184, 0.5);
}

[data-theme="light"] .sheet-handle {
    background: rgba(0, 0, 0, 0.15);
}

.settings-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

[data-theme="light"] .settings-header {
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.settings-title {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--text-main);
    letter-spacing: -0.5px;
}

/* Modern Card Row */
.setting-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 20px;
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

[data-theme="light"] .setting-card {
    background: rgba(0, 0, 0, 0.03);
    border: 1px solid rgba(0, 0, 0, 0.05);
}

.setting-label-row {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--text-main);
    font-weight: 700;
    font-size: 0.95rem;
}

.setting-icon {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: rgba(16, 185, 129, 0.15);
    color: #10b981;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
}

/* Segmented Dock */
.segmented-dock {
    background: rgba(0, 0, 0, 0.2);
    padding: 4px;
    border-radius: 14px;
    display: flex;
    position: relative;
    gap: 5px;
}

[data-theme="light"] .segmented-dock {
    background: rgba(0, 0, 0, 0.06);
}

.dock-btn {
    flex: 1;
    background: transparent;
    border: none;
    padding: 10px;
    color: var(--text-muted);
    font-weight: 600;
    font-size: 0.85rem;
    cursor: pointer;
    border-radius: 10px;
    position: relative;
    z-index: 2;
    transition: color 0.3s;
}

.dock-btn.active {
    color: white;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

[data-theme="light"] .dock-btn.active {
    color: #0f172a;
}

/* The sliding pill background could be complex, using simple active class style for robustness */
.dock-btn.active {
    background: var(--primary-gradient);
    box-shadow: 0 4px 10px var(--primary-glow);
}

[data-theme="light"] .dock-btn.active {
    background: white;
    color: black;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Modern Range */
.range-wrapper {
    position: relative;
    height: 24px;
    display: flex;
    align-items: center;
}

.modern-range {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 6px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    outline: none;
}

[data-theme="light"] .modern-range {
    background: rgba(0, 0, 0, 0.1);
}

.modern-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 22px;
    height: 22px;
    background: white;
    border: 2px solid #10b981;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    transition: transform 0.2s;
}

.modern-range::-webkit-slider-thumb:hover {
    transform: scale(1.1);
}

/* Styled Select */
.modern-select {
    width: 100%;
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--text-main);
    padding: 12px 16px;
    border-radius: 12px;
    font-size: 0.95rem;
    outline: none;
}

[data-theme="light"] .modern-select {
    background: rgba(255, 255, 255, 0.5);
    border: 1px solid rgba(0, 0, 0, 0.1);
    color: #334155;
}

/* ================================================================
   SEQUENTIAL PLAYBACK — AYAH HIGHLIGHT & TRACKING
   ================================================================ */

/* --- Keyframe: subtle pulse that draws the eye without distracting --- */
@keyframes ayah-pulse {
    0%   { box-shadow: 0 0 0   0   rgba(56, 189, 248, 0.35); }
    50%  { box-shadow: 0 0 18px 6px rgba(56, 189, 248, 0.18); }
    100% { box-shadow: 0 0 0   0   rgba(56, 189, 248, 0.35); }
}
@keyframes ayah-pulse-inline {
    0%   { text-shadow: 0 0 0px transparent; }
    50%  { text-shadow: 0 0 12px rgba(56, 189, 248, 0.55); }
    100% { text-shadow: 0 0 0px transparent; }
}

/* --- LIST MODE: full ayah block highlight --- */
.ayah-list-view .ayah-block.ayah-playing {
    background: rgba(56, 189, 248, 0.08) !important;
    border: 1px solid rgba(56, 189, 248, 0.35) !important;
    border-radius: 12px;
    transition: background 0.4s ease, border-color 0.4s ease;
    scroll-margin-top: 90px;
}

/* Playing ayah Arabic text in light blue */
.ayah-list-view .ayah-block.ayah-playing .mushaf-text-block {
    color: #7dd3fc !important;
    transition: color 0.4s ease;
}

/* Small "now playing" left accent bar */
.ayah-list-view .ayah-block.ayah-playing::before {
    content: '';
    position: absolute;
    left: 0;
    top: 10%;
    height: 80%;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: linear-gradient(to bottom, #38bdf8, #0ea5e9);
    opacity: 0.9;
}
/* Ensure relative positioning for the pseudo-element */
.ayah-list-view .ayah-block {
    position: relative;
}

/* --- MUSHAF MODE: inline span highlight --- */
span.ayah-playing {
    color: #7dd3fc !important;
    transition: color 0.4s ease;
    scroll-margin-top: 90px;
}

/* --- Light / Natural theme adjustments (slightly deeper blue on white) --- */
[data-theme="light"] .ayah-list-view .ayah-block.ayah-playing {
    background: rgba(14, 165, 233, 0.07) !important;
    border-color: rgba(14, 165, 233, 0.3) !important;
}
[data-theme="light"] .ayah-list-view .ayah-block.ayah-playing .mushaf-text-block,
[data-theme="light"] span.ayah-playing {
    color: #0284c7 !important;
}
[data-theme="natural"] .ayah-list-view .ayah-block.ayah-playing {
    background: rgba(14, 165, 233, 0.06) !important;
    border-color: rgba(14, 165, 233, 0.25) !important;
}
[data-theme="natural"] .ayah-list-view .ayah-block.ayah-playing .mushaf-text-block,
[data-theme="natural"] span.ayah-playing {
    color: #0369a1 !important;
}

/* --- Player bar: show a live dot when sequential mode active --- */
.island-player.playing-sequential .island-title::before {
    content: '⏵';
    color: #38bdf8;
    margin-right: 5px;
    font-size: 1rem;
}

/* --- PREMIUM ISLAMIC LOADER --- */
.islamic-loader-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 80px 20px;
    min-height: 50vh;
}

.minar-loader {
    width: 80px;
    height: 120px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    margin: 0 auto;
}

.minaret-svg {
    width: 100%;
    height: 100%;
    color: var(--primary);
    filter: drop-shadow(0 0 8px var(--primary-glow));
}

.minaret-path {
    stroke-dasharray: 600;
    stroke-dashoffset: 600;
    animation: drawMinaret 3s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.minar-light {
    position: absolute;
    top: 45%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 20px;
    height: 40px;
    background: radial-gradient(circle, var(--primary-glow) 0%, transparent 70%);
    opacity: 0;
    animation: pulseMinarLight 2s ease-in-out infinite alternate 1s;
    pointer-events: none;
}

@keyframes drawMinaret {
    0% {
        stroke-dashoffset: 600;
        opacity: 0;
    }
    15% {
        opacity: 1;
    }
    50% {
        stroke-dashoffset: 0;
    }
    85% {
        opacity: 1;
    }
    100% {
        stroke-dashoffset: 0;
        opacity: 0;
    }
}

@keyframes pulseMinarLight {
    0% { opacity: 0; transform: translate(-50%, -50%) scale(0.8); }
    100% { opacity: 0.8; transform: translate(-50%, -50%) scale(1.2); }
}


.loading-text {
    margin-top: 24px;
    font-weight: 700;
    letter-spacing: 2px;
    color: var(--primary);
    font-size: 0.85rem;
    text-transform: uppercase;
    animation: pulseLoaderText 1.5s ease-in-out infinite alternate;
}

@keyframes pulseLoaderText {
    0% { opacity: 0.4; transform: translateY(0); }
    100% { opacity: 1; transform: translateY(-2px); }
}


/* --- PREMIUM STREAK CARD --- */
.premium-streak-card {
    background: var(--glass-bg);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid var(--glass-border);
    border-radius: 20px;
    padding: 16px 20px;
    margin-bottom: 24px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
}

.psc-header {
    font-size: 0.85rem;
    font-weight: 800;
    color: var(--text-main);
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}
.psc-header i {
    color: #f97316; /* Orange fire */
}

.psc-days {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.streak-day {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    opacity: 0.45;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.streak-day.active, .streak-day.is-today {
    opacity: 1;
}

.sd-dot {
    width: 32px;
    height: 32px;
    border-radius: 9px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px dashed rgba(255, 255, 255, 0.18);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

[data-theme="light"] .sd-dot {
    background: rgba(0, 0, 0, 0.02);
    border-color: rgba(0, 0, 0, 0.15);
}

[data-theme="natural"] .sd-dot {
    background: rgba(77, 106, 76, 0.02);
    border-color: rgba(77, 106, 76, 0.15);
}

.streak-day.active .sd-dot {
    background: var(--primary-gradient);
    border: 1px solid transparent;
    box-shadow: 0 4px 12px var(--primary-glow);
    transform: scale(1.05);
}

.streak-day.is-today:not(.active) .sd-dot {
    border: 1.5px solid var(--primary);
    animation: todayPulse 2s infinite ease-in-out;
}

@keyframes todayPulse {
    0%, 100% {
        box-shadow: 0 0 0 0 var(--primary-glow);
    }
    50% {
        box-shadow: 0 0 10px 2px var(--primary-glow);
        border-color: #34d399;
    }
}

.sd-dot::after {
    content: '✓';
    color: white;
    font-size: 0.85rem;
    font-weight: 800;
    opacity: 0;
    transform: scale(0.5);
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    display: flex;
    align-items: center;
    justify-content: center;
}

.streak-day.active .sd-dot::after {
    opacity: 1;
    transform: scale(1);
}

.sd-label, .sd-label-sm {
    font-size: 0.65rem;
    font-weight: 700;
    color: var(--text-muted);
    letter-spacing: 0.4px;
    transition: color 0.3s;
}
.streak-day.active .sd-label, .streak-day.active .sd-label-sm,
.streak-day.is-today .sd-label, .streak-day.is-today .sd-label-sm {
    color: var(--text-main);
    font-weight: 800;
}

/* === ULTIMATE HABIT DASHBOARD === */
.ultimate-habit-card {
    cursor: default; /* Remove pointer from main card to allow interaction inside */
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    position: relative;
    overflow: hidden;
}

/* Add a beautiful premium glow behind the progress ring */
.ultimate-habit-card::after {
    content: '';
    position: absolute;
    top: -20px;
    left: -20px;
    width: 120px;
    height: 120px;
    background: radial-gradient(circle, rgba(16, 185, 129, 0.12) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
}

[data-theme="natural"] .ultimate-habit-card::after {
    background: radial-gradient(circle, rgba(77, 106, 76, 0.12) 0%, transparent 70%);
}

[data-theme="dark"] .ultimate-habit-card {
    background: rgba(15, 23, 42, 0.45) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.18) !important;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.02) !important;
}

[data-theme="natural"] .ultimate-habit-card {
    background: rgba(253, 252, 248, 0.7) !important;
    border: 1px solid rgba(77, 106, 76, 0.18) !important;
    border-top: 1px solid rgba(77, 106, 76, 0.28) !important;
    box-shadow: 0 16px 40px rgba(77, 106, 76, 0.08) !important;
}

[data-theme="light"] .ultimate-habit-card {
    background: rgba(255, 255, 255, 0.8) !important;
    border: 1px solid rgba(0, 0, 0, 0.05) !important;
    border-top: 1px solid rgba(0, 0, 0, 0.08) !important;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.03) !important;
}

.uhc-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    margin-bottom: 12px;
    position: relative;
    z-index: 1;
}

.uhc-header-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.uhc-progress-ring-container {
    position: relative;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.ultimate-habit-card:hover .uhc-progress-ring-container {
    transform: scale(1.05);
}

.uhc-progress-ring {
    transform: rotate(-90deg);
    filter: drop-shadow(0 2px 4px rgba(16, 185, 129, 0.15));
}

.uhc-ring-fill {
    transition: stroke-dashoffset 1s cubic-bezier(0.19, 1, 0.22, 1);
}

.uhc-ring-icon {
    position: absolute;
    font-size: 1.15rem;
    color: var(--primary);
    transition: transform 0.3s ease;
}

.uhc-title {
    font-size: 0.95rem;
    font-weight: 800;
    color: var(--text-main);
    letter-spacing: -0.2px;
}

.uhc-subtitle {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-muted);
    margin-top: 2px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.psc-chevron {
    color: var(--text-muted);
    font-size: 0.95rem;
    opacity: 0.6;
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.2s;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

.uhc-header:hover .psc-chevron {
    opacity: 1;
    background: rgba(255, 255, 255, 0.05);
}
[data-theme="light"] .uhc-header:hover .psc-chevron {
    background: rgba(0, 0, 0, 0.04);
}

.ultimate-habit-card.expanded .psc-chevron {
    transform: rotate(180deg);
}

.psc-expanded {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.5s cubic-bezier(0.19, 1, 0.22, 1), opacity 0.3s ease, margin-top 0.4s;
    position: relative;
    z-index: 1;
}

.ultimate-habit-card.expanded .psc-expanded {
    max-height: 2000px;
    opacity: 1;
    margin-top: 18px;
}

.psc-divider {
    border: none;
    border-top: 1px solid var(--glass-border);
    margin: 0 0 16px 0;
    opacity: 0.35;
}

/* Sections */
.uhc-section {
    margin-bottom: 20px;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
}

.uhc-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.72rem;
    font-weight: 800;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.6px;
    margin-bottom: 10px;
}

.uhc-section-sub {
    font-size: 0.65rem;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    margin-bottom: 8px;
    opacity: 0.7;
}

.uhc-goal-badge {
    background: var(--primary-gradient);
    color: white;
    padding: 3px 9px;
    border-radius: 20px;
    font-size: 0.65rem;
    font-weight: 800;
    box-shadow: 0 4px 10px var(--primary-glow);
}

/* Range Slider Upgrades */
.ultimate-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 5px !important;
    background: rgba(255, 255, 255, 0.08) !important;
    border-radius: 4px;
    outline: none;
    accent-color: var(--primary);
}

[data-theme="light"] .ultimate-slider {
    background: rgba(0, 0, 0, 0.06) !important;
}

.ultimate-slider::-webkit-slider-runnable-track {
    background: transparent;
    border: none;
}

.ultimate-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #ffffff !important;
    border: 3px solid var(--primary) !important;
    box-shadow: 0 0 10px var(--primary-glow);
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    margin-top: -5px;
}

.ultimate-slider::-webkit-slider-thumb:hover {
    transform: scale(1.25);
    box-shadow: 0 0 15px var(--primary-glow);
}

.ultimate-slider::-moz-range-thumb {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #ffffff !important;
    border: 3px solid var(--primary) !important;
    box-shadow: 0 0 10px var(--primary-glow);
    cursor: pointer;
    transition: transform 0.15s ease;
}

.ultimate-slider::-moz-range-thumb:hover {
    transform: scale(1.25);
}

/* === GOAL CELEBRATION === */
.goal-celebration {
    display: none;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.12), rgba(52, 211, 153, 0.08));
    border: 1px solid rgba(16, 185, 129, 0.25);
    border-radius: 14px;
    margin-bottom: 16px;
    position: relative;
    overflow: hidden;
    animation: celebPulse 2s ease-in-out infinite;
}

.celebration-icon {
    font-size: 1.4rem;
    color: #f59e0b;
    animation: celebStar 1.5s ease-in-out infinite;
}

.celebration-text {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--primary);
}

@keyframes celebPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.15); }
    50% { box-shadow: 0 0 20px 4px rgba(16, 185, 129, 0.2); }
}

@keyframes celebStar {
    0%, 100% { transform: scale(1) rotate(0deg); }
    50% { transform: scale(1.2) rotate(15deg); }
}

/* Goal reached ring glow */
.uhc-progress-ring-container.goal-reached {
    animation: ringGlow 2s ease-in-out infinite;
}
.uhc-progress-ring-container.goal-reached .uhc-ring-icon i {
    color: #f59e0b;
}
@keyframes ringGlow {
    0%, 100% { filter: drop-shadow(0 0 4px rgba(16, 185, 129, 0.3)); }
    50% { filter: drop-shadow(0 0 12px rgba(16, 185, 129, 0.6)); }
}

/* === WEEKLY BAR CHART === */
.weekly-chart {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 6px;
    height: 100px;
    padding: 4px 0;
}

.wc-bar-group {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    height: 100%;
}

.wc-count {
    font-size: 0.6rem;
    font-weight: 700;
    color: var(--text-muted);
    min-height: 14px;
}

.wc-bar-track {
    flex: 1;
    width: 100%;
    max-width: 28px;
    background: rgba(0,0,0,0.04);
    border-radius: 6px;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
}
[data-theme="dark"] .wc-bar-track {
    background: rgba(255,255,255,0.05);
}

.wc-bar-fill {
    width: 100%;
    background: linear-gradient(to top, var(--primary), #34d399);
    border-radius: 6px;
    min-height: 3px;
    transition: height 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.wc-bar-fill.today {
    background: linear-gradient(to top, #059669, #34d399, #6ee7b7);
    box-shadow: 0 0 8px rgba(16, 185, 129, 0.4);
}

.wc-label {
    font-size: 0.6rem;
    font-weight: 600;
    color: var(--text-muted);
}
.wc-label.today {
    color: var(--primary);
    font-weight: 800;
}

/* === QURAN JOURNEY PROGRESS === */
.quran-journey-section {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.05), rgba(52, 211, 153, 0.02));
    border-color: rgba(16, 185, 129, 0.1);
}
[data-theme="dark"] .quran-journey-section {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.08), rgba(52, 211, 153, 0.03));
}

.journey-progress-bar {
    width: 100%;
    height: 10px;
    background: rgba(0,0,0,0.06);
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 8px;
}
[data-theme="dark"] .journey-progress-bar {
    background: rgba(255,255,255,0.06);
}

.journey-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #059669, #34d399, #6ee7b7);
    border-radius: 10px;
    transition: width 1s cubic-bezier(0.34, 1.56, 0.64, 1);
    min-width: 0;
    position: relative;
}
.journey-progress-fill::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 8px;
    height: 100%;
    background: rgba(255,255,255,0.6);
    border-radius: 50%;
    filter: blur(3px);
}

.journey-stats-row {
    display: flex;
    justify-content: space-between;
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--text-muted);
}

/* === STATS GRID (2x2) === */
.psc-stats-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-bottom: 20px;
}

.psc-stat-box {
    background: transparent !important;
    border: none !important;
    border-radius: 0;
    padding: 4px 6px;
    display: flex;
    flex-direction: row !important;
    align-items: center;
    gap: 12px;
    transition: all 0.25s ease;
}

.psc-stat-box:hover {
    transform: translateX(3px);
}

.psc-stat-icon {
    font-size: 1.15rem;
    margin-bottom: 0 !important;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: transform 0.2s ease;
}

.psc-stat-box:hover .psc-stat-icon {
    transform: scale(1.1) rotate(3deg);
}

/* Individual Icon Colors & Badge Backgrounds */
.psc-stat-box:nth-child(1) .psc-stat-icon {
    background: rgba(249, 115, 22, 0.08);
    color: #f97316 !important;
}
.psc-stat-box:nth-child(2) .psc-stat-icon {
    background: rgba(234, 179, 8, 0.08);
    color: #eab308 !important;
}
.psc-stat-box:nth-child(3) .psc-stat-icon {
    background: rgba(56, 189, 248, 0.08);
    color: #38bdf8 !important;
}
.psc-stat-box:nth-child(4) .psc-stat-icon {
    background: rgba(16, 185, 129, 0.08);
    color: #10b981 !important;
}

[data-theme="light"] .psc-stat-box:nth-child(1) .psc-stat-icon { background: rgba(249, 115, 22, 0.12); }
[data-theme="light"] .psc-stat-box:nth-child(2) .psc-stat-icon { background: rgba(234, 179, 8, 0.12); }
[data-theme="light"] .psc-stat-box:nth-child(3) .psc-stat-icon { background: rgba(56, 189, 248, 0.12); }
[data-theme="light"] .psc-stat-box:nth-child(4) .psc-stat-icon { background: rgba(16, 185, 129, 0.12); }

.psc-stat-info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
}

.psc-stat-value {
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--text-main);
    font-family: 'Plus Jakarta Sans', sans-serif;
    line-height: 1.2;
}

.psc-stat-label {
    font-size: 0.65rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    margin-top: 1px;
}

/* === BADGES (Upgraded Grid) === */
.uhc-badges-row {
    display: flex;
    gap: 10px;
    justify-content: space-between;
}

.uhc-badges-wrap {
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-start;
}

.uhc-badges-wrap .uhc-badge {
    flex: 0 0 calc(33.33% - 6px);
    min-width: 0;
}

.uhc-badge {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 4px;
    background: rgba(0,0,0,0.03);
    border-radius: 12px;
    filter: grayscale(1) opacity(0.5);
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

[data-theme="dark"] .uhc-badge {
    background: rgba(255,255,255,0.03);
}

.uhc-badge.earned {
    filter: grayscale(0) opacity(1);
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.1), rgba(52, 211, 153, 0.05));
    border: 1px solid rgba(16, 185, 129, 0.2);
    box-shadow: 0 4px 10px rgba(16, 185, 129, 0.1);
    transform: scale(1.02);
}

.uhc-badge-icon i {
    font-size: 1.3rem;
    color: #fbbf24;
}

.uhc-badge-name {
    font-size: 0.6rem;
    font-weight: 700;
    color: var(--text-main);
    text-align: center;
    white-space: nowrap;
}

/* === MOTIVATION CARD === */
.motivation-card {
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.06), rgba(245, 158, 11, 0.03)) !important;
    border-color: rgba(251, 191, 36, 0.15) !important;
}
[data-theme="dark"] .motivation-card {
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.08), rgba(245, 158, 11, 0.04)) !important;
}

.motivation-header {
    font-size: 0.7rem;
    font-weight: 800;
    color: #f59e0b;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.motivation-text {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-main);
    line-height: 1.5;
    font-style: italic;
    margin-bottom: 6px;
}

.motivation-source {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--text-muted);
    text-align: right;
}

/* === ENCOURAGEMENT BANNER === */
.encouragement-banner {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.08), rgba(52, 211, 153, 0.04));
    border: 1px solid rgba(16, 185, 129, 0.12);
    border-radius: 12px;
    padding: 12px 16px;
    margin-bottom: 16px;
    text-align: center;
}

.encouragement-banner span {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-main);
    line-height: 1.4;
}

/* Share Button */
.uhc-share-btn {
    width: 100%;
    padding: 12px;
    background: var(--glass-panel);
    border: 1px solid var(--glass-border);
    color: var(--primary);
    font-weight: 700;
    font-size: 0.9rem;
    border-radius: 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.3s;
    margin-top: 8px;
}

[data-theme="dark"] .uhc-share-btn {
    background: rgba(255,255,255,0.05);
}

.uhc-share-btn:hover {
    background: var(--primary);
    color: white;
    box-shadow: 0 4px 15px rgba(16, 185, 129, 0.3);
}

.uhc-share-btn:active {
    transform: scale(0.98);
}

/* === RESET LINK === */
.uhc-reset-link {
    text-align: center;
    padding: 12px;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--text-muted);
    opacity: 0.5;
    cursor: pointer;
    transition: all 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}
.uhc-reset-link:hover {
    opacity: 1;
    color: #ef4444;
}
.uhc-reset-link:active {
    transform: scale(0.97);
}

/* --- BOTTOM SHEET RESPONSIVE MOBILE POLISH --- */
@media screen and (max-width: 480px) {
    .bottom-sheet {
        padding: 16px 16px 0 16px;
        gap: 12px;
        border-top-left-radius: 24px;
        border-top-right-radius: 24px;
    }
    
    .sheet-handle {
        margin: 0 auto 10px;
    }
    
    .settings-header {
        padding-bottom: 8px;
    }
    
    .settings-title {
        font-size: 1.25rem;
    }
    
    .sheet-body {
        gap: 12px;
        padding-bottom: calc(30px + env(safe-area-inset-bottom, 15px));
    }
    
    .setting-card {
        padding: 12px 14px;
        border-radius: 16px;
        gap: 8px;
    }
    
    .setting-label-row {
        gap: 8px;
    }
    
    .segmented-dock {
        gap: 6px;
    }

    .dock-btn {
        padding: 8px 10px;
        font-size: 0.8rem;
    }
    
    .range-wrapper input[type="range"] {
        margin: 4px 0);
    }
}

/* Custom Desktop layout adjustments when in Reader Mode (removes left padding space) */
@media (min-width: 992px) {
    body.reader-mode {
        padding-left: 0 !important;
    }
}


/* ==========================================================================
   QURAN PREMIUM SOLID HEADER & MIHRAB POINTED ARCH
   ========================================================================== */
.quran-solid-header {
    display: block !important;
    position: relative !important;
    background: linear-gradient(135deg, #0e664f 0%, #0a4f3b 100%) !important;
    padding: calc(14px + var(--safe-area-top, env(safe-area-inset-top, 0px))) 20px 48px !important;
    z-index: 100;
}

/* Inherits standard green header in dark mode to match main page */

.header-arch-container {
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 100%;
    height: 40px;
    z-index: 1;
    pointer-events: none;
}

.header-arch-svg {
    width: 100%;
    height: 100%;
    display: block;
}


/* ==========================================================================
   GILDED BOOKMARK CARD DECORATION
   ========================================================================== */
.premium-resume-card {
    position: relative;
    overflow: hidden;
    margin-top: -35px !important;
    z-index: 101 !important;
}



.premium-resume-card::before {
    content: '';
    position: absolute;
    top: 0;
    right: 24px;
    width: 28px;
    height: 100%);
    background: linear-gradient(180deg, #fbbf24 0%, #d97706 100%);
    clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 85%, 0 100%);
    opacity: 0.85;
    z-index: 1;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
    transition: transform 0.3s ease;
}

.premium-resume-card:hover::before {
    transform: translateY(4px);
}


/* ==========================================================================
   UNIFIED MUSHAF INDEX TABLE OF CONTENTS
   ========================================================================== */
.surah-list-container {
    background: var(--glass-bg, rgba(255, 255, 255, 0.85));
    border: 1px solid var(--glass-border, rgba(0, 0, 0, 0.06));
    border-radius: 24px;
    padding: 8px 0 !important;
    box-shadow: var(--glass-shadow, 0 10px 40px rgba(148, 163, 184, 0.06));
    overflow: hidden;
    margin-bottom: 32px;
}

.surah-item {
    background: transparent !important;
    border: none !important;
    border-bottom: 1px solid var(--glass-border, rgba(0, 0, 0, 0.05)) !important;
    border-radius: 0 !important;
    margin-bottom: 0 !important;
    padding: 16px 24px !important;
    box-shadow: none !important;
    transition: background 0.25s ease !important;
}

.surah-item:last-child {
    border-bottom: none !important;
}

.surah-item:hover {
    background: rgba(16, 185, 129, 0.08) !important;
    transform: none !important; /* disable hover translation to match list design */
}

[data-theme="natural"] .surah-item:hover {
    background: rgba(77, 106, 76, 0.08) !important;
}


/* ==========================================================================
   MINIMAL CIRCULAR NUMBER BADGE
   ========================================================================== */
.surah-number-badge {
    background-image: none !important; /* remove rosette SVG */
    border: 2px solid var(--primary-glow, rgba(16, 185, 129, 0.2)) !important;
    background: rgba(16, 185, 129, 0.05) !important;
    border-radius: 50% !important;
    color: var(--primary, #10b981) !important;
    width: 38px !important;
    height: 38px !important;
    font-size: 0.85rem !important;
    font-weight: 700 !important;
    margin-right: 16px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.25s ease !important;
}

.surah-item:hover .surah-number-badge {
    border-color: var(--primary, #10b981) !important;
    background: var(--primary-gradient, #10b981) !important;
    color: white !important;
}

.surah-item-arabic {
    font-size: 1.5rem !important;
    font-weight: 600 !important;
    color: var(--primary, #10b981) !important;
    transition: color 0.25s ease !important;
}

.surah-item:hover .surah-item-arabic {
    color: var(--primary, #10b981) !important;
}

/* ==========================================================================
   DOWNLOAD DIALOG & PROGRESS OVERLAY
   ========================================================================== */
.download-modal-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(15, 23, 42, 0.75);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 30000;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.download-modal-backdrop.show {
    opacity: 1;
    pointer-events: auto;
}

.download-modal-sheet {
    width: 85%;
    max-width: 320px;
    background: rgba(30, 41, 59, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-top: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 24px;
    padding: 28px 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    box-shadow: 0 30px 65px rgba(0, 0, 0, 0.45);
    transform: scale(0.9) translateY(20px);
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.download-modal-backdrop.show .download-modal-sheet {
    transform: scale(1) translateY(0);
}

[data-theme="light"] .download-modal-sheet {
    background: rgba(255, 255, 255, 0.9);
    border-color: rgba(0, 0, 0, 0.05);
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.1);
}

[data-theme="natural"] .download-modal-sheet {
    background: rgba(253, 252, 248, 0.95);
    border-color: rgba(77, 106, 76, 0.15);
    box-shadow: 0 20px 45px rgba(77, 106, 76, 0.08);
}

.download-modal-cover-wrapper {
    position: relative;
    width: 140px;
    height: 140px;
    margin-bottom: 22px;
}

.download-modal-cover {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 18px;
    border: 1.5px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
}

[data-theme="light"] .download-modal-cover {
    border-color: rgba(0, 0, 0, 0.08);
}

.download-modal-glow {
    position: absolute;
    inset: -8px;
    background: radial-gradient(circle, rgba(16, 185, 129, 0.35) 0%, transparent 70%);
    z-index: -1;
    border-radius: 24px;
    filter: blur(4px);
    animation: downloadGlowPulse 2.5s infinite alternate ease-in-out;
}

[data-theme="natural"] .download-modal-glow {
    background: radial-gradient(circle, rgba(77, 106, 76, 0.35) 0%, transparent 70%);
}

@keyframes downloadGlowPulse {
    0% { transform: scale(0.95); opacity: 0.6; }
    100% { transform: scale(1.05); opacity: 1; }
}

.download-modal-info {
    margin-bottom: 22px;
    width: 100%;
}

.download-modal-label {
    font-size: 0.68rem;
    font-weight: 800;
    color: var(--primary);
    text-transform: uppercase;
    letter-spacing: 1.5px;
}

.download-modal-title {
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--text-main);
    margin: 4px 0 2px;
    line-height: 1.2;
}

.download-modal-reciter {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-muted);
    opacity: 0.8;
}

.download-progress-container {
    width: 100%;
    margin-bottom: 24px;
}

.download-progress-bar {
    width: 100%;
    height: 6px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 8px;
}

[data-theme="light"] .download-progress-bar {
    background: rgba(0, 0, 0, 0.06);
}

.download-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #10b981, #34d399);
    width: 0%;
    border-radius: 4px;
    transition: width 0.2s cubic-bezier(0.1, 0.8, 0.2, 1);
}

[data-theme="natural"] .download-progress-fill {
    background: linear-gradient(90deg, #4d6a4c, #a3e635);
}

.download-progress-percentage {
    font-size: 0.85rem;
    font-weight: 800;
    color: var(--text-main);
}

.download-modal-cancel-btn {
    width: 100%;
    padding: 12px;
    border: none;
    background: rgba(255, 255, 255, 0.04);
    color: var(--text-muted);
    font-weight: 700;
    font-size: 0.85rem;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.25s ease;
}

[data-theme="light"] .download-modal-cancel-btn {
    background: rgba(0, 0, 0, 0.03);
}

.download-modal-cancel-btn:hover {
    background: rgba(239, 68, 68, 0.12);
    color: #ef4444;
}

/* Download pill in three-dots menu */
.download-pill {
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    transition: all 0.2s ease;
}

.download-pill:hover {
    background: var(--primary-gradient) !important;
    color: white !important;
    box-shadow: 0 4px 12px var(--primary-glow) !important;
    border-color: transparent !important;
}

[data-theme="light"] .download-pill {
    background: rgba(0, 0, 0, 0.03) !important;
    border: 1px solid rgba(0, 0, 0, 0.04) !important;
}

[data-theme="light"] .download-pill:hover {
    color: black !important;
    background: #ffffff !important;
}


/* --- NATURAL THEME SETTINGS SHEET OVERRIDES --- */
[data-theme="natural"] .bottom-sheet {
    background: rgba(230, 226, 222, 0.95) !important;
    border-top: 1px solid rgba(120, 113, 108, 0.15) !important;
    box-shadow: 0 -10px 40px rgba(68, 64, 60, 0.08) !important;
}

[data-theme="natural"] .sheet-handle {
    background: rgba(120, 113, 108, 0.3) !important;
}

[data-theme="natural"] .settings-header {
    border-bottom: 1px solid rgba(120, 113, 108, 0.15) !important;
}

[data-theme="natural"] .setting-card {
    background: rgba(255, 255, 255, 0.6) !important;
    border: 1px solid rgba(120, 113, 108, 0.15) !important;
}

[data-theme="natural"] .setting-icon {
    color: var(--primary) !important;
}

[data-theme="natural"] .segmented-dock {
    background: rgba(68, 64, 60, 0.08) !important;
}

[data-theme="natural"] .dock-btn {
    color: #57534E !important;
}

[data-theme="natural"] .dock-btn.active {
    background: var(--primary-gradient) !important;
    color: white !important;
    box-shadow: 0 4px 10px var(--primary-glow) !important;
    text-shadow: none !important;
}

[data-theme="natural"] .modern-select {
    background: rgba(255, 255, 255, 0.6) !important;
    border: 1px solid rgba(120, 113, 108, 0.15) !important;
    color: #44403C !important;
}

[data-theme="natural"] .switch input:checked + .slider {
    background: var(--primary-gradient) !important;
}

[data-theme="natural"] .modern-range::-webkit-slider-runnable-track {
    background: rgba(68, 64, 60, 0.1) !important;
}

[data-theme="natural"] .modern-range::-webkit-slider-thumb {
    background: #ffffff !important;
    border: 2px solid var(--primary) !important;
    box-shadow: 0 2px 6px rgba(68, 64, 60, 0.2) !important;
}