/* More menu icon accent and tap animation */
#more-menu .islamic-icon {
    color: var(--accent-gold);
    transition: color 0.2s, transform 0.2s;
}

#more-menu .mobile-nav-btn:active .islamic-icon {
    animation: pulse 0.5s;
    color: var(--accent-gold-light);
    transform: scale(1.15);
}

* {
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
}

html {
    font-size: 16px;
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
}

/* Responsive font scaling for all devices */
@media (max-width: 320px) {
    html {
        font-size: 13px;
    }
}

@media (min-width: 321px) and (max-width: 480px) {
    html {
        font-size: 14px;
    }
}

@media (min-width: 481px) and (max-width: 768px) {
    html {
        font-size: 15px;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    html {
        font-size: 16px;
    }
}

@media (min-width: 1025px) and (max-width: 1440px) {
    html {
        font-size: 17px;
    }
}

@media (min-width: 1441px) {
    html {
        font-size: 18px;
    }
}

/* =========================================================================
   Nafs — Design tokens
   ──────────────────────────────────────────────────────────────────────
   Direction: night stillness, warm light.

   Two rules govern this palette:
     1. Gold is LIGHT, not paint. It appears where something is alive or
        asks for attention, and nowhere else. A screen where everything is
        gold has nothing gold.
     2. Depth comes from stacked greens, not from outlines. Surfaces sit on
        one another; a hairline only marks a real edge.

   Legacy names are aliased at the bottom of the block, so the rest of this
   sheet picks up the new system without being rewritten rule by rule.
   ========================================================================= */
:root {
    /* ── Ground: six stacked depths ────────────────────────────────── */
    --ink-900: #04100a;
    --ink-800: #071a13;
    --ink-700: #0a2318;
    --ink-600: #0d2b1f;
    --ink-500: #123726;
    --ink-400: #18452f;

    /* ── Light ─────────────────────────────────────────────────────── */
    --light-core: #f3e0ae;
    --light: #d4b467;
    --light-soft: #a88f52;
    --light-glow: rgba(212, 180, 103, 0.16);
    --light-edge: rgba(212, 180, 103, 0.11);
    --light-edge-strong: rgba(212, 180, 103, 0.26);

    /* ── Text ──────────────────────────────────────────────────────── */
    --text: #ece5d6;
    --text-2: #b6b3a4;
    --text-3: #7f887c;

    /* ── Semantic — muted on purpose; nothing here shouts ──────────── */
    --calm: #6fae8a;
    --calm-bg: rgba(111, 174, 138, 0.12);
    --warm: #d99a5b;
    --warm-bg: rgba(217, 154, 91, 0.12);
    --alert: #c9705f;
    --alert-bg: rgba(201, 112, 95, 0.12);

    /* ── Surfaces ──────────────────────────────────────────────────── */
    --surface: rgba(13, 43, 31, 0.62);
    --surface-raised: rgba(18, 55, 38, 0.78);
    --surface-hover: rgba(212, 180, 103, 0.06);
    --hairline: rgba(212, 180, 103, 0.10);
    --hairline-soft: rgba(236, 229, 214, 0.06);

    /* ── Space: breathing room is part of the design ───────────────── */
    --s-1: 0.25rem;
    --s-2: 0.5rem;
    --s-3: 0.75rem;
    --s-4: 1rem;
    --s-5: 1.5rem;
    --s-6: 2rem;
    --s-7: 3rem;
    --s-8: 4rem;

    /* ── Motion: slow enough to feel deliberate, never decorative ──── */
    --ease: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
    --dur-fast: 200ms;
    --dur: 400ms;
    --dur-slow: 620ms;

    /* ── Elevation ─────────────────────────────────────────────────── */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow: 0 4px 24px -8px rgba(0, 0, 0, 0.55);
    --shadow-lg: 0 18px 50px -20px rgba(0, 0, 0, 0.75);
    --glow: 0 0 32px -6px var(--light-glow);

    /* ── Type ──────────────────────────────────────────────────────── */
    --font-ui: 'Readex Pro', 'Tajawal', system-ui, sans-serif;
    --font-scripture: 'Amiri Quran', 'Amiri', 'Scheherazade New', serif;
    --font-display: 'Amiri', 'Readex Pro', serif;

    /* ── Legacy aliases ────────────────────────────────────────────── */
    --bg-primary: var(--ink-800);
    --bg-secondary: var(--ink-600);
    --bg-tertiary: var(--ink-400);
    --text-primary: var(--text);
    --text-secondary: var(--text-2);
    --text-muted: var(--text-3);
    --border-color: var(--hairline);
    --card-bg: var(--surface);
    --hover-bg: var(--surface-hover);
    --shadow-color: rgba(0, 0, 0, 0.5);
    --progress-bg: rgba(236, 229, 214, 0.06);
    --blur-intensity: 24px;
    --accent-gold: var(--light);
    --accent-gold-light: var(--light-core);
    --accent-cream: var(--text);
    --accent-emerald: var(--calm);
    --select-bg: var(--ink-600);
    --select-text: var(--text);
    --select-border: var(--light-edge-strong);
    --modal-bg: var(--ink-600);
    --radius-lg: 1.5rem;
    --radius-md: 1rem;
    --radius-sm: 0.625rem;
    --transition-smooth: var(--ease);
    --gold-light: var(--light-core);
    --gold-dark: var(--light-soft);
    --gold-bg: rgba(212, 180, 103, 0.07);
    --gold-transparent: var(--light-edge-strong);
    --success-green: var(--calm);
    --warning-red: var(--alert);
}

.light-mode {
    --bg-primary: #f5f0e3;
    --bg-secondary: #e8dfc8;
    --bg-tertiary: #d8cfb8;
    --text-primary: #1a2e24;
    --text-secondary: #2d4a3a;
    --text-muted: #5a5a4a;
    --border-color: rgba(10, 47, 31, 0.12);
    --card-bg: rgba(255, 255, 255, 0.85);
    --hover-bg: rgba(200, 170, 78, 0.08);
    --shadow-color: rgba(0, 0, 0, 0.08);
    --progress-bg: rgba(10, 47, 31, 0.06);
    --select-bg: #ffffff;
    --select-text: #1a2e24;
    --select-border: #ccc;
    --modal-bg: #f0ead8;
    --accent-gold: #a88a30;

    /* The new token layer needs light values as well, or components that
       read it directly would paint dark text roles on a light ground. */
    --ink-900: #ffffff;
    --ink-800: #f5f0e3;
    --ink-700: #efe8d6;
    --ink-600: #e8dfc8;
    --ink-500: #ded3b8;
    --ink-400: #d0c4a6;
    --light-core: #8a6f24;
    --light: #a88a30;
    --light-soft: #7d6626;
    --light-glow: rgba(168, 138, 48, 0.14);
    --light-edge: rgba(168, 138, 48, 0.18);
    --light-edge-strong: rgba(168, 138, 48, 0.34);
    --text: #1a2e24;
    --text-2: #2d4a3a;
    --text-3: #5f6b5f;
    --calm: #2f7d55;
    --warm: #a8681f;
    --alert: #a63f30;
    --surface: rgba(255, 255, 255, 0.86);
    --surface-raised: #ffffff;
    --surface-hover: rgba(168, 138, 48, 0.08);
    --hairline: rgba(10, 47, 31, 0.12);
    --hairline-soft: rgba(10, 47, 31, 0.07);
    --shadow: 0 4px 20px -8px rgba(26, 46, 36, 0.18);
    --shadow-lg: 0 18px 44px -20px rgba(26, 46, 36, 0.28);
}

* {
    font-family: 'Tajawal', sans-serif;
    box-sizing: border-box;
}

/* ===== Theme-aware utility classes ===== */
.text-gold {
    color: var(--accent-gold) !important;
}

.text-gold-light {
    color: var(--accent-gold-light) !important;
}

.border-gold {
    border-color: var(--accent-gold) !important;
}

.bg-gradient-islamic {
    background: linear-gradient(135deg, var(--bg-secondary), var(--bg-tertiary)) !important;
}

.bg-gold-soft {
    background: rgba(200, 170, 78, 0.08) !important;
}

.border-gold-soft {
    border-color: rgba(200, 170, 78, 0.2) !important;
}

.font-arabic {
    font-family: 'Amiri', 'Scheherazade New', serif;
    font-weight: 700;
}

body {
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    background-color: var(--ink-800);
    /* Two very soft pools of light — one warm from above, one cool from the
       lower edge. They are what stops the screen reading as flat black-green. */
    background-image:
        radial-gradient(1200px 620px at 50% -12%, rgba(212, 180, 103, 0.055), transparent 62%),
        radial-gradient(900px 520px at 92% 108%, rgba(45, 138, 94, 0.075), transparent 58%);
    background-attachment: fixed;
    color: var(--text);
    font-family: var(--font-ui);
    font-size: 1rem;
    line-height: 1.65;
    transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
    -webkit-text-size-adjust: 100%;
}

/* Font scaling moved above - see responsive section after html rule */

select {
    background-color: var(--select-bg) !important;
    color: var(--select-text) !important;
    border: 1px solid var(--select-border);
    border-radius: 0.75rem;
    padding: 0.6rem 0.8rem;
    font-size: 1rem;
    outline: none;
    transition: all 0.2s;
}

select:focus {
    border-color: #d4af37;
    box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.1);
}

.light-mode select {
    background-color: #f5f5f5;
    color: #0a2f1f;
    border-color: #ccc;
}

.light-mode select:focus {
    border-color: #d4af37;
}

.bg-islamic {
    background:
        radial-gradient(ellipse at 20% 50%, rgba(45, 138, 94, 0.06) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 20%, rgba(200, 168, 78, 0.04) 0%, transparent 50%),
        radial-gradient(ellipse at 50% 100%, rgba(45, 138, 94, 0.05) 0%, transparent 50%),
        linear-gradient(160deg, #071a12 0%, #0d2b1f 35%, #0f3224 60%, #081f16 100%);
}

.card {
    background: linear-gradient(135deg, rgba(15, 53, 39, 0.6), rgba(8, 31, 22, 0.4));
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    backdrop-filter: blur(var(--blur-intensity));
    -webkit-backdrop-filter: blur(var(--blur-intensity));
    box-shadow:
        0 8px 32px var(--shadow-color),
        inset 0 1px 0 rgba(200, 170, 78, 0.06);
    transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
    animation: slideInUp 0.5s var(--transition-smooth) both;
}

.card:hover {
    transform: translateY(-3px);
    border-color: rgba(200, 170, 78, 0.35);
    box-shadow:
        0 12px 40px rgba(0, 0, 0, 0.5),
        0 0 20px rgba(200, 170, 78, 0.06),
        inset 0 1px 0 rgba(200, 170, 78, 0.1);
}

.light-mode .card:hover {
    background: rgba(255, 255, 255, 0.95);
}

.dhikr-card {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(212, 175, 55, 0.2);
    border-radius: 1rem;
    padding: 1.2rem;
    transition: all 0.2s;
}

.dhikr-card:hover {
    background: rgba(212, 175, 55, 0.1);
    border-color: rgba(212, 175, 55, 0.4);
}

.dhikr-card.completed {
    background: rgba(34, 197, 94, 0.1);
    border-color: rgba(34, 197, 94, 0.3);
}

.dhikr-card.completed .ayah-text {
    color: var(--calm);
}

.ayah-text {
    font-family: 'Amiri', 'Scheherazade New', serif;
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1.8;
    color: var(--text-primary);
}

.surah-ref {
    font-size: 0.85rem;
    color: #d4af37;
    font-weight: 600;
}

.virtue-text {
    font-size: 0.9rem;
    color: var(--text-secondary);
    font-style: italic;
}

.counter-btn {
    background: rgba(212, 175, 55, 0.2);
    border: 1px solid rgba(212, 175, 55, 0.4);
    color: #d4af37;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.5rem;
    cursor: pointer;
    font-size: 1rem;
    transition: all 0.2s;
    font-weight: bold;
}

.counter-btn:hover:not(:disabled) {
    background: rgba(212, 175, 55, 0.4);
}

.counter-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.edit-btn {
    background: transparent;
    border: none;
    color: #d4af37;
    cursor: pointer;
    font-size: 1rem;
    transition: color 0.2s;
    padding: 0.5rem;
}

.edit-btn:hover {
    color: #f0d060;
}

.progress-bar {
    height: 0.6rem;
    background: var(--progress-bg);
    border-radius: 9999px;
    overflow: hidden;
    border: 1px solid rgba(212, 175, 55, 0.2);
}

.progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #d4af37, #f0d060);
    width: 0%;
    transition: width 0.3s ease;
    border-radius: 9999px;
}

/* ============================================================
   Circular Progress Ring Counter
   ============================================================ */

/* Counter area layout */
.dhikr-counter-area {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: 0.75rem;
}

/* Ring button (tappable) */
.dhikr-ring-btn {
    position: relative;
    width: 5.5rem;
    height: 5.5rem;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(212, 175, 55, 0.06);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    outline: none;
    transition: transform 0.15s ease, box-shadow 0.3s ease, background 0.3s ease;
    -webkit-tap-highlight-color: transparent;
}

.dhikr-ring-btn:hover:not(:disabled) {
    transform: scale(1.06);
    box-shadow: 0 0 18px rgba(212, 175, 55, 0.20);
}

.dhikr-ring-btn:active:not(:disabled) {
    transform: scale(0.95);
}

.dhikr-ring-btn:disabled {
    cursor: default;
}

.dhikr-ring-btn:focus-visible {
    box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.5);
}

/* Static ring (non-interactive, used in search results) */
.dhikr-ring-static {
    cursor: default;
    width: 4rem;
    height: 4rem;
}

.dhikr-ring-static:hover {
    transform: none !important;
    box-shadow: none !important;
}

/* SVG ring */
.dhikr-ring-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.dhikr-ring-bg {
    fill: none;
    stroke: rgba(212, 175, 55, 0.12);
    stroke-width: 5;
}

.dhikr-ring-fill {
    fill: none;
    stroke: #d4af37;
    stroke-width: 5;
    stroke-linecap: round;
    transition: stroke-dashoffset 0.5s cubic-bezier(0.4, 0, 0.2, 1), stroke 0.3s ease;
}

/* Completion state */
.dhikr-ring-fill-done {
    stroke: var(--calm);
    filter: drop-shadow(0 0 6px rgba(34, 197, 94, 0.45));
}

.dhikr-ring-done {
    background: rgba(34, 197, 94, 0.08);
    animation: ringPulseGlow 1.5s ease-out;
}

@keyframes ringPulseGlow {
    0% {
        box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.5);
    }

    60% {
        box-shadow: 0 0 20px 8px rgba(34, 197, 94, 0.15);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(34, 197, 94, 0);
    }
}

/* Label inside ring */
.dhikr-ring-label {
    position: relative;
    z-index: 1;
    font-weight: 700;
    color: var(--text-primary);
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.dhikr-ring-count {
    font-size: 1.35rem;
    font-variant-numeric: tabular-nums;
}

.dhikr-ring-done .dhikr-ring-label {
    color: var(--calm);
    font-size: 1.4rem;
}

/* Info column */
.dhikr-info-col {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    flex: 1;
    min-width: 0;
}

.dhikr-fraction {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
}

.dhikr-fraction-sep {
    color: rgba(255, 255, 255, 0.3);
    margin: 0 0.15em;
}

.dhikr-pct {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.55);
}

.dhikr-pts {
    font-size: 0.75rem;
    color: rgba(212, 175, 55, 0.6);
}

/* Action buttons column */
.dhikr-actions {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    align-items: center;
    flex-shrink: 0;
}

.dhikr-act-btn {
    width: 2.2rem;
    height: 2.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(212, 175, 55, 0.25);
    border-radius: 0.5rem;
    background: rgba(212, 175, 55, 0.08);
    color: rgba(212, 175, 55, 0.8);
    cursor: pointer;
    font-size: 0.8rem;
    transition: all 0.2s;
}

.dhikr-act-btn:hover:not(:disabled) {
    background: rgba(212, 175, 55, 0.25);
    color: #f0d060;
}

.dhikr-act-btn:disabled {
    opacity: 0.25;
    cursor: not-allowed;
}

.dhikr-act-delete {
    border-color: rgba(239, 68, 68, 0.25);
    background: rgba(239, 68, 68, 0.06);
    color: rgba(239, 68, 68, 0.7);
}

.dhikr-act-delete:hover {
    background: rgba(239, 68, 68, 0.2) !important;
    color: var(--alert) !important;
}

/* Compact variant for search results */
.dhikr-counter-compact {
    gap: 0.7rem;
    margin-top: 0.5rem;
}

.dhikr-counter-compact .dhikr-ring-label .dhikr-ring-count {
    font-size: 1rem;
}

/* ====== Redesigned Prayer Tracker ====== */

/* Container */
.prayer-tracker-container {
    padding: 0 0.5rem;
}

/* Summary Card */
.prayer-summary-card {
    background: linear-gradient(135deg, rgba(15, 25, 40, 0.95), rgba(20, 35, 55, 0.9));
    border: 1.5px solid rgba(212, 175, 55, 0.3);
    border-radius: 1.5rem;
    padding: 1.5rem;
    position: relative;
    overflow: hidden;
}

.prayer-summary-card::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -30%;
    width: 200px;
    height: 200px;
    background: radial-gradient(circle, rgba(212, 175, 55, 0.08), transparent 70%);
    pointer-events: none;
}

.prayer-summary-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.25rem;
}

