/* --- 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;
}

body {
    background: #f0fdf4;
    /* Light mint background for the app context */
}

[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);
    background: #0f172a;
    --mushaf-accent: #10b981;
}

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

/* 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(145deg, var(--primary, #10b981) 0%, #047857 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 12px 30px rgba(16, 185, 129, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.1);
    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);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    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.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.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::after {
    background: linear-gradient(120deg, transparent, rgba(255,255,255,0.1), transparent);
}

.surah-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.06);
    border-color: var(--primary);
}

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

.surah-item:active {
    transform: scale(0.97);
}

.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;
    filter: drop-shadow(0 2px 4px rgba(16, 185, 129, 0.15));
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

[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");
    filter: drop-shadow(0 2px 4px rgba(52, 211, 153, 0.2));
}

.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);
}

/* --- 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: var(--arabic-size, 26px);
    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: var(--arabic-size, 26px);
    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;
}

/* --- APPLE IOS LIQUID GLASS AUDIO PLAYER --- */
.island-player {
    position: fixed;
    bottom: 110px;
    left: env(safe-area-inset-left, 16px);
    right: env(safe-area-inset-right, 16px);
    margin: 0 auto;
    max-width: calc(100% - 32px);
    width: 480px;
    /* Brand cream glass — light mode */
    background: rgba(255, 251, 242, 0.85);
    backdrop-filter: blur(35px) saturate(180%);
    -webkit-backdrop-filter: blur(35px) saturate(180%);
    border-radius: 32px;
    padding: 10px 14px;
    display: none;
    align-items: center;
    justify-content: space-between;
    box-shadow:
        0 12px 40px rgba(45, 106, 79, 0.12),
        inset 0 1px 1px rgba(255, 255, 255, 0.9),
        inset 0 0 0 0.5px rgba(255, 255, 255, 0.6);
    z-index: 1000;
    color: #1a2e1a;
    border: none;
    transition: all 0.5s cubic-bezier(0.32, 0.72, 0, 1);
    cursor: pointer;
    animation: bounceScaleIn 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
    overflow: hidden;
    transform-origin: bottom center;
}

/* Dark mode mini-player: brand slate glass */
[data-theme="dark"] .island-player {
    background: rgba(30, 41, 59, 0.85);
    color: #f8fafc;
    box-shadow:
        0 10px 40px rgba(0, 0, 0, 0.55),
        inset 0 1px 1px rgba(255, 255, 255, 0.1),
        inset 0 0 0 0.5px rgba(255, 255, 255, 0.05);
}

.island-player.reader-active {
    bottom: max(25px, env(safe-area-inset-bottom, 25px));
    z-index: 1000;
}

.island-player > * {
    position: relative;
    z-index: 2;
}

.liquid-bg-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    z-index: 0;
    opacity: 0;
    pointer-events: none;
    transition: opacity 1s ease;
    animation: liquidDrift 20s infinite alternate cubic-bezier(0.4, 0, 0.2, 1);
}


.island-art {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(200,200,200,0.8), rgba(240,240,240,0.9));
    position: relative;
    overflow: hidden;
    margin-right: 14px;
    flex-shrink: 0;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255,255,255,0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(0,0,0,0.05);
    transition: all 0.5s cubic-bezier(0.32, 0.72, 0, 1);
}

[data-theme="dark"] .island-art {
    background: linear-gradient(135deg, rgba(30,41,59,0.8), rgba(15,23,42,0.9));
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.05);
}

.art-pattern {
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%2310b981' fill-opacity='0.15' fill-rule='evenodd'%3E%3Cpath d='M12 0l4 4h-8l4-4zm0 24l-4-4h8l-4 4zM0 12l4-4v8l-4-4zm24 0l-4 4v-8l4 4z'/%3E%3C/g%3E%3C/svg%3E");
    background-size: 24px;
}

.island-player.is-playing .island-art {
    animation: pulseArt 2s infinite alternate ease-in-out;
}
@keyframes pulseArt {
    0% { transform: scale(1); box-shadow: 0 4px 10px rgba(0,0,0,0.15); }
    100% { transform: scale(1.05); box-shadow: 0 8px 20px rgba(16, 185, 129, 0.3); }
}

.island-close-btn {
    position: absolute;
    top: 6px;
    left: 6px;
    width: 24px !important;
    height: 24px !important;
    background: rgba(0,0,0,0.2) !important;
    backdrop-filter: blur(10px);
    border-radius: 50%;
    color: white;
    font-size: 0.7rem !important;
    opacity: 0;
    transform: scale(0.8);
    transition: all 0.3s ease;
    z-index: 10;
}

.mini-icon { display: block; }
.focus-icon { display: none; }

.island-player:hover .island-close-btn {
    opacity: 1;
    transform: scale(1);
}

.island-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0; 
}

.island-title-wrapper, .island-reciter-wrapper {
    overflow: hidden;
    white-space: nowrap;
    position: relative;
    width: 100%;
    -webkit-mask-image: linear-gradient(to right, black 85%, transparent 100%);
    mask-image: linear-gradient(to right, black 85%, transparent 100%);
}

.island-title {
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: -0.3px;
    display: inline-block;
    max-width: 100%;
    text-overflow: ellipsis;
}

.island-reciter {
    font-size: 0.8rem;
    font-weight: 500;
    opacity: 0.7;
    margin-top: 2px;
    display: inline-block;
    max-width: 100%;
    text-overflow: ellipsis;
}

