@font-face {
    font-family: "Uthmanic Hafs";
    src: url("fonts/UthmanicHafs-v-3.0.ttf") format("truetype");
    font-display: swap;
    font-style: normal;
    font-weight: 400;
}

:root {
    --ink: #10283d;
    --ink-soft: #536778;
    --navy: #102a43;
    --navy-2: #183b56;
    --teal: #087f6b;
    --teal-dark: #056353;
    --teal-pale: #e8f7f3;
    --gold: #d5a73d;
    --gold-pale: #fff7df;
    --sky: #eaf3f8;
    --surface: #ffffff;
    --canvas: #f2f6f7;
    --line: #dce6e8;
    --danger: #a73737;
    --danger-pale: #fff0f0;
    --shadow: 0 18px 55px rgba(16, 42, 67, .09);
    --radius: 24px;
    --font: "Noto Kufi Arabic", "Noto Sans Arabic", Tahoma, Arial, sans-serif;
}

* { box-sizing: border-box; }

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

html { font-size: 16px; scroll-behavior: smooth; }

body {
    margin: 0;
    min-height: 100vh;
    color: var(--ink);
    background:
        radial-gradient(circle at 90% -10%, rgba(8, 127, 107, .12), transparent 28rem),
        linear-gradient(180deg, #f8fbfb 0, var(--canvas) 34rem);
    font-family: var(--font);
    line-height: 1.75;
}

a { color: inherit; }
button, input, textarea, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }

:focus-visible {
    outline: 3px solid rgba(8, 127, 107, .35);
    outline-offset: 3px;
}

.skip-link {
    position: fixed;
    top: -5rem;
    right: 1rem;
    z-index: 100;
    padding: .65rem 1rem;
    background: var(--surface);
    border-radius: 12px;
    box-shadow: var(--shadow);
}
.skip-link:focus { top: 1rem; }

.topbar {
    position: sticky;
    top: 0;
    z-index: 30;
    background: rgba(248, 251, 251, .9);
    border-bottom: 1px solid rgba(220, 230, 232, .85);
    backdrop-filter: blur(16px);
}

.topbar__inner {
    width: min(1180px, calc(100% - 2rem));
    min-height: 76px;
    margin: auto;
    display: flex;
    align-items: center;
    gap: 2rem;
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: .75rem;
    text-decoration: none;
    flex: 0 0 auto;
}

.brand__mark {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    color: white;
    background: linear-gradient(145deg, var(--teal), var(--navy));
    border-radius: 14px 14px 14px 5px;
    font-size: 1.25rem;
    font-weight: 800;
    box-shadow: 0 8px 22px rgba(8, 127, 107, .18);
}

.brand strong, .brand small { display: block; line-height: 1.25; }
.brand strong { font-size: 1.05rem; }
.brand small { color: var(--ink-soft); font-size: .75rem; margin-top: .16rem; }

.nav { display: flex; align-items: stretch; align-self: stretch; gap: .3rem; margin-inline: auto; }
.nav a {
    position: relative;
    display: grid;
    place-items: center;
    min-width: 84px;
    padding: .4rem .8rem;
    color: var(--ink-soft);
    text-decoration: none;
    font-size: .9rem;
    font-weight: 700;
}
.nav a::after {
    content: "";
    position: absolute;
    right: 24%;
    left: 24%;
    bottom: 0;
    height: 3px;
    border-radius: 5px 5px 0 0;
    background: transparent;
}
.nav a:hover, .nav a.is-active { color: var(--teal-dark); }
.nav a.is-active::after { background: var(--teal); }

.guest-nav { display: flex; align-items: center; gap: .75rem; margin-inline-start: auto; }
.guest-nav > a:first-child { text-decoration: none; font-weight: 700; color: var(--navy); }