.prayer-summary-date {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.prayer-summary-actions {
    display: flex;
    gap: 0.5rem;
}

.prayer-location-btn {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(212, 175, 55, 0.25);
    color: #d4af37;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.25s ease;
}

.prayer-location-btn:hover {
    background: rgba(212, 175, 55, 0.15);
    border-color: rgba(212, 175, 55, 0.5);
    transform: scale(1.05);
}

/* Summary Body */
.prayer-summary-body {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

/* Progress Ring */
.prayer-progress-ring-container {
    position: relative;
    width: 110px;
    height: 110px;
    flex-shrink: 0;
}

.prayer-progress-ring {
    width: 110px;
    height: 110px;
    transform: rotate(-90deg);
}

.prayer-ring-bg {
    fill: none;
    stroke: rgba(255, 255, 255, 0.08);
    stroke-width: 8;
}

.prayer-ring-fill {
    fill: none;
    stroke: #d4af37;
    stroke-width: 8;
    stroke-linecap: round;
    transition: stroke-dashoffset 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.prayer-ring-label {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1;
}

.prayer-ring-count {
    font-size: 2rem;
    font-weight: 800;
    color: #d4af37;
}

.prayer-ring-total {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.4);
    margin-top: 2px;
}

/* Summary Stats */
.prayer-summary-stats {
    flex: 1;
    min-width: 0;
}

.prayer-next-box {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background: rgba(212, 175, 55, 0.08);
    border: 1px solid rgba(212, 175, 55, 0.2);
    border-radius: 1rem;
    padding: 0.75rem 1rem;
    margin-bottom: 0.75rem;
}

.prayer-next-icon {
    font-size: 1.75rem;
}

.prayer-next-label {
    display: block;
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.4);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.prayer-next-name {
    display: block;
    font-size: 1rem;
    font-weight: 700;
    color: #d4af37;
}

.prayer-next-remaining {
    display: block;
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.6);
}

.prayer-mini-stats {
    display: flex;
    gap: 0.75rem;
}

.prayer-mini-stat {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.15rem;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 0.75rem;
    padding: 0.5rem 0.25rem;
}

.prayer-mini-stat i {
    font-size: 0.85rem;
}

.prayer-mini-stat span {
    font-weight: 700;
    font-size: 1.1rem;
    color: white;
}

.prayer-mini-stat small {
    font-size: 0.6rem;
    color: rgba(255, 255, 255, 0.4);
    white-space: nowrap;
}

/* Keys Progress Bar */
.prayer-keys-bar {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.prayer-keys-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.7);
}

.prayer-keys-track {
    height: 6px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 3px;
    overflow: hidden;
}

.prayer-keys-fill {
    height: 100%;
    background: linear-gradient(90deg, #d4af37, #f0d060);
    border-radius: 3px;
    transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ====== Prayer Cards Grid ====== */
.prayer-cards-grid {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.prayer-card {
    position: relative;
    border-radius: 1.25rem;
    overflow: hidden;
    border: 1.5px solid rgba(255, 255, 255, 0.1);
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.prayer-card:hover {
    transform: translateY(-2px);
    border-color: rgba(212, 175, 55, 0.3);
}

.prayer-card-bg {
    position: absolute;
    inset: 0;
    opacity: 0.85;
    z-index: 0;
}

.prayer-card-content {
    position: relative;
    z-index: 1;
    padding: 1.25rem;
}

/* Prayer Card Header */
.prayer-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
}

.prayer-card-name {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.prayer-card-icon {
    font-size: 1.75rem;
}

.prayer-card-ar {
    display: block;
    font-weight: 800;
    font-size: 1.2rem;
    color: white;
}

.prayer-card-en {
    display: block;
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.45);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.prayer-card-time-box {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.prayer-card-time {
    font-size: 1.5rem;
    font-weight: 700;
    font-family: 'SF Mono', 'Fira Mono', monospace;
    color: white;
}

.prayer-card-status-dot {
    font-size: 1rem;
}

/* Status Button */
.prayer-card-status-row {
    margin-bottom: 0.75rem;
}

.prayer-status-btn {
    width: 100%;
    padding: 0.65rem 1rem;
    border-radius: 0.75rem;
    border: 1.5px solid rgba(255, 255, 255, 0.15);
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.7);
    font-weight: 600;
    font-size: 0.95rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    transition: all 0.25s ease;
}

.prayer-status-btn:hover {
    background: rgba(255, 255, 255, 0.12);
}

.prayer-status-btn.prayer-status-onTime {
    border-color: rgba(34, 197, 94, 0.5);
    background: rgba(34, 197, 94, 0.12);
    color: var(--calm);
}

.prayer-status-btn.prayer-status-late {
    border-color: rgba(251, 191, 36, 0.5);
    background: rgba(251, 191, 36, 0.1);
    color: #fbbf24;
}

.prayer-status-btn.prayer-status-missed {
    border-color: rgba(239, 68, 68, 0.4);
    background: rgba(239, 68, 68, 0.08);
    color: var(--alert);
}

.prayer-status-icon {
    font-size: 1rem;
}

/* Card Toggles */
.prayer-card-toggles {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 0.75rem;
    animation: prayerSlideIn 0.3s ease;
}

.prayer-toggle {
    flex: 1;
    min-width: 0;
    padding: 0.5rem 0.6rem;
    border-radius: 0.65rem;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.prayer-toggle:hover {
    background: rgba(255, 255, 255, 0.1);
}

.prayer-toggle.active {
    border-color: rgba(212, 175, 55, 0.5);
    background: rgba(212, 175, 55, 0.12);
    color: #d4af37;
}

.prayer-focus-selector {
    display: flex;
    gap: 0.35rem;
}

.prayer-focus-btn {
    width: 36px;
    height: 36px;
    border-radius: 0.5rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.05);
    cursor: pointer;
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.prayer-focus-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    transform: scale(1.05);
}

.prayer-focus-btn.active {
    border-color: rgba(212, 175, 55, 0.5);
    background: rgba(212, 175, 55, 0.15);
    transform: scale(1.1);
}

/* Note */
.prayer-card-note {
    margin-bottom: 0.5rem;
}

.prayer-note-btn {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.35);
    font-size: 0.75rem;
    cursor: pointer;
    padding: 0.25rem 0;
    transition: color 0.2s;
}

.prayer-note-btn:hover {
    color: #d4af37;
}

.prayer-note-text {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.5);
    margin-top: 0.35rem;
    font-style: italic;
    padding: 0.3rem 0;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

/* Motivation */
.prayer-card-motivation {
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.45);
    text-align: center;
    padding-top: 0.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

/* Done glow */
.prayer-card-done .prayer-card-bg {
    opacity: 0.95;
}

.prayer-card-done {
    border-color: rgba(34, 197, 94, 0.3);
}

.prayer-card-done-glow {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 0%, rgba(34, 197, 94, 0.1), transparent 60%);
    pointer-events: none;
    z-index: 0;
}

/* Pulse animation on status change */
.prayer-card-pulse {
    animation: prayerPulse 0.6s ease;
}

@keyframes prayerPulse {
    0% {
        transform: scale(1);
    }

    30% {
        transform: scale(1.015);
    }

    100% {
        transform: scale(1);
    }
}

@keyframes prayerSlideIn {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }

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

/* Nawafl Section */
.prayer-nawafl-section {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.03), rgba(212, 175, 55, 0.02));
    border: 1px solid rgba(212, 175, 55, 0.15);
    border-radius: 1.25rem;
    padding: 1.25rem;
}

.prayer-add-nafl-btn {
    background: rgba(212, 175, 55, 0.1);
    border: 1px solid rgba(212, 175, 55, 0.3);
    color: #d4af37;
    padding: 0.5rem 1rem;
    border-radius: 0.75rem;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.prayer-add-nafl-btn:hover {
    background: rgba(212, 175, 55, 0.2);
}

/* Weekly Stats */
.prayer-weekly-stats {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.03), rgba(212, 175, 55, 0.02));
    border: 1px solid rgba(212, 175, 55, 0.15);
    border-radius: 1.25rem;
    padding: 1.25rem;
}

.prayer-week-chart {
    display: flex;
    align-items: flex-end;
    gap: 0.5rem;
    height: 120px;
    margin-bottom: 0.75rem;
}

.prayer-bar-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
}

.prayer-bar-track {
    width: 100%;
    max-width: 30px;
    height: 80px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 4px;
    overflow: hidden;
    display: flex;
    align-items: flex-end;
}

.prayer-bar-fill {
    width: 100%;
    background: linear-gradient(180deg, #d4af37, #8b7a2e);
    border-radius: 4px;
    transition: height 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    min-height: 2px;
}

.prayer-bar-col.today .prayer-bar-fill {
    background: linear-gradient(180deg, var(--calm), #16a34a);
}

.prayer-bar-count {
    font-size: 0.75rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.7);
}

.prayer-bar-day {
    font-size: 0.65rem;
    color: rgba(255, 255, 255, 0.35);
}

.prayer-stats-footer {
    display: flex;
    justify-content: center;
    padding-top: 0.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.prayer-stat-pill {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.15rem;
}

/* Reward Popup */
.prayer-reward-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    animation: fadeIn 0.3s ease;
}

.prayer-reward-popup {
    background: linear-gradient(145deg, #1a2a40, #0f1a2e);
    border: 2px solid rgba(212, 175, 55, 0.5);
    border-radius: 1.5rem;
    padding: 2rem;
    text-align: center;
    max-width: 350px;
    width: 90%;
    animation: prayerRewardBounce 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes prayerRewardBounce {
    from {
        transform: scale(0.8);
        opacity: 0;
    }

    to {
        transform: scale(1);
        opacity: 1;
    }
}

.prayer-reward-badge {
    font-size: 3rem;
    margin-bottom: 0.75rem;
}

.prayer-reward-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: #d4af37;
    margin-bottom: 0.5rem;
}

.prayer-reward-text {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.6;
    margin-bottom: 1rem;
}

.prayer-reward-keys {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.5);
    margin-bottom: 1.25rem;
}

.prayer-reward-close {
    padding: 0.75rem 2rem;
    border-radius: 1rem;
    border: 1.5px solid rgba(212, 175, 55, 0.5);
    background: rgba(212, 175, 55, 0.12);
    color: #d4af37;
    font-weight: 700;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.prayer-reward-close:hover {
    background: rgba(212, 175, 55, 0.25);
}

/* ====== Responsive Tweaks ====== */
@media (max-width: 480px) {
    .prayer-summary-body {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .prayer-next-box {
        width: 100%;
    }

    .prayer-mini-stats {
        width: 100%;
    }

    .prayer-card-toggles {
        gap: 0.4rem;
    }

    .prayer-toggle {
        font-size: 0.72rem;
        padding: 0.4rem 0.5rem;
    }

    .prayer-card-time {
        font-size: 1.25rem;
    }
}

/* Light Mode */
.light-mode .prayer-summary-card {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(250, 245, 230, 0.9));
    border-color: rgba(10, 47, 31, 0.12);
}

.light-mode .prayer-ring-bg {
    stroke: rgba(0, 0, 0, 0.06);
}

.light-mode .prayer-card {
    border-color: rgba(0, 0, 0, 0.08);
}

.light-mode .prayer-card-ar {
    color: #1a1a2e;
}

.light-mode .prayer-card-time {
    color: #1a1a2e;
}

.light-mode .prayer-card-motivation {
    color: rgba(0, 0, 0, 0.45);
}

.light-mode .prayer-status-btn {
    border-color: rgba(0, 0, 0, 0.1);
    background: rgba(0, 0, 0, 0.04);
    color: rgba(0, 0, 0, 0.6);
}

.light-mode .prayer-toggle {
    border-color: rgba(0, 0, 0, 0.1);
    background: rgba(0, 0, 0, 0.03);
    color: rgba(0, 0, 0, 0.5);
}

.light-mode .prayer-toggle.active {
    border-color: rgba(212, 175, 55, 0.4);
    background: rgba(212, 175, 55, 0.1);
    color: #8b7a2e;
}

.light-mode .prayer-nawafl-section,
.light-mode .prayer-weekly-stats {
    background: rgba(255, 255, 255, 0.8);
    border-color: rgba(0, 0, 0, 0.08);
}

.light-mode .prayer-location-btn {
    background: rgba(0, 0, 0, 0.04);
    border-color: rgba(0, 0, 0, 0.1);
}

.light-mode .prayer-mini-stat span {
    color: #1a1a2e;
}

.light-mode .prayer-bar-fill {
    background: linear-gradient(180deg, #d4af37, #c4a030);
}

.light-mode .prayer-bar-col.today .prayer-bar-fill {
    background: linear-gradient(180deg, var(--calm), #16a34a);
}

.info-btn {
    background: none;
    border: none;
    cursor: help;
    color: #d4af37;
    font-size: 1rem;
    padding: 0;
}

.podcast-card {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(212, 175, 55, 0.2);
    border-radius: 1rem;
    padding: 1.2rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    transition: all 0.2s;
}

.podcast-card:hover {
    background: rgba(212, 175, 55, 0.1);
    border-color: rgba(212, 175, 55, 0.4);
}

.podcast-icon {
    width: 3rem;
    height: 3rem;
    background: rgba(212, 175, 55, 0.2);
    border-radius: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    flex-shrink: 0;
}

.nav-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    border-radius: 0.75rem;
    background: transparent;
    border: 1px solid transparent;
    color: rgba(255, 255, 255, 0.6);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    width: 100%;
    text-align: right;
    font-size: 0.95rem;
}

.nav-link:hover {
    color: white;
    background: rgba(212, 175, 55, 0.1);
    border-color: rgba(212, 175, 55, 0.3);
}

.nav-link.active {
    background: linear-gradient(135deg, rgba(200, 170, 78, 0.2), rgba(200, 170, 78, 0.1));
    color: var(--accent-gold);
    border-color: rgba(200, 170, 78, 0.4);
    box-shadow: inset 3px 0 0 var(--accent-gold);
}

.mobile-nav-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    padding: 0.75rem 0;
    border: none;
    background: transparent;
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.75rem;
    cursor: pointer;
    transition: all 0.2s;
    flex: 1;
    font-weight: 600;
}

.mobile-nav-btn:hover {
    color: white;
}

.mobile-nav-btn.active {
    color: var(--accent-gold);
    text-shadow: 0 0 12px rgba(200, 170, 78, 0.3);
}

.mobile-nav-btn i {
    font-size: 1.5rem;
}

/* Islamic SVG Icons */
.islamic-icon {
    display: inline-block;
    vertical-align: middle;
    fill: currentColor;
    flex-shrink: 0;
    transition: transform 0.2s ease, filter 0.2s ease;
}

.mobile-nav-btn .islamic-icon {
    width: 1.5rem;
    height: 1.5rem;
}

.mobile-nav-btn.active .islamic-icon {
    filter: drop-shadow(0 0 6px rgba(200, 170, 78, 0.4));
    transform: scale(1.05);
}

.more-menu-grid .mobile-nav-btn .islamic-icon {
    width: 1.25rem;
    height: 1.25rem;
}

.section-icon {
    width: 1.8rem;
    height: 1.8rem;
}

.icon-lg {
    width: 2rem;
    height: 2rem;
}

.icon-xl {
    width: 2.5rem;
    height: 2.5rem;
}

.icon-2xl {
    width: 3rem;
    height: 3rem;
}

.mobile-nav-btn span {
    display: block;
    max-width: 4rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mobile-bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(8, 31, 22, 0.97);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-top: 1px solid rgba(200, 170, 78, 0.15);
    padding: 0.4rem 0.5rem;
    padding-bottom: max(0.4rem, env(safe-area-inset-bottom, 8px));
    display: flex;
    justify-content: space-around;
    gap: 0.25rem;
    z-index: 40;
    box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.3);
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.mobile-bottom-nav.nav-hidden {
    transform: translateY(100%);
    opacity: 0;
    pointer-events: none;
}

@media (min-width: 1024px) {
    .mobile-bottom-nav {
        display: none;
    }
}

.modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(8px);
    z-index: 60;
    padding: 1rem;
    overflow-y: auto;
    align-items: center;
    justify-content: center;
}

.modal-overlay.active {
    display: flex;
}

.modal-content {
    background: var(--modal-bg);
    border: 1px solid rgba(212, 175, 55, 0.3);
    border-radius: 1.5rem;
    max-width: 32rem;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    padding: 1.5rem;
    box-shadow: 0 20px 25px -5px var(--shadow-color);
    animation: slideDown 0.3s ease-out;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }

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

.custom-confirm-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(8px);
    z-index: 70;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.custom-confirm-overlay.active {
    display: flex;
}

.custom-confirm-box {
    background: var(--modal-bg);
    border: 2px solid #d4af37;
    border-radius: 1.5rem;
    padding: 2rem;
    max-width: 20rem;
    width: 100%;
    text-align: center;
    box-shadow: 0 20px 25px -5px var(--shadow-color);
    animation: slideDown 0.3s ease-out;
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.spinner {
    border: 3px solid rgba(200, 170, 78, 0.15);
    border-top-color: var(--accent-gold);
    border-radius: 50%;
    width: 2.75rem;
    height: 2.75rem;
    animation: spin 0.8s linear infinite;
}

.toast {
    position: fixed;
    bottom: calc(80px + env(safe-area-inset-bottom, 0px));
    left: 50%;
    transform: translateX(-50%);
    background: rgba(10, 47, 31, 0.95);
    color: #f5f5dc;
    border: 1px solid rgba(212, 175, 55, 0.5);
    border-radius: 1rem;
    padding: 1rem 1.5rem;
    font-weight: 600;
    z-index: 50;
    max-width: 90%;
    text-align: center;
    word-wrap: break-word;
    animation: slideDown 0.3s ease-out;
}

.toast.error {
    border-color: rgba(239, 68, 68, 0.5);
}

@media (min-width: 768px) {
    .toast {
        bottom: 2rem;
    }
}

.divider {
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(212, 175, 55, 0.3), transparent);
    margin: 2rem 0;
}

.back-to-top {
    position: fixed;
    bottom: calc(80px + 1rem + env(safe-area-inset-bottom, 0px));
    left: 1rem;
    width: 3rem;
    height: 3rem;
    background: rgba(212, 175, 55, 0.3);
    border: 1px solid #d4af37;
    color: #d4af37;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s;
    z-index: 30;
}

.back-to-top.visible {
    opacity: 1;
    visibility: visible;
}

.back-to-top:hover {
    background: rgba(212, 175, 55, 0.5);
    transform: translateY(-4px);
}

#loading-screen {
    position: fixed;
    inset: 0;
    background: linear-gradient(135deg, #081f16 0%, #0f3527 50%, #081f16 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    z-index: 100;
}

.screen.hidden {
    display: none;
}

@media (max-width: 768px) {
    .modal-content {
        padding: 1.2rem;
        border-radius: 20px;
    }
}

.light-mode input[type="text"],
.light-mode input[type="number"],
.light-mode input[type="time"],
.light-mode input[type="url"],
.light-mode textarea {
    background: rgba(0, 0, 0, 0.05) !important;
    color: #0a2f1f;
}

/* adhkar-tab: see consolidated rules near end of file */

header {
    position: sticky;
    top: 0;
    z-index: 40;
}

.main-layout {
    max-width: 1600px;
    margin: 0 auto;
    padding: 1rem;
    display: flex;
    gap: 1.5rem;
    align-items: flex-start;
    flex: 1;
    min-height: 0;
    width: 100%;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

@media (max-width: 768px) {
    .main-layout {
        padding: 0.75rem 0.5rem;
        gap: 1rem;
    }
}

@media (max-width: 480px) {
    .main-layout {
        padding: 0.5rem;
        gap: 0.5rem;
    }
}

.desktop-sidebar {
    width: 240px;
    flex-shrink: 0;
    position: sticky;
    top: 80px;
}

.main-content {
    flex: 1;
    min-width: 0;
}

/* Star Rating - legacy compat (hidden in new prayer design) */
.star-rating {
    display: none;
}

.star-btn {
    display: none;
}

@media (max-width: 768px) {
    .desktop-sidebar {
        display: none;
    }

    .grid.grid-cols-3 {
        grid-template-columns: repeat(2, 1fr);
    }

    .grid.sm\:grid-cols-3 {
        grid-template-columns: repeat(1, 1fr);
    }

    .grid.grid-cols-4 {
        grid-template-columns: repeat(2, 1fr);
    }

    .grid.sm\:grid-cols-2 {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .desktop-sidebar {
        display: none;
    }

    .grid.grid-cols-3 {
        grid-template-columns: repeat(1, 1fr);
    }

    .grid.sm\:grid-cols-2 {
        grid-template-columns: 1fr;
    }

    .grid.sm\:grid-cols-3 {
        grid-template-columns: 1fr;
    }

    body {
        padding-bottom: 80px;
    }

    header {
        position: sticky;
        top: 0;
        z-index: 40;
    }

    .modal-content {
        max-width: 95vw;
        max-height: 85vh;
    }
}

/* ====== Qibla Compass ====== */

.qibla-container {
    padding: 0 0.5rem;
    max-width: 480px;
    margin: 0 auto;
}

/* Header */
.qibla-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.25rem;
}

.qibla-title {
    font-size: 1.5rem;
    font-weight: 800;
    color: #d4af37;
    display: flex;
    align-items: center;
}

.qibla-header-actions {
    display: flex;
    gap: 0.5rem;
}

.qibla-action-btn {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(212, 175, 55, 0.25);
    color: #d4af37;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.25s ease;
    font-size: 0.95rem;
}

.qibla-action-btn:hover {
    background: rgba(212, 175, 55, 0.12);
    border-color: rgba(212, 175, 55, 0.5);
}

/* Heading display */
.qibla-heading-display {
    text-align: center;
    margin-bottom: 0.75rem;
}

.qibla-heading-number {
    font-size: 3rem;
    font-weight: 800;
    color: white;
    font-family: 'SF Mono', 'Fira Mono', monospace;
    letter-spacing: -1px;
}

.qibla-heading-symbol {
    font-size: 1.5rem;
    color: rgba(255, 255, 255, 0.4);
    vertical-align: super;
}

.qibla-heading-cardinal {
    display: block;
    font-size: 0.85rem;
    color: rgba(212, 175, 55, 0.7);
    font-weight: 600;
    margin-top: -0.25rem;
}

/* SVG Compass */
.qibla-compass-wrapper {
    position: relative;
    width: 300px;
    height: 300px;
    margin: 0 auto 1.25rem;
}

.qibla-compass-svg {
    width: 100%;
    height: 100%;
    filter: drop-shadow(0 4px 20px rgba(0, 0, 0, 0.3));
}

/* Cardinal labels in SVG */
.qibla-cardinal-label {
    fill: #d4af37;
    font-size: 14px;
    font-weight: 700;
    font-family: 'Tajawal', sans-serif;
}

.qibla-north-label {
    fill: var(--alert);
    font-size: 16px;
    font-weight: 800;
}

.qibla-intercardinal-label {
    fill: rgba(255, 255, 255, 0.25);
    font-size: 9px;
    font-weight: 500;
    font-family: 'Tajawal', sans-serif;
}

/* Glow when facing Qibla */
.qibla-glow {
    position: absolute;
    inset: -10px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(212, 175, 55, 0.15), transparent 70%);
    animation: qiblaGlowPulse 2s ease-in-out infinite;
    pointer-events: none;
}

.qibla-glow.hidden {
    display: none;
}

@keyframes qiblaGlowPulse {

    0%,
    100% {
        opacity: 0.5;
        transform: scale(1);
    }

    50% {
        opacity: 1;
        transform: scale(1.05);
    }
}

/* Info panel */
.qibla-info-panel {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.04), rgba(212, 175, 55, 0.02));
    border: 1px solid rgba(212, 175, 55, 0.15);
    border-radius: 1.25rem;
    padding: 1rem 1.25rem;
    margin-bottom: 1rem;
}

