@font-face {
        font-family: 'tafsir';
        src: url('font/tafsir.ttf') format('truetype');
        font-display: swap;
    }
    :root {
        --parchment: #F3EDE0;
        --parchment-deep: #E8DFC9;
        --ink: #2B2620;
        --ink-soft: #5A5147;
        --gold: #A9822C;
        --gold-bright: #C9A34C;
        --line: #D9CDAE;
        --card: #FBF8F1;
        --shadow: rgba(43, 38, 32, 0.08);
    }
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        -webkit-tap-highlight-color: transparent;
        -webkit-touch-callout: none;
        user-select: none;
        -webkit-user-select: none;
        -moz-user-select: none;
    }
    a, button, [role="button"] {
        -webkit-tap-highlight-color: transparent;
        outline: none;
    }
    a:focus, button:focus {
        outline: none;
    }
    a:focus-visible, button:focus-visible {
        outline: 2px solid var(--gold);
        outline-offset: 2px;
    }
    #searchInput {
        user-select: text;
        -webkit-user-select: text;
    }
    html, body {
        width: 100%;
        min-height: 100%;
        background: var(--parchment);
        color: var(--ink);
        font-family: 'tafsir', sans-serif;
    }
    body {
        background-image:
            radial-gradient(circle at 15% 8%, rgba(169, 130, 44, 0.06), transparent 40%),
            radial-gradient(circle at 85% 92%, rgba(169, 130, 44, 0.05), transparent 45%);
    }
    header {
        position: sticky;
        top: 0;
        z-index: 30;
        background: linear-gradient(180deg, var(--parchment) 85%, rgba(243, 237, 224, 0));
        padding: 18px 20px 14px;
    }
    .header-inner {
        max-width: 720px;
        margin: 0 auto;
        padding-top: 4px;
    }
    .search-wrap {
        position: relative;
    }
    .search-wrap svg {
        position: absolute;
        right: 16px;
        top: 50%;
        transform: translateY(-50%);
        width: 18px;
        height: 18px;
        stroke: var(--ink-soft);
        pointer-events: none;
    }
    #searchInput {
        width: 100%;
        background: var(--card);
        border: 1.5px solid var(--line);
        border-radius: 14px;
        padding: 13px 46px 13px 16px;
        font-family: 'tafsir', sans-serif;
        font-size: 0.95rem;
        color: var(--ink);
        outline: none;
        transition: border-color 0.15s ease, box-shadow 0.15s ease;
    }
    #searchInput::placeholder { color: #A79E8E; }
    #searchInput:focus {
        border-color: var(--gold);
        box-shadow: 0 0 0 3px rgba(169, 130, 44, 0.14);
    }
    .clear-btn {
        position: absolute;
        left: 8px;
        top: 50%;
        transform: translateY(-50%);
        width: 28px;
        height: 28px;
        border: none;
        background: none;
        color: var(--ink-soft);
        font-size: 1.1rem;
        cursor: pointer;
        display: none;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
    }
    .clear-btn.show { display: flex; }
    .clear-btn:hover { background: var(--parchment-deep); }
    .breadcrumb {
        max-width: 720px;
        margin: 10px auto 0;
        display: none;
        align-items: center;
        gap: 8px;
        font-size: 0.85rem;
        color: var(--ink-soft);
        padding: 0 2px;
    }
    .breadcrumb.show { display: flex; }
    .back-btn {
        display: flex;
        align-items: center;
        gap: 6px;
        background: var(--card);
        border: 1px solid var(--line);
        border-radius: 20px;
        padding: 7px 14px;
        font-family: 'tafsir', sans-serif;
        font-size: 0.85rem;
        font-weight: 500;
        color: var(--ink);
        cursor: pointer;
        transition: background 0.15s ease;
    }
    .back-btn:hover { background: var(--parchment-deep); }
    .breadcrumb .current-folder {
        font-weight: 700;
        color: var(--gold);
    }
    main {
        max-width: 720px;
        margin: 0 auto;
        padding: 16px 20px 100px;
    }
    .status-line {
        font-size: 0.8rem;
        color: var(--ink-soft);
        margin-bottom: 14px;
        min-height: 1.2em;
    }
    .sort-bar {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-bottom: 14px;
        overflow-x: auto;
        scrollbar-width: none;
    }
    .sort-bar::-webkit-scrollbar { display: none; }
    .sort-btn {
        display: flex;
        align-items: center;
        gap: 6px;
        flex-shrink: 0;
        background: var(--card);
        border: 1px solid var(--line);
        border-radius: 20px;
        padding: 7px 14px;
        font-family: 'tafsir', sans-serif;
        font-size: 0.82rem;
        font-weight: 500;
        color: var(--ink-soft);
        cursor: pointer;
        transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
        touch-action: manipulation;
    }
    .sort-btn:hover {
        border-color: var(--gold-bright);
        color: var(--ink);
    }
    .sort-btn.active {
        background: var(--gold);
        border-color: var(--gold);
        color: var(--card);
    }
    .sort-btn svg {
        width: 14px;
        height: 14px;
        flex-shrink: 0;
    }
    .folder-list {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }
    .folder-row {
        display: flex;
        align-items: center;
        gap: 14px;
        background: var(--card);
        border: 1px solid var(--line);
        border-radius: 16px;
        padding: 14px 16px;
        cursor: pointer;
        transition: transform 0.12s ease, box-shadow 0.15s ease, border-color 0.15s ease;
        touch-action: manipulation;
    }
    .folder-row:hover {
        transform: translateX(-2px);
        box-shadow: 0 6px 18px var(--shadow);
        border-color: var(--gold-bright);
    }
    .folder-row:active { transform: scale(0.985); }
    .folder-icon {
        width: 42px;
        height: 42px;
        flex-shrink: 0;
        border-radius: 12px;
        background: linear-gradient(135deg, var(--gold-bright), var(--gold));
        display: flex;
        align-items: center;
        justify-content: center;
        color: #FBF8F1;
    }
    .folder-icon svg { width: 20px; height: 20px; }
    .folder-info { flex: 1; min-width: 0; }
    .folder-name {
        font-weight: 700;
        font-size: 1rem;
        color: var(--ink);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .folder-count {
        font-size: 0.78rem;
        color: var(--ink-soft);
        margin-top: 2px;
    }
    .chevron {
        color: var(--ink-soft);
        flex-shrink: 0;
        transform: scaleX(-1);
    }
    .track-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
        gap: 12px;
    }
    .track-card {
        background: var(--card);
        border: 1px solid var(--line);
        border-radius: 14px;
        padding: 16px 12px;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 10px;
        cursor: pointer;
        transition: transform 0.12s ease, box-shadow 0.15s ease, border-color 0.15s ease;
        touch-action: manipulation;
    }
    .track-card:hover {
        transform: translateY(-3px);
        box-shadow: 0 8px 20px var(--shadow);
        border-color: var(--gold-bright);
    }
    .track-card:active { transform: scale(0.96); }
    .track-card.playing {
        border-color: var(--gold);
        background: linear-gradient(180deg, #FBF3E0, var(--card) 60%);
    }
    .track-icon {
        width: 44px;
        height: 44px;
        border-radius: 50%;
        background: var(--parchment-deep);
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--gold);
        overflow: hidden;
        transition: background 0.15s ease, color 0.15s ease;
    }
    .track-icon img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    .track-card.playing .track-icon {
        background: var(--gold);
        color: #FBF8F1;
    }
    .track-icon svg { width: 18px; height: 18px; }
    .track-name {
        font-size: 0.85rem;
        font-weight: 500;
        color: var(--ink);
        line-height: 1.4;
        word-break: break-word;
    }
    .search-results { display: flex; flex-direction: column; gap: 8px; }
    .result-row {
        display: flex;
        align-items: center;
        gap: 12px;
        background: var(--card);
        border: 1px solid var(--line);
        border-radius: 14px;
        padding: 12px 14px;
        cursor: pointer;
        transition: border-color 0.15s ease, transform 0.12s ease;
        touch-action: manipulation;
    }
    .result-row:hover { border-color: var(--gold-bright); transform: translateX(-2px); }
    .result-row:active { transform: scale(0.985); }
    .result-row.playing { border-color: var(--gold); background: #FBF3E0; }
    .result-icon {
        width: 36px;
        height: 36px;
        border-radius: 50%;
        background: var(--parchment-deep);
        color: var(--gold);
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        overflow: hidden;
    }
    .result-icon img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    .result-row.playing .result-icon { background: var(--gold); color: #FBF8F1; }
    .result-icon svg { width: 16px; height: 16px; }
    .result-text { flex: 1; min-width: 0; }
    .result-title {
        font-size: 0.9rem;
        font-weight: 500;
        color: var(--ink);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .result-path {
        font-size: 0.75rem;
        color: var(--ink-soft);
        margin-top: 2px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    mark {
        background: rgba(201, 163, 76, 0.35);
        color: inherit;
        border-radius: 3px;
        padding: 0 1px;
    }
    .empty-state {
        text-align: center;
        padding: 60px 20px;
        color: var(--ink-soft);
    }
    .empty-state .icon { font-size: 2.2rem; margin-bottom: 10px; opacity: 0.6; }
    .empty-state p { font-size: 0.9rem; font-weight: 500; }
    .loader {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 80px 20px;
        gap: 14px;
        color: var(--ink-soft);
    }
    .spinner {
        width: 34px;
        height: 34px;
        border: 3px solid var(--line);
        border-top-color: var(--gold);
        border-radius: 50%;
        animation: spin 0.8s linear infinite;
    }
    @keyframes spin { to { transform: rotate(360deg); } }
    .player-bar {
        position: fixed;
        bottom: 60px;
        left: 0;
        right: 0;
        z-index: 45;
        background: var(--ink);
        color: var(--parchment);
        padding: 12px 16px;
        display: none;
        flex-direction: column;
        align-items: stretch;
        box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.18);
    }
    .player-bar.show { display: flex; }
    .player-art {
        width: 46px;
        height: 46px;
        border-radius: 12px;
        background: var(--parchment-deep);
        color: var(--gold);
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        overflow: hidden;
    }
    .player-art img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    .player-art svg { width: 20px; height: 20px; }
    .player-info {
        flex: 1;
        min-width: 0;
        display: flex;
        flex-direction: column;
        gap: 1px;
    }
    .player-info .now-playing {
        font-size: 0.85rem;
        font-weight: 700;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .player-info .now-folder {
        font-size: 0.72rem;
        color: var(--gold-bright);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .player-controls {
        display: flex;
        align-items: center;
        gap: 6px;
        flex-shrink: 0;
    }
    .nav-btn {
        width: 34px;
        height: 34px;
        border-radius: 50%;
        background: none;
        border: none;
        color: var(--parchment);
        opacity: 0.75;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        flex-shrink: 0;
        touch-action: manipulation;
        transition: opacity 0.15s ease, background 0.15s ease;
    }
    .nav-btn:hover { opacity: 1; background: rgba(255, 255, 255, 0.08); }
    .nav-btn:disabled { opacity: 0.25; cursor: default; }
    .nav-btn:disabled:hover { background: none; }
    .nav-btn svg { width: 18px; height: 18px; }
    .play-toggle {
        width: 42px;
        height: 42px;
        border-radius: 50%;
        background: var(--gold);
        border: none;
        color: var(--ink);
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        flex-shrink: 0;
        touch-action: manipulation;
    }
    .play-toggle svg { width: 18px; height: 18px; }
    .player-close {
        background: none;
        border: none;
        color: var(--parchment);
        opacity: 0.6;
        font-size: 1.3rem;
        cursor: pointer;
        flex-shrink: 0;
        touch-action: manipulation;
    }
    .player-main {
        display: flex;
        align-items: center;
        gap: 12px;
        width: 100%;
    }
    .player-info-toggle {
        display: flex;
        flex-direction: column;
        min-width: 0;
        flex: 1;
        cursor: pointer;
        touch-action: manipulation;
    }
    .player-art { cursor: pointer; }
    .player-expanded {
        display: none;
        flex-direction: column;
        gap: 10px;
        width: 100%;
        padding-top: 10px;
        margin-top: 10px;
        border-top: 1px solid rgba(255, 255, 255, 0.12);
    }
    .player-bar.expanded .player-expanded { display: flex; }
    .progress-row {
        display: flex;
        align-items: center;
        gap: 8px;
    }
    .time-label {
        font-size: 0.7rem;
        color: var(--parchment);
        opacity: 0.75;
        min-width: 34px;
        text-align: center;
        flex-shrink: 0;
    }
    .seek-bar {
        flex: 1;
        height: 4px;
        border-radius: 2px;
        accent-color: var(--gold);
        cursor: pointer;
    }
    .live-badge {
        display: none;
        align-items: center;
        justify-content: center;
        gap: 6px;
        font-size: 0.78rem;
        font-weight: 700;
        color: #E05353;
        padding: 6px 0;
    }
    .live-badge.show { display: flex; }
    .live-badge .dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: #E05353;
        animation: livePulse 1.2s ease-in-out infinite;
    }
    @keyframes livePulse { 0%,100% { opacity: 1; } 50% { opacity: 0.35; } }
    .progress-row.hidden { display: none; }
    .download-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        background: var(--gold);
        color: var(--ink);
        border: none;
        border-radius: 12px;
        padding: 10px;
        font-family: 'tafsir', sans-serif;
        font-size: 0.85rem;
        font-weight: 700;
        cursor: pointer;
        touch-action: manipulation;
        transition: opacity 0.15s ease;
    }
    .download-btn:disabled { opacity: 0.6; cursor: default; }
    .download-btn svg { width: 16px; height: 16px; }
    .download-btn.hidden { display: none; }
    .download-btn { position: relative; overflow: hidden; }
    .download-progress { position: absolute; right: 0; bottom: 0; left: 0; height: 3px; background: rgba(169,130,44,.16); opacity: 0; transition: opacity .15s ease; }
    .download-progress span { display: block; width: 0; height: 100%; background: var(--gold); transition: width .08s linear; }
    .download-btn.downloading .download-progress { opacity: 1; }
    .download-btn.downloading .download-progress span { width: var(--download-progress, 0%); }
    .download-btn.indeterminate .download-progress span { width: 35%; animation: downloadIndeterminate 1s ease-in-out infinite; }
    @keyframes downloadIndeterminate { 0% { transform: translateX(280%); } 100% { transform: translateX(-280%); } }
    @media (max-width: 480px) {
        h1 { font-size: 1.55rem; }
        .track-grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
    }
    .bottom-nav {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 50;
        display: flex;
        height: 60px;
        background: var(--card);
        border-top: 1px solid var(--line);
        box-shadow: 0 -4px 16px var(--shadow);
    }
    .nav-tab {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        color: var(--ink-soft);
        text-decoration: none;
        font-family: 'tafsir', sans-serif;
        font-size: 0.72rem;
        font-weight: 600;
        transition: color 0.15s ease;
        touch-action: manipulation;
    }
    .nav-tab svg { width: 22px; height: 22px; }
    .nav-tab.active { color: var(--gold); }
    #quranView { display: none; min-height: 100vh; }
    body.quran-open > header, body.quran-open > main { display: none; }
    body.quran-open #quranView { display: block; }
    body.quran-open .player-bar { bottom: 60px; }
    #quranView header.home-header { position: static; padding: 0; background: transparent; }
    #quranView .search-wrap { position: sticky; top: 8px; z-index: 20; max-width: 900px; margin: 0 auto 18px; }
    #quranView #search { user-select: text; -webkit-user-select: text; }
/* Quran is integrated into this document; keep its layout isolated from the recitations UI. */
#quranView .home-header { max-width: 900px; margin: 0 auto 14px; text-align: center; }
#quranView .search-wrap { position: sticky; top: 8px; z-index: 20; max-width: 900px; margin: 0 auto 18px; }
#quranView #search { user-select: text; -webkit-user-select: text; }