.island-progress {
    position: absolute;
    bottom: -1px;
    left: 10%;
    right: 10%;
    height: 3px;
    background: rgba(0, 0, 0, 0.08);
    border-radius: 3px;
    transition: height 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);
    cursor: pointer;
    touch-action: none; 
}
[data-theme="dark"] .island-progress { background: rgba(255, 255, 255, 0.15); }

.island-progress-bar {
    height: 100%;
    background: #10b981;
    width: 0%;
    border-radius: 3px;
    position: relative;
    pointer-events: none;
}
[data-theme="dark"] .island-progress-bar { background: #10b981; }

.island-progress-knob {
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%) scale(0);
    width: 12px;
    height: 12px;
    background: white;
    border-radius: 50%;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    left: 0%;
    transition: transform 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);
    pointer-events: none;
}

.island-progress:hover, .island-progress.is-dragging {
    height: 6px;
}
.island-progress:hover .island-progress-knob, .island-progress.is-dragging .island-progress-knob {
    transform: translate(-50%, -50%) scale(1);
}

.island-time-row {
    display: none;
}

.island-controls {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: 10px;
}

.ctrl-btn {
    background: transparent;
    border: none;
    color: inherit;
    cursor: pointer;
    font-size: 1.2rem;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.2s;
    opacity: 0.85;
    -webkit-tap-highlight-color: transparent;
}

.ctrl-btn:active {
    transform: scale(0.85);
    opacity: 0.6;
}

[data-theme="dark"] .ctrl-btn:hover { background: rgba(255, 255, 255, 0.1); }

.ctrl-btn.main {
    font-size: 1.3rem;
    background: rgba(0, 0, 0, 0.05);
    opacity: 1;
    width: 48px;
    height: 48px;
}

[data-theme="dark"] .ctrl-btn.main {
    background: rgba(255, 255, 255, 0.15);
}

.ctrl-btn.main:active {
    transform: scale(0.9);
}





/* Top Nav Override */
header {
    padding: 15px 20px;
}

/* --- 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;
    padding-bottom: 40px;
    /* Safe area */
    z-index: 2000;
    transition: cubic-bezier(0.19, 1, 0.22, 1) 0.5s;
    box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.3);
    display: flex;
    flex-direction: column;
    gap: 20px;
    max-height: 85vh;
    overflow-y: auto;
}

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

[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: 40px;
    height: 4px;
    background: rgba(148, 163, 184, 0.4);
    border-radius: 10px;
    margin: 0 auto 10px;
}

.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;
    animation: ayah-pulse 2.4s ease-in-out infinite;
    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;
    animation: ayah-pulse-inline 2.4s ease-in-out infinite;
    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;
    animation: ayah-pulse-inline 2.4s ease-in-out infinite;
    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;
    animation: ayah-pulse-inline 1.4s ease-in-out infinite;
}

/* --- 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: 8px;
    opacity: 0.5;
    transition: all 0.3s;
}

.streak-day.active {
    opacity: 1;
}

.sd-dot {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--glass-panel);
    border: 2px solid var(--glass-border);
    position: relative;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

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

.sd-dot::after {
    content: '✓';
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 0.7rem;
    font-weight: bold;
    opacity: 0;
    transform: scale(0.5);
    transition: all 0.3s;
}

.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);
}
.streak-day.active .sd-label, .streak-day.active .sd-label-sm {
    color: var(--text-main);
}

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

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

.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;
}

.uhc-progress-ring {
    transform: rotate(-90deg);
}

.uhc-ring-fill {
    transition: stroke-dashoffset 1s ease-out;
}

.uhc-ring-icon {
    position: absolute;
    font-size: 1.1rem;
    color: var(--primary);
}

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

.uhc-subtitle {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-muted);
    margin-top: 2px;
}

.psc-chevron {
    color: var(--text-muted);
    font-size: 0.9rem;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

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

.psc-expanded {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease;
}

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

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

/* Sections */
.uhc-section {
    margin-bottom: 16px;
    background: rgba(0,0,0,0.02);
    border: 1px solid rgba(0,0,0,0.04);
    border-radius: 14px;
    padding: 12px;
}
[data-theme="dark"] .uhc-section {
    background: rgba(255,255,255,0.02);
    border-color: rgba(255,255,255,0.04);
}

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

.uhc-goal-badge {
    background: var(--primary-gradient);
    color: white;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 0.65rem;
}

/* Slider Overrides for dashboard */
.ultimate-slider::-webkit-slider-thumb {
    width: 20px;
    height: 20px;
}

/* Badges */
.uhc-badges-row {
    display: flex;
    gap: 10px;
    justify-content: space-between;
}

.uhc-badge {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px;
    background: rgba(0,0,0,0.03);
    border-radius: 12px;
    filter: grayscale(1) opacity(0.6);
    transition: all 0.3s;
}

[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);
}

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

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

/* 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);
}

.psc-stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 16px;
}

.psc-stat-box {
    background: rgba(0, 0, 0, 0.02);
    border: 1px solid rgba(0, 0, 0, 0.04);
    border-radius: 14px;
    padding: 12px 8px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: background 0.3s;
}

[data-theme="dark"] .psc-stat-box {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.04);
}

.psc-stat-box:hover {
    background: rgba(16, 185, 129, 0.05);
}

.psc-stat-icon {
    font-size: 1.2rem;
    margin-bottom: 6px;
}

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

.psc-stat-label {
    font-size: 0.65rem;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}