.qibla-info-row {
    display: flex;
    gap: 0.5rem;
}

.qibla-info-item {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.25rem 0;
}

.qibla-info-item i {
    font-size: 0.9rem;
    flex-shrink: 0;
}

.qibla-info-label {
    display: block;
    font-size: 0.65rem;
    color: rgba(255, 255, 255, 0.4);
}

.qibla-info-value {
    display: block;
    font-size: 0.9rem;
    font-weight: 700;
    color: white;
}

/* Facing Qibla banner */
.qibla-facing-banner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.1), rgba(212, 175, 55, 0.08));
    border: 1.5px solid rgba(34, 197, 94, 0.35);
    border-radius: 1rem;
    padding: 0.85rem 1.25rem;
    margin-bottom: 1rem;
    animation: qiblaFacingSlide 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.qibla-facing-banner.hidden {
    display: none;
}

.qibla-facing-icon {
    font-size: 1.5rem;
}

.qibla-facing-text {
    font-weight: 700;
    color: var(--calm);
    font-size: 1rem;
}

@keyframes qiblaFacingSlide {
    from {
        opacity: 0;
        transform: translateY(-10px) scale(0.95);
    }

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

/* Calibration tip */
.qibla-calibration-tip {
    display: flex;
    align-items: center;
    background: rgba(251, 191, 36, 0.08);
    border: 1px solid rgba(251, 191, 36, 0.25);
    border-radius: 0.75rem;
    padding: 0.6rem 1rem;
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: 1rem;
    animation: qiblaFacingSlide 0.3s ease;
}

.qibla-calibration-tip.hidden {
    display: none;
}

/* Action buttons */
.qibla-actions {
    display: flex;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.qibla-btn {
    flex: 1;
    padding: 0.75rem 1rem;
    border-radius: 0.85rem;
    font-weight: 700;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.25s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
}

.qibla-btn-primary {
    background: rgba(212, 175, 55, 0.12);
    border: 1.5px solid rgba(212, 175, 55, 0.4);
    color: #d4af37;
}

.qibla-btn-primary:hover {
    background: rgba(212, 175, 55, 0.2);
    border-color: rgba(212, 175, 55, 0.6);
}

.qibla-btn-secondary {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.6);
}

.qibla-btn-secondary:hover {
    background: rgba(255, 255, 255, 0.1);
    color: white;
}

/* Map View */
.qibla-view-active {
    display: block;
}

.qibla-view-hidden {
    display: none;
}

.qibla-map-container {
    border-radius: 1.25rem;
    overflow: hidden;
    border: 1px solid rgba(212, 175, 55, 0.15);
    background: rgba(15, 25, 40, 0.6);
}

.qibla-static-map {
    min-height: 280px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.qibla-map-placeholder {
    text-align: center;
    padding: 2rem;
}

.qibla-map-svg {
    display: block;
}

.qibla-map-info {
    display: flex;
    justify-content: center;
    gap: 2rem;
    margin-top: 0.75rem;
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.5);
}

.qibla-map-info-item {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.qibla-map-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
}

.qibla-map-dot-user {
    background: #3b82f6;
}

.qibla-map-dot-kaaba {
    background: #d4af37;
}

/* Status bar */
.qibla-status-bar {
    text-align: center;
    padding: 0.5rem;
}

.qibla-status-text {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.4);
}

/* Light mode */
.light-mode .qibla-heading-number {
    color: #1a1a2e;
}

.light-mode .qibla-info-panel {
    background: rgba(255, 255, 255, 0.8);
    border-color: rgba(0, 0, 0, 0.08);
}

.light-mode .qibla-info-value {
    color: #1a1a2e;
}

.light-mode .qibla-map-container {
    background: rgba(245, 240, 230, 0.6);
    border-color: rgba(0, 0, 0, 0.08);
}

.light-mode .qibla-action-btn {
    background: rgba(0, 0, 0, 0.04);
    border-color: rgba(0, 0, 0, 0.1);
}

.light-mode .qibla-btn-secondary {
    background: rgba(0, 0, 0, 0.04);
    border-color: rgba(0, 0, 0, 0.1);
    color: rgba(0, 0, 0, 0.5);
}

/* Responsive */
@media (max-width: 360px) {
    .qibla-compass-wrapper {
        width: 260px;
        height: 260px;
    }

    .qibla-heading-number {
        font-size: 2.5rem;
    }

    .qibla-info-row {
        flex-direction: column;
        gap: 0.4rem;
    }
}

/* ===== Animations ===== */
/* slideInUp: see consolidated definition near end of file */

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes glow {

    0%,
    100% {
        box-shadow: 0 0 5px rgba(200, 170, 78, 0.3);
    }

    50% {
        box-shadow: 0 0 20px rgba(200, 170, 78, 0.5);
    }
}

@keyframes floatUp {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-6px);
    }
}

@keyframes borderGlow {

    0%,
    100% {
        border-color: rgba(200, 170, 78, 0.15);
    }

    50% {
        border-color: rgba(200, 170, 78, 0.4);
    }
}

@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(0.92);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

.screen {
    animation: fadeIn 0.35s var(--transition-smooth);
}

.btn-pulse {
    animation: pulse 2s ease-in-out infinite;
}

.field-glow {
    animation: glow 3s ease-in-out infinite;
}

/* Input styling: see consolidated rules near end of file */

/* Enhanced button transitions */
button {
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    transform-origin: center;
}

button:active:not(:disabled) {
    transform: scale(0.95);
}

button:hover:not(:disabled) {
    transform: translateY(-1px);
}

/* تحسينات المودال */
.modal-overlay {
    animation: fadeIn 0.2s ease-in;
}

.modal-content {
    animation: slideInUp 0.3s ease-out;
}

/* Desktop sidebar already hidden at ≤768px via earlier rule */

#more-menu {
    bottom: calc(64px + env(safe-area-inset-bottom, 0px));
}

/* Enhanced animations */
@keyframes pulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.8;
    }
}

@keyframes shimmer {
    0% {
        background-position: -1000px 0;
    }

    100% {
        background-position: 1000px 0;
    }
}

/* Scrollbar: see consolidated rules near end of file */

/* Focus states: see consolidated *:focus-visible near end of file */

/* Prayer Navigation Tabs */
.prayer-tabs {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
    border-bottom: 2px solid rgba(212, 175, 55, 0.15);
    padding-bottom: 0.75rem;
}

.prayer-tab {
    padding: 0.6rem 1rem;
    border: none;
    background: transparent;
    color: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    font-weight: 600;
    transition: all 0.25s ease;
    border-bottom: 3px solid transparent;
    margin-bottom: -0.75rem;
    font-size: 0.95rem;
}

.prayer-tab:hover {
    color: white;
}

.prayer-tab.active {
    color: #d4af37;
    border-bottom-color: #d4af37;
}

/* Prayer Stats Enhancement */
.prayer-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1rem;
    margin-top: 2rem;
}

.prayer-stat-card {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.05), rgba(212, 175, 55, 0.03));
    border: 1px solid rgba(212, 175, 55, 0.2);
    border-radius: 1rem;
    padding: 1.5rem;
    text-align: center;
    transition: all 0.3s ease;
}

.prayer-stat-card:hover {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(212, 175, 55, 0.05));
    border-color: rgba(212, 175, 55, 0.4);
    transform: translateY(-4px);
}

.prayer-stat-card h4 {
    color: #d4af37;
    font-size: 1rem;
    margin: 0 0 0.75rem 0;
    font-weight: 600;
}

.prayer-stat-card .stat-value {
    font-size: 2.5rem;
    font-weight: 700;
    color: #d4af37;
    line-height: 1;
}

.prayer-stat-card .stat-label {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.85rem;
    margin-top: 0.5rem;
}

/* Nafl Prayer Cards Enhancement */
.nafl-prayer-card {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.04), rgba(212, 175, 55, 0.02));
    border: 1px solid rgba(212, 175, 55, 0.2);
    border-radius: 1.25rem;
    padding: 1rem 1.25rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.nafl-prayer-card::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: rgba(212, 175, 55, 0.3);
    transition: width 0.3s ease;
}

.nafl-prayer-card:hover {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.06), rgba(212, 175, 55, 0.04));
    border-color: rgba(212, 175, 55, 0.35);
    transform: translateX(-4px);
}

.nafl-prayer-card.completed::before {
    background: rgba(34, 197, 94, 0.6);
    width: 6px;
}

.nafl-prayer-card.completed {
    border-color: rgba(34, 197, 94, 0.3);
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.05), rgba(212, 175, 55, 0.02));
}

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

.nafl-info h4 {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: white;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.nafl-info p {
    margin: 0.25rem 0 0 0;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.6);
}

.nafl-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-shrink: 0;
}

.nafl-toggle-btn {
    background: rgba(212, 175, 55, 0.15);
    border: 1px solid rgba(212, 175, 55, 0.4);
    color: #d4af37;
    padding: 0.6rem 1rem;
    border-radius: 0.75rem;
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 600;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.nafl-toggle-btn:hover {
    background: rgba(212, 175, 55, 0.25);
    border-color: rgba(212, 175, 55, 0.6);
}

.nafl-toggle-btn.done {
    background: rgba(34, 197, 94, 0.2);
    border-color: rgba(34, 197, 94, 0.4);
    color: var(--calm);
}

.nafl-delete-btn {
    background: none;
    border: none;
    color: rgba(239, 68, 68, 0.6);
    cursor: pointer;
    font-size: 1.1rem;
    transition: all 0.2s ease;
    padding: 0.5rem;
    border-radius: 0.5rem;
}

.nafl-delete-btn:hover {
    color: var(--alert);
    background: rgba(239, 68, 68, 0.1);
}

/* Smooth Transitions for Prayer Status Changes */
@keyframes statusPulse {
    0% {
        box-shadow: 0 0 0 0 rgba(212, 175, 55, 0.4);
    }

    70% {
        box-shadow: 0 0 0 15px rgba(212, 175, 55, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(212, 175, 55, 0);
    }
}

/* Light Mode Adjustments */
.light-mode .prayer-stat-card {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.8), rgba(212, 175, 55, 0.05));
    border-color: rgba(10, 47, 31, 0.1);
}

.light-mode .nafl-prayer-card {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(212, 175, 55, 0.05));
    border-color: rgba(10, 47, 31, 0.1);
}

.light-mode .nafl-toggle-btn {
    background: rgba(10, 47, 31, 0.08);
    border-color: rgba(10, 47, 31, 0.2);
    color: #1c4e3a;
}

/* ===== More Menu Grid ===== */
.more-menu-grid {
    background: rgba(8, 31, 22, 0.97);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(200, 170, 78, 0.2);
    border-radius: 1.25rem;
    padding: 1rem;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.25rem;
    box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.4);
}

.more-menu-grid .mobile-nav-btn {
    padding: 0.85rem 0.5rem;
    border-radius: 0.75rem;
    transition: all 0.2s ease;
}

.more-menu-grid .mobile-nav-btn:hover {
    background: rgba(200, 170, 78, 0.12);
}

.more-menu-grid .mobile-nav-btn i {
    font-size: 1.25rem;
}

.more-menu-grid .mobile-nav-btn span {
    max-width: 5.5rem;
    font-size: 0.7rem;
}

/* ===== Mushaf Styles – Uthmani Mushaf Layout ===== */

/* ----- Font stack: per-page KFGQPC loaded dynamically; Amiri Quran fallback ----- */



/* ----- Mushaf page parchment background ----- */


/* Decorative page border (inner) */


/* ----- Surah header banner ----- */




/* ----- Bismillah ----- */

/* ----- Ayah text ----- */

/* ----- Decorative ayah number marker (Medina Mushaf style) ----- */


/* ----- Bottom bar ----- */

/* ----- Navigation buttons ----- */








/* ===== Surah Reading Modal (Mushaf-style) ===== */
.surah-modal-content {
    max-width: 700px;
}

.surah-modal-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 0.75rem 1.5rem;
    margin-bottom: 1rem;
    background: linear-gradient(135deg, rgba(200, 170, 78, 0.10), rgba(200, 170, 78, 0.03));
    border: 1.5px solid rgba(200, 170, 78, 0.25);
    border-radius: 2rem;
}

.surah-modal-ornament {
    color: rgba(200, 170, 78, 0.5);
    font-size: 1.1rem;
}

.surah-modal-title-block {
    text-align: center;
}

.surah-modal-title {
    font-family: 'Amiri', serif;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--accent-gold);
    margin: 0;
}

.surah-modal-meta {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.5);
    margin: 0.15rem 0 0;
}

.surah-reading-body {
    max-height: 65vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 0.5rem 0;
    /* Parchment feel inside the modal */
    background: linear-gradient(160deg, rgba(250, 245, 232, 0.05), rgba(240, 232, 208, 0.03));
    border-radius: 0.75rem;
}

/* Surah body inherits mushaf-text-body but tweaks for modal context */
.surah-text-body {
    padding: 1rem 0.75rem;
    line-height: 2.8;
}

.surah-font-slider {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0.75rem 0 0.25rem;
}

.surah-font-slider label {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.55);
    flex-shrink: 0;
}

.surah-font-slider input[type="range"] {
    flex: 1;
}

.surah-modal-actions {
    display: flex;
    gap: 0.75rem;
    margin-top: 0.75rem;
}

.surah-btn-done {
    flex: 1;
    padding: 0.75rem;
    border-radius: 0.75rem;
    border: 1px solid rgba(34, 197, 94, 0.5);
    background: rgba(34, 197, 94, 0.15);
    color: var(--calm);
    font-weight: 700;
    font-size: 0.95rem;
    cursor: pointer;
    transition: all 0.2s;
}

.surah-btn-done:hover {
    background: rgba(34, 197, 94, 0.3);
}

.surah-btn-close {
    flex: 1;
    padding: 0.75rem;
    border-radius: 0.75rem;
    border: none;
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    font-weight: 700;
    font-size: 0.95rem;
    cursor: pointer;
    transition: all 0.2s;
}

.surah-btn-close:hover {
    background: rgba(255, 255, 255, 0.18);
}

