/* ========================================
           SACRED SURFACE TOKEN SYSTEM
           Ministry UI/UX Design Authority
           February 11, 2026
           ======================================== */

        :root {
            /* LIGHT MODE — SACRED PARCHMENT */
            --sacred-bg-primary: #FBF8F2;
            --sacred-bg-secondary: #F3EDE2;
            --sacred-bg-elevated: #FFFFFF;

            --sacred-surface-light: rgba(255, 255, 255, 0.78);
            --sacred-surface-border-light: rgba(212, 185, 120, 0.22);

            --sacred-text-primary: #1F2A37;
            --sacred-text-secondary: #5B6B7A;
            --sacred-text-scripture: #223E5A;

            --sacred-accent-gold: #C9A96E;
            --sacred-accent-gold-glow: rgba(201, 169, 110, 0.35);

            --sacred-shadow-soft-light: 0 10px 30px rgba(30, 60, 90, 0.08);

            /* SHARED */
            --sacred-blur-desktop: blur(14px);
        }

        /* DARK MODE */
        [data-theme="dark"],
        html.dark,
        body.dark {
            --sacred-bg-primary: #0B1220;
            --sacred-bg-secondary: #0F1829;
            --sacred-bg-elevated: #131F36;

            --sacred-surface-dark: rgba(17, 30, 49, 0.72);
            --sacred-surface-border-dark: rgba(201, 169, 110, 0.18);

            --sacred-text-primary: #E6EDF5;
            --sacred-text-secondary: #9FB2C7;
            --sacred-text-scripture: #F0F6FF;

            --sacred-accent-gold: #D4B878;
            --sacred-accent-gold-glow: rgba(212, 184, 120, 0.40);

            --sacred-shadow-soft-dark: 0 18px 48px rgba(0, 0, 0, 0.55);
        }

        /* ===== iOS Safari Fixed Position Fix ===== */
        /* Global box-sizing */
        *,
        *::before,
        *::after {
            box-sizing: border-box;
        }

        html {
            width: 100%;
            max-width: 100%;
            overflow-x: clip;
            overflow-y: auto;
        }

        /* Container Logic (Desktop) */
        .devotion-container {
            width: 100%;
            max-width: var(--dd-max-width);
            margin: 0 auto;
            padding: 0 var(--dd-safe-x);
            position: relative;
            z-index: 2;
        }

        body {
            width: 100%;
            max-width: 100%;
            overflow-x: clip;
            overflow-y: visible;
            margin: 0;
            padding: 0;
        }

        /* iOS Safari / iPad specific fix - DO NOT use overflow-x: hidden or position: relative */
        /* These break position: fixed on iOS Safari */
        @supports (-webkit-touch-callout: none) {
            html {
                overflow-x: clip !important;
            }

            body {
                overflow-x: clip !important;
            }
        }

        /* CONTAINER DISCIPLINE — PREVENTS HORIZONTAL SCROLL */
        img,
        video,
        iframe,
        embed,
        object {
            max-width: 100%;
            height: auto;
        }

        /* Dark mode toggle styles — match homepage */
        .dark-mode-toggle {
            background: rgba(45, 122, 143, 0.1);
            border: 2px solid rgba(45, 122, 143, 0.3);
            border-radius: 50%;
            width: 40px;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.3s ease;
            position: relative;
            margin-left: 15px;
            font-size: 20px;
        }

        .dark-mode-toggle:hover {
            background: rgba(45, 122, 143, 0.2);
            border-color: rgba(45, 122, 143, 0.5);
            transform: scale(1.05);
        }

        .dark-mode-toggle .sun-icon,
        .dark-mode-toggle .moon-icon {
            position: absolute;
            transition: opacity 0.3s ease, transform 0.3s ease;
        }

        .dark-mode-toggle .moon-icon {
            opacity: 0;
            transform: rotate(-180deg);
        }

        [data-theme="dark"] .dark-mode-toggle .sun-icon {
            opacity: 0;
            transform: rotate(180deg);
        }

        [data-theme="dark"] .dark-mode-toggle .moon-icon {
            opacity: 1;
            transform: rotate(0deg);
        }

        @media (max-width: 768px) {
            .dark-mode-toggle {
                width: 36px;
                height: 36px;
                font-size: 18px;
                margin-left: 10px;
            }
        }

        /* iPad-only horizontal overflow fix (safe, non-breaking) */
        /* Prevent box-shadows and transforms from causing overflow */

        /* Contain shadows within viewport */
        .devotion-controls,
        .devotion-section,
        .share-section {
            max-width: calc(100% - 2px);
        }

        /* ===== END iPad horizontal overflow fix ===== */

        /* Daily Devotion Page Specific Styles */

        .devotion-hero {
            background: linear-gradient(rgba(45, 122, 143, 0.85), rgba(31, 82, 96, 0.9));
            /* Background image removed - use solid gradient for consistency */
            color: var(--color-text-inverse);
            padding: var(--spacing-2xl) var(--spacing-md) var(--spacing-xl);
            /* Add extra top padding to account for fixed header */
            padding-top: calc(var(--spacing-2xl) + var(--spacing-xl));
            text-align: center;
            overflow: visible;
            max-width: 100%;
            width: 100%;
            box-sizing: border-box;
            position: relative;
        }

        .devotion-hero h1 {
            color: var(--color-text-inverse);
            font-size: var(--font-4xl);
            margin-bottom: var(--spacing-lg);
            /* Increased from sm */
            font-weight: var(--font-bold);
        }

        .devotion-hero h2 {
            color: var(--color-secondary);
            font-size: var(--font-xl);
            font-weight: var(--font-normal);
            margin-bottom: var(--spacing-lg);
            /* Increased from md */
            opacity: 0.95;
        }

        .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;
        }

        .devotion-date {
            font-size: var(--font-lg);
            font-weight: var(--font-semibold);
            /* Increased from medium */
            color: var(--color-text-inverse);
            opacity: 1;
            /* Increased from 0.9 */
            background: rgba(255, 255, 255, 0.15);
            /* Add subtle background */
            padding: var(--spacing-xs) var(--spacing-md);
            border-radius: var(--radius-md);
            display: inline-block;
        }

        /* Controls */
        .devotion-controls {
            max-width: 800px;
            margin: var(--spacing-xl) auto var(--spacing-xl);
            padding: var(--spacing-lg);
            /* Increased from md */
            background: var(--color-surface);
            box-shadow: var(--shadow-lg);
            /* Enhanced shadow */
            border-radius: var(--radius-lg);
            border: 1px solid var(--color-border);
            /* Add border for definition */
            display: grid;
            grid-template-columns: 1fr;
            gap: var(--spacing-lg);
            /* Increased from md for better separation */
            z-index: 2;
            width: 100%;
            /* iOS SAFARI OVERFLOW FIX */
            box-sizing: border-box;
            /* iOS SAFARI OVERFLOW FIX */
        }

        .devotion-loading {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: var(--spacing-sm);
            padding: var(--spacing-xl) 0;
            color: var(--color-text-light);
            font-size: var(--font-lg);
            text-align: center;
        }

        .loading-spinner {
            width: 22px;
            height: 22px;
            border-radius: 50%;
            border: 3px solid rgba(148, 163, 184, 0.3);
            border-top-color: var(--color-primary);
            animation: spin 0.9s linear infinite;
        }

        @keyframes spin {
            to {
                transform: rotate(360deg);
            }
        }

        .devotion-controls-row {
            display: flex;
            align-items: center;
            gap: var(--spacing-md);
            flex-wrap: wrap;
            justify-content: space-between;
            width: 100%;
            /* iOS SAFARI OVERFLOW FIX */
            box-sizing: border-box;
            /* iOS SAFARI OVERFLOW FIX */
            min-width: 0;
            /* iOS SAFARI OVERFLOW FIX - prevents flex overflow */
        }

        .devotion-controls-row.date-row,
        .devotion-controls-row.jump-row {
            justify-content: center;
        }

        /* ================================
           Dark mode adjustments (UI + share)
           ================================ */
        body[data-theme="dark"] .devotion-controls,
        body[data-theme="dark"] .devotion-container,
        body[data-theme="dark"] .devotion-section,
        body[data-theme="dark"] .simple-share-section,
        body[data-theme="dark"] .share-section {
            background: transparent;
            /* Transparent to prevent double darkening - image + overlay provide dark tone */
            color: #e2e8f0;
            /* Brighter than #cbd5e1 */
            border: 1px solid rgba(148, 163, 184, 0.3);
            /* Increased from 0.2 */
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3), 0 2px 4px rgba(0, 0, 0, 0.2);
            /* Enhanced shadow */
        }

        body[data-theme="dark"] .language-toggle,
        body[data-theme="dark"] .jump-controls select,
        body[data-theme="dark"] .date-pill,
        body[data-theme="dark"] .date-nav-btn,
        body[data-theme="dark"] .devotion-nav-btn,
        body[data-theme="dark"] .simple-share-btn,
        body[data-theme="dark"] #goToDateBtn,
        body[data-theme="dark"] #todayBtn {
            background: #0f172a;
            /* Darker background */
            color: #f1f5f9;
            /* Brighter text */
            border: 2px solid rgba(148, 163, 184, 0.4);
            /* Thicker, more visible border */
        }

        /* Dark mode hover states for better interactivity */
        body[data-theme="dark"] .date-pill:hover,
        body[data-theme="dark"] .date-nav-btn:hover,
        body[data-theme="dark"] .devotion-nav-btn:hover,
        body[data-theme="dark"] .simple-share-btn:hover,
        body[data-theme="dark"] #todayBtn:hover {
            background: #1e293b;
            border-color: rgba(148, 163, 184, 0.6);
        }

        body[data-theme="dark"] .date-pill.active,
        body[data-theme="dark"] .language-toggle button.active,
        body[data-theme="dark"] #goToDateBtn {
            background: #2563eb !important;
            /* Force primary blue */
            color: #ffffff !important;
            border-color: #2563eb !important;
        }

        body[data-theme="dark"] .language-toggle {
            background: #111827 !important;
            border-color: #374151 !important;
        }

        /* Dark mode fading edges */
        body[data-theme="dark"] .date-strip-wrapper::before {
            background: linear-gradient(to right,
                    rgba(15, 23, 42, 1) 0%,
                    rgba(15, 23, 42, 0) 100%);
        }

        body[data-theme="dark"] .date-strip-wrapper::after {
            background: linear-gradient(to left,
                    rgba(15, 23, 42, 1) 0%,
                    rgba(15, 23, 42, 0) 100%);
        }

        body[data-theme="dark"] .language-toggle button {
            color: #9ca3af !important;
            /* inactive text color */
        }


        body[data-theme="dark"] .devotion-meta,
        body[data-theme="dark"] .devotion-text,
        body[data-theme="dark"] .devotion-section p,
        body[data-theme="dark"] .devotion-section h3 {
            color: #cbd5e1;
        }

        .language-toggle {
            display: inline-flex;
            border: none;
            border-radius: var(--radius-full);
            overflow: hidden;
            background: transparent;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        }

        .language-toggle button {
            border: none;
            background: rgba(255, 255, 255, 0.95);
            padding: var(--spacing-sm) var(--spacing-xl);
            font-weight: var(--font-semibold);
            cursor: pointer;
            color: #6b7280;
            transition: all var(--transition-base);
            font-size: var(--font-lg);
            min-width: 120px;
        }

        .language-toggle button.active {
            background: #2563eb;
            color: #ffffff;
            box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
        }

        .language-toggle button:not(.active):hover {
            background: rgba(255, 255, 255, 1);
            color: #374151;
        }

        .language-toggle button:focus-visible {
            outline: 3px solid var(--color-secondary);
            outline-offset: 2px;
        }

        /* iOS / Tablet Horizontal Scroll Lock — SAFE FIX */
        .date-strip-wrapper {
            display: flex;
            align-items: center;
            gap: var(--spacing-xs);
            width: 100%;
            max-width: 100%;
            justify-content: center;
            box-sizing: border-box;
            overflow: hidden;
            position: relative;
        }

        /* Fading edge indicators */
        .date-strip-wrapper::before,
        .date-strip-wrapper::after {
            content: '';
            position: absolute;
            top: 0;
            bottom: 0;
            width: 24px;
            pointer-events: none;
            z-index: 2;
            transition: opacity 0.3s ease;
        }

        /* Left fade */
        .date-strip-wrapper::before {
            left: 48px;
            background: linear-gradient(to right,
                    var(--bg-page) 0%,
                    rgba(255, 255, 255, 0) 100%);
        }

        /* Right fade */
        .date-strip-wrapper::after {
            right: 48px;
            background: linear-gradient(to left,
                    var(--bg-page) 0%,
                    rgba(255, 255, 255, 0) 100%);
        }

        .date-strip {
            display: flex;
            flex-wrap: nowrap;
            gap: var(--spacing-xs);
            overflow-x: auto;
            overflow-y: hidden;
            padding: var(--spacing-xs);
            scrollbar-width: none;
            max-width: 100%;
            box-sizing: border-box;
            justify-content: flex-start;
            align-items: center;
            min-width: 0;
            flex: 1;
            -webkit-overflow-scrolling: touch;
            scroll-snap-type: x mandatory;
            scroll-padding: var(--spacing-xs);
        }

        .date-strip::-webkit-scrollbar {
            display: none;
        }

        .date-pill {
            padding: var(--spacing-xs) var(--spacing-sm);
            border: 2px solid var(--color-border);
            /* Thicker border */
            border-radius: var(--radius-full);
            background: var(--color-surface);
            text-align: center;
            cursor: pointer;
            transition: all var(--transition-base);
            min-width: 48px;
            min-height: 48px;
            height: 48px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            color: var(--color-text);
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
            flex-shrink: 0;
            scroll-snap-align: center;
        }

        .date-pill strong {
            display: block;
            color: var(--color-primary);
            font-size: var(--font-base);
        }

        .date-pill span {
            font-size: var(--font-sm);
            color: var(--color-text-light);
        }

        .date-pill.active {
            background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
            color: var(--color-text-inverse);
            border-color: transparent;
            box-shadow: var(--shadow-md);
        }

        .date-pill.active span,
        .date-pill.active strong {
            color: var(--color-text-inverse);
        }

        .date-pill:hover {
            border-color: var(--color-primary);
            transform: translateY(-1px);
        }

        /* iPad-only horizontal overflow fix (safe, non-breaking) */
        /* Prevent transform from causing horizontal scroll */
        @media (min-width: 768px) and (max-width: 1024px) {
            .date-pill:hover {
                transform: scale(0.98);
            }
        }

        .date-nav-btn {
            border: 2px solid var(--color-border);
            /* Thicker border */
            background: var(--color-surface);
            border-radius: var(--radius-full);
            padding: 0;
            cursor: pointer;
            transition: all var(--transition-base);
            color: var(--color-text);
            font-weight: var(--font-semibold);
            /* Add font weight */
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
            /* Add shadow */
            min-width: 48px;
            min-height: 48px;
            width: 48px;
            height: 48px;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            align-self: center;
            font-size: var(--font-xl);
        }

        .date-nav-btn:hover {
            border-color: var(--color-primary);
            color: var(--color-primary);
            background: rgba(37, 99, 235, 0.05);
            /* Subtle hover background */
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
            transform: scale(1.05);
        }

        .jump-controls {
            display: flex;
            gap: var(--spacing-sm);
            align-items: center;
            flex-wrap: wrap;
            justify-content: center;
            width: 100%;
            /* iOS SAFARI OVERFLOW FIX */
            max-width: 100%;
            /* iOS SAFARI OVERFLOW FIX */
            box-sizing: border-box;
            /* iOS SAFARI OVERFLOW FIX */
        }

        .jump-controls select,
        .jump-controls button {
            padding: var(--spacing-sm) var(--spacing-md);
            border-radius: var(--radius-md);
            border: 1px solid var(--color-border);
            background: var(--color-surface);
            color: var(--color-text);
            cursor: pointer;
            font-weight: var(--font-medium);
            transition: all var(--transition-base);
            max-width: 100%;
            /* iOS SAFARI OVERFLOW FIX */
            box-sizing: border-box;
            /* iOS SAFARI OVERFLOW FIX */
        }

        .jump-controls button.primary {
            background: var(--color-primary);
            color: var(--color-text-inverse);
            border: none;
        }

        .jump-controls button.primary:hover {
            filter: brightness(0.96);
        }

        .jump-controls button:focus-visible,
        .jump-controls select:focus-visible {
            outline: 3px solid var(--color-secondary);
            outline-offset: 2px;
        }

        .devotion-meta {
            display: flex;
            gap: var(--spacing-sm);
            align-items: center;
            justify-content: center;
            color: var(--color-text-light);
            font-size: var(--font-sm);
        }

        /* Layout helpers */
        /* .devotion-container is now handled by Sacred Layout Rules */

        /* Hide the interim header box to keep the layout clean */
        #devotionHeader {
            display: none;
        }


        .devotion-container {
            max-width: 800px;
            margin: 0 auto;
            padding: var(--spacing-xl) var(--spacing-md);
            width: 100%;
            /* iOS SAFARI OVERFLOW FIX */
            box-sizing: border-box;
            /* iOS SAFARI OVERFLOW FIX */
        }

        .devotion-section {
            background: var(--color-surface);
            border-radius: var(--radius-lg);
            padding: var(--spacing-lg);
            margin-bottom: var(--spacing-lg);
            box-shadow: var(--shadow-md);
            width: 100%;
            /* iOS SAFARI OVERFLOW FIX */
            max-width: 100%;
            /* iOS SAFARI OVERFLOW FIX */
            box-sizing: border-box;
            /* iOS SAFARI OVERFLOW FIX */
        }

        .scripture-section {
            background: linear-gradient(to bottom right, #faf8f5, #f5f1ea);
            border-left: 4px solid var(--color-secondary);
        }

        [data-theme="dark"] .scripture-section,
        html.dark .scripture-section {
            background: linear-gradient(to bottom right, #1a1b1f, #111215);
            border-left: 4px solid var(--color-secondary-dark);
        }

        .scripture-section h3 {
            color: var(--color-primary);
            font-size: var(--font-2xl);
            margin-bottom: var(--spacing-md);
            display: flex;
            align-items: center;
            gap: var(--spacing-sm);
        }

        .scripture-section h3::before {
            content: '📖';
            font-size: var(--font-3xl);
        }

        .scripture-text {
            font-family: Georgia, 'Times New Roman', serif;
            font-size: var(--font-lg);
            line-height: var(--leading-relaxed);
            font-style: italic;
            color: var(--color-text);
            margin: 0;
            padding: var(--spacing-md);
            background: var(--color-surface);
            border-radius: var(--radius-md);
        }

        .reflection-section h3,
        .prayer-section h3 {
            color: var(--color-primary);
            font-size: var(--font-2xl);
            margin-bottom: var(--spacing-md);
            display: flex;
            align-items: center;
            gap: var(--spacing-sm);
        }

        .reflection-section h3::before {
            content: '💭';
            font-size: var(--font-3xl);
        }

        .prayer-section h3::before {
            content: '🙏';
            font-size: var(--font-3xl);
        }

        .reflection-section {
            border-left: 4px solid var(--color-primary);
        }

        .prayer-section {
            border-left: 4px solid var(--color-accent);
            background: linear-gradient(to bottom right, #fefefe, #faf8f5);
        }

        .devotion-text {
            font-size: var(--font-base);
            line-height: var(--leading-relaxed);
            color: var(--color-text);
        }

        /* Share Section */
        .share-section {
            background: var(--color-surface);
            border-radius: var(--radius-lg);
            padding: var(--spacing-lg);
            box-shadow: var(--shadow-md);
            text-align: center;
            margin-top: var(--spacing-xl);
        }

        .share-section h3 {
            color: var(--color-primary);
            font-size: var(--font-xl);
            margin-bottom: var(--spacing-md);
        }

        .share-buttons {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: var(--spacing-md);
            flex-wrap: wrap;
            margin-top: var(--spacing-md);
        }

        .share-btn {
            display: inline-flex;
            align-items: center;
            gap: var(--spacing-xs);
            padding: var(--spacing-sm) var(--spacing-lg);
            border: none;
            border-radius: var(--radius-full);
            font-size: var(--font-base);
            font-weight: var(--font-medium);
            cursor: pointer;
            transition: all var(--transition-base);
            text-decoration: none;
            color: var(--color-text-inverse);
        }

        .share-btn:hover {
            transform: translateY(-2px);
            box-shadow: var(--shadow-lg);
        }

        /* iPad-only horizontal overflow fix (safe, non-breaking) */
        /* Contain shadow within viewport */
        @media (min-width: 768px) and (max-width: 1024px) {
            .share-btn:hover {
                box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
            }
        }

        .share-btn:active {
            transform: translateY(0);
        }

        .share-btn:focus-visible {
            outline: 3px solid var(--color-secondary);
            outline-offset: 2px;
        }

        .share-btn-whatsapp {
            background: linear-gradient(135deg, #25D366, #128C7E);
        }

        .share-btn-facebook {
            background: linear-gradient(135deg, #1877F2, #0C63D4);
        }

        .share-btn-twitter {
            background: linear-gradient(135deg, #14171A, #2C3540);
        }

        .share-btn-email {
            background: linear-gradient(135deg, #6b6b6b, #4a4a4a);
        }

        .share-btn-copy {
            background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
        }

        .share-btn-copy.copied {
            background: linear-gradient(135deg, #28a745, #218838);
        }

        /* Loading/Fallback State */
        .devotion-loading {
            text-align: center;
            padding: var(--spacing-2xl) var(--spacing-md);
            color: var(--color-text-light);
        }

        .devotion-loading p {
            font-size: var(--font-lg);
            margin-bottom: var(--spacing-md);
        }

        .devotion-fallback {
            text-align: center;
            padding: var(--spacing-2xl) var(--spacing-lg);
            background: var(--color-surface);
            border-radius: var(--radius-lg);
            box-shadow: var(--shadow-md);
            max-width: 700px;
            margin: 0 auto;
        }

        .devotion-fallback::before {
            content: '📖';
            font-size: 4rem;
            display: block;
            margin-bottom: var(--spacing-md);
            opacity: 0.3;
        }

        .devotion-fallback h3 {
            color: var(--color-primary);
            margin-bottom: var(--spacing-md);
            font-size: var(--font-2xl);
        }

        .devotion-fallback p {
            color: var(--color-text);
            font-size: var(--font-lg);
            line-height: var(--leading-relaxed);
            margin-bottom: var(--spacing-md);
        }

        .devotion-fallback .fallback-scripture {
            background: linear-gradient(to bottom right, #faf8f5, #f5f1ea);
            padding: var(--spacing-lg);
            border-radius: var(--radius-md);
            border-left: 4px solid var(--color-secondary);
            margin: var(--spacing-lg) 0;
        }

        [data-theme="dark"] .devotion-fallback .fallback-scripture,
        html.dark .devotion-fallback .fallback-scripture {
            background: linear-gradient(to bottom right, #1a1b1f, #111215);
            border-left: 4px solid var(--color-secondary-dark);
        }

        .devotion-fallback .fallback-scripture p {
            font-family: Georgia, 'Times New Roman', serif;
            font-style: italic;
            color: var(--color-text);
            font-size: var(--font-base);
            margin: 0;
        }

        .devotion-fallback .fallback-links {
            display: flex;
            gap: var(--spacing-md);
            justify-content: center;
            flex-wrap: wrap;
            margin-top: var(--spacing-xl);
        }

        .devotion-fallback .fallback-links a {
            display: inline-flex;
            align-items: center;
            gap: var(--spacing-xs);
            padding: var(--spacing-sm) var(--spacing-lg);
            background: var(--color-primary);
            color: var(--color-text-inverse);
            text-decoration: none;
            border-radius: var(--radius-full);
            font-weight: var(--font-medium);
            transition: all var(--transition-base);
        }

        .devotion-fallback .fallback-links a:hover {
            background: var(--color-primary-dark);
            transform: translateY(-2px);
            box-shadow: var(--shadow-md);
        }


        /* Simple Share Section */
        .simple-share-section {
            margin-top: var(--spacing-md);
            /* Reduced from lg */
            padding: var(--spacing-md);
            /* Add padding all around */
            background: rgba(255, 255, 0, 0.05);
            /* Subtle yellow tint to connect with theme */
            border: 1px solid var(--color-border);
            /* Full border instead of just top */
            border-radius: var(--radius-md);
            /* Add border radius */
            text-align: center;
            width: 100%;
            /* iOS SAFARI OVERFLOW FIX */
            max-width: 100%;
            /* iOS SAFARI OVERFLOW FIX */
            box-sizing: border-box;
            /* iOS SAFARI OVERFLOW FIX */
        }

        /* Dark mode for share section */
        body[data-theme="dark"] .simple-share-section {
            background: rgba(255, 255, 0, 0.08);
            border-color: rgba(148, 163, 184, 0.3);
        }

        .simple-share-section p {
            font-size: var(--font-sm);
            color: var(--color-text-light);
            margin-bottom: var(--spacing-sm);
        }

        .simple-share-buttons {
            display: flex;
            justify-content: center;
            gap: var(--spacing-sm);
            flex-wrap: wrap;
            width: 100%;
            /* iOS SAFARI OVERFLOW FIX */
            max-width: 100%;
            /* iOS SAFARI OVERFLOW FIX */
            box-sizing: border-box;
            /* iOS SAFARI OVERFLOW FIX */
        }

        .simple-share-btn {
            display: inline-flex;
            align-items: center;
            gap: var(--spacing-xs);
            padding: var(--spacing-sm) var(--spacing-lg);
            /* Increased padding */
            background: var(--color-surface);
            border: 2px solid var(--color-border);
            /* Thicker border */
            border-radius: var(--radius-full);
            font-size: var(--font-sm);
            font-weight: var(--font-medium);
            /* Add font weight */
            color: var(--color-text);
            text-decoration: none;
            transition: all var(--transition-base);
            box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
            /* Add shadow */
        }

        .simple-share-btn:hover {
            border-color: var(--color-secondary);
            background: linear-gradient(135deg, var(--color-background), rgba(255, 255, 0, 0.1));
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
            transform: translateY(-1px);
        }

        .simple-share-btn:focus-visible {
            outline: 2px solid var(--color-secondary);
            outline-offset: 2px;
        }

        /* Devotion Navigation */
        .devotion-navigation {
            display: flex;
            justify-content: space-between;
            align-items: center;
            max-width: 800px;
            margin: var(--spacing-xl) auto 0;
            padding: var(--spacing-lg) var(--spacing-md);
            gap: var(--spacing-md);
        }

        .devotion-nav-btn {
            display: inline-flex;
            align-items: center;
            gap: var(--spacing-sm);
            padding: var(--spacing-md) var(--spacing-xl);
            /* Increased padding */
            background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
            /* Active gradient */
            border: 2px solid var(--color-primary);
            /* Primary border */
            border-radius: var(--radius-lg);
            /* Increased border radius */
            font-size: var(--font-base);
            font-weight: var(--font-semibold);
            /* Bolder text */
            color: var(--color-text-inverse);
            /* White text */
            text-decoration: none;
            transition: all var(--transition-base);
            box-shadow: var(--shadow-md);
            /* Add shadow */
        }

        .devotion-nav-btn:hover {
            background: linear-gradient(135deg, var(--color-primary-dark), var(--color-primary));
            border-color: var(--color-primary-dark);
            box-shadow: var(--shadow-lg);
            transform: translateY(-2px);
        }

        .devotion-nav-btn.prev:hover {
            transform: translateX(-2px);
        }

        .devotion-nav-btn.next:hover {
            transform: translateX(2px);
        }

        /* iPad-only horizontal overflow fix (safe, non-breaking) */
        /* Prevent translateX from causing horizontal scroll on iPad */
        @media (min-width: 768px) and (max-width: 1024px) {

            .devotion-nav-btn.prev:hover,
            .devotion-nav-btn.next:hover {
                transform: translateY(-1px);
            }
        }

        .devotion-nav-btn:focus-visible {
            outline: 3px solid var(--color-secondary);
            outline-offset: 2px;
        }

        .devotion-nav-btn[disabled] {
            opacity: 0.4;
            cursor: not-allowed;
            pointer-events: none;
        }

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

            /* Reduce hero height on mobile so content starts higher */
            .devotion-hero {
                padding: var(--spacing-md) var(--spacing-sm) var(--spacing-sm);
            }

            .devotion-hero h1 {
                font-size: var(--font-3xl);
            }

            .devotion-hero h2 {
                font-size: var(--font-lg);
            }

            .devotion-controls {
                /* Avoid heavy overlap with hero and tighten padding */
                margin-top: var(--spacing-sm);
                padding: var(--spacing-sm);
                gap: var(--spacing-sm);
            }

            .devotion-controls-row {
                flex-direction: column;
                align-items: center;
                justify-content: center;
                gap: var(--spacing-xs);
            }

            .devotion-controls-row.date-row,
            .devotion-controls-row.jump-row {
                flex-direction: column;
            }

            .devotion-meta {
                justify-content: center;
                margin-top: var(--spacing-xs);
            }

            /* iOS / Tablet Horizontal Scroll Lock — SAFE FIX */
            .date-strip-wrapper {
                justify-content: center;
                padding: 0;
                max-width: 100%;
                overflow: hidden;
            }

            .date-strip {
                flex-wrap: nowrap;
                justify-content: flex-start;
                overflow-x: auto;
                overflow-y: hidden;
                -webkit-overflow-scrolling: touch;
                scrollbar-width: none;
                -ms-overflow-style: none;
                width: 100%;
                max-width: 100%;
            }

            .date-strip::-webkit-scrollbar {
                display: none;
            }

            .date-strip .date-pill {
                flex-shrink: 0;
                min-width: 70px;
                padding: var(--spacing-xs) var(--spacing-sm);
            }

            .language-toggle button {
                padding: var(--spacing-xs) var(--spacing-md);
            }

            .jump-controls {
                width: 100%;
                justify-content: center;
                gap: var(--spacing-sm);
                flex-wrap: wrap;
            }

            /* Keep dropdowns and Go button aligned and touch-friendly */
            .jump-controls select,
            .jump-controls button {
                min-height: 44px;
            }

            .jump-controls select {
                flex: 1 1 42%;
                min-width: 120px;
            }

            .jump-controls button {
                flex: 0 0 auto;
                min-width: 64px;
            }

            /* Reduce excess space before first card */
            .devotion-container {
                padding-top: var(--spacing-sm);
                margin-top: var(--spacing-md);
            }

            .devotion-container {
                padding: var(--spacing-lg) var(--spacing-sm);
            }

            .devotion-section {
                padding: var(--spacing-md);
            }

            .scripture-text {
                font-size: var(--font-base);
            }

            .share-buttons {
                gap: var(--spacing-sm);
            }

            .date-nav-btn {
                font-size: var(--font-lg);
            }

            /* TASK 1: Stack devotion navigation buttons vertically on mobile */
            .devotion-navigation {
                flex-direction: column;
                gap: var(--spacing-sm);
                padding-left: clamp(16px, 5vw, 32px);
                padding-right: clamp(16px, 5vw, 32px);
            }

            .devotion-nav-btn {
                width: 100%;
                max-width: 320px;
                margin: 0 auto;
                justify-content: center;
            }

            .devotion-nav-btn.prev:hover,
            .devotion-nav-btn.next:hover {
                transform: translateY(-1px);
            }

            /* TASK 2: Fix date pill sizing - ensure minimum touch targets */
            .date-pill {
                min-height: 44px;
                height: auto;
                padding: 8px 12px;
                flex-shrink: 0;
            }

            /* TASK 4: Safe area padding enforcement */


            .share-btn {
                font-size: var(--font-sm);
                padding: var(--spacing-sm) var(--spacing-md);
            }

            /* ===== iPad-only horizontal overflow fix (safe, non-breaking) ===== */
            /* Prevent any element from causing horizontal overflow on mobile/tablet */

            /* Force all content to stay within viewport */
            html,
            body {
                overflow-x: clip !important;
                max-width: 100% !important;
                width: 100%;
            }

            /* Lock all containers to viewport width */
            * {
                max-width: 100%;
            }

            /* Ensure date-strip-wrapper doesn't overflow */
            .date-strip-wrapper {
                max-width: 100%;
                width: 100%;
                overflow: hidden;
                padding: 0;
                box-sizing: border-box;
            }

            /* Make date-strip scrollable horizontally within its container */
            .date-strip {
                overflow-x: auto;
                overflow-y: hidden;
                -webkit-overflow-scrolling: touch;
                scrollbar-width: none;
                -ms-overflow-style: none;
                width: 100%;
                max-width: 100%;
                box-sizing: border-box;
                flex-wrap: nowrap;
            }

            /* Hide scrollbar on Webkit browsers */
            .date-strip::-webkit-scrollbar {
                display: none;
            }

            /* Ensure date pills don't cause overflow */
            .date-pill {
                flex-shrink: 0;
                min-width: 70px;
                max-width: 80px;
                padding: var(--spacing-xs) var(--spacing-sm);
                box-sizing: border-box;
            }

            /* Ensure navigation buttons don't overflow */
            .date-nav-btn {
                flex-shrink: 0;
                min-width: 40px;
                padding: var(--spacing-xs) var(--spacing-sm);
            }

            /* Constrain all containers to viewport width */
            .devotion-controls,
            .devotion-container,
            .devotion-section,
            .share-section,
            main {
                max-width: 100%;
                width: 100%;
                box-sizing: border-box;
                overflow-x: clip;
            }

            /* iPad-only horizontal overflow fix (safe, non-breaking) */
            /* Ensure date strip container doesn't cause page scroll */
            .date-strip-wrapper {
                contain: layout;
            }

            /* Prevent any overflow from transforms or shadows */
            .date-pill,
            .date-nav-btn,
            .share-btn,
            .devotion-nav-btn {
                will-change: auto;
            }

            /* iPad-only horizontal overflow fix (safe, non-breaking) */
            @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {

                html,
                body {
                    overflow-x: hidden;
                    width: 100vw;
                }
            }

            /* ==========================================================================
           SACRED PREMIUM MOBILE LAYOUT RULES (The "Constitution")
           - Strictly scoped to .page-daily-devotion
           - Enforces safe areas, rhythm, and touch targets
           ========================================================================== */

            body.page-daily-devotion {
                /* 1. Safe Layout & Grid System */
                --safe-inline-padding: clamp(16px, 4vw, 40px);
                /* Step 3 Requirement */
                --dd-safe-x: var(--safe-inline-padding);
                --surface-card: var(--bg-card);
                /* Step 8 Token Mapping */
                --border-subtle: rgba(0, 0, 0, 0.1);
                --elevation-soft: 0 4px 12px rgba(0, 0, 0, 0.05);
                /* Fluid horizontal padding */
                --dd-max-width: 900px;
                /* Optimal reading width */

                /* 2. Vertical Rhythm Scale (8pt grid) */
                --dd-space-xs: 8px;
                --dd-space-sm: 16px;
                --dd-space-md: 24px;
                --dd-space-lg: 32px;
                --dd-space-xl: 48px;
                --dd-space-xxl: 64px;

                /* 3. Interaction Standards */
                --dd-touch-min: 44px;
                /* Minimum touch target size */
                --dd-radius-card: 24px;
                /* Premium rounded corners */
                --dd-radius-btn: 9999px;
                /* Pill shape */

                /* 4. Performance Guard */
                --dd-backdrop-blur: 10px;
                /* Standard blur (reduce on low-end if needed) */
            }

            /* LAYOUT GUARD: Base Container Enforcement */
            body.page-daily-devotion .devotion-container,
            body.page-daily-devotion .devotion-content,
            body.page-daily-devotion .devotion-share-panel,
            body.page-daily-devotion .invite-funnel-section {
                width: 100%;
                max-width: var(--dd-max-width);
                margin-left: auto;
                margin-right: auto;
                padding-left: var(--dd-safe-x);
                padding-right: var(--dd-safe-x);
                box-sizing: border-box;
            }

            /*
           !!! LAYOUT GUARD END !!!
           DO NOT OVERRIDE the above variables or container rules globally.
           Any modifications must be scoped to specific components or temporary states.
           Stability is paramount for the sacred reading experience.
        */
            /* Ensure hero section doesn't overflow */
            .devotion-hero {
                max-width: 100%;
                width: 100%;
                overflow: hidden;
                box-sizing: border-box;
            }

            /* Prevent text content from causing overflow */
            .scripture-text,
            .devotion-text {
                word-wrap: break-word;
                overflow-wrap: break-word;
                max-width: 100%;
            }

            /* Ensure images don't overflow */
            img {
                max-width: 100%;
                height: auto;
            }

            /* Fix share buttons on mobile */
            .share-buttons {
                max-width: 100%;
                justify-content: center;
                flex-wrap: wrap;
            }

            /* Ensure jump controls don't overflow */
            .jump-controls {
                max-width: 100%;
                box-sizing: border-box;
            }

            .jump-controls select {
                max-width: 45%;
            }

            /* Prevent text content from causing overflow */
            .scripture-text,
            .devotion-text {
                word-wrap: break-word;
                overflow-wrap: break-word;
                max-width: 100%;
            }

            /* Ensure images don't overflow */
            img {
                max-width: 100%;
                height: auto;
            }

            /* Fix share buttons on mobile */
            .share-buttons,
            .simple-share-buttons {
                max-width: 100%;
                justify-content: center;
                flex-wrap: wrap;
            }

            /* Prevent flex/grid items from overflowing */
            .devotion-controls-row>*,
            .jump-controls>*,
            .simple-share-buttons>* {
                min-width: 0;
                flex-shrink: 1;
            }
        }

        /* ===== iPad-only horizontal overflow fix (safe, non-breaking) ===== */
        /* Dedicated iPad media query to prevent horizontal scrolling */
        @media (min-width: 768px) and (max-width: 1024px) {

            /* Lock viewport at root level */
            html {
                overflow-x: clip !important;
                max-width: 100% !important;
            }

            body {
                overflow-x: clip !important;
                max-width: 100% !important;
            }

            /* Ensure header/nav stays within viewport */

            /* Contain all major sections */
            main,
            .devotion-hero,
            .devotion-controls,
            .devotion-container,
            .devotion-section,
            .share-section {
                max-width: 100%;
                width: 100%;
                box-sizing: border-box;
                overflow-x: clip;
            }

            /* Prevent box-shadows from extending beyond viewport */
            .devotion-controls,
            .devotion-section,
            .share-section {
                box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
            }

            /* Ensure date strip doesn't cause page overflow */
            .date-strip-wrapper {
                max-width: 100%;
                overflow: hidden;
            }

            .date-strip {
                overflow-x: auto;
                overflow-y: hidden;
                -webkit-overflow-scrolling: touch;
            }

            /* Replace horizontal transforms with safe alternatives */
            .devotion-nav-btn:hover {
                transform: translateY(-1px);
            }

            /* Prevent any translateX that might cause overflow */
            .share-btn:hover {
                transform: scale(0.98);
            }

            /* Ensure all images respect viewport */
            img {
                max-width: 100% !important;
                height: auto;
            }
        }

        /* =========================================
   🌟 DARK MODE ACTION CARDS — SACRED PREMIUM
   Added at end of file for proper cascade
   ========================================= */

        /* Dark Mode Action Cards - Structured Depth */


        /* Gold Sacred Titles in Dark Mode */



        /* ==========================================================================
   PHASE 10: PREMIUM SURFACE HIERARCHY & SAFETY (FINAL POLISH)
   Strictly enforced rules for card surfaces, padding, and containment.
   ========================================================================== */

        /* STEP 1: REMOVE BLACK SECTION BACKGROUNDS */
        .invite-funnel-section,
        .action-buttons-section,
        .share-devotion-section,
        .devotion-navigation-section,
        .devotion-navigation,
        /* Sacred Glass Share Panel - DO NOT override with transparent */
        .devotion-share-panel {
            /* Removed transparent override - Sacred Glass surface applied below */
        }

        /* STEP 2: ENFORCE CARD-ONLY SURFACE SYSTEM */
        .funnel-card,
        .share-card,
        .devotion-card,
        .reflection-card,
        .prayer-card {
            background: var(--surface-card, #ffffff);
            border: 1px solid var(--border-subtle, rgba(0, 0, 0, 0.1));
            box-shadow: var(--elevation-soft, 0 2px 8px rgba(0, 0, 0, 0.05));
            border-radius: 16px;
            padding: var(--spacing-lg);
            /* Ensure padding */
        }

        /* STEP 3: GLOBAL SAFE CONTENT PADDING SYSTEM */
        /* Applied via --safe-inline-padding in body.page-daily-devotion */
        .daily-devotion-main,
        .devotion-container,
        .section-container {
            padding-inline: var(--safe-inline-padding);
        }

        @media (max-width: 480px) {

            .daily-devotion-main,
            .devotion-container {
                padding-inline: 16px !important;
            }
        }

        /* STEP 4: FIX NEXT / PREVIOUS DEVOTION MOBILE OVERFLOW */
        .devotion-navigation {
            display: flex;
            gap: 12px;
            flex-wrap: wrap;
            justify-content: center;
            width: 100%;
        }

        .devotion-nav-btn {
            flex: 1 1 140px;
            max-width: 100%;
            white-space: normal;
        }

        @media (max-width: 480px) {
            .devotion-navigation {
                flex-direction: column;
            }

            .devotion-nav-btn {
                width: 100%;
                flex: 1 1 auto;
            }
        }

        /* STEP 5: FIX DATE PILL WRAPPING */
        .date-pill {
            min-width: 72px;
            padding: 8px 12px;
            text-align: center;
            line-height: 1.2;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: auto;
        }

        .date-pill strong {
            display: block;
            font-size: 14px;
        }

        .date-pill span {
            display: block;
            font-size: 11px;
            opacity: 0.8;
        }

        /* STEP 6: FIX SHARE BUTTON OVERFLOW (USE HORIZONTAL SCROLL) */
        /* Apply to multiple potential containers for safety */
        .share-actions,
        .share-buttons-row,
        .share-actions-grid,
        .simple-share-buttons {
            display: flex;
            gap: 12px;
            overflow-x: auto;
            padding-bottom: 4px;
            scroll-snap-type: x mandatory;
            scrollbar-width: none;
            /* Premium Cleanliness */
            flex-wrap: nowrap;
            justify-content: flex-start;
            /* Ensure start alignment for scroll */
        }

        .share-actions>*,
        .share-buttons-row>*,
        .share-actions-grid>*,
        .simple-share-buttons>* {
            flex: 0 0 auto;
            scroll-snap-align: start;
            min-width: max-content;
            /* Ensure items don't squash */
        }

        /* STEP 7: FUNNEL GRID RESPONSIVE STABILITY */
        .funnel-grid {
            display: grid !important;
            gap: 24px;
            grid-template-columns: repeat(3, 1fr);
        }

        @media (max-width: 1024px) {
            .funnel-grid {
                grid-template-columns: repeat(2, 1fr);
            }
        }

        @media (max-width: 640px) {
            .funnel-grid {
                grid-template-columns: 1fr;
            }
        }

        /* DARKEN TOKENS FOR DARK MODE */
        body.page-daily-devotion.dark .funnel-card,
        body.page-daily-devotion.dark .share-card,
        body.page-daily-devotion.dark .devotion-card,
        body.page-daily-devotion.dark .reflection-card,
        body.page-daily-devotion.dark .prayer-card,
        body.page-daily-devotion[data-theme="dark"] .funnel-card,
        body.page-daily-devotion[data-theme="dark"] .share-card,
        body.page-daily-devotion[data-theme="dark"] .devotion-card,
        body.page-daily-devotion[data-theme="dark"] .reflection-card,
        body.page-daily-devotion[data-theme="dark"] .prayer-card {
            background: rgba(30, 41, 59, 0.6);
            /* Match card-bg-dark */
            border-color: rgba(255, 255, 255, 0.1);
        }


        /* ========================================
           PAGE-SCOPED LAYOUT ALIGNMENT FIXES
           Daily Devotion Page Only
           ======================================== */

        /* Prevent horizontal overflow on entire page */
        body.page-daily-devotion {
            overflow-x: hidden;
            width: 100%;
            max-width: 100vw;
        }

        /* Fix main content centering - replace fixed margins with responsive auto */
        body.page-daily-devotion .devotion-controls,
        body.page-daily-devotion .devotion-container {
            margin-left: auto;
            margin-right: auto;
            max-width: 800px;
            width: 100%;
            box-sizing: border-box;
        }

        /* Ensure consistent safe area padding */
        body.page-daily-devotion .devotion-controls {
            padding: var(--spacing-lg) var(--spacing-md);
            margin-top: var(--spacing-xl);
            margin-bottom: var(--spacing-xl);
        }

        body.page-daily-devotion .devotion-container {
            padding: var(--spacing-xl) var(--spacing-md);
        }

        /* Consistent max-width for all sections */
        body.page-daily-devotion .devotion-section {
            max-width: 100%;
            width: 100%;
            box-sizing: border-box;
        }

        /* Fix footer sections overflow */
        body.page-daily-devotion footer .footer-section {
            max-width: 100%;
            width: 100%;
            box-sizing: border-box;
        }

        body.page-daily-devotion footer .footer-content {
            max-width: 100%;
            overflow-x: hidden;
        }

        /* Fix share buttons wrapping */
        body.page-daily-devotion .simple-share-buttons {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: var(--spacing-sm);
            max-width: 100%;
        }

        body.page-daily-devotion .simple-share-btn {
            flex: 0 1 auto;
            min-width: 0;
            max-width: 100%;
        }

        /* iPad: Add safe area padding (768-1024px) */
        @media (min-width: 768px) and (max-width: 1024px) {

            body.page-daily-devotion .devotion-controls,
            body.page-daily-devotion .devotion-container {
                padding-left: var(--spacing-lg);
                padding-right: var(--spacing-lg);
            }
        }

        /* Mobile: Ensure minimum safe padding (< 768px) */
        @media (max-width: 767px) {

            body.page-daily-devotion .devotion-controls,
            body.page-daily-devotion .devotion-container {
                padding-left: var(--spacing-md);
                padding-right: var(--spacing-md);
            }

            /* Mobile-specific overflow fixes */
            body.page-daily-devotion footer .footer-content {
                max-width: 100%;
                overflow-x: hidden;
            }

            body.page-daily-devotion footer .footer-section {
                width: 100%;
                min-width: 0;
            }

            /* Ensure share buttons wrap properly on small screens */
            body.page-daily-devotion .simple-share-buttons {
                flex-direction: row;
                gap: var(--spacing-xs);
            }

            body.page-daily-devotion .simple-share-btn {
                flex: 1 1 calc(50% - var(--spacing-xs));
                min-width: 120px;
                max-width: calc(50% - var(--spacing-xs));
            }
        }

        /* Desktop: Comfortable reading width (> 1024px) */
        @media (min-width: 1025px) {

            body.page-daily-devotion .devotion-controls,
            body.page-daily-devotion .devotion-container {
                max-width: 800px;
                padding-left: var(--spacing-lg);
                padding-right: var(--spacing-lg);
            }
        }

        /* ========================================
   SACRED QUOTE CARD
   Premium hero card for daily scripture
   ======================================== */

        body.page-daily-devotion .sacred-quote-card {
            position: relative;
            max-width: 800px;
            margin: var(--spacing-xl) auto;
            padding: var(--spacing-xl);
            background: var(--bg-card);
            border: 1px solid var(--border-subtle);
            border-radius: var(--radius-xl);
            box-shadow: var(--shadow-card);
            overflow: hidden;
            isolation: isolate;
        }

        /* Watermark Background */
        body.page-daily-devotion .sacred-quote-watermark {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 300px;
            height: 300px;
            opacity: 0.03;
            pointer-events: none;
            z-index: 0;
        }

        body.page-daily-devotion .sacred-quote-watermark img {
            width: 100%;
            height: 100%;
            object-fit: contain;
        }

        /* Content Container */
        body.page-daily-devotion .sacred-quote-content {
            position: relative;
            z-index: 1;
        }

        /* Date (Top Right) */
        body.page-daily-devotion .sacred-quote-date {
            position: absolute;
            top: 0;
            right: 0;
            font-size: 0.875rem;
            font-weight: 500;
            color: var(--text-muted);
            letter-spacing: 0.05em;
            text-transform: uppercase;
        }

        /* Bible Reference (Most Prominent) */
        body.page-daily-devotion .sacred-quote-reference {
            margin: 0 0 var(--spacing-lg) 0;
            padding-top: var(--spacing-md);
            font-size: 2rem;
            font-weight: 700;
            color: var(--brand-primary);
            line-height: 1.2;
            display: flex;
            align-items: center;
            gap: var(--spacing-sm);
        }

        body.page-daily-devotion .book-icon {
            font-size: 1.75rem;
            flex-shrink: 0;
        }

        /* Scripture Verse */
        body.page-daily-devotion .sacred-quote-verse {
            margin: 0;
            margin-bottom: 16px;
            /* Golden polish breathing space */
            padding: 0;
            font-size: 1.25rem;
            font-weight: 400;
            font-style: italic;
            color: var(--text-heading);
            line-height: 1.6;
            position: relative;
        }

        body.page-daily-devotion .quote-mark-open,
        body.page-daily-devotion .quote-mark-close {
            font-size: 3rem;
            font-weight: 700;
            color: var(--brand-primary);
            opacity: 0.3;
            line-height: 0;
            font-style: normal;
        }

        body.page-daily-devotion .quote-mark-open {
            margin-right: 0.25rem;
            vertical-align: top;
        }

        body.page-daily-devotion .quote-mark-close {
            margin-left: 0.25rem;
            vertical-align: bottom;
        }

        /* ========================================
   DARK MODE - Sacred Quote Card
   ======================================== */

        body.page-daily-devotion.dark .sacred-quote-card,
        body.page-daily-devotion[data-theme="dark"] .sacred-quote-card,
        html.dark body.page-daily-devotion .sacred-quote-card {
            background: rgba(30, 41, 59, 0.6);
            border-color: rgba(255, 255, 255, 0.1);
            box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4),
                0 0 20px rgba(37, 99, 235, 0.1);
        }

        body.page-daily-devotion.dark .sacred-quote-watermark,
        body.page-daily-devotion[data-theme="dark"] .sacred-quote-watermark,
        html.dark body.page-daily-devotion .sacred-quote-watermark {
            opacity: 0.05;
        }

        body.page-daily-devotion.dark .sacred-quote-date,
        body.page-daily-devotion[data-theme="dark"] .sacred-quote-date,
        html.dark body.page-daily-devotion .sacred-quote-date {
            color: rgba(148, 163, 184, 0.8);
        }

        body.page-daily-devotion.dark .sacred-quote-reference,
        body.page-daily-devotion[data-theme="dark"] .sacred-quote-reference,
        html.dark body.page-daily-devotion .sacred-quote-reference {
            color: #60a5fa;
        }

        body.page-daily-devotion.dark .sacred-quote-verse,
        body.page-daily-devotion[data-theme="dark"] .sacred-quote-verse,
        html.dark body.page-daily-devotion .sacred-quote-verse {
            color: #ffffff;
        }

        body.page-daily-devotion.dark .quote-mark-open,
        body.page-daily-devotion.dark .quote-mark-close,
        body.page-daily-devotion[data-theme="dark"] .quote-mark-open,
        body.page-daily-devotion[data-theme="dark"] .quote-mark-close,
        html.dark body.page-daily-devotion .quote-mark-open,
        html.dark body.page-daily-devotion .quote-mark-close {
            color: #60a5fa;
            opacity: 0.4;
        }

        /* ========================================
   RESPONSIVE - Sacred Quote Card
   ======================================== */

        /* iPad (768-1024px) */
        @media (min-width: 768px) and (max-width: 1024px) {
            body.page-daily-devotion .sacred-quote-card {
                padding: var(--spacing-lg);
                margin: var(--spacing-lg) auto;
            }

            body.page-daily-devotion .sacred-quote-reference {
                font-size: 1.75rem;
            }

            body.page-daily-devotion .sacred-quote-verse {
                font-size: 1.125rem;
            }

            body.page-daily-devotion .sacred-quote-watermark {
                width: 250px;
                height: 250px;
            }
        }

        /* Mobile (<768px) */
        @media (max-width: 767px) {
            body.page-daily-devotion .sacred-quote-card {
                padding: var(--spacing-md);
                margin: var(--spacing-md) auto;
            }

            body.page-daily-devotion .sacred-quote-date {
                position: static;
                display: block;
                margin-bottom: var(--spacing-sm);
                font-size: 0.75rem;
            }

            body.page-daily-devotion .sacred-quote-reference {
                font-size: 1.5rem;
                padding-top: 0;
                margin-bottom: var(--spacing-md);
            }

            body.page-daily-devotion .book-icon {
                font-size: 1.5rem;
            }

            body.page-daily-devotion .sacred-quote-verse {
                font-size: 1rem;
            }

            body.page-daily-devotion .quote-mark-open,
            body.page-daily-devotion .quote-mark-close {
                font-size: 2rem;
            }

            body.page-daily-devotion .sacred-quote-watermark {
                width: 200px;
                height: 200px;
            }
        }

        /* ========================================
   SOCIAL SHARE ENGINE
   Share Today Button + Share Panel + Toast
   ======================================== */

        /* Share Today Button */
        body.page-daily-devotion .share-today-wrapper {
            max-width: 800px;
            margin: var(--spacing-lg) auto;
            margin-top: 48px;
            /* Golden Sacred Spacing - brings into yellow box area */
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 16px;
            /* STEP 2 — Consistent gap spacing */
            flex-wrap: wrap;
            /* STEP 2 — Responsive wrapping */
            width: 100%;
            padding: 0 var(--dd-safe-x);
        }

        body.page-daily-devotion .share-today-btn {
            display: inline-flex;
            align-items: center;
            gap: var(--spacing-sm);
            padding: var(--spacing-md) var(--spacing-xl);
            background: var(--brand-primary);
            color: var(--text-inverse);
            border: none;
            border-radius: var(--radius-full);
            font-size: 1.125rem;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            box-shadow: var(--shadow-soft);
        }

        body.page-daily-devotion .share-today-btn:hover {
            background: var(--color-primary-dark);
            transform: translateY(-2px);
            box-shadow: var(--shadow-card);
        }

        body.page-daily-devotion .share-today-btn:active {
            transform: translateY(0);
        }

        body.page-daily-devotion .share-icon {
            font-size: 1.25rem;
            line-height: 1;
        }

        /* Share Card Trigger Button */
        body.page-daily-devotion .share-card-trigger {
            display: inline-flex;
            align-items: center;
            gap: var(--spacing-sm);
            padding: var(--spacing-md) var(--spacing-xl);
            background: var(--color-surface);
            color: var(--text-body);
            border: 2px solid var(--color-border);
            border-radius: var(--radius-full);
            font-size: 1.125rem;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        body.page-daily-devotion .share-card-trigger:hover {
            border-color: var(--brand-primary);
            color: var(--brand-primary);
            transform: translateY(-2px);
            box-shadow: var(--shadow-sm);
        }

        body.page-daily-devotion .share-card-trigger-icon {
            font-size: 1.25rem;
            line-height: 1;
        }

        /* Premium Share Panel */
        body.page-daily-devotion .devotion-share-panel {
            position: relative !important;
            transform: none !important;
            margin-top: 20px;
            padding: var(--dd-space-lg);
            background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(250, 248, 245, 0.95));
            border-radius: var(--dd-radius-card);
            border: 2px solid rgba(30, 58, 138, 0.1);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
            z-index: auto;
        }

        body.page-daily-devotion .devotion-share-panel h4 {
            margin: 0 0 var(--spacing-lg) 0;
            font-size: 1.25rem;
            font-weight: 700;
            color: var(--text-heading);
            text-align: center;
            letter-spacing: -0.02em;
        }

        /* Responsive Grid/Slider Container */
        body.page-daily-devotion .share-actions-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
            gap: 12px;
            max-width: 900px;
            margin: 0 auto;
        }

        /* Share Action Buttons - Base Styles */
        body.page-daily-devotion .share-action-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            padding: 14px 20px;
            background: rgba(255, 255, 255, 0.95);
            border: 2px solid rgba(30, 58, 138, 0.2);
            border-radius: 12px;
            font-size: 0.9375rem;
            font-weight: 600;
            color: var(--text-heading);
            text-decoration: none;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            cursor: pointer;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
            min-height: 52px;
        }

        body.page-daily-devotion .share-action-btn:hover {
            border-color: rgba(124, 58, 237, 0.4);
            background: rgba(255, 255, 255, 1);
            transform: translateY(-2px);
            box-shadow: 0 6px 12px rgba(124, 58, 237, 0.15);
        }

        body.page-daily-devotion .share-action-btn:active {
            transform: translateY(0);
        }

        body.page-daily-devotion .share-action-btn:focus-visible {
            outline: 3px solid rgba(124, 58, 237, 0.5);
            outline-offset: 2px;
        }

        /* Primary Button (Share Card) - Sacred Purple Gradient */
        body.page-daily-devotion .share-action-btn.primary {
            background: linear-gradient(135deg, #7c3aed, #6d28d9);
            border-color: #7c3aed;
            color: white;
            box-shadow: 0 4px 12px rgba(124, 58, 237, 0.25);
        }

        body.page-daily-devotion .share-action-btn.primary:hover {
            background: linear-gradient(135deg, #6d28d9, #5b21b6);
            border-color: #6d28d9;
            transform: translateY(-3px);
            box-shadow: 0 8px 16px rgba(124, 58, 237, 0.35);
        }

        body.page-daily-devotion .share-action-btn.primary .btn-label {
            color: white;
        }

        /* SVG Icon Styles */
        body.page-daily-devotion .btn-icon {
            width: 20px;
            height: 20px;
            flex-shrink: 0;
            stroke-width: 2;
            stroke-linecap: round;
            stroke-linejoin: round;
        }

        body.page-daily-devotion .share-action-btn.primary .btn-icon {
            stroke: white;
        }

        body.page-daily-devotion .btn-label {
            font-weight: 600;
            letter-spacing: -0.01em;
        }

        /* Mobile: Horizontal Scroll Slider with Fade Edges */
        @media (max-width: 768px) {

            /* MOBILE GPU STABILITY (CRITICAL) */
            body.page-daily-devotion .devotion-share-panel,
            body.page-daily-devotion .share-devotion-card {
                background-color: rgba(24, 24, 27, 0.88);
                border-radius: 18px;
                transform: translateZ(0);
                will-change: transform;
            }

            body.page-daily-devotion .share-actions-grid {
                display: flex;
                flex-direction: row;
                overflow-x: auto;
                overflow-y: hidden;
                scroll-snap-type: x mandatory;
                gap: 10px;
                /* STEP 7 — BUTTON GRID MOBILE BALANCE */
                padding: 0 clamp(16px, 5vw, 32px);
                -webkit-overflow-scrolling: touch;
                scrollbar-width: none;
                grid-template-columns: none;
                max-width: none;
                margin: 0 calc(-1 * var(--spacing-xl));
                padding-top: 4px;
                padding-bottom: 4px;
            }

            body.page-daily-devotion .share-actions-grid::-webkit-scrollbar {
                display: none;
            }

            body.page-daily-devotion .share-action-btn {
                flex-shrink: 0;
                scroll-snap-align: start;
                min-width: 150px;
                width: 150px;
                min-height: 48px;
                /* STEP 7 — BUTTON GRID MOBILE BALANCE */
            }

            /* Fade edge effect on right */
            /* Fade edge effect removed per user request */
        }

        /* MOBILE GPU STABILITY - Extra Small Screens */
        @media (max-width: 640px) {

            body.page-daily-devotion .devotion-share-panel,
            body.page-daily-devotion .share-devotion-card {
                background-color: rgba(24, 24, 27, 0.88);
                transform: translateZ(0);
                will-change: transform;
            }
        }

        body.page-daily-devotion .btn-icon {
            font-size: 1.5rem;
            line-height: 1;
        }

        body.page-daily-devotion .btn-label {
            font-size: 0.875rem;
            font-weight: 600;
            color: var(--text-body);
            text-align: center;
        }

        /* Toast Notification */
        body.page-daily-devotion .share-toast {
            position: fixed;
            bottom: -100px;
            left: 50%;
            transform: translateX(-50%);
            background: #1e293b;
            color: #ffffff;
            padding: var(--spacing-md) var(--spacing-xl);
            border-radius: var(--radius-full);
            box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
            font-size: 0.9375rem;
            font-weight: 500;
            z-index: 9999;
            transition: bottom 0.3s ease;
            max-width: 90%;
            text-align: center;
        }

        body.page-daily-devotion .share-toast.show {
            bottom: 30px;
        }

        body.page-daily-devotion .share-toast.error {
            background: #dc2626;
        }

        /* ========================================
   DARK MODE - Social Share Engine
   ======================================== */

        body.page-daily-devotion.dark .share-today-btn,
        body.page-daily-devotion[data-theme="dark"] .share-today-btn,
        html.dark body.page-daily-devotion .share-today-btn {
            background: #60a5fa;
            color: #0f172a;
        }

        body.page-daily-devotion.dark .share-today-btn:hover,
        body.page-daily-devotion[data-theme="dark"] .share-today-btn:hover,
        html.dark body.page-daily-devotion .share-today-btn:hover {
            background: #3b82f6;
        }

        /* Dark Mode - Sacred Glass Surface (Legacy Support) */
        body.page-daily-devotion.dark .devotion-share-panel,
        body.page-daily-devotion[data-theme="dark"] .devotion-share-panel,
        html.dark body.page-daily-devotion .devotion-share-panel {
            background: rgba(20, 30, 50, 0.65);
            border: 1px solid rgba(255, 255, 255, 0.08);
            box-shadow:
                0 10px 30px rgba(0, 0, 0, 0.35),
                inset 0 0 0 1px rgba(255, 255, 255, 0.04);
        }

        body.page-daily-devotion.dark .devotion-share-panel h4,
        body.page-daily-devotion[data-theme="dark"] .devotion-share-panel h4,
        html.dark body.page-daily-devotion .devotion-share-panel h4 {
            color: #ffffff;
        }

        /* Dark Mode - Share Buttons */
        body.page-daily-devotion.dark .share-action-btn,
        body.page-daily-devotion[data-theme="dark"] .share-action-btn,
        html.dark body.page-daily-devotion .share-action-btn {
            background: rgba(30, 41, 59, 0.8);
            border-color: rgba(148, 163, 184, 0.3);
            color: #ffffff;
        }

        body.page-daily-devotion.dark .share-action-btn:hover,
        body.page-daily-devotion[data-theme="dark"] .share-action-btn:hover,
        html.dark body.page-daily-devotion .share-action-btn:hover {
            background: rgba(71, 85, 105, 0.8);
            border-color: #60a5fa;
        }

        body.page-daily-devotion.dark .share-action-btn.primary,
        body.page-daily-devotion[data-theme="dark"] .share-action-btn.primary,
        html.dark body.page-daily-devotion .share-action-btn.primary {
            background: #60a5fa;
            border-color: #60a5fa;
            color: #0f172a;
        }

        body.page-daily-devotion.dark .share-action-btn.primary:hover,
        body.page-daily-devotion[data-theme="dark"] .share-action-btn.primary:hover,
        html.dark body.page-daily-devotion .share-action-btn.primary:hover {
            background: #3b82f6;
            border-color: #3b82f6;
        }

        body.page-daily-devotion.dark .share-action-btn.primary .btn-label,
        body.page-daily-devotion[data-theme="dark"] .share-action-btn.primary .btn-label,
        html.dark body.page-daily-devotion .share-action-btn.primary .btn-label {
            color: #0f172a;
        }

        body.page-daily-devotion.dark .btn-label,
        body.page-daily-devotion[data-theme="dark"] .btn-label,
        html.dark body.page-daily-devotion .btn-label {
            color: #e2e8f0;
        }

        body.page-daily-devotion.dark .share-toast,
        body.page-daily-devotion[data-theme="dark"] .share-toast,
        html.dark body.page-daily-devotion .share-toast {
            background: rgba(255, 255, 255, 0.95);
            color: #0f172a;
        }

        body.page-daily-devotion.dark .share-toast.error,
        body.page-daily-devotion[data-theme="dark"] .share-toast.error,
        html.dark body.page-daily-devotion .share-toast.error {
            background: #dc2626;
            color: #ffffff;
        }

        /* ========================================
   RESPONSIVE - Social Share Engine
   ======================================== */

        /* iPad (768-1024px) */
        @media (min-width: 768px) and (max-width: 1024px) {

            /* Share buttons remain as slider on tablet */
            body.page-daily-devotion .share-today-btn {
                font-size: 1rem;
                padding: var(--spacing-sm) var(--spacing-lg);
            }
        }

        /* Desktop (>1024px) */
        @media (min-width: 1025px) {

            /* Share buttons remain as slider on desktop */
            body.page-daily-devotion .share-today-btn {
                max-width: 300px;
            }
        }

        /* Mobile (<768px) */
        @media (max-width: 767px) {
            body.page-daily-devotion .share-today-btn {
                width: 100%;
                max-width: 100%;
                padding: var(--spacing-sm) var(--spacing-md);
                font-size: 0.9375rem;
            }

            body.page-daily-devotion .share-today-wrapper {
                padding: 0 var(--spacing-md);
                margin-top: 36px;
                /* Golden mobile sacred spacing */
                justify-content: center;
                /* STEP 3 — Centered mobile layout */
            }

            body.page-daily-devotion .share-toast {
                bottom: -100px;
                max-width: calc(100% - 40px);
                font-size: 0.875rem;
                padding: var(--spacing-sm) var(--spacing-md);
            }

            body.page-daily-devotion .share-toast.show {
                bottom: 20px;
            }
        }

        /* ========================================
   PROGRESSIVE DISCLOSURE - Jump Bar & Collapsible Sections
   ======================================== */

        /* Jump Bar Navigation */
        body.page-daily-devotion .devotion-jump-bar {
            max-width: 800px;
            margin: var(--spacing-md) auto;
            padding: var(--spacing-sm) var(--spacing-md);
            display: flex;
            justify-content: center;
            align-items: center;
            flex-wrap: wrap;
            gap: var(--spacing-xs);
            background: var(--bg-card);
            border: 1px solid var(--border-subtle);
            border-radius: var(--radius-full);
            box-shadow: var(--shadow-soft);
            transition: all 0.3s ease;
        }

        body.page-daily-devotion .jump-link {
            padding: var(--spacing-xs) var(--spacing-sm);
            color: var(--text-body);
            text-decoration: none;
            font-size: 0.9375rem;
            font-weight: 500;
            border-radius: var(--radius-md);
            transition: all 0.2s ease;
        }

        body.page-daily-devotion .jump-link:hover,
        body.page-daily-devotion .jump-link:focus {
            color: var(--brand-primary);
            background: var(--bg-section);
            outline: none;
        }

        body.page-daily-devotion .jump-separator {
            color: var(--text-muted);
            font-size: 0.75rem;
            user-select: none;
        }

        /* Collapsible Section Structure */
        body.page-daily-devotion .collapsible-section {
            overflow: hidden;
        }

        /* Section Toggle Button */
        body.page-daily-devotion .section-toggle {
            width: 100%;
            display: flex;
            align-items: center;
            gap: var(--spacing-sm);
            padding: var(--spacing-md);
            background: transparent;
            border: none;
            cursor: pointer;
            transition: background 0.2s ease;
            border-radius: var(--radius-md);
        }

        body.page-daily-devotion .section-toggle:hover,
        body.page-daily-devotion .section-toggle:focus {
            background: var(--bg-section);
            outline: 2px solid var(--brand-primary);
            outline-offset: 2px;
        }

        body.page-daily-devotion .section-toggle h3 {
            flex: 1;
            text-align: left;
            margin: 0;
            font-size: 1.5rem;
            font-weight: 600;
            color: var(--text-heading);
        }

        body.page-daily-devotion .section-icon {
            font-size: 1.5rem;
            line-height: 1;
        }

        body.page-daily-devotion .toggle-icon {
            font-size: 0.875rem;
            transition: transform 0.3s ease;
            color: var(--text-muted);
        }

        body.page-daily-devotion .section-toggle[aria-expanded="false"] .toggle-icon {
            transform: rotate(-90deg);
        }

        /* Section Content - CRITICAL for visual collapse */
        body.page-daily-devotion .section-content {
            max-height: 5000px;
            overflow: hidden;
            transition: max-height 0.4s ease, opacity 0.3s ease, margin-top 0.3s ease;
            opacity: 1;
            margin-top: 0;
        }

        body.page-daily-devotion .section-content.collapsed {
            max-height: 0 !important;
            opacity: 0;
            margin-top: calc(var(--spacing-md) * -1);
        }

        /* Ensure devotion-text inside collapsible sections has proper padding */
        body.page-daily-devotion .section-content .devotion-text {
            padding: 0 var(--spacing-md) var(--spacing-md);
        }

        /* ========================================
   DARK MODE - Progressive Disclosure
   ======================================== */

        /* Jump Bar Dark Mode */
        body.page-daily-devotion.dark .devotion-jump-bar,
        body.page-daily-devotion[data-theme="dark"] .devotion-jump-bar,
        html.dark body.page-daily-devotion .devotion-jump-bar {
            background: rgba(30, 41, 59, 0.6);
            border-color: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(10px);
        }

        body.page-daily-devotion.dark .jump-link,
        body.page-daily-devotion[data-theme="dark"] .jump-link,
        html.dark body.page-daily-devotion .jump-link {
            color: var(--text-body);
        }

        body.page-daily-devotion.dark .jump-link:hover,
        body.page-daily-devotion.dark .jump-link:focus,
        body.page-daily-devotion[data-theme="dark"] .jump-link:hover,
        body.page-daily-devotion[data-theme="dark"] .jump-link:focus,
        html.dark body.page-daily-devotion .jump-link:hover,
        html.dark body.page-daily-devotion .jump-link:focus {
            color: #60a5fa;
            background: rgba(96, 165, 250, 0.1);
        }

        body.page-daily-devotion.dark .jump-separator,
        body.page-daily-devotion[data-theme="dark"] .jump-separator,
        html.dark body.page-daily-devotion .jump-separator {
            color: rgba(255, 255, 255, 0.3);
        }

        /* Section Toggle Dark Mode */
        body.page-daily-devotion.dark .section-toggle:hover,
        body.page-daily-devotion.dark .section-toggle:focus,
        body.page-daily-devotion[data-theme="dark"] .section-toggle:hover,
        body.page-daily-devotion[data-theme="dark"] .section-toggle:focus,
        html.dark body.page-daily-devotion .section-toggle:hover,
        html.dark body.page-daily-devotion .section-toggle:focus {
            background: rgba(96, 165, 250, 0.1);
            outline-color: #60a5fa;
        }

        body.page-daily-devotion.dark .section-toggle h3,
        body.page-daily-devotion[data-theme="dark"] .section-toggle h3,
        html.dark body.page-daily-devotion .section-toggle h3 {
            color: var(--text-heading);
        }

        body.page-daily-devotion.dark .toggle-icon,
        body.page-daily-devotion[data-theme="dark"] .toggle-icon,
        html.dark body.page-daily-devotion .toggle-icon {
            color: rgba(255, 255, 255, 0.5);
        }

        /* ========================================
   RESPONSIVE - Progressive Disclosure
   ======================================== */

        /* Mobile (<768px) */
        @media (max-width: 767px) {
            body.page-daily-devotion .devotion-jump-bar {
                padding: var(--spacing-xs) var(--spacing-sm);
                gap: var(--spacing-xs);
                margin: var(--spacing-sm) auto;
            }

            body.page-daily-devotion .jump-link {
                padding: 6px var(--spacing-xs);
                font-size: 0.875rem;
            }

            body.page-daily-devotion .jump-separator {
                font-size: 0.625rem;
            }

            body.page-daily-devotion .section-toggle {
                padding: var(--spacing-sm);
            }

            body.page-daily-devotion .section-toggle h3 {
                font-size: 1.25rem;
            }

            body.page-daily-devotion .section-icon {
                font-size: 1.25rem;
            }

            body.page-daily-devotion .section-content .devotion-text {
                padding: 0 var(--spacing-sm) var(--spacing-sm);
            }
        }

        /* iPad (768-1024px) */
        @media (min-width: 768px) and (max-width: 1024px) {
            body.page-daily-devotion .devotion-jump-bar {
                max-width: 90%;
            }
        }

        /* Desktop (>1024px) */
        @media (min-width: 1025px) {
            body.page-daily-devotion .devotion-jump-bar {
                max-width: 800px;
            }
        }

        /* Invite Funnel Section */
        body.page-daily-devotion .invite-funnel-section {
            margin-top: var(--dd-space-xxl);
            padding: var(--dd-space-xl) 0;
            border-top: 1px solid var(--border-subtle);
        }

        body.page-daily-devotion .funnel-heading {
            text-align: center;
            font-size: 1.5rem;
            font-weight: 700;
            color: var(--text-heading);
            margin-bottom: var(--dd-space-xl);
            letter-spacing: -0.02em;
        }

        body.page-daily-devotion .funnel-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: var(--spacing-lg);
        }

        /* Funnel Cards */
        body.page-daily-devotion .funnel-card {
            background: var(--bg-section);
            border: 1px solid var(--border-subtle);
            border-radius: var(--dd-radius-card);
            padding: var(--dd-space-lg);
            text-align: center;
            transition: all 0.3s ease;
            display: flex;
            flex-direction: column;
            align-items: center;
            position: relative;
            overflow: hidden;
        }

        body.page-daily-devotion .funnel-card:hover {
            transform: translateY(-4px);
            box-shadow: var(--shadow-md);
            border-color: var(--brand-primary);
        }

        /* Featured Card Styling */
        body.page-daily-devotion .funnel-card.featured {
            background: linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(250, 248, 245, 0.9));
            border: 2px solid rgba(124, 58, 237, 0.2);
            box-shadow: 0 4px 12px rgba(124, 58, 237, 0.1);
        }

        body.page-daily-devotion .funnel-card.featured:hover {
            border-color: rgba(124, 58, 237, 0.4);
            box-shadow: 0 8px 24px rgba(124, 58, 237, 0.15);
        }

        /* Icons */
        body.page-daily-devotion .card-icon-wrapper {
            width: 48px;
            height: 48px;
            background: rgba(124, 58, 237, 0.1);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: var(--spacing-md);
            color: var(--brand-primary);
        }

        body.page-daily-devotion .funnel-icon {
            width: 24px;
            height: 24px;
            stroke-width: 2;
        }

        /* Typography */
        body.page-daily-devotion .funnel-card h4 {
            font-size: 1.125rem;
            font-weight: 600;
            color: var(--text-heading);
            margin: 0 0 var(--spacing-xs) 0;
        }

        body.page-daily-devotion .funnel-card p {
            font-size: 0.9375rem;
            color: var(--text-body);
            margin: 0 0 var(--spacing-lg) 0;
            line-height: 1.5;
        }

        body.page-daily-devotion .service-time {
            font-weight: 600;
            color: var(--brand-primary);
            background: rgba(124, 58, 237, 0.05);
            padding: 4px 12px;
            border-radius: 12px;
            margin-bottom: var(--spacing-md) !important;
        }

        /* Buttons */
        body.page-daily-devotion .funnel-btn {
            margin-top: auto;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 10px 20px;
            border-radius: var(--radius-full);
            font-size: 0.9375rem;
            font-weight: 600;
            text-decoration: none;
            transition: all 0.2s ease;
            cursor: pointer;
            width: 100%;
        }

        body.page-daily-devotion .funnel-btn.primary {
            background: var(--brand-primary);
            color: white;
            border: none;
        }

        body.page-daily-devotion .funnel-btn.primary:hover {
            background: var(--brand-primary-dark);
            transform: translateY(-2px);
            box-shadow: 0 4px 8px rgba(124, 58, 237, 0.2);
        }

        body.page-daily-devotion .funnel-btn.outline {
            background: transparent;
            border: 2px solid var(--border-subtle);
            color: var(--text-heading);
        }

        body.page-daily-devotion .funnel-btn.outline:hover {
            border-color: var(--brand-primary);
            color: var(--brand-primary);
            background: rgba(124, 58, 237, 0.05);
        }

        /* Invite Action Icons */
        body.page-daily-devotion .invite-actions {
            display: flex;
            gap: 12px;
            justify-content: center;
            width: 100%;
            margin-top: auto;
        }

        body.page-daily-devotion .icon-btn {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            border: 1px solid var(--border-subtle);
            background: white;
            color: var(--text-body);
            cursor: pointer;
            transition: all 0.2s ease;
        }

        body.page-daily-devotion .icon-btn svg {
            width: 20px;
            height: 20px;
        }

        body.page-daily-devotion .icon-btn:hover {
            border-color: var(--brand-primary);
            color: var(--brand-primary);
            transform: translateY(-2px);
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
        }

        /* Dark Mode Overrides */
        body.page-daily-devotion.dark .invite-funnel-section,
        body.page-daily-devotion[data-theme="dark"] .invite-funnel-section,
        html.dark body.page-daily-devotion .invite-funnel-section {
            border-color: rgba(255, 255, 255, 0.1);
        }

        body.page-daily-devotion.dark .funnel-heading,
        body.page-daily-devotion[data-theme="dark"] .funnel-heading,
        html.dark body.page-daily-devotion .funnel-heading {
            color: white;
        }

        body.page-daily-devotion.dark .funnel-card,
        body.page-daily-devotion[data-theme="dark"] .funnel-card,
        html.dark body.page-daily-devotion .funnel-card {
            background: rgba(30, 41, 59, 0.4);
            border-color: rgba(255, 255, 255, 0.1);
        }

        body.page-daily-devotion.dark .funnel-card.featured,
        body.page-daily-devotion[data-theme="dark"] .funnel-card.featured,
        html.dark body.page-daily-devotion .funnel-card.featured {
            background: linear-gradient(135deg, rgba(30, 41, 59, 0.8), rgba(15, 23, 42, 0.8));
            border-color: rgba(124, 58, 237, 0.3);
        }

        body.page-daily-devotion.dark .funnel-card h4,
        body.page-daily-devotion[data-theme="dark"] .funnel-card h4,
        html.dark body.page-daily-devotion .funnel-card h4 {
            color: white;
        }

        body.page-daily-devotion.dark .funnel-card p,
        body.page-daily-devotion[data-theme="dark"] .funnel-card p,
        html.dark body.page-daily-devotion .funnel-card p {
            color: #cbd5e1;
        }

        body.page-daily-devotion.dark .service-time,
        body.page-daily-devotion[data-theme="dark"] .service-time,
        html.dark body.page-daily-devotion .service-time {
            background: rgba(124, 58, 237, 0.15);
            color: #d8b4fe;
        }

        body.page-daily-devotion.dark .icon-btn,
        body.page-daily-devotion[data-theme="dark"] .icon-btn,
        html.dark body.page-daily-devotion .icon-btn {
            background: rgba(15, 23, 42, 0.5);
            border-color: rgba(255, 255, 255, 0.1);
            color: #cbd5e1;
        }

        body.page-daily-devotion.dark .icon-btn:hover,
        body.page-daily-devotion[data-theme="dark"] .icon-btn:hover,
        html.dark body.page-daily-devotion .icon-btn:hover {
            border-color: #a78bfa;
            color: #a78bfa;
            background: rgba(124, 58, 237, 0.1);
        }

        body.page-daily-devotion.dark .funnel-btn.outline,
        body.page-daily-devotion[data-theme="dark"] .funnel-btn.outline,
        html.dark body.page-daily-devotion .funnel-btn.outline {
            border-color: rgba(255, 255, 255, 0.2);
            color: white;
        }

        body.page-daily-devotion.dark .funnel-btn.outline:hover,
        body.page-daily-devotion[data-theme="dark"] .funnel-btn.outline:hover,
        html.dark body.page-daily-devotion .funnel-btn.outline:hover {
            border-color: #a78bfa;
            color: #a78bfa;
            background: rgba(124, 58, 237, 0.1);
        }

        /* =========================================
           PHASE 11: DESKTOP MICRO LAYOUT INTEGRITY
           ========================================= */

        /* FIX 1 — DATE STRIP EMPTY RIGHT SPACE */
        .date-pill-row {
            display: flex;
            width: 100%;
            justify-content: space-between;
            gap: 8px;
        }

        .date-pill-row::after {
            content: "";
            flex: 1;
        }

        /* FIX 2 — SHARE SECTION SAFE TOP PADDING */
        .share-devotion-card,
        .share-card-container {
            padding-top: 28px;
        }

        .share-devotion-title {
            margin-top: 0;
            margin-bottom: 16px;
        }

        /* FIX 3 — BUTTON OPTICAL CENTER ALIGNMENT */
        .devotion-nav-btn {
            display: flex;
            align-items: center;
            justify-content: center;
            min-height: 48px;
            line-height: 1;
            padding: 12px 20px;
        }

        /* =========================================
           PHASE 12: SACRED SPACING & ALIGNMENT POLISH
           ========================================= */

        /* STEP 1: FIX CALENDAR HEADER DATE FLOAT SPACE */
        .devotion-meta {
            display: flex;
            align-items: center;
            justify-content: center;
            /* Optical centering */
            padding-right: 0 !important;
            /* Remove extra right padding */
            height: 100%;
            /* Align with toggle if container has height */
        }

        /* STEP 2: SACRED VERTICAL RHYTHM TOKENS (Local Scope) */
        body.page-daily-devotion {
            --space-hero-calendar: 48px;
            --space-calendar-verse: 32px;
            --space-verse-share: 28px;
            --space-share-tabs: 32px;
            --space-tabs-scripture: 28px;
            --space-prayer-invite: 48px;
            --space-invite-nav: 40px;
        }

        /* APPLY RHYTHM */
        .devotion-hero {
            margin-bottom: var(--space-hero-calendar) !important;
        }

        .devotion-controls {
            margin-bottom: var(--space-calendar-verse) !important;
        }

        .sacred-quote-card {
            /* Verse Card */
            margin-bottom: var(--space-share-tabs) !important;
        }

        .share-today-wrapper {
            /* Verse Card -> Share Buttons */
            margin-top: var(--space-verse-share) !important;
        }

        .devotion-jump-bar {
            /* Tabs -> Scripture Card */
            margin-bottom: var(--space-tabs-scripture) !important;
        }

        #prayerSection {
            /* Prayer -> Invite Funnel */
            margin-bottom: var(--space-prayer-invite) !important;
        }

        .invite-funnel-section {
            /* Invite Funnel -> Nav */
            margin-top: var(--space-prayer-invite) !important;
            /* Match Rhythm */
            margin-bottom: var(--space-invite-nav) !important;
        }

        /* STEP 3: SHARE THIS DEVOTION SAFE PADDING */
        .devotion-share-panel {
            padding-top: 20px !important;
            padding-bottom: 20px !important;
            /* Ensure breathing space above header */
        }

        .devotion-share-panel h4 {
            margin-top: 0 !important;
        }

        /* STEP 4: INVITE FUNNEL BREATHING SPACE - Handled in Step 2 Rhythm */

        /* STEP 5: NEXT / PREVIOUS BUTTON TRUE CENTER ALIGNMENT */
        .devotion-nav-btn {
            display: inline-flex !important;
            align-items: center !important;
            justify-content: center !important;
            gap: 8px !important;
        }

        .devotion-nav-btn span {
            /* Remove any block display from spans that might offset alignment */
            display: inline-block;
            line-height: 1;
        }

        /* STEP 6: DATE PILL SCROLL RAIL FIX */
        /* Center content if smaller than container, Left align if overflow */
        .date-strip-wrapper {
            display: grid;
            grid-template-columns: min-content minmax(0, 1fr) min-content;
            align-items: center;
            gap: 8px;
            width: 100%;
        }

        .date-strip {
            /* Robust Centering Logic */
            justify-self: center;
            width: fit-content;
            max-width: 100%;
            display: flex;
            overflow-x: auto;
            padding-right: 0 !important;

            /* Ensure inner content scrolls correctly */
            justify-content: flex-start;
        }

        /* Ensure nav buttons stay tight */
        .date-nav-btn {
            flex-shrink: 0;
        }

        /* MICRO-ADJUSTMENT: Funnel Heading Spacing */
        .funnel-heading {
            margin-top: 0 !important;
            /* Pull text up */
        }

        .invite-funnel-section {
            margin-top: 24px !important;
            /* Visual adjustment per user request */
        }

        /* MICRO-FIX: Sticky Jump Bar Stacking */
        .devotion-jump-bar {
            position: sticky !important;
            top: 72px !important;
            /* Safe offset below header */
            z-index: 90 !important;
            /* Stack below header */
            background: var(--bg-card);
            /* Ensure no bleed-through */
        }

        /* =========================================================================
           FINAL PHASE: SACRED PREMIUM MICRO POLISH
           Scope: Optical Spacing, Light & Depth, Typography, Emotion
           ========================================================================= */

        /* PHASE 1: OPTICAL SPACING POLISH */
        body.page-daily-devotion {
            /* Increase breathing room for 'Sacred' feel */
            --space-hero-calendar: 52px;
            /* +4px */
            --space-calendar-verse: 36px;
            /* +4px */
            --space-verse-share: 32px;
            /* +4px */
            --space-share-tabs: 36px;
            /* +4px */
            --space-tabs-scripture: 28px;
            /* Maintain connection */
            --space-prayer-invite: 56px;
            /* +8px (Major separation) */
            --space-invite-nav: 48px;
            /* +8px */
        }

        /* Share Section - Sacred Glass Adaptive Surface */
        body.page-daily-devotion .devotion-share-panel,
        body.page-daily-devotion .share-devotion-card {
            padding: 32px !important;

            /* REQUIRED — Fix verification + mobile rendering */
            background-color: rgba(24, 24, 27, 0.78);

            /* Sacred gradient overlay */
            background-image: linear-gradient(135deg,
                    rgba(30, 30, 36, 0.95),
                    rgba(24, 24, 27, 0.95));

            /* Sacred glass blur */
            backdrop-filter: blur(18px);
            -webkit-backdrop-filter: blur(18px);

            /* Premium shape */
            border-radius: 20px;

            /* Sacred border */
            border: 1px solid rgba(255, 255, 255, 0.08);

            /* Prevent mobile black slab rendering */
            background-clip: padding-box;

            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
        }

        .devotion-share-panel h4 {
            margin-top: 8px !important;
            margin-bottom: 18px !important;
            letter-spacing: -0.025em !important;
            /* Elegant tight */
        }

        /* PHASE 2: SACRED LIGHT & DEPTH - General */
        /* Reduce Tech Glow, Increase Ambient Depth */
        body.page-daily-devotion .share-action-btn {
            box-shadow: 0 2px 4px rgba(60, 50, 40, 0.03) !important;
            background: #FFFFFF !important;
            border-color: rgba(139, 115, 85, 0.15) !important;
            transition: all 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
            /* Gentle ease */
        }

        body.page-daily-devotion .share-action-btn:hover {
            transform: translateY(-3px) !important;
            box-shadow: 0 12px 24px rgba(60, 50, 40, 0.08) !important;
            /* Soft architectural shadow */
            border-color: var(--brand-primary) !important;
        }

        /* Primary Button - Sacred Purple Gradient (De-Neonized) */
        body.page-daily-devotion .share-action-btn.primary {
            background: linear-gradient(135deg, #7c3aed, #5b21b6) !important;
            /* Slightly deeper */
            box-shadow: 0 4px 12px rgba(91, 33, 182, 0.15) !important;
            /* Reduced heavy glow */
        }

        body.page-daily-devotion .share-action-btn.primary:hover {
            background: linear-gradient(135deg, #6d28d9, #4c1d95) !important;
            /* Deepest purple */
            box-shadow: 0 12px 24px rgba(91, 33, 182, 0.2) !important;
            /* Ambient, not neon */
        }

        /* PHASE 3: TYPOGRAPHY SACRED AUTHORITY */
        /* Scripture Text */
        body.page-daily-devotion .sacred-quote-verse {
            font-weight: 550 !important;
            /* Heavier than normal body */
            letter-spacing: -0.01em !important;
            /* Tighten slightly */
            color: #1a1a1a !important;
            /* Deepest grey/black */
        }

        /* Headings - Ministry Led */
        body.page-daily-devotion h2,
        body.page-daily-devotion h3 {
            letter-spacing: -0.025em !important;
            /* Modern elegant tight */
        }

        /* PHASE 4: SHARE EXPERIENCE EMOTION */
        body.page-daily-devotion .jump-link,
        body.page-daily-devotion .date-pill {
            transition: all 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
            /* Slow ease-out "Gentle" */
        }

        /* PHASE 2: DARK MODE OVERRIDES (Candle-lit Chapel) */
        @media (prefers-color-scheme: dark) {
            body.page-daily-devotion .devotion-share-panel {
                background: linear-gradient(135deg, #1e1e24, #18181b) !important;
                /* Deep warm black */
                border: 1px solid rgba(255, 255, 255, 0.08) !important;
                box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4) !important;
                /* Deep shadow */
            }

            body.page-daily-devotion .share-action-btn {
                background: rgba(255, 255, 255, 0.03) !important;
                border-color: rgba(255, 255, 255, 0.1) !important;
                color: rgba(255, 255, 255, 0.9) !important;
            }

            body.page-daily-devotion .share-action-btn:hover {
                background: rgba(255, 255, 255, 0.08) !important;
                box-shadow: 0 12px 24px rgba(0, 0, 0, 0.5) !important;
            }

            body.page-daily-devotion .sacred-quote-verse {
                color: rgba(255, 255, 255, 0.95) !important;
            }
        }

        /* STEP 3 — DARK MODE SACRED SURFACE */
        /* DARK MODE OVERRIDE */
        [data-theme="dark"] body.page-daily-devotion .devotion-share-panel,
        [data-theme="dark"] body.page-daily-devotion .share-devotion-card,
        html.dark body.page-daily-devotion .devotion-share-panel,
        html.dark body.page-daily-devotion .share-devotion-card {
            background-color: rgba(18, 18, 22, 0.82);
            background-image: linear-gradient(135deg,
                    rgba(30, 30, 36, 0.95),
                    rgba(24, 24, 27, 0.95));
            backdrop-filter: blur(18px);
            -webkit-backdrop-filter: blur(18px);
            border: 1px solid rgba(255, 255, 255, 0.08);
            box-shadow:
                0 10px 30px rgba(0, 0, 0, 0.35),
                inset 0 0 0 1px rgba(255, 255, 255, 0.04);
        }

        /* LIGHT MODE OVERRIDE */
        [data-theme="light"] body.page-daily-devotion .devotion-share-panel,
        [data-theme="light"] body.page-daily-devotion .share-devotion-card {
            background-color: rgba(255, 255, 255, 0.78);
            background-image: linear-gradient(135deg,
                    rgba(255, 255, 255, 0.95),
                    rgba(245, 245, 250, 0.95));
            backdrop-filter: blur(18px);
            -webkit-backdrop-filter: blur(18px);
            border: 1px solid rgba(0, 0, 0, 0.06);
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
        }

        [data-theme="dark"] body.page-daily-devotion .share-action-btn {
            background: rgba(255, 255, 255, 0.03) !important;
            border-color: rgba(255, 255, 255, 0.1) !important;
            color: rgba(255, 255, 255, 0.9) !important;
        }

        [data-theme="dark"] body.page-daily-devotion .share-action-btn:hover {
            background: rgba(255, 255, 255, 0.08) !important;
            box-shadow: 0 12px 24px rgba(0, 0, 0, 0.5) !important;
        }

        [data-theme="dark"] body.page-daily-devotion .sacred-quote-verse {
            color: rgba(255, 255, 255, 0.95) !important;
        }

        /* =========================================================================
           FINAL PHASE: SACRED PREMIUM MICRO POLISH
           Scope: Optical Spacing, Light & Depth, Typography, Emotion
           ========================================================================= */

        /* PHASE 1: OPTICAL SPACING POLISH */
        body.page-daily-devotion {
            /* Increase breathing room for 'Sacred' feel */
            --space-hero-calendar: 52px !important;
            /* +4px */
            --space-calendar-verse: 36px !important;
            /* +4px */
            --space-verse-share: 32px !important;
            /* +4px */
            --space-share-tabs: 36px !important;
            /* +4px */
            --space-tabs-scripture: 28px !important;
            /* Maintain connection */
            --space-prayer-invite: 56px !important;
            /* +8px (Major separation) */
            --space-invite-nav: 48px !important;
            /* +8px */
        }

        /* Share Section - "Offering Plate" Feel */
        body.page-daily-devotion .devotion-share-panel {
            padding: 32px !important;
            /* Increased from 20px */
            /* PHASE 2: SACRED LIGHT & DEPTH - Day Mode (Warm Parchment) */
            background: linear-gradient(135deg, #FFFCF5, #F9F5EB) !important;
            /* Warm parchment */
            border: 1px solid rgba(139, 115, 85, 0.15) !important;
            /* Soft Gold/Brown trace */
            box-shadow:
                0 4px 6px -1px rgba(0, 0, 0, 0.02),
                0 12px 24px -4px rgba(60, 50, 40, 0.04) !important;
            /* Soft ambient depth */
        }

        .devotion-share-panel h4 {
            margin-top: 0 !important;
            letter-spacing: -0.025em !important;
            /* Elegant tight */
        }

        /* PHASE 2: SACRED LIGHT & DEPTH - General */
        /* Reduce Tech Glow, Increase Ambient Depth */
        body.page-daily-devotion .share-action-btn {
            box-shadow: 0 2px 4px rgba(60, 50, 40, 0.03) !important;
            background: #FFFFFF !important;
            border-color: rgba(139, 115, 85, 0.15) !important;
            transition: all 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
            /* Gentle ease */
            border-radius: 12px !important;
            /* Ensure soft rounding */
        }

        body.page-daily-devotion .share-action-btn:hover {
            transform: translateY(-3px) !important;
            box-shadow: 0 12px 24px rgba(60, 50, 40, 0.08) !important;
            /* Soft architectural shadow */
            border-color: var(--brand-primary) !important;
        }

        /* Primary Button - Sacred Purple Gradient (De-Neonized) */
        body.page-daily-devotion .share-action-btn.primary {
            background: linear-gradient(135deg, #7c3aed, #5b21b6) !important;
            /* Slightly deeper */
            box-shadow: 0 4px 12px rgba(91, 33, 182, 0.15) !important;
            /* Reduced heavy glow */
            border: none !important;
        }

        body.page-daily-devotion .share-action-btn.primary:hover {
            background: linear-gradient(135deg, #6d28d9, #4c1d95) !important;
            /* Deepest purple */
            box-shadow: 0 12px 24px rgba(91, 33, 182, 0.2) !important;
            /* Ambient, not neon */
        }

        /* PHASE 3: TYPOGRAPHY SACRED AUTHORITY */
        /* Scripture Text */
        body.page-daily-devotion .sacred-quote-verse {
            font-weight: 550 !important;
            /* Heavier than normal body */
            letter-spacing: -0.01em !important;
            /* Tighten slightly */
            color: #1a1a1a !important;
            /* Deepest grey/black */
        }

        /* Headings - Ministry Led */
        body.page-daily-devotion h2,
        body.page-daily-devotion h3 {
            letter-spacing: -0.025em !important;
            /* Modern elegant tight */
        }

        /* PHASE 4: SHARE EXPERIENCE EMOTION */
        body.page-daily-devotion .jump-link,
        body.page-daily-devotion .date-pill {
            transition: all 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
            /* Slow ease-out "Gentle" */
        }

        /* PHASE 2: DARK MODE OVERRIDES (Candle-lit Chapel) */
        @media (prefers-color-scheme: dark) {

            body.page-daily-devotion .devotion-share-panel,
            body.page-daily-devotion .share-devotion-card {
                background-color: rgba(18, 18, 22, 0.82);
                background-image: linear-gradient(135deg,
                        rgba(30, 30, 36, 0.95),
                        rgba(24, 24, 27, 0.95));
                backdrop-filter: blur(18px);
                -webkit-backdrop-filter: blur(18px);
                border: 1px solid rgba(255, 255, 255, 0.08);
                box-shadow: 0 10px 35px rgba(0, 0, 0, 0.35);
            }

            body.page-daily-devotion .share-action-btn {
                background: rgba(255, 255, 255, 0.03) !important;
                border-color: rgba(255, 255, 255, 0.1) !important;
                color: rgba(255, 255, 255, 0.9) !important;
            }

            body.page-daily-devotion .share-action-btn:hover {
                background: rgba(255, 255, 255, 0.08) !important;
                box-shadow: 0 12px 24px rgba(0, 0, 0, 0.5) !important;
                border-color: rgba(255, 255, 255, 0.3) !important;
            }

            body.page-daily-devotion .sacred-quote-verse {
                color: rgba(255, 255, 255, 0.95) !important;
            }
        }

        [data-theme="dark"] body.page-daily-devotion .devotion-share-panel {
            background: linear-gradient(135deg, #1e1e24, #18181b) !important;
            border: 1px solid rgba(255, 255, 255, 0.08) !important;
            box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4) !important;
        }

        [data-theme="dark"] body.page-daily-devotion .share-action-btn {
            background: rgba(255, 255, 255, 0.03) !important;
            border-color: rgba(255, 255, 255, 0.1) !important;
            color: rgba(255, 255, 255, 0.9) !important;
        }

        [data-theme="dark"] body.page-daily-devotion .share-action-btn:hover {
            background: rgba(255, 255, 255, 0.08) !important;
            box-shadow: 0 12px 24px rgba(0, 0, 0, 0.5) !important;
            border-color: rgba(255, 255, 255, 0.3) !important;
        }

        [data-theme="dark"] body.page-daily-devotion .sacred-quote-verse {
            color: rgba(255, 255, 255, 0.95) !important;
        }

        /* ============================= */
        /* GPBC SACRED SHARE PANEL FINAL */
        /* ============================= */

        .devotion-share-panel,
        .share-devotion-card {

            /* FORCE REAL BACKGROUND */
            background-color: rgba(24, 24, 27, 0.85) !important;

            /* DO NOT USE background: */
            background-image: linear-gradient(135deg,
                    rgba(30, 30, 36, 0.96),
                    rgba(24, 24, 27, 0.96)) !important;

            backdrop-filter: blur(18px) !important;
            -webkit-backdrop-filter: blur(18px) !important;

            border-radius: 20px !important;
            border: 1px solid rgba(255, 255, 255, 0.08) !important;

            background-clip: padding-box !important;
        }

        /* DARK MODE HARD LOCK */
        [data-theme="dark"] .devotion-share-panel,
        [data-theme="dark"] .share-devotion-card,
        html.dark .devotion-share-panel,
        html.dark .share-devotion-card {
            background-color: rgba(18, 18, 22, 0.88) !important;
        }

        /* LIGHT MODE HARD LOCK */
        [data-theme="light"] .devotion-share-panel,
        [data-theme="light"] .share-devotion-card {
            background-color: rgba(255, 255, 255, 0.85) !important;
            background-image: linear-gradient(135deg,
                    rgba(255, 255, 255, 0.96),
                    rgba(245, 245, 250, 0.96)) !important;
            border: 1px solid rgba(0, 0, 0, 0.06) !important;
        }

        /* MOBILE GPU FIX */
        @media (max-width: 640px) {

            .devotion-share-panel,
            .share-devotion-card {
                transform: translateZ(0);
                will-change: transform;
            }
        }

        /* ===================================================================== */
        /* GPBC MOBILE SACRED SHARE PANEL — PREMIUM GLASS FIX                   */
        /* Daily Devotion Only — Lighter, Breathable, Vertical Flow             */
        /* ===================================================================== */

        @media (max-width: 640px) {

            /* STEP 1 — Mobile Sacred Glass Surface (Lighter & Breathable) */
            .devotion-share-panel,
            .share-devotion-card {
                /* Lighter sacred glass */
                background-color: rgba(20, 24, 32, 0.55) !important;

                background-image: linear-gradient(145deg,
                        rgba(30, 35, 48, 0.75),
                        rgba(18, 22, 32, 0.70)) !important;

                backdrop-filter: blur(22px) saturate(140%);
                -webkit-backdrop-filter: blur(22px) saturate(140%);

                border: 1px solid rgba(255, 255, 255, 0.08);
                border-radius: 22px;

                box-shadow:
                    0 10px 30px rgba(0, 0, 0, 0.35),
                    inset 0 1px 0 rgba(255, 255, 255, 0.06);

                padding: 28px 22px;
            }

            /* STEP 2 — Mobile Layout: Vertical Sacred Flow */
            .share-actions-grid {
                display: flex;
                flex-direction: column;
                gap: 14px;
                width: 100%;
            }

            /* STEP 3 — Mobile Button Sacred Comfort */
            .share-action-btn {
                width: 100%;
                min-height: 52px;

                justify-content: center;
                gap: 12px;

                border-radius: 16px;

                font-size: 15px;
                font-weight: 600;

                background: rgba(255, 255, 255, 0.04);
                border: 1px solid rgba(255, 255, 255, 0.08);

                transition: all 0.25s ease;
            }

            .share-action-btn.primary {
                background: linear-gradient(135deg,
                        #3b82f6,
                        #7c3aed);
                border: none;
                color: white;
            }

            /* STEP 4 — Mobile Title Sacred Breathing Space */
            .share-devotion-title {
                margin-bottom: 18px;
                font-size: 18px;
                letter-spacing: 0.4px;
                text-align: center;
            }

            /* STEP 5 — Micro Glow (Premium Touch) */
            .share-action-btn:hover,
            .share-action-btn:active {
                transform: translateY(-1px);
                box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
            }

        }

        /* ===================================================================== */
        /* GPBC PRODUCTION HARD FIX — MOBILE SHARE PANEL CLIPPING               */
        /* Daily Devotion Only — Fixes button cut, grid overflow, verification  */
        /* ===================================================================== */

        /* STEP 1 — Remove Glass Clipping (All Breakpoints) */
        .devotion-share-panel,
        .share-devotion-card {
            overflow: visible !important;
        }

        /* STEP 2-3 — Mobile Grid Structure + Button Fix */
        @media (max-width: 640px) {

            .devotion-share-panel {
                padding: 20px 16px !important;
                margin: 20px auto !important;
                overflow: visible !important;
            }

            .share-actions-grid {
                display: grid !important;
                grid-template-columns: 1fr !important;
                gap: 12px !important;
                width: 100% !important;
            }

            .share-action-btn {
                width: 100% !important;
                min-width: 0 !important;
                padding: 12px 10px !important;
                font-size: 14px !important;

                display: flex !important;
                align-items: center !important;
                justify-content: center !important;
                gap: 8px !important;
            }

            .share-action-btn .btn-label {
                white-space: nowrap !important;
                font-size: 14px !important;
            }

        }

        /* STEP 4 — Sacred Glass Surface Hard Lock (Verification Pass) */
        .devotion-share-panel,
        .share-devotion-card {

            background-color: rgba(24, 24, 27, 0.88) !important;

            background-image: linear-gradient(135deg,
                    rgba(30, 30, 36, 0.96),
                    rgba(24, 24, 27, 0.96)) !important;

            backdrop-filter: blur(18px) !important;
            -webkit-backdrop-filter: blur(18px) !important;

            border-radius: 20px !important;
        }

        /* STEP 5 — Mobile GPU Render Stability */
        @media (max-width: 640px) {

            .devotion-share-panel,
            .share-devotion-card {
                transform: translateZ(0);
                will-change: transform;
            }

        }

        /* ===================================================================== */
        /* GPBC SHARE CARD ORCHESTRATOR — YOUVERSION-LEVEL EXPERIENCE           */
        /* Instant feedback, smooth transitions, production-grade polish        */
        /* ===================================================================== */

        /* Loading State (Instant Feedback <100ms) */
        .share-action-btn.is-generating {
            opacity: 0.85 !important;
            transform: scale(0.98) !important;
            pointer-events: none !important;
            transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1) !important;
        }

        /* Dark Mode Loading State */
        [data-theme="dark"] .share-action-btn.is-generating,
        html.dark .share-action-btn.is-generating {
            opacity: 0.75 !important;
        }

        /* Micro animation for premium feel */
        @keyframes gpbc-pulse {

            0%,
            100% {
                opacity: 0.85;
            }

            50% {
                opacity: 0.7;
            }
        }

        .share-action-btn.is-generating {
            animation: gpbc-pulse 1.5s ease-in-out infinite;
        }

        /* Accessibility: Focus ring preserved during generation */
        .share-action-btn.is-generating:focus-visible {
            outline: 2px solid currentColor;
            outline-offset: 2px;
        }

        /* ===================================================================== */
        /* GPBC MOBILE UI REFINEMENT — YOUVERSION-QUALITY SHARE PANEL           */
        /* Daily Devotion Only — Premium Glass, Perfect Spacing, Clear Hierarchy */
        /* Target: Bible App / YouVersion mobile polish level                    */
        /* ===================================================================== */

        @media (max-width: 768px) {

            /* STEP 1 — Mobile Panel Visual Rebuild (Soft Sacred Glass) */
            .devotion-share-panel {
                padding: 18px 16px !important;
                border-radius: 18px !important;

                background: linear-gradient(180deg,
                        rgba(22, 30, 48, 0.85),
                        rgba(18, 24, 40, 0.88)) !important;

                backdrop-filter: blur(14px) !important;
                -webkit-backdrop-filter: blur(14px) !important;

                border: 1px solid rgba(255, 255, 255, 0.06) !important;

                position: relative;
                overflow: visible !important;
            }

            /* STEP 9 — Remove "Black Blob" Feel (Inner Glow) */
            .devotion-share-panel::before {
                content: "";
                position: absolute;
                inset: 0;
                border-radius: inherit;
                background: radial-gradient(circle at top,
                        rgba(255, 255, 255, 0.05),
                        transparent 60%);
                pointer-events: none;
                z-index: 0;
            }

            /* Ensure content stays above pseudo-element */
            .devotion-share-panel>* {
                position: relative;
                z-index: 1;
            }

            /* STEP 8 — Mobile Typography Fix */
            .share-devotion-title {
                font-size: 16px !important;
                margin-bottom: 12px !important;
                opacity: 0.9;
                font-weight: 600;
                letter-spacing: 0.01em;
                text-align: center !important;
            }

            /* STEP 3 — Mobile Grid Rewrite (Vertical Priority Stack) */
            .share-actions-grid {
                display: grid !important;
                grid-template-columns: 1fr !important;
                gap: 12px !important;
                width: 100% !important;
            }

            /* All buttons full width */
            .share-actions-grid button {
                grid-column: 1 / -1 !important;
                width: 100% !important;
            }

            /* STEP 7 — Tap Comfort Spacing */
            .share-action-btn {
                padding: 14px 16px !important;
                border-radius: 14px !important;

                display: flex !important;
                align-items: center !important;
                justify-content: center !important;
                gap: 10px !important;

                transition: all 0.2s ease !important;
            }

            /* STEP 4 — Primary Button Emphasis (YouVersion Blue) */
            .share-action-btn.primary {
                height: 52px !important;
                font-size: 16px !important;
                font-weight: 600 !important;

                background: linear-gradient(135deg,
                        #5ea2ff,
                        #7b6cff) !important;

                border: none !important;
                color: white !important;

                box-shadow: 0 8px 22px rgba(90, 120, 255, 0.25) !important;
            }

            .share-action-btn.primary:active {
                transform: translateY(1px) !important;
                box-shadow: 0 4px 12px rgba(90, 120, 255, 0.2) !important;
            }

            /* STEP 5 — Secondary Button Mobile Polish */
            .share-action-btn:not(.primary) {
                height: 46px !important;
                font-size: 15px !important;
                font-weight: 500 !important;

                background: rgba(255, 255, 255, 0.05) !important;
                border: 1px solid rgba(255, 255, 255, 0.08) !important;
                color: rgba(255, 255, 255, 0.9) !important;
            }

            .share-action-btn:not(.primary):active {
                background: rgba(255, 255, 255, 0.08) !important;
                transform: scale(0.98) !important;
            }

            /* Button Icon Sizing */
            .share-action-btn .btn-icon {
                width: 20px !important;
                height: 20px !important;
                flex-shrink: 0;
            }

            .share-action-btn.primary .btn-icon {
                width: 22px !important;
                height: 22px !important;
            }

            /* Button Label */
            .share-action-btn .btn-label {
                white-space: nowrap !important;
                font-size: inherit !important;
            }

            /* STEP 10 — Safe Mobile Performance (No Heavy Effects) */
            .share-action-btn {
                will-change: transform;
                backface-visibility: hidden;
                -webkit-tap-highlight-color: transparent;
            }

            /* Remove excessive blur/shadows for performance */
            .devotion-share-panel {
                box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15) !important;
            }

        }

        /* Dark Mode Adjustments */
        @media (max-width: 768px) {

            [data-theme="dark"] .devotion-share-panel,
            html.dark .devotion-share-panel {
                background: linear-gradient(180deg,
                        rgba(18, 22, 32, 0.88),
                        rgba(15, 18, 28, 0.92)) !important;

                border: 1px solid rgba(255, 255, 255, 0.08) !important;
            }

            [data-theme="dark"] .share-action-btn:not(.primary),
            html.dark .share-action-btn:not(.primary) {
                background: rgba(255, 255, 255, 0.06) !important;
                border: 1px solid rgba(255, 255, 255, 0.1) !important;
            }
        }

        /* Light Mode Adjustments */
        @media (max-width: 768px) {
            [data-theme="light"] .devotion-share-panel {
                background: linear-gradient(180deg,
                        rgba(248, 250, 252, 0.95),
                        rgba(241, 245, 249, 0.98)) !important;

                border: 1px solid rgba(0, 0, 0, 0.06) !important;

                backdrop-filter: blur(12px) !important;
            }

            [data-theme="light"] .devotion-share-panel::before {
                background: radial-gradient(circle at top,
                        rgba(255, 255, 255, 0.8),
                        transparent 60%);
            }

            [data-theme="light"] .share-devotion-title {
                color: rgba(15, 23, 42, 0.9);
            }

            [data-theme="light"] .share-action-btn:not(.primary) {
                background: rgba(255, 255, 255, 0.7) !important;
                border: 1px solid rgba(0, 0, 0, 0.08) !important;
                color: rgba(15, 23, 42, 0.9) !important;
            }

            [data-theme="light"] .share-action-btn:not(.primary):active {
                background: rgba(255, 255, 255, 0.9) !important;
            }
        }

        /* ========================================
   SAFE VISUAL AUTHORITY PASS
   Principal Front-End Architect + Liturgical UI/UX
   February 11, 2026
   ======================================== */

        /* ------------------------------------------------
   PHASE 1 — CONTAINER AUTHORITY CONTRACT
   ------------------------------------------------ */

        :root {
            /* Canonical devotion reading rhythm */
            --devotion-reading-max: 880px;
            --devotion-reading-padding-desktop: 40px;
            --devotion-reading-padding-tablet: 28px;
            --devotion-reading-padding-mobile: 20px;

            /* Sacred typography weight authority */
            --sacred-verse-weight: 600;
            --sacred-reference-weight: 500;
            --sacred-body-weight: 400;

            /* Sacred surface gradients */
            --sacred-surface-light: linear-gradient(135deg, #fffdf7, #f6f1e6);
            --sacred-surface-dark: linear-gradient(135deg, #141414, #1c1c1c);
        }

        /* Dark mode depth ladder tokens */
        [data-theme="dark"],
        html.dark,
        body.dark {
            --sacred-depth-1: #0f0f0f;
            --sacred-depth-2: #161616;
            --sacred-depth-3: #1d1d1d;
        }

        /* ------------------------------------------------
   Container Authority Overrides (Safe Cascade)
   ------------------------------------------------ */

        /* Main devotion container - unified reading max-width */
        .devotion-container,
        body.page-daily-devotion .devotion-container {
            max-width: var(--devotion-reading-max);
        }

        /* Sacred quote card container - consistent with reading rhythm */
        body.page-daily-devotion .sacred-quote-card {
            max-width: var(--devotion-reading-max);
            margin-left: auto;
            margin-right: auto;
        }

        /* Share panel container - aligned with sacred system */
        body.page-daily-devotion .devotion-share-panel,
        .devotion-share-panel {
            max-width: var(--devotion-reading-max);
            margin-left: auto;
            margin-right: auto;
        }

        /* Tablet responsive padding authority */
        @media (min-width: 768px) and (max-width: 1024px) {

            .devotion-container,
            body.page-daily-devotion .sacred-quote-card,
            body.page-daily-devotion .devotion-share-panel {
                padding-left: var(--devotion-reading-padding-tablet);
                padding-right: var(--devotion-reading-padding-tablet);
            }
        }

        /* Mobile responsive padding authority */
        @media (max-width: 767px) {

            .devotion-container,
            body.page-daily-devotion .sacred-quote-card,
            body.page-daily-devotion .devotion-share-panel {
                padding-left: var(--devotion-reading-padding-mobile);
                padding-right: var(--devotion-reading-padding-mobile);
            }
        }

        /* ------------------------------------------------
   PHASE 2 — SACRED TYPOGRAPHY AUTHORITY LOCK
   ------------------------------------------------ */

        /* Verse text hierarchy - premium weight */
        body.page-daily-devotion .sacred-quote-verse {
            font-weight: var(--sacred-verse-weight);
        }

        /* Reference hierarchy - balanced authority */
        body.page-daily-devotion .sacred-quote-reference {
            font-weight: var(--sacred-reference-weight);
        }

        /* Body text hierarchy - readable flow */
        body.page-daily-devotion .sacred-quote-content,
        body.page-daily-devotion .devotion-text,
        body.page-daily-devotion .reflection-body,
        body.page-daily-devotion .prayer-body {
            font-weight: var(--sacred-body-weight);
        }

        /* Dark mode typography consistency */
        body.page-daily-devotion.dark .sacred-quote-verse,
        body.page-daily-devotion[data-theme="dark"] .sacred-quote-verse,
        html.dark body.page-daily-devotion .sacred-quote-verse {
            font-weight: var(--sacred-verse-weight);
        }

        body.page-daily-devotion.dark .sacred-quote-reference,
        body.page-daily-devotion[data-theme="dark"] .sacred-quote-reference,
        html.dark body.page-daily-devotion .sacred-quote-reference {
            font-weight: var(--sacred-reference-weight);
        }

        /* ------------------------------------------------
   PHASE 3 — SHARE PANEL VISUAL COLLISION REDUCTION
   ------------------------------------------------ */

        /* Unified border radius authority */
        body.page-daily-devotion .devotion-share-panel,
        .devotion-share-panel,
        .share-card,
        .share-card-modal {
            border-radius: 18px;
        }

        /* Sacred surface gradient (safe override for gradient-based backgrounds) */
        body.page-daily-devotion .sacred-quote-card {
            background: var(--sacred-surface-light);
        }

        [data-theme="dark"] body.page-daily-devotion .sacred-quote-card,
        html.dark body.page-daily-devotion .sacred-quote-card,
        body.page-daily-devotion.dark .sacred-quote-card {
            background: var(--sacred-surface-dark);
        }

        /* ------------------------------------------------
   PHASE 4 — DARK MODE DEPTH LADDER (SAFE)
   ------------------------------------------------ */

        /* Section containers - layered depth */
        [data-theme="dark"] .devotion-container,
        html.dark .devotion-container {
            background-color: var(--sacred-depth-1);
        }

        /* Card containers - elevated depth */
        [data-theme="dark"] body.page-daily-devotion .sacred-quote-card,
        html.dark body.page-daily-devotion .sacred-quote-card {
            background: var(--sacred-depth-2);
        }

        /* Share panel - top layer depth */
        [data-theme="dark"] body.page-daily-devotion .devotion-share-panel,
        html.dark body.page-daily-devotion .devotion-share-panel {
            background: var(--sacred-depth-3);
        }

        /* ------------------------------------------------
   PHASE 5 — MOBILE PERFORMANCE COEXISTENCE
   ------------------------------------------------ */

        /* Soft gradient alternative when blur is disabled */
        @media (max-width: 768px) {
            .devotion-share-panel {
                /* Coexists with mobile-performance-optimization.css */
                /* Uses soft gradient + subtle border instead of heavy blur */
                border: 1px solid rgba(255, 255, 255, 0.08);
            }

            [data-theme="light"] .devotion-share-panel {
                border: 1px solid rgba(0, 0, 0, 0.06);
            }
        }

        /* ================================================
   END SAFE VISUAL AUTHORITY PASS
   ================================================ */

        /* Phone width tuning for sacred quote card measurement */
        @media (min-width: 430px) and (max-width: 480px) {
            body.page-daily-devotion .sacred-quote-card {
                width: 100%;
                max-width: 377px;
            }
        }

        /* Remove sacred quote card surface while preserving inner content */
        body.page-daily-devotion .sacred-quote-card {
            background: transparent !important;
            border: none !important;
            box-shadow: none !important;
        }

        /* Force white text/icon for primary Share Card action button */
        body.page-daily-devotion .share-action-btn.primary,
        body.page-daily-devotion .share-action-btn.primary .btn-label,
        body.page-daily-devotion .share-action-btn.primary .btn-icon {
            color: #ffffff !important;
        }

        body.page-daily-devotion .share-action-btn.primary .btn-icon {
            stroke: #ffffff !important;
        }

        /* Center share panel content inside the card */
        body.page-daily-devotion #shareSection {
            text-align: center;
        }

        body.page-daily-devotion #shareSection .share-actions-grid {
            width: min(100%, 720px);
            margin-left: auto !important;
            margin-right: auto !important;
            justify-items: center;
            align-items: center;
            justify-content: center !important;
        }

        body.page-daily-devotion #shareSection .share-action-btn {
            margin-left: auto;
            margin-right: auto;
        }

        /* ===== GRATITUDE FASTING ENHANCED STYLES ===== */
        /* Premium typography, glassmorphism, animations, and modern UI */

        /* Warm gradient background for gratitude theme */
        body.page-gratitude-fasting {
            background: linear-gradient(180deg, #fffbf0 0%, #fefce8 30%, #ffffff 100%) !important;
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
        }

        /* ===== PROGRESS BAR ===== */
        .progress-container {
            position: sticky;
            top: 0;
            z-index: 100;
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(10px);
            border-bottom: 1px solid rgba(251, 191, 36, 0.2);
            padding: 0.75rem 1rem;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
        }

        .progress-wrapper {
            max-width: 1000px;
            margin: 0 auto;
            display: flex;
            align-items: center;
            gap: 1rem;
        }

        .progress-label {
            font-family: 'Inter', sans-serif;
            font-size: 0.875rem;
            font-weight: 600;
            color: #92400e;
            white-space: nowrap;
        }

        .progress-bar-bg {
            flex: 1;
            height: 8px;
            background: rgba(251, 191, 36, 0.2);
            border-radius: 10px;
            overflow: hidden;
        }

        .progress-bar-fill {
            height: 100%;
            background: linear-gradient(90deg, #fbbf24, #f59e0b);
            border-radius: 10px;
            transition: width 0.5s ease;
            box-shadow: 0 0 10px rgba(251, 191, 36, 0.5);
        }

        /* ===== ENHANCED HERO ===== */
        .devotion-hero h1 {
            font-family: 'Playfair Display', Georgia, serif !important;
            letter-spacing: -0.02em !important;
        }

        .devotion-hero p {
            font-weight: 300 !important;
        }

        /* ===== ENHANCED CONTROLS ===== */
        .devotion-controls {
            background: rgba(255, 255, 255, 0.9) !important;
            backdrop-filter: blur(10px) !important;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08) !important;
            border-radius: 20px !important;
            border: 1px solid rgba(251, 191, 36, 0.1) !important;
        }

        .day-nav button,
        .lang-toggle button {
            border-radius: 12px !important;
            border: 1px solid rgba(251, 191, 36, 0.3) !important;
            font-weight: 600 !important;
            font-family: 'Inter', sans-serif !important;
            transition: all 0.3s ease !important;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05) !important;
            padding: 0.625rem 1.25rem !important;
        }

        .day-nav button:hover:not(:disabled),
        .lang-toggle button:hover {
            background: #fffbf0 !important;
            border-color: #fbbf24 !important;
            transform: translateY(-1px) !important;
            box-shadow: 0 4px 12px rgba(251, 191, 36, 0.2) !important;
        }

        .day-nav select {
            border-radius: 12px !important;
            border: 1px solid rgba(251, 191, 36, 0.3) !important;
            font-weight: 600 !important;
            font-family: 'Inter', sans-serif !important;
            padding: 0.625rem 1.25rem !important;
        }

        .lang-toggle {
            background: rgba(251, 191, 36, 0.1) !important;
            padding: 0.25rem !important;
            border-radius: 14px !important;
        }

        .lang-toggle button {
            border: none !important;
            box-shadow: none !important;
        }

        .lang-toggle button.active {
            background: linear-gradient(135deg, #fbbf24, #f59e0b) !important;
            box-shadow: 0 4px 12px rgba(251, 191, 36, 0.3) !important;
        }

        /* ===== SCROLL REVEAL ANIMATIONS ===== */
        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(30px);
            }

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

        .fade-in-up {
            animation: fadeInUp 0.6s ease-out forwards;
        }

        /* ===== ENHANCED CONTENT SECTIONS ===== */
        .page-gratitude-fasting .devotion-container {
            padding: 2rem 1.5rem 4rem !important;
        }

        .page-gratitude-fasting .devotion-section {
            background: rgba(255, 255, 255, 0.85) !important;
            backdrop-filter: blur(10px) !important;
            border-radius: 24px !important;
            padding: 2.5rem !important;
            margin-bottom: 2rem !important;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.06) !important;
            border: 1px solid rgba(251, 191, 36, 0.1) !important;
            transition: all 0.3s ease !important;
        }

        .page-gratitude-fasting .devotion-section:hover {
            box-shadow: 0 12px 40px rgba(0, 0, 0, 0.1) !important;
            transform: translateY(-2px) !important;
        }

        /* ===== PREMIUM SCRIPTURE SECTION ===== */
        .page-gratitude-fasting .scripture-section {
            background: linear-gradient(135deg, #fef9c3 0%, #fef3c7 100%) !important;
            border: 2px solid rgba(251, 191, 36, 0.3) !important;
            border-left: 2px solid rgba(251, 191, 36, 0.3) !important;
            position: relative !important;
            overflow: hidden !important;
        }

        .page-gratitude-fasting .scripture-section::before {
            content: '"' !important;
            position: absolute !important;
            top: -20px !important;
            left: 20px !important;
            font-size: 200px !important;
            font-family: 'Playfair Display', Georgia, serif !important;
            color: rgba(251, 191, 36, 0.08) !important;
            line-height: 1 !important;
            pointer-events: none !important;
        }

        .page-gratitude-fasting .scripture-section h3 {
            font-family: 'Playfair Display', Georgia, serif !important;
            font-size: 1.75rem !important;
            margin-bottom: 1.5rem !important;
            font-weight: 700 !important;
            position: relative !important;
            z-index: 1 !important;
        }

        .scripture-text {
            font-family: 'Playfair Display', Georgia, serif !important;
            font-size: 1.35rem !important;
            line-height: 1.9 !important;
            margin-bottom: 1rem !important;
            position: relative !important;
            z-index: 1 !important;
            font-weight: 500 !important;
        }

        .scripture-ref {
            font-weight: 700 !important;
            font-size: 1.1rem !important;
            font-family: 'Inter', sans-serif !important;
            position: relative !important;
            z-index: 1 !important;
        }

        /* ===== REFLECTION & PRAYER SECTIONS ===== */
        .reflection-section h3,
        .prayer-section h3 {
            font-family: 'Playfair Display', Georgia, serif !important;
            font-size: 1.75rem !important;
            margin-bottom: 1.5rem !important;
            font-weight: 700 !important;
            display: flex !important;
            align-items: center !important;
            gap: 0.75rem !important;
        }

        .reflection-text,
        .prayer-text {
            font-family: 'Inter', sans-serif !important;
            line-height: 1.9 !important;
            font-size: 1.0625rem !important;
        }

        .promise-box {
            padding: 1.75rem !important;
            border-radius: 16px !important;
            margin-top: 1.5rem !important;
            box-shadow: 0 4px 16px rgba(59, 130, 246, 0.1) !important;
        }

        .promise-box strong {
            font-family: 'Playfair Display', Georgia, serif !important;
            font-size: 1.125rem !important;
        }

        .promise-box p {
            font-family: 'Inter', sans-serif !important;
            line-height: 1.8 !important;
            color: #1e3a8a !important;
        }

        /* ===== ENHANCED SHARE SECTION ===== */
        .share-section {
            background: linear-gradient(135deg, rgba(243, 232, 255, 0.8) 0%, rgba(250, 232, 255, 0.8) 100%) !important;
            backdrop-filter: blur(10px) !important;
            padding: 2rem !important;
            border-radius: 24px !important;
            margin-top: 2.5rem !important;
            border: 1px solid rgba(124, 58, 237, 0.2) !important;
            box-shadow: 0 8px 32px rgba(124, 58, 237, 0.1) !important;
        }

        .share-section h3 {
            font-family: 'Playfair Display', Georgia, serif !important;
            font-size: 1.5rem !important;
            margin-bottom: 1.25rem !important;
            font-weight: 700 !important;
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
            gap: 0.5rem !important;
        }

        .share-btn {
            padding: 0.875rem 1.5rem !important;
            border-radius: 14px !important;
            font-weight: 600 !important;
            font-family: 'Inter', sans-serif !important;
            gap: 0.625rem !important;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
        }

        .share-btn:hover {
            transform: translateY(-3px) !important;
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25) !important;
        }

        .share-btn:active {
            transform: translateY(-1px) !important;
        }

        .share-btn.facebook {
            background: linear-gradient(135deg, #1877f2, #0c63d4) !important;
        }

        .share-btn.twitter {
            background: linear-gradient(135deg, #1da1f2, #0d8bd9) !important;
        }

        .share-btn.whatsapp {
            background: linear-gradient(135deg, #25d366, #1ebe57) !important;
        }

        .share-btn.email {
            background: linear-gradient(135deg, #ea4335, #d33426) !important;
        }

        .share-btn.copy {
            background: linear-gradient(135deg, #6366f1, #4f46e5) !important;
        }

        .share-btn.copy.copied {
            background: linear-gradient(135deg, #10b981, #059669) !important;
        }

        /* ===== TOPIC HEADER ===== */
        #devotionTopic {
            font-family: 'Playfair Display', Georgia, serif !important;
            font-size: 2.25rem !important;
            font-weight: 800 !important;
            letter-spacing: -0.02em !important;
        }

        #devotionDate {
            font-family: 'Inter', sans-serif !important;
            font-size: 1rem !important;
            font-weight: 500 !important;
        }

        /* ===== LOADING & ERROR STATES ===== */
        #loadingMsg,
        #errorMsg {
            font-family: 'Inter', sans-serif !important;
        }