.account-menu { position: relative; flex: 0 0 auto; }
.account-menu summary { list-style: none; display: flex; align-items: center; gap: .55rem; cursor: pointer; font-weight: 700; }
.account-menu summary::-webkit-details-marker { display: none; }
.avatar { width: 36px; height: 36px; display: grid; place-items: center; color: var(--navy); background: var(--gold-pale); border: 1px solid #eed99b; border-radius: 50%; }
.account-menu__panel {
    position: absolute;
    inset-inline-end: 0;
    top: calc(100% + .7rem);
    width: 240px;
    padding: 1rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 16px;
    box-shadow: var(--shadow);
}
.account-menu__panel span { display: block; color: var(--ink-soft); font-size: .82rem; direction: ltr; text-align: right; overflow-wrap: anywhere; }
.account-menu__panel form { margin-top: .7rem; padding-top: .7rem; border-top: 1px solid var(--line); }
.text-button { padding: 0; border: 0; background: transparent; color: var(--danger); cursor: pointer; font-weight: 700; }

.shell { width: min(1180px, calc(100% - 2rem)); min-height: calc(100vh - 150px); margin: 0 auto; padding: 2.2rem 0 4.5rem; }
.footer { width: min(1180px, calc(100% - 2rem)); margin: auto; padding: 1.5rem 0 2.2rem; display: flex; justify-content: space-between; color: var(--ink-soft); border-top: 1px solid var(--line); font-size: .82rem; }

.card { background: var(--surface); border: 1px solid rgba(220, 230, 232, .95); border-radius: var(--radius); box-shadow: var(--shadow); }
.eyebrow { margin: 0 0 .35rem; color: var(--teal); font-size: .78rem; font-weight: 800; letter-spacing: .025em; }
h1, h2, h3, p { margin-top: 0; }
h1 { margin-bottom: .6rem; color: var(--navy); font-size: clamp(2rem, 4vw, 3.2rem); line-height: 1.35; letter-spacing: -.035em; }
h2 { margin-bottom: .55rem; color: var(--navy); font-size: clamp(1.35rem, 2.5vw, 1.85rem); line-height: 1.5; }
h3 { margin-bottom: .35rem; color: var(--navy); font-size: 1.12rem; line-height: 1.65; }
p { color: var(--ink-soft); }

.button {
    display: inline-flex;
    min-height: 48px;
    align-items: center;
    justify-content: center;
    padding: .7rem 1.25rem;
    color: white;
    background: var(--teal);
    border: 1px solid var(--teal);
    border-radius: 14px;
    box-shadow: 0 9px 24px rgba(8, 127, 107, .17);
    text-decoration: none;
    font-weight: 800;
    cursor: pointer;
    transition: transform .18s ease, background .18s ease, box-shadow .18s ease;
}
.button:hover { background: var(--teal-dark); transform: translateY(-1px); box-shadow: 0 12px 30px rgba(8, 127, 107, .2); }
.button--ghost { color: var(--navy); background: transparent; border-color: #bfd0d4; box-shadow: none; }
.button--ghost:hover { color: var(--teal-dark); background: var(--teal-pale); }
.button--small { min-height: 40px; padding: .45rem 1rem; font-size: .9rem; }
.button--wide { width: 100%; }

.alert { margin: 0 0 1rem; padding: .85rem 1rem; border: 1px solid #b9d8d1; border-radius: 14px; color: var(--teal-dark); background: var(--teal-pale); font-size: .92rem; }
.alert--error { color: var(--danger); background: var(--danger-pale); border-color: #efc5c5; }
.alert--success { color: #075e4f; background: #e6f8f2; }
.alert ul { margin: 0; padding-inline-start: 1.2rem; }
.forgot-link { width: fit-content; margin-top: -.4rem; color: var(--teal-dark); font-size: .84rem; font-weight: 800; text-decoration: none; }
.forgot-link:hover { text-decoration: underline; }
.reset-success { text-align: center; }
.reset-success > span { width: 60px; height: 60px; display: grid; place-items: center; margin: 0 auto 1rem; color: white; background: var(--teal); border-radius: 50%; font-size: 1.5rem; }
.reset-success p { margin-bottom: 1.3rem; }

.welcome-screen { min-height: 70vh; display: grid; grid-template-columns: 1.05fr .95fr; align-items: center; gap: clamp(2rem, 6vw, 6rem); padding: 3rem 0; }
.welcome-copy { max-width: 620px; }
.welcome-copy > p:not(.eyebrow) { max-width: 560px; font-size: 1.08rem; }
.welcome-actions { display: flex; gap: .75rem; flex-wrap: wrap; margin-top: 1.6rem; }
.sample-ward { position: relative; overflow: hidden; padding: 1.8rem; transform: rotate(-1deg); }
.sample-ward::before { content: ""; position: absolute; inset: 0 0 auto; height: 6px; background: linear-gradient(90deg, var(--gold), var(--teal)); }
.sample-top { display: flex; justify-content: space-between; padding-bottom: 1.1rem; margin-bottom: 1.3rem; border-bottom: 1px solid var(--line); color: var(--ink-soft); font-size: .88rem; }
.sample-top strong { color: var(--navy); }
.sample-ward h2 { margin: .45rem 0 1.5rem; }
.sample-reviews { display: grid; grid-template-columns: 1fr 1fr; gap: .65rem; }
.sample-reviews div { padding: .8rem; background: var(--canvas); border-radius: 13px; }
.sample-reviews small, .sample-reviews span { display: block; }
.sample-reviews small { color: var(--teal); font-weight: 800; }
.sample-reviews span { margin-top: .2rem; color: var(--ink-soft); font-size: .82rem; }
.sample-lock { margin-top: 1.1rem; padding: .7rem .9rem; color: #795b14; background: var(--gold-pale); border: 1px solid #f2dfaa; border-radius: 12px; font-size: .88rem; font-weight: 800; text-align: center; }

.auth-layout { min-height: 72vh; display: grid; grid-template-columns: .9fr 1.1fr; align-items: center; gap: clamp(2rem, 7vw, 7rem); }
.auth-intro { padding: 2rem; }
.auth-intro > p:not(.eyebrow) { max-width: 500px; font-size: 1.06rem; }
.mini-principles { display: flex; align-items: center; flex-wrap: wrap; gap: .65rem; margin-top: 1.5rem; color: var(--teal-dark); font-size: .85rem; font-weight: 800; }
.mini-principles i { width: 18px; height: 1px; background: var(--gold); }
.auth-card { width: min(100%, 540px); padding: clamp(1.4rem, 4vw, 2.5rem); justify-self: end; }
.section-heading > *:last-child { margin-bottom: 0; }
.section-heading--center { max-width: 720px; margin: 0 auto 1.7rem; text-align: center; }
.section-heading--center p { font-size: 1.02rem; }

.form-stack { display: grid; gap: 1rem; margin-top: 1.5rem; }
label { color: var(--navy); font-size: .9rem; font-weight: 800; }
label > span { color: var(--ink-soft); font-size: .76rem; font-weight: 600; }
input[type="text"], input[type="email"], input[type="tel"], input[type="password"], textarea, select {
    width: 100%;
    min-height: 50px;
    margin-top: .35rem;
    padding: .72rem .9rem;
    color: var(--ink);
    background: #fbfdfd;
    border: 1px solid #cbdadd;
    border-radius: 13px;
    outline: none;
    font-size: 1rem;
}
textarea { resize: vertical; }
input:focus, textarea:focus, select:focus { border-color: var(--teal); box-shadow: 0 0 0 4px rgba(8, 127, 107, .09); }
.field-help { display: block; margin-top: -.65rem; color: var(--ink-soft); font-size: .78rem; font-weight: 600; line-height: 1.75; }
.recovery-fields { display: grid; gap: .85rem; padding: 1rem; background: var(--canvas); border: 1px solid var(--line); border-radius: 14px; }
.recovery-fields > p { margin: 0; color: var(--teal-dark); font-size: .82rem; font-weight: 800; }
.recovery-or { margin: -.35rem 0; color: var(--ink-soft); font-size: .78rem; font-weight: 800; text-align: center; }
.otp-input { text-align: center; letter-spacing: .5em; font-size: 1.25rem !important; font-weight: 800; }
.auth-switch { margin: 1.15rem 0 0; text-align: center; font-size: .88rem; }
.auth-switch a { color: var(--teal-dark); font-weight: 800; }

.setup-wrap { padding: 1.5rem 0; }
.setup-card { max-width: 820px; margin: auto; padding: clamp(1.3rem, 4vw, 2.3rem); }
fieldset { margin: 0 0 1.5rem; padding: 0; border: 0; }
legend { width: 100%; margin-bottom: .8rem; color: var(--navy); font-size: 1rem; font-weight: 800; }
legend span { width: 30px; height: 30px; display: inline-grid; place-items: center; margin-inline-end: .4rem; color: var(--teal-dark); background: var(--teal-pale); border-radius: 9px; }
.choice-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
.choice-card { position: relative; cursor: pointer; }
.choice-card input { position: absolute; opacity: 0; pointer-events: none; }
.choice-card__body { min-height: 104px; display: flex; flex-direction: column; justify-content: center; padding: 1rem 1.15rem; border: 1px solid #cad9dc; border-radius: 16px; transition: .18s ease; }
.choice-card__body strong, .choice-card__body small { display: block; }
.choice-card__body small { margin-top: .2rem; color: var(--ink-soft); font-size: .8rem; font-weight: 500; }
.choice-card input:checked + .choice-card__body { border-color: var(--teal); background: var(--teal-pale); box-shadow: inset 0 0 0 1px var(--teal); }
.choice-card input:focus-visible + .choice-card__body { outline: 3px solid rgba(8, 127, 107, .25); outline-offset: 3px; }
.setup-note { display: flex; gap: .8rem; padding: 1rem; margin: .3rem 0 1.4rem; color: #735615; background: var(--gold-pale); border: 1px solid #eedb9f; border-radius: 15px; }
.setup-note strong { flex: 0 0 auto; }
.setup-note span { color: #735f30; font-size: .9rem; }

.dashboard-head { display: flex; justify-content: space-between; align-items: center; gap: 2rem; margin-bottom: 1.3rem; }
.dashboard-head h1 { font-size: clamp(1.8rem, 4vw, 2.8rem); }
.dashboard-head p:last-child { margin-bottom: 0; font-size: .9rem; }
.progress-orbit { --progress: 0; position: relative; width: 112px; height: 112px; flex: 0 0 auto; display: grid; place-content: center; text-align: center; border-radius: 50%; background: conic-gradient(var(--teal) calc(var(--progress) * 1%), #dfe9e9 0); }
.progress-orbit::before { content: ""; position: absolute; inset: 9px; background: var(--canvas); border-radius: 50%; }
.progress-orbit strong, .progress-orbit span { position: relative; z-index: 1; display: block; line-height: 1.3; }
.progress-orbit strong { color: var(--navy); font-size: 1.35rem; }
.progress-orbit strong small { font-size: .75rem; }
.progress-orbit span { color: var(--ink-soft); font-size: .75rem; }
.metric-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: .8rem; margin-bottom: 1rem; }
.metric { padding: 1rem 1.2rem; background: rgba(255, 255, 255, .65); border: 1px solid var(--line); border-radius: 17px; }
.metric span, .metric strong { display: block; }
.metric span { color: var(--ink-soft); font-size: .76rem; }
.metric strong { margin-top: .15rem; color: var(--navy); font-size: 1.35rem; }
.metric strong small { color: var(--ink-soft); font-size: .75rem; font-weight: 600; }

.today-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(300px, .65fr); gap: 1rem; }
.ward-card { padding: clamp(1.2rem, 3vw, 2rem); }
.ward-card--primary { position: relative; overflow: hidden; color: white; background: linear-gradient(145deg, #0e314e, #102a43 58%, #0b5e59); border: 0; }
.ward-card--primary::after { content: ""; position: absolute; width: 220px; height: 220px; inset: auto -80px -100px auto; border: 40px solid rgba(255, 255, 255, .035); border-radius: 50%; }
.ward-card--primary h2 { position: relative; z-index: 1; margin: 1.7rem 0 2rem; color: white; font-size: clamp(1.65rem, 4vw, 2.5rem); }
.ward-card__top { position: relative; z-index: 1; display: flex; justify-content: space-between; gap: 1rem; color: rgba(255,255,255,.72); font-size: .8rem; }
.ward-kind { display: inline-flex; color: var(--teal); font-size: .75rem; font-weight: 800; }
.ward-card--primary .ward-kind { color: #80e3cf; }
.reward-strip { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; }
.reward-strip > div { padding: .85rem 1rem; background: rgba(255,255,255,.09); border: 1px solid rgba(255,255,255,.12); border-radius: 14px; }
.reward-strip span, .reward-strip strong { display: block; }
.reward-strip span { color: rgba(255,255,255,.66); font-size: .75rem; }
.reward-strip strong { margin-top: .2rem; font-size: 1.2rem; }
.reward-note { position: relative; z-index: 1; margin: .8rem 0 0; color: rgba(255,255,255,.64); font-size: .75rem; }
.review-stack { display: grid; grid-template-rows: 1fr 1fr; gap: 1rem; }
.ward-card--review { display: flex; flex-direction: column; justify-content: center; box-shadow: none; }
.ward-card--review h3 { margin: .5rem 0 0; }
.ward-card--far { background: #fffdf7; border-color: #eee3c2; }
.ward-card--far .ward-kind { color: #92701e; }

.mushaf-card { margin-top: 1rem; padding: 1.2rem 1.4rem; display: flex; align-items: center; justify-content: space-between; gap: 1.3rem; box-shadow: none; }
.mushaf-card h2 { margin: .3rem 0 .2rem; font-size: 1.18rem; }
.mushaf-card p { margin: 0; max-width: 760px; font-size: .84rem; }
.status-pill { display: inline-flex; min-height: 34px; align-items: center; justify-content: center; padding: .3rem .75rem; color: #755817; background: var(--gold-pale); border: 1px solid #ecdaa5; border-radius: 999px; font-size: .75rem; font-weight: 800; white-space: nowrap; }

.quran-card { margin-top: 1rem; overflow: hidden; scroll-margin-top: 92px; }
.quran-card__header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.2rem 1.4rem; border-bottom: 1px solid var(--line); }
.quran-card__header h2 { margin: .2rem 0 0; font-size: 1.25rem; }
.quran-tabs { display: flex; align-items: center; gap: .3rem; padding: .25rem; background: var(--canvas); border: 1px solid var(--line); border-radius: 13px; }
.quran-tabs a { padding: .45rem .7rem; color: var(--ink-soft); border-radius: 10px; text-decoration: none; font-size: .76rem; font-weight: 800; }
.quran-tabs a:hover { color: var(--teal-dark); }
.quran-tabs a.is-active { color: white; background: var(--teal); box-shadow: 0 5px 14px rgba(8, 127, 107, .16); }
.quran-toolbar { min-height: 54px; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .6rem 1.4rem; color: var(--ink-soft); background: #f9fbfb; border-bottom: 1px solid var(--line); font-size: .82rem; }
.quran-toolbar > span { color: var(--navy); font-weight: 800; }
.reader-tools { display: inline-flex; align-items: center; gap: .65rem; flex: 0 0 auto; }
.reader-page-count { color: var(--ink-soft); font-size: .75rem; white-space: nowrap; }
.reader-size { display: inline-flex; align-items: center; gap: .2rem; flex: 0 0 auto; }
.reader-size button { min-width: 38px; min-height: 34px; padding: .2rem .5rem; color: var(--navy); background: white; border: 1px solid #cad8db; border-radius: 9px; cursor: pointer; font-size: .76rem; font-weight: 800; }
.reader-size button:hover { color: var(--teal-dark); border-color: var(--teal); }
.quran-audio { padding: 1rem 1.4rem; background: linear-gradient(135deg, #0f2f48, #0b5e59); color: white; border-bottom: 1px solid #083e3d; }
.quran-audio__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.quran-audio__identity { display: grid; line-height: 1.45; }
.quran-audio__identity .ward-kind { color: #80e3cf; }
.quran-audio__identity strong { margin-top: .12rem; font-size: 1rem; }
.quran-audio__identity small { color: rgba(255,255,255,.62); font-size: .72rem; }
.quran-audio__actions { display: flex; align-items: center; gap: .4rem; }
.quran-audio__actions button { min-height: 38px; padding: .4rem .75rem; color: white; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.2); border-radius: 10px; cursor: pointer; font-size: .75rem; font-weight: 800; }
.quran-audio__actions button:hover { background: rgba(255,255,255,.16); }
.quran-audio__actions button:disabled { opacity: .42; cursor: not-allowed; }
.quran-audio__actions .audio-main { min-width: 142px; color: var(--navy); background: #f8d77d; border-color: #f8d77d; }
.quran-audio__actions .audio-main:hover { background: #ffe5a0; }
.quran-audio__now { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: .75rem; color: rgba(255,255,255,.78); font-size: .75rem; }
.quran-audio__now [data-audio-count] { flex: 0 0 auto; font-weight: 800; }
.quran-audio__element { width: 100%; height: 42px; display: block; margin-top: .55rem; color-scheme: dark; }
.quran-audio > p { margin: .45rem 0 0; color: rgba(255,255,255,.58); font-size: .7rem; }
.mushaf-legend { display: flex; align-items: center; justify-content: center; min-height: 42px; padding: .45rem 1rem; color: var(--ink-soft); background: #fffdf7; border-bottom: 1px solid #eee3c2; font-size: .75rem; }
.mushaf-legend span { display: inline-flex; align-items: center; gap: .45rem; }
.mushaf-legend i { width: 23px; height: 9px; display: inline-block; background: linear-gradient(transparent 48%, rgba(213, 167, 61, .42) 48%); }
.quran-reader {
    --quran-size-adjust: 0rem;
    overflow: auto;
    padding: clamp(.8rem, 3vw, 2rem);
    background:
        radial-gradient(circle at 50% 0, rgba(213, 167, 61, .11), transparent 42%),
        linear-gradient(180deg, #f4f1e8, #ebe7db);
    scrollbar-color: #b8c9c7 transparent;
}
.mushaf-page {
    position: relative;
    width: min(100%, 43rem);
    min-width: 18rem;
    aspect-ratio: .72;
    display: flex;
    flex-direction: column;
    margin: 0 auto;
    padding: clamp(1.2rem, 4.6vw, 3rem) clamp(.8rem, 4vw, 2.7rem) clamp(1.7rem, 4vw, 2.5rem);
    color: #162b39;
    background: #fffef8;
    border: 1px solid #d4c8a8;
    border-radius: 4px 4px 14px 14px;
    box-shadow: 0 22px 48px rgba(55, 48, 31, .16), inset 0 0 42px rgba(170, 137, 61, .045);
}
.mushaf-page::before { content: ""; position: absolute; inset: .55rem; pointer-events: none; border: 1px solid rgba(174, 139, 55, .25); border-radius: 2px 2px 10px 10px; }
.mushaf-lines { position: relative; z-index: 1; min-height: 0; flex: 1; display: grid; grid-template-rows: repeat(15, minmax(0, 1fr)); align-items: stretch; }
.mushaf-line { min-width: 0; grid-row: var(--line); display: flex; align-items: center; justify-content: center; direction: rtl; white-space: nowrap; }
.mushaf-line--ayah { font-family: "Uthmanic Hafs", serif; font-size: calc(clamp(.72rem, 3.8vw, 1.64rem) + var(--quran-size-adjust)); line-height: 1; }
.mushaf-word { display: inline-block; transition: color .15s ease, background-color .15s ease; }
.mushaf-word + .mushaf-word { margin-inline-start: .18em; }
.mushaf-word.is-context { color: #c7c1b0; }
.mushaf-word.is-ward { color: #142d3b; background: linear-gradient(transparent 70%, rgba(213, 167, 61, .34) 70%); }
.mushaf-word.is-ward.is-end { color: #087f6b; }
.mushaf-word.is-playing { color: #004f45; background: rgba(128, 227, 207, .48); border-radius: .18em; }
.ayah-audio-trigger { padding: 0; border: 0; cursor: pointer; font: inherit; line-height: inherit; }
.ayah-audio-trigger:hover { color: #005f51; background: rgba(128, 227, 207, .38); }
.mushaf-line--surah { padding-inline: 10%; font-family: "Uthmanic Hafs", serif; font-size: calc(clamp(1.1rem, 3.4vw, 1.65rem) + var(--quran-size-adjust)); }
.mushaf-line--surah span { width: min(100%, 29rem); padding: .08em 1rem; color: var(--navy); background: linear-gradient(90deg, transparent, #edf6f3 14%, #edf6f3 86%, transparent); border-block: 1px solid rgba(8, 127, 107, .21); text-align: center; }
.mushaf-line--basmala { color: #173343; font-family: "Uthmanic Hafs", serif; font-size: calc(clamp(1.08rem, 3.8vw, 1.85rem) + var(--quran-size-adjust)); }
.mushaf-page--opening .mushaf-lines { width: 84%; max-height: 65%; flex: 0 0 65%; grid-template-rows: repeat(8, minmax(0, 1fr)); margin: auto; }
.mushaf-page__number { position: absolute; right: 50%; bottom: .45rem; z-index: 2; transform: translateX(50%); color: #866d32; font-family: "Uthmanic Hafs", serif; font-size: 1rem; }
.quran-credit { padding: .6rem 1.4rem; color: var(--ink-soft); background: #f9fbfb; border-top: 1px solid var(--line); font-size: .75rem; text-align: center; }
.quran-credit a { color: var(--teal-dark); font-weight: 800; }
.quran-empty { padding: 3rem 1rem; color: var(--ink-soft); background: #fffdf8; text-align: center; }
.reader-pages { min-height: 58px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1rem; padding: .6rem 1.4rem; background: white; border-top: 1px solid var(--line); }
.reader-pages a { color: var(--teal-dark); font-size: .8rem; font-weight: 800; text-decoration: none; }
.reader-pages a:last-child { text-align: left; }
.reader-pages strong { min-width: 64px; color: var(--navy); font-size: .8rem; text-align: center; }

.checkin-card { margin-top: 1rem; padding: clamp(1.25rem, 3.5vw, 2rem); }
.checkin-card .section-heading p:last-child { max-width: 720px; font-size: .85rem; }
.checkin-form { margin-top: 1.35rem; }
.check-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .7rem; }
.check-option { position: relative; min-height: 88px; display: flex; align-items: center; gap: .75rem; padding: .9rem; background: #fbfdfd; border: 1px solid #d2dfe1; border-radius: 15px; cursor: pointer; transition: .18s ease; }
.check-option input { width: 21px; height: 21px; flex: 0 0 auto; accent-color: var(--teal); }
.check-option span, .check-option strong, .check-option small { display: block; }
.check-option small { margin-top: .1rem; color: var(--ink-soft); font-size: .75rem; font-weight: 500; }
.check-option.is-checked { background: var(--teal-pale); border-color: var(--teal); }
.check-option--main { border-color: #a8cfc6; }
.note-label { display: block; margin: 1rem 0; }
.note-label > span { color: var(--ink-soft); font-size: .75rem; font-weight: 500; }
.locked-card { max-width: 760px; margin: 3rem auto; padding: clamp(2rem, 6vw, 4rem); text-align: center; }
.lock-symbol { width: 76px; height: 76px; display: grid; place-items: center; margin: 0 auto 1.2rem; color: white; background: linear-gradient(145deg, var(--teal), var(--teal-dark)); border-radius: 50%; font-size: 2rem; box-shadow: 0 14px 35px rgba(8, 127, 107, .22); }
.locked-card p { max-width: 560px; margin-inline: auto; }

.page-title { display: flex; align-items: end; justify-content: space-between; gap: 1.5rem; margin-bottom: 1.2rem; }
.page-title h1 { font-size: clamp(1.8rem, 4vw, 2.6rem); }
.page-title p:last-child { margin-bottom: 0; }
.report-overview { display: grid; grid-template-columns: 1.1fr .9fr; gap: 1rem; }
.report-progress { display: flex; align-items: center; gap: 1.5rem; padding: 1.5rem; }
.progress-orbit--large { width: 138px; height: 138px; }
.progress-orbit--large::before { background: white; }
.report-progress > div:last-child { flex: 1; }
.report-progress h2 { margin: 0 0 .2rem; }
.report-progress p { margin-bottom: .8rem; font-size: .82rem; }
.bar { height: 9px; overflow: hidden; background: #e3ebec; border-radius: 999px; }
.bar span { display: block; height: 100%; background: linear-gradient(90deg, var(--teal), #22a98f); border-radius: inherit; }
.report-metrics { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; }
.metric-card { display: flex; flex-direction: column; justify-content: center; padding: 1rem 1.15rem; box-shadow: none; }
.metric-card span { color: var(--ink-soft); font-size: .75rem; }
.metric-card strong { color: var(--navy); font-size: 1.25rem; }
.activity-card { margin-top: 1rem; padding: clamp(1.2rem, 3vw, 1.8rem); }
.table-wrap { overflow-x: auto; margin: 1rem -.2rem -.2rem; }
table { width: 100%; border-collapse: collapse; text-align: right; white-space: nowrap; }
th, td { padding: .85rem .75rem; border-bottom: 1px solid var(--line); font-size: .82rem; }
th { color: var(--ink-soft); background: #f8fbfb; font-size: .75rem; }
tbody tr:last-child td { border-bottom: 0; }
.state { display: inline-flex; padding: .18rem .55rem; border-radius: 999px; font-size: .75rem; font-weight: 800; }
.state--done { color: #07614f; background: #e4f7f1; }
.state--pending { color: #795a16; background: var(--gold-pale); }
.table-subline { display: block; color: var(--ink-soft); direction: ltr; text-align: right; font-size: .75rem; font-weight: 400; }
.empty-state { padding: 2.5rem 1rem; color: var(--ink-soft); text-align: center; }

.motivation-hero { display: flex; align-items: center; justify-content: space-between; gap: 2rem; padding: 1rem 0 1.5rem; }
.motivation-hero h1 { font-size: clamp(1.9rem, 4vw, 2.8rem); }
.motivation-hero p:last-child { margin-bottom: 0; }
.streak-card { width: 180px; flex: 0 0 auto; padding: 1.2rem; color: white; background: linear-gradient(145deg, var(--navy), #19566a); border-radius: 24px; text-align: center; box-shadow: var(--shadow); }
.streak-card span, .streak-card strong, .streak-card small { display: block; }
.streak-card span, .streak-card small { color: rgba(255,255,255,.7); font-size: .75rem; }
.streak-card strong { margin: .15rem 0; color: #fff3c8; font-size: 2.7rem; line-height: 1.2; }
.motivation-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 1rem; }
.hasanat-card { padding: 1.7rem; color: white; background: linear-gradient(135deg, #087f6b, #075447); border: 0; }
.hasanat-card p { margin-bottom: .3rem; color: #b9f0e3; font-size: .82rem; }
.hasanat-card strong, .hasanat-card span, .hasanat-card small { display: block; }
.hasanat-card strong { font-size: clamp(2rem, 5vw, 3.2rem); line-height: 1.25; }
.hasanat-card span { color: rgba(255,255,255,.85); font-size: .88rem; }
.hasanat-card small { margin-top: 1rem; color: rgba(255,255,255,.62); font-size: .75rem; }
.next-badge { display: flex; align-items: center; gap: 1.2rem; padding: 1.7rem; }
.badge-symbol { width: 82px; height: 82px; flex: 0 0 auto; display: grid; place-items: center; color: #755817; background: var(--gold-pale); border: 1px solid #ead58f; border-radius: 50%; font-size: 1.25rem; font-weight: 900; box-shadow: inset 0 0 0 7px #fffaf0; }
.next-badge h2, .next-badge p { margin-bottom: .15rem; }
.badges-card { margin-top: 1rem; padding: 1.7rem; }
.badges-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: .7rem; margin-top: 1.2rem; }
.badge { min-height: 150px; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: .8rem; color: #87949b; background: #f5f7f7; border: 1px dashed #cfd9db; border-radius: 16px; text-align: center; filter: grayscale(1); }
.badge span { width: 52px; height: 52px; display: grid; place-items: center; margin-bottom: .55rem; background: #e8eded; border-radius: 50%; font-weight: 900; }
.badge strong { font-size: .78rem; }
.badge small { font-size: .75rem; }
.badge.is-earned { color: var(--navy); background: var(--gold-pale); border: 1px solid #e9d28d; filter: none; }
.badge.is-earned span { color: #765613; background: #f4de9e; }

.completion-card { max-width: 900px; margin: 2rem auto; padding: clamp(2rem, 6vw, 4rem); text-align: center; }
.completion-seal { width: 90px; height: 90px; display: grid; place-items: center; margin: 0 auto 1.3rem; color: #755817; background: var(--gold-pale); border: 1px solid #e5cc7c; border-radius: 50%; box-shadow: inset 0 0 0 8px white, 0 14px 32px rgba(170, 125, 27, .12); font-size: 1.15rem; font-weight: 900; }
.completion-card > p { max-width: 650px; margin-inline: auto; }
.completion-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: .7rem; margin: 1.7rem 0; }
.completion-stats div { padding: 1rem; background: var(--canvas); border-radius: 15px; }
.completion-stats span, .completion-stats strong { display: block; }
.completion-stats span { color: var(--ink-soft); font-size: .75rem; }
.completion-stats strong { color: var(--navy); font-size: 1.25rem; }

.error-page { max-width: 650px; margin: 4rem auto; padding: 3rem; text-align: center; }
.error-page > span { width: 64px; height: 64px; display: grid; place-items: center; margin: 0 auto 1rem; color: var(--danger); background: var(--danger-pale); border-radius: 50%; font-size: 1.6rem; font-weight: 900; }

@media (max-width: 900px) {
    .account-name { display: none; }
    .nav a { min-width: auto; padding-inline: .65rem; }
    .welcome-screen, .auth-layout, .report-overview, .motivation-grid { grid-template-columns: 1fr; }
    .welcome-screen { padding-top: 1rem; }
    .sample-ward { max-width: 650px; transform: none; }
    .auth-intro { padding: 1rem 0 0; }
    .auth-card { justify-self: stretch; width: 100%; }
    .today-grid { grid-template-columns: 1fr; }
    .review-stack { grid-template-columns: 1fr 1fr; grid-template-rows: auto; }
    .badges-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 680px) {
    .topbar__inner { min-height: 68px; gap: .7rem; }
    .brand small, .account-menu { display: none; }
    .brand__mark { width: 38px; height: 38px; }
    .nav { order: 3; position: fixed; right: 0; bottom: 0; left: 0; z-index: 50; height: 67px; justify-content: space-around; background: rgba(255,255,255,.96); border-top: 1px solid var(--line); backdrop-filter: blur(12px); }
    .nav a { flex: 1; padding: .4rem .2rem; font-size: .75rem; }
    .nav a::after { top: 0; bottom: auto; }
    .guest-nav { gap: .45rem; }
    .shell { width: min(100% - 1.1rem, 1180px); padding-top: 1.2rem; padding-bottom: 5.5rem; }
    .footer { display: none; }
    h1 { font-size: 2rem; }
    .welcome-screen { min-height: auto; gap: 2rem; }
    .welcome-copy br { display: none; }
    .sample-reviews, .choice-grid, .check-grid, .metric-row, .completion-stats { grid-template-columns: 1fr; }
    .setup-note { display: block; }
    .setup-note strong { display: block; margin-bottom: .2rem; }
    .dashboard-head { align-items: flex-start; }
    .dashboard-head .progress-orbit { width: 88px; height: 88px; }
    .metric-row { grid-template-columns: repeat(3, 1fr); }
    .metric { padding: .75rem; }
    .metric strong { font-size: 1rem; }
    .metric span { min-height: 2.4em; font-size: .75rem; line-height: 1.4; }
    .review-stack { grid-template-columns: 1fr; }
    .mushaf-card, .page-title, .motivation-hero, .quran-card__header, .quran-toolbar { align-items: flex-start; flex-direction: column; }
    .status-pill { white-space: normal; }
    .quran-tabs { width: 100%; overflow-x: auto; }
    .quran-tabs a { flex: 1 0 auto; text-align: center; }
    .quran-reader { padding: .65rem; }
    .mushaf-page { min-width: 17.5rem; padding-inline: .45rem; }
    .reader-tools { width: 100%; justify-content: space-between; }
    .reader-size { align-self: flex-end; }
    .quran-audio__head { align-items: flex-start; flex-direction: column; }
    .quran-audio__actions { width: 100%; flex-wrap: wrap; }
    .quran-audio__actions .audio-main { flex: 1 0 100%; }
    .quran-audio__actions button:not(.audio-main) { flex: 1; }
    .report-progress { align-items: flex-start; flex-direction: column; }
    .report-metrics { grid-template-columns: 1fr 1fr; }
    .streak-card { width: 100%; }
    .badges-grid { grid-template-columns: repeat(2, 1fr); }
    .completion-card { margin-top: .5rem; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; }
}