/* Mushaf light mode */
.light-mode .mushaf-page-container {
    background: linear-gradient(160deg, #faf5e8, #f0e8d0);
}

.light-mode .mushaf-top-bar,
.light-mode .mushaf-bottom-bar {
    background: rgba(245, 240, 227, 0.95);
    border-color: rgba(10, 47, 31, 0.15);
}

.light-mode .mushaf-nav-btn,
.light-mode .mushaf-nav-btn-lg {
    border-color: rgba(10, 47, 31, 0.2);
    color: #1c4e3a;
    background: rgba(10, 47, 31, 0.06);
}

.light-mode .mushaf-page-info {
    color: #1c4e3a;
}

.light-mode .mushaf-ayah-marker {
    background: radial-gradient(circle, rgba(200, 170, 78, 0.22) 30%, rgba(200, 170, 78, 0.08) 70%, transparent 100%);
    border-color: rgba(200, 170, 78, 0.5);
}

.light-mode .surah-modal-meta {
    color: rgba(0, 0, 0, 0.45);
}

/* Mushaf responsive */
@media (max-width: 768px) {





}

@media (max-width: 480px) {



}

/* btn-primary: see consolidated rules near end of file */

/* ===== Settings Styles ===== */
.settings-section {
    padding: 1rem 1.25rem;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
    background: var(--hover-bg);
}

.settings-section-title {
    font-size: 0.95rem;
    font-weight: 700;
    margin-bottom: 0.85rem;
    color: var(--accent-gold);
    display: flex;
    align-items: center;
}

.settings-input {
    background: var(--bg-primary);
    border-color: var(--border-color);
    color: var(--text-primary);
    transition: border-color 0.2s;
}

.settings-input:focus {
    border-color: var(--accent-gold);
    outline: none;
    box-shadow: 0 0 0 3px rgba(200, 170, 78, 0.15);
}

/* ===== Mushaf Fullscreen ===== */





/* ===== Mushaf Fill Page ===== */




/* ===== Skeleton Loading ===== */
.skeleton {
    background: linear-gradient(90deg, var(--card-bg) 25%, var(--hover-bg) 50%, var(--card-bg) 75%);
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.5s ease-in-out infinite;
    border-radius: var(--radius-md);
}

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

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

.skeleton-line {
    height: 1rem;
    margin-bottom: 0.5rem;
    border-radius: 0.25rem;
}

.skeleton-card {
    height: 8rem;
    margin-bottom: 1rem;
}

/* ===== Accessibility ===== */
.quran-font-size-controls {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.quran-font-btn {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid var(--border-color);
    background: var(--card-bg);
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.2s;
    font-size: 0.85rem;
}

.quran-font-btn:hover {
    border-color: var(--accent-gold);
    background: var(--hover-bg);
}

/* Focus visible for keyboard nav */
*:focus-visible {
    outline: 2px solid var(--accent-gold);
    outline-offset: 2px;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* Print styles */
@media print {

    .mobile-bottom-nav,
    .desktop-sidebar,
    header {
        display: none;
    }
}

/* ================================================================
   NEW FEATURES CSS - Gold Hierarchy, Glassmorphism, Animations
   ================================================================ */


/* === Glassmorphism Cards === */
.glass-card {
    background: linear-gradient(135deg, rgba(15, 53, 39, 0.65), rgba(8, 31, 22, 0.45)) !important;
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid rgba(200, 170, 78, 0.12);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(200, 170, 78, 0.06);
}

.light-mode .glass-card {
    background: rgba(255, 255, 255, 0.7) !important;
    border: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
}

/* === Islamic Divider === */
.islamic-divider {
    text-align: center;
    margin: 1.5rem 0;
    position: relative;
    height: 1.5rem;
}

.islamic-divider::before {
    content: '﷽';
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-family: 'Amiri', serif;
    font-size: 1rem;
    color: var(--accent-gold);
    background: var(--bg-primary);
    padding: 0 1rem;
    z-index: 1;
}

.islamic-divider::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(212, 175, 55, 0.3), transparent);
}

/* === Confetti Animation === */
@keyframes confettiFall {
    0% {
        transform: translateY(0) rotate(0deg);
        opacity: 1;
    }

    100% {
        transform: translateY(100vh) rotate(720deg);
        opacity: 0;
    }
}

/* === Ripple Button Effect === */
.ripple-btn {
    position: relative;
    overflow: hidden;
}

.ripple-btn::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    pointer-events: none;
    background: radial-gradient(circle, rgba(200, 170, 78, 0.25) 10%, transparent 10.01%);
    background-repeat: no-repeat;
    background-position: 50%;
    transform: scale(10, 10);
    opacity: 0;
    transition: transform 0.5s, opacity 1s;
}

.ripple-btn:active::after {
    transform: scale(0, 0);
    opacity: 0.4;
    transition: 0s;
}

/* === Completion Pulse === */
@keyframes completionPulse {
    0% {
        box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.4);
    }

    70% {
        box-shadow: 0 0 0 15px rgba(34, 197, 94, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(34, 197, 94, 0);
    }
}

.dhikr-completed {
    animation: completionPulse 1s ease-out;
    background: rgba(34, 197, 94, 0.08) !important;
    border-color: rgba(34, 197, 94, 0.3) !important;
}

/* === Dashboard Shortcuts === */
.shortcut-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    padding: 0.5rem;
    border-radius: 0.75rem;
    background: rgba(200, 170, 78, 0.06);
    border: 1px solid rgba(200, 170, 78, 0.12);
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.2s;
    font-weight: 500;
}

.shortcut-btn:hover {
    background: rgba(200, 170, 78, 0.15);
    border-color: rgba(200, 170, 78, 0.3);
    transform: translateY(-2px);
}

.shortcut-btn:active {
    transform: scale(0.95);
}

/* === Tasbih Styles === */
.tasbih-counter-ring {
    width: 200px;
    height: 200px;
    position: relative;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    transition: transform 0.15s;
}

.tasbih-counter-ring:active {
    transform: scale(0.96);
}

.tasbih-ring-svg {
    width: 100%;
    height: 100%;
}

.tasbih-counter-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

@keyframes tasbihPulseAnim {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.05);
    }

    100% {
        transform: scale(1);
    }
}

.tasbih-pulse {
    animation: tasbihPulseAnim 0.2s ease;
}

.tasbih-phrase-btn {
    background: rgba(200, 170, 78, 0.06);
    color: var(--text-secondary);
}

.tasbih-phrase-btn.active {
    background: rgba(200, 170, 78, 0.2) !important;
    border-color: var(--accent-gold) !important;
    color: var(--accent-gold) !important;
    font-weight: 700;
}

/* === Names99 Cards === */
.names99-card {
    background: rgba(200, 170, 78, 0.04);
    transition: all 0.2s;
}

.names99-card:hover {
    background: rgba(200, 170, 78, 0.12);
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(200, 170, 78, 0.1);
}

/* === Dua Category Buttons === */
.dua-cat-btn {
    background: rgba(200, 170, 78, 0.06);
    color: var(--text-secondary);
}

.dua-cat-btn.active {
    background: rgba(200, 170, 78, 0.2) !important;
    border-color: var(--accent-gold) !important;
    color: var(--accent-gold) !important;
    font-weight: 700;
}

/* === Badge Styles === */
.badge-unlocked {
    box-shadow: 0 0 12px rgba(200, 170, 78, 0.2);
}

.badge-locked {
    position: relative;
}

.badge-locked::after {
    content: '🔒';
    position: absolute;
    top: 4px;
    right: 4px;
    font-size: 0.65rem;
    opacity: 0.5;
}

.grayscale {
    filter: grayscale(100%);
}

/* === Quran Ayah Styling (legacy surah-list view) === */
.quran-ayah {
    font-family: 'Amiri Quran', 'Amiri', 'Scheherazade New', serif;
    font-feature-settings: "liga" on, "calt" on;
    font-synthesis: none;
}

.ayah-num {
    color: var(--accent-gold);
    font-size: 0.85em;
    margin: 0 0.15em;
}

/* === Improved Toast Position === */
.toast {
    bottom: calc(80px + env(safe-area-inset-bottom, 0px) + 10px) !important;
    z-index: 80 !important;
}

@media (min-width: 1024px) {
    .toast {
        bottom: 2rem !important;
    }
}

/* === Card Hover Effects === */
.card {
    position: relative;
    overflow: hidden;
}

@keyframes slideInUp {
    from {
        opacity: 0;
        transform: translateY(12px);
    }

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

/* === More Menu Grid Enhancement === */
.more-menu-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
    background: rgba(8, 31, 22, 0.97);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(200, 170, 78, 0.15);
    border-radius: 1.25rem;
    padding: 1rem;
    box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.4);
    margin-bottom: env(safe-area-inset-bottom, 8px);
    max-height: 60vh;
    overflow-y: auto;
}

.light-mode .more-menu-grid {
    background: rgba(255, 255, 255, 0.97);
    border-color: rgba(0, 0, 0, 0.1);
}

#more-menu {
    bottom: 70px;
    z-index: 70;
}

/* === Improved Typography === */
.font-arabic-quran {
    font-family: 'Amiri Quran', 'Amiri', 'Scheherazade New', serif;
    font-weight: 400;
}

/* === Mobile Improvements === */
@media (max-width: 768px) {
    .mobile-bottom-nav {
        padding: 0.5rem;
        padding-bottom: max(0.5rem, env(safe-area-inset-bottom, 10px));
    }

    .mobile-nav-btn i {
        font-size: 1.35rem;
    }

    .mobile-nav-btn .islamic-icon {
        width: 1.35rem;
        height: 1.35rem;
    }

    .mobile-nav-btn span {
        font-size: 0.65rem;
    }

    .counter-btn {
        width: 3rem;
        height: 3rem;
        font-size: 1.2rem;
    }

    /* Ring: slightly larger on mobile for easier tapping */
    .dhikr-ring-btn {
        width: 5.8rem;
        height: 5.8rem;
    }

    .dhikr-ring-count {
        font-size: 1.5rem;
    }

    .dhikr-act-btn {
        width: 2.5rem;
        height: 2.5rem;
        font-size: 0.9rem;
    }

    .tasbih-counter-ring {
        width: 220px;
        height: 220px;
    }

    main {
        padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px));
    }

    header h1 {
        font-size: 1.4rem !important;
    }
}

/* === Empty State === */
.empty-state {
    text-align: center;
    padding: 3rem 1rem;
}

.empty-state-icon {
    font-size: 4rem;
    margin-bottom: 1rem;
    opacity: 0.3;
}

.empty-state-text {
    color: var(--text-muted);
    font-size: 1rem;
}

/* === Header Streak Badge Fix === */
.light-mode [style*="background:rgba(200,170,78,0.1)"] {
    background: rgba(200, 170, 78, 0.15) !important;
}

/* === Adhkar Tab Active === */
.adhkar-tab {
    padding: 0.5rem 1rem;
    border-radius: 0.75rem;
    background: transparent;
    border: 1px solid transparent;
    color: var(--text-muted);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}

.adhkar-tab:hover {
    background: rgba(200, 170, 78, 0.1);
}

.adhkar-tab.tab-active,
.tab-active {
    background: rgba(200, 170, 78, 0.15);
    border-color: var(--accent-gold);
    color: var(--accent-gold);
}

/* === Scrollbar Styling === */
::-webkit-scrollbar {
    width: 6px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: rgba(200, 170, 78, 0.2);
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(200, 170, 78, 0.4);
}

/* === Light Mode Readability === */
.light-mode .card {
    background: rgba(255, 255, 255, 0.85);
    border-color: rgba(10, 47, 31, 0.1);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}

.light-mode .bg-islamic {
    background: linear-gradient(160deg, #f5f0e3, #e8dfc8, #f5f0e3) !important;
}

.light-mode .dhikr-card {
    background: rgba(0, 0, 0, 0.03);
    border-color: rgba(10, 47, 31, 0.1);
}

.light-mode .dhikr-card:hover {
    background: rgba(200, 170, 78, 0.08);
}

.light-mode .progress-bar {
    background: rgba(0, 0, 0, 0.06);
    border-color: rgba(0, 0, 0, 0.1);
}

/* Light-mode ring overrides */
.light-mode .dhikr-ring-btn {
    background: rgba(212, 175, 55, 0.04);
}

.light-mode .dhikr-ring-bg {
    stroke: rgba(0, 0, 0, 0.08);
}

.light-mode .dhikr-ring-label {
    color: var(--text-primary);
}

.light-mode .dhikr-fraction {
    color: var(--text-primary);
}

.light-mode .dhikr-fraction-sep {
    color: rgba(0, 0, 0, 0.25);
}

.light-mode .dhikr-pct {
    color: rgba(0, 0, 0, 0.5);
}

.light-mode .dhikr-pts {
    color: rgba(170, 140, 50, 0.7);
}

.light-mode .dhikr-act-btn {
    background: rgba(0, 0, 0, 0.04);
    border-color: rgba(0, 0, 0, 0.1);
    color: rgba(170, 140, 50, 0.8);
}

.light-mode .dhikr-act-btn:hover:not(:disabled) {
    background: rgba(0, 0, 0, 0.08);
}

.light-mode .btn-primary {
    background: linear-gradient(135deg, var(--accent-gold), var(--gold-dark));
    color: white;
}

.light-mode .toast {
    background: rgba(255, 255, 255, 0.95);
    color: #1a2e24;
    border-color: rgba(200, 170, 78, 0.4);
}

.light-mode .shortcut-btn {
    background: rgba(0, 0, 0, 0.03);
    border-color: rgba(0, 0, 0, 0.08);
}

.light-mode .names99-card {
    background: rgba(0, 0, 0, 0.03);
}

.light-mode .tasbih-phrase-btn {
    background: rgba(0, 0, 0, 0.04);
    color: var(--text-secondary);
}

.light-mode .tasbih-phrase-btn.active {
    background: rgba(200, 170, 78, 0.15) !important;
}

.light-mode .dua-cat-btn.active {
    background: rgba(200, 170, 78, 0.15) !important;
}

/* === Depth/Layer System === */
.layer-bg {
    z-index: 0;
}

.layer-card {
    z-index: 10;
}

.layer-content {
    z-index: 20;
}

.layer-overlay {
    z-index: 50;
}

.layer-modal {
    z-index: 60;
}

.layer-toast {
    z-index: 80;
}

.layer-top {
    z-index: 100;
}

/* === Input Styling (consolidated) === */
input[type="text"],
input[type="number"],
input[type="time"],
input[type="url"],
input[type="range"],
textarea {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(200, 170, 78, 0.25);
    border-radius: 0.75rem;
    padding: 0.65rem 0.9rem;
    color: var(--text-primary);
    font-size: 1rem;
    transition: border-color 0.2s, box-shadow 0.2s;
    width: 100%;
}

input:focus,
textarea:focus {
    border-color: var(--accent-gold);
    outline: none;
    box-shadow: 0 0 0 3px rgba(200, 170, 78, 0.12);
}

input[type="range"] {
    -webkit-appearance: none;
    background: rgba(200, 170, 78, 0.15);
    height: 6px;
    border-radius: 3px;
    border: none;
    padding: 0;
}

input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    background: var(--accent-gold);
    border-radius: 50%;
    cursor: pointer;
    border: 2px solid rgba(255, 255, 255, 0.2);
}

.light-mode input[type="text"],
.light-mode input[type="number"],
.light-mode input[type="time"],
.light-mode input[type="url"],
.light-mode textarea {
    background: rgba(0, 0, 0, 0.04);
    border-color: rgba(0, 0, 0, 0.12);
    color: var(--text-primary);
}

/* === Button Primary === */
.btn-primary {
    background: linear-gradient(135deg, rgba(200, 170, 78, 0.2), rgba(200, 170, 78, 0.1));
    border: 1px solid rgba(200, 170, 78, 0.4);
    color: var(--accent-gold);
    font-weight: 700;
    transition: all 0.2s;
    cursor: pointer;
}

.btn-primary:hover {
    background: linear-gradient(135deg, rgba(200, 170, 78, 0.3), rgba(200, 170, 78, 0.15));
    border-color: var(--accent-gold);
    transform: translateY(-1px);
}

/* === High Contrast Mode === */
@media (prefers-contrast: high) {
    :root {
        --text-primary: #ffffff;
        --accent-gold: #ffd700;
        --border-color: rgba(255, 215, 0, 0.4);
    }

    .card {
        border-width: 2px;
    }
}

/* === Focus Mode === */
body.focus-mode header,
body.focus-mode .desktop-sidebar,
body.focus-mode .mobile-bottom-nav,
body.focus-mode #more-menu {
    display: none !important;
}

body.focus-mode main {
    max-width: 700px;
    margin: 0 auto;
    padding-top: 1rem;
}

body.focus-mode .main-layout {
    display: block;
}

/* Focus mode exit hint */
body.focus-mode::after {
    content: 'وضع التركيز • Esc للخروج';
    position: fixed;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(200, 170, 78, 0.15);
    border: 1px solid rgba(200, 170, 78, 0.3);
    color: var(--accent-gold);
    font-size: 0.7rem;
    padding: 4px 12px;
    border-radius: 20px;
    z-index: 200;
    backdrop-filter: blur(8px);
}

/* =========================================================================
   Emergency Mode — لحظة تأمل (3-phase design)
   ========================================================================= */

/* Ring animations */
.em-rings {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    overflow: hidden;
}

.em-ring {
    position: absolute;
    border-radius: 50%;
    border: 1px solid rgba(201, 168, 76, 0.07);
    animation: emRingPulse 7s ease-in-out infinite;
}

.em-ring:nth-child(1) {
    width: 280px;
    height: 280px;
    animation-delay: 0s;
}

.em-ring:nth-child(2) {
    width: 480px;
    height: 480px;
    animation-delay: 1s;
}

.em-ring:nth-child(3) {
    width: 680px;
    height: 680px;
    animation-delay: 2s;
}

.em-ring:nth-child(4) {
    width: 880px;
    height: 880px;
    animation-delay: 3s;
}

@keyframes emRingPulse {

    0%,
    100% {
        transform: scale(.97);
        opacity: .25;
    }

    50% {
        transform: scale(1.03);
        opacity: .8;
    }
}

/* Stars */
#em-stars {
    position: fixed;
    inset: 0;
    pointer-events: none;
}

.em-star {
    position: absolute;
    border-radius: 50%;
    background: rgba(201, 168, 76, 0.5);
    animation: emTwinkle var(--d, 3s) ease-in-out infinite;
    animation-delay: var(--dl, 0s);
}

@keyframes emTwinkle {

    0%,
    100% {
        opacity: .15;
    }

    50% {
        opacity: .9;
    }
}

/* Layout */
.em-container {
    position: relative;
    z-index: 10;
    width: 100%;
    max-width: 420px;
    padding: 1.5rem;
    text-align: center;
}

