.home-container {
            max-width: 1020px;
            margin: 0 auto;
            position: relative;
        }

        /* Hero -------------------------------------------------------------
           Reworked from a full-bleed centred slab into a compact, start-aligned
           panel. The old version stacked a badge, a 98px icon tile, a 46px
           title, a subtitle, a description, three metric boxes and two CTAs —
           it filled the entire first screen before any actual content. */
        .hero-section {
            /* Hero-local roles. The global --on-primary cannot be reused here:
               in dark mode it is near-black, which is correct on a bright
               accent button but wrong on this deep panel. */
            --hero-fg: var(--text-color);
            --hero-fg-muted: var(--text-secondary);
            --hero-line: var(--border-color);
            --hero-cta-bg: var(--primary-color);
            --hero-cta-fg: var(--on-primary);

            position: relative;
            overflow: hidden;
            text-align: start;
            padding: var(--space-5);
            border-radius: var(--radius-lg);
            color: var(--hero-fg);
            margin-bottom: var(--space-6);
            /* Paper, not green. A solid accent panel here dominated the whole
               first screen and set the tone for the entire app. */
            border: 1px solid var(--border-color);
            border-inline-start: 3px solid var(--primary-color);
            background: var(--surface-1);
            box-shadow: none;
        }

        /* A bright green panel is glaring against a near-black page, so dark
           mode gets a deep muted green with light text instead. */
        [data-theme="dark"] .hero-section {
            border-color: var(--border-color);
            border-inline-start-color: var(--primary-color);
            background: var(--surface-1);
            box-shadow: none;
        }

        /* A single soft light source instead of the diagonal hatch pattern. */
        .hero-section::before {
            content: '';
            position: absolute;
            inset-inline-end: -60px;
            inset-block-start: -90px;
            width: 260px;
            height: 260px;
            border-radius: var(--radius-full);
            background: none;
            pointer-events: none;
        }

        .hero-section::after {
            content: none;
        }

        .hero-badge {
            display: inline-flex;
            align-items: center;
            gap: var(--space-2);
            border-radius: var(--radius-full);
            border: 1px solid var(--border-color);
            background: var(--surface-2);
            color: var(--text-secondary);
            padding: 6px var(--space-3);
            font-size: var(--text-xs);
            font-weight: var(--weight-semibold);
            margin-bottom: var(--space-4);
            backdrop-filter: blur(8px);
            position: relative;
            z-index: 1;
            max-width: 100%;
            width: fit-content;
            line-height: 1.5;
        }

        .hero-badge i {
            flex: 0 0 auto;
        }

        /* Icon and title now sit on one line, which removes ~120px of height. */
        .hero-icon-shell {
            width: 52px;
            height: 52px;
            flex-shrink: 0;
            border-radius: var(--radius-md);
            display: flex;
            align-items: center;
            justify-content: center;
            background: rgba(var(--primary-rgb), 0.12);
            border: none;
            color: var(--primary-color);
            position: relative;
            z-index: 1;
        }

        .hero-icon {
            font-size: 1.6rem;
            line-height: 1;
            display: grid;
            place-items: center;
        }

        .hero-heading-row {
            display: flex;
            align-items: center;
            gap: var(--space-4);
            margin-bottom: var(--space-5);
            position: relative;
            z-index: 1;
        }

        .hero-title {
            font-size: var(--text-3xl);
            font-weight: var(--weight-bold);
            letter-spacing: -0.02em;
            line-height: var(--leading-tight);
            margin-bottom: 2px;
            position: relative;
            z-index: 1;
        }

        .hero-subtitle {
            font-size: var(--text-base);
            color: var(--hero-fg-muted);
            opacity: 1;
            margin-bottom: 0;
            position: relative;
            z-index: 1;
        }

        .hero-description {
            font-size: var(--text-base);
            color: var(--hero-fg-muted);
            opacity: 1;
            max-width: 54ch;
            margin: 0 0 var(--space-5);
            line-height: var(--leading-normal);
            position: relative;
            z-index: 1;
        }

        /* Metrics read as an inline stat strip rather than three boxed cards. */
        .hero-metrics {
            display: flex;
            align-items: center;
            gap: var(--space-5);
            margin: 0 0 var(--space-5);
            padding-block-end: var(--space-5);
            border-block-end: 1px solid var(--hero-line);
            position: relative;
            z-index: 1;
        }

        .hero-metric {
            border: none;
            background: none;
            padding: 0;
            backdrop-filter: none;
        }

        .hero-metric-value {
            display: block;
            font-size: var(--text-xl);
            font-weight: var(--weight-bold);
            line-height: 1.1;
            margin-bottom: 2px;
            font-feature-settings: "tnum";
        }

        .hero-metric-label {
            font-size: var(--text-xs);
            color: var(--hero-fg-muted);
            opacity: 1;
        }

        .hero-cta-row {
            display: flex;
            justify-content: flex-start;
            gap: var(--space-3);
            flex-wrap: wrap;
            position: relative;
            z-index: 1;
        }

        /* Primary CTA is solid so it carries clear visual priority; the
           secondary stays translucent. Both meet the 44px tap target. */
        .hero-cta {
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: var(--space-2);
            border-radius: var(--radius-sm);
            border: 1px solid transparent;
            min-height: var(--tap-target);
            padding-block: var(--space-2);
            padding-inline: var(--space-5);
            /* Fallbacks matter: these locals used to be defined on
               .hero-section, which no longer exists on the home page. */
            background: var(--hero-cta-bg, var(--primary-color));
            color: var(--hero-cta-fg, var(--on-primary));
            font-size: var(--text-base);
            font-weight: var(--weight-semibold);
            transition:
                background-color var(--transition-fast),
                border-color var(--transition-fast),
                box-shadow var(--transition-fast);
        }

        .hero-cta.secondary,
        .hero-cta:nth-child(2) {
            background: var(--surface-2);
            border-color: var(--border-color);
            color: var(--text-color);
        }

        .hero-cta:hover {
            background: var(--primary-light);
        }

        .hero-cta.secondary:hover {
            background: var(--surface-3);
        }

        /* ======================================================================
           HOME DASHBOARD — everything below the hero.

           Previously each block invented its own card: five radii
           (10/12/16/18/22), three background sources (--card-bg, four
           different primary gradients, --bg-color), a 4px and a 5px spacing
           ramp side by side, and body copy at 11-13px. It now uses one card
           language:

               background  var(--glass-bg) / var(--surface-1)
               border      1px solid var(--border-color)
               radius      var(--radius-lg)
               padding     var(--space-5)
               elevation   var(--elev-2)   (hover --elev-4, interactive only)

           and one vertical rhythm (--space-6 between sections), so the page
           scans as a single dashboard rather than a stack of unrelated widgets.
           ====================================================================== */

        /* ---- Shared section shell --------------------------------------------
           Applied per-selector rather than via a new class, because the markup
           and class names are fixed. */

        .smart-dashboard-section,
        .habit-dashboard-section {
            margin-bottom: var(--space-6);
            padding: var(--space-5);
            border: 1px solid var(--border-color);
            border-radius: var(--radius-lg);
            /* Was a primary-tinted gradient that fought with every card sitting
               on top of it; the section is now a plain surface. */
            background: var(--surface-1);
            box-shadow: var(--elev-2);
        }

        [data-theme="dark"] .smart-dashboard-section,
        [data-theme="dark"] .habit-dashboard-section {
            background: var(--surface-1);
        }

        .dashboard-header,
        .habit-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: var(--space-3);
            margin-bottom: var(--space-5);
            flex-wrap: wrap;
        }

        /* ---- Section heading -------------------------------------------------
           One treatment shared by every section title on the page, so the
           headings form a real level in the hierarchy instead of each block
           picking its own size (22/20/19/18px) and colour. */

        .dashboard-title,
        .habit-title,
        .khatma-core-feature-title,
        .khatma-title,
        .mood-title,
        .quick-actions-title,
        .home-clean-actions h2 {
            font-size: var(--text-xl);
            font-weight: var(--weight-bold);
            line-height: var(--leading-tight);
            letter-spacing: -0.01em;
            color: var(--text-color);
            display: flex;
            align-items: center;
            gap: var(--space-3);
            margin-block: 0 var(--space-2);
        }

        .dashboard-title i,
        .habit-title i,
        .khatma-core-feature-title i,
        .khatma-title i,
        .mood-title i,
        .quick-actions-title i {
            color: var(--primary-color);
            font-size: 1.1em;
            flex-shrink: 0;
        }

        .dashboard-title,
        .habit-title {
            margin-bottom: 0;
        }

        /* Section-level "see all" pill. */
        .dashboard-link {
            text-decoration: none;
            font-size: var(--text-sm);
            font-weight: var(--weight-bold);
            color: var(--primary-color);
            background: rgba(var(--primary-rgb), 0.1);
            border: 1px solid rgba(var(--primary-rgb), 0.28);
            border-radius: var(--radius-full);
            padding-block: var(--space-2);
            padding-inline: var(--space-4);
            display: inline-flex;
            align-items: center;
            gap: var(--space-2);
            white-space: nowrap;
            transition:
                background-color var(--transition-fast),
                border-color var(--transition-fast),
                transform var(--transition-fast);
        }

        .dashboard-link:hover {
            background: rgba(var(--primary-rgb), 0.18);
            border-color: rgba(var(--primary-rgb), 0.45);
            transform: translateY(-2px);
        }

        /* ---- Stat cards -------------------------------------------------------
           Tinted icon tile, large value, muted label — the standard modern
           dashboard tile. The old version buried the value under a 160px
           decorative blob and a triple-stop gradient. */

        .dashboard-grid {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: var(--space-3);
        }

        .dashboard-card {
            position: relative;
            overflow: hidden;
            border: 1px solid var(--border-color);
            border-radius: var(--radius-lg);
            background: var(--surface-2);
            text-decoration: none;
            color: inherit;
            padding: var(--space-4);
            min-height: 128px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            box-shadow: none;
            transition:
                transform var(--transition-fast),
                box-shadow var(--transition-fast),
                border-color var(--transition-fast),
                background-color var(--transition-fast);
            text-align: start;
        }

        .dashboard-card::before {
            content: none;
        }

        button.dashboard-card {
            width: 100%;
            cursor: pointer;
            font-family: inherit;
            border: 1px solid var(--border-color);
        }

        /* Most of these cards are static <div>s, so the base hover only firms
           up the border. Only the real <button> lifts. */
        .dashboard-card:hover {
            border-color: var(--border-strong);
        }

        button.dashboard-card:hover {
            transform: translateY(-2px);
            border-color: rgba(var(--primary-rgb), 0.45);
            box-shadow: var(--elev-4);
        }

        @media (hover: none) {
            button.dashboard-card:hover {
                transform: none;
                box-shadow: none;
                border-color: var(--border-color);
            }
        }

        .dashboard-card-head {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: var(--space-2);
            margin-bottom: var(--space-4);
            position: relative;
            z-index: var(--z-base);
        }

        .dashboard-card-label {
            font-size: var(--text-sm);
            color: var(--text-secondary);
            font-weight: var(--weight-semibold);
            line-height: var(--leading-snug);
        }

        .dashboard-card-icon {
            width: 40px;
            height: 40px;
            flex-shrink: 0;
            border-radius: var(--radius-sm);
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background: rgba(var(--primary-rgb), 0.12);
            color: var(--primary-color);
            font-size: 1.0625rem;
            border: 1px solid rgba(var(--primary-rgb), 0.2);
        }

        .dashboard-card-value {
            font-size: var(--text-lg);
            font-weight: var(--weight-bold);
            color: var(--text-color);
            line-height: var(--leading-tight);
            letter-spacing: -0.01em;
            position: relative;
            z-index: var(--z-base);
        }

        .dashboard-card-meta {
            font-size: var(--text-sm);
            color: var(--text-muted);
            line-height: var(--leading-snug);
            margin-top: var(--space-1);
            position: relative;
            z-index: var(--z-base);
        }

        /* ---- Habit streak ------------------------------------------------------ */

        .habit-streak-card {
            border-radius: var(--radius-lg);
            padding: var(--space-5);
            margin-bottom: var(--space-4);
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: var(--space-4);
            border: 1px solid rgba(var(--primary-rgb), 0.22);
            background: rgba(var(--primary-rgb), 0.07);
        }

        .habit-streak-main {
            display: flex;
            align-items: flex-end;
            gap: var(--space-3);
        }

        .habit-streak-number {
            font-size: var(--text-4xl);
            line-height: 1;
            font-weight: var(--weight-bold);
            color: var(--primary-color);
            letter-spacing: -0.02em;
            font-feature-settings: "tnum";
        }

        .habit-streak-label {
            font-size: var(--text-base);
            color: var(--text-secondary);
            margin-bottom: var(--space-1);
            font-weight: var(--weight-semibold);
        }

        .habit-streak-meta {
            text-align: end;
            font-size: var(--text-base);
            color: var(--text-secondary);
            line-height: var(--leading-normal);
        }

        .habit-rings-grid {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: var(--space-3);
        }

        .habit-ring-card {
            border-radius: var(--radius-lg);
            padding: var(--space-4);
            text-align: center;
            border: 1px solid var(--border-color);
            background: var(--surface-2);
        }

        .habit-ring {
            --ring-percent: 0;
            width: 86px;
            height: 86px;
            margin: 0 auto var(--space-3);
            border-radius: 50%;
            background: conic-gradient(var(--primary-color) calc(var(--ring-percent) * 1%), rgba(var(--primary-rgb), 0.18) 0%);
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: var(--weight-bold);
            color: var(--text-color);
        }

        .habit-ring::after {
            content: '';
            position: absolute;
            inset: 9px;
            border-radius: 50%;
            background: var(--surface-2);
            border: 1px solid var(--border-color);
        }

        .habit-ring span {
            position: relative;
            z-index: var(--z-base);
            font-size: var(--text-base);
            font-weight: var(--weight-bold);
            font-feature-settings: "tnum";
        }

        .habit-ring-name {
            font-size: var(--text-base);
            font-weight: var(--weight-semibold);
            color: var(--text-color);
            margin-bottom: 2px;
        }

        .habit-ring-meta {
            font-size: var(--text-sm);
            color: var(--text-secondary);
        }

        /* ---- Khatma feature panel ---------------------------------------------- */

        .khatma-core-feature {
            margin-bottom: var(--space-6);
            border-radius: var(--radius-lg);
            border: 1px solid rgba(var(--primary-rgb), 0.24);
            background:
                radial-gradient(560px 200px at 100% 0%, rgba(var(--primary-rgb), 0.14), transparent 65%),
                var(--surface-1);
            padding: var(--space-5);
            box-shadow: var(--elev-2);
        }

        .khatma-core-feature-head {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: var(--space-3);
            margin-bottom: var(--space-3);
            flex-wrap: wrap;
        }

        .khatma-core-feature-title {
            display: inline-flex;
            align-items: center;
            gap: var(--space-3);
            margin-bottom: 0;
        }

        .khatma-core-feature-badge {
            border-radius: var(--radius-full);
            background: rgba(var(--primary-rgb), 0.14);
            border: 1px solid rgba(var(--primary-rgb), 0.3);
            color: var(--primary-color);
            font-size: var(--text-xs);
            font-weight: var(--weight-bold);
            padding-block: var(--space-1);
            padding-inline: var(--space-3);
            white-space: nowrap;
        }

        .khatma-core-feature-text {
            font-size: var(--text-base);
            color: var(--text-secondary);
            line-height: var(--leading-relaxed);
            max-width: var(--measure);
            margin-block: 0 var(--space-5);
        }

        .khatma-core-feature-link {
            display: inline-flex;
            align-items: center;
            gap: var(--space-2);
            text-decoration: none;
            border-radius: var(--radius-sm);
            border: 1px solid transparent;
            background: var(--primary-color);
            color: var(--on-primary);
            font-size: var(--text-base);
            font-weight: var(--weight-semibold);
            min-height: var(--tap-target);
            padding-block: var(--space-2);
            padding-inline: var(--space-5);
            transition:
                transform var(--transition-fast),
                background-color var(--transition-fast),
                box-shadow var(--transition-fast);
        }

        .khatma-core-feature-link:hover {
            transform: translateY(-2px);
            background: var(--primary-light);
            box-shadow: var(--elev-3);
        }

        /* ---- Feature grid (rendered on sibling pages that share this sheet) ----- */

        .features-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: var(--space-4);
            margin-bottom: var(--space-8);
        }

        .feature-card {
            background: var(--surface-1);
            border: 1px solid var(--border-color);
            border-radius: var(--radius-lg);
            padding: var(--space-6);
            text-align: center;
            cursor: pointer;
            box-shadow: var(--elev-2);
            transition:
                transform var(--transition-fast),
                box-shadow var(--transition-fast),
                border-color var(--transition-fast);
            text-decoration: none;
            color: var(--text-color);
            -webkit-tap-highlight-color: transparent;
        }

        .feature-card:hover {
            transform: translateY(-2px);
            box-shadow: var(--elev-4);
            border-color: rgba(var(--primary-rgb), 0.45);
        }

        .feature-card:active {
            transform: translateY(0);
            box-shadow: var(--elev-1);
        }

        .feature-icon {
            font-size: 2.5rem;
            line-height: 1;
            color: var(--primary-color);
            margin-bottom: var(--space-4);
        }

        .feature-title {
            font-size: var(--text-lg);
            color: var(--text-color);
            font-weight: var(--weight-semibold);
            margin-bottom: var(--space-2);
        }

        .feature-description {
            font-size: var(--text-base);
            color: var(--text-secondary);
            line-height: var(--leading-normal);
        }

        /* ---- Stats ------------------------------------------------------------- */

        .stats-section {
            background: var(--surface-1);
            border: 1px solid var(--border-color);
            border-radius: var(--radius-lg);
            padding: var(--space-6);
            margin-bottom: var(--space-6);
            box-shadow: var(--elev-2);
        }

        .stats-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
            gap: var(--space-5);
            text-align: center;
        }

        .stat-item {
            padding: var(--space-4);
            border-radius: var(--radius-lg);
            background: var(--surface-2);
            border: 1px solid var(--border-color);
        }

        .stat-number {
            font-size: var(--text-3xl);
            font-weight: var(--weight-bold);
            line-height: var(--leading-tight);
            letter-spacing: -0.02em;
            font-feature-settings: "tnum";
            color: var(--primary-color);
            margin-bottom: var(--space-1);
        }

        .stat-label {
            font-size: var(--text-base);
            color: var(--text-secondary);
        }

        /* ---- Quick actions ------------------------------------------------------ */

        .quick-actions {
            background: var(--surface-1);
            border: 1px solid var(--border-color);
            border-radius: var(--radius-lg);
            padding: var(--space-5);
            box-shadow: var(--elev-2);
        }

        .quick-actions-title {
            justify-content: center;
            margin-bottom: var(--space-4);
        }

        .home-clean-actions {
            margin-bottom: var(--space-6);
            border-radius: var(--radius-lg);
            border: 1px solid var(--border-color);
            background: var(--glass-bg);
            padding: var(--space-5);
            box-shadow: var(--elev-2);
        }

        .home-clean-actions p {
            font-size: var(--text-base);
            color: var(--text-secondary);
            margin-bottom: var(--space-5);
            line-height: var(--leading-relaxed);
            max-width: var(--measure);
        }

        .action-buttons {
            display: flex;
            gap: var(--space-3);
            flex-wrap: wrap;
            justify-content: flex-start;
        }

        .action-btn {
            padding-block: var(--space-3);
            padding-inline: var(--space-5);
            min-height: var(--tap-target);
            border: 1px solid transparent;
            border-radius: var(--radius-sm);
            background: var(--primary-color);
            color: var(--on-primary);
            font-size: var(--text-base);
            font-weight: var(--weight-semibold);
            cursor: pointer;
            transition:
                background-color var(--transition-fast),
                border-color var(--transition-fast),
                color var(--transition-fast),
                box-shadow var(--transition-fast),
                transform var(--transition-fast);
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: var(--space-2);
            -webkit-tap-highlight-color: transparent;
        }

        .action-btn:hover {
            background: var(--primary-light);
            transform: translateY(-2px);
            box-shadow: var(--elev-3);
        }

        .action-btn:active {
            transform: translateY(0);
            box-shadow: var(--elev-1);
        }

        /* Secondary was `background: var(--bg-color)`, i.e. the page colour on
           top of the page — it read as a hole rather than a button. */
        .action-btn.secondary {
            background: rgba(var(--primary-rgb), 0.1);
            border-color: rgba(var(--primary-rgb), 0.3);
            color: var(--primary-color);
        }

        .action-btn.secondary:hover {
            background: rgba(var(--primary-rgb), 0.18);
            border-color: rgba(var(--primary-rgb), 0.45);
            color: var(--primary-color);
        }

        .action-btn.secondary:hover {
            background: var(--primary-color);
            border-color: var(--primary-color);
            color: var(--on-primary);
        }

        /* ---- Prayer widget ------------------------------------------------------
           Base rules live in styles.css; these page-level refinements bring it
           onto the same rhythm as the rest of the dashboard. */

        .prayer-widget {
            margin-bottom: var(--space-6);
            padding: var(--space-5);
            gap: var(--space-5);
        }

        .pw-header {
            gap: var(--space-3);
            flex-wrap: wrap;
        }

        .pw-title {
            font-size: var(--text-lg);
            font-weight: var(--weight-bold);
            letter-spacing: -0.01em;
            color: var(--text-color);
            gap: var(--space-2);
        }

        .pw-title i {
            color: var(--primary-color);
        }

        .pw-location {
            font-size: var(--text-sm);
            color: var(--text-secondary);
            text-align: end;
        }

        .pw-body {
            gap: var(--space-2);
        }

        .prayer-widget .pw-item {
            padding-block: var(--space-3);
            padding-inline: var(--space-2);
            border-radius: var(--radius-sm);
            border: 1px solid transparent;
            transition:
                background-color var(--transition-fast),
                border-color var(--transition-fast),
                color var(--transition-fast);
        }

        /* `color: white` on a --primary-color fill drops to roughly 2:1 in dark
           mode, where the accent is a light green. Also drops the 1.05 scale —
           a size change on a grid item nudges its neighbours. */
        .prayer-widget .pw-item.active {
            color: var(--on-primary);
            border-color: var(--primary-color);
            transform: none;
            box-shadow: var(--elev-2);
        }

        .prayer-widget .pw-name {
            font-size: var(--text-sm);
            font-weight: var(--weight-semibold);
            margin-bottom: var(--space-1);
        }

        .prayer-widget .pw-time {
            font-size: var(--text-md);
            font-weight: var(--weight-bold);
            font-feature-settings: "tnum";
        }

        .pw-footer {
            padding-top: var(--space-4);
            font-size: var(--text-base);
            font-weight: var(--weight-semibold);
            color: var(--primary-color);
            font-feature-settings: "tnum";
        }

        @media (max-width: 768px) {
            .hero-section {
                padding: var(--space-5);
                border-radius: var(--radius-lg);
                margin-bottom: var(--space-6);
            }

            .hero-title {
                font-size: var(--text-2xl);
            }

            .hero-subtitle {
                font-size: var(--text-base);
                margin-bottom: var(--space-2);
            }

            .hero-description {
                font-size: var(--text-base);
                margin-bottom: var(--space-4);
            }

            .hero-metrics {
                gap: var(--space-4);
            }

            .hero-metric {
                padding: 0;
            }

            .hero-metric-value {
                font-size: var(--text-lg);
            }

            .hero-cta {
                flex: 1 1 calc(50% - var(--space-3));
                justify-content: center;
                font-size: var(--text-base);
                padding-inline: var(--space-3);
            }

            .home-clean-actions {
                padding: var(--space-4);
            }

            .home-clean-actions h2 {
                font-size: var(--text-lg);
            }

            .stat-number {
                font-size: var(--text-2xl);
            }

            .dashboard-grid {
                grid-template-columns: 1fr;
            }

            .habit-rings-grid {
                grid-template-columns: 1fr;
            }

            .khatma-core-feature {
                padding: var(--space-4);
            }

            .khatma-core-feature-head {
                align-items: flex-start;
                flex-direction: column;
            }

            .khatma-core-feature-title {
                font-size: var(--text-lg);
            }

            .habit-streak-card {
                flex-direction: column;
                align-items: flex-start;
            }

            .habit-streak-number {
                font-size: var(--text-3xl);
            }

            .habit-streak-meta {
                width: 100%;
                text-align: start;
            }

            .prayer-widget,
            .smart-dashboard-section,
            .habit-dashboard-section,
            .mood-support-card,
            .khatma-card,
            .quick-actions {
                padding: var(--space-4);
            }

            .action-btn {
                flex: 1 1 100%;
            }
        }

        @media (max-width: 520px) {
            .hero-badge {
                font-size: var(--text-xs);
                padding-block: var(--space-2);
                padding-inline: var(--space-3);
                gap: var(--space-2);
                max-width: 100%;
            }

            .hero-cta {
                flex: 1 1 100%;
            }
        }

        .visitor-badge {
            display: none !important;
            align-items: center;
            gap: var(--space-2);
            background: var(--primary-color);
            color: var(--on-primary);
            padding-block: var(--space-2);
            padding-inline: var(--space-3);
            border-radius: var(--radius-full);
            font-size: var(--text-sm);
            font-weight: var(--weight-semibold);
        }

        .visitor-badge i {
            font-size: var(--text-base);
        }

        .visitor-badge .count {
            min-width: 20px;
        }

        .visitor-badge .loading {
            width: 14px;
            height: 14px;
            border: 2px solid rgba(255, 255, 255, 0.3);
            border-top-color: var(--on-primary);
            border-radius: 50%;
            animation: spin 1s linear infinite;
        }

        /* ======================================================================
           Scripture cards — the daily verse and the daily hadith.

           These carry the only revealed text on the page, so they are the one
           place allowed a distinct treatment: Amiri, --leading-quran, a
           constrained measure and a warm gold/green edge. `.verse-card` and
           `.hadith-card` get their base box from styles.css (.glass-card);
           the rules here handle the typography and rhythm.
           ====================================================================== */

        .daily-verse-section,
        .hadith-section {
            margin-bottom: var(--space-6);
        }

        .verse-card {
            padding: var(--space-8) var(--space-5);
            margin-bottom: 0;
            border-radius: var(--radius-lg);
            background:
                radial-gradient(600px 220px at 50% -30%, rgba(var(--primary-rgb), 0.12), transparent 70%),
                var(--glass-bg);
        }

        .verse-label {
            font-size: var(--text-sm);
            font-weight: var(--weight-bold);
            color: var(--primary-color);
            margin-bottom: var(--space-5);
            letter-spacing: 0.12em;
            display: block;
        }

        /* Amiri at a generous leading — Arabic with full diacritics needs the
           space, and this is the passage people actually stop to read. */
        .daily-verse-content {
            font-family: var(--font-quran);
            font-size: var(--font-size-ayah);
            line-height: var(--leading-quran);
            color: var(--text-color);
            max-width: 42ch;
            margin-inline: auto;
            margin-bottom: var(--space-5);
            position: relative;
            z-index: var(--z-base);
        }

        .verse-ref {
            font-size: var(--text-base);
            font-weight: var(--weight-semibold);
            color: var(--primary-color);
            background: rgba(var(--primary-rgb), 0.1);
            border: 1px solid rgba(var(--primary-rgb), 0.2);
            display: inline-block;
            padding-block: var(--space-1);
            padding-inline: var(--space-4);
            border-radius: var(--radius-full);
        }

        .hadith-card {
            padding: var(--space-6) var(--space-5);
            margin-bottom: 0;
            border-radius: var(--radius-lg);
            background:
                radial-gradient(600px 220px at 0% -30%, rgba(233, 169, 8, 0.12), transparent 70%),
                var(--glass-bg);
        }

        .hadith-label {
            font-size: var(--text-sm);
            font-weight: var(--weight-bold);
            color: var(--secondary-color);
            margin-bottom: var(--space-4);
            gap: var(--space-2);
            letter-spacing: 0.08em;
        }

        [data-theme="dark"] .hadith-label {
            /* --secondary-color is the deep gold in light mode; the dark theme
               swaps it for the bright one, which is what we want here. */
            color: var(--accent-color);
        }

        .hadith-text {
            font-family: var(--font-quran);
            font-size: var(--text-xl);
            line-height: var(--leading-relaxed);
            color: var(--text-color);
            font-weight: var(--weight-normal);
            max-width: var(--measure);
        }

        /* Legacy daily-verse selectors — the markup now uses `.verse-card`, but
           these are kept in sync so an older cached page still renders. */
        .daily-verse-card {
            background: var(--glass-bg);
            border: 1px solid var(--border-color);
            border-radius: var(--radius-lg);
            padding: var(--space-8) var(--space-5);
            text-align: center;
            box-shadow: var(--elev-2);
            position: relative;
            overflow: hidden;
        }

        .daily-verse-card::before {
            content: '"';
            position: absolute;
            inset-block-start: var(--space-2);
            inset-inline-end: var(--space-5);
            font-size: 120px;
            color: var(--primary-color);
            opacity: 0.1;
            font-family: var(--font-quran);
            line-height: 1;
        }

        .daily-verse-header {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: var(--space-2);
            color: var(--primary-color);
            font-weight: var(--weight-bold);
            margin-bottom: var(--space-5);
            font-size: var(--text-lg);
        }

        .daily-verse-info {
            font-size: var(--text-base);
            color: var(--text-secondary);
            opacity: 1;
        }

        /* ---- Resume reading ------------------------------------------------------
           A single wide CTA. Local foreground roles, like the hero: the global
           --on-primary is near-black in dark mode and would be unreadable on
           this deep gradient. */

        .resume-reading-section {
            margin-bottom: var(--space-6);
        }

        .resume-card {
            /* Paper surface with an accent edge, matching every other panel.
               Was a green gradient block with white-on-green local roles. */
            --resume-fg: var(--text-color);
            --resume-fg-muted: var(--text-secondary);

            width: 100%;
            text-align: start;
            font: inherit;
            border: 1px solid var(--border-color);
            border-inline-start: 3px solid var(--primary-color);
            background: var(--surface-1);
            border-radius: var(--radius-lg);
            padding: var(--space-5);
            display: flex;
            align-items: center;
            gap: var(--space-4);
            color: var(--resume-fg);
            cursor: pointer;
            transition:
                transform var(--transition-normal),
                box-shadow var(--transition-normal);
            box-shadow: var(--elev-3);
        }

        [data-theme="dark"] .resume-card {
            background: var(--surface-1);
            border-color: var(--border-color);
            border-inline-start-color: var(--primary-color);
        }

        .resume-card:hover {
            transform: translateY(-2px);
            box-shadow: var(--elev-4);
        }

        .resume-icon {
            width: 48px;
            height: 48px;
            flex-shrink: 0;
            background: rgba(255, 255, 255, 0.16);
            border: 1px solid rgba(255, 255, 255, 0.24);
            border-radius: var(--radius-md);
            display: grid;
            place-items: center;
            font-size: 1.375rem;
        }

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

        .resume-label {
            font-size: var(--text-sm);
            color: var(--resume-fg-muted);
            opacity: 1;
            margin-bottom: var(--space-1);
        }

        .resume-details {
            font-size: var(--text-lg);
            font-weight: var(--weight-bold);
            letter-spacing: -0.01em;
        }

        .resume-arrow {
            font-size: 1.5rem;
            color: var(--resume-fg-muted);
            opacity: 1;
            flex-shrink: 0;
        }

        /* ---- Khatma planner ------------------------------------------------------ */

        .khatma-section {
            margin-bottom: var(--space-6);
        }

        .khatma-card {
            background: var(--surface-1);
            border: 1px solid var(--border-color);
            border-radius: var(--radius-lg);
            padding: var(--space-5);
            box-shadow: var(--elev-2);
        }

        .khatma-subtitle {
            font-size: var(--text-base);
            color: var(--text-secondary);
            line-height: var(--leading-normal);
            margin-bottom: var(--space-5);
        }

        .khatma-form {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
            gap: var(--space-3);
            margin-bottom: var(--space-3);
        }

        .khatma-input {
            width: 100%;
            border: 1px solid var(--border-color);
            background: var(--surface-2);
            border-radius: var(--radius-sm);
            color: var(--text-color);
            padding-block: var(--space-3);
            padding-inline: var(--space-4);
            min-height: var(--tap-target);
            font-family: inherit;
            /* 16px minimum so iOS does not zoom the page on focus. */
            font-size: var(--text-md);
            transition:
                border-color var(--transition-fast),
                box-shadow var(--transition-fast);
        }

        .khatma-input:focus-visible {
            outline: none;
            border-color: var(--primary-color);
            box-shadow: var(--focus-ring);
        }

        .khatma-btn {
            border: 1px solid transparent;
            border-radius: var(--radius-sm);
            background: var(--primary-color);
            color: var(--on-primary);
            padding-block: var(--space-3);
            padding-inline: var(--space-4);
            min-height: var(--tap-target);
            font-size: var(--text-base);
            font-weight: var(--weight-bold);
            cursor: pointer;
            transition:
                background-color var(--transition-fast),
                border-color var(--transition-fast),
                color var(--transition-fast),
                transform var(--transition-fast),
                box-shadow var(--transition-fast);
        }

        .khatma-btn:hover {
            background: var(--primary-light);
            transform: translateY(-2px);
            box-shadow: var(--elev-3);
        }

        .khatma-btn.secondary {
            background: rgba(var(--primary-rgb), 0.1);
            border-color: rgba(var(--primary-rgb), 0.3);
            color: var(--primary-color);
        }

        .khatma-btn.secondary:hover {
            background: rgba(var(--primary-rgb), 0.18);
            color: var(--primary-color);
        }

        .khatma-stats {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
            gap: var(--space-2);
            margin-bottom: var(--space-4);
        }

        .khatma-stat {
            background: var(--surface-2);
            border: 1px solid var(--border-color);
            border-radius: var(--radius-lg);
            padding: var(--space-3);
            text-align: center;
        }

        .khatma-stat-value {
            color: var(--primary-color);
            font-size: var(--text-xl);
            font-weight: var(--weight-bold);
            font-feature-settings: "tnum";
            line-height: var(--leading-tight);
            margin-bottom: var(--space-1);
        }

        .khatma-stat-label {
            color: var(--text-secondary);
            font-size: var(--text-sm);
        }

        .khatma-today-target {
            background: rgba(var(--primary-rgb), 0.08);
            border: 1px solid rgba(var(--primary-rgb), 0.2);
            border-radius: var(--radius-sm);
            padding-block: var(--space-3);
            padding-inline: var(--space-4);
            font-size: var(--text-base);
            line-height: var(--leading-normal);
            color: var(--text-color);
            margin-bottom: var(--space-3);
        }

        .khatma-progress {
            width: 100%;
            height: 8px;
            border-radius: var(--radius-full);
            background: rgba(var(--primary-rgb), 0.12);
            overflow: hidden;
            margin-bottom: var(--space-3);
        }

        .khatma-progress-bar {
            height: 100%;
            width: 0%;
            border-radius: var(--radius-full);
            background: linear-gradient(90deg, var(--primary-color), var(--primary-light));
            transition: width var(--transition-normal);
        }

        .khatma-actions {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: var(--space-2);
        }

        .khatma-read-row {
            display: grid;
            grid-template-columns: 1fr auto;
            gap: var(--space-2);
            margin-bottom: var(--space-2);
        }

        /* ---- Mood support -------------------------------------------------------- */

        .mood-support-section {
            margin-bottom: var(--space-6);
        }

        .mood-support-card {
            background: var(--glass-bg);
            border: 1px solid var(--border-color);
            border-radius: var(--radius-lg);
            padding: var(--space-5);
            box-shadow: var(--elev-2);
        }

        .mood-subtitle {
            font-size: var(--text-base);
            color: var(--text-secondary);
            line-height: var(--leading-normal);
            max-width: var(--measure);
            margin-bottom: var(--space-4);
        }

        .mood-input {
            width: 100%;
            min-height: 96px;
            resize: vertical;
            border: 1px solid var(--border-color);
            border-radius: var(--radius-sm);
            background: var(--surface-2);
            color: var(--text-color);
            padding-block: var(--space-3);
            padding-inline: var(--space-4);
            font-family: inherit;
            /* 16px minimum so iOS does not zoom the page on focus. */
            font-size: var(--text-md);
            line-height: var(--leading-normal);
            margin-bottom: var(--space-4);
            transition:
                border-color var(--transition-fast),
                box-shadow var(--transition-fast);
        }

        .mood-input:focus-visible {
            outline: none;
            border-color: var(--primary-color);
            box-shadow: var(--focus-ring);
        }

        .mood-chips {
            display: flex;
            gap: var(--space-2);
            flex-wrap: wrap;
            margin-bottom: var(--space-4);
        }

        .mood-chip {
            border: 1px solid var(--border-color);
            background: var(--surface-2);
            color: var(--text-color);
            border-radius: var(--radius-full);
            padding-block: var(--space-2);
            padding-inline: var(--space-4);
            min-height: 36px;
            font-size: var(--text-base);
            font-weight: var(--weight-medium);
            cursor: pointer;
            transition:
                background-color var(--transition-fast),
                border-color var(--transition-fast),
                color var(--transition-fast);
        }

        .mood-chip:hover {
            background: rgba(var(--primary-rgb), 0.1);
            border-color: rgba(var(--primary-rgb), 0.35);
            color: var(--primary-color);
        }

        .mood-generate-btn {
            border: 1px solid transparent;
            border-radius: var(--radius-sm);
            background: var(--primary-color);
            color: var(--on-primary);
            font-size: var(--text-base);
            font-weight: var(--weight-bold);
            padding-block: var(--space-3);
            padding-inline: var(--space-5);
            min-height: var(--tap-target);
            cursor: pointer;
            margin-bottom: var(--space-4);
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: var(--space-2);
            transition:
                background-color var(--transition-fast),
                transform var(--transition-fast),
                box-shadow var(--transition-fast),
                opacity var(--transition-fast);
        }

        .mood-generate-btn:hover {
            background: var(--primary-light);
            transform: translateY(-2px);
            box-shadow: var(--elev-3);
        }

        .mood-generate-btn:disabled,
        .mood-generate-btn.is-loading {
            cursor: wait;
            opacity: 0.9;
            transform: none;
            box-shadow: none;
        }

        .mood-btn-spinner {
            width: 16px;
            height: 16px;
            border: 2px solid rgba(255, 255, 255, 0.35);
            border-top-color: var(--on-primary);
            border-radius: 50%;
            animation: spin 0.9s linear infinite;
            flex-shrink: 0;
        }

        .mood-status {
            border: 1px solid var(--border-color);
            border-radius: var(--radius-sm);
            padding: var(--space-4);
            margin-bottom: var(--space-4);
            background: var(--surface-2);
            display: none;
        }

        .mood-status.active {
            display: block;
        }

        .mood-status-head {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: var(--space-3);
            margin-bottom: var(--space-2);
        }

        .mood-status-title {
            font-size: var(--text-base);
            font-weight: var(--weight-bold);
            color: var(--text-color);
        }

        .mood-status-meta {
            font-size: var(--text-sm);
            color: var(--text-secondary);
            font-weight: var(--weight-semibold);
            font-feature-settings: "tnum";
        }

        .mood-status-track {
            height: 6px;
            border-radius: var(--radius-full);
            background: rgba(var(--primary-rgb), 0.14);
            overflow: hidden;
            margin-bottom: var(--space-3);
        }

        .mood-status-track-fill {
            display: block;
            width: 0;
            height: 100%;
            border-radius: var(--radius-full);
            background: linear-gradient(90deg, var(--primary-color), var(--primary-light));
            transition: width var(--transition-slow);
        }

        .mood-status-steps {
            display: grid;
            gap: var(--space-2);
        }

        .mood-status-step {
            display: flex;
            align-items: center;
            gap: var(--space-2);
            font-size: var(--text-base);
            color: var(--text-secondary);
            line-height: var(--leading-snug);
        }

        .mood-status-step i {
            font-size: var(--text-base);
            flex-shrink: 0;
        }

        .mood-status-step.done {
            color: var(--primary-color);
            font-weight: var(--weight-semibold);
        }

        .mood-status-step.current {
            color: var(--text-color);
            font-weight: var(--weight-bold);
        }

        .mood-status-step.failed {
            color: var(--danger);
            font-weight: var(--weight-semibold);
        }

        .mood-step-spinner {
            width: 14px;
            height: 14px;
            border: 2px solid rgba(var(--primary-rgb), 0.22);
            border-top-color: var(--primary-color);
            border-radius: 50%;
            animation: spin 0.9s linear infinite;
            flex-shrink: 0;
        }

        .mood-status.success .mood-status-title {
            color: var(--primary-color);
        }

        .mood-status.error .mood-status-title {
            color: var(--danger);
        }

        .mood-status.error .mood-status-track-fill {
            background: linear-gradient(90deg, var(--danger), var(--warning));
        }

        .mood-result {
            border: 1px dashed rgba(var(--primary-rgb), 0.35);
            border-radius: var(--radius-lg);
            padding: var(--space-5);
            background: rgba(var(--primary-rgb), 0.05);
            display: none;
        }

        .mood-result.active,
        .mood-result.is-loading,
        .mood-result.error {
            display: block;
        }

        .mood-result.is-loading {
            border-style: solid;
            border-color: var(--border-color);
            background: var(--surface-2);
        }

        .mood-result.error {
            border-style: solid;
            border-color: var(--danger);
            background: var(--danger-surface);
        }

        .mood-loading-title {
            display: flex;
            align-items: center;
            gap: var(--space-2);
            margin-bottom: var(--space-3);
            font-size: var(--text-base);
            font-weight: var(--weight-bold);
            color: var(--text-color);
        }

        .mood-loading-line {
            height: 10px;
            border-radius: var(--radius-xs);
            margin-bottom: var(--space-2);
            background: linear-gradient(90deg,
                    rgba(var(--primary-rgb), 0.08) 0%,
                    rgba(var(--primary-rgb), 0.2) 50%,
                    rgba(var(--primary-rgb), 0.08) 100%);
            background-size: 220% 100%;
            animation: moodShimmer 1.3s linear infinite;
        }

        .mood-loading-line.short {
            width: 72%;
            margin-bottom: 0;
        }

        @keyframes moodShimmer {
            0% {
                background-position: 100% 0;
            }

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

        .mood-context-title {
            font-size: var(--text-lg);
            font-weight: var(--weight-bold);
            color: var(--primary-color);
            margin-bottom: var(--space-2);
        }

        .mood-context-text {
            font-size: var(--text-base);
            color: var(--text-color);
            line-height: var(--leading-relaxed);
            max-width: var(--measure);
            margin-bottom: var(--space-4);
        }

        .mood-ayah-list {
            display: grid;
            gap: var(--space-3);
        }

        .mood-ayah-item {
            border: 1px solid var(--border-color);
            border-radius: var(--radius-lg);
            padding: var(--space-4);
            background: var(--surface-1);
        }

        /* Quranic text — Amiri and the reading leading, same as the daily verse. */
        .mood-ayah-text {
            font-family: var(--font-quran);
            font-size: var(--text-2xl);
            line-height: var(--leading-quran);
            color: var(--text-color);
            margin-bottom: var(--space-3);
        }

        .mood-ayah-ref {
            font-size: var(--text-base);
            color: var(--text-secondary);
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: var(--space-2);
            flex-wrap: wrap;
        }

        .mood-ayah-link {
            text-decoration: none;
            color: var(--primary-color);
            font-weight: var(--weight-bold);
            font-size: var(--text-base);
        }

        .mood-ayah-link:hover {
            text-decoration: underline;
        }

        .mood-note {
            margin-top: var(--space-3);
            font-size: var(--text-sm);
            color: var(--text-muted);
            line-height: var(--leading-snug);
        }

        .mood-detected {
            font-size: var(--text-base);
            color: var(--text-secondary);
            margin-bottom: var(--space-2);
        }

        .mood-score-list {
            display: flex;
            flex-wrap: wrap;
            gap: var(--space-2);
            margin-bottom: var(--space-3);
        }

        .mood-score-pill {
            border-radius: var(--radius-full);
            font-size: var(--text-sm);
            font-weight: var(--weight-bold);
            padding-block: var(--space-1);
            padding-inline: var(--space-3);
            background: rgba(var(--primary-rgb), 0.15);
            color: var(--primary-color);
            border: 1px solid rgba(var(--primary-rgb), 0.3);
        }

        .mood-score-pill.secondary {
            background: var(--surface-3);
            color: var(--text-secondary);
            border-color: var(--border-color);
        }

        [data-theme="dark"] .mood-score-pill.secondary {
            background: var(--surface-3);
            color: var(--text-secondary);
        }

        .mood-ayah-tag {
            display: inline-block;
            margin-bottom: var(--space-2);
            border-radius: var(--radius-full);
            font-size: var(--text-xs);
            font-weight: var(--weight-bold);
            padding-block: var(--space-1);
            padding-inline: var(--space-3);
            background: rgba(var(--primary-rgb), 0.1);
            color: var(--primary-color);
            border: 1px solid rgba(var(--primary-rgb), 0.18);
        }