*,
        *::before,
        *::after {
            box-sizing: border-box;
            margin: 0;
            padding: 0
        }

        :root {
            --max: 680px;
            --white: #FAFAFA;
            --ink-900: #0A0A0F;
            --ink-700: #2D2D3A;
            --ink-500: #4B4B63;
            --ink-400: #6B6B88;
            --ink-300: #9898B0;
            --ink-100: #E8E8F0;
            --ink-050: #F4F4F8;
            --violet: #5B4EE8;
            --violet-lt: #F0EEFF;
            --amber: #D97A28;
            --amber-lt: #FEF3E8;
            --sage: #2D8A6E;
            --sage-lt: #E8F5F1;
            --r: 12px;
            --s1: 0 1px 4px rgba(10, 10, 15, .06), 0 2px 12px rgba(10, 10, 15, .06);
        }

        html {
            background: var(--ink-050);
            color: var(--ink-700);
            font-family: 'Inter', sans-serif;
            -webkit-font-smoothing: antialiased
        }

        body {
            min-height: 100vh
        }

        a {
            text-decoration: none;
            color: inherit
        }

        button {
            background: none;
            border: none;
            font-family: inherit;
            cursor: pointer
        }

        .ico {
            fill: none;
            stroke: currentColor;
            stroke-width: 1.8;
            stroke-linecap: round;
            stroke-linejoin: round
        }

        /* TOPBAR */
        .topbar {
            position: sticky;
            top: 0;
            z-index: 60;
            background: rgba(250, 250, 252, .95);
            backdrop-filter: blur(16px);
            border-bottom: 1px solid var(--ink-100)
        }

        .tb {
            max-width: var(--max);
            margin: 0 auto;
            padding: 10px 18px;
            display: flex;
            align-items: center;
            gap: 10px
        }

        .back-btn {
            width: 34px;
            height: 34px;
            border-radius: 10px;
            border: 1px solid var(--ink-100);
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--ink-500);
            flex-shrink: 0;
            transition: background .15s
        }

        .back-btn:hover {
            background: var(--ink-050)
        }

        .tb-info {
            flex: 1;
            min-width: 0
        }

        .tb-name {
            font-size: 14px;
            font-weight: 700;
            color: var(--ink-900);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis
        }

        .tb-meta {
            font-size: 10px;
            color: var(--ink-400)
        }

        /* SURAH HEADER */
        .sura-hdr {
            background: linear-gradient(135deg, #0d1b2a 0%, #1a2d4a 55%, #0f2336 100%);
            padding: 20px 18px;
            text-align: center;
            position: relative;
            overflow: hidden
        }

        .sura-hdr::before {
            content: '';
            position: absolute;
            inset: 0;
            background: radial-gradient(ellipse at 70% 50%, rgba(91, 78, 232, .15), transparent 70%)
        }

        .shi {
            max-width: var(--max);
            margin: 0 auto;
            position: relative;
            z-index: 1
        }

        .sh-arab {
            font-family: 'Amiri', serif;
            font-size: 32px;
            color: white;
            direction: rtl;
            margin-bottom: 4px;
            line-height: 1.3
        }

        .sh-latin {
            font-size: 18px;
            font-weight: 700;
            color: rgba(255, 255, 255, .9)
        }

        .sh-trans {
            font-size: 12px;
            color: rgba(255, 255, 255, .5);
            margin-bottom: 14px
        }

        .sh-pills {
            display: flex;
            justify-content: center;
            gap: 10px;
            margin-bottom: 14px
        }

        .sh-pill {
            font-size: 10px;
            font-weight: 600;
            color: rgba(255, 255, 255, .6);
            border: 1px solid rgba(255, 255, 255, .2);
            padding: 3px 12px;
            border-radius: 99px
        }

        .sh-pill.g {
            border-color: rgba(91, 78, 232, .5);
            color: rgba(91, 78, 232, .9);
            background: rgba(91, 78, 232, .1)
        }

        /* AUDIO BAR (full surah) */
        .audio-bar {
            display: flex;
            align-items: center;
            gap: 10px;
            background: rgba(255, 255, 255, .1);
            backdrop-filter: blur(8px);
            border-radius: 12px;
            padding: 10px 14px
        }

        .ab-play {
            width: 34px;
            height: 34px;
            border-radius: 50%;
            background: white;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            transition: transform .15s
        }

        .ab-play:hover {
            transform: scale(1.08)
        }

        .ab-play svg {
            color: var(--violet)
        }

        .ab-info {
            flex: 1;
            min-width: 0
        }

        .ab-title {
            font-size: 11px;
            font-weight: 600;
            color: white
        }

        .ab-prog {
            height: 3px;
            background: rgba(255, 255, 255, .2);
            border-radius: 99px;
            margin-top: 5px;
            cursor: pointer
        }

        .ab-fill {
            height: 100%;
            background: white;
            border-radius: 99px;
            width: 0%;
            transition: width .4s linear
        }

        .ab-time {
            font-size: 10px;
            color: rgba(255, 255, 255, .5);
            flex-shrink: 0
        }

        .qori-sel {
            font-size: 10px;
            border: 1px solid rgba(255, 255, 255, .25);
            border-radius: 8px;
            padding: 5px 8px;
            background: rgba(0, 0, 0, .2);
            color: rgba(255, 255, 255, .7);
            font-family: 'Inter', sans-serif;
            outline: none;
            flex-shrink: 0
        }

        .qori-sel option {
            color: var(--ink-700);
            background: white
        }

        /* SETTINGS */
        .settings {
            max-width: var(--max);
            margin: 0 auto;
            padding: 8px 18px;
            display: flex;
            align-items: center;
            gap: 8px;
            border-bottom: 1px solid var(--ink-100);
            background: var(--white);
            overflow-x: auto;
            scrollbar-width: none
        }

        .settings::-webkit-scrollbar {
            display: none
        }

        .s-lbl {
            font-size: 10px;
            font-weight: 600;
            color: var(--ink-400);
            flex-shrink: 0
        }

        .s-sep {
            width: 1px;
            height: 16px;
            background: var(--ink-100);
            flex-shrink: 0;
            margin: 0 2px
        }

        .sbtn {
            padding: 4px 12px;
            border-radius: 99px;
            border: 1.5px solid var(--ink-100);
            font-size: 11px;
            font-weight: 600;
            color: var(--ink-400);
            flex-shrink: 0;
            transition: all .15s;
            white-space: nowrap
        }

        .sbtn.on {
            background: var(--violet);
            color: white;
            border-color: var(--violet)
        }

        .font-btns {
            display: flex;
            gap: 4px;
            align-items: center
        }

        .fbtn {
            width: 28px;
            height: 28px;
            border-radius: 8px;
            border: 1px solid var(--ink-100);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 11px;
            font-weight: 700;
            color: var(--ink-400);
            transition: all .15s;
            flex-shrink: 0
        }

        .fbtn:hover {
            background: var(--violet-lt);
            color: var(--violet);
            border-color: var(--violet)
        }

        /* PAGE */
        .page {
            max-width: var(--max);
            margin: 0 auto;
            padding: 14px 18px 110px
        }

        /* BASMALAH */
        .basmalah {
            text-align: center;
            font-family: 'Amiri', serif;
            font-size: 26px;
            color: var(--ink-700);
            padding: 16px 0 12px;
            border-bottom: 1px solid var(--ink-100);
            margin-bottom: 14px;
            direction: rtl
        }

        /* NAV SURAH */
        .nav-sura {
            display: flex;
            gap: 8px;
            margin-bottom: 14px
        }

        .ns-btn {
            flex: 1;
            padding: 9px;
            border-radius: var(--r);
            border: 1.5px solid var(--ink-100);
            font-size: 11px;
            font-weight: 600;
            color: var(--ink-500);
            text-align: center;
            transition: all .15s;
            cursor: pointer;
            background: var(--white)
        }

        .ns-btn:hover:not(:disabled) {
            border-color: var(--violet);
            color: var(--violet);
            background: var(--violet-lt)
        }

        .ns-btn:disabled {
            opacity: .35;
            cursor: default
        }

        /* JUZ MARKER */
        .juz-mark {
            text-align: center;
            margin: 8px 0
        }

        .juz-tag {
            display: inline-block;
            font-size: 9px;
            font-weight: 700;
            color: var(--amber);
            background: var(--amber-lt);
            padding: 3px 14px;
            border-radius: 99px;
            letter-spacing: .5px
        }

        /* SAJDA MARKER */
        .sajda-tag {
            display: inline-block;
            font-size: 9px;
            font-weight: 600;
            color: var(--sage);
            background: var(--sage-lt);
            padding: 2px 10px;
            border-radius: 99px;
            margin-left: 6px;
            vertical-align: middle
        }

        /* AYAT CARD */
        .acard {
            background: var(--white);
            border: 1px solid var(--ink-100);
            border-radius: var(--r);
            margin-bottom: 10px;
            overflow: hidden;
            transition: box-shadow .15s
        }

        .acard:hover {
            box-shadow: var(--s1)
        }

        .acard.playing {
            border-color: var(--violet);
            box-shadow: 0 0 0 2px rgba(91, 78, 232, .1)
        }

        .arab-wrap {
            padding: 14px 16px 10px
        }

        /* baris atas: angka ayat + sajda tag */
        .ayat-hdr {
            display: flex;
            align-items: center;
            gap: 6px;
            margin-bottom: 10px
        }

        .ayat-num {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 26px;
            height: 26px;
            border-radius: 50%;
            background: var(--violet-lt);
            color: var(--violet);
            font-size: 9.5px;
            font-weight: 700;
            font-family: 'Inter', sans-serif;
            flex-shrink: 0
        }

        .ayat-arab {
            font-family: 'Amiri', serif;
            line-height: 2.3;
            direction: rtl;
            text-align: right;
            color: var(--ink-900)
        }

        .acard-body {
            padding: 10px 16px 14px
        }

        .ayat-trans {
            font-size: 13px;
            color: var(--ink-500);
            line-height: 1.85;
            margin-bottom: 10px
        }

        .ayat-trans.hide {
            display: none
        }

        /* TAFSIR */
        .ayat-tafsir {
            margin-top: 8px;
            padding: 10px 12px;
            background: var(--violet-lt);
            border-radius: 8px;
            font-size: 12px;
            line-height: 1.8;
            color: var(--ink-500)
        }

        .ayat-tafsir.hide {
            display: none
        }

        .tafsir-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 6px;
            position: sticky;
            top: 0;
            background: inherit;
            z-index: 1;
            padding-bottom: 4px
        }

        .tafsir-label {
            font-weight: 600;
            color: var(--violet);
            font-size: 11px
        }

        .tafsir-toggle-len {
            font-size: 10px;
            font-weight: 600;
            color: var(--violet);
            border: 1px solid var(--violet);
            border-radius: 6px;
            padding: 2px 8px;
            background: transparent;
            cursor: pointer;
            font-family: inherit;
            transition: all .15s;
            flex-shrink: 0
        }

        .tafsir-toggle-len:hover {
            background: var(--violet);
            color: white
        }

        .tafsir-body {
            max-height: 300px;
            overflow-y: auto;
            -webkit-overflow-scrolling: touch;
            padding-right: 4px;
            scrollbar-width: thin;
            scrollbar-color: var(--ink-300) transparent
        }

        .tafsir-body::-webkit-scrollbar {
            width: 4px
        }

        .tafsir-body::-webkit-scrollbar-track {
            background: transparent
        }

        .tafsir-body::-webkit-scrollbar-thumb {
            background: var(--ink-300);
            border-radius: 4px
        }

        .tafsir-short,
        .tafsir-long {
            line-height: 1.8
        }

        .tafsir-short p,
        .tafsir-long p {
            margin: 0 0 10px;
            text-align: justify
        }

        .tafsir-short p:last-child,
        .tafsir-long p:last-child {
            margin-bottom: 0
        }

        .tafsir-short.hide,
        .tafsir-long.hide {
            display: none
        }

        .abtn.on {
            background: var(--violet-lt);
            color: var(--violet);
            border-color: var(--violet)
        }

        /* TAFSIR IN PAGE PANEL */
        .ap-tafsir {
            margin-top: 10px;
            padding: 10px 12px;
            background: var(--violet-lt);
            border-radius: 8px;
            font-size: 11px;
            line-height: 1.8;
            color: var(--ink-500);
            max-height: 200px;
            overflow-y: auto;
            -webkit-overflow-scrolling: touch;
            scrollbar-width: thin;
            scrollbar-color: var(--ink-300) transparent
        }

        .ap-tafsir::-webkit-scrollbar {
            width: 4px
        }

        .ap-tafsir::-webkit-scrollbar-track {
            background: transparent
        }

        .ap-tafsir::-webkit-scrollbar-thumb {
            background: var(--ink-300);
            border-radius: 4px
        }

        .ap-tafsir p {
            margin: 0 0 8px;
            text-align: justify
        }

        .ap-tafsir p:last-child {
            margin-bottom: 0
        }

        .ap-tafsir .hide {
            display: none
        }

        .tafsir-header-btns {
            display: flex;
            align-items: center;
            gap: 6px;
            flex-shrink: 0
        }

        .tafsir-minimize {
            width: 24px;
            height: 24px;
            border-radius: 6px;
            border: 1px solid var(--violet);
            background: transparent;
            color: var(--violet);
            font-size: 10px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            font-family: inherit;
            transition: all .15s;
            flex-shrink: 0
        }

        .tafsir-minimize:hover {
            background: var(--violet);
            color: white
        }

        .tafsir-content.hide {
            display: none
        }

        .page-info {
            font-size: 9px;
            color: var(--ink-300);
            font-weight: 600;
            margin-bottom: 8px
        }

        .acard-footer {
            display: flex;
            align-items: center;
            gap: 4px
        }

        .acard-btns {
            display: flex;
            gap: 4px;
            margin-left: auto
        }

        .abtn {
            width: 28px;
            height: 28px;
            border-radius: 8px;
            border: 1px solid var(--ink-100);
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--ink-400);
            transition: all .15s;
            flex-shrink: 0
        }

        .abtn:hover {
            background: var(--violet-lt);
            color: var(--violet);
            border-color: var(--violet)
        }

        .abtn.bm {
            background: var(--amber-lt);
            color: var(--amber);
            border-color: var(--amber)
        }

        .abtn.playing {
            background: var(--violet-lt);
            color: var(--violet);
            border-color: var(--violet)
        }

        /* tombol penanda posisi baca */
        .abtn.penanda {
            background: var(--sage-lt);
            color: var(--sage);
            border-color: var(--sage)
        }

        /* card yang sedang jadi posisi baca */
        .acard.penanda {
            border-left: 3px solid var(--sage);
            background: linear-gradient(to right, rgba(45, 138, 110, .04), var(--white) 40%)
        }

        /* ── MODE BACA PER HALAMAN ── */
        .page-block {
            background: var(--white);
            border: 1px solid var(--ink-100);
            border-radius: var(--r);
            margin-bottom: 10px;
            overflow: hidden
        }

        .page-block-hdr {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 7px 14px;
            background: var(--ink-050);
            border-bottom: 1px solid var(--ink-100)
        }

        .page-block-num {
            font-size: 10px;
            font-weight: 700;
            color: var(--ink-400);
            letter-spacing: .4px;
            text-transform: uppercase
        }

        .page-block-juz {
            font-size: 9px;
            font-weight: 600;
            color: var(--amber);
            background: var(--amber-lt);
            padding: 2px 8px;
            border-radius: 99px
        }

        .page-block-arab {
            font-family: 'Amiri', serif;
            direction: rtl;
            text-align: justify;
            line-height: 2.8;
            color: var(--ink-900);
            padding: 16px 16px 14px;
            word-spacing: 4px
        }

        .page-ayah-num {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 22px;
            height: 22px;
            border-radius: 50%;
            font-size: 8px;
            font-weight: 700;
            font-family: 'Inter', sans-serif;
            background: var(--ink-100);
            color: var(--ink-500);
            vertical-align: middle;
            margin: 0 3px;
            cursor: pointer;
            transition: background .15s, color .15s
        }

        .page-ayah-num:hover,
        .page-ayah-num.sel {
            background: var(--violet);
            color: white
        }

        /* ── PANEL AKSI AYAT (mode per halaman) ── */
        .ayat-panel {
            position: fixed;
            bottom: 90px;
            left: 50%;
            transform: translateX(-50%) translateY(20px);
            max-width: calc(var(--max) - 32px);
            width: calc(100% - 32px);
            max-height: calc(100dvh - 160px);
            /* tidak melebihi layar */
            background: var(--white);
            border: 1px solid var(--ink-100);
            border-radius: 18px;
            box-shadow: 0 8px 40px rgba(10, 10, 15, .18);
            z-index: 85;
            opacity: 0;
            pointer-events: none;
            transition: opacity .22s, transform .22s;
            display: flex;
            flex-direction: column;
            overflow: hidden
                /* clip radius */
        }

        .ayat-panel.show {
            opacity: 1;
            pointer-events: all;
            transform: translateX(-50%) translateY(0)
        }

        /* Area scroll konten panel */
        .ap-scroll {
            overflow-y: auto;
            -webkit-overflow-scrolling: touch;
            overscroll-behavior: contain;
            flex: 1;
            padding: 14px 16px 10px;
            min-height: 0
                /* penting agar flex scroll bekerja */
        }

        .ap-arab {
            font-family: 'Amiri', serif;
            direction: rtl;
            text-align: right;
            line-height: 2;
            color: var(--ink-900);
            margin-bottom: 10px
        }

        .ap-trans {
            font-size: 12px;
            color: var(--ink-500);
            line-height: 1.6;
            margin-bottom: 8px
        }

        .ap-info {
            font-size: 9px;
            color: var(--ink-300);
            font-weight: 600;
            margin-bottom: 4px
        }

        /* Footer tombol — selalu terlihat di bawah */
        .ap-foot {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 10px 16px 14px;
            border-top: 1px solid var(--ink-100);
            background: var(--white);
            flex-shrink: 0
        }

        .ap-close {
            font-size: 11px;
            color: var(--ink-300);
            padding: 4px 10px;
            border: 1px solid var(--ink-100);
            border-radius: 8px;
            background: var(--ink-050)
        }

        .ap-btns {
            display: flex;
            gap: 5px
        }

        /* SKELETON */
        .sk {
            background: linear-gradient(90deg, var(--ink-100) 25%, var(--ink-050) 50%, var(--ink-100) 75%);
            background-size: 200% 100%;
            animation: shimmer 1.2s infinite;
            border-radius: 6px
        }

        @keyframes shimmer {
            0% {
                background-position: 200% 0
            }

            100% {
                background-position: -200% 0
            }
        }

        /* NAV */
        .nav-shell {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            padding: 0 18px 18px;
            z-index: 100;
            pointer-events: none
        }

        .nav-bar {
            max-width: var(--max);
            margin: 0 auto;
            background: rgba(255, 255, 255, .88);
            backdrop-filter: blur(20px) saturate(160%);
            border: 1px solid rgba(255, 255, 255, .9);
            border-radius: 22px;
            padding: 8px 6px;
            display: flex;
            align-items: center;
            justify-content: space-around;
            box-shadow: 0 2px 0 rgba(255, 255, 255, .8) inset, 0 10px 36px rgba(10, 10, 15, .12);
            pointer-events: all
        }

        .nl {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 3px;
            padding: 7px 12px;
            border-radius: 12px;
            color: var(--ink-300);
            flex: 1;
            transition: all .18s
        }

        .nl.on {
            color: var(--violet)
        }

        .nl-ico {
            width: 21px;
            height: 21px
        }

        .nl-lbl {
            font-size: 9.5px;
            font-weight: 600
        }

        .nav-dot {
            width: 4px;
            height: 4px;
            border-radius: 99px;
            background: transparent;
            margin-top: 1px
        }

        .nl.on .nav-dot {
            background: var(--violet)
        }

        #toast {
            position: fixed;
            bottom: 90px;
            left: 50%;
            transform: translateX(-50%);
            background: #1a1535;
            color: #fff;
            padding: 8px 18px;
            border-radius: 99px;
            font-size: 12px;
            font-weight: 600;
            z-index: 999;
            opacity: 0;
            transition: opacity .3s;
            pointer-events: none;
            white-space: nowrap
        }

        @media(max-width:420px) {
            .page {
                padding: 12px 14px 110px
            }

            .sura-hdr {
                padding: 16px 14px
            }

            .sh-arab {
                font-size: 26px
            }

            .settings {
                padding: 7px 14px
            }

            .arab-wrap {
                padding: 14px 14px 8px
            }

            .acard-body {
                padding: 8px 14px 12px
            }
        }