/* Phase transitions */
.em-phase {
    animation: emFadeUp .7s ease both;
}

.em-phase.em-hidden {
    display: none !important;
}

@keyframes emFadeUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

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

/* Phase nav dots */
.em-phase-dots {
    display: flex;
    justify-content: center;
    gap: .5rem;
    margin-bottom: 1.8rem;
}

.em-phase-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(201, 168, 76, .2);
    transition: all .3s;
}

.em-phase-dot.active {
    background: rgba(201, 168, 76, .7);
    transform: scale(1.3);
}

/* ── Phase 1: Breathe ── */
.em-breath-orb {
    width: 148px;
    height: 148px;
    border-radius: 50%;
    margin: 0 auto 2rem;
    background: radial-gradient(circle, rgba(201, 168, 76, .13) 0%, rgba(201, 168, 76, .02) 70%);
    border: 1.5px solid rgba(201, 168, 76, .25);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3.2rem;
    animation: emBreatheOrb 4s ease-in-out infinite;
}

@keyframes emBreatheOrb {

    0%,
    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(201, 168, 76, .08);
    }

    50% {
        transform: scale(1.13);
        box-shadow: 0 0 55px 15px rgba(201, 168, 76, .1);
    }
}

.em-phase-label {
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: rgba(201, 168, 76, .5);
    margin-bottom: .6rem;
}

.em-breath-instruction {
    font-size: 1.55rem;
    font-weight: 700;
    color: rgba(242, 234, 216, .92);
    min-height: 2.4rem;
    transition: opacity .4s;
}

.em-progress-track {
    height: 2px;
    background: rgba(255, 255, 255, .06);
    border-radius: 2px;
    width: 180px;
    margin: 1.6rem auto 0;
    overflow: hidden;
}

.em-progress-fill {
    height: 100%;
    border-radius: 2px;
    width: 0%;
    background: linear-gradient(90deg, rgba(201, 168, 76, .35), var(--light));
    transition: width 1s linear;
}

.em-dua-hint {
    margin-top: 1.4rem;
    font-family: 'Amiri', serif;
    font-size: .95rem;
    color: rgba(201, 168, 76, .4);
    font-style: italic;
}

/* ── Phase 2: Reflection ── */
.em-glass-card {
    background: rgba(255, 255, 255, .025);
    border: 1px solid rgba(201, 168, 76, .11);
    border-radius: 22px;
    padding: 1.6rem 1.8rem;
    backdrop-filter: blur(12px);
    margin-bottom: 1rem;
}

.em-ayah-text {
    font-family: 'Amiri Quran', 'Amiri', serif;
    font-size: 1.32rem;
    line-height: 2.3;
    color: rgba(242, 234, 216, .95);
    margin-bottom: .5rem;
}

.em-hadith-text {
    font-family: 'Amiri', serif;
    font-size: 1.08rem;
    line-height: 1.95;
    color: rgba(242, 234, 216, .78);
    margin-bottom: .4rem;
}

.em-source-tag {
    font-size: .75rem;
    color: rgba(201, 168, 76, .45);
}

.em-btn-tawba {
    margin-top: 1.8rem;
    padding: .85rem 2.2rem;
    background: transparent;
    border: 1px solid rgba(201, 168, 76, .3);
    border-radius: 14px;
    color: rgba(201, 168, 76, .85);
    font-family: 'Tajawal', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    transition: all .2s;
}

.em-btn-tawba:hover {
    border-color: rgba(201, 168, 76, .65);
    color: var(--light);
}

/* ── Phase 3: Action ── */
.em-action-card {
    background: linear-gradient(135deg, rgba(201, 168, 76, .09), rgba(201, 168, 76, .03));
    border: 1px solid rgba(201, 168, 76, .22);
    border-radius: 22px;
    padding: 1.8rem 1.5rem;
    margin-bottom: 1.2rem;
}

.em-action-icon {
    font-size: 2.4rem;
    display: block;
    margin-bottom: .7rem;
}

.em-action-title {
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--light);
    margin-bottom: .35rem;
}

.em-action-sub {
    font-size: .88rem;
    color: rgba(242, 234, 216, .45);
    line-height: 1.6;
}

.em-timer-label {
    font-size: .7rem;
    letter-spacing: .18em;
    color: rgba(201, 168, 76, .35);
    margin-bottom: .15rem;
}

.em-timer-display {
    font-size: 2.8rem;
    font-weight: 900;
    color: rgba(201, 168, 76, .65);
    letter-spacing: .04em;
    margin-bottom: 1.2rem;
}

.em-btn-commit {
    width: 100%;
    padding: 1.1rem;
    background: linear-gradient(135deg, rgba(201, 168, 76, .18), rgba(201, 168, 76, .08));
    border: 2px solid rgba(201, 168, 76, .45);
    border-radius: 16px;
    color: var(--light);
    font-family: 'Tajawal', sans-serif;
    font-size: 1.05rem;
    font-weight: 800;
    cursor: pointer;
    display: block;
    transition: all .25s;
    margin-bottom: .7rem;
}

.em-btn-commit:hover {
    background: linear-gradient(135deg, rgba(201, 168, 76, .28), rgba(201, 168, 76, .14));
    transform: translateY(-1px);
    box-shadow: 0 8px 25px rgba(201, 168, 76, .12);
}

.em-btn-ghost {
    width: 100%;
    padding: .6rem;
    background: none;
    border: none;
    color: rgba(242, 234, 216, .2);
    font-family: 'Tajawal', sans-serif;
    font-size: .82rem;
    cursor: pointer;
    transition: color .2s;
}

.em-btn-ghost:hover {
    color: rgba(242, 234, 216, .45);
}

/* =========================================================================
   Skeleton Loading
   ========================================================================= */
.skeleton {
    background: linear-gradient(90deg,
            rgba(255, 255, 255, 0.04) 25%,
            rgba(255, 255, 255, 0.08) 50%,
            rgba(255, 255, 255, 0.04) 75%);
    background-size: 200% 100%;
    animation: skeletonShimmer 1.5s infinite;
    border-radius: 12px;
}

.skeleton-card {
    height: 80px;
    margin-bottom: 12px;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.skeleton-line {
    height: 14px;
    margin-bottom: 8px;
}

.skeleton-circle {
    width: 48px;
    height: 48px;
    border-radius: 50%;
}

@keyframes skeletonShimmer {
    0% {
        background-position: 200% 0;
    }

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

/* =========================================================================
   Night Reading Mode (Quran)
   ========================================================================= */










.mushaf-night-mode .mushaf-surah-ornament {
    color: rgba(201, 168, 76, 0.4) !important;
}

/* =========================================================================
   Fasting Tracker
   ========================================================================= */
.fasting-day-btn {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 2px solid rgba(201, 168, 76, 0.2);
    background: rgba(255, 255, 255, 0.03);
    color: var(--text-secondary);
    font-size: 0.75rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.fasting-day-btn.fasted {
    background: rgba(74, 222, 128, 0.15);
    border-color: rgba(74, 222, 128, 0.5);
    color: var(--calm);
}

.fasting-day-btn.today {
    border-color: rgba(201, 168, 76, 0.6);
    box-shadow: 0 0 8px rgba(201, 168, 76, 0.2);
}

.fasting-day-btn:hover {
    transform: scale(1.1);
    border-color: rgba(201, 168, 76, 0.5);
}

/* =========================================================================
   Accessibility — Focus visible ring
   ========================================================================= */
*:focus-visible {
    outline: 2px solid rgba(201, 168, 76, 0.7);
    outline-offset: 2px;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid rgba(201, 168, 76, 0.7);
    outline-offset: 2px;
    border-radius: 4px;
}

/* Skip to content link (screen reader) */
.sr-skip-link {
    position: absolute;
    top: -100%;
    left: 50%;
    transform: translateX(-50%);
    background: var(--accent-gold);
    color: #000;
    padding: 8px 16px;
    border-radius: 0 0 8px 8px;
    font-weight: 700;
    z-index: 9999;
    transition: top 0.2s;
}

.sr-skip-link:focus {
    top: 0;
}

/* Screen reader only text */
.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;
}

/* =========================================================================
   Share Progress Image Canvas
   ========================================================================= */
.share-image-preview {
    max-width: 100%;
    border-radius: 16px;
    border: 2px solid rgba(201, 168, 76, 0.3);
    margin: 1rem auto;
    display: block;
}
/* =========================================================================
   ═══  REDESIGN LAYER  ═══════════════════════════════════════════════════
   Loaded last on purpose: it re-skins the primitives the whole app is built
   from. Everything here is written against the token block at the top of
   this file, so a palette change propagates without touching components.
   ========================================================================= */

/* ── Motion discipline ────────────────────────────────────────────────────
   The old sheet left `animate-pulse` running forever on static numbers. A
   thing that moves without a reason to move is noise, so ambient looping
   animation is switched off and motion is reserved for state changes. */
.animate-pulse,
.animate-shimmer {
    animation: none !important;
}

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* Screens arrive rather than appear. */
.screen:not(.hidden) {
    animation: nafsEnter var(--dur-slow) var(--ease) both;
}

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

    to {
        opacity: 1;
        transform: none;
    }
}

/* ── Typography ──────────────────────────────────────────────────────────── */
body,
button,
input,
select,
textarea {
    font-family: var(--font-ui);
}

h1,
h2,
h3,
h4 {
    font-weight: 500;
    letter-spacing: -0.005em;
    text-wrap: balance;
    line-height: 1.35;
}

/* Scripture is set in Amiri and given room. It is the one place on screen
   allowed to be large and slow. */
.font-arabic,
.ayah-text,
.dhikr-card .ayah-text {
    font-family: var(--font-scripture);
    line-height: 2.15;
    letter-spacing: 0;
}

/* Digits line up in columns wherever they are compared. */
.nafs-num,
.dhikr-fraction,
.dhikr-pct,
.prayer-summary-date,
#total-points-display,
#streakDisplay {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
}

/* A quiet section label. Structure without a heavy heading. */
.nafs-eyebrow {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    margin: var(--s-6) 0 var(--s-4);
    color: var(--text-3);
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0.08em;
}

.nafs-eyebrow::after {
    content: "";
    flex: 1;
    height: 1px;
    background: linear-gradient(to left, transparent, var(--hairline-soft));
}

/* ── Surfaces ────────────────────────────────────────────────────────────
   One card treatment, layered by depth rather than outlined by borders. */
.card,
.glass-card {
    background: var(--surface) !important;
    border: 1px solid var(--hairline);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    backdrop-filter: blur(var(--blur-intensity)) saturate(1.15);
    -webkit-backdrop-filter: blur(var(--blur-intensity)) saturate(1.15);
    transition: border-color var(--dur) var(--ease),
        background-color var(--dur) var(--ease),
        transform var(--dur) var(--ease);
}

/* Cards no longer carry stray Tailwind hues; state is shown by the light. */
.card[class*="border-blue-"],
.card[class*="border-yellow-"],
.card[class*="border-green-"],
.card[class*="border-red-"] {
    border-color: var(--hairline);
}

.nafs-quiet {
    background: transparent !important;
    border: none;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

/* ── Interactive ─────────────────────────────────────────────────────────── */
button,
[role="button"] {
    transition: background-color var(--dur-fast) var(--ease),
        border-color var(--dur-fast) var(--ease),
        transform var(--dur-fast) var(--ease),
        opacity var(--dur-fast) var(--ease);
}

button:active:not(:disabled),
[role="button"]:active {
    transform: scale(0.975);
}

button:disabled {
    opacity: 0.42;
    cursor: not-allowed;
}

/* One visible focus treatment for the whole app. */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
    outline: 2px solid var(--light);
    outline-offset: 3px;
    border-radius: var(--radius-sm);
}

.nafs-btn-primary {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--s-2);
    width: 100%;
    padding: var(--s-4) var(--s-5);
    border: 1px solid var(--light-edge-strong);
    border-radius: var(--radius-md);
    background: linear-gradient(180deg,
            rgba(212, 180, 103, 0.16),
            rgba(212, 180, 103, 0.07));
    color: var(--light-core);
    font-family: var(--font-ui);
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
}

.nafs-btn-primary:hover {
    background: linear-gradient(180deg,
            rgba(212, 180, 103, 0.24),
            rgba(212, 180, 103, 0.11));
    border-color: rgba(212, 180, 103, 0.42);
}

.nafs-btn-ghost {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--s-2);
    padding: var(--s-3) var(--s-4);
    border: 1px solid var(--hairline);
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--text-2);
    font-size: 0.92rem;
    cursor: pointer;
}

.nafs-btn-ghost:hover {
    background: var(--surface-hover);
    border-color: var(--light-edge);
    color: var(--text);
}

/* =========================================================================
   Dashboard — the moment
   The screen opens on where you are in the day, not on a scoreboard.
   ========================================================================= */

/* :not(.hidden) matters here — an id selector outranks Tailwind's .hidden,
   so setting display on the bare id would keep the screen in the layout even
   when the router has hidden it. */
#screen-dashboard:not(.hidden) {
    display: flex;
    flex-direction: column;
    gap: 0;
}

#screen-dashboard {
    max-width: 44rem;
    margin-inline: auto;
}

/* ── The moment ───────────────────────────────────────────────────────── */
.nafs-moment {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: var(--s-7) var(--s-4) var(--s-6);
    isolation: isolate;
}

/* A single pool of light behind the hour. This is the only ambient motion in
   the app: a slow breath, ~14s — easy to ignore, impossible to find annoying. */
.nafs-moment-glow {
    position: absolute;
    z-index: -1;
    top: -14%;
    left: 50%;
    width: min(30rem, 116%);
    aspect-ratio: 1;
    translate: -50% 0;
    background: radial-gradient(circle, var(--light-glow), transparent 62%);
    filter: blur(14px);
    animation: nafsBreathe 14s var(--ease-in-out) infinite;
}

@keyframes nafsBreathe {

    0%,
    100% {
        opacity: 0.55;
        scale: 1;
    }

    50% {
        opacity: 0.9;
        scale: 1.06;
    }
}

.nafs-hijri {
    margin: 0 0 var(--s-5);
    color: var(--text-3);
    font-size: 0.82rem;
    letter-spacing: 0.04em;
}

.nafs-next-label {
    margin: 0 0 var(--s-2);
    color: var(--light-soft);
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0.14em;
}

.nafs-next-prayer {
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(3rem, 13vw, 4.5rem);
    font-weight: 700;
    line-height: 1;
    color: var(--text);
    text-shadow: 0 0 42px rgba(212, 180, 103, 0.22);
}

.nafs-next-empty {
    font-size: clamp(1.8rem, 7vw, 2.4rem);
    color: var(--text-2);
}

.nafs-next-time {
    margin: var(--s-3) 0 0;
    display: flex;
    align-items: center;
    gap: var(--s-3);
    color: var(--light);
    font-size: 1.05rem;
    font-weight: 500;
}

.nafs-next-sep {
    opacity: 0.4;
}

.nafs-next-remaining {
    color: var(--text-2);
    font-weight: 400;
}

.nafs-next-cta {
    margin-top: var(--s-4);
    width: auto;
    padding-inline: var(--s-5);
}

/* ── The day as five marks ────────────────────────────────────────────── */
.nafs-arc {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: clamp(var(--s-4), 6vw, var(--s-6));
    margin: var(--s-6) 0 var(--s-2);
}

.nafs-arc-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--s-2);
}

.nafs-arc-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: rgba(236, 229, 214, 0.16);
    transition: all var(--dur) var(--ease);
}

.nafs-arc-label {
    color: var(--text-3);
    font-size: 0.68rem;
    transition: color var(--dur) var(--ease);
}

.nafs-arc-done .nafs-arc-dot {
    background: var(--calm);
    box-shadow: 0 0 12px -2px var(--calm);
}

.nafs-arc-done .nafs-arc-label {
    color: var(--text-2);
}

.nafs-arc-late .nafs-arc-dot {
    background: var(--warm);
}

.nafs-arc-missed .nafs-arc-dot {
    background: transparent;
    box-shadow: inset 0 0 0 1.5px var(--alert);
}

/* The prayer you are waiting for is the one thing here that is lit. */
.nafs-arc-next .nafs-arc-dot {
    width: 11px;
    height: 11px;
    background: var(--light);
    box-shadow: 0 0 0 4px var(--light-glow), 0 0 18px -2px var(--light);
}

.nafs-arc-next .nafs-arc-label {
    color: var(--light);
    font-weight: 500;
}

/* ── The verse ────────────────────────────────────────────────────────── */
.nafs-verse {
    margin: var(--s-6) 0;
    padding: 0 var(--s-2);
    border: 0;
    max-width: 30rem;
}

.nafs-verse-text {
    margin: 0;
    font-family: var(--font-scripture);
    font-size: clamp(1.25rem, 4.6vw, 1.6rem);
    line-height: 2.1;
    color: var(--text);
    text-wrap: balance;
}

.nafs-verse-ref {
    display: block;
    margin-top: var(--s-3);
    color: var(--text-3);
    font-size: 0.76rem;
    font-style: normal;
    letter-spacing: 0.05em;
}

/* ── The single invitation ────────────────────────────────────────────── */
.nafs-invite {
    max-width: 20rem;
    box-shadow: var(--glow);
}

.nafs-invite-icon {
    display: inline-flex;
    color: var(--light-core);
}

.nafs-resume {
    margin-top: var(--s-4);
    padding: var(--s-2) var(--s-3);
    border: 0;
    background: none;
    color: var(--text-3);
    font-size: 0.84rem;
    cursor: pointer;
    transition: color var(--dur-fast) var(--ease);
}

.nafs-resume:hover {
    color: var(--light);
}

.nafs-resume strong {
    color: var(--text-2);
    font-weight: 500;
}

/* ── Meters for the day ───────────────────────────────────────────────── */
.nafs-today {
    display: flex;
    flex-direction: column;
    gap: var(--s-5);
    padding: var(--s-5);
}

.nafs-meter-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: var(--s-2);
}

.nafs-meter-label {
    color: var(--text-2);
    font-size: 0.92rem;
}

.nafs-meter-value {
    color: var(--text);
    font-size: 0.95rem;
    font-weight: 500;
}

.nafs-meter-total {
    color: var(--text-3);
    font-weight: 400;
}

.nafs-meter-track {
    height: 4px;
    border-radius: 999px;
    background: var(--progress-bg);
    overflow: hidden;
}

.nafs-meter-fill {
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--light-soft), var(--light));
    transition: width var(--dur-slow) var(--ease);
}

/* ── The daily invitation ─────────────────────────────────────────────── */
.nafs-challenge {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-4);
    margin-top: var(--s-3);
    padding: var(--s-5);
}

.nafs-challenge-label {
    margin: 0 0 var(--s-1);
    color: var(--text-3);
    font-size: 0.74rem;
    letter-spacing: 0.08em;
}

.nafs-challenge-text {
    margin: 0;
    color: var(--text);
    font-size: 1rem;
    line-height: 1.5;
}

.nafs-challenge-btn {
    flex: none;
    white-space: nowrap;
}

.nafs-challenge.is-done {
    border-color: rgba(111, 174, 138, 0.24);
}

.nafs-challenge.is-done .nafs-challenge-text {
    color: var(--text-2);
}

.nafs-challenge-check {
    flex: none;
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: var(--calm-bg);
    color: var(--calm);
    font-size: 1rem;
}

/* ── The journey — numbers, whispered ─────────────────────────────────── */
.nafs-journey {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background: var(--hairline-soft);
    border: 1px solid var(--hairline-soft);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.nafs-journey-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--s-1);
    padding: var(--s-5) var(--s-2);
    border: 0;
    background: var(--surface);
    cursor: pointer;
}

.nafs-journey-stat:hover {
    background: var(--surface-raised);
}

.nafs-journey-value {
    color: var(--text);
    font-size: 1.55rem;
    font-weight: 600;
    line-height: 1;
}

.nafs-journey-label {
    color: var(--text-3);
    font-size: 0.72rem;
    text-align: center;
}

/* ── Shortcuts ────────────────────────────────────────────────────────── */
.nafs-shortcuts {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--s-2);
}

@media (min-width: 640px) {
    .nafs-shortcuts {
        grid-template-columns: repeat(8, 1fr);
    }
}

.nafs-shortcut {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--s-2);
    padding: var(--s-4) var(--s-1);
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    background: var(--surface);
    color: var(--text-2);
    cursor: pointer;
}

.nafs-shortcut:hover {
    border-color: var(--light-edge);
    background: var(--surface-raised);
    color: var(--text);
}

.nafs-shortcut-icon {
    color: var(--light-soft);
    transition: color var(--dur-fast) var(--ease);
}

.nafs-shortcut:hover .nafs-shortcut-icon {
    color: var(--light);
}

.nafs-shortcut-label {
    font-size: 0.72rem;
}

/* ── The closing word ─────────────────────────────────────────────────── */
.nafs-closing {
    margin: var(--s-7) 0 var(--s-5);
    padding: 0 var(--s-4);
    text-align: center;
}

.nafs-closing::before {
    content: "";
    display: block;
    width: 2.5rem;
    height: 1px;
    margin: 0 auto var(--s-5);
    background: linear-gradient(90deg, transparent, var(--light-edge-strong), transparent);
}

.nafs-closing-text {
    margin: 0;
    font-family: var(--font-scripture);
    font-size: 1.1rem;
    line-height: 2.05;
    color: var(--text-2);
    text-wrap: balance;
}

.nafs-footer-actions {
    display: flex;
    justify-content: center;
    gap: var(--s-3);
    padding-bottom: var(--s-6);
}

.nafs-footer-actions .nafs-btn-ghost {
    padding-inline: var(--s-5);
}

/* =========================================================================
   Shell — header, sidebar, mobile nav
   The frame should be the quietest thing on screen. Nothing here competes
   with the content it holds.
   ========================================================================= */

.nafs-header {
    position: sticky;
    top: 0;
    z-index: 40;
    background: color-mix(in srgb, var(--ink-800) 88%, transparent);
    backdrop-filter: blur(20px) saturate(1.2);
    -webkit-backdrop-filter: blur(20px) saturate(1.2);
    border-bottom: 1px solid var(--hairline-soft);
}

.nafs-header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-4);
    max-width: 84rem;
    margin-inline: auto;
    padding: var(--s-3) var(--s-4);
}

.nafs-brand {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    min-width: 0;
    padding: var(--s-1);
    border: 0;
    background: none;
    cursor: pointer;
    text-align: start;
}

.nafs-brand-mark {
    flex: none;
    display: grid;
    place-items: center;
    color: var(--light);
}

.nafs-brand-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.nafs-brand-name {
    font-family: var(--font-display);
    font-size: 1.45rem;
    font-weight: 700;
    line-height: 1.1;
    color: var(--light);
    letter-spacing: 0.02em;
}

.nafs-brand-greeting {
    font-size: 0.78rem;
    color: var(--text-3);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.nafs-header-actions {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    flex: none;
}

.nafs-icon-btn {
    display: grid;
    place-items: center;
    width: 2.4rem;
    height: 2.4rem;
    border: 1px solid transparent;
    border-radius: 50%;
    background: transparent;
    color: var(--text-3);
    font-size: 0.95rem;
    cursor: pointer;
}

.nafs-icon-btn:hover {
    border-color: var(--light-edge);
    background: var(--surface-hover);
    color: var(--light);
}

/* ── Sidebar / bottom nav: an active item is lit, the rest recede ─────── */
.nav-link {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    width: 100%;
    padding: var(--s-3) var(--s-4);
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--text-3);
    font-family: var(--font-ui);
    font-size: 0.92rem;
    font-weight: 400;
    cursor: pointer;
    transition: color var(--dur-fast) var(--ease),
        background-color var(--dur-fast) var(--ease);
}

.nav-link span:first-child {
    display: inline-flex;
    color: currentColor;
    opacity: 0.85;
}

.nav-link:hover {
    background: var(--surface-hover);
    color: var(--text);
}

.nav-link.active {
    background: var(--gold-bg);
    border-color: var(--light-edge);
    color: var(--light);
    font-weight: 500;
}

.mobile-nav-btn {
    color: var(--text-3);
    transition: color var(--dur-fast) var(--ease);
}

.mobile-nav-btn.active {
    color: var(--light);
}

/* =========================================================================
   Adhkar — the counting surface
   This is where people spend the most time, so the card is built around the
   ring: one large, obvious tap target, and everything else subordinate.
   ========================================================================= */

.dhikr-card {
    padding: var(--s-5);
    border: 1px solid var(--hairline-soft);
    border-radius: var(--radius-lg);
    background: var(--surface);
    box-shadow: var(--shadow-sm);
    transition: border-color var(--dur) var(--ease),
        background-color var(--dur) var(--ease);
}

.dhikr-card .ayah-text {
    font-family: var(--font-scripture);
    font-size: 1.22rem;
    line-height: 2.2;
    color: var(--text);
}

.dhikr-card .surah-ref,
.dhikr-card .virtue-text {
    color: var(--text-3);
    font-size: 0.82rem;
    line-height: 1.7;
}

/* Completion is marked by a calm green edge, not by a permanent pulse. */
.dhikr-card.completed,
.dhikr-card.dhikr-completed {
    border-color: rgba(111, 174, 138, 0.28);
    background: linear-gradient(180deg, var(--calm-bg), transparent 60%), var(--surface);
}

.dhikr-ring-btn {
    border: 0;
    background: none;
    cursor: pointer;
    transition: transform var(--dur-fast) var(--ease);
}

.dhikr-ring-bg {
    fill: none;
    stroke: var(--progress-bg);
    stroke-width: 6;
}

.dhikr-ring-fill {
    fill: none;
    stroke: var(--light);
    stroke-width: 6;
    stroke-linecap: round;
    transform: rotate(-90deg);
    transform-origin: 50% 50%;
    transition: stroke-dashoffset var(--dur) var(--ease), stroke var(--dur) var(--ease);
}

.dhikr-ring-fill-done {
    stroke: var(--calm);
}

.dhikr-ring-label {
    color: var(--text);
    font-variant-numeric: tabular-nums;
}

.dhikr-ring-done .dhikr-ring-label {
    color: var(--calm);
}

.dhikr-fraction {
    color: var(--text);
}

.dhikr-fraction-sep,
.dhikr-pct,
.dhikr-pts {
    color: var(--text-3);
}

.dhikr-act-btn {
    display: grid;
    place-items: center;
    width: 2.2rem;
    height: 2.2rem;
    border: 1px solid var(--hairline-soft);
    border-radius: 50%;
    background: transparent;
    color: var(--text-3);
    cursor: pointer;
}

.dhikr-act-btn:hover:not(:disabled) {
    border-color: var(--light-edge);
    color: var(--light);
}

.dhikr-act-delete:hover:not(:disabled) {
    border-color: rgba(201, 112, 95, 0.35);
    color: var(--alert);
}

.adhkar-tab {
    padding: var(--s-2) var(--s-4);
    border: 1px solid transparent;
    border-radius: 999px;
    background: transparent;
    color: var(--text-3);
    font-size: 0.88rem;
    white-space: nowrap;
    cursor: pointer;
    transition: all var(--dur-fast) var(--ease);
}

.adhkar-tab:hover {
    color: var(--text);
}

.adhkar-tab.tab-active {
    border-color: var(--light-edge);
    background: var(--gold-bg);
    color: var(--light);
}

/* =========================================================================
   Forms — one treatment everywhere
   ========================================================================= */

input[type="text"],
input[type="number"],
input[type="time"],
input[type="search"],
select,
textarea {
    width: 100%;
    padding: var(--s-3) var(--s-4);
    border: 1px solid var(--hairline);
    border-radius: var(--radius-md);
    background: var(--ink-700);
    color: var(--text);
    font-family: var(--font-ui);
    font-size: 0.95rem;
    transition: border-color var(--dur-fast) var(--ease),
        background-color var(--dur-fast) var(--ease);
}

input::placeholder,
textarea::placeholder {
    color: var(--text-3);
}

input:focus,
select:focus,
textarea:focus {
    border-color: var(--light-edge-strong);
    background: var(--ink-600);
    outline: none;
}

/* =========================================================================
   Modals + toast
   ========================================================================= */

.modal-overlay {
    background: color-mix(in srgb, var(--ink-900) 78%, transparent);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.modal-content {
    border: 1px solid var(--hairline);
    border-radius: var(--radius-lg);
    background: var(--ink-600);
    box-shadow: var(--shadow-lg);
}

.toast {
    border: 1px solid var(--hairline);
    border-radius: var(--radius-md);
    background: var(--ink-600);
    color: var(--text);
    box-shadow: var(--shadow-lg);
    font-family: var(--font-ui);
    font-weight: 400;
}

.toast.success {
    border-color: rgba(111, 174, 138, 0.32);
}

.toast.error {
    border-color: rgba(201, 112, 95, 0.32);
}

.toast.warning {
    border-color: rgba(217, 154, 91, 0.32);
}

/* =========================================================================
   Retiring the stray Tailwind palette
   The app is green and gold; blue/yellow/red-400 were leaking in from
   utility classes and breaking the identity. Map them onto the token set.
   ========================================================================= */

.text-blue-400,
.text-blue-300 {
    color: var(--light) !important;
}

.text-yellow-400,
.text-yellow-300,
.text-orange-400 {
    color: var(--warm) !important;
}

.text-green-400,
.text-green-300 {
    color: var(--calm) !important;
}

.text-red-400,
.text-red-300 {
    color: var(--alert) !important;
}

.border-blue-500\/30,
.border-blue-500\/40,
.border-yellow-500\/30,
.border-green-500\/30,
.border-green-500\/40 {
    border-color: var(--hairline) !important;
}

.bg-blue-500\/20,
.bg-blue-500\/10 {
    background: var(--gold-bg) !important;
}

.bg-green-500\/20,
.bg-green-500\/10 {
    background: var(--calm-bg) !important;
}

.bg-red-500\/20,
.bg-red-500\/10 {
    background: var(--alert-bg) !important;
}

.text-gold,
.text-gold-light {
    color: var(--light) !important;
}

/* =========================================================================
   Ground + stacking corrections
   ========================================================================= */

/* The ground has to live on <html>, not only on <body>.
   A background set on body propagates to the page canvas, which leaves body
   itself painting nothing — and anything using backdrop-filter then samples
   the blank canvas and turns pale. Painting html gives those elements a real
   backdrop to sample. */
html {
    background-color: var(--ink-800);
    background-image:
        radial-gradient(ellipse at 20% 50%, rgba(45, 138, 94, 0.07) 0%, transparent 52%),
        radial-gradient(ellipse at 80% 18%, rgba(212, 180, 103, 0.05) 0%, transparent 52%),
        linear-gradient(160deg, var(--ink-800) 0%, var(--ink-600) 38%, var(--ink-500) 62%, var(--ink-800) 100%);
    background-attachment: fixed;
}

body,
body.bg-islamic {
    background-color: transparent;
    background-image: none;
    font-family: var(--font-ui);
}

.light-mode.bg-islamic,
.light-mode body {
    background-color: transparent;
    background-image: none;
}

html:has(body.light-mode),
.light-mode {
    background-color: var(--ink-800);
    background-image: linear-gradient(160deg, #f7f3e8 0%, #eee7d6 55%, #f7f3e8 100%);
}

/* =========================================================================
   Floating controls
   Three fixed buttons — AI, back-to-top and the nav toggle — were all landing
   in the same corner on top of each other. They get one column, in a fixed
   order, clear of the bottom navigation.
   ========================================================================= */

:root {
    --bottom-nav-h: 4.75rem;
    --fab-gap: 0.625rem;
}

#ai-fab:not(.nafs-icon-btn),
#backToTop,
#nav-toggle-btn {
    position: fixed !important;
    inset-inline-start: var(--s-4) !important;
    inset-inline-end: auto !important;
    width: 2.85rem !important;
    height: 2.85rem !important;
    display: grid !important;
    place-items: center;
    border-radius: 50% !important;
    border: 1px solid var(--light-edge) !important;
    background: color-mix(in srgb, var(--ink-600) 92%, transparent) !important;
    color: var(--light) !important;
    box-shadow: var(--shadow) !important;
    font-size: 0.95rem !important;
    animation: none !important;
    transition: border-color var(--dur-fast) var(--ease),
        background-color var(--dur-fast) var(--ease) !important;
}

#ai-fab:not(.nafs-icon-btn):hover,
#backToTop:hover,
#nav-toggle-btn:hover {
    border-color: var(--light-edge-strong) !important;
    background: var(--ink-500) !important;
}

/* Stacked, bottom-up, above the navigation bar. */
#ai-fab:not(.nafs-icon-btn) {
    bottom: calc(var(--bottom-nav-h) + env(safe-area-inset-bottom, 0px) + var(--s-3)) !important;
    z-index: 45;
}

#backToTop {
    bottom: calc(var(--bottom-nav-h) + env(safe-area-inset-bottom, 0px) + var(--s-3) + 2.85rem + var(--fab-gap)) !important;
    z-index: 45;
    opacity: 0;
    pointer-events: none;
}

#backToTop.visible {
    opacity: 1;
    pointer-events: auto;
}

#nav-toggle-btn {
    inset-inline-start: auto !important;
    inset-inline-end: var(--s-4) !important;
    bottom: calc(var(--bottom-nav-h) + env(safe-area-inset-bottom, 0px) + var(--s-3)) !important;
    z-index: 45;
}

@media (min-width: 1024px) {

    /* On desktop the bottom bar is gone, so the column drops to the edge. */
    #ai-fab:not(.nafs-icon-btn),
    #nav-toggle-btn {
        bottom: var(--s-5) !important;
    }

    #backToTop {
        bottom: calc(var(--s-5) + 2.85rem + var(--fab-gap)) !important;
    }
}

/* =========================================================================
   Room to breathe at the bottom
   Content used to run underneath the fixed navigation.
   ========================================================================= */
.main-layout {
    padding-bottom: calc(var(--bottom-nav-h) + env(safe-area-inset-bottom, 0px) + var(--s-7)) !important;
}

@media (min-width: 1024px) {
    .main-layout {
        padding-bottom: var(--s-7) !important;
    }
}

/* =========================================================================
   Scripture sizing
   The app lets the reader scale the UI (html font-size), so scripture is
   sized in viewport units with rem only as the floor — it stays readable at
   the smallest setting without becoming huge at the largest.
   ========================================================================= */
.nafs-verse-text {
    font-size: clamp(1.35rem, 5.4vw, 1.75rem);
}

.nafs-next-prayer {
    font-size: clamp(3.25rem, 15vw, 5rem);
}

.nafs-closing-text {
    font-size: clamp(1.05rem, 4.2vw, 1.3rem);
}

/* =========================================================================
   Bottom navigation
   ========================================================================= */
.mobile-nav,
#mobile-nav {
    background: color-mix(in srgb, var(--ink-800) 94%, transparent);
    backdrop-filter: blur(18px) saturate(1.2);
    -webkit-backdrop-filter: blur(18px) saturate(1.2);
    border-top: 1px solid var(--hairline-soft);
}

.mobile-nav-btn {
    color: var(--text-3);
    gap: 0.25rem;
}

.mobile-nav-btn .islamic-icon,
.mobile-nav-btn i {
    opacity: 0.85;
}

.mobile-nav-btn.active {
    color: var(--light);
}

.mobile-nav-btn.active .islamic-icon,
.mobile-nav-btn.active i {
    opacity: 1;
}

/* The AI button is a companion, not a mascot: it sits quietly and only
   brightens on hover. It also hides itself while its own screen is open. */
#ai-fab.ai-fab-hidden {
    display: none !important;
}

#ai-fab:not(.nafs-icon-btn):hover,
#ai-fab:not(.nafs-icon-btn):active {
    transform: none;
    box-shadow: var(--shadow), var(--glow) !important;
}

#nav-toggle-btn[hidden] {
    display: none !important;
}

/* When the bottom bar is collapsed the floating column drops with it. */
body.nav-collapsed {
    --bottom-nav-h: 0.5rem;
}

#mobile-nav {
    transition: transform var(--dur) var(--ease);
}

#mobile-nav.nav-hidden {
    transform: translateY(105%);
}

/* =========================================================================
   Activity map
   Intensity is one accent at five opacities, so a busy month reads as a
   warmer patch of light rather than as a chart with a colour key.
   ========================================================================= */

.nafs-heat {
    padding: var(--s-5);
}

.nafs-heat-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--s-4);
    margin-bottom: var(--s-4);
}

.nafs-heat-title {
    margin: 0;
    color: var(--text-2);
    font-size: 0.92rem;
    font-weight: 500;
}

.nafs-heat-legend {
    display: flex;
    align-items: center;
    gap: 3px;
    color: var(--text-3);
    font-size: 0.65rem;
}

.nafs-heat-scroll {
    display: flex;
    gap: var(--s-2);
    direction: ltr;
    overflow-x: auto;
    padding-bottom: var(--s-1);
}

.nafs-heat-days {
    display: grid;
    grid-template-rows: repeat(7, 13px);
    gap: 3px;
    flex: none;
    color: var(--text-3);
    font-size: 0.58rem;
}

.nafs-heat-days span {
    display: flex;
    align-items: center;
    line-height: 1;
}

.nafs-heat-grid {
    display: grid;
    grid-template-rows: repeat(7, 13px);
    grid-auto-flow: column;
    gap: 3px;
}

.nafs-heat-cell {
    width: 13px;
    height: 13px;
    border-radius: 3px;
    background: rgba(212, 180, 103, 0.07);
    transition: background-color var(--dur) var(--ease);
}

.nafs-heat-cell[data-level="1"] {
    background: rgba(212, 180, 103, 0.22);
}

.nafs-heat-cell[data-level="2"] {
    background: rgba(212, 180, 103, 0.42);
}

.nafs-heat-cell[data-level="3"] {
    background: rgba(212, 180, 103, 0.64);
}

.nafs-heat-cell[data-level="4"] {
    background: rgba(212, 180, 103, 0.88);
}

.nafs-heat-cell.is-future {
    background: transparent;
}

.nafs-heat-legend .nafs-heat-cell {
    width: 11px;
    height: 11px;
}

/* =========================================================================
   Floating controls, revised
   The AI entry moved into the header, so only two remain: back-to-top, and
   the small tab that collapses the bottom bar. Neither should sit on top of
   the content it is meant to help with.
   ========================================================================= */

#backToTop {
    inset-inline-start: auto !important;
    inset-inline-end: var(--s-4) !important;
    bottom: calc(var(--bottom-nav-h) + env(safe-area-inset-bottom, 0px) + var(--s-3)) !important;
}

/* The collapse tab rides the top edge of the navigation bar rather than
   floating free over the page. */
#nav-toggle-btn {
    inset-inline: 0 !important;
    margin-inline: auto !important;
    bottom: calc(var(--bottom-nav-h) + env(safe-area-inset-bottom, 0px) - 0.5rem) !important;
    width: 2.4rem !important;
    height: 1.5rem !important;
    border-radius: 999px 999px 0 0 !important;
    border-bottom: 0 !important;
    font-size: 0.7rem !important;
    box-shadow: none !important;
    z-index: 39 !important;
}

@media (min-width: 1024px) {

    /* No bottom bar on desktop — the collapse tab has nothing to collapse. */
    #nav-toggle-btn {
        display: none !important;
    }

    #backToTop {
        bottom: var(--s-5) !important;
    }
}

/* The brand mark: a small, steady mark, not a badge. */
.nafs-brand-mark .app-logo-icon,
.nafs-brand-mark svg {
    width: 2.35rem !important;
    height: 2.35rem !important;
}

/* =========================================================================
   The dhikr card, laid out around the ring
   The ring is the only thing you need to hit, so it gets the space and the
   light; the counters and secondary actions sit beside it, quiet.
   ========================================================================= */

.dhikr-counter-area {
    display: grid !important;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: var(--s-4) !important;
    margin-top: var(--s-4) !important;
    padding-top: var(--s-4);
    border-top: 1px solid var(--hairline-soft);
}

.dhikr-ring-btn {
    position: relative;
    display: grid;
    place-items: center;
    width: 4.5rem;
    height: 4.5rem;
    flex: none;
}

.dhikr-ring-svg {
    width: 100%;
    height: 100%;
}

.dhikr-ring-label {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    font-size: 1.15rem;
    font-weight: 600;
}

.dhikr-info-col {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

.dhikr-fraction {
    font-size: 1rem;
    font-weight: 500;
    direction: ltr;
    text-align: start;
}

.dhikr-fraction-sep {
    margin-inline: 0.15rem;
    opacity: 0.5;
}

.dhikr-pct,
.dhikr-pts {
    font-size: 0.75rem;
}

.dhikr-actions {
    display: flex;
    flex-direction: column;
    gap: var(--s-2);
    flex: none;
}

@media (min-width: 420px) {
    .dhikr-actions {
        flex-direction: row;
    }
}

/* The tappable ring gets a hint of light behind it so it reads as the
   primary action without needing a filled button. */
.dhikr-ring-btn:not(:disabled)::after {
    content: "";
    position: absolute;
    inset: 12%;
    border-radius: 50%;
    background: radial-gradient(circle, var(--light-glow), transparent 70%);
    opacity: 0;
    transition: opacity var(--dur) var(--ease);
    pointer-events: none;
}

.dhikr-ring-btn:not(:disabled):hover::after {
    opacity: 1;
}

.dhikr-ring-btn:not(:disabled):active {
    transform: scale(0.94);
}

/* Completion reads as a settled green, not a celebration that keeps going. */
.dhikr-card.completed .ayah-text,
.dhikr-card.dhikr-completed .ayah-text {
    color: var(--text);
}

.dhikr-card.completed,
.dhikr-card.dhikr-completed {
    animation: none !important;
}

.edit-btn {
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--text-3);
    cursor: pointer;
}

.edit-btn:hover {
    background: var(--surface-hover);
    color: var(--light);
}

/* The search field on the adhkar screen */
#adhkar-search {
    margin-bottom: var(--s-4);
}

#adhkar-tabs {
    gap: var(--s-1);
    border-bottom: 1px solid var(--hairline-soft);
    padding-bottom: var(--s-3);
    margin-bottom: var(--s-5);
}

#adhkar-content {
    display: flex;
    flex-direction: column;
    gap: var(--s-4);
}

/* =========================================================================
   Login — an invitation, not a landing page
   ========================================================================= */

.login-screen {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    min-height: 100dvh;
    padding: var(--s-6) var(--s-5);
    isolation: isolate;
}

.login-glow {
    position: absolute;
    z-index: -1;
    top: 6%;
    left: 50%;
    width: min(34rem, 130%);
    aspect-ratio: 1;
    translate: -50% 0;
    background: radial-gradient(circle, var(--light-glow), transparent 62%);
    filter: blur(18px);
    animation: nafsBreathe 16s var(--ease-in-out) infinite;
}

.login-panel {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 100%;
    max-width: 24rem;
}

.login-mark {
    display: grid;
    place-items: center;
    margin-bottom: var(--s-5);
    color: var(--light);
}

.login-mark svg,
.login-mark .app-logo-icon {
    width: 4.5rem !important;
    height: 4.5rem !important;
}

.login-name {
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(3rem, 14vw, 4rem);
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.02em;
    color: var(--text);
    text-shadow: 0 0 46px rgba(212, 180, 103, 0.24);
}

.login-tagline {
    margin: var(--s-3) 0 0;
    color: var(--text-3);
    font-size: 0.95rem;
}

.login-verse {
    margin: var(--s-7) 0;
    padding: 0;
    border: 0;
}

.login-verse-text {
    margin: 0;
    font-family: var(--font-scripture);
    font-size: clamp(1.3rem, 5.2vw, 1.6rem);
    line-height: 2.1;
    color: var(--text);
    text-wrap: balance;
}

.login-verse-ref {
    display: block;
    margin-top: var(--s-3);
    color: var(--text-3);
    font-size: 0.76rem;
    font-style: normal;
    letter-spacing: 0.05em;
}

.login-btn {
    width: 100%;
    box-shadow: var(--glow);
}

.login-btn img {
    /* The Google mark must keep its own colours, so it sits on a light chip
       rather than being tinted by the button. */
    background: #fff;
    border-radius: 50%;
    padding: 2px;
    box-sizing: content-box;
}

.login-what {
    margin: var(--s-6) 0 0;
    color: var(--text-3);
    font-size: 0.82rem;
    letter-spacing: 0.02em;
}

.login-note {
    margin: var(--s-3) 0 0;
    max-width: 20rem;
    color: var(--text-3);
    font-size: 0.74rem;
    line-height: 1.7;
    opacity: 0.75;
}

/* =========================================================================
   Prayer — the day as one column in time
   ========================================================================= */

.prayer-screen {
    display: flex;
    flex-direction: column;
    max-width: 40rem;
    margin-inline: auto;
}

.prayer-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-4);
    padding: var(--s-2) 0 var(--s-5);
}

.prayer-head-date {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
}

.prayer-head-day {
    color: var(--text);
    font-size: 1.05rem;
    font-weight: 500;
}

.prayer-head-hijri {
    color: var(--text-3);
    font-size: 0.78rem;
}

.prayer-head-actions {
    display: flex;
    gap: var(--s-2);
    flex: none;
}

/* ── Where you stand ─────────────────────────────────────────────────── */
.prayer-standing {
    text-align: center;
    padding: var(--s-5) var(--s-4) var(--s-6);
}

.prayer-standing-count {
    margin: 0;
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: var(--s-2);
    font-family: var(--font-display);
    font-size: clamp(3rem, 12vw, 4rem);
    font-weight: 700;
    line-height: 1;
    color: var(--text);
}

.prayer-standing-of {
    font-family: var(--font-ui);
    font-size: 0.95rem;
    font-weight: 400;
    color: var(--text-3);
}

.prayer-standing-label {
    margin: var(--s-3) 0 var(--s-5);
    color: var(--light);
    font-size: 0.95rem;
}

.prayer-standing-track {
    height: 3px;
    max-width: 15rem;
    margin-inline: auto;
    border-radius: 999px;
    background: var(--progress-bg);
    overflow: hidden;
}

.prayer-standing-fill {
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--light-soft), var(--light));
    transition: width var(--dur-slow) var(--ease);
}

/* ── The timeline ────────────────────────────────────────────────────── */
.prayer-timeline {
    display: flex;
    flex-direction: column;
}

.prayer-row {
    display: grid;
    grid-template-columns: 1.25rem 1fr;
    gap: var(--s-4);
}

.prayer-rail {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 1.15rem;
}

.prayer-rail-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: rgba(236, 229, 214, 0.16);
    flex: none;
    transition: all var(--dur) var(--ease);
}

.prayer-rail-line {
    flex: 1;
    width: 1px;
    margin-top: 4px;
    background: var(--hairline-soft);
}

.prayer-row-done .prayer-rail-dot {
    background: var(--calm);
    box-shadow: 0 0 12px -2px var(--calm);
}

.prayer-row-late .prayer-rail-dot {
    background: var(--warm);
}

.prayer-row-missed .prayer-rail-dot {
    background: transparent;
    box-shadow: inset 0 0 0 1.5px var(--alert);
}

.prayer-row.is-next .prayer-rail-dot {
    width: 11px;
    height: 11px;
    background: var(--light);
    box-shadow: 0 0 0 4px var(--light-glow), 0 0 18px -2px var(--light);
}

.prayer-body {
    padding-bottom: var(--s-4);
    min-width: 0;
}

.prayer-main {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas: "name time" "status time";
    align-items: center;
    width: 100%;
    padding: var(--s-4);
    border: 1px solid var(--hairline-soft);
    border-radius: var(--radius-md);
    background: var(--surface);
    cursor: pointer;
    text-align: start;
}

.prayer-main:hover {
    background: var(--surface-raised);
    border-color: var(--light-edge);
}

.prayer-name {
    grid-area: name;
    font-family: var(--font-display);
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--text);
    line-height: 1.2;
}

.prayer-status {
    grid-area: status;
    color: var(--text-3);
    font-size: 0.78rem;
    margin-top: 0.15rem;
}

.prayer-time {
    grid-area: time;
    color: var(--text-2);
    font-size: 1rem;
    font-weight: 500;
}

.prayer-row-done .prayer-main {
    border-color: rgba(111, 174, 138, 0.24);
}

.prayer-row-done .prayer-status {
    color: var(--calm);
}

.prayer-row-late .prayer-status {
    color: var(--warm);
}

.prayer-row-missed .prayer-status {
    color: var(--alert);
}

/* The prayer ahead of you is the only lit row on the screen. */
.prayer-row.is-next .prayer-main {
    border-color: var(--light-edge-strong);
    background: linear-gradient(180deg, rgba(212, 180, 103, 0.09), transparent 70%), var(--surface);
    box-shadow: var(--glow);
}

.prayer-row.is-next .prayer-time,
.prayer-row.is-next .prayer-status {
    color: var(--light);
}

.prayer-hint {
    margin: var(--s-3) var(--s-1) 0;
    color: var(--text-3);
    font-size: 0.82rem;
    line-height: 1.7;
}

/* ── Details, revealed once a prayer is logged ───────────────────────── */
.prayer-details {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-2);
    margin-top: var(--s-3);
    padding-inline: var(--s-1);
}

.prayer-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.4rem 0.7rem;
    border: 1px solid var(--hairline-soft);
    border-radius: 999px;
    background: transparent;
    color: var(--text-3);
    font-family: var(--font-ui);
    font-size: 0.76rem;
    cursor: pointer;
}

.prayer-chip:hover {
    border-color: var(--light-edge);
    color: var(--text-2);
}

.prayer-chip.is-on {
    border-color: var(--light-edge-strong);
    background: var(--gold-bg);
    color: var(--light);
}

.prayer-focus {
    display: inline-flex;
    border: 1px solid var(--hairline-soft);
    border-radius: 999px;
    overflow: hidden;
}

.prayer-focus-btn {
    padding: 0.4rem 0.65rem;
    border: 0;
    background: transparent;
    color: var(--text-3);
    font-family: var(--font-ui);
    font-size: 0.74rem;
    cursor: pointer;
}

.prayer-focus-btn.is-on {
    background: var(--gold-bg);
    color: var(--light);
}

.prayer-note {
    margin: var(--s-3) var(--s-1) 0;
    padding: var(--s-3);
    border-inline-start: 2px solid var(--light-edge);
    color: var(--text-2);
    font-size: 0.85rem;
    line-height: 1.7;
}

/* ── Nawafl ──────────────────────────────────────────────────────────── */
.prayer-nawafl {
    padding: var(--s-5);
}

.prayer-nafl-list {
    display: flex;
    flex-direction: column;
    gap: var(--s-3);
}

.prayer-add-nafl {
    margin-top: var(--s-4);
    width: 100%;
    border-style: dashed;
}

/* ── The week ────────────────────────────────────────────────────────── */
.prayer-week {
    padding: var(--s-5);
}

.prayer-week-chart {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: var(--s-2);
    align-items: end;
    height: 7rem;
}

.prayer-bar-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
    height: 100%;
}

.prayer-bar-track {
    flex: 1;
    width: 100%;
    max-width: 1.75rem;
    display: flex;
    align-items: flex-end;
    border-radius: var(--radius-sm);
    background: var(--progress-bg);
    overflow: hidden;
}

.prayer-bar-fill {
    width: 100%;
    border-radius: inherit;
    background: linear-gradient(180deg, var(--light), var(--light-soft));
    transition: height var(--dur-slow) var(--ease);
}

.prayer-bar-col.today .prayer-bar-fill {
    background: linear-gradient(180deg, var(--light-core), var(--light));
}

.prayer-bar-count {
    color: var(--text-2);
    font-size: 0.72rem;
    font-variant-numeric: tabular-nums;
}

.prayer-bar-day {
    color: var(--text-3);
    font-size: 0.65rem;
}

.prayer-bar-col.today .prayer-bar-day {
    color: var(--light);
}

.prayer-week-foot {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--s-3);
    margin-top: var(--s-5);
    padding-top: var(--s-4);
    border-top: 1px solid var(--hairline-soft);
}

.prayer-week-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.15rem;
    text-align: center;
}

.prayer-week-stat-value {
    color: var(--text);
    font-size: 1.1rem;
    font-weight: 600;
}

.prayer-week-stat-label {
    color: var(--text-3);
    font-size: 0.68rem;
}

/* ── Keys, kept but quiet ────────────────────────────────────────────── */
.prayer-keys {
    margin: var(--s-6) 0 var(--s-5);
    padding: 0 var(--s-1);
}

.prayer-keys-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: var(--s-2);
    color: var(--text-3);
    font-size: 0.76rem;
}

.prayer-keys-count {
    color: var(--text-2);
}

.prayer-keys-track {
    height: 3px;
    border-radius: 999px;
    background: var(--progress-bg);
    overflow: hidden;
}

.prayer-keys-fill {
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--light-soft), var(--light));
    transition: width var(--dur-slow) var(--ease);
}

/* ── Nawafl rows ─────────────────────────────────────────────────────── */
.nafl-empty {
    margin: 0;
    padding: var(--s-5) 0;
    text-align: center;
    color: var(--text-3);
    font-size: 0.88rem;
}

.nafl-row {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    padding: var(--s-3);
    border: 1px solid var(--hairline-soft);
    border-radius: var(--radius-md);
    transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}

.nafl-row.is-done {
    border-color: rgba(111, 174, 138, 0.24);
    background: var(--calm-bg);
}

.nafl-check {
    flex: none;
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border: 1px solid var(--hairline);
    border-radius: 50%;
    background: transparent;
    color: transparent;
    font-size: 0.7rem;
    cursor: pointer;
}

.nafl-check:hover {
    border-color: var(--light-edge-strong);
    color: var(--light-soft);
}

.nafl-row.is-done .nafl-check {
    border-color: var(--calm);
    background: var(--calm);
    color: var(--ink-800);
}

.nafl-info {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
    flex: 1;
}

.nafl-name {
    color: var(--text);
    font-size: 0.95rem;
}

.nafl-meta,
.nafl-note {
    color: var(--text-3);
    font-size: 0.74rem;
}

.nafl-remove {
    flex: none;
    display: grid;
    place-items: center;
    width: 1.85rem;
    height: 1.85rem;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--text-3);
    cursor: pointer;
}

.nafl-remove:hover {
    background: var(--alert-bg);
    color: var(--alert);
}

/* =========================================================================
   ═══  THE MUṢḤAF  ══════════════════════════════════════════════════════
   A printed leaf, not a web page.

   Everything below serves that single goal: a bounded page with real
   margins, a ruled frame, justified lines, an ornamental cartouche at each
   sūrah opening, rosette āyah markers, and a folio number. The text is
   scaled by script to fill the leaf exactly — a page holds what it holds.
   ========================================================================= */

.mushaf {
    --paper: #f3ead5;
    --paper-edge: #e6d9bd;
    --ink: #24170a;
    --rule: #b08d4a;
    --rule-soft: rgba(176, 141, 74, 0.45);
    --gild: #a9822f;

    display: flex;
    flex-direction: column;
    gap: var(--s-3);
    max-width: 46rem;
    margin-inline: auto;
}

/* ── Chrome: present, but never louder than the page ─────────────────── */
.mushaf-chrome {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-2);
    padding: var(--s-2) var(--s-1);
}

.mushaf-chrome-tools {
    display: flex;
    gap: var(--s-1);
}

.mushaf-chrome-btn {
    display: grid;
    place-items: center;
    width: 2.3rem;
    height: 2.3rem;
    border: 1px solid transparent;
    border-radius: 50%;
    background: transparent;
    color: var(--text-3);
    font-size: 0.9rem;
    cursor: pointer;
}

.mushaf-chrome-btn:hover {
    border-color: var(--light-edge);
    background: var(--surface-hover);
    color: var(--light);
}

.mushaf-locator {
    display: flex;
    align-items: baseline;
    gap: 0.35rem;
    color: var(--text-3);
    font-size: 0.78rem;
}

.mushaf-locator-input {
    width: 3.4rem;
    padding: 0.25rem 0.4rem !important;
    border: 1px solid var(--hairline) !important;
    border-radius: var(--radius-sm) !important;
    background: transparent !important;
    color: var(--text) !important;
    font-size: 0.9rem !important;
    text-align: center;
    font-variant-numeric: tabular-nums;
    -moz-appearance: textfield;
}

.mushaf-locator-input::-webkit-outer-spin-button,
.mushaf-locator-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* ── The leaf ────────────────────────────────────────────────────────── */
.mushaf-leaf {
    position: relative;
    display: flex;
    flex-direction: column;
    /* On a phone the leaf takes the screen, the way a muṣḥaf fills your
       hands; the page proportion is only imposed once there is room for it.
       The subtraction accounts for the app header, the reader chrome and the
       bottom navigation. */
    /* Fill the gap between the reader chrome and the bottom navigation.
       The subtraction covers the app header, the chrome row, the gaps and
       the nav bar; it is expressed in rem so it tracks the reader's chosen
       app font size. */
    height: calc(100dvh - var(--mushaf-reserved, 16.5rem));
    min-height: 22rem;
    padding: clamp(0.75rem, 3vw, 2rem);
    border-radius: 4px;
    background:
        /* faint fibres, so the ground is paper rather than a flat fill */
        radial-gradient(circle at 18% 22%, rgba(150, 120, 70, 0.05) 0 1px, transparent 1px),
        radial-gradient(circle at 72% 61%, rgba(150, 120, 70, 0.045) 0 1px, transparent 1px),
        radial-gradient(circle at 41% 84%, rgba(150, 120, 70, 0.04) 0 1px, transparent 1px),
        linear-gradient(168deg, var(--paper) 0%, #efe4cb 46%, var(--paper-edge) 100%);
    background-size: 140px 140px, 190px 190px, 110px 110px, auto;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.5) inset,
        0 18px 44px -22px rgba(0, 0, 0, 0.65),
        0 2px 10px -4px rgba(0, 0, 0, 0.35);
    overflow: hidden;
}

/* The ruled border every printed muṣḥaf carries. Two lines, gilt, with a
   hairline gap — drawn with borders so it scales cleanly. */
.mushaf-frame {
    position: absolute;
    inset: clamp(0.35rem, 1.5vw, 0.85rem);
    border: 1.5px solid var(--rule);
    border-radius: 2px;
    pointer-events: none;
}

.mushaf-frame::before {
    content: "";
    position: absolute;
    inset: 3.5px;
    border: 0.75px solid var(--rule-soft);
    border-radius: 1px;
}

/* ── Running head and folio ──────────────────────────────────────────── */
.mushaf-running-head,
.mushaf-foot {
    position: relative;
    z-index: 1;
    flex: none;
    display: flex;
    align-items: center;
    color: var(--gild);
    font-family: var(--font-ui);
    font-size: 0.66rem;
    letter-spacing: 0.02em;
}

.mushaf-running-head {
    justify-content: space-between;
    padding: 0 clamp(0.35rem, 1.5vw, 1rem) var(--s-2);
    opacity: 0.8;
}

.mushaf-foot {
    justify-content: center;
    padding-top: var(--s-3);
}

/* The folio sits in a small medallion, as it does on the printed page. */
.mushaf-folio {
    display: grid;
    place-items: center;
    min-width: 2rem;
    height: 1.6rem;
    padding: 0 0.5rem;
    border: 1px solid var(--rule-soft);
    border-radius: 999px;
    color: var(--gild);
    font-size: 0.72rem;
    font-variant-numeric: tabular-nums;
}

/* ── The text block ──────────────────────────────────────────────────── */
.mushaf-text {
    position: relative;
    z-index: 1;
    flex: 1;
    min-height: 0;
    overflow: hidden;
    padding: 0 clamp(0.35rem, 1.5vw, 1rem);

    font-family: 'Amiri Quran', 'Amiri', 'Scheherazade New', serif;
    color: var(--ink);
    /* Justified is the defining look of a muṣḥaf page: every line reaches
       both margins. Ragged right is what makes web Qur'an text read as a
       website. */
    text-align: justify;
    text-align-last: center;
    text-justify: inter-word;
    /* Tight leading is what lets a full page of scripture sit on one screen
       at a readable size — loose leading is what forces the type down to
       something you have to squint at. */
    line-height: 1.95;
    word-spacing: 0.02em;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    transition: font-size var(--dur) var(--ease);
}

/* A short page (end of a sūrah) should sit centred rather than stretch its
   few lines across the full width. */
.mushaf-text.is-sparse {
    text-align: center;
    align-content: center;
}

.mushaf-ayah {
    /* No break between the last word and its rosette. */
    unicode-bidi: isolate;
}

/* ── Āyah rosette ────────────────────────────────────────────────────── */
.mushaf-rosette {
    position: relative;
    display: inline-grid;
    place-items: center;
    width: 1.62em;
    height: 1.62em;
    margin: 0 0.12em;
    vertical-align: -0.42em;
    line-height: 1;
}

.mushaf-rosette svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.mushaf-rosette-petals {
    fill: none;
    stroke: var(--gild);
    stroke-width: 1.4;
    opacity: 0.62;
}

.mushaf-rosette-core {
    fill: none;
    stroke: var(--gild);
    stroke-width: 1.1;
    opacity: 0.82;
}

.mushaf-rosette-num {
    position: relative;
    font-family: var(--font-ui);
    font-size: 0.42em;
    font-weight: 500;
    color: var(--gild);
    letter-spacing: -0.02em;
}

/* ── Sūrah cartouche ─────────────────────────────────────────────────── */
.mushaf-cartouche {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.9em;
    margin: 0.7em auto 0.55em;
    padding: 0.5em 1.2em;
    min-height: 3.1em;
}

.mushaf-cartouche-frame {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.mushaf-cartouche-frame rect {
    fill: rgba(176, 141, 74, 0.07);
    stroke: var(--rule);
    stroke-width: 1.4;
    vector-effect: non-scaling-stroke;
}

.mushaf-cartouche-frame .mushaf-cartouche-inner {
    fill: none;
    stroke: var(--rule-soft);
    stroke-width: 0.8;
}

.mushaf-cartouche-side {
    position: relative;
    color: var(--gild);
    font-size: 0.95rem;
    opacity: 0.7;
}

.mushaf-cartouche-text {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.1em;
    line-height: 1.25;
}

.mushaf-cartouche-name {
    font-family: 'Amiri', serif;
    font-weight: 700;
    font-size: clamp(0.95rem, 4vw, 1.2rem);
    color: var(--ink);
    line-height: 1.3;
}

.mushaf-cartouche-meta {
    font-family: var(--font-ui);
    /* Fixed in rem: this label must stay readable whatever size the body
       text is scaled to. */
    font-size: 0.6rem;
    color: var(--gild);
    letter-spacing: 0.04em;
    opacity: 0.9;
}

/* ── Basmala ─────────────────────────────────────────────────────────── */
.mushaf-basmala {
    margin: 0.45em 0 0.55em;
    text-align: center;
    font-size: 0.95em;
    color: var(--ink);
    letter-spacing: 0.01em;
}

/* ── Turning the page ────────────────────────────────────────────────── */
.mushaf-turn {
    position: absolute;
    top: 12%;
    bottom: 12%;
    width: 22%;
    border: 0;
    background: transparent;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.mushaf-turn-prev {
    right: 0;
}

.mushaf-turn-next {
    left: 0;
}

.mushaf-turn:focus-visible {
    outline: 2px solid var(--gild);
    outline-offset: -6px;
}

/* ── Loading ─────────────────────────────────────────────────────────── */
.mushaf-loading {
    display: grid;
    place-items: center;
    height: 100%;
}

.mushaf-loading-dot {
    width: 0.6rem;
    height: 0.6rem;
    border-radius: 50%;
    background: var(--gild);
    opacity: 0.5;
    animation: mushafPulse 1.4s var(--ease-in-out) infinite;
}

@keyframes mushafPulse {

    0%,
    100% {
        opacity: 0.25;
        transform: scale(0.85);
    }

    50% {
        opacity: 0.7;
        transform: scale(1.1);
    }
}

.mushaf-error {
    display: grid;
    place-items: center;
    height: 100%;
    padding: var(--s-5);
    text-align: center;
    color: #8a5a2b;
    font-family: var(--font-ui);
    font-size: 0.9rem;
}

/* =========================================================================
   Night reading — the same leaf, tanned down rather than inverted.
   Pure white-on-black is harsh for long reading; a warm dark ground keeps
   the page feeling like paper seen by lamplight.
   ========================================================================= */
.mushaf-night-mode .mushaf {
    --paper: #16130d;
    --paper-edge: #100e09;
    --ink: #e8dcc0;
    --rule: #6d5828;
    --rule-soft: rgba(109, 88, 40, 0.55);
    --gild: #b99a56;
}

.mushaf-night-mode .mushaf-leaf {
    background:
        radial-gradient(circle at 18% 22%, rgba(255, 235, 190, 0.02) 0 1px, transparent 1px),
        radial-gradient(circle at 72% 61%, rgba(255, 235, 190, 0.018) 0 1px, transparent 1px),
        linear-gradient(168deg, var(--paper) 0%, #12100b 55%, var(--paper-edge) 100%);
    background-size: 140px 140px, 190px 190px, auto;
    box-shadow:
        0 1px 0 rgba(255, 240, 200, 0.05) inset,
        0 18px 44px -22px rgba(0, 0, 0, 0.9);
}

.mushaf-night-mode .mushaf-cartouche-frame rect {
    fill: rgba(185, 154, 86, 0.06);
}

/* =========================================================================
   Full-screen reading — the page and nothing else.
   ========================================================================= */
.mushaf-fullscreen .mushaf-leaf {
    aspect-ratio: auto;
    max-height: none;
    height: calc(100dvh - 5.5rem);
    border-radius: 0;
}

.mushaf-fullscreen .mushaf {
    max-width: none;
}

@media (min-width: 760px) {
    .mushaf-leaf {
        /* There is room for a page shape here, so take it. */
        aspect-ratio: 3 / 4.2;
        height: auto;
        max-height: min(80vh, 48rem);
        padding: 2.4rem;
    }

    .mushaf-text {
        line-height: 2.1;
    }
}

/* When even the smallest readable size will not fit, the leaf scrolls.
   Hiding part of an āyah is never an acceptable outcome. */
.mushaf-text.is-overflowing {
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--rule-soft) transparent;
    -webkit-overflow-scrolling: touch;
}

.mushaf-text.is-overflowing::-webkit-scrollbar {
    width: 3px;
}

.mushaf-text.is-overflowing::-webkit-scrollbar-thumb {
    background: var(--rule-soft);
    border-radius: 999px;
}

/* A scrolling leaf should not also swallow the swipe, so the tap zones step
   aside and navigation stays on the chrome buttons. */
.mushaf-text.is-overflowing~.mushaf-turn {
    display: none;
}

/* =========================================================================
   Qur'an — the khatma as a journey
   Where you are in the muṣḥaf, told once and told well, instead of six
   equal stat boxes.
   ========================================================================= */

.quran-screen {
    display: flex;
    flex-direction: column;
    max-width: 42rem;
    margin-inline: auto;
}

/* ── The journey ─────────────────────────────────────────────────────── */
.quran-journey {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: var(--s-6) var(--s-4) var(--s-5);
}

.quran-journey-label {
    margin: 0 0 var(--s-2);
    color: var(--light-soft);
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0.14em;
}

.quran-journey-place {
    margin: 0;
    display: flex;
    align-items: baseline;
    gap: var(--s-2);
}

.quran-journey-page {
    font-family: var(--font-display);
    font-size: clamp(2.8rem, 12vw, 3.8rem);
    font-weight: 700;
    line-height: 1;
    color: var(--text);
    text-shadow: 0 0 38px rgba(212, 180, 103, 0.2);
}

.quran-journey-of {
    color: var(--text-3);
    font-size: 0.88rem;
}

/* Thirty marks — the ajzāʾ. Lit behind you, half-lit where you stand. */
.quran-ribbon {
    display: flex;
    gap: 2px;
    width: 100%;
    max-width: 22rem;
    margin: var(--s-5) 0 var(--s-4);
}

.quran-juz-mark {
    flex: 1;
    height: 5px;
    border-radius: 999px;
    background: var(--progress-bg);
    transition: background-color var(--dur) var(--ease);
}

.quran-juz-mark.is-done {
    background: var(--light-soft);
}

.quran-juz-mark.is-current {
    background: var(--light);
    box-shadow: 0 0 10px -2px var(--light);
}

.quran-journey-meta {
    margin: 0 0 var(--s-5);
    color: var(--text-2);
    font-size: 0.88rem;
}

.quran-journey-sep {
    margin-inline: 0.45rem;
    opacity: 0.4;
}

.quran-continue {
    max-width: 22rem;
    box-shadow: var(--glow);
}

.quran-continue span {
    display: inline-flex;
    color: var(--light-core);
}

.quran-journey-note {
    margin: var(--s-4) 0 0;
    max-width: 24rem;
    color: var(--text-3);
    font-size: 0.8rem;
    line-height: 1.7;
}

/* ── Today's portion ─────────────────────────────────────────────────── */
.quran-today {
    padding: var(--s-5);
}

.quran-today-head {
    display: flex;
    align-items: baseline;
    gap: var(--s-2);
    margin-bottom: var(--s-3);
}

.quran-today-count {
    color: var(--text);
    font-size: 1.9rem;
    font-weight: 600;
    line-height: 1;
}

.quran-today-target {
    color: var(--text-3);
    font-size: 1rem;
    font-weight: 400;
}

.quran-today-label {
    color: var(--text-3);
    font-size: 0.85rem;
}

.quran-today-track {
    height: 4px;
    border-radius: 999px;
    background: var(--progress-bg);
    overflow: hidden;
}

.quran-today-fill {
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--light-soft), var(--light));
    transition: width var(--dur-slow) var(--ease);
}

.quran-week {
    margin-top: var(--s-5);
}

.quran-week-note {
    margin: var(--s-3) 0 0;
    color: var(--text-3);
    font-size: 0.76rem;
    text-align: center;
}

.quran-today-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--s-2);
    margin-top: var(--s-5);
    padding-top: var(--s-4);
    border-top: 1px solid var(--hairline-soft);
}

/* ── Browsing ────────────────────────────────────────────────────────── */
.quran-browse,
.quran-listen {
    padding: var(--s-4);
}

.quran-modes {
    display: flex;
    gap: var(--s-1);
    margin-bottom: var(--s-4);
}

.read-mode-btn {
    padding: var(--s-2) var(--s-4);
    border: 1px solid transparent;
    border-radius: 999px;
    background: transparent;
    color: var(--text-3);
    font-family: var(--font-ui);
    font-size: 0.86rem;
    cursor: pointer;
    transition: all var(--dur-fast) var(--ease);
}

.read-mode-btn:hover {
    color: var(--text);
}

.read-mode-btn.active {
    border-color: var(--light-edge);
    background: var(--gold-bg);
    color: var(--light);
}

.quran-filter {
    margin-bottom: var(--s-3);
}

/* A table of contents, not a shop — no price on every line. */
.quran-surah-list {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 26rem;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--hairline) transparent;
}

.quran-surah-btn {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    width: 100%;
    padding: var(--s-3) var(--s-2);
    border: 0;
    border-bottom: 1px solid var(--hairline-soft);
    background: transparent;
    cursor: pointer;
    text-align: start;
}

.quran-surah-btn:hover {
    background: var(--surface-hover);
}

/* A plain medallion for the sūrah number — legible beats clever. */
.quran-surah-num {
    flex: none;
    display: grid;
    place-items: center;
    width: 2.1rem;
    height: 2.1rem;
    border: 1px solid var(--light-edge);
    border-radius: 50%;
    color: var(--light-soft);
    font-family: var(--font-ui);
    font-size: 0.72rem;
    font-variant-numeric: tabular-nums;
}

.quran-surah-body {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
}

.quran-surah-name {
    font-family: 'Amiri', serif;
    font-size: 1.12rem;
    font-weight: 700;
    color: var(--text);
    line-height: 1.4;
}

.quran-surah-pages {
    color: var(--text-3);
    font-size: 0.72rem;
}

.quran-empty {
    padding: var(--s-5) 0;
    text-align: center;
    color: var(--text-3);
    font-size: 0.86rem;
}

/* ── The whole muṣḥaf as a grid of pages ─────────────────────────────── */
.quran-page-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(2.6rem, 1fr));
    gap: var(--s-1);
    max-height: 26rem;
    overflow-y: auto;
    padding: var(--s-1);
    scrollbar-width: thin;
    scrollbar-color: var(--hairline) transparent;
}

.quran-page-cell {
    padding: var(--s-2) 0;
    border: 1px solid var(--hairline-soft);
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-3);
    font-family: var(--font-ui);
    font-size: 0.72rem;
    font-variant-numeric: tabular-nums;
    cursor: pointer;
    transition: all var(--dur-fast) var(--ease);
}

.quran-page-cell:hover {
    border-color: var(--light-edge);
    color: var(--text);
}

.quran-page-cell.is-read {
    border-color: rgba(111, 174, 138, 0.3);
    background: var(--calm-bg);
    color: var(--calm);
}

.quran-page-cell.is-current {
    border-color: var(--light);
    color: var(--light);
    box-shadow: 0 0 0 1px var(--light-edge);
}

/* ── Listening ───────────────────────────────────────────────────────── */
.quran-audio-list {
    display: flex;
    flex-direction: column;
    gap: var(--s-2);
    max-height: 24rem;
    overflow-y: auto;
    margin-top: var(--s-3);
    scrollbar-width: thin;
    scrollbar-color: var(--hairline) transparent;
}