/* ═══════════════════════════════════════════════════════════════ */
        /* [CSS-001] BASE VARIABLES & TYPOGRAPHY                          */
        /* ═══════════════════════════════════════════════════════════════ */
        :root {
            /* Warm Parchment Palette */
            --parchment: #F5ECD7;
            --parchment-aged: #EDE3C8;
            --parchment-deep: #E5D9BA;
            --parchment-dark: #D4C5A3;
            --parchment-edge: #C4B48E;
            
            /* Ink Colors */
            --ink: #2C2416;
            --ink-soft: #5C4D3C;
            --ink-faint: #8B7D6B;
            --ink-muted: #A69B88;
            
            /* Golden Thread (Primary Interactive Color) */
            --thread: #C4881C;
            --thread-hover: #D4982C;
            --thread-glow: #E5A83C;
            --thread-soft: #D4A84B;
            --thread-faint: #E8D4A8;
            
            /* Stitch Pattern */
            --stitch-color: #C4881C;
            --stitch-size: 8px;
            --stitch-gap: 4px;
            
            /* Accent Colors (Muted, Warm) */
            --olive: #7A8B5C;
            --olive-soft: #9AAB7C;
            --clay: #B08968;
            --clay-soft: #C9A888;
            --sky: #8BA3A8;
            --sky-soft: #A8BFC4;
            --berry: #A07888;
            --berry-soft: #B89898;
            
            /* Section Colors (Warmer Variants) */
            --sanctuary: #8BA3A8;
            --compass: #A08898;
            --family: #B08878;
            --projects: #88A888;
            --repair: #C4A060;
            --fellowship: #88A0A8;
            --marketplace: #B09878;
            --stream: #88A898;
            --mission-primary: #7A8AC9;
            --mission-light: #D2D9F1;
            
            /* Typography */
            --font-display: 'Cormorant Garamond', Georgia, serif;
            --font-body: 'Source Sans 3', -apple-system, sans-serif;
            
            /* Spacing */
            --space-xs: 0.5rem;
            --space-sm: 0.75rem;
            --space-md: 1rem;
            --space-lg: 1.5rem;
            --space-xl: 2rem;
            
            /* Layout */
            --header-height: 60px;
            --left-sidebar-width: 260px;
            --left-sidebar-collapsed: 0px;
            --right-sidebar-width: 500px;
            --right-sidebar-collapsed: 0px;
            --sidebar-toggle-width: 28px;
            
            /* Animation */
            --ease-gentle: cubic-bezier(0.4, 0, 0.2, 1);
            
            /* Shadows (Warmer) */
            --shadow-sm: 0 2px 8px rgba(92, 77, 60, 0.12);
            --shadow-md: 0 4px 20px rgba(92, 77, 60, 0.15);
            --shadow-lg: 0 8px 32px rgba(92, 77, 60, 0.18);
            --shadow-inner: inset 0 2px 4px rgba(92, 77, 60, 0.08);
            
            /* Border Radius */
            --radius-sm: 4px;
            --radius-md: 8px;
            --radius-lg: 12px;
            --radius-xl: 16px;
            
            /* Legacy compatibility */
            --gold: var(--thread);
            --gold-soft: var(--thread-soft);
            --gold-faint: var(--thread-faint);
            --white: #FFFEF8;
            --surface: var(--white);
            
            /* Z-INDEX HIERARCHY */
            --z-base: 1;
            --z-content: 10;
            --z-nav: 100;
            --z-sidebar: 200;
            --z-dropdown: 500;
            --z-panel: 1000;
            /* ═══════════════════════════════════════════════════════════ */
            /* Z-INDEX LAYERING SCALE - Updated January 2026             */
            /* Use these variables for consistent layering throughout     */
            /* ═══════════════════════════════════════════════════════ */
            --z-base: 1;                /* Base content layer */
            --z-dropdown: 100;          /* Dropdowns, tooltips */
            --z-sticky: 200;            /* Sticky headers, navigation */
            --z-fixed: 300;             /* Fixed positioned elements */
            --z-sidebar: 900;           /* Sidebars and panels */
            --z-modal-backdrop: 1000;   /* Modal overlay backgrounds */
            --z-eliyah: 1001;           /* Eliyah widget */
            --z-sword: 1050;            /* Sword function (updated from 1300) */
            --z-modal: 1100;            /* Modal dialogs */
            --z-popover: 1200;          /* Popovers above modals */
            --z-tooltip: 1300;          /* Tooltips (highest interactive) */
            --z-toast: 10000;           /* Toast notifications (always on top) */
            /* ═══════════════════════════════════════════════════════ */
        }
        
        /* ═══════════════════════════════════════════════════════════════ */
        /* DARK THEME - Toggle via .dark-theme class on body              */
        /* ═══════════════════════════════════════════════════════════════ */
        body.dark-theme {
            /* Dark Parchment - Warm Dark Tones */
            --parchment: #1A1612;
            --parchment-aged: #231E18;
            --parchment-deep: #2C2620;
            --parchment-dark: #3D342A;
            --parchment-edge: #4A3F33;
            
            /* Light Ink for Dark Mode */
            --ink: #E8DFD0;
            --ink-soft: #C4B8A4;
            --ink-faint: #9A8E7A;
            --ink-muted: #6B6050;
            
            /* Golden Thread (Slightly Brighter for Dark) */
            --thread: #D4982C;
            --thread-hover: #E5A83C;
            --thread-glow: #F5B84C;
            --thread-soft: #C4881C;
            --thread-faint: #3D3020;
            
            /* Stitch Pattern */
            --stitch-color: #D4982C;
            
            /* Accent Colors (Brighter for Dark Mode) */
            --olive: #8FA86C;
            --olive-soft: #6B8050;
            --clay: #C49878;
            --clay-soft: #A08060;
            --sky: #9AB3B8;
            --sky-soft: #708890;
            --berry: #B08898;
            --berry-soft: #907078;
            
            /* Shadows (Darker) */
            --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
            --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.4);
            --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.5);
            --shadow-inner: inset 0 2px 4px rgba(0, 0, 0, 0.2);
            
            --white: #FFFEF8;
        
            --surface: var(--parchment-aged);
}
        
        body.dark-theme {
            background: linear-gradient(180deg, var(--parchment) 0%, var(--parchment-aged) 100%);
        }
        
        body.dark-theme .header {
            background: linear-gradient(180deg, #1A1410 0%, #231C16 100%);
            border-bottom: 3px solid var(--thread);
        }
        
        body.dark-theme .left-sidebar {
            background: linear-gradient(180deg, var(--parchment-aged) 0%, var(--parchment-deep) 100%);
        }
        
        body.dark-theme .main-content {
            background: var(--parchment);
        }
        
        body.dark-theme .page {
            background: linear-gradient(135deg, var(--parchment) 0%, var(--parchment-aged) 100%) !important;
        }
        
        body.dark-theme .right-sidebar {
            background: var(--parchment-aged);
        }
        
        body.dark-theme .wellspring-panel {
            background: linear-gradient(180deg, var(--parchment) 0%, var(--parchment-aged) 50%, var(--parchment-deep) 100%);
        }
        
        body.dark-theme input,
        body.dark-theme textarea,
        body.dark-theme select {
            background: var(--parchment-deep);
            color: var(--ink);
            border-color: var(--parchment-edge);
        }
        
        body.dark-theme input::placeholder,
        body.dark-theme textarea::placeholder {
            color: var(--ink-faint);
        }
        
        /* Dark Theme - Page Headers */
        body.dark-theme .page-title {
            color: var(--ink);
        }
        
        body.dark-theme .page-subtitle {
            color: var(--ink-soft);
        }
        
        /* Dark Theme - Admin/Leadership Sections */
        body.dark-theme .admin-stat {
            background: var(--parchment-aged);
            border-color: var(--parchment-edge);
        }
        
        body.dark-theme .admin-stat-value {
            color: var(--thread);
        }
        
        body.dark-theme .admin-stat-label {
            color: var(--ink-soft);
        }
        
        body.dark-theme .admin-section {
            background: var(--parchment-aged);
            border-color: var(--parchment-edge);
        }
        
        body.dark-theme .admin-section h3 {
            color: var(--ink);
        }
        
        body.dark-theme .member-row {
            border-color: var(--parchment-edge);
            color: var(--ink);
        }
        
        /* Dark Theme - The Arc Page */
        body.dark-theme .arc-header {
            background: linear-gradient(135deg, var(--thread) 0%, var(--thread-hover) 50%, var(--thread-glow) 100%);
            color: var(--white);
        }
        
        body.dark-theme .arc-phase {
            background: var(--parchment-aged);
            color: var(--ink);
        }
        
        body.dark-theme .arc-phase h3 {
            color: var(--ink);
        }
        
        body.dark-theme .arc-phase p {
            color: var(--ink-soft);
        }
        
        body.dark-theme .arc-connector {
            color: var(--thread);
        }
        
        body.dark-theme .rosetta-table {
            background: var(--parchment-aged);
        }
        
        body.dark-theme .rosetta-table th {
            background: var(--parchment-deep);
            color: var(--ink);
        }
        
        body.dark-theme .rosetta-table td {
            color: var(--ink-soft);
            border-color: var(--parchment-edge);
        }
        
        /* Dark Theme - Cards and Blocks */
        body.dark-theme .card,
        body.dark-theme .block {
            background: var(--parchment-aged);
            border-color: var(--parchment-edge);
        }
        
        body.dark-theme .card-header,
        body.dark-theme .block-header {
            background: var(--parchment-deep);
            border-color: var(--parchment-edge);
        }
        
        body.dark-theme .card-title,
        body.dark-theme .block-title {
            color: var(--thread);
        }
        
        /* Dark Theme - Buttons */
        body.dark-theme .btn {
            background: var(--parchment-deep);
            color: var(--ink);
            border-color: var(--parchment-edge);
        }
        
        body.dark-theme .btn:hover {
            background: var(--thread);
            color: var(--white);
            border-color: var(--thread);
        }
        
        body.dark-theme .btn-primary {
            background: linear-gradient(135deg, var(--thread) 0%, var(--thread-hover) 100%);
            color: var(--white);
        }
        
        body.dark-theme .btn-secondary {
            background: var(--parchment-aged);
            color: var(--ink);
        }
        
        /* Dark Theme - Haven Dashboard Items */
        body.dark-theme .haven-item {
            background: var(--parchment-deep);
            border-color: var(--parchment-edge);
        }
        
        body.dark-theme .haven-item-t {
            color: var(--ink);
        }
        
        body.dark-theme .haven-item-m,
        body.dark-theme .haven-item-s {
            color: var(--ink-soft);
        }
        
        body.dark-theme .haven-card {
            background: var(--parchment-deep);
            border-color: var(--parchment-edge);
        }
        
        body.dark-theme .haven-card-title {
            color: var(--ink);
        }
        
        body.dark-theme .haven-card-meta {
            color: var(--ink-faint);
        }
        
        body.dark-theme .haven-station {
            background: var(--parchment-deep);
            border-color: var(--parchment-edge);
        }
        
        body.dark-theme .haven-btn {
            background: var(--parchment-deep);
            color: var(--ink);
            border-color: var(--parchment-edge);
        }
        
        body.dark-theme .haven-btn:hover {
            background: var(--thread);
            color: var(--white);
        }
        
        body.dark-theme .haven-link {
            background: var(--parchment-deep);
            color: var(--thread);
            border-color: var(--thread-soft);
        }
        
        /* Dark Theme - Navigation */
        body.dark-theme .nav-item {
            color: var(--ink-soft);
        }
        
        body.dark-theme .nav-item:hover {
            background: var(--parchment-deep);
            color: var(--ink);
        }
        
        body.dark-theme .nav-item.active {
            background: var(--parchment-deep);
            color: var(--ink);
            border-color: var(--thread);
        }
        
        body.dark-theme .nav-label {
            color: var(--ink);
        }
        
        body.dark-theme .nav-desc {
            color: var(--ink-faint);
        }
        
        /* Dark Theme - Scripture and Quotes */
        body.dark-theme .scripture-block,
        body.dark-theme blockquote {
            background: var(--parchment-deep);
            border-color: var(--thread);
            color: var(--ink);
        }
        
        body.dark-theme .scripture-ref {
            color: var(--thread);
        }
        
        /* Dark Theme - Tables */
        body.dark-theme table {
            background: var(--parchment-aged);
        }
        
        body.dark-theme th {
            background: var(--parchment-deep);
            color: var(--ink);
        }
        
        body.dark-theme td {
            color: var(--ink-soft);
            border-color: var(--parchment-edge);
        }
        
        body.dark-theme tr:hover td {
            background: var(--parchment-deep);
        }
        
        /* Dark Theme - All white backgrounds */
        body.dark-theme [style*="background: var(--surface)"],
        body.dark-theme [style*="background: var(--surface)"] {
            background: var(--parchment-aged) !important;
        }
        
        /* ═══════════════════════════════════════════════════════════════ */
        /* SETTINGS DROPDOWN STYLES                                        */
        /* ═══════════════════════════════════════════════════════════════ */
        .settings-dropdown {
            position: relative;
            display: inline-block;
            z-index: var(--z-dropdown);
        }
        
        .settings-panel {
            position: absolute;
            top: calc(100% + 8px);
            right: 0;
            width: 320px;
            background: var(--parchment);
            border: 2px dashed var(--parchment-edge);
            border-radius: var(--radius-lg);
            box-shadow: var(--shadow-lg);
            z-index: var(--z-panel);
            display: none;
            overflow: hidden;
            pointer-events: auto;
        }
        
        .settings-panel.active {
            display: block;
            animation: fadeSlideDown 0.2s ease;
        }
        
        @keyframes fadeSlideDown {
            from { opacity: 0; transform: translateY(-10px); }
            to { opacity: 1; transform: translateY(0); }
        }
        
        .settings-header {
            padding: 16px 20px;
            background: var(--parchment-aged);
            border-bottom: 2px dashed var(--parchment-edge);
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
        
        .settings-header h3 {
            font-family: var(--font-display);
            font-size: 18px;
            font-weight: 600;
            color: var(--ink);
            margin: 0;
        }
        
        .settings-close {
            width: 28px;
            height: 28px;
            background: transparent;
            border: none;
            color: var(--ink-faint);
            font-size: 18px;
            cursor: pointer;
            border-radius: var(--radius-sm);
            transition: all 0.2s;
        }
        
        .settings-close:hover {
            background: var(--parchment-deep);
            color: var(--ink);
        }
        
        .settings-section {
            padding: 16px 20px;
            border-bottom: 1px dashed var(--parchment-edge);
        }
        
        .settings-section:last-child {
            border-bottom: none;
        }
        
        .settings-section-title {
            font-size: 11px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            color: var(--ink-faint);
            margin-bottom: 12px;
        }
        
        .settings-item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 12px 14px;
            background: var(--parchment-aged);
            border: 1px dashed var(--parchment-edge);
            border-radius: var(--radius-md);
            margin-bottom: 8px;
            cursor: pointer;
            transition: all 0.2s;
        }
        
        .settings-item:last-child {
            margin-bottom: 0;
        }
        
        .settings-item:hover {
            background: var(--parchment);
            border-color: var(--thread-soft);
        }
        
        .settings-item-left {
            display: flex;
            align-items: center;
            gap: 12px;
        }
        
        .settings-item-icon {
            width: 36px;
            height: 36px;
            background: var(--parchment-deep);
            border-radius: var(--radius-md);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 18px;
        }
        
        .settings-item-text h4 {
            font-size: 14px;
            font-weight: 600;
            color: var(--ink);
            margin: 0 0 2px 0;
        }
        
        .settings-item-text p {
            font-size: 12px;
            color: var(--ink-faint);
            margin: 0;
        }
        
        /* Theme Toggle Switch */
        .theme-toggle {
            position: relative;
            width: 52px;
            height: 28px;
            background: var(--parchment-deep);
            border: 2px solid var(--parchment-edge);
            border-radius: 14px;
            cursor: pointer;
            transition: all 0.3s ease;
        }
        
        .theme-toggle.active {
            background: var(--thread);
            border-color: var(--thread);
        }
        
        .theme-toggle-knob {
            position: absolute;
            top: 2px;
            left: 2px;
            width: 20px;
            height: 20px;
            background: var(--surface);
            border-radius: 50%;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 12px;
        }
        
        .theme-toggle.active .theme-toggle-knob {
            left: calc(100% - 22px);
        }
        
        .settings-link {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 10px 14px;
            color: var(--ink-soft);
            font-size: 14px;
            cursor: pointer;
            border-radius: var(--radius-md);
            transition: all 0.2s;
        }
        
        .settings-link:hover {
            background: var(--parchment-aged);
            color: var(--thread);
        }
        
        .settings-version {
            text-align: center;
            padding: 12px 20px;
            font-size: 11px;
            color: var(--ink-faint);
            background: var(--parchment-aged);
        }
        
        /* Stitched Border Utility Classes */
        .stitched {
            position: relative;
            border: 2px dashed var(--stitch-color);
            border-radius: var(--radius-md);
        }
        
        .stitched-light {
            border: 2px dashed rgba(196, 136, 28, 0.4);
            border-radius: var(--radius-md);
        }
        
        .stitched-bottom {
            border-bottom: 2px dashed var(--stitch-color);
        }
        
        .stitched-top {
            border-top: 2px dashed var(--stitch-color);
        }
        
        .thread-accent {
            color: var(--thread);
        }
        
        .thread-bg {
            background: linear-gradient(135deg, var(--thread) 0%, var(--thread-hover) 100%);
            color: var(--white);
        }
        
        /* Parchment Texture Background */
        .parchment-bg {
            background: 
                linear-gradient(135deg, rgba(244, 236, 215, 0.4) 0%, rgba(229, 217, 186, 0.2) 100%),
                repeating-linear-gradient(
                    45deg,
                    transparent,
                    transparent 2px,
                    rgba(196, 180, 142, 0.03) 2px,
                    rgba(196, 180, 142, 0.03) 4px
                );
            background-color: var(--parchment);
        }
        
        *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
        html, body { height: 100%; overflow: hidden; }
        body { 
            font-family: var(--font-body); 
            background: 
                linear-gradient(180deg, var(--parchment) 0%, var(--parchment-aged) 100%);
            color: var(--ink); 
            line-height: 1.6; 
        }
        .app { 
    display: flex; 
    flex-direction: column; 
    height: 100vh; 
}
        .app-body {
            display: flex;
            flex: 1;
            overflow: hidden;
            position: relative;
        }

        /* ═══════════════════════════════════════════════════════════════ */
        /* UNITY THEME — Echad (Flow) — Child/Teen Mode                    */
        /* Light = Formation (inner life) | Dark = Protection (outer)      */
        /* Unity = River — alive, shimmering, full of wonder               */
        /* ═══════════════════════════════════════════════════════════════ */
        
        body.unity-theme {
            --parchment: #1a1825;
            --parchment-aged: #14121c;
            --parchment-deep: #0e0c14;
            --parchment-edge: #2d2840;
            --surface: #1e1a2a;
            --white: #242030;
            
            /* The Essence - magical flowing colors */
            --thread: #a855f7;
            --thread-soft: rgba(168, 85, 247, 0.4);
            --thread-faint: rgba(168, 85, 247, 0.15);
            --gold: #f472b6;
            --gold-soft: rgba(244, 114, 182, 0.5);
            --gold-faint: rgba(244, 114, 182, 0.15);
            
            /* Ink sparkles */
            --ink: #f0e6ff;
            --ink-soft: #b8a8d8;
            --ink-faint: #7a6a9a;
            
            /* Unity essence - where magic flows */
            --unity-flow: linear-gradient(135deg, #a855f7 0%, #ec4899 50%, #f97316 100%);
            --unity-glow: rgba(168, 85, 247, 0.4);
            --essence-shimmer: linear-gradient(90deg, #a855f7, #ec4899, #f97316, #22d3ee, #a855f7);
        }
        
        body.unity-theme {
            background: linear-gradient(180deg, var(--parchment) 0%, var(--parchment-deep) 100%);
        }
        
        /* Magical ambient glow */
        body.unity-theme::before {
            content: '';
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: 
                radial-gradient(ellipse at 15% 15%, rgba(168, 85, 247, 0.12) 0%, transparent 40%),
                radial-gradient(ellipse at 85% 25%, rgba(236, 72, 153, 0.1) 0%, transparent 40%),
                radial-gradient(ellipse at 50% 80%, rgba(249, 115, 22, 0.08) 0%, transparent 40%),
                radial-gradient(ellipse at 20% 70%, rgba(34, 211, 238, 0.08) 0%, transparent 40%);
            pointer-events: none;
            z-index: -1;
            animation: ambientPulse 8s ease-in-out infinite;
        }
        
        @keyframes ambientPulse {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.7; }
        }
        
        body.unity-theme .header {
            background: linear-gradient(135deg, #1a1825 0%, #0e0c14 100%);
            border-bottom: 2px solid transparent;
            border-image: var(--unity-flow) 1;
            position: relative;
            color: #f0e6ff;
        }
        
        /* Unity header text fixes */
        body.unity-theme .header,
        body.unity-theme .header * {
            color: #f0e6ff;
        }
        
        body.unity-theme .header-logo-text {
            color: #f0e6ff;
        }
        
        body.unity-theme .header .user-greeting {
            color: #b8a8d8;
        }
        
        body.unity-theme .header-btn {
            color: #f0e6ff;
            background: rgba(168, 85, 247, 0.15);
            border-color: rgba(168, 85, 247, 0.3);
        }
        
        body.unity-theme .header-btn:hover {
            background: rgba(168, 85, 247, 0.25);
        }
        
        body.unity-theme .search-box {
            background: rgba(30, 26, 42, 0.8);
            border-color: rgba(168, 85, 247, 0.3);
        }
        
        body.unity-theme .search-box input {
            color: #f0e6ff;
        }
        
        body.unity-theme .search-box input::placeholder {
            color: #7a6a9a;
        }
        
        /* Header shimmer line */
        body.unity-theme .header::after {
            content: '';
            position: absolute;
            bottom: -2px;
            left: 0;
            right: 0;
            height: 2px;
            background: var(--essence-shimmer);
            background-size: 200% 100%;
            animation: shimmerFlow 3s linear infinite;
        }
        
        @keyframes shimmerFlow {
            0% { background-position: 200% 0; }
            100% { background-position: -200% 0; }
        }
        
        body.unity-theme .left-sidebar {
            background: linear-gradient(180deg, var(--parchment) 0%, var(--parchment-deep) 100%);
            border-right: 1px solid var(--parchment-edge);
        }
        
        body.unity-theme .main-content {
            background: var(--parchment-aged);
        }
        
        body.unity-theme .page {
            background: transparent;
            color: var(--ink);
        }
        
        body.unity-theme .right-sidebar {
            background: linear-gradient(180deg, var(--parchment) 0%, var(--parchment-deep) 100%);
            border-left: 1px solid var(--parchment-edge);
        }
        
        body.unity-theme .card,
        body.unity-theme .block {
            background: rgba(30, 26, 42, 0.8);
            border: 1px solid var(--parchment-edge);
            backdrop-filter: blur(10px);
            transition: all 0.3s ease;
        }
        
        body.unity-theme .card:hover,
        body.unity-theme .block:hover {
            border-color: rgba(168, 85, 247, 0.3);
            box-shadow: 0 4px 20px rgba(168, 85, 247, 0.15);
        }
        
        body.unity-theme .card-header,
        body.unity-theme .block-header {
            background: linear-gradient(135deg, rgba(168, 85, 247, 0.1) 0%, rgba(236, 72, 153, 0.1) 100%);
            border-bottom: 1px solid var(--parchment-edge);
        }
        
        body.unity-theme .card-title,
        body.unity-theme .block-title {
            color: var(--ink);
        }
        
        body.unity-theme .nav-item {
            color: var(--ink-soft);
            transition: all 0.2s ease;
        }
        
        body.unity-theme .nav-item:hover {
            background: rgba(168, 85, 247, 0.15);
            color: var(--ink);
            transform: translateX(3px);
        }
        
        body.unity-theme .nav-item.active {
            background: linear-gradient(135deg, rgba(168, 85, 247, 0.2) 0%, rgba(236, 72, 153, 0.15) 100%);
            color: var(--ink);
            border-color: var(--thread);
            box-shadow: 0 0 15px rgba(168, 85, 247, 0.2);
        }
        
        body.unity-theme .btn {
            background: var(--surface);
            color: var(--ink-soft);
            border: 1px solid var(--parchment-edge);
            transition: all 0.2s ease;
        }
        
        body.unity-theme .btn:hover {
            background: var(--parchment-edge);
            color: var(--ink);
            box-shadow: 0 0 10px rgba(168, 85, 247, 0.2);
        }
        
        body.unity-theme .btn-primary {
            background: var(--unity-flow);
            color: #fff;
            border: none;
            font-weight: 600;
        }
        
        body.unity-theme .btn-primary:hover {
            box-shadow: 0 4px 20px rgba(168, 85, 247, 0.4);
            transform: translateY(-1px);
        }
        
        body.unity-theme .btn-gold {
            background: var(--unity-flow);
            color: #fff;
        }
        
        body.unity-theme input,
        body.unity-theme textarea,
        body.unity-theme select {
            background: var(--surface);
            color: var(--ink);
            border-color: var(--parchment-edge);
        }
        
        body.unity-theme input:focus,
        body.unity-theme textarea:focus,
        body.unity-theme select:focus {
            border-color: var(--thread);
            box-shadow: 0 0 10px rgba(168, 85, 247, 0.2);
        }
        
        body.unity-theme input::placeholder,
        body.unity-theme textarea::placeholder {
            color: var(--ink-faint);
        }
        
        /* Shimmering page titles */
        body.unity-theme .page-title {
            color: var(--ink);
            background: var(--essence-shimmer);
            background-size: 200% 100%;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            animation: shimmerFlow 4s linear infinite;
        }
        
        body.unity-theme .page-subtitle {
            color: var(--ink-soft);
        }
        
        body.unity-theme .scripture-block,
        body.unity-theme blockquote {
            background: rgba(168, 85, 247, 0.08);
            border-left: 3px solid;
            border-image: var(--unity-flow) 1;
            color: var(--ink);
        }
        
        body.unity-theme table {
            background: var(--surface);
        }
        
        body.unity-theme th {
            background: linear-gradient(135deg, rgba(168, 85, 247, 0.15) 0%, rgba(236, 72, 153, 0.12) 100%);
            color: var(--ink);
        }
        
        body.unity-theme td {
            color: var(--ink-soft);
            border-color: var(--parchment-edge);
        }
        
        body.unity-theme .haven-station {
            background: rgba(30, 26, 42, 0.6);
            border: 1px solid var(--parchment-edge);
        }
        
        body.unity-theme .station-header {
            background: linear-gradient(135deg, rgba(168, 85, 247, 0.1) 0%, rgba(236, 72, 153, 0.08) 100%);
        }
        
        /* Unity theme - Wellspring glows */
        body.unity-theme .wellspring-panel {
            background: linear-gradient(180deg, var(--parchment) 0%, var(--parchment-deep) 100%);
        }
        
        /* Unity theme - Eliyah Sword ESSENCE GLOW */
        body.unity-theme .es-floating-toggle {
            background: var(--unity-flow);
            box-shadow: 0 4px 25px rgba(168, 85, 247, 0.5), 0 0 40px rgba(236, 72, 153, 0.3);
            animation: essencePulse 2s ease-in-out infinite;
        }
        
        @keyframes essencePulse {
            0%, 100% { 
                box-shadow: 0 4px 25px rgba(168, 85, 247, 0.5), 0 0 40px rgba(236, 72, 153, 0.3);
            }
            50% { 
                box-shadow: 0 4px 35px rgba(168, 85, 247, 0.7), 0 0 60px rgba(236, 72, 153, 0.5);
            }
        }
        
        body.unity-theme .es-overlay {
            background: linear-gradient(135deg, var(--parchment) 0%, var(--parchment-deep) 100%);
            border: 1px solid rgba(168, 85, 247, 0.3);
        }
        
        /* Unity scrollbar */
        body.unity-theme ::-webkit-scrollbar-thumb {
            background: linear-gradient(180deg, rgba(168, 85, 247, 0.4), rgba(236, 72, 153, 0.4));
        }
        
        body.unity-theme ::-webkit-scrollbar-track {
            background: var(--parchment-deep);
        }
        
        /* ═══════════════════════════════════════════════════════════════ */
        /* DARK THEME — Page-Specific Contrast Fixes                       */
        /* Haven Hub Academy, Marketplace, The Stoa, My Profile            */
        /* ═══════════════════════════════════════════════════════════════ */
        
        /* --- HAVEN HUB ACADEMY (Dark Theme) --- */
        body.dark-theme #page-havenhub-academy {
            background: var(--parchment) !important;
        }
        
        body.dark-theme .havenhub-academy-header {
            background: linear-gradient(135deg, var(--parchment-aged) 0%, var(--parchment-deep) 100%);
        }
        
        body.dark-theme .academy-main-title,
        body.dark-theme .hub-section-title {
            color: var(--ink);
        }
        
        body.dark-theme .academy-subtitle,
        body.dark-theme .hub-subtitle {
            color: var(--ink-soft);
        }
        
        body.dark-theme .academy-tab-large {
            background: var(--parchment-deep);
            border-color: var(--parchment-edge);
            color: var(--ink);
        }
        
        body.dark-theme .academy-tab-large .tab-title {
            color: var(--ink);
        }
        
        body.dark-theme .academy-tab-large .tab-desc {
            color: var(--ink-soft);
        }
        
        body.dark-theme .academy-tab-large:hover {
            background: var(--parchment-dark);
        }
        
        body.dark-theme .academy-tab-large.active {
            background: var(--thread);
            border-color: var(--thread);
        }
        
        body.dark-theme .academy-content-area {
            background: var(--parchment);
        }
        
        body.dark-theme .other-centers-label,
        body.dark-theme .center-link {
            color: var(--ink-soft);
        }
        
        body.dark-theme .center-link:hover {
            color: var(--thread);
        }
        
        body.dark-theme .family-hub-container,
        body.dark-theme .hub-card {
            background: var(--parchment-aged);
            border-color: var(--parchment-edge);
            color: var(--ink);
        }
        
        body.dark-theme .hub-card-title,
        body.dark-theme .hub-card h3,
        body.dark-theme .hub-card h4 {
            color: var(--ink);
        }
        
        body.dark-theme .hub-card-meta,
        body.dark-theme .hub-card p {
            color: var(--ink-soft);
        }
        
        /* --- MARKETPLACE (Dark Theme) --- */
        body.dark-theme #page-marketplace {
            background: var(--parchment) !important;
        }
        
        body.dark-theme #page-marketplace > div {
            color: var(--ink);
        }
        
        body.dark-theme #page-marketplace [style*="background: #f5f0e8"],
        body.dark-theme #page-marketplace [style*="background: white"],
        body.dark-theme #page-marketplace [style*="background:#f5f0e8"] {
            background: var(--parchment-aged) !important;
        }
        
        body.dark-theme .market-tab {
            background: var(--parchment-aged);
            border-color: var(--parchment-edge);
            color: var(--ink);
        }
        
        body.dark-theme .market-tab.active {
            background: var(--thread);
            color: white;
        }
        
        body.dark-theme .market-listing {
            background: var(--parchment-aged);
            border-color: var(--parchment-edge);
        }
        
        body.dark-theme .market-listing-title {
            color: var(--ink);
        }
        
        body.dark-theme .market-listing-meta,
        body.dark-theme .market-listing-desc {
            color: var(--ink-soft);
        }
        
        body.dark-theme #page-marketplace input,
        body.dark-theme #page-marketplace select {
            background: var(--parchment-deep) !important;
            border-color: var(--parchment-edge) !important;
            color: var(--ink) !important;
        }
        
        body.dark-theme .market-sidebar-card {
            background: var(--parchment-aged);
            border-color: var(--parchment-edge);
            color: var(--ink);
        }
        
        /* --- THE STOA / FORUM (Dark Theme) --- */
        body.dark-theme #page-forum {
            background: var(--parchment) !important;
        }
        
        body.dark-theme #page-forum > div {
            background: var(--parchment) !important;
        }
        
        body.dark-theme .stoa-nav-item {
            color: var(--ink);
            background: var(--parchment-aged);
        }
        
        body.dark-theme .stoa-nav-item:hover,
        body.dark-theme .stoa-nav-item.active {
            background: var(--thread-faint);
            color: var(--thread);
        }
        
        body.dark-theme .stoa-post {
            background: var(--parchment-aged);
            border-color: var(--parchment-edge);
        }
        
        body.dark-theme .stoa-title {
            color: var(--ink);
        }
        
        body.dark-theme .stoa-text {
            color: var(--ink-soft);
        }
        
        body.dark-theme .stoa-scripture {
            background: var(--parchment-deep);
            color: var(--ink-soft);
            border-color: var(--thread-soft);
        }
        
        body.dark-theme .stoa-sort-btn {
            background: var(--parchment-aged);
            color: var(--ink);
            border-color: var(--parchment-edge);
        }
        
        body.dark-theme .stoa-sort-btn.active {
            background: var(--thread);
            color: white;
        }
        
        body.dark-theme .stoa-comment {
            background: var(--parchment-deep);
            color: var(--ink);
        }
        
        body.dark-theme .stoa-comment p {
            color: var(--ink-soft);
        }
        
        body.dark-theme .stoa-comment-input textarea {
            background: var(--parchment-deep);
            border-color: var(--parchment-edge);
            color: var(--ink);
        }
        
        body.dark-theme .stoa-voting {
            color: var(--ink);
        }
        
        body.dark-theme .stoa-actions button {
            color: var(--ink-soft);
        }
        
        body.dark-theme .stoa-actions button:hover {
            color: var(--thread);
        }
        
        body.dark-theme #stoa-feed-title {
            color: var(--ink) !important;
        }
        
        body.dark-theme .stoa-badge {
            background: var(--thread-faint);
            color: var(--thread);
        }
        
        body.dark-theme .stoa-flair {
            color: white;
        }
        
        /* --- MY PROFILE (Dark Theme) --- */
        body.dark-theme #page-profile {
            background: var(--parchment) !important;
        }
        
        body.dark-theme .profile-page-header {
            color: var(--ink);
        }
        
        body.dark-theme .profile-hero {
            background: linear-gradient(135deg, var(--parchment-deep) 0%, var(--parchment-dark) 100%);
        }
        
        body.dark-theme .profile-hero-name {
            color: var(--ink);
        }
        
        body.dark-theme .profile-hero-role {
            color: var(--ink-soft);
        }
        
        body.dark-theme .profile-hero-identity {
            color: var(--ink-soft);
            background: var(--parchment-aged);
        }
        
        body.dark-theme .profile-hero-stat-value {
            color: var(--thread);
        }
        
        body.dark-theme .profile-hero-stat-label {
            color: var(--ink-soft);
        }
        
        body.dark-theme .profile-summary {
            background: var(--parchment-aged);
            color: var(--ink);
        }
        
        body.dark-theme .profile-tabs {
            background: var(--parchment-deep);
        }
        
        body.dark-theme .profile-tab {
            color: var(--ink-soft);
            background: transparent;
        }
        
        body.dark-theme .profile-tab:hover {
            background: var(--parchment-aged);
            color: var(--ink);
        }
        
        body.dark-theme .profile-tab.active {
            background: var(--thread);
            color: white;
        }
        
        body.dark-theme .profile-section {
            color: var(--ink);
        }
        
        body.dark-theme .profile-section h3,
        body.dark-theme .profile-section h4 {
            color: var(--ink);
        }
        
        body.dark-theme .profile-section p {
            color: var(--ink-soft);
        }
        
        body.dark-theme .reveal-section,
        body.dark-theme .reveal-card {
            background: var(--parchment-aged);
            border-color: var(--parchment-edge);
            color: var(--ink);
        }
        
        body.dark-theme .reveal-card-title {
            color: var(--ink);
        }
        
        body.dark-theme .reveal-card p {
            color: var(--ink-soft);
        }
        
        /* ═══════════════════════════════════════════════════════════════ */
        /* UNITY THEME — Page-Specific Contrast Fixes                      */
        /* Haven Hub Academy, Marketplace, The Stoa, My Profile            */
        /* ═══════════════════════════════════════════════════════════════ */
        
        /* --- HAVEN HUB ACADEMY (Unity Theme) --- */
        body.unity-theme #page-havenhub-academy {
            background: var(--parchment) !important;
        }
        
        body.unity-theme .havenhub-academy-header {
            background: linear-gradient(135deg, var(--parchment) 0%, var(--parchment-aged) 100%);
        }
        
        body.unity-theme .academy-main-title,
        body.unity-theme .hub-section-title {
            color: var(--ink);
        }
        
        body.unity-theme .academy-tab-large {
            background: rgba(255, 255, 255, 0.7);
            border-color: var(--parchment-edge);
        }
        
        body.unity-theme .academy-tab-large .tab-title {
            color: var(--ink);
        }
        
        body.unity-theme .academy-tab-large .tab-desc {
            color: var(--ink-soft);
        }
        
        body.unity-theme .academy-tab-large.active {
            background: var(--thread);
        }
        
        body.unity-theme .family-hub-container,
        body.unity-theme .hub-card {
            background: rgba(255, 255, 255, 0.8);
            color: var(--ink);
        }
        
        /* --- MARKETPLACE (Unity Theme) --- */
        body.unity-theme #page-marketplace {
            background: var(--parchment) !important;
        }
        
        body.unity-theme .market-listing {
            background: rgba(255, 255, 255, 0.85);
            color: var(--ink);
        }
        
        body.unity-theme .market-listing-title {
            color: var(--ink);
        }
        
        body.unity-theme .market-listing-meta,
        body.unity-theme .market-listing-desc {
            color: var(--ink-soft);
        }
        
        body.unity-theme .market-tab {
            background: rgba(255, 255, 255, 0.7);
            color: var(--ink);
        }
        
        body.unity-theme #page-marketplace input,
        body.unity-theme #page-marketplace select {
            background: rgba(255, 255, 255, 0.9) !important;
            color: var(--ink) !important;
        }
        
        /* --- THE STOA / FORUM (Unity Theme) --- */
        body.unity-theme #page-forum {
            background: var(--parchment) !important;
        }
        
        body.unity-theme #page-forum > div {
            background: var(--parchment) !important;
        }
        
        body.unity-theme .stoa-post {
            background: rgba(255, 255, 255, 0.85);
        }
        
        body.unity-theme .stoa-title {
            color: var(--ink);
        }
        
        body.unity-theme .stoa-text {
            color: var(--ink-soft);
        }
        
        body.unity-theme .stoa-nav-item {
            color: var(--ink);
        }
        
        body.unity-theme .stoa-sort-btn {
            background: rgba(255, 255, 255, 0.7);
            color: var(--ink);
        }
        
        body.unity-theme #stoa-feed-title {
            color: var(--ink) !important;
        }
        
        /* --- MY PROFILE (Unity Theme) --- */
        body.unity-theme #page-profile {
            background: var(--parchment) !important;
        }
        
        body.unity-theme .profile-hero {
            background: linear-gradient(135deg, rgba(168, 85, 247, 0.2) 0%, rgba(236, 72, 153, 0.2) 100%);
        }
        
        body.unity-theme .profile-hero-name {
            color: var(--ink);
        }
        
        body.unity-theme .profile-hero-role {
            color: var(--ink-soft);
        }
        
        body.unity-theme .profile-summary {
            background: var(--parchment-aged);
            color: var(--ink);
        }
        
        body.unity-theme .profile-tab {
            color: var(--ink-soft);
        }
        
        body.unity-theme .profile-tab.active {
            background: var(--thread);
            color: white;
        }
        
        body.unity-theme .reveal-section,
        body.unity-theme .reveal-card {
            background: var(--parchment-aged);
            border-color: var(--parchment-dark);
            color: var(--ink);
        }

        /* ═══════════════════════════════════════════════════════════════ */
        /* RUACH THEME — The Breath of God (Spirit Light)                  */
        /* For children and teens — bright, airy, full of wonder           */
        /* Like morning light through stained glass                        */
        /* ═══════════════════════════════════════════════════════════════ */
        
        body.ruach-theme {
            --parchment: #fefefe;
            --parchment-aged: #f8fafc;
            --parchment-deep: #f0f7ff;
            --parchment-edge: #e0efff;
            --surface: #ffffff;
            --white: #ffffff;
            
            /* Spirit colors - soft pastels that breathe */
            --thread: #7ec8e3;
            --thread-soft: rgba(126, 200, 227, 0.4);
            --thread-faint: rgba(126, 200, 227, 0.12);
            --gold: #ffb6c1;
            --gold-soft: rgba(255, 182, 193, 0.5);
            --gold-faint: rgba(255, 182, 193, 0.12);
            
            /* Ink - soft and gentle */
            --ink: #4a5568;
            --ink-soft: #718096;
            --ink-faint: #a0aec0;
            
            /* Ruach flow - breath of heaven */
            --ruach-flow: linear-gradient(135deg, #e0f7ff 0%, #fff0f5 33%, #f0fff4 66%, #fffaf0 100%);
            --ruach-glow: rgba(126, 200, 227, 0.3);
            --spirit-shimmer: linear-gradient(90deg, #7ec8e3, #ffb6c1, #98fb98, #fffacd, #7ec8e3);
        }
        
        body.ruach-theme {
            background: var(--ruach-flow);
            background-attachment: fixed;
        }
        
        /* Gentle floating light particles effect */
        body.ruach-theme::before {
            content: '';
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: 
                radial-gradient(circle at 20% 30%, rgba(126, 200, 227, 0.15) 0%, transparent 30%),
                radial-gradient(circle at 80% 20%, rgba(255, 182, 193, 0.12) 0%, transparent 30%),
                radial-gradient(circle at 60% 70%, rgba(152, 251, 152, 0.1) 0%, transparent 30%),
                radial-gradient(circle at 30% 80%, rgba(255, 250, 205, 0.12) 0%, transparent 30%);
            pointer-events: none;
            z-index: -1;
            animation: spiritBreath 10s ease-in-out infinite;
        }
        
        @keyframes spiritBreath {
            0%, 100% { opacity: 0.8; transform: scale(1); }
            50% { opacity: 1; transform: scale(1.02); }
        }
        
        body.ruach-theme .header {
            background: linear-gradient(135deg, #ffffff 0%, #f0f7ff 100%);
            border-bottom: 2px solid transparent;
            background-clip: padding-box;
            position: relative;
            box-shadow: 0 2px 20px rgba(126, 200, 227, 0.2);
        }
        
        /* Rainbow spirit line under header */
        body.ruach-theme .header::after {
            content: '';
            position: absolute;
            bottom: -2px;
            left: 0;
            right: 0;
            height: 3px;
            background: var(--spirit-shimmer);
            background-size: 200% 100%;
            animation: spiritFlow 4s linear infinite;
            border-radius: 0 0 2px 2px;
        }
        
        @keyframes spiritFlow {
            0% { background-position: 200% 0; }
            100% { background-position: -200% 0; }
        }
        
        /* Header text needs to be darker for light bg */
        body.ruach-theme .header {
            color: #4a5568;
        }
        
        body.ruach-theme .header,
        body.ruach-theme .header * {
            color: #4a5568;
        }
        
        body.ruach-theme .header-logo-text {
            color: #4a5568;
        }
        
        body.ruach-theme .header .user-greeting {
            color: #718096;
        }
        
        body.ruach-theme .header-btn {
            color: #4a5568;
            background: rgba(126, 200, 227, 0.15);
            border-color: rgba(126, 200, 227, 0.3);
        }
        
        body.ruach-theme .header-btn:hover {
            background: rgba(126, 200, 227, 0.25);
            color: #2d3748;
        }
        
        body.ruach-theme .search-box {
            background: rgba(255, 255, 255, 0.9);
            border-color: rgba(126, 200, 227, 0.3);
        }
        
        body.ruach-theme .search-box input {
            color: #4a5568;
        }
        
        body.ruach-theme .search-box input::placeholder {
            color: #a0aec0;
        }
        
        body.ruach-theme .left-sidebar {
            background: linear-gradient(180deg, rgba(255,255,255,0.9) 0%, rgba(240,247,255,0.95) 100%);
            border-right: 1px solid var(--parchment-edge);
            backdrop-filter: blur(10px);
        }
        
        body.ruach-theme .main-content {
            background: transparent;
        }
        
        body.ruach-theme .page {
            background: transparent;
            color: var(--ink);
        }
        
        body.ruach-theme .right-sidebar {
            background: linear-gradient(180deg, rgba(255,255,255,0.9) 0%, rgba(255,240,245,0.95) 100%);
            border-left: 1px solid var(--parchment-edge);
            backdrop-filter: blur(10px);
        }
        
        body.ruach-theme .card,
        body.ruach-theme .block {
            background: rgba(255, 255, 255, 0.85);
            border: 1px solid rgba(126, 200, 227, 0.2);
            backdrop-filter: blur(10px);
            box-shadow: 0 4px 15px rgba(126, 200, 227, 0.1);
            transition: all 0.3s ease;
        }
        
        body.ruach-theme .card:hover,
        body.ruach-theme .block:hover {
            border-color: rgba(126, 200, 227, 0.4);
            box-shadow: 0 8px 30px rgba(126, 200, 227, 0.2);
            transform: translateY(-2px);
        }
        
        body.ruach-theme .card-header,
        body.ruach-theme .block-header {
            background: linear-gradient(135deg, rgba(126, 200, 227, 0.1) 0%, rgba(255, 182, 193, 0.1) 100%);
            border-bottom: 1px solid rgba(126, 200, 227, 0.15);
        }
        
        body.ruach-theme .card-title,
        body.ruach-theme .block-title {
            color: var(--ink);
        }
        
        body.ruach-theme .nav-item {
            color: var(--ink-soft);
            transition: all 0.2s ease;
        }
        
        body.ruach-theme .nav-item:hover {
            background: rgba(126, 200, 227, 0.15);
            color: var(--ink);
            transform: translateX(3px);
        }
        
        body.ruach-theme .nav-item.active {
            background: linear-gradient(135deg, rgba(126, 200, 227, 0.2) 0%, rgba(255, 182, 193, 0.15) 100%);
            color: var(--ink);
            border-left: 3px solid var(--thread);
            box-shadow: 0 2px 10px rgba(126, 200, 227, 0.15);
        }
        
        body.ruach-theme .nav-label {
            color: var(--ink);
        }
        
        body.ruach-theme .nav-desc {
            color: var(--ink-faint);
        }
        
        body.ruach-theme .btn {
            background: var(--surface);
            color: var(--ink-soft);
            border: 1px solid var(--parchment-edge);
            transition: all 0.2s ease;
        }
        
        body.ruach-theme .btn:hover {
            background: rgba(126, 200, 227, 0.1);
            color: var(--ink);
            border-color: var(--thread);
        }
        
        body.ruach-theme .btn-primary {
            background: linear-gradient(135deg, #7ec8e3 0%, #ffb6c1 100%);
            color: #fff;
            border: none;
            font-weight: 600;
            box-shadow: 0 2px 10px rgba(126, 200, 227, 0.3);
        }
        
        body.ruach-theme .btn-primary:hover {
            box-shadow: 0 4px 20px rgba(126, 200, 227, 0.4);
            transform: translateY(-1px);
        }
        
        body.ruach-theme .btn-gold {
            background: linear-gradient(135deg, #ffb6c1 0%, #fffacd 100%);
            color: var(--ink);
        }
        
        body.ruach-theme input,
        body.ruach-theme textarea,
        body.ruach-theme select {
            background: rgba(255, 255, 255, 0.9);
            color: var(--ink);
            border: 1px solid rgba(126, 200, 227, 0.3);
        }
        
        body.ruach-theme input:focus,
        body.ruach-theme textarea:focus,
        body.ruach-theme select:focus {
            border-color: var(--thread);
            box-shadow: 0 0 15px rgba(126, 200, 227, 0.2);
            outline: none;
        }
        
        body.ruach-theme input::placeholder,
        body.ruach-theme textarea::placeholder {
            color: var(--ink-faint);
        }
        
        /* Shimmering rainbow page titles */
        body.ruach-theme .page-title {
            background: var(--spirit-shimmer);
            background-size: 200% 100%;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            animation: spiritFlow 5s linear infinite;
        }
        
        body.ruach-theme .page-subtitle {
            color: var(--ink-soft);
        }
        
        body.ruach-theme .scripture-block,
        body.ruach-theme blockquote {
            background: linear-gradient(135deg, rgba(126, 200, 227, 0.08) 0%, rgba(255, 182, 193, 0.08) 100%);
            border-left: 3px solid var(--thread);
            color: var(--ink);
        }
        
        body.ruach-theme table {
            background: rgba(255, 255, 255, 0.8);
        }
        
        body.ruach-theme th {
            background: linear-gradient(135deg, rgba(126, 200, 227, 0.15) 0%, rgba(255, 182, 193, 0.1) 100%);
            color: var(--ink);
        }
        
        body.ruach-theme td {
            color: var(--ink-soft);
            border-color: rgba(126, 200, 227, 0.2);
        }
        
        body.ruach-theme .haven-station {
            background: rgba(255, 255, 255, 0.7);
            border: 1px solid rgba(126, 200, 227, 0.2);
        }
        
        body.ruach-theme .station-header {
            background: linear-gradient(135deg, rgba(126, 200, 227, 0.1) 0%, rgba(255, 182, 193, 0.08) 100%);
        }
        
        /* Ruach theme - Wellspring glows softly */
        body.ruach-theme .wellspring-panel {
            background: linear-gradient(180deg, rgba(255,255,255,0.95) 0%, rgba(240,247,255,0.98) 100%);
        }
        
        /* Ruach theme - Eliyah Sword SPIRIT GLOW */
        body.ruach-theme .es-floating-toggle {
            background: linear-gradient(135deg, #7ec8e3 0%, #ffb6c1 50%, #98fb98 100%);
            box-shadow: 0 4px 25px rgba(126, 200, 227, 0.5), 0 0 40px rgba(255, 182, 193, 0.3);
            animation: spiritPulse 3s ease-in-out infinite;
        }
        
        @keyframes spiritPulse {
            0%, 100% { 
                box-shadow: 0 4px 25px rgba(126, 200, 227, 0.4), 0 0 30px rgba(255, 182, 193, 0.2);
            }
            50% { 
                box-shadow: 0 4px 35px rgba(126, 200, 227, 0.6), 0 0 50px rgba(255, 182, 193, 0.4);
            }
        }
        
        body.ruach-theme .es-overlay {
            background: linear-gradient(135deg, rgba(255,255,255,0.98) 0%, rgba(240,247,255,0.98) 100%);
            border: 1px solid rgba(126, 200, 227, 0.3);
        }
        
        /* Ruach scrollbar - gentle and light */
        body.ruach-theme ::-webkit-scrollbar {
            width: 8px;
        }
        
        body.ruach-theme ::-webkit-scrollbar-thumb {
            background: linear-gradient(180deg, rgba(126, 200, 227, 0.4), rgba(255, 182, 193, 0.4));
            border-radius: 4px;
        }
        
        body.ruach-theme ::-webkit-scrollbar-track {
            background: rgba(126, 200, 227, 0.1);
        }
        
        /* Settings panel adjustments for Ruach */
        body.ruach-theme .settings-section-title {
            color: var(--ink);
        }
        
        body.ruach-theme .settings-item {
            background: rgba(255, 255, 255, 0.6);
        }
        
        body.ruach-theme .settings-item:hover {
            background: rgba(126, 200, 227, 0.1);
        }

        /* ═══════════════════════════════════════════════════════════════ */
        /* ═══════════════════════════════════════════════════════════════ */
        /* COMMAND CENTER STYLES                                           */
        /* ═══════════════════════════════════════════════════════════════ */
        .homeos-command-center { background: var(--parchment); border-radius: 20px; border: 2px dashed var(--parchment-edge); padding: var(--space-lg); }
        .command-tabs { display: flex; gap: 8px; margin-bottom: 20px; overflow-x: auto; padding-bottom: 8px; }
        .command-tab { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px; background: var(--parchment-deep); border: 1px solid var(--parchment-dark); border-radius: 12px; cursor: pointer; min-width: 100px; transition: all 0.2s; }
        .command-tab.active { background: var(--thread); border-color: var(--thread); }
        .command-tab.active .tab-label, .command-tab.active .tab-icon { color: white; }
        .command-tab .tab-icon { font-size: 20px; }
        .command-tab .tab-label { font-size: 12px; font-weight: 600; color: var(--ink-soft); }
        .command-tab .tab-count { position: absolute; top: -5px; right: -5px; background: var(--family); color: white; font-size: 10px; padding: 2px 6px; border-radius: 10px; }
        
        .command-panel { display: none; }
        .command-panel.active { display: block; animation: fadeIn 0.3s ease; }
        
        .input-section { margin-bottom: 20px; padding: 16px; background: var(--parchment-deep); border-radius: 12px; }
        .input-row { display: flex; gap: 8px; }
        .command-input { flex: 1; padding: 10px 14px; border: 1px solid var(--parchment-dark); border-radius: 8px; outline: none; }
        .command-select { padding: 10px; border: 1px solid var(--parchment-dark); border-radius: 8px; background: white; }
        .command-add-btn { padding: 10px 20px; background: var(--thread); color: white; border: none; border-radius: 8px; font-weight: 600; cursor: pointer; }
        
        .helper-chip { padding: 4px 12px; background: white; border: 1px solid var(--parchment-dark); border-radius: 100px; font-size: 12px; cursor: pointer; margin-top: 8px; }
        .helper-chip:hover { background: var(--gold-faint); border-color: var(--gold); }
        
        .list-section { background: white; border-radius: 12px; border: 1px solid var(--parchment-dark); overflow: hidden; }
        .list-header { padding: 12px 16px; background: var(--parchment-aged); border-bottom: 1px solid var(--parchment-dark); display: flex; justify-content: space-between; align-items: center; }
        .list-title { font-weight: 700; font-size: 14px; color: var(--ink); }
        
        .list-item { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--parchment-deep); }
        .list-item:last-child { border-bottom: none; }
        .item-checkbox { width: 20px; height: 20px; border: 2px solid var(--parchment-dark); border-radius: 4px; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 12px; }
        .item-checkbox.checked { background: var(--olive); border-color: var(--olive); color: white; }
        .item-text { flex: 1; font-size: 14px; color: var(--ink); }
        .item-delete { opacity: 0.3; cursor: pointer; transition: opacity 0.2s; background: none; border: none; }
        .item-delete:hover { opacity: 1; }

        /* Meal Plan Specifics */
        .meal-plan-grid { display: flex; flex-direction: column; gap: 16px; }
        .meal-inputs { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
        .meal-input-row { display: flex; align-items: center; gap: 8px; }
        .meal-label { font-size: 13px; font-weight: 600; color: var(--ink-soft); min-width: 100px; }
        .meal-plan-view { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; padding: 16px; background: var(--parchment-deep); }
        .meal-day-card { background: white; border-radius: 12px; padding: 16px; border: 1px solid var(--parchment-dark); transition: transform 0.2s; cursor: pointer; position: relative; }
        .meal-day-card:hover { transform: translateY(-2px); border-color: var(--gold); }
        .meal-day-card.today { border: 2px solid var(--gold); box-shadow: 0 4px 12px rgba(184,134,11,0.1); }
        .meal-day-title { font-weight: 800; font-size: 16px; color: var(--gold); margin-bottom: 12px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--parchment-deep); padding-bottom: 8px; }
        .today-badge { background: var(--gold); color: white; font-size: 10px; padding: 2px 8px; border-radius: 100px; text-transform: uppercase; }
        .meal-row { margin-bottom: 8px; font-size: 14px; display: flex; flex-direction: column; gap: 2px; }
        .meal-row-label { font-size: 11px; font-weight: 700; color: var(--ink-faint); text-transform: uppercase; }
        .meal-row-value { color: var(--ink); font-weight: 500; }
        .meal-notes { margin-top: 12px; padding-top: 8px; border-top: 1px dashed var(--parchment-deep); font-size: 12px; color: var(--ink-soft); font-style: italic; }

        /* Daily Log Specifics */
        .log-date-header { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; padding-bottom: 12px; border-bottom: 1px solid var(--parchment-dark); }
        .log-date { font-family: var(--font-display); font-size: 18px; font-weight: 700; color: var(--ink); flex: 1; }
        .log-sections { display: flex; flex-direction: column; gap: 16px; }
        .log-label { font-size: 13px; font-weight: 700; color: var(--ink); margin-bottom: 6px; display: block; }
        .command-textarea { width: 100%; min-height: 80px; padding: 12px; border: 1px solid var(--parchment-dark); border-radius: 10px; background: white; font-size: 14px; resize: vertical; outline: none; transition: border-color 0.2s; }
        .command-textarea:focus { border-color: var(--gold); }
        .log-input-row { display: flex; gap: 16px; }
        .log-input-group.half { flex: 1; }
        .energy-selector { display: flex; gap: 8px; }
        .energy-btn { flex: 1; height: 40px; border-radius: 8px; border: 1px solid var(--parchment-dark); background: white; cursor: pointer; font-size: 18px; transition: all 0.2s; }
        .energy-btn:hover { background: var(--parchment-deep); }
        .energy-btn.active { background: var(--gold); border-color: var(--gold); color: white; transform: scale(1.05); }
        .log-history { display: flex; flex-direction: column; gap: 12px; padding: 16px; background: var(--parchment-deep); }
        .log-entry-card { background: white; border-radius: 12px; padding: 16px; border: 1px solid var(--parchment-dark); }
        .log-entry-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; border-bottom: 1px solid var(--parchment-deep); padding-bottom: 8px; }
        .log-entry-date { font-weight: 700; color: var(--ink); font-size: 14px; }
        .log-entry-indicators { display: flex; gap: 8px; align-items: center; }
        .log-pulse-indicator { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 100px; text-transform: uppercase; }
        .log-pulse-indicator.calm { background: #e8f5e9; color: #2e7d32; }
        .log-pulse-indicator.busy { background: #fff3e0; color: #ef6c00; }
        .log-pulse-indicator.overloaded { background: #ffebee; color: #c62828; }
        .log-pulse-indicator.rest { background: #e3f2fd; color: #1565c0; }
        .log-entry-section { margin-bottom: 10px; }
        .log-entry-section:last-child { margin-bottom: 0; }
        .log-entry-section-label { font-size: 10px; font-weight: 800; color: var(--ink-faint); text-transform: uppercase; margin-bottom: 2px; }
        .log-entry-section-content { font-size: 13px; color: var(--ink); line-height: 1.5; }

        /* Child Mode Restrictions */
        body.child-mode button[onclick*="Mentor_Guide"] {
            display: none !important;
        }

        /* [CSS-002] HEADER                                               */
        /* ═══════════════════════════════════════════════════════════════ */
    .header {
        height: var(--header-height);
        background: var(--ink);
        color: white;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 var(--space-lg);
        position: relative;
        z-index: 1000;
        box-shadow: 0 4px 20px rgba(0,0,0,0.3);
    }
    
    .header-left {
        display: flex;
        align-items: center;
        gap: var(--space-md);
        flex: 1;
        min-width: 0;
    }
    
    .header-right {
        display: flex;
        align-items: center;
        gap: var(--space-lg);
        flex-shrink: 0;
    }
        .logo { display: flex; align-items: center; gap: var(--space-sm); cursor: pointer; }
        .logo-mark {
            width: 36px;
            height: 36px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        /* HavenHub OS Icon - No circle, just the icon */
        .logo-mark.havenhub-os-icon {
            border: none !important;
            border-radius: 0 !important;
            background: transparent !important;
        }
        /* Golden treehouse icon */
        .theme-adaptive-icon {
            stroke: #D4A574; /* Golden yellowish color */
            fill: none;
        }
        [data-theme="dark"] .theme-adaptive-icon,
        [data-theme="unity"] .theme-adaptive-icon {
            stroke: #E5B975; /* Slightly lighter golden for dark themes */
        }
        [data-theme="ruach"] .theme-adaptive-icon {
            stroke: #F0E68C; /* Bright golden for kids theme */
        }
        .logo-text { font-family: var(--font-display); font-size: 1.3rem; }
        .logo-text span { color: var(--thread); font-weight: 600; }
    .search-bar {
        background: rgba(255, 255, 255, 0.1);
        border-radius: 100px;
        padding: 6px 16px;
        display: flex;
        align-items: center;
        gap: var(--space-sm);
        flex: 1;
        max-width: 300px;
        transition: all 0.2s var(--ease-gentle);
    }
        .search-bar:focus-within {
            border-color: var(--thread);
            background: rgba(245, 236, 215, 0.15);
        }
        .search-bar input { flex: 1; border: none; background: transparent; color: var(--parchment); font-family: var(--font-body); font-size: 0.9rem; outline: none; }
        .search-bar input::placeholder { color: rgba(247, 243, 235, 0.5); }
        .header-btn { 
            display: flex; 
            align-items: center; 
            gap: var(--space-xs); 
            padding: var(--space-xs) var(--space-md); 
            background: transparent; 
            border: 1px dashed rgba(196, 136, 28, 0.4);
            border-radius: 100px; 
            color: var(--parchment); 
            font-family: var(--font-body); 
            font-size: 0.85rem; 
            cursor: pointer; 
            transition: all 0.3s; 
        }
        .header-btn:hover { 
            background: rgba(196, 136, 28, 0.2); 
            border-color: var(--thread);
            color: var(--thread-glow);
        }

        /* Self‑Awareness dropdown styles */
        .self-awareness-container { position: relative; display: flex; align-items: center; }
        .self-awareness-toggle { 
            display: flex; 
            align-items: center; 
            gap: var(--space-xs); 
            padding: var(--space-xs) var(--space-md); 
            background: transparent; 
            border: 1px dashed rgba(196, 136, 28, 0.4);
            border-radius: 100px; 
            color: var(--parchment); 
            font-family: var(--font-body); 
            font-size: 0.85rem; 
            cursor: pointer; 
            transition: all 0.3s; 
        }
        .self-awareness-toggle:hover { 
            background: rgba(196, 136, 28, 0.2); 
            border-color: var(--thread); 
        }
        .self-awareness-panel { 
            position: absolute; 
            top: calc(100% + var(--space-sm)); 
            right: 0; 
            width: 400px; 
            max-height: calc(100vh - var(--header-height) - var(--space-md)); 
            background: var(--parchment); 
            color: var(--ink); 
            border: 2px dashed var(--thread);
            border-radius: var(--radius-lg); 
            box-shadow: var(--shadow-lg); 
            padding: var(--space-lg); 
            overflow-y: auto; 
            display: none; 
            z-index: 200; 
        }
        @media (max-width: 768px) {
            .self-awareness-panel { width: 90vw; right: auto; left: 0; }
        }

        /* Override self-system positioning when placed inside the self-awareness panel */
        .self-awareness-panel .self-system {
            position: static;
            right: auto;
            top: auto;
            bottom: auto;
            width: 100%;
            padding: 0;
            border-left: none;
        }
        .avatar { 
            width: 36px; 
            height: 36px; 
            border-radius: 50%; 
            background: linear-gradient(135deg, var(--olive) 0%, var(--olive-soft) 100%); 
            border: 2px solid var(--thread);
            display: flex; 
            align-items: center; 
            justify-content: center; 
            font-family: var(--font-display); 
            font-size: 1rem; 
            color: white; 
            cursor: pointer;
            transition: transform 0.2s, box-shadow 0.2s;
        }
        
        .avatar:hover {
            transform: scale(1.1);
            box-shadow: 0 4px 15px rgba(0,0,0,0.2);
        }
        
        /* ═══════════════════════════════════════════════════════════════ */
        /* PROFILE MODAL                                                    */
        /* ═══════════════════════════════════════════════════════════════ */
        
        .profile-modal-overlay {
            position: fixed;
            inset: 0;
            background: rgba(0, 0, 0, 0.6);
            backdrop-filter: blur(8px);
            z-index: 11000;
            display: none;
            align-items: center;
            justify-content: center;
            padding: 20px;
            animation: profileFadeIn 0.2s ease;
        }
        
        .profile-modal-overlay.open {
            display: flex;
        }
        
        @keyframes profileFadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }
        
        .profile-modal {
            background: var(--surface);
            border-radius: 16px;
            width: 100%;
            max-width: 520px;
            max-height: 85vh;
            overflow: hidden;
            display: flex;
            flex-direction: column;
            box-shadow: 0 25px 80px rgba(0, 0, 0, 0.4);
            animation: profileSlideUp 0.3s ease;
        }
        
        @keyframes profileSlideUp {
            from { opacity: 0; transform: translateY(30px); }
            to { opacity: 1; transform: translateY(0); }
        }
        
        .profile-modal-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 20px 24px;
            background: linear-gradient(135deg, var(--gold-faint) 0%, var(--parchment) 100%);
            border-bottom: 1px solid var(--parchment-edge);
        }
        
        .profile-modal-header h2 {
            margin: 0;
            font-family: var(--font-display);
            font-size: 1.3rem;
            color: var(--ink);
        }
        
        .profile-modal-close {
            width: 36px;
            height: 36px;
            border: none;
            background: rgba(0,0,0,0.05);
            border-radius: 50%;
            font-size: 1.2rem;
            cursor: pointer;
            color: var(--ink-soft);
            transition: all 0.2s;
        }
        
        .profile-modal-close:hover {
            background: rgba(0,0,0,0.1);
            color: var(--ink);
        }
        
        .profile-modal-content {
            flex: 1;
            overflow-y: auto;
            padding: 24px;
        }
        
        .profile-avatar-section {
            display: flex;
            flex-direction: column;
            align-items: center;
            margin-bottom: 24px;
        }
        
        .profile-avatar-large {
            width: 100px;
            height: 100px;
            border-radius: 50%;
            background: linear-gradient(135deg, var(--thread) 0%, var(--gold) 100%);
            display: flex;
            align-items: center;
            justify-content: center;
            font-family: var(--font-display);
            font-size: 2.5rem;
            color: white;
            margin-bottom: 12px;
            box-shadow: 0 4px 20px rgba(0,0,0,0.15);
        }
        
        .profile-avatar-edit {
            background: var(--parchment);
            border: 1px solid var(--parchment-edge);
            padding: 8px 16px;
            border-radius: 20px;
            font-size: 0.85rem;
            color: var(--ink-soft);
            cursor: pointer;
            transition: all 0.2s;
        }
        
        .profile-avatar-edit:hover {
            background: var(--parchment-aged);
            color: var(--ink);
        }
        
        .profile-section {
            margin-bottom: 24px;
        }
        
        .profile-section h3 {
            font-size: 1rem;
            font-weight: 600;
            color: var(--ink);
            margin: 0 0 12px 0;
        }
        
        .profile-section-desc {
            font-size: 0.85rem;
            color: var(--ink-faint);
            margin: -8px 0 12px 0;
        }
        
        .profile-field {
            margin-bottom: 12px;
        }
        
        .profile-field label {
            display: block;
            font-size: 0.8rem;
            font-weight: 500;
            color: var(--ink-soft);
            margin-bottom: 4px;
        }
        
        .profile-field input,
        .profile-field select,
        .profile-section textarea {
            width: 100%;
            padding: 10px 14px;
            border: 1px solid var(--parchment-edge);
            border-radius: 8px;
            font-size: 0.95rem;
            background: var(--parchment);
            color: var(--ink);
            transition: border-color 0.2s;
            font-family: inherit;
        }
        
        .profile-field input:focus,
        .profile-field select:focus,
        .profile-section textarea:focus {
            outline: none;
            border-color: var(--thread);
        }
        
        .profile-field-row {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 12px;
        }
        
        /* Inspiration Grid */
        .inspiration-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 10px;
        }
        
        .inspiration-item {
            aspect-ratio: 1;
            border-radius: 12px;
            background: var(--parchment);
            border: 2px dashed var(--parchment-edge);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.2s;
        }
        
        .inspiration-item:hover {
            border-color: var(--thread);
            background: var(--gold-faint);
            transform: scale(1.02);
        }
        
        .inspiration-item.add-new span {
            font-size: 1.5rem;
            margin-bottom: 4px;
        }
        
        .inspiration-item.add-new small {
            font-size: 0.7rem;
            color: var(--ink-faint);
        }
        
        .profile-modal-footer {
            display: flex;
            justify-content: flex-end;
            gap: 12px;
            padding: 16px 24px;
            background: var(--parchment);
            border-top: 1px solid var(--parchment-edge);
        }
        
        /* Theme-specific modal styles */
        body.dark-theme .profile-modal {
            background: var(--parchment-aged);
        }
        
        body.dark-theme .profile-modal-header {
            background: linear-gradient(135deg, var(--parchment-deep) 0%, var(--parchment-aged) 100%);
        }
        
        body.unity-theme .profile-modal {
            background: var(--parchment);
            border: 1px solid rgba(168, 85, 247, 0.3);
        }
        
        body.unity-theme .profile-modal-header {
            background: linear-gradient(135deg, rgba(168, 85, 247, 0.15) 0%, rgba(236, 72, 153, 0.1) 100%);
        }
        
        body.unity-theme .profile-avatar-large {
            background: var(--unity-flow);
            box-shadow: 0 4px 25px rgba(168, 85, 247, 0.3);
        }
        
        body.ruach-theme .profile-modal {
            background: rgba(255, 255, 255, 0.98);
            border: 1px solid rgba(126, 200, 227, 0.3);
        }
        
        body.ruach-theme .profile-modal-header {
            background: linear-gradient(135deg, rgba(126, 200, 227, 0.15) 0%, rgba(255, 182, 193, 0.1) 100%);
        }
        
        body.ruach-theme .profile-avatar-large {
            background: linear-gradient(135deg, #7ec8e3 0%, #ffb6c1 100%);
            box-shadow: 0 4px 25px rgba(126, 200, 227, 0.3);
        }

        /* ═══════════════════════════════════════════════════════════════ */
        /* [CSS-003] LEFT SIDEBAR & NAVIGATION                            */
        /* ═══════════════════════════════════════════════════════════════ */
        .left-sidebar {
            width: 260px;
            background: linear-gradient(180deg, var(--parchment) 0%, var(--parchment-aged) 100%);
            border-right: 2px dashed var(--parchment-edge);
            display: flex;
            flex-direction: column;
            transition: transform 0.3s var(--ease-gentle);
            overflow-y: auto;
            overflow-x: hidden;
            position: fixed;
            left: 0;
            top: 0;
            height: 100%;
            z-index: 9998;
            box-shadow: 4px 0 20px rgba(0, 0, 0, 0.3);
        }
        .left-sidebar.collapsed {
            transform: translateX(-100%);
        }
        .left-sidebar:not(.collapsed) {
            transform: translateX(0);
        }
        .sidebar-toggle { 
            display: flex; 
            align-items: center; 
            justify-content: space-between; 
            padding: var(--space-md); 
            border-bottom: 2px dashed var(--parchment-dark);
        }
        .sidebar-title { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.15em; color: var(--ink-faint); }
        .toggle-btn { 
            width: 28px; 
            height: 28px; 
            border: 1px dashed var(--thread-soft);
            background: var(--parchment); 
            border-radius: var(--radius-sm); 
            cursor: pointer; 
            display: flex; 
            align-items: center; 
            justify-content: center; 
            color: var(--thread); 
            transition: all 0.2s;
        }
        .toggle-btn:hover {
            background: var(--thread);
            color: var(--white);
            border-style: solid;
        }
        .nav-layers { flex: 1; overflow-y: auto; padding: var(--space-sm); }
        /* Backdrop for left sidebar */
        #left-sidebar-backdrop {
            display: none;
            position: fixed;
            inset: 0;
            background: rgba(0, 0, 0, 0.5);
            backdrop-filter: blur(4px);
            z-index: 9997;
            opacity: 0;
            transition: opacity 0.3s ease;
        }
        #left-sidebar-backdrop.visible {
            display: block;
            opacity: 1;
        }

        /* Floating toggle for collapsed left sidebar (hidden - using logo) */
        .left-sidebar-float-toggle {
            display: none !important;
        }
        
        /* Navigation Items with Stitched Accents */
        .nav-item { 
            display: flex; 
            align-items: center; 
            gap: var(--space-sm); 
            padding: var(--space-sm) var(--space-md); 
            border-radius: var(--radius-md); 
            cursor: pointer; 
            transition: all 0.2s; 
            margin-bottom: 4px;
            border: 1px solid transparent;
        }
        .nav-item:hover { 
            background: var(--parchment-aged); 
            border-color: var(--parchment-dark);
        }
        .nav-item.active { 
            background: var(--parchment-deep); 
            border: 1px dashed var(--thread);
            box-shadow: var(--shadow-inner);
        }
        .nav-icon { 
            width: 38px; 
            height: 38px; 
            border-radius: var(--radius-md); 
            display: flex; 
            align-items: center; 
            justify-content: center; 
            font-size: 1.2rem; 
            flex-shrink: 0;
            border: 1px solid rgba(196, 136, 28, 0.2);
        }
        .nav-item[data-layer="dashboard"] .nav-icon { background: linear-gradient(135deg, var(--thread-faint) 0%, var(--thread-soft) 100%); }
        .nav-item[data-layer="sanctuary"] .nav-icon { background: linear-gradient(135deg, #C8D8E0 0%, var(--sanctuary) 100%); }
        .nav-item[data-layer="compass"] .nav-icon { background: linear-gradient(135deg, #D8C8E0 0%, var(--compass) 100%); }
        .nav-item[data-layer="family"] .nav-icon { background: linear-gradient(135deg, #E0C8C8 0%, var(--family) 100%); }
        .nav-item[data-layer="homeos"] .nav-icon { background: linear-gradient(135deg, #E8DCC8 0%, #C4956A 100%); }
        .nav-item[data-layer="academy"] .nav-icon { background: linear-gradient(135deg, #F0E8D0 0%, #C4A060 100%); }
        .nav-item[data-layer="steam"] .nav-icon { background: linear-gradient(135deg, #E8D4F0 0%, #8B5CF6 100%); }
        .nav-item[data-layer="arc"] .nav-icon { background: linear-gradient(135deg, #FFE4C4 0%, #D97706 100%); }
        .nav-item[data-layer="projects"] .nav-icon { background: linear-gradient(135deg, #C8E0C8 0%, var(--projects) 100%); }
        .nav-item[data-layer="repair"] .nav-icon { background: linear-gradient(135deg, #E0D8C8 0%, var(--repair) 100%); }
        .nav-item[data-layer="fellowship"] .nav-icon { background: linear-gradient(135deg, #C8D8E0 0%, var(--fellowship) 100%); }
        .nav-item[data-layer="marketplace"] .nav-icon { background: linear-gradient(135deg, #E0D0C8 0%, var(--marketplace) 100%); }
        .nav-item[data-layer="farm"] .nav-icon { background: linear-gradient(135deg, #D4C4B0 0%, #8B7355 100%); }
        .nav-item[data-layer="stream"] .nav-icon { background: linear-gradient(135deg, #C8E0D8 0%, var(--stream) 100%); }
        .nav-item[data-layer="kids"] .nav-icon { background: linear-gradient(135deg, #FFE0EB 0%, #FF6B9D 100%); }
        .nav-item[data-layer="teens"] .nav-icon { background: linear-gradient(135deg, #FF6B35 0%, #F7931E 100%); }
        .nav-item[data-layer="crisis"] .nav-icon { background: linear-gradient(135deg, #FFE0E0 0%, #E05050 100%); }
        .nav-item[data-layer="admin"] .nav-icon { background: linear-gradient(135deg, #E8E8E8 0%, #888888 100%); }
        .nav-item[data-layer="binder"] .nav-icon { background: linear-gradient(135deg, var(--parchment) 0%, var(--clay) 100%); }
        .nav-item[data-layer="forum"] .nav-icon { background: linear-gradient(135deg, #E0C8D8 0%, #B57BA3 100%); }
        .nav-item[data-layer="chat"] .nav-icon { background: linear-gradient(135deg, #C8E0D0 0%, #7BB591 100%); }
        /* Mission & Hope nav icon styling */
        .nav-item[data-layer="mission"] .nav-icon {
            background: linear-gradient(135deg, var(--mission-light) 0%, var(--mission-primary) 100%);
        }
        .nav-item[data-layer="profile"] .nav-icon { background: linear-gradient(135deg, var(--thread-faint) 0%, var(--thread) 100%); }
        .nav-label { font-size: 0.9rem; font-weight: 500; white-space: nowrap; color: var(--ink); }
        .nav-desc { font-size: 0.75rem; color: var(--ink-faint); white-space: nowrap; }
        .left-sidebar.collapsed .nav-label, .left-sidebar.collapsed .nav-desc { display: none; }
        .nav-divider { 
            height: 2px; 
            background: repeating-linear-gradient(
                90deg,
                var(--thread) 0px,
                var(--thread) 4px,
                transparent 4px,
                transparent 8px
            );
            margin: var(--space-sm) var(--space-md); 
            opacity: 0.4;
        }

        /* ═══════════════════════════════════════════════════════════════ */
        /* [CSS-004] MAIN CONTENT & PAGES                                 */
        /* ═══════════════════════════════════════════════════════════════ */
        /* Dashboard Collapsible Blocks (Dashboard tab)                   */
        /* ═══════════════════════════════════════════════════════════════ */
        .dash-collapse-btn{
            appearance:none;
            border:none;
            background: transparent;
            color: var(--ink-faint);
            cursor:pointer;
            font-size: 14px;
            line-height: 1;
            padding: 2px 6px;
            border-radius: 8px;
            transition: all 0.2s var(--ease-gentle);
        }
        .dash-collapse-btn:hover{
            background: rgba(196,136,28,0.12);
            color: var(--thread);
        }
        .dash-collapse-btn:focus{
            outline: 2px solid var(--thread);
            outline-offset: 2px;
        }

        /* Collapsed states */
        .haven-card.dash-collapsed{
            padding-bottom: 10px;
        }
        .haven-card.dash-collapsed > :not(.haven-card-title){
            display:none !important;
        }
        .haven-card.dash-collapsed .haven-card-title{
            display:flex;
            align-items:center;
            justify-content: space-between;
            gap: 10px;
            white-space: nowrap;
            overflow:hidden;
            text-overflow: ellipsis;
        }

        .haven-station.dash-collapsed > :not(.dash-head){
            display:none !important;
        }
        .haven-station .dash-head{
            display:flex;
            justify-content: space-between;
            align-items:center;
            gap: 10px;
        }

        .dash-extra{
            margin-top: 10px;
            padding-top: 10px;
            border-top: 1px dashed var(--parchment-edge);
        }
        .dash-extra h4{
            font-size: 12px;
            letter-spacing: 0.02em;
            text-transform: uppercase;
            color: var(--ink-faint);
            margin-bottom: 8px;
        }
        .dash-extra ul{
            margin-left: 18px;
            color: var(--ink-soft);
            font-size: 12.5px;
            line-height: 1.55;
        }
        .dash-extra li{ margin: 4px 0; }

        /* ═══════════════════════════════════════════════════════════════ */
        /* Enhanced Collapsible Block System                              */
        /* ═══════════════════════════════════════════════════════════════ */
        .collapsible-block {
            background: var(--parchment-aged);
            border: 2px dashed var(--parchment-edge);
            border-radius: 14px;
            box-shadow: var(--shadow-md);
            margin-bottom: 14px;
            overflow: hidden;
            transition: all 0.3s var(--ease-gentle);
        }

        .collapsible-block.collapsed {
            box-shadow: 0 1px 2px rgba(0,0,0,0.05);
        }

        .collapsible-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 12px 14px;
            cursor: pointer;
            user-select: none;
            transition: all 0.2s var(--ease-gentle);
            border-bottom: 2px dashed transparent;
        }

        .collapsible-header:hover {
            background: rgba(184,134,11,0.08);
            border-bottom-color: var(--parchment-edge);
        }

        .collapsible-header h3,
        .collapsible-header b {
            margin: 0;
            font-size: 13px;
            font-weight: 900;
            letter-spacing: 0.3px;
            display: flex;
            align-items: center;
            gap: 6px;
        }

        .collapse-toggle-btn {
            appearance: none;
            border: none;
            background: rgba(184,134,11,0.15);
            color: var(--thread);
            width: 28px;
            height: 28px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.2s var(--ease-gentle);
            font-size: 16px;
            font-weight: 800;
            line-height: 1;
            flex-shrink: 0;
        }

        .collapse-toggle-btn:hover {
            background: rgba(184,134,11,0.25);
            transform: scale(1.1);
        }

        .collapse-toggle-btn.collapsed::before {
            content: '+';
        }

        .collapse-toggle-btn.expanded::before {
            content: '−';
        }

        .collapsible-content {
            max-height: 10000px;
            overflow: hidden;
            transition: max-height 0.4s var(--ease-gentle), padding 0.4s var(--ease-gentle), opacity 0.3s var(--ease-gentle);
            opacity: 1;
            padding: 14px;
        }

        .collapsible-block.collapsed .collapsible-content {
            max-height: 0;
            padding-top: 0;
            padding-bottom: 0;
            opacity: 0;
        }

        /* Make sure nested structures are styled properly */
        .collapsible-content > *:last-child {
            margin-bottom: 0;
        }

        /* ═══════════════════════════════════════════════════════════════ */
        /* Deep Expansion System                                          */
        /* ═══════════════════════════════════════════════════════════════ */
        .deep-expand-trigger {
            width: 100%;
            margin-top: 12px;
            padding: 10px 16px;
            border: 2px dashed var(--parchment-edge);
            border-radius: 10px;
            background: var(--parchment-deep);
            color: var(--thread);
            font-size: 13px;
            font-weight: 700;
            cursor: pointer;
            transition: all 0.2s var(--ease-gentle);
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
        }

        .deep-expand-trigger:hover {
            background: rgba(184,134,11,0.15);
            border-color: var(--thread);
            transform: translateY(-1px);
            box-shadow: 0 2px 8px rgba(184,134,11,0.2);
        }

        .deep-expand-trigger::after {
            content: '⬇';
            font-size: 12px;
            transition: transform 0.3s var(--ease-gentle);
        }

        .deep-expand-trigger.expanded::after {
            transform: rotate(180deg);
            content: '⬆';
        }

        .deep-expansion {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.5s var(--ease-gentle), margin 0.5s var(--ease-gentle), opacity 0.3s var(--ease-gentle);
            opacity: 0;
            margin-top: 0;
        }

        .deep-expansion.active {
            max-height: 5000px;
            opacity: 1;
            margin-top: 14px;
        }

        .deep-section {
            background: var(--parchment-deep);
            border: 2px dashed var(--parchment-edge);
            border-radius: 12px;
            padding: 14px;
            margin-bottom: 12px;
        }

        .deep-section:last-child {
            margin-bottom: 0;
        }

        .deep-section-title {
            font-size: 12px;
            font-weight: 900;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            color: var(--thread);
            margin-bottom: 10px;
            padding-bottom: 8px;
            border-bottom: 1px dashed var(--parchment-edge);
        }

        /* ═══════════════════════════════════════════════════════════════ */
        /* HAVENHUB OS — Unified Household Command Dashboard               */
        /* ═══════════════════════════════════════════════════════════════ */
        
        /* Lens Selector */
        .havenhub-lens-selector {
            position: relative;
            display: inline-flex;
            align-items: center;
            gap: 8px;
            margin: 0 12px;
        }
        
        .havenhub-lens-btn {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 6px 14px;
            background: rgba(255, 255, 255, 0.1);
            border: 1px solid rgba(255, 255, 255, 0.2);
            border-radius: 100px;
            font-size: 13px;
            font-weight: 600;
            color: white;
            cursor: pointer;
            transition: all 0.2s var(--ease-gentle);
            white-space: nowrap;
        }

        .havenhub-lens-btn:hover {
            background: rgba(255, 255, 255, 0.2);
            border-color: var(--gold);
        }

        /* Theme-adaptive Switch button */
        .theme-switch-btn {
            padding: 4px 12px !important;
            border-radius: 8px !important;
            background: var(--gold-faint) !important;
            border: 1px solid var(--gold) !important;
            color: var(--gold) !important;
        }

        /* Dark theme: lighter colors for better contrast */
        [data-theme="dark"] .theme-switch-btn,
        [data-theme="unity"] .theme-switch-btn {
            background: rgba(212, 165, 116, 0.15) !important;
            border: 1px solid rgba(212, 165, 116, 0.4) !important;
            color: #D4A574 !important;
        }

        [data-theme="dark"] .theme-switch-btn:hover,
        [data-theme="unity"] .theme-switch-btn:hover {
            background: rgba(212, 165, 116, 0.25) !important;
            border-color: #D4A574 !important;
        }

        /* Ruach theme: kid-friendly bright gold */
        [data-theme="ruach"] .theme-switch-btn {
            background: rgba(240, 230, 140, 0.2) !important;
            border: 1px solid #F0E68C !important;
            color: #F0E68C !important;
        }
        
        .havenhub-lens-btn .lens-arrow {
            font-size: 10px;
            transition: transform 0.2s;
            opacity: 0.7;
        }
        
        .havenhub-lens-btn.open .lens-arrow {
            transform: rotate(180deg);
        }
        
        .havenhub-lens-dropdown {
            position: absolute;
            top: calc(100% + 12px);
            right: 0;
            min-width: 240px;
            background: var(--surface);
            border: 1px solid var(--parchment-dark);
            border-radius: 16px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.2);
            z-index: 10000;
            opacity: 0;
            visibility: hidden;
            transform: translateY(-10px);
            transition: all 0.2s var(--ease-gentle);
            padding: 8px;
        }
        
        .havenhub-lens-dropdown.open {
            opacity: 1;
            visibility: visible;
            transform: translateY(0);
        }
        
        .havenhub-lens-option {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 12px 16px;
            cursor: pointer;
            transition: background 0.15s;
            border-bottom: 1px dashed var(--parchment-edge);
        }
        
        .havenhub-lens-option:last-child {
            border-bottom: none;
        }
        
        .havenhub-lens-option:hover {
            background: var(--parchment-deep);
        }
        
        .havenhub-lens-option.active {
            background: rgba(196, 136, 28, 0.15);
        }
        
        .havenhub-lens-option .lens-avatar {
            width: 32px;
            height: 32px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 16px;
            flex-shrink: 0;
        }
        
        .havenhub-lens-option .lens-info {
            flex: 1;
        }
        
        .havenhub-lens-option .lens-name {
            font-weight: 600;
            font-size: 14px;
            color: var(--ink);
        }
        
        .havenhub-lens-option .lens-role {
            font-size: 11px;
            color: var(--ink-soft);
        }
        
        /* Today Indicator Strip */
        .havenhub-today-strip {
            background: linear-gradient(135deg, var(--parchment-deep) 0%, var(--parchment-aged) 100%);
            border: 2px dashed var(--thread);
            border-radius: 14px;
            padding: 14px 18px;
            margin-bottom: 16px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            flex-wrap: wrap;
            gap: 12px;
        }
        
        .havenhub-today-left {
            display: flex;
            align-items: center;
            gap: 16px;
            flex-wrap: wrap;
        }
        
        .havenhub-date {
            font-size: 15px;
            font-weight: 700;
            color: var(--ink);
        }
        
        .havenhub-rhythm-state {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 6px 12px;
            background: rgba(196, 136, 28, 0.15);
            border-radius: 100px;
            font-size: 13px;
            font-weight: 600;
            color: var(--thread);
        }
        
        .havenhub-rhythm-state .rhythm-dot {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: var(--thread);
            animation: rhythmPulse 2s ease-in-out infinite;
        }
        
        @keyframes rhythmPulse {
            0%, 100% { opacity: 1; transform: scale(1); }
            50% { opacity: 0.6; transform: scale(0.9); }
        }
        
        .havenhub-next-anchor {
            font-size: 13px;
            color: var(--ink-soft);
        }
        
        .havenhub-next-anchor strong {
            color: var(--ink);
        }
        
        .havenhub-rest-badge {
            display: flex;
            align-items: center;
            gap: 6px;
            padding: 6px 12px;
            background: rgba(107, 123, 76, 0.15);
            border: 1px solid var(--olive);
            border-radius: 100px;
            font-size: 12px;
            font-weight: 600;
            color: var(--olive);
        }
        
        .havenhub-sabbath-badge {
            display: flex;
            align-items: center;
            gap: 6px;
            padding: 6px 12px;
            background: linear-gradient(135deg, rgba(196, 136, 28, 0.2) 0%, rgba(196, 136, 28, 0.1) 100%);
            border: 2px solid var(--thread);
            border-radius: 100px;
            font-size: 12px;
            font-weight: 700;
            color: var(--thread);
        }
        
        /* Authority Controls (Parent Only) */
        .havenhub-authority-controls {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 10px 14px;
            background: rgba(139, 163, 168, 0.1);
            border: 2px dashed var(--sanctuary);
            border-radius: 12px;
            margin-bottom: 16px;
        }
        
        .havenhub-authority-label {
            font-size: 11px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            color: var(--sanctuary);
            margin-right: 8px;
        }
        
        .havenhub-grace-btn {
            display: flex;
            align-items: center;
            gap: 6px;
            padding: 8px 14px;
            background: var(--parchment);
            border: 2px dashed var(--parchment-edge);
            border-radius: 100px;
            font-size: 12px;
            font-weight: 600;
            color: var(--ink);
            cursor: pointer;
            transition: all 0.2s var(--ease-gentle);
        }
        
        .havenhub-grace-btn:hover {
            background: rgba(139, 163, 168, 0.15);
            border-color: var(--sanctuary);
            color: var(--sanctuary);
        }
        
        .havenhub-grace-btn.active {
            background: var(--sanctuary);
            border-color: var(--sanctuary);
            color: white;
        }
        
        /* Core Blocks */
        .havenhub-block {
            background: var(--parchment);
            border: 2px dashed var(--parchment-edge);
            border-radius: 16px;
            margin-bottom: 16px;
            overflow: hidden;
            transition: all 0.3s var(--ease-gentle);
        }
        
        .havenhub-block:hover {
            border-color: var(--thread);
            box-shadow: 0 4px 20px rgba(196, 136, 28, 0.1);
        }
        
        .havenhub-block-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 14px 18px;
            background: var(--parchment-aged);
            cursor: pointer;
            user-select: none;
            transition: background 0.2s;
        }
        
        .havenhub-block-header:hover {
            background: var(--parchment-deep);
        }
        
        .havenhub-block-title {
            display: flex;
            align-items: center;
            gap: 10px;
            font-size: 14px;
            font-weight: 800;
            color: var(--ink);
        }
        
        .havenhub-block-title .block-icon {
            font-size: 18px;
        }
        
        .havenhub-block-badge {
            padding: 4px 10px;
            background: rgba(196, 136, 28, 0.15);
            border-radius: 100px;
            font-size: 11px;
            font-weight: 600;
            color: var(--thread);
        }
        
        .havenhub-block-content {
            padding: 18px;
            max-height: 2000px;
            overflow: hidden;
            transition: all 0.4s var(--ease-gentle);
        }
        
        .havenhub-block.collapsed .havenhub-block-content {
            max-height: 0;
            padding-top: 0;
            padding-bottom: 0;
            opacity: 0;
        }
        
        /* Sub-blocks within blocks */
        .havenhub-subblock {
            background: var(--parchment-deep);
            border: 1px dashed var(--parchment-edge);
            border-radius: 12px;
            padding: 14px;
            margin-bottom: 12px;
        }
        
        .havenhub-subblock:last-child {
            margin-bottom: 0;
        }
        
        .havenhub-subblock-title {
            display: flex;
            align-items: center;
            justify-content: space-between;
            font-size: 12px;
            font-weight: 700;
            color: var(--ink);
            margin-bottom: 10px;
            padding-bottom: 8px;
            border-bottom: 1px dashed var(--parchment-edge);
            cursor: pointer;
        }
        
        .havenhub-subblock-title .toggle-icon {
            font-size: 14px;
            color: var(--thread);
            transition: transform 0.2s;
        }
        
        .havenhub-subblock.collapsed .toggle-icon {
            transform: rotate(-90deg);
        }
        
        .havenhub-subblock.collapsed .havenhub-subblock-content {
            display: none;
        }
        
        /* Meal & Table Life */
        .havenhub-meal-row {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 10px 0;
            border-bottom: 1px dashed var(--parchment-edge);
        }
        
        .havenhub-meal-row:last-child {
            border-bottom: none;
        }
        
        .havenhub-meal-icon {
            font-size: 20px;
        }
        
        .havenhub-meal-info {
            flex: 1;
        }
        
        .havenhub-meal-name {
            font-weight: 600;
            font-size: 14px;
            color: var(--ink);
        }
        
        .havenhub-meal-detail {
            font-size: 12px;
            color: var(--ink-soft);
        }
        
        .havenhub-meal-roles {
            display: flex;
            gap: 6px;
        }
        
        .havenhub-role-chip {
            padding: 4px 10px;
            background: rgba(107, 123, 76, 0.15);
            border-radius: 100px;
            font-size: 11px;
            font-weight: 600;
            color: var(--olive);
        }
        
        /* Shared Work */
        .havenhub-task-row {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 10px 0;
            border-bottom: 1px dashed var(--parchment-edge);
        }
        
        .havenhub-task-row:last-child {
            border-bottom: none;
        }
        
        .havenhub-task-check {
            width: 24px;
            height: 24px;
            border: 2px solid var(--parchment-edge);
            border-radius: 6px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.2s;
            flex-shrink: 0;
        }
        
        .havenhub-task-check:hover {
            border-color: var(--olive);
        }
        
        .havenhub-task-check.done {
            background: var(--olive);
            border-color: var(--olive);
            color: white;
        }
        
        .havenhub-task-info {
            flex: 1;
        }
        
        .havenhub-task-name {
            font-weight: 600;
            font-size: 14px;
            color: var(--ink);
        }
        
        .havenhub-task-row.done .havenhub-task-name {
            text-decoration: line-through;
            color: var(--ink-soft);
        }
        
        .havenhub-task-assignee {
            padding: 4px 10px;
            background: var(--parchment);
            border: 1px dashed var(--parchment-edge);
            border-radius: 100px;
            font-size: 11px;
            font-weight: 600;
            color: var(--ink-soft);
        }
        
        /* Activity Feed */
        .havenhub-feed-item {
            display: flex;
            align-items: flex-start;
            gap: 12px;
            padding: 12px 0;
            border-bottom: 1px dashed var(--parchment-edge);
        }
        
        .havenhub-feed-item:last-child {
            border-bottom: none;
        }
        
        .havenhub-feed-icon {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            background: var(--parchment-deep);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 16px;
            flex-shrink: 0;
        }
        
        .havenhub-feed-content {
            flex: 1;
        }
        
        .havenhub-feed-text {
            font-size: 14px;
            color: var(--ink);
            line-height: 1.5;
        }
        
        .havenhub-feed-text strong {
            color: var(--thread);
        }
        
        .havenhub-feed-meta {
            font-size: 11px;
            color: var(--ink-faint);
            margin-top: 4px;
        }
        
        .havenhub-feed-link {
            color: var(--thread);
            text-decoration: none;
            font-weight: 600;
            cursor: pointer;
        }
        
        .havenhub-feed-link:hover {
            text-decoration: underline;
        }
        
        /* Rest & Sabbath Block */
        .havenhub-rest-indicator {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 16px;
            background: linear-gradient(135deg, rgba(196, 136, 28, 0.1) 0%, rgba(196, 136, 28, 0.05) 100%);
            border: 2px dashed var(--thread);
            border-radius: 12px;
        }
        
        .havenhub-rest-icon {
            font-size: 32px;
        }
        
        .havenhub-rest-info h4 {
            font-size: 15px;
            font-weight: 700;
            color: var(--ink);
            margin: 0 0 4px 0;
        }
        
        .havenhub-rest-info p {
            font-size: 13px;
            color: var(--ink-soft);
            margin: 0;
        }
        
        /* Quick Access Block */
        .havenhub-quicklinks {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
            gap: 10px;
        }
        
        .havenhub-quicklink {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 6px;
            padding: 14px 10px;
            background: var(--parchment-deep);
            border: 2px dashed transparent;
            border-radius: 12px;
            cursor: pointer;
            transition: all 0.2s var(--ease-gentle);
            text-decoration: none;
        }
        
        .havenhub-quicklink:hover {
            background: rgba(196, 136, 28, 0.1);
            border-color: var(--thread);
            transform: translateY(-2px);
        }
        
        .havenhub-quicklink .ql-icon {
            font-size: 24px;
        }
        
        .havenhub-quicklink .ql-label {
            font-size: 12px;
            font-weight: 600;
            color: var(--ink);
            text-align: center;
        }
        
        /* Person Lens View */
        .havenhub-person-header {
            display: flex;
            align-items: center;
            gap: 16px;
            padding: 16px;
            background: linear-gradient(135deg, var(--parchment-deep) 0%, var(--parchment-aged) 100%);
            border: 2px dashed var(--thread);
            border-radius: 14px;
            margin-bottom: 16px;
        }
        
        .havenhub-person-avatar {
            width: 64px;
            height: 64px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 28px;
            border: 3px solid var(--thread);
            flex-shrink: 0;
        }
        
        .havenhub-person-info h2 {
            font-family: var(--font-display);
            font-size: 1.4rem;
            font-weight: 600;
            color: var(--ink);
            margin: 0 0 4px 0;
        }
        
        .havenhub-person-info .role {
            font-size: 13px;
            color: var(--ink-soft);
        }
        
        .havenhub-person-stats {
            display: flex;
            gap: 20px;
            margin-left: auto;
        }
        
        .havenhub-person-stat {
            text-align: center;
        }
        
        .havenhub-person-stat .stat-value {
            font-family: var(--font-display);
            font-size: 1.2rem;
            color: var(--thread);
        }
        
        .havenhub-person-stat .stat-label {
            font-size: 10px;
            text-transform: uppercase;
            color: var(--ink-faint);
        }
        
        /* Daily Checklist (Person View) */
        .havenhub-checklist {
            display: flex;
            flex-direction: column;
            gap: 8px;
        }
        
        .havenhub-checklist-item {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 12px;
            background: var(--parchment-deep);
            border-radius: 10px;
            transition: all 0.2s;
        }
        
        .havenhub-checklist-item:hover {
            background: rgba(196, 136, 28, 0.1);
        }
        
        .havenhub-checklist-item.done {
            opacity: 0.7;
        }
        
        .havenhub-checklist-item.done .item-text {
            text-decoration: line-through;
        }
        
        .havenhub-checklist-item .item-check {
            width: 22px;
            height: 22px;
            border: 2px solid var(--parchment-edge);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.2s;
            flex-shrink: 0;
        }
        
        .havenhub-checklist-item .item-check:hover {
            border-color: var(--olive);
        }
        
        .havenhub-checklist-item.done .item-check {
            background: var(--olive);
            border-color: var(--olive);
            color: white;
        }
        
        .havenhub-checklist-item .item-text {
            flex: 1;
            font-size: 14px;
            color: var(--ink);
        }
        
        .havenhub-checklist-item .item-tag {
            padding: 3px 8px;
            border-radius: 100px;
            font-size: 10px;
            font-weight: 600;
        }
        
        .havenhub-checklist-item .item-tag.stewardship {
            background: rgba(107, 123, 76, 0.15);
            color: var(--olive);
        }
        
        .havenhub-checklist-item .item-tag.growth {
            background: rgba(196, 136, 28, 0.15);
            color: var(--thread);
        }
        
        /* Snapshot Cards (Person View) */
        .havenhub-snapshot {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 14px;
        }
        
        .havenhub-snapshot-card {
            background: var(--parchment-deep);
            border: 1px dashed var(--parchment-edge);
            border-radius: 12px;
            padding: 16px;
            cursor: pointer;
            transition: all 0.2s var(--ease-gentle);
        }
        
        .havenhub-snapshot-card:hover {
            border-color: var(--thread);
            background: rgba(196, 136, 28, 0.05);
        }
        
        .havenhub-snapshot-card .snap-header {
            display: flex;
            align-items: center;
            gap: 8px;
            margin-bottom: 10px;
        }
        
        .havenhub-snapshot-card .snap-icon {
            font-size: 20px;
        }
        
        .havenhub-snapshot-card .snap-title {
            font-size: 12px;
            font-weight: 700;
            color: var(--ink);
        }
        
        .havenhub-snapshot-card .snap-value {
            font-size: 15px;
            font-weight: 600;
            color: var(--thread);
            margin-bottom: 4px;
        }
        
        .havenhub-snapshot-card .snap-detail {
            font-size: 12px;
            color: var(--ink-soft);
        }
        
        .havenhub-snapshot-card .snap-link {
            display: inline-block;
            margin-top: 8px;
            font-size: 11px;
            font-weight: 600;
            color: var(--thread);
        }
        
        /* ═══════════════════════════════════════════════════════════════ */
        /* HAVENHUB OS — Enhanced Deep-Dive Components                     */
        /* ═══════════════════════════════════════════════════════════════ */
        
        /* Week Calendar Block */
        .havenhub-calendar-toggle {
            padding: 6px 12px;
            background: var(--parchment);
            border: 2px dashed var(--thread);
            border-radius: 100px;
            font-size: 11px;
            font-weight: 600;
            color: var(--thread);
            cursor: pointer;
            transition: all 0.2s;
        }
        
        .havenhub-calendar-toggle:hover {
            background: var(--thread);
            color: white;
        }

        .havenhub-calendar-nav {
            padding: 4px 10px;
            background: var(--parchment);
            border: 1px solid var(--thread-soft);
            border-radius: 6px;
            font-size: 14px;
            font-weight: 600;
            color: var(--thread);
            cursor: pointer;
            transition: all 0.2s;
        }

        .havenhub-calendar-nav:hover {
            background: var(--thread);
            color: white;
            border-color: var(--thread);
        }

        /* Week Strip */
        .havenhub-week-strip {
            display: flex;
            gap: 8px;
            margin-bottom: 16px;
            overflow-x: auto;
            padding: 4px 0;
        }
        
        .week-day {
            flex: 1;
            min-width: 80px;
            padding: 12px 8px;
            background: var(--parchment-deep);
            border: 2px solid transparent;
            border-radius: 12px;
            text-align: center;
            transition: all 0.2s;
        }
        
        .week-day.past {
            opacity: 0.6;
        }
        
        .week-day.today {
            background: linear-gradient(135deg, rgba(196, 136, 28, 0.15) 0%, rgba(196, 136, 28, 0.05) 100%);
            border-color: var(--thread);
        }
        
        .week-day.sabbath {
            background: linear-gradient(135deg, rgba(139, 163, 168, 0.15) 0%, rgba(139, 163, 168, 0.05) 100%);
            border-color: var(--sanctuary);
        }
        
        .week-day.has-event {
            border-color: var(--compass);
        }
        
        .week-day .day-label {
            font-size: 11px;
            font-weight: 600;
            color: var(--ink-soft);
            text-transform: uppercase;
        }
        
        .week-day .day-num {
            font-size: 20px;
            font-weight: 700;
            color: var(--ink);
            margin: 4px 0;
        }
        
        .week-day .day-indicator {
            font-size: 10px;
            font-weight: 700;
            color: var(--thread);
            background: rgba(196, 136, 28, 0.15);
            padding: 2px 8px;
            border-radius: 100px;
        }
        
        .week-day .day-tag {
            font-size: 10px;
            font-weight: 600;
            color: var(--ink-soft);
            margin-top: 4px;
        }
        
        .week-day .day-dot {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: var(--parchment-edge);
            margin: 8px auto 0;
        }
        
        .week-day .day-dot.completed {
            background: var(--olive);
        }
        
        /* Week Details Grid */
        .havenhub-week-details {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 12px;
            margin-top: 12px;
        }
        
        .week-detail-section {
            background: var(--parchment-deep);
            border-radius: 10px;
            padding: 12px;
        }
        
        .detail-header {
            display: flex;
            align-items: center;
            gap: 6px;
            margin-bottom: 10px;
            padding-bottom: 8px;
            border-bottom: 1px dashed var(--parchment-edge);
        }
        
        .detail-icon {
            font-size: 14px;
        }
        
        .detail-title {
            font-size: 12px;
            font-weight: 700;
            color: var(--ink);
        }
        
        .detail-content {
            font-size: 12px;
            color: var(--ink-soft);
            line-height: 1.6;
        }
        
        .focus-item {
            margin-bottom: 6px;
        }
        
        .focus-item strong {
            color: var(--ink);
        }
        
        .event-item {
            display: flex;
            gap: 8px;
            margin-bottom: 6px;
        }
        
        .event-day {
            font-weight: 700;
            color: var(--thread);
            min-width: 30px;
        }
        
        .prayer-item {
            margin-bottom: 6px;
            padding-left: 12px;
            position: relative;
        }
        
        .prayer-item::before {
            content: '•';
            position: absolute;
            left: 0;
            color: var(--thread);
        }
        
        /* Month Calendar */
        .havenhub-month-calendar {
            margin-top: 16px;
            padding-top: 16px;
            border-top: 2px dashed var(--parchment-edge);
        }
        
        .month-header {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 12px;
            margin-bottom: 10px;
        }
        
        .month-nav {
            width: 28px;
            height: 28px;
            border: none;
            background: var(--parchment-deep);
            border-radius: 50%;
            cursor: pointer;
            font-size: 11px;
            color: var(--ink);
            transition: all 0.2s;
        }
        
        .month-nav:hover {
            background: var(--thread);
            color: white;
        }
        
        .month-title {
            font-size: 14px;
            font-weight: 700;
            color: var(--ink);
        }
        
        .month-grid {
            display: grid;
            grid-template-columns: repeat(7, 1fr);
            gap: 3px;
        }
        
        .month-day-header {
            text-align: center;
            font-size: 9px;
            font-weight: 700;
            color: var(--ink-soft);
            padding: 6px 0;
            text-transform: uppercase;
        }
        
        .month-day {
            aspect-ratio: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 11px;
            color: var(--ink);
            border-radius: 6px;
            cursor: pointer;
            transition: all 0.15s;
        }
        
        .month-day:hover:not(.empty) {
            background: var(--parchment-deep);
        }
        
        .month-day.empty {
            cursor: default;
        }
        
        .month-day.today {
            background: var(--thread);
            color: white;
            font-weight: 700;
        }
        
        .month-day.sabbath {
            background: rgba(139, 163, 168, 0.2);
            color: var(--sanctuary);
        }
        
        .month-day.has-event {
            position: relative;
        }
        
        .month-day.has-event::after {
            content: '';
            position: absolute;
            bottom: 3px;
            width: 4px;
            height: 4px;
            background: var(--compass);
            border-radius: 50%;
        }
        
        .month-legend {
            display: flex;
            justify-content: center;
            gap: 12px;
            margin-top: 10px;
            font-size: 11px;
            color: var(--ink-soft);
        }
        
        .legend-item {
            display: flex;
            align-items: center;
            gap: 4px;
        }
        
        .legend-dot {
            width: 10px;
            height: 10px;
            border-radius: 50%;
        }
        
        .legend-dot.today {
            background: var(--thread);
        }
        
        .legend-dot.sabbath {
            background: rgba(139, 163, 168, 0.5);
        }
        
        .legend-dot.has-event {
            background: var(--compass);
        }
        
        /* Meals View Toggle */
        .meals-view-toggle {
            display: flex;
            gap: 6px;
            margin-bottom: 12px;
        }
        
        .view-btn {
            padding: 6px 12px;
            background: var(--parchment);
            border: 1px solid var(--parchment-edge);
            border-radius: 100px;
            font-size: 11px;
            font-weight: 600;
            color: var(--ink-soft);
            cursor: pointer;
            transition: all 0.2s;
        }
        
        .view-btn:hover {
            border-color: var(--thread);
            color: var(--thread);
        }
        
        .view-btn.active {
            background: var(--thread);
            border-color: var(--thread);
            color: white;
        }
        
        /* Meals Table */
        .meals-table {
            width: 100%;
            border-collapse: collapse;
            font-size: 12px;
        }
        
        .meals-table th {
            padding: 8px;
            text-align: left;
            font-weight: 600;
            color: var(--ink-soft);
            border-bottom: 2px solid var(--parchment-edge);
        }
        
        .meals-table td {
            padding: 10px 8px;
            border-bottom: 1px dashed var(--parchment-edge);
            color: var(--ink);
        }
        
        .meals-table .day-cell {
            min-width: 70px;
        }
        
        .meals-table .day-name {
            font-weight: 700;
            color: var(--ink);
        }
        
        .meals-table .day-date {
            font-size: 10px;
            color: var(--ink-soft);
        }
        
        .meals-table .today-row {
            background: rgba(196, 136, 28, 0.08);
        }
        
        .meals-table .sabbath-row {
            background: rgba(139, 163, 168, 0.08);
        }
        
        .meals-table .highlight {
            font-weight: 600;
            color: var(--thread);
        }
        
        .meals-table.compact td {
            padding: 6px;
            text-align: center;
        }
        
        .meals-table.compact .load-heavy { color: var(--thread); font-weight: 600; }
        .meals-table.compact .load-medium { color: var(--ink-soft); }
        .meals-table.compact .load-light { color: var(--olive); }
        .meals-table.compact .load-none { color: var(--sanctuary); font-weight: 600; }
        
        .thaw-alert {
            display: flex;
            align-items: center;
            gap: 8px;
            margin-top: 12px;
            padding: 10px 12px;
            background: rgba(196, 136, 28, 0.1);
            border: 1px dashed var(--thread);
            border-radius: 8px;
            font-size: 12px;
            color: var(--ink);
        }
        
        .thaw-alert .alert-icon {
            font-size: 16px;
        }
        
        .week-meal-summary {
            display: flex;
            gap: 20px;
            margin-top: 12px;
            padding-top: 12px;
            border-top: 1px dashed var(--parchment-edge);
        }
        
        .summary-item {
            font-size: 12px;
        }
        
        .summary-label {
            color: var(--ink-soft);
        }
        
        .summary-value {
            font-weight: 600;
            color: var(--ink);
        }
        
        /* Activity Filter Tabs */
        .activity-filter-tabs {
            display: flex;
            gap: 6px;
            margin-bottom: 14px;
            flex-wrap: wrap;
        }
        
        .filter-tab {
            padding: 5px 10px;
            background: var(--parchment);
            border: 1px solid var(--parchment-edge);
            border-radius: 100px;
            font-size: 11px;
            font-weight: 600;
            color: var(--ink-soft);
            cursor: pointer;
            transition: all 0.2s;
        }
        
        .filter-tab:hover {
            border-color: var(--thread);
        }
        
        .filter-tab.active {
            background: var(--parchment-deep);
            border-color: var(--thread);
            color: var(--thread);
        }
        
        /* Activity Day Sections */
        .activity-day-section {
            margin-bottom: 12px;
        }
        
        .activity-day-header {
            font-size: 11px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            color: var(--ink-soft);
            padding: 8px 0;
            border-bottom: 1px solid var(--parchment-edge);
            margin-bottom: 8px;
        }
        
        /* Activity Weekly Summary */
        .activity-weekly-summary {
            margin-top: 14px;
            padding: 14px;
            background: linear-gradient(135deg, rgba(196, 136, 28, 0.1) 0%, rgba(196, 136, 28, 0.05) 100%);
            border: 1px dashed var(--thread);
            border-radius: 10px;
        }
        
        .activity-weekly-summary .summary-title {
            font-size: 12px;
            font-weight: 700;
            color: var(--thread);
            margin-bottom: 10px;
        }
        
        .activity-weekly-summary .summary-stats {
            display: flex;
            gap: 20px;
        }
        
        .activity-weekly-summary .summary-stat {
            text-align: center;
        }
        
        .activity-weekly-summary .stat-num {
            display: block;
            font-size: 20px;
            font-weight: 700;
            color: var(--ink);
        }
        
        .activity-weekly-summary .stat-label {
            font-size: 10px;
            color: var(--ink-soft);
            text-transform: uppercase;
        }
        
        /* Formation Pulse */
        .formation-pulse-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 10px;
        }
        
        .pulse-card {
            background: var(--parchment-deep);
            border-radius: 10px;
            padding: 12px;
            text-align: center;
        }
        
        .pulse-avatar {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 18px;
            margin: 0 auto 8px;
        }
        
        .pulse-name {
            font-weight: 700;
            font-size: 13px;
            color: var(--ink);
        }
        
        .pulse-thread {
            font-size: 11px;
            color: var(--ink-soft);
            margin: 4px 0 8px;
        }
        
        .pulse-bar {
            height: 4px;
            background: var(--parchment-edge);
            border-radius: 2px;
            overflow: hidden;
        }
        
        .pulse-fill {
            height: 100%;
            background: var(--thread);
            border-radius: 2px;
        }
        
        .havenhub-text-btn {
            background: none;
            border: none;
            color: var(--thread);
            font-size: 12px;
            font-weight: 600;
            cursor: pointer;
            padding: 6px 0;
        }
        
        .havenhub-text-btn:hover {
            text-decoration: underline;
        }
        
        /* Gratitude Block */
        .gratitude-input-area {
            margin-bottom: 14px;
        }
        
        .gratitude-textarea {
            width: 100%;
            min-height: 60px;
            padding: 10px;
            border: 1px dashed var(--parchment-edge);
            border-radius: 8px;
            background: var(--parchment-deep);
            font-size: 13px;
            resize: vertical;
            margin-bottom: 8px;
        }
        
        .gratitude-submit {
            padding: 8px 14px;
            background: var(--thread);
            border: none;
            border-radius: 100px;
            font-size: 12px;
            font-weight: 600;
            color: white;
            cursor: pointer;
            transition: all 0.2s;
        }
        
        .gratitude-submit:hover {
            background: var(--thread-hover);
        }
        
        .gratitude-recent {
            border-top: 1px dashed var(--parchment-edge);
            padding-top: 12px;
        }
        
        .gratitude-item {
            padding: 8px 0;
            border-bottom: 1px dashed var(--parchment-edge);
            font-size: 13px;
            line-height: 1.5;
        }
        
        .gratitude-item:last-child {
            border-bottom: none;
        }
        
        .gratitude-author {
            font-weight: 700;
            color: var(--thread);
        }
        
        .gratitude-text {
            color: var(--ink);
            font-style: italic;
        }
        
        /* ═══════════════════════════════════════════════════════════════ */
        /* HAVENHUB OS — Role-Specific Dashboard Components                */
        /* Parent View (Steward/Keeper) & Child View (Apprentice/Helper)  */
        /* ═══════════════════════════════════════════════════════════════ */
        
        /* Formation Stage Badges */
        .person-formation-stage {
            margin-top: 6px;
        }
        
        .stage-badge {
            display: inline-block;
            padding: 4px 12px;
            border-radius: 100px;
            font-size: 11px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }
        
        .stage-badge.parent {
            background: linear-gradient(135deg, var(--olive) 0%, var(--olive-soft) 100%);
            color: white;
        }
        
        .stage-badge.apprentice {
            background: linear-gradient(135deg, var(--sanctuary) 0%, var(--sky) 100%);
            color: white;
        }
        
        .stage-badge.helper {
            background: linear-gradient(135deg, var(--compass) 0%, var(--berry) 100%);
            color: white;
        }
        
        .stage-badge.agency {
            background: linear-gradient(135deg, var(--thread) 0%, var(--thread-soft) 100%);
            color: white;
        }
        
        /* Parent Formation Axis */
        .parent-formation-axis {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 12px;
            margin-bottom: 16px;
            padding-bottom: 16px;
            border-bottom: 1px dashed var(--parchment-edge);
        }
        
        .axis-item {
            background: var(--parchment-deep);
            border-radius: 10px;
            padding: 12px;
        }
        
        .axis-label {
            font-size: 11px;
            font-weight: 600;
            color: var(--ink-soft);
            display: block;
            margin-bottom: 6px;
        }
        
        .axis-value {
            font-size: 14px;
            font-weight: 700;
            color: var(--thread);
        }
        
        .axis-input {
            width: 100%;
            padding: 8px;
            border: 1px dashed var(--parchment-edge);
            border-radius: 6px;
            background: var(--parchment);
            font-size: 12px;
        }
        
        /* Home State Overview */
        .home-state-overview {
            background: var(--parchment-deep);
            border-radius: 10px;
            padding: 14px;
        }
        
        .overview-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 12px;
            font-size: 13px;
            font-weight: 700;
            color: var(--ink);
        }
        
        .reset-trigger-btn {
            padding: 6px 12px;
            background: linear-gradient(135deg, var(--thread) 0%, var(--thread-soft) 100%);
            border: none;
            border-radius: 100px;
            font-size: 11px;
            font-weight: 600;
            color: white;
            cursor: pointer;
            transition: all 0.2s;
        }
        
        .reset-trigger-btn:hover {
            transform: scale(1.05);
            box-shadow: 0 4px 12px rgba(196, 136, 28, 0.3);
        }
        
        .zone-status-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 8px;
        }
        
        .zone-status {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 8px 10px;
            background: var(--parchment);
            border-radius: 6px;
            font-size: 11px;
        }
        
        .zone-status.good {
            border-left: 3px solid var(--olive);
        }
        
        .zone-status.needs-attention {
            border-left: 3px solid var(--thread);
        }
        
        .zone-name {
            font-weight: 600;
            color: var(--ink);
        }
        
        .zone-state {
            font-weight: 700;
        }
        
        .zone-status.good .zone-state {
            color: var(--olive);
        }
        
        .zone-status.needs-attention .zone-state {
            color: var(--thread);
        }
        
        /* Task Tags */
        .item-tag.physical {
            background: rgba(176, 137, 104, 0.15);
            color: var(--clay);
        }
        
        /* Children Status Grid (Parent View) */
        .children-status-grid {
            display: flex;
            flex-direction: column;
            gap: 12px;
        }
        
        .child-status-card {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 14px;
            background: var(--parchment-deep);
            border: 2px solid transparent;
            border-radius: 12px;
            cursor: pointer;
            transition: all 0.2s;
        }
        
        .child-status-card:hover {
            border-color: var(--thread);
            background: rgba(196, 136, 28, 0.05);
        }
        
        .child-avatar {
            width: 44px;
            height: 44px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 20px;
            flex-shrink: 0;
        }
        
        .child-info {
            flex: 1;
        }
        
        .child-name {
            font-weight: 700;
            font-size: 14px;
            color: var(--ink);
        }
        
        .child-stage {
            font-size: 11px;
            color: var(--ink-soft);
        }
        
        .child-metrics {
            display: flex;
            gap: 16px;
        }
        
        .child-metrics .metric {
            text-align: center;
        }
        
        .child-metrics .metric-value {
            font-size: 16px;
            font-weight: 700;
            color: var(--thread);
        }
        
        .child-metrics .metric-label {
            font-size: 10px;
            color: var(--ink-soft);
        }
        
        .child-privilege-status {
            padding: 6px 10px;
            border-radius: 100px;
            font-size: 10px;
            font-weight: 600;
        }
        
        .child-privilege-status.unlocked {
            background: rgba(107, 123, 76, 0.15);
            color: var(--olive);
        }
        
        .child-privilege-status.pending {
            background: rgba(196, 136, 28, 0.15);
            color: var(--thread);
        }
        
        /* Academy Tracker */
        .academy-child-row {
            padding: 12px 0;
            border-bottom: 1px dashed var(--parchment-edge);
        }
        
        .academy-child-row:last-child {
            border-bottom: none;
        }
        
        .academy-child-name {
            display: flex;
            align-items: center;
            gap: 8px;
            font-weight: 700;
            font-size: 13px;
            color: var(--ink);
            margin-bottom: 8px;
        }
        
        .child-dot {
            width: 10px;
            height: 10px;
            border-radius: 50%;
        }
        
        .academy-focus {
            display: flex;
            flex-direction: column;
            gap: 4px;
            padding-left: 18px;
        }
        
        .focus-subject {
            font-size: 12px;
            color: var(--ink-soft);
        }
        
        /* Ministry Items */
        .ministry-item {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 12px 0;
            border-bottom: 1px dashed var(--parchment-edge);
        }
        
        .ministry-item:last-child {
            border-bottom: none;
        }
        
        .ministry-icon {
            font-size: 24px;
        }
        
        .ministry-name {
            font-weight: 700;
            font-size: 13px;
            color: var(--ink);
        }
        
        .ministry-detail {
            font-size: 12px;
            color: var(--ink-soft);
        }
        
        /* ═══════════════════════════════════════════════════════════ */
        /* HOME FOCUS PRIORITIES                                        */
        /* ═══════════════════════════════════════════════════════════ */
        
        .priority-list {
            display: flex;
            flex-direction: column;
            gap: 12px;
        }
        
        .priority-item {
            display: flex;
            align-items: flex-start;
            gap: 12px;
            padding: 12px;
            background: rgba(139, 163, 168, 0.05);
            border-radius: 8px;
            border: 1px solid var(--parchment-edge);
        }
        
        .priority-checkbox {
            flex-shrink: 0;
        }
        
        .priority-checkbox input[type="checkbox"] {
            width: 18px;
            height: 18px;
            cursor: pointer;
        }
        
        .priority-details {
            flex: 1;
        }
        
        .priority-title {
            font-size: 13px;
            font-weight: 600;
            color: var(--ink);
            margin-bottom: 4px;
        }
        
        .priority-meta {
            font-size: 11px;
            color: var(--ink-soft);
        }
        
        /* ═══════════════════════════════════════════════════════════ */
        /* SUSTENANCE FLOW - MEAL TIMELINE                             */
        /* ═══════════════════════════════════════════════════════════ */
        
        .meal-timeline {
            display: flex;
            flex-direction: column;
            gap: 16px;
        }
        
        .meal-day {
            padding: 12px;
            border-radius: 8px;
            border: 2px solid var(--parchment-edge);
        }
        
        .meal-day.past {
            background: rgba(139, 163, 168, 0.05);
            opacity: 0.7;
        }
        
        .meal-day.current {
            background: rgba(139, 163, 168, 0.1);
            border-color: var(--olive);
        }
        
        .meal-day.future {
            background: rgba(184, 134, 11, 0.05);
            border-color: var(--thread-soft);
        }
        
        .meal-day-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 10px;
            padding-bottom: 8px;
            border-bottom: 1px dashed var(--parchment-edge);
        }
        
        .meal-day-label {
            font-weight: 700;
            font-size: 13px;
            color: var(--ink);
        }
        
        .meal-day-date {
            font-size: 11px;
            color: var(--ink-soft);
        }
        
        .meal-entries {
            display: flex;
            flex-direction: column;
            gap: 6px;
        }
        
        .meal-entry {
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 12px;
            color: var(--ink);
        }
        
        .meal-icon {
            font-size: 16px;
        }
        
        .meal-name {
            flex: 1;
        }
        
        .thaw-alert {
            font-size: 11px;
            padding: 2px 8px;
            background: rgba(184, 134, 11, 0.2);
            border-radius: 4px;
            color: #8b6914;
            font-weight: 600;
        }
        
        .meal-leftovers {
            margin-top: 8px;
            padding-top: 8px;
            border-top: 1px dashed var(--parchment-edge);
        }
        
        .leftover-badge {
            font-size: 11px;
            padding: 4px 10px;
            background: rgba(107, 123, 76, 0.15);
            border-radius: 6px;
            color: var(--olive);
            font-weight: 600;
        }
        
        /* ═══════════════════════════════════════════════════════════ */
        /* 13 ZONES STATUS                                             */
        /* ═══════════════════════════════════════════════════════════ */
        
        .zones-grid {
            display: flex;
            flex-direction: column;
            gap: 16px;
        }
        
        .zone-section {
            background: rgba(139, 163, 168, 0.05);
            border-radius: 8px;
            padding: 12px;
        }
        
        .zone-section-title {
            font-weight: 700;
            font-size: 12px;
            color: var(--ink);
            margin-bottom: 10px;
            padding-bottom: 6px;
            border-bottom: 1px solid var(--parchment-edge);
        }
        
        .zone-items {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
            gap: 8px;
        }
        
        .zone-status-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 8px 10px;
            border-radius: 6px;
            font-size: 12px;
            border: 1px solid transparent;
        }
        
        .zone-status-item.good {
            background: rgba(107, 123, 76, 0.1);
            border-color: rgba(107, 123, 76, 0.2);
        }
        
        .zone-status-item.attention {
            background: rgba(184, 134, 11, 0.1);
            border-color: rgba(184, 134, 11, 0.2);
        }
        
        .zone-status-item.needs {
            background: rgba(139, 71, 38, 0.1);
            border-color: rgba(139, 71, 38, 0.2);
        }
        
        .zone-name {
            font-weight: 600;
            color: var(--ink);
        }
        
        .zone-indicator {
            font-size: 14px;
        }
        
        /* Additional child privilege status styles */
        .child-privilege-status.training {
            background: rgba(139, 163, 168, 0.15);
            color: var(--ink);
        }
        
        .child-privilege-status.safety {
            background: rgba(184, 134, 11, 0.15);
            color: #8b6914;
        }
        
        /* ═══════════════════════════════════════════════════════════ */
        /* CHILD VIEW SPECIFIC STYLES                                  */
        /* ═══════════════════════════════════════════════════════════ */
        
        .child-header {
            background: linear-gradient(135deg, var(--parchment-deep) 0%, rgba(139, 163, 168, 0.1) 100%);
        }
        
        .child-stats {
            flex-direction: row;
            gap: 0;
        }
        
        .credit-bank-display {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 10px 16px;
            background: linear-gradient(135deg, var(--thread) 0%, var(--thread-soft) 100%);
            border-radius: 12px;
        }
        
        .credit-icon {
            font-size: 28px;
        }
        
        .credit-info .credit-value {
            font-size: 22px;
            font-weight: 800;
            color: white;
        }
        
        .credit-info .credit-label {
            font-size: 10px;
            color: rgba(255,255,255,0.8);
            text-transform: uppercase;
        }
        
        /* Privilege Gate Banner */
        .privilege-gate-banner {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 12px 18px;
            background: linear-gradient(135deg, rgba(107, 123, 76, 0.15) 0%, rgba(107, 123, 76, 0.05) 100%);
            border: 2px solid var(--olive);
            border-radius: 12px;
            margin-bottom: 16px;
        }
        
        .privilege-gate-banner.locked {
            background: linear-gradient(135deg, rgba(196, 136, 28, 0.15) 0%, rgba(196, 136, 28, 0.05) 100%);
            border-color: var(--thread);
        }
        
        .gate-status {
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 14px;
            font-weight: 700;
            color: var(--olive);
        }
        
        .privilege-gate-banner.locked .gate-status {
            color: var(--thread);
        }
        
        .gate-icon {
            font-size: 20px;
        }
        
        .gate-requirement {
            font-size: 12px;
            color: var(--ink-soft);
        }
        
        /* Child Task List */
        .child-task-list {
            display: flex;
            flex-direction: column;
            gap: 8px;
        }
        
        .child-task-item {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 12px;
            background: var(--parchment-deep);
            border-radius: 10px;
            transition: all 0.2s;
        }
        
        .child-task-item:hover {
            background: rgba(196, 136, 28, 0.08);
        }
        
        .child-task-item.done {
            opacity: 0.7;
        }
        
        .task-check {
            width: 26px;
            height: 26px;
            border: 2px solid var(--parchment-edge);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.2s;
            flex-shrink: 0;
            font-size: 14px;
            font-weight: 700;
        }
        
        .task-check:hover {
            border-color: var(--olive);
        }
        
        .task-check.done {
            background: var(--olive);
            border-color: var(--olive);
            color: white;
        }
        
        .task-content {
            flex: 1;
        }
        
        .task-name {
            font-weight: 600;
            font-size: 13px;
            color: var(--ink);
        }
        
        .child-task-item.done .task-name {
            text-decoration: line-through;
        }
        
        .task-zone {
            font-size: 11px;
            color: var(--ink-soft);
        }
        
        .task-meta {
            display: flex;
            flex-direction: column;
            align-items: flex-end;
            gap: 4px;
        }
        
        .task-credits {
            font-size: 12px;
            font-weight: 700;
            color: var(--thread);
        }
        
        .task-status {
            font-size: 9px;
            font-weight: 600;
            text-transform: uppercase;
            padding: 2px 6px;
            border-radius: 4px;
        }
        
        .task-status.mastered {
            background: rgba(107, 123, 76, 0.15);
            color: var(--olive);
        }
        
        .task-status.in-training {
            background: rgba(196, 136, 28, 0.15);
            color: var(--thread);
        }
        
        /* Agency Tasks */
        .agency-task-list {
            display: flex;
            flex-direction: column;
            gap: 8px;
        }
        
        .agency-task-item {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 12px;
            background: linear-gradient(135deg, rgba(196, 136, 28, 0.08) 0%, transparent 100%);
            border: 1px dashed var(--thread);
            border-radius: 10px;
        }
        
        .agency-check {
            width: 24px;
            height: 24px;
            border: 2px dashed var(--thread);
            border-radius: 50%;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.2s;
        }
        
        .agency-check:hover {
            background: rgba(196, 136, 28, 0.15);
        }
        
        .agency-check.done {
            background: var(--thread);
            border-style: solid;
            color: white;
        }
        
        .agency-content {
            flex: 1;
        }
        
        .agency-name {
            font-weight: 600;
            font-size: 13px;
            color: var(--ink);
        }
        
        .agency-reward {
            font-size: 11px;
            color: var(--thread);
            font-weight: 600;
        }
        
        .add-agency-btn {
            width: 100%;
            margin-top: 10px;
            padding: 10px;
            background: transparent;
            border: 2px dashed var(--parchment-edge);
            border-radius: 10px;
            font-size: 12px;
            font-weight: 600;
            color: var(--ink-soft);
            cursor: pointer;
            transition: all 0.2s;
        }
        
        .add-agency-btn:hover {
            border-color: var(--thread);
            color: var(--thread);
        }
        
        /* Credit Bank Visual */
        .credit-bank-visual {
            display: flex;
            align-items: center;
            gap: 20px;
            margin-bottom: 16px;
            padding-bottom: 16px;
            border-bottom: 1px dashed var(--parchment-edge);
        }
        
        .credit-progress-ring {
            position: relative;
            width: 100px;
            height: 100px;
        }
        
        .credit-progress-ring svg {
            transform: rotate(-90deg);
        }
        
        .credit-progress-ring .progress-bg {
            fill: none;
            stroke: var(--parchment-deep);
            stroke-width: 8;
        }
        
        .credit-progress-ring .progress-fill {
            fill: none;
            stroke: var(--thread);
            stroke-width: 8;
            stroke-linecap: round;
            transition: stroke-dashoffset 0.5s;
        }
        
        .progress-center {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            text-align: center;
        }
        
        .progress-value {
            display: block;
            font-size: 24px;
            font-weight: 800;
            color: var(--thread);
        }
        
        .progress-goal {
            font-size: 11px;
            color: var(--ink-soft);
        }
        
        .credit-goal-info {
            flex: 1;
        }
        
        .goal-name {
            font-size: 13px;
            color: var(--ink);
            margin-bottom: 4px;
        }
        
        .goal-progress {
            font-size: 12px;
            color: var(--ink-soft);
        }
        
        /* Credit Transactions */
        .credit-transactions {
            margin-bottom: 16px;
        }
        
        .transactions-header {
            font-size: 11px;
            font-weight: 700;
            text-transform: uppercase;
            color: var(--ink-soft);
            margin-bottom: 8px;
        }
        
        .transaction-item {
            display: flex;
            justify-content: space-between;
            padding: 6px 0;
            font-size: 12px;
            border-bottom: 1px dashed var(--parchment-edge);
        }
        
        .trans-desc {
            color: var(--ink);
        }
        
        .trans-amount {
            font-weight: 700;
            color: var(--olive);
        }
        
        /* Rewards Preview */
        .rewards-preview {
            background: linear-gradient(135deg, rgba(196, 136, 28, 0.1) 0%, transparent 100%);
            border-radius: 10px;
            padding: 12px;
        }
        
        .rewards-header {
            font-size: 12px;
            font-weight: 700;
            color: var(--thread);
            margin-bottom: 10px;
        }
        
        .reward-item {
            display: flex;
            justify-content: space-between;
            padding: 8px 0;
            font-size: 12px;
            border-bottom: 1px dashed var(--parchment-edge);
        }
        
        .reward-item:last-child {
            border-bottom: none;
        }
        
        .reward-name {
            color: var(--ink);
        }
        
        .reward-cost {
            font-weight: 700;
            color: var(--thread);
        }
        
        /* Soul Signals / Virtue Tags */
        .virtue-tags {
            display: flex;
            flex-direction: column;
            gap: 10px;
        }
        
        .virtue-tag {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 10px 12px;
            background: var(--parchment-deep);
            border-radius: 8px;
        }
        
        .virtue-name {
            font-size: 13px;
            font-weight: 600;
            color: var(--ink);
        }
        
        .virtue-level {
            display: flex;
            gap: 4px;
        }
        
        .level-dot {
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background: var(--parchment-edge);
        }
        
        .level-dot.active {
            background: var(--thread);
        }
        
        /* Academic Snapshot Grid */
        .academic-snapshot-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 10px;
        }
        
        .academic-item {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 10px;
            background: var(--parchment-deep);
            border-radius: 8px;
        }
        
        .academic-icon {
            font-size: 20px;
        }
        
        .academic-subject {
            font-size: 12px;
            font-weight: 700;
            color: var(--ink);
        }
        
        .academic-status {
            font-size: 11px;
            color: var(--ink-soft);
        }

        .weather-forecast {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 10px;
        }

        .forecast-day {
            background: rgba(255,255,255,0.4);
            border: 1px solid var(--parchment-edge);
            border-radius: 10px;
            padding: 12px;
            text-align: center;
        }

        .forecast-day-name {
            font-size: 11px;
            font-weight: 700;
            color: var(--ink-soft);
            margin-bottom: 6px;
        }

        .forecast-temp {
            font-size: 18px;
            font-weight: 800;
            color: var(--ink);
            margin: 8px 0;
        }

        .forecast-icon {
            font-size: 28px;
            margin: 6px 0;
        }

        .user-stats {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 10px;
        }

        .stat-card {
            background: rgba(255,255,255,0.4);
            border: 1px solid var(--parchment-edge);
            border-radius: 10px;
            padding: 12px;
            text-align: center;
        }

        .stat-value {
            font-size: 24px;
            font-weight: 800;
            color: var(--thread);
            margin-bottom: 4px;
        }

        .stat-label {
            font-size: 11px;
            color: var(--ink-soft);
            text-transform: uppercase;
            letter-spacing: 0.3px;
        }

        .badge-collection {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
        }

        .mini-badge {
            background: linear-gradient(135deg, var(--thread), #9d7a2e);
            color: white;
            padding: 6px 12px;
            border-radius: 8px;
            font-size: 11px;
            font-weight: 700;
            display: inline-flex;
            align-items: center;
            gap: 6px;
        }

        .day-detail {
            background: rgba(255,255,255,0.4);
            border: 1px solid var(--parchment-edge);
            border-radius: 10px;
            padding: 10px 12px;
            margin-bottom: 8px;
        }

        .day-detail-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 6px;
        }

        .day-detail-name {
            font-size: 13px;
            font-weight: 800;
            color: var(--ink);
        }

        .day-detail-date {
            font-size: 11px;
            color: var(--ink-soft);
        }

        .day-detail-events {
            font-size: 12px;
            color: var(--ink);
            line-height: 1.5;
        }

        .media-item {
            background: rgba(255,255,255,0.4);
            border: 1px solid var(--parchment-edge);
            border-radius: 10px;
            padding: 12px;
            margin-bottom: 10px;
            display: flex;
            gap: 12px;
        }

        .media-thumbnail {
            width: 80px;
            height: 80px;
            border-radius: 8px;
            background: linear-gradient(135deg, var(--parchment-deep), var(--parchment));
            flex-shrink: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 32px;
        }

        .media-info {
            flex: 1;
        }

        .media-title {
            font-size: 13px;
            font-weight: 700;
            color: var(--ink);
            margin-bottom: 4px;
        }

        .media-meta {
            font-size: 11px;
            color: var(--ink-soft);
            margin-bottom: 6px;
        }

        .media-stats {
            display: flex;
            gap: 12px;
            font-size: 11px;
            color: var(--thread);
        }

        /* ═══════════════════════════════════════════════════════════════ */
.main-content {
            flex: 1;
            width: 100%;
            overflow-y: auto;
            padding: var(--space-lg);
            background:
                linear-gradient(135deg, rgba(244, 236, 215, 0.3) 0%, rgba(229, 217, 186, 0.2) 100%),
                repeating-linear-gradient(
                    0deg,
                    transparent,
                    transparent 50px,
                    rgba(196, 180, 142, 0.03) 50px,
                    rgba(196, 180, 142, 0.03) 51px
                );
            background-color: var(--parchment);
        }

        /* Prevent main content scroll when viewing full-screen workspaces */
        body:has(#tab-creation-index.active) .main-content,
        body:has(#tab-havenhub-math.active) .main-content,
        body:has(#tab-one-room-schoolhouse.active) .main-content {
            overflow: hidden !important;
        }

        /* Remove padding for SHEMA page to make it fullscreen */
        body:has(#page-shema.active) .main-content {
            padding: 0 !important;
            overflow: hidden !important;
        }
        .page { display: none; animation: fadeIn 0.4s var(--ease-gentle); }
        .page.active { display: block; overflow-y: auto; max-height: calc(100vh - 60px); }
        #page-wellspring.active { display: flex; flex-direction: column; }
        #page-profile.active { overflow-y: auto; }
        @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
        @keyframes glowPulse { 0% { text-shadow: 0 0 4px var(--thread-faint); } 50% { text-shadow: 0 0 8px var(--thread-soft); } 100% { text-shadow: 0 0 4px var(--thread-faint); } }
        .page-header { margin-bottom: var(--space-xl); }
        .page-title { font-family: var(--font-display); font-size: 2rem; font-weight: 400; margin-bottom: var(--space-xs); color: var(--ink); }
        .page-subtitle { font-size: 1rem; color: var(--ink-soft); }

        /* ═══════════════════════════════════════════════════════════════ */
        /* [CSS-005] CARDS & BLOCKS (Stitched Theme)                      */
        /* ═══════════════════════════════════════════════════════════════ */
        .card, .hub-block { 
            background: var(--parchment); 
            border-radius: var(--radius-lg); 
            box-shadow: var(--shadow-sm); 
            border: 2px dashed var(--parchment-edge);
            overflow: hidden; 
            transition: all 0.3s;
        }
        .card:hover, .hub-block:hover {
            border-color: var(--thread-soft);
            box-shadow: var(--shadow-md);
        }
        .card-header, .block-header { 
            display: flex; 
            align-items: center; 
            justify-content: space-between; 
            padding: var(--space-md) var(--space-lg); 
            border-bottom: 2px dashed var(--parchment-dark);
            background: var(--parchment-aged);
        }
        .card-title, .block-title { 
            display: flex; 
            align-items: center; 
            gap: var(--space-sm); 
            font-size: 0.8rem; 
            text-transform: uppercase; 
            letter-spacing: 0.1em; 
            color: var(--thread); 
            font-weight: 600; 
        }
        .card-content, .block-content { padding: var(--space-lg); background: var(--parchment); }
        .grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--space-lg); }
        .grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: var(--space-lg); }
        .hub-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--space-lg); }

        /* ═══════════════════════════════════════════════════════════════ */
        /* [CSS-006] BUTTONS (Golden Thread Interactive)                  */
        /* ═══════════════════════════════════════════════════════════════ */
        .btn { 
            display: inline-flex; 
            align-items: center; 
            justify-content: center; 
            gap: var(--space-xs); 
            padding: var(--space-sm) var(--space-lg); 
            border: 2px dashed var(--thread);
            border-radius: var(--radius-lg); 
            font-family: var(--font-body); 
            font-size: 0.9rem; 
            font-weight: 500; 
            cursor: pointer; 
            transition: all 0.3s; 
            min-width: 120px;
            background: var(--parchment);
            color: var(--thread);
        }
        .btn:hover {
            background: var(--thread);
            color: var(--white);
            border-style: solid;
            transform: translateY(-2px);
            box-shadow: var(--shadow-md);
        }
        .btn-primary { 
            background: linear-gradient(135deg, var(--ink) 0%, #3D2E1F 100%);
            color: var(--parchment); 
            border-color: var(--thread);
        }
        .btn-primary:hover { 
            background: linear-gradient(135deg, #3D2E1F 0%, var(--ink) 100%);
            border-style: solid;
        }
        .btn-secondary { 
            background: var(--parchment-aged); 
            color: var(--ink); 
            border: 2px dashed var(--parchment-edge);
        }
        .btn-secondary:hover {
            border-color: var(--thread);
            background: var(--parchment);
        }
        .btn-gold, .btn-thread { 
            background: linear-gradient(135deg, var(--thread) 0%, var(--thread-hover) 100%);
            color: var(--white); 
            border: 2px solid var(--thread);
        }
        .btn-gold:hover, .btn-thread:hover {
            background: linear-gradient(135deg, var(--thread-hover) 0%, var(--thread-glow) 100%);
            box-shadow: 0 4px 16px rgba(196, 136, 28, 0.4);
        }

        /* Scripture Block with Stitched Border */
        .scripture-block { 
            background: var(--parchment-aged); 
            border: 2px dashed var(--thread);
            border-left: 4px solid var(--thread);
            padding: var(--space-md) var(--space-lg); 
            margin: var(--space-md) 0; 
            border-radius: var(--radius-md);
        }
        .scripture-text { font-family: var(--font-display); font-size: 1.2rem; font-style: italic; line-height: 1.7; color: var(--ink); }
        .scripture-ref { display: block; margin-top: var(--space-sm); font-family: var(--font-body); font-size: 0.85rem; color: var(--thread); font-style: normal; font-weight: 600; }

        /* Profile */
        .profile-card { display: flex; align-items: center; gap: var(--space-lg); }
        .profile-avatar { 
            width: 70px; 
            height: 70px; 
            border-radius: 50%; 
            background: linear-gradient(135deg, var(--olive) 0%, var(--olive-soft) 100%); 
            border: 3px dashed var(--thread);
            display: flex; 
            align-items: center; 
            justify-content: center; 
            font-family: var(--font-display); 
            font-size: 1.8rem; 
            color: white; 
            flex-shrink: 0; 
        }
        .profile-info h3 { font-family: var(--font-display); font-size: 1.4rem; font-weight: 500; margin-bottom: var(--space-xs); }
        .profile-identity { font-family: var(--font-display); font-style: italic; color: var(--thread); font-size: 0.95rem; animation: glowPulse 2s ease-in-out infinite; }
        .profile-stats { display: flex; gap: var(--space-lg); margin-top: var(--space-md); padding-top: var(--space-md); border-top: 2px dashed var(--parchment-dark); }
        .stat { text-align: center; }
        .stat-value { font-family: var(--font-display); font-size: 1.4rem; color: var(--gold); font-weight: 500; }
        .stat-label { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-faint); }

        /* Todo */
        .todo-list { list-style: none; }
        .todo-item { display: flex; align-items: center; gap: var(--space-sm); padding: var(--space-sm) 0; border-bottom: 1px solid var(--parchment); }
        .todo-item:last-child { border-bottom: none; }
        .todo-check { width: 22px; height: 22px; border: 2px solid var(--ink-faint); border-radius: 6px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.2s; flex-shrink: 0; font-size: 0.8rem; }
        .todo-check.checked { background: var(--olive); border-color: var(--olive); color: white; }
        .todo-text { flex: 1; font-size: 0.95rem; }
        .todo-item.completed .todo-text { text-decoration: line-through; color: var(--ink-faint); }
        .todo-tag { font-size: 0.7rem; padding: 2px 8px; border-radius: 100px; background: var(--parchment); color: var(--ink-faint); }
        .todo-tag.walk { background: rgba(107, 123, 76, 0.15); color: var(--olive); }
        .todo-tag.family { background: rgba(181, 123, 123, 0.15); color: var(--family); }

        /* Self-awareness and self-help systems */
        .self-system { margin-top: var(--space-lg); border: 1px solid var(--parchment-dark); border-radius: 12px; background: var(--parchment-deep); padding: var(--space-lg); }
        .self-system-title { font-family: var(--font-display); font-size: 1.5rem; margin-bottom: var(--space-sm); color: var(--ink); }
        .self-system-subtitle { font-size: 0.9rem; color: var(--ink-soft); margin-bottom: var(--space-md); }
        .system-step { border: 1px solid var(--parchment-dark); border-radius: 10px; background: var(--surface); margin-bottom: var(--space-sm); padding: var(--space-sm) var(--space-md); cursor: pointer; transition: background 0.2s; }
        .system-step:focus { outline: 2px solid var(--gold); }
        .system-step-header { display: flex; align-items: center; justify-content: space-between; font-family: var(--font-display); font-size: 1.1rem; }
        .system-step-number { font-weight: 600; margin-right: var(--space-sm); color: var(--gold); }
        /* Mission section styling */
        .mission-section {
            background: var(--surface);
            padding: var(--space-lg);
            border-radius: 12px;
            border: 1px solid var(--parchment-dark);
            margin-top: var(--space-lg);
            line-height: 1.6;
        }
        .mission-section h3 {
            font-family: var(--font-display);
            color: var(--ink);
            margin-top: var(--space-md);
        }
        .mission-section p {
            color: var(--ink-soft);
            margin-bottom: var(--space-md);
            font-size: 0.95rem;
        }
        .mission-section ul {
            list-style: disc;
            margin-left: var(--space-lg);
            color: var(--ink-soft);
            font-size: 0.95rem;
        }
        .system-step-title { flex: 1; }
        .system-step-toggle { font-size: 1.2rem; color: var(--ink-faint); }
        .system-step-content { display: none; padding-top: var(--space-sm); font-size: 0.9rem; color: var(--ink-soft); }
        .system-step.open .system-step-content { display: block; }

        /* Tables in self systems */
        .system-table { width: 100%; border-collapse: collapse; margin-top: var(--space-sm); }
        .system-table th, .system-table td { padding: var(--space-xs) var(--space-sm); border: 1px solid var(--parchment-dark); font-size: 0.85rem; text-align: left; }
        .system-table th { background: var(--parchment-dark); font-weight: 600; }

        /* Buttons and notes for self‑systems */
        .system-add-btn { display: inline-flex; align-items: center; gap: var(--space-xs); padding: var(--space-xs) var(--space-sm); background: transparent; border: 1px dashed var(--parchment-dark); border-radius: 8px; color: var(--ink-faint); font-size: 0.8rem; cursor: pointer; transition: all 0.2s; margin-top: var(--space-xs); }
        .system-add-btn:hover { border-color: var(--gold); color: var(--gold); }
        .system-note { font-size: 0.8rem; color: var(--ink-faint); margin-top: var(--space-xs); }

        /* Academy tab bar */
        .academy-tab-bar { 
            display: flex; 
            justify-content: space-between; /* Spread tabs out */
            gap: var(--space-sm); 
            margin: var(--space-md) 0; 
            overflow-x: auto; 
            width: 100%;
        }
        .academy-tab { 
            flex: 1; /* Make tabs equal width */
            text-align: center;
            padding: var(--space-sm); 
            border-radius: 8px; 
            border: 1px solid var(--parchment-dark); 
            background: var(--parchment-deep); 
            cursor: pointer; 
            white-space: nowrap; 
        }
        .academy-tab.active { background: var(--gold-faint); color: var(--ink); font-weight: 600; }

        /* ═══════════════════════════════════════════════════════════════ */
        /* HAVEN HUB ACADEMY - Echad Community Learning Center            */
        /* ═══════════════════════════════════════════════════════════════ */
        
        /* Fixed Header */
        .havenhub-academy-header {
            position: relative;
            top: 0;
            background: linear-gradient(135deg, var(--parchment) 0%, var(--parchment-aged) 100%);
            border-bottom: 2px solid var(--thread);
            padding: 20px 24px;
            z-index: 50;
            box-shadow: 0 2px 8px rgba(0,0,0,0.05);
            min-height: 25vh;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }
        
        .academy-title-section {
            text-align: center;
            margin-bottom: 16px;
        }
        
        .academy-main-title {
            font-family: var(--font-display);
            font-size: 28px;
            font-weight: 800;
            color: var(--ink);
            margin: 0 0 6px 0;
            letter-spacing: 0.3px;
        }
        
        .academy-subtitle {
            font-size: 13px;
            color: var(--ink-soft);
            margin: 0;
        }
        
        /* Main Tabs Row - Larger with descriptions */
        .academy-tabs-row {
            display: flex;
            gap: 10px;
            margin-top: 20px;
            margin-bottom: 16px;
            overflow-x: auto;
            -webkit-overflow-scrolling: touch;
            padding-bottom: 4px;
        }
        
        .academy-tab-large {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 14px 18px;
            border: 2px solid var(--parchment-edge);
            border-radius: 12px;
            background: var(--surface);
            cursor: pointer;
            transition: all 0.2s ease;
            min-width: 160px;
            flex-shrink: 0;
        }
        
        .academy-tab-large:hover {
            background: var(--parchment-deep);
            transform: translateY(-2px);
            box-shadow: 0 4px 8px rgba(0,0,0,0.08);
        }
        
        .academy-tab-large.active {
            background: var(--thread);
            border-color: var(--thread);
            box-shadow: 0 4px 12px rgba(184,134,11,0.3);
        }
        
        .academy-tab-large.active .tab-title,
        .academy-tab-large.active .tab-desc {
            color: white;
        }
        
        .academy-tab-large .tab-icon {
            font-size: 28px;
            line-height: 1;
        }
        
        .academy-tab-large .tab-content {
            display: flex;
            flex-direction: column;
            gap: 2px;
        }
        
        .academy-tab-large .tab-title {
            font-size: 15px;
            font-weight: 700;
            color: var(--ink);
            line-height: 1.2;
        }
        
        .academy-tab-large .tab-desc {
            font-size: 11px;
            color: var(--ink-soft);
            line-height: 1.2;
        }
        
        /* Other Learning Centers Section */
        .other-centers-section {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 12px 0 0 0;
            border-top: 1px solid var(--parchment-edge);
            flex-wrap: wrap;
        }
        
        .other-centers-label {
            font-size: 12px;
            font-weight: 600;
            color: var(--ink-soft);
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }
        
        .other-centers-links {
            display: flex;
            gap: 8px;
            flex-wrap: wrap;
        }
        
        .center-link {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 8px 16px;
            background: var(--parchment-deep);
            border: 1px solid var(--parchment-edge);
            border-radius: 20px;
            font-size: 0.9rem;
            color: var(--ink);
            cursor: pointer;
            transition: all 0.2s;
            text-decoration: none;
        }
        
        .center-link.active {
            background: var(--thread);
            color: white;
            border-color: var(--thread);
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        }
        
        .center-link:hover {
            background: var(--parchment-aged);
            transform: translateY(-2px);
        }
        
        .center-link span {
            font-size: 16px;
        }
        
/* Haven Hub Academy Page Layout Fix */
#page-havenhub-academy.active {
    display: block !important;
    height: auto;
    overflow-y: auto;
    max-height: calc(100vh - var(--header-height));
}

.havenhub-academy-header {
    position: relative;
    background: linear-gradient(135deg, var(--parchment) 0%, var(--parchment-aged) 100%);
    border-bottom: 2px solid var(--thread);
    padding: 24px;
    z-index: 10;
    min-height: 25vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Content Area */
.academy-content-area {
    display: flex;
    flex-direction: column;
    padding: 24px;
    max-width: 100%;
    margin: 0;
    overflow: visible;
}

/* Specific overrides for full-screen workspaces inside academy */
body:has(#tab-creation-index.active) .academy-content-area,
body:has(#tab-havenhub-math.active) .academy-content-area,
body:has(#tab-one-room-schoolhouse.active) .academy-content-area {
    padding: 0 !important;
}

.academy-tab-bar { 
    display: flex; 
    justify-content: space-between; 
    gap: var(--space-sm); 
    margin: var(--space-md) 24px; 
    overflow-x: auto; 
    width: auto;
}

.academy-tab-content {
    display: none;
    flex: 1;
    flex-direction: column;
    min-height: 0;
}

.academy-tab-content.active {
    display: flex;
    animation: fadeIn 0.3s ease;
    overflow: visible;
}
        
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }
        
        /* Family Hub Styles */
        .family-hub-container {
            max-width: 1000px;
            margin: 0 auto;
        }
        
        .hub-section-title {
            font-family: var(--font-display);
            font-size: 24px;
            font-weight: 700;
            color: var(--ink);
            margin-bottom: 8px;
        }
        
        .hub-subtitle {
            font-size: 14px;
            color: var(--ink-soft);
            margin-bottom: 24px;
        }
        
        /* Hub Cards */
        .hub-card {
            background: white;
            border: 2px solid var(--parchment-edge);
            border-radius: 12px;
            padding: 20px;
            margin-bottom: 20px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.05);
        }
        
        .hub-card.accent-card {
            background: linear-gradient(135deg, var(--thread-faint) 0%, rgba(255,255,255,0.95) 100%);
            border-color: var(--thread);
        }
        
        .hub-card-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 16px;
            padding-bottom: 12px;
            border-bottom: 1px solid var(--parchment-edge);
        }
        
        .hub-card-header h3 {
            font-size: 18px;
            font-weight: 700;
            color: var(--ink);
            margin: 0;
        }
        
        .hub-badge {
            font-size: 11px;
            padding: 4px 10px;
            background: var(--thread-faint);
            border-radius: 12px;
            color: var(--thread);
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }
        
        .hub-card-body {
            color: var(--ink);
        }
        
        /* Formation Progress Grid */
        .formation-progress-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 16px;
        }
        
        .formation-stage {
            padding: 16px;
            background: var(--parchment-deep);
            border-radius: 8px;
            text-align: center;
        }
        
        .stage-icon {
            font-size: 32px;
            margin-bottom: 8px;
        }
        
        .stage-label {
            font-size: 13px;
            font-weight: 600;
            color: var(--ink);
            margin-bottom: 10px;
        }
        
        .stage-bar {
            height: 6px;
            background: rgba(139,163,168,0.2);
            border-radius: 3px;
            overflow: hidden;
            margin-bottom: 8px;
        }
        
        .stage-fill {
            height: 100%;
            background: var(--thread);
            transition: width 0.5s ease;
        }
        
        .stage-stat {
            font-size: 11px;
            color: var(--ink-soft);
        }
        
        /* Activity Feed */
        .activity-feed {
            display: flex;
            flex-direction: column;
            gap: 12px;
        }
        
        .activity-item {
            display: flex;
            gap: 12px;
            align-items: start;
            padding: 12px;
            background: var(--parchment-deep);
            border-radius: 8px;
            transition: transform 0.2s;
        }
        
        .activity-item:hover {
            transform: translateX(4px);
        }
        
        .activity-avatar {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 20px;
            flex-shrink: 0;
        }
        
        .activity-content {
            flex: 1;
        }
        
        .activity-text {
            font-size: 14px;
            color: var(--ink);
            margin-bottom: 4px;
        }
        
        .activity-text strong {
            font-weight: 700;
        }
        
        .activity-meta {
            font-size: 11px;
            color: var(--ink-soft);
        }
        
        /* Week Focus */
        .week-focus {
            text-align: center;
        }
        
        .focus-theme {
            font-size: 22px;
            font-weight: 700;
            color: var(--thread);
            margin-bottom: 12px;
        }
        
        .focus-verse {
            font-family: var(--font-display);
            font-style: italic;
            font-size: 15px;
            color: var(--ink);
            margin-bottom: 12px;
        }
        
        .focus-application {
            font-size: 13px;
            color: var(--ink-soft);
        }
        
        /* Family Profile Tabs */
        .family-profile-tabs {
            display: flex;
            gap: 8px;
            margin-bottom: 20px;
            flex-wrap: wrap;
        }
        
        .profile-tab {
            padding: 8px 14px;
            border: 2px solid var(--parchment-edge);
            border-radius: 8px;
            background: var(--surface);
            cursor: pointer;
            transition: all 0.2s;
            font-size: 13px;
            font-weight: 600;
            color: var(--ink);
        }
        
        .profile-tab:hover {
            background: var(--parchment-deep);
        }
        
        .profile-tab.active {
            background: var(--olive);
            color: white;
            border-color: var(--olive);
        }
        
        /* Member Profile */
        .family-member-profile {
            padding: 20px;
            background: var(--parchment-deep);
            border-radius: 10px;
        }
        
        .profile-header {
            display: flex;
            gap: 16px;
            align-items: center;
            margin-bottom: 24px;
            padding-bottom: 16px;
            border-bottom: 2px solid var(--parchment-edge);
        }
        
        .profile-avatar-large {
            width: 60px;
            height: 60px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 32px;
            flex-shrink: 0;
        }
        
        .profile-name {
            font-size: 20px;
            font-weight: 700;
            color: var(--ink);
            margin: 0 0 4px 0;
        }
        
        .profile-stage {
            font-size: 13px;
            color: var(--ink-soft);
        }
        
        .profile-sections {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
            gap: 16px;
        }
        
        .profile-section {
            background: white;
            padding: 14px;
            border-radius: 8px;
        }
        
        .profile-section h5 {
            font-size: 13px;
            font-weight: 700;
            color: var(--ink);
            margin: 0 0 10px 0;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }
        
        .profile-list {
            list-style: none;
            padding: 0;
            margin: 0;
        }
        
        .profile-list li {
            font-size: 13px;
            color: var(--ink);
            margin-bottom: 6px;
            padding-left: 4px;
        }
        
        .mentoring-badges {
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
        }
        
        .mentor-badge {
            font-size: 11px;
            padding: 4px 10px;
            background: var(--sanctuary);
            color: white;
            border-radius: 12px;
            font-weight: 600;
        }
        
        .health-indicator {
            font-size: 13px;
            padding: 8px 12px;
            border-radius: 6px;
            font-weight: 600;
            text-align: center;
        }
        
        .health-indicator.growing {
            background: rgba(107,123,76,0.2);
            color: var(--olive);
        }
        
        /* Growth Stage Container */
        .growth-stage-container {
            max-width: 1000px;
            margin: 0 auto;
        }
        
        .stage-header {
            display: flex;
            gap: 20px;
            align-items: center;
            padding: 24px;
            border-radius: 12px;
            margin-bottom: 24px;
        }
        
        .mighty-oaks-header {
            background: linear-gradient(135deg, rgba(74,124,89,0.15) 0%, rgba(143,188,143,0.1) 100%);
            border: 2px solid rgba(74,124,89,0.3);
        }
        
        .strong-shoots-header {
            background: linear-gradient(135deg, rgba(107,123,76,0.15) 0%, rgba(107,123,76,0.1) 100%);
            border: 2px solid rgba(107,123,76,0.3);
        }
        
        .saplings-header {
            background: linear-gradient(135deg, rgba(139,163,168,0.15) 0%, rgba(139,163,168,0.1) 100%);
            border: 2px solid rgba(139,163,168,0.3);
        }
        
        .seedlings-header {
            background: linear-gradient(135deg, rgba(184,134,11,0.15) 0%, rgba(212,165,116,0.1) 100%);
            border: 2px solid rgba(184,134,11,0.3);
        }
        
        .stage-icon-large {
            font-size: 48px;
            flex-shrink: 0;
        }
        
        .stage-info h2 {
            font-family: var(--font-display);
            font-size: 26px;
            font-weight: 700;
            color: var(--ink);
            margin: 0 0 6px 0;
        }
        
        .stage-description {
            font-size: 14px;
            color: var(--ink);
            margin: 0 0 6px 0;
        }
        
        .stage-meta {
            font-size: 12px;
            color: var(--ink-soft);
            margin: 0;
        }
        
        /* Learning Content */
        .learning-content {
            padding: 0;
        }
        
        .content-section {
            margin-bottom: 32px;
        }
        
        .content-section h3 {
            font-size: 18px;
            font-weight: 700;
            color: var(--ink);
            margin: 0 0 16px 0;
        }
        
        /* Learning Cards Grid */
        .learning-cards-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
            gap: 16px;
        }
        
        .learning-card {
            background: white;
            border: 2px solid var(--parchment-edge);
            border-radius: 10px;
            padding: 18px;
            transition: all 0.2s ease;
        }
        
        .learning-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(0,0,0,0.1);
        }
        
        .learning-card .card-icon {
            font-size: 32px;
            margin-bottom: 10px;
        }
        
        .learning-card h4 {
            font-size: 16px;
            font-weight: 700;
            color: var(--ink);
            margin: 0 0 8px 0;
        }
        
        .learning-card p {
            font-size: 13px;
            color: var(--ink-soft);
            margin: 0 0 12px 0;
        }
        
        .card-progress {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 12px;
        }
        
        .progress-bar {
            flex: 1;
            height: 6px;
            background: var(--parchment-deep);
            border-radius: 3px;
            overflow: hidden;
        }
        
        .progress-fill {
            height: 100%;
            background: var(--thread);
            transition: width 0.5s ease;
        }
        
        .progress-text {
            font-size: 12px;
            font-weight: 600;
            color: var(--thread);
        }
        
        .btn-continue {
            width: 100%;
            padding: 8px;
            background: var(--thread);
            color: white;
            border: none;
            border-radius: 6px;
            font-weight: 600;
            font-size: 13px;
            cursor: pointer;
            transition: all 0.2s;
        }
        
        .btn-continue:hover {
            background: var(--thread-soft);
            transform: translateX(4px);
        }
        
        /* One Room Prompt */
        .one-room-prompt {
            text-align: center;
            margin-top: 32px;
            padding: 24px;
            background: var(--parchment-deep);
            border-radius: 10px;
        }
        
        .btn-one-room {
            padding: 12px 24px;
            background: var(--olive);
            color: white;
            border: none;
            border-radius: 8px;
            font-weight: 600;
            font-size: 14px;
            cursor: pointer;
            transition: all 0.2s;
        }
        
        .btn-one-room:hover {
            background: var(--olive-soft);
            transform: scale(1.05);
        }
        
        /* Mentoring Callout */
        .mentoring-callout {
            display: flex;
            gap: 16px;
            align-items: center;
            padding: 18px;
            background: linear-gradient(135deg, rgba(184,134,11,0.1) 0%, rgba(212,165,116,0.05) 100%);
            border: 2px solid var(--thread);
            border-radius: 10px;
            margin-top: 24px;
        }
        
        .callout-icon {
            font-size: 32px;
            flex-shrink: 0;
        }
        
        .callout-content h4 {
            font-size: 16px;
            font-weight: 700;
            color: var(--ink);
            margin: 0 0 6px 0;
        }
        
        .callout-content p {
            font-size: 13px;
            color: var(--ink-soft);
            margin: 0 0 10px 0;
        }
        
        .btn-secondary {
            padding: 8px 16px;
            background: white;
            color: var(--thread);
            border: 2px solid var(--thread);
            border-radius: 6px;
            font-weight: 600;
            font-size: 13px;
            cursor: pointer;
            transition: all 0.2s;
        }
        
        .btn-secondary:hover {
            background: var(--thread);
            color: white;
        }
        
        /* Formation Story Card (Saplings) */
        .formation-story-card {
            padding: 20px;
            background: linear-gradient(135deg, var(--thread-faint) 0%, white 100%);
            border: 2px solid var(--thread);
            border-radius: 10px;
        }
        
        .story-icon {
            font-size: 36px;
            margin-bottom: 12px;
        }
        
        .formation-story-card h4 {
            font-size: 18px;
            font-weight: 700;
            color: var(--ink);
            margin: 0 0 10px 0;
        }
        
        .formation-story-card p {
            font-size: 14px;
            color: var(--ink);
            margin: 0 0 12px 0;
        }
        
        .story-activity,
        .story-verse {
            font-size: 13px;
            margin-bottom: 8px;
            padding: 10px;
            background: white;
            border-radius: 6px;
        }
        
        .story-activity strong,
        .story-verse strong {
            color: var(--thread);
        }
        
        /* Mentoring Relationships */
        .mentoring-relationships {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 16px;
            margin-top: 24px;
            padding: 20px;
            background: var(--parchment-deep);
            border-radius: 10px;
        }
        
        .mentoring-section h4 {
            font-size: 14px;
            font-weight: 700;
            color: var(--ink);
            margin: 0 0 10px 0;
        }
        
        .mentor-chip {
            display: inline-block;
            padding: 8px 12px;
            background: white;
            border-radius: 6px;
            font-size: 12px;
            color: var(--ink);
        }
        
        /* Seedling Styles */
        .seedling-activities {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 16px;
        }
        
        .seedling-card {
            padding: 20px;
            background: linear-gradient(135deg, rgba(184,134,11,0.1) 0%, white 100%);
            border: 2px solid var(--thread);
            border-radius: 10px;
            text-align: center;
        }
        
        .seedling-icon {
            font-size: 36px;
            margin-bottom: 10px;
        }
        
        .seedling-card h4 {
            font-size: 16px;
            font-weight: 700;
            color: var(--ink);
            margin: 0 0 8px 0;
        }
        
        .seedling-card p {
            font-size: 13px;
            color: var(--ink-soft);
            margin: 0;
        }
        
        .age-specific-sections {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 16px;
            margin: 24px 0;
        }
        
        .age-section {
            padding: 18px;
            background: white;
            border: 2px solid var(--parchment-edge);
            border-radius: 10px;
        }
        
        .age-section h4 {
            font-size: 14px;
            font-weight: 700;
            color: var(--ink);
            margin: 0 0 12px 0;
        }
        
        .activity-checklist {
            list-style: none;
            padding: 0;
            margin: 0;
        }
        
        .activity-checklist li {
            font-size: 13px;
            color: var(--ink);
            margin-bottom: 8px;
            padding-left: 4px;
        }
        
        .seedling-identity-card {
            padding: 20px;
            background: linear-gradient(135deg, rgba(107,123,76,0.15) 0%, white 100%);
            border: 2px solid var(--olive);
            border-radius: 10px;
            text-align: center;
            margin-top: 24px;
        }
        
        .identity-icon {
            font-size: 36px;
            margin-bottom: 12px;
        }
        
        .seedling-identity-card h4 {
            font-size: 18px;
            font-weight: 700;
            color: var(--olive);
            margin: 0 0 10px 0;
        }
        
        .seedling-identity-card p {
            font-size: 14px;
            font-style: italic;
            color: var(--ink);
            margin: 0;
        }
        
        /* ═══════════════════════════════════════════════════════════════ */
        /* ONE-ROOM LESSON LIBRARY                                         */
        /* ═══════════════════════════════════════════════════════════════ */
        
        /* Lesson Cards Grid */
        .lesson-library-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
            gap: 20px;
            margin-top: 24px;
        }
        
        .lesson-card {
            background: white;
            border: 2px solid var(--parchment-edge);
            border-radius: 12px;
            padding: 20px;
            transition: all 0.3s;
            cursor: pointer;
        }
        
        .lesson-card:hover {
            transform: translateY(-4px);
            box-shadow: 0 6px 20px rgba(0,0,0,0.1);
            border-color: var(--thread);
        }
        
        .lesson-card-header {
            display: flex;
            align-items: center;
            gap: 12px;
            margin-bottom: 16px;
        }
        
        .lesson-icon {
            font-size: 36px;
            flex-shrink: 0;
        }
        
        .lesson-card-header h3 {
            font-family: var(--font-display);
            font-size: 20px;
            font-weight: 700;
            color: var(--ink);
            margin: 0;
        }
        
        .lesson-meta {
            display: flex;
            gap: 12px;
            margin-bottom: 12px;
            flex-wrap: wrap;
        }
        
        .lesson-badge {
            padding: 4px 12px;
            background: var(--thread-faint);
            color: var(--thread);
            border-radius: 12px;
            font-size: 11px;
            font-weight: 600;
            text-transform: uppercase;
        }
        
        .lesson-description {
            font-size: 14px;
            color: var(--ink-soft);
            line-height: 1.6;
            margin-bottom: 16px;
        }
        
        .lesson-card-footer {
            display: flex;
            gap: 8px;
            padding-top: 16px;
            border-top: 1px solid var(--parchment-edge);
        }
        
        .btn-lesson {
            flex: 1;
            padding: 10px 16px;
            background: var(--thread);
            color: white;
            border: none;
            border-radius: 6px;
            font-weight: 600;
            font-size: 13px;
            cursor: pointer;
            transition: all 0.2s;
        }
        
        .btn-lesson:hover {
            background: var(--thread-deep);
            transform: scale(1.02);
        }
        
        .btn-one-room {
            padding: 10px 16px;
            background: white;
            color: var(--thread);
            border: 2px solid var(--thread);
            border-radius: 6px;
            font-weight: 600;
            font-size: 13px;
            cursor: pointer;
            transition: all 0.2s;
            white-space: nowrap;
        }
        
        .btn-one-room:hover {
            background: var(--thread);
            color: white;
        }
        
        /* ═══════════════════════════════════════════════════════════════ */
        /* ONE-ROOM MODAL VIEW                                             */
        /* ═══════════════════════════════════════════════════════════════ */
        
        .one-room-modal {
            position: fixed;
            inset: 0;
            background: rgba(0,0,0,0.85);
            z-index: 3000;
            display: none;
            align-items: center;
            justify-content: center;
            padding: 20px;
            opacity: 0;
            transition: opacity 0.3s ease;
            overflow-y: auto;
        }
        
        .one-room-modal.open {
            display: flex;
            opacity: 1;
        }
        
        .one-room-container {
            background: var(--parchment);
            border-radius: 16px;
            max-width: 1600px;
            width: 100%;
            max-height: 90vh;
            overflow-y: auto;
            box-shadow: 0 8px 32px rgba(0,0,0,0.3);
        }
        
        .one-room-header {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            padding: 24px;
            border-bottom: 3px solid var(--thread);
            background: linear-gradient(135deg, var(--thread-faint) 0%, white 100%);
            position: sticky;
            top: 0;
            z-index: 10;
        }
        
        .one-room-header h2 {
            font-family: var(--font-display);
            font-size: 28px;
            font-weight: 700;
            color: var(--ink);
            margin: 0 0 6px 0;
        }
        
        .one-room-header p {
            font-size: 14px;
            color: var(--ink-soft);
            margin: 0;
        }
        
        .close-one-room {
            background: var(--surface);
            border: 2px solid var(--parchment-edge);
            border-radius: 50%;
            width: 40px;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 24px;
            cursor: pointer;
            transition: all 0.2s;
            color: var(--ink);
            flex-shrink: 0;
        }
        
        .close-one-room:hover {
            background: var(--ink);
            color: white;
            transform: rotate(90deg);
        }
        
        .one-room-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
            gap: 16px;
            padding: 24px;
        }
        
        .one-room-column {
            background: white;
            border-radius: 12px;
            overflow: hidden;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        }
        
        .column-header {
            padding: 16px;
            display: flex;
            align-items: center;
            gap: 12px;
            border-bottom: 2px solid var(--parchment-edge);
        }
        
        .mighty-oaks-col .column-header {
            background: linear-gradient(135deg, rgba(74,124,89,0.2) 0%, rgba(143,188,143,0.1) 100%);
        }
        
        .strong-shoots-col .column-header {
            background: linear-gradient(135deg, rgba(107,123,76,0.2) 0%, rgba(107,123,76,0.1) 100%);
        }
        
        .saplings-col .column-header {
            background: linear-gradient(135deg, rgba(139,163,168,0.2) 0%, rgba(139,163,168,0.1) 100%);
        }
        
        .seedlings-col .column-header {
            background: linear-gradient(135deg, rgba(184,134,11,0.2) 0%, rgba(212,165,116,0.1) 100%);
        }
        
        .column-icon {
            font-size: 32px;
        }
        
        .column-header h3 {
            font-size: 18px;
            font-weight: 700;
            color: var(--ink);
            margin: 0;
        }
        
        .column-content {
            padding: 20px;
            font-size: 14px;
            line-height: 1.6;
            color: var(--ink);
        }
        
        .column-content h4 {
            font-size: 16px;
            font-weight: 700;
            color: var(--thread);
            margin: 0 0 12px 0;
        }
        
        .column-content h5 {
            font-size: 14px;
            font-weight: 700;
            color: var(--ink);
            margin: 16px 0 8px 0;
        }
        
        .column-content ul {
            margin: 8px 0;
            padding-left: 24px;
        }
        
        .column-content li {
            margin-bottom: 6px;
        }
        
        .column-content p {
            margin: 0 0 12px 0;
        }
        
        .reflection-box {
            margin-top: 16px;
            padding: 14px;
            background: var(--thread-faint);
            border-left: 4px solid var(--thread);
            border-radius: 6px;
            font-style: italic;
        }
        
        .reflection-box strong {
            font-style: normal;
            color: var(--thread);
        }
        
        .one-room-footer {
            padding: 24px;
            background: var(--parchment-deep);
            border-top: 2px solid var(--thread);
        }
        
        .family-section {
            margin-bottom: 20px;
        }
        
        .family-section:last-child {
            margin-bottom: 0;
        }
        
        .family-section h4 {
            font-size: 16px;
            font-weight: 700;
            color: var(--thread);
            margin: 0 0 10px 0;
        }
        
        .family-section p {
            font-size: 14px;
            color: var(--ink);
            margin: 0;
        }
        
        .family-section ul {
            margin: 8px 0;
            padding-left: 24px;
        }
        
        .family-section li {
            margin-bottom: 6px;
            font-size: 14px;
            color: var(--ink);
        }
        
        @media (max-width: 1200px) {
            .one-room-grid {
                grid-template-columns: repeat(2, 1fr);
            }
        }
        
        @media (max-width: 768px) {
            .one-room-grid {
                grid-template-columns: 1fr;
            }
            
            .lesson-library-grid {
                grid-template-columns: 1fr;
            }
        }
        
        /* Responsive Design */
        @media (max-width: 768px) {
            .academy-tabs {
                flex-wrap: nowrap;
                overflow-x: auto;
                -webkit-overflow-scrolling: touch;
            }
            
            .learning-cards-grid {
                grid-template-columns: 1fr;
            }
            
            .profile-sections {
                grid-template-columns: 1fr;
            }
        }

        /* Interactive lab checklist */
        .lab-checklist { display: flex; flex-direction: column; gap: var(--space-xs); }
        .lab-check-item { display: flex; align-items: center; gap: var(--space-sm); padding: var(--space-xs) var(--space-sm); border: 1px solid var(--parchment-dark); border-radius: 6px; cursor: pointer; }
        .lab-check-item.completed { background: var(--olive-soft); color: white; text-decoration: line-through; }

        /* Bible expanded panel */
        .bible-expanded-panel { position: fixed; top: 0; right: 0; height: 100%; width: 60%; max-width: 700px; background: var(--parchment); border-left: 1px solid var(--parchment-dark); box-shadow: -4px 0 12px rgba(0,0,0,0.2); z-index: 1000; transform: translateX(100%); transition: transform 0.3s var(--ease-gentle); overflow-y: auto; }
        .bible-expanded-panel.open { transform: translateX(0); }
        .bible-expanded-header { display: flex; align-items: center; justify-content: space-between; padding: var(--space-md); border-bottom: 1px solid var(--parchment-dark); }
        .bible-expanded-title { font-family: var(--font-display); font-size: 1.5rem; }
        .bible-expanded-close { background: none; border: none; font-size: 1.4rem; cursor: pointer; color: var(--ink-soft); }
        .bible-expanded-content { padding: var(--space-md); line-height: 1.6; }

        /* Rhythm Progress */
        .rhythm-progress { display: flex; justify-content: center; align-items: center; gap: var(--space-md); margin: var(--space-xl) 0; padding: var(--space-lg); background: var(--surface); border-radius: 16px; box-shadow: var(--shadow-sm); flex-wrap: wrap; }
        .progress-step { display: flex; flex-direction: column; align-items: center; gap: var(--space-xs); cursor: pointer; }
        .step-circle { width: 55px; height: 55px; border-radius: 50%; border: 3px solid var(--ink-faint); display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: 1.2rem; background: var(--surface); transition: all 0.3s; }
        .progress-step[data-step="behold"] .step-circle { border-color: var(--sanctuary); color: var(--sanctuary); }
        .progress-step[data-step="surrender"] .step-circle { border-color: var(--clay-soft); color: var(--clay); }
        .progress-step[data-step="receive"] .step-circle { border-color: var(--gold); color: var(--gold); }
        .progress-step[data-step="walk"] .step-circle { border-color: var(--olive); color: var(--olive); }
        .progress-step.active .step-circle { transform: scale(1.1); box-shadow: 0 4px 20px rgba(0,0,0,0.15); }
        .progress-step.completed .step-circle { background: var(--olive); border-color: var(--olive); color: white; }
        .step-label { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-soft); }
        .progress-connector { width: 40px; height: 3px; background: var(--parchment-dark); border-radius: 2px; }
        .rhythm-card { background: var(--surface); border-radius: 16px; padding: var(--space-xl); box-shadow: var(--shadow-md); max-width: 700px; margin: 0 auto var(--space-xl); }
        .rhythm-card h2 { font-family: var(--font-display); font-size: 1.8rem; margin-bottom: var(--space-md); }
        .rhythm-card p { color: var(--ink-soft); margin-bottom: var(--space-md); line-height: 1.8; }
        .reflection-input { width: 100%; min-height: 100px; padding: var(--space-md); border: 1px solid var(--parchment-dark); border-radius: 8px; font-family: var(--font-body); font-size: 1rem; resize: vertical; margin-top: var(--space-md); }
        .reflection-input:focus { outline: none; border-color: var(--gold); }

        /* Thread Compass */
        .compass-visual { display: flex; justify-content: center; margin: var(--space-xl) 0; }
        .compass-wheel { width: 250px; height: 250px; border-radius: 50%; background: conic-gradient(var(--sanctuary) 0deg 51deg, var(--compass) 51deg 102deg, var(--family) 102deg 153deg, var(--projects) 153deg 204deg, var(--repair) 204deg 255deg, var(--fellowship) 255deg 306deg, var(--gold) 306deg 360deg); display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-md); }
        .compass-center { width: 100px; height: 100px; border-radius: 50%; background: var(--surface); display: flex; align-items: center; justify-content: center; flex-direction: column; box-shadow: var(--shadow-sm); }
        .compass-center-icon { font-size: 1.8rem; }
        .compass-center-text { font-family: var(--font-display); font-size: 0.8rem; color: var(--ink-soft); }
        .thread-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--space-md); }
        .thread-card { background: var(--surface); border-radius: 12px; padding: var(--space-md); border: 2px solid var(--parchment-dark); cursor: pointer; transition: all 0.2s; }
        .thread-card:hover { border-color: var(--gold); transform: translateY(-2px); }
        .thread-card.active { border-color: var(--olive); background: rgba(107, 123, 76, 0.05); }
        .thread-name { font-family: var(--font-display); font-size: 1.1rem; margin-bottom: var(--space-xs); }
        .thread-status { font-size: 0.8rem; color: var(--ink-faint); }
        .thread-progress { height: 4px; background: var(--parchment-deep); border-radius: 2px; margin-top: var(--space-sm); overflow: hidden; }
        .thread-progress-bar { height: 100%; background: var(--olive); border-radius: 2px; }

        /* Axiom Banner - Four Core Axioms */
        .axiom-banner {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: var(--space-md);
            margin-bottom: var(--space-xl);
            padding: var(--space-lg);
            background: linear-gradient(135deg, var(--gold-faint) 0%, var(--parchment) 100%);
            border-radius: 16px;
            border: 2px solid var(--gold-soft);
        }

        .axiom-item {
            background: var(--surface);
            border-radius: 12px;
            padding: var(--space-lg);
            text-align: center;
            border: 2px solid var(--parchment-dark);
            transition: all 0.3s ease;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        }

        .axiom-item:hover {
            transform: translateY(-4px);
            border-color: var(--gold);
            box-shadow: 0 8px 16px rgba(212, 165, 116, 0.3);
        }

        .axiom-icon {
            font-size: 2.5rem;
            margin-bottom: var(--space-sm);
        }

        .axiom-name {
            font-family: var(--font-display);
            font-size: 1.2rem;
            font-weight: 700;
            color: var(--ink);
            margin-bottom: var(--space-xs);
            letter-spacing: 0.05em;
        }

        .axiom-desc {
            font-size: 0.85rem;
            color: var(--ink-soft);
            line-height: 1.4;
        }

        /* Thread Layer Sections - Complete Card Styling */
        .thread-layer-section {
            background: linear-gradient(135deg, var(--surface) 0%, var(--parchment) 100%);
            border-radius: 16px;
            padding: var(--space-xl);
            margin-bottom: var(--space-xl);
            border: 2px solid var(--parchment-dark);
            box-shadow: 0 4px 16px rgba(0,0,0,0.08);
        }

        .layer-header {
            margin-bottom: var(--space-lg);
            padding-bottom: var(--space-md);
            border-bottom: 2px solid var(--parchment-dark);
        }

        .layer-header h4 {
            font-family: var(--font-display);
            font-size: 1.5rem;
            margin: var(--space-sm) 0;
            color: var(--ink);
        }

        .layer-tagline {
            font-size: 0.9rem;
            color: var(--ink-soft);
            font-style: italic;
            margin: var(--space-xs) 0;
        }

        .layer-description {
            color: var(--ink-soft);
            line-height: 1.6;
            margin-bottom: var(--space-lg);
            font-size: 0.95rem;
        }

        .layer-badge {
            display: inline-block;
            background: linear-gradient(135deg, var(--gold) 0%, var(--gold-soft) 100%);
            color: white;
            padding: var(--space-xs) var(--space-md);
            border-radius: 100px;
            font-size: 0.85rem;
            font-weight: 600;
            margin-bottom: var(--space-sm);
            box-shadow: 0 2px 8px rgba(212, 165, 116, 0.3);
        }

        .thread-list {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
            gap: var(--space-md);
            margin-top: var(--space-lg);
        }

        .thread-item {
            background: var(--parchment);
            border: 2px solid var(--parchment-dark);
            border-radius: 12px;
            padding: var(--space-md);
            display: flex;
            gap: var(--space-md);
            cursor: pointer;
            transition: all 0.3s ease;
            box-shadow: 0 2px 8px rgba(0,0,0,0.05);
        }

        .thread-item:hover {
            transform: translateY(-4px);
            border-color: var(--gold);
            box-shadow: 0 8px 16px rgba(212, 165, 116, 0.3);
            background: linear-gradient(135deg, var(--parchment) 0%, var(--gold-faint) 100%);
        }

        .thread-num {
            width: 40px;
            height: 40px;
            background: linear-gradient(135deg, var(--gold) 0%, var(--gold-soft) 100%);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-family: var(--font-display);
            font-size: 1.2rem;
            color: white;
            font-weight: 700;
            flex-shrink: 0;
            box-shadow: 0 2px 8px rgba(212, 165, 116, 0.4);
        }

        .thread-content {
            flex: 1;
        }

        .thread-name {
            font-family: var(--font-display);
            font-size: 1.1rem;
            font-weight: 600;
            color: var(--ink);
            margin-bottom: var(--space-xs);
        }

        .thread-desc {
            font-size: 0.85rem;
            color: var(--ink-soft);
            line-height: 1.5;
        }

        /* ═══════════════════════════════════════════════════════════════ */
        /* CA LESSON SECTIONS - Covenantal Agape Theology Content */
        /* ═══════════════════════════════════════════════════════════════ */

        .ca-lesson-section {
            background: linear-gradient(135deg, var(--surface) 0%, var(--parchment) 100%);
            border-radius: 20px;
            padding: var(--space-2xl);
            margin-bottom: var(--space-2xl);
            border: 3px solid var(--parchment-dark);
            box-shadow: 0 6px 24px rgba(0,0,0,0.12);
        }

        .ca-lesson-header {
            text-align: center;
            margin-bottom: var(--space-2xl);
            padding-bottom: var(--space-xl);
            border-bottom: 3px solid var(--gold);
        }

        .ca-lesson-badge {
            display: inline-block;
            padding: var(--space-sm) var(--space-xl);
            background: linear-gradient(135deg, var(--gold) 0%, var(--gold-soft) 100%);
            color: white;
            border-radius: 100px;
            font-size: 0.9rem;
            font-weight: 700;
            letter-spacing: 0.05em;
            margin-bottom: var(--space-md);
            box-shadow: 0 4px 12px rgba(212, 165, 116, 0.4);
        }

        .ca-lesson-header h3 {
            font-family: var(--font-display);
            font-size: 2rem;
            color: var(--ink);
            margin: var(--space-md) 0;
            line-height: 1.3;
        }

        .ca-lesson-subtitle {
            font-size: 1.1rem;
            color: var(--ink-soft);
            font-style: italic;
            margin: var(--space-sm) 0;
        }

        .ca-lesson-content {
            max-width: 900px;
            margin: 0 auto;
        }

        /* Big Idea Boxes */
        .ca-big-idea {
            display: flex;
            gap: var(--space-lg);
            align-items: flex-start;
            background: linear-gradient(135deg, var(--sanctuary) 0%, var(--olive-soft) 100%);
            border-radius: 16px;
            padding: var(--space-xl);
            margin-bottom: var(--space-2xl);
            border: 3px solid var(--olive);
            box-shadow: 0 4px 16px rgba(107, 123, 76, 0.25);
        }

        .big-idea-icon {
            font-size: 3rem;
            flex-shrink: 0;
            line-height: 1;
        }

        .big-idea-text {
            color: white;
            font-size: 1.05rem;
            line-height: 1.7;
        }

        .big-idea-text strong {
            font-weight: 700;
            font-size: 1.15rem;
        }

        /* Axioms Section */
        .ca-axioms-section {
            margin-bottom: var(--space-2xl);
        }

        .ca-axioms-section h4 {
            font-family: var(--font-display);
            font-size: 1.6rem;
            color: var(--ink);
            margin-bottom: var(--space-xl);
            text-align: center;
        }

        /* Individual Axiom Cards */
        .axiom-card {
            background: white;
            border-radius: 16px;
            padding: var(--space-xl);
            margin-bottom: var(--space-xl);
            border: 3px solid var(--parchment-dark);
            box-shadow: 0 4px 16px rgba(0,0,0,0.08);
            transition: all 0.3s ease;
        }

        .axiom-card:hover {
            transform: translateY(-4px);
            box-shadow: 0 8px 24px rgba(0,0,0,0.15);
        }

        /* Axiom-specific colors */
        .axiom-card.axiom-agape {
            border-color: var(--gold);
            background: linear-gradient(135deg, white 0%, var(--gold-faint) 100%);
        }

        .axiom-card.axiom-echad {
            border-color: var(--sanctuary);
            background: linear-gradient(135deg, white 0%, rgba(139, 163, 168, 0.1) 100%);
        }

        .axiom-card.axiom-kenosis {
            border-color: var(--family);
            background: linear-gradient(135deg, white 0%, rgba(107, 123, 76, 0.1) 100%);
        }

        .axiom-card.axiom-truth {
            border-color: var(--thread);
            background: linear-gradient(135deg, white 0%, var(--thread-faint) 100%);
        }

        .axiom-header {
            display: flex;
            align-items: center;
            gap: var(--space-md);
            margin-bottom: var(--space-md);
            padding-bottom: var(--space-md);
            border-bottom: 2px solid var(--parchment-dark);
        }

        .axiom-number {
            width: 50px;
            height: 50px;
            background: var(--gold);
            color: white;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-family: var(--font-display);
            font-size: 1.5rem;
            font-weight: 700;
            flex-shrink: 0;
            box-shadow: 0 4px 12px rgba(212, 165, 116, 0.4);
        }

        .axiom-agape .axiom-number {
            background: var(--gold);
        }

        .axiom-echad .axiom-number {
            background: var(--sanctuary);
        }

        .axiom-kenosis .axiom-number {
            background: var(--family);
        }

        .axiom-truth .axiom-number {
            background: var(--thread);
        }

        .axiom-title {
            font-family: var(--font-display);
            font-size: 1.4rem;
            font-weight: 700;
            color: var(--ink);
            line-height: 1.2;
        }

        .axiom-formula {
            background: var(--parchment-deep);
            padding: var(--space-md);
            border-radius: 8px;
            font-family: 'Courier New', monospace;
            font-size: 1rem;
            color: var(--ink);
            margin-bottom: var(--space-lg);
            border-left: 4px solid var(--gold);
            font-weight: 600;
        }

        .axiom-agape .axiom-formula {
            border-left-color: var(--gold);
        }

        .axiom-echad .axiom-formula {
            border-left-color: var(--sanctuary);
        }

        .axiom-kenosis .axiom-formula {
            border-left-color: var(--family);
        }

        .axiom-truth .axiom-formula {
            border-left-color: var(--thread);
        }

        .axiom-content p {
            color: var(--ink-soft);
            line-height: 1.8;
            margin-bottom: var(--space-md);
            font-size: 0.95rem;
        }

        .axiom-content strong {
            color: var(--ink);
            font-weight: 700;
        }

        /* Concept Blocks */
        .ca-concept-block {
            background: var(--parchment);
            border-radius: 16px;
            padding: var(--space-xl);
            margin-bottom: var(--space-xl);
            border: 2px solid var(--parchment-dark);
        }

        .ca-concept-block h4 {
            font-family: var(--font-display);
            font-size: 1.4rem;
            color: var(--ink);
            margin-bottom: var(--space-lg);
        }

        .ca-concept-block p {
            color: var(--ink-soft);
            line-height: 1.7;
            margin-bottom: var(--space-md);
        }

        /* Unity Pattern Flow */
        .unity-pattern-flow {
            background: white;
            border-radius: 12px;
            padding: var(--space-lg);
            margin-top: var(--space-lg);
            border: 2px solid var(--parchment-dark);
        }

        .unity-layer {
            background: linear-gradient(135deg, var(--surface) 0%, var(--parchment) 100%);
            padding: var(--space-md) var(--space-lg);
            border-radius: 8px;
            border-left: 4px solid var(--olive);
            margin: var(--space-sm) 0;
            font-size: 0.95rem;
            line-height: 1.6;
        }

        .unity-layer strong {
            color: var(--olive);
            font-weight: 700;
        }

        .unity-arrow {
            text-align: center;
            font-size: 1.5rem;
            color: var(--olive);
            margin: var(--space-xs) 0;
        }

        /* Pattern Warning Box */
        .pattern-warning {
            background: linear-gradient(135deg, rgba(255, 193, 7, 0.15) 0%, rgba(255, 152, 0, 0.1) 100%);
            border-radius: 12px;
            padding: var(--space-lg);
            margin-top: var(--space-lg);
            border: 3px solid rgba(255, 193, 7, 0.5);
            border-left-width: 6px;
        }

        .pattern-warning strong {
            color: var(--ink);
            font-weight: 700;
            font-size: 1.05rem;
        }

        /* Linguistic Foundations Block */
        .ca-linguistic-block {
            background: linear-gradient(135deg, var(--surface) 0%, var(--parchment) 100%);
            border-radius: 16px;
            padding: var(--space-xl);
            margin-bottom: var(--space-2xl);
            border: 3px solid var(--parchment-dark);
            box-shadow: 0 4px 16px rgba(0,0,0,0.08);
        }

        .ca-linguistic-block h4 {
            font-family: var(--font-display);
            font-size: 1.5rem;
            color: var(--ink);
            margin: 0 0 var(--space-lg) 0;
            padding-bottom: var(--space-sm);
            border-bottom: 2px solid var(--parchment-dark);
        }

        .linguistic-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: var(--space-lg);
            margin-top: var(--space-lg);
        }

        .linguistic-item {
            background: white;
            border-radius: 12px;
            padding: var(--space-lg);
            border: 2px solid var(--parchment-dark);
            box-shadow: 0 2px 8px rgba(0,0,0,0.05);
            transition: all 0.3s ease;
        }

        .linguistic-item:hover {
            transform: translateY(-4px);
            box-shadow: 0 6px 16px rgba(0,0,0,0.12);
        }

        .hebrew-term,
        .greek-term {
            font-family: var(--font-display);
            font-size: 1.6rem;
            color: var(--gold);
            margin-bottom: var(--space-md);
            font-weight: 700;
            padding-bottom: var(--space-sm);
            border-bottom: 2px solid var(--gold-faint);
        }

        .term-meaning {
            font-size: 0.95rem;
            color: var(--ink-soft);
            line-height: 1.7;
        }

        /* Application Block */
        .ca-application-block {
            background: linear-gradient(135deg, var(--olive-soft) 0%, var(--family) 100%);
            border-radius: 16px;
            padding: var(--space-2xl);
            margin-bottom: var(--space-2xl);
            border: 3px solid var(--olive);
            box-shadow: 0 4px 16px rgba(107, 123, 76, 0.25);
        }

        .ca-application-block h4 {
            font-family: var(--font-display);
            font-size: 1.6rem;
            color: white;
            margin: 0 0 var(--space-xl) 0;
            text-align: center;
        }

        .application-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: var(--space-lg);
        }

        .application-item {
            background: white;
            border-radius: 12px;
            padding: var(--space-xl);
            border: 2px solid var(--parchment-dark);
            box-shadow: 0 2px 8px rgba(0,0,0,0.05);
        }

        .application-item strong {
            display: block;
            font-family: var(--font-display);
            font-size: 1.2rem;
            color: var(--ink);
            margin-bottom: var(--space-md);
            padding-bottom: var(--space-sm);
            border-bottom: 2px solid var(--gold-faint);
        }

        .application-item p {
            font-size: 0.95rem;
            color: var(--ink-soft);
            line-height: 1.7;
            margin: 0;
        }

        /* Verse Block */
        .ca-verse-block {
            display: flex;
            gap: var(--space-xl);
            align-items: center;
            background: linear-gradient(135deg, var(--sanctuary) 0%, var(--compass) 100%);
            border-radius: 16px;
            padding: var(--space-2xl);
            margin: var(--space-2xl) 0;
            border: 3px solid var(--sanctuary);
            box-shadow: 0 6px 24px rgba(139, 163, 168, 0.3);
        }

        .verse-icon {
            font-size: 4rem;
            flex-shrink: 0;
            line-height: 1;
        }

        .verse-content {
            flex: 1;
        }

        .verse-text {
            font-family: var(--font-display);
            font-size: 1.3rem;
            color: white;
            font-style: italic;
            line-height: 1.7;
            margin: 0 0 var(--space-md) 0;
        }

        .verse-ref {
            font-size: 1.05rem;
            color: rgba(255, 255, 255, 0.9);
            font-weight: 600;
        }

        /* Study Questions */
        .ca-study-questions {
            background: linear-gradient(135deg, var(--surface) 0%, var(--parchment) 100%);
            border-radius: 16px;
            padding: var(--space-2xl);
            margin-bottom: var(--space-2xl);
            border: 3px solid var(--parchment-dark);
            box-shadow: 0 4px 16px rgba(0,0,0,0.08);
        }

        .ca-study-questions h4 {
            font-family: var(--font-display);
            font-size: 1.5rem;
            color: var(--ink);
            margin: 0 0 var(--space-xl) 0;
            padding-bottom: var(--space-sm);
            border-bottom: 2px solid var(--parchment-dark);
        }

        .ca-study-questions ol {
            counter-reset: question-counter;
            list-style: none;
            padding: 0;
            margin: 0;
        }

        .ca-study-questions li {
            counter-increment: question-counter;
            background: white;
            border-radius: 12px;
            padding: var(--space-lg);
            margin-bottom: var(--space-md);
            border-left: 4px solid var(--gold);
            position: relative;
            padding-left: calc(var(--space-lg) + 40px);
            box-shadow: 0 2px 8px rgba(0,0,0,0.05);
            font-size: 1rem;
            color: var(--ink-soft);
            line-height: 1.7;
        }

        .ca-study-questions li::before {
            content: counter(question-counter);
            position: absolute;
            left: var(--space-lg);
            top: var(--space-lg);
            width: 32px;
            height: 32px;
            background: linear-gradient(135deg, var(--gold) 0%, var(--gold-soft) 100%);
            color: white;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-family: var(--font-display);
            font-weight: 700;
            font-size: 0.95rem;
            box-shadow: 0 2px 8px rgba(212, 165, 116, 0.4);
        }

        /* Highlighted Concept Block */
        .ca-concept-block.highlight {
            background: linear-gradient(135deg, var(--flame) 0%, rgba(194, 73, 63, 0.85) 100%);
            border-color: var(--flame);
        }

        .ca-concept-block.highlight h4,
        .ca-concept-block.highlight p,
        .ca-concept-block.highlight strong {
            color: white;
        }

        .concept-quote {
            background: rgba(255, 255, 255, 0.2);
            border-left: 4px solid white;
            padding: var(--space-lg);
            margin: var(--space-lg) 0;
            font-family: var(--font-display);
            font-size: 1.15rem;
            font-style: italic;
            color: white;
            border-radius: 8px;
        }

        /* Contrast Table - Orphan vs Beloved */
        .contrast-table {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: var(--space-lg);
            margin-top: var(--space-lg);
        }

        .contrast-column {
            background: white;
            border-radius: 12px;
            padding: var(--space-xl);
            border: 3px solid var(--parchment-dark);
            box-shadow: 0 2px 8px rgba(0,0,0,0.05);
        }

        .contrast-column.orphan {
            border-color: rgba(194, 73, 63, 0.5);
        }

        .contrast-column.beloved {
            border-color: var(--olive);
        }

        .column-header {
            font-family: var(--font-display);
            font-size: 1.3rem;
            font-weight: 700;
            margin-bottom: var(--space-lg);
            padding-bottom: var(--space-sm);
            border-bottom: 3px solid currentColor;
        }

        .contrast-column.orphan .column-header {
            color: var(--flame);
        }

        .contrast-column.beloved .column-header {
            color: var(--olive);
        }

        .contrast-column ul {
            list-style: none;
            padding: 0;
            margin: 0;
        }

        .contrast-column li {
            padding: var(--space-md);
            margin-bottom: var(--space-sm);
            background: var(--parchment);
            border-radius: 8px;
            font-size: 0.95rem;
            color: var(--ink-soft);
            line-height: 1.5;
        }

        /* Framework Block - 5 B's */
        .ca-framework-block {
            background: linear-gradient(135deg, var(--surface) 0%, var(--parchment) 100%);
            border-radius: 16px;
            padding: var(--space-2xl);
            margin-bottom: var(--space-2xl);
            border: 3px solid var(--parchment-dark);
            box-shadow: 0 4px 16px rgba(0,0,0,0.08);
        }

        .ca-framework-block h4 {
            font-family: var(--font-display);
            font-size: 1.5rem;
            color: var(--ink);
            margin: 0 0 var(--space-md) 0;
            text-align: center;
        }

        .ca-framework-block > p {
            text-align: center;
            color: var(--ink-soft);
            margin-bottom: var(--space-xl);
            font-size: 1.05rem;
        }

        .five-bs-flow {
            display: flex;
            align-items: center;
            justify-content: center;
            flex-wrap: wrap;
            gap: var(--space-md);
            margin: var(--space-xl) 0;
            padding: var(--space-xl);
            background: white;
            border-radius: 12px;
            border: 2px solid var(--parchment-dark);
        }

        .b-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: var(--space-xs);
            text-align: center;
            min-width: 100px;
        }

        .b-letter {
            width: 50px;
            height: 50px;
            background: linear-gradient(135deg, var(--gold) 0%, var(--gold-soft) 100%);
            color: white;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-family: var(--font-display);
            font-size: 1.5rem;
            font-weight: 700;
            box-shadow: 0 4px 12px rgba(212, 165, 116, 0.4);
        }

        .b-word {
            font-family: var(--font-display);
            font-size: 1.1rem;
            font-weight: 700;
            color: var(--ink);
        }

        .b-desc {
            font-size: 0.85rem;
            color: var(--ink-soft);
            max-width: 100px;
            line-height: 1.4;
        }

        .b-arrow {
            font-size: 2rem;
            color: var(--gold);
            font-weight: 300;
        }

        .framework-contrast {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: var(--space-lg);
            margin-top: var(--space-xl);
            padding: var(--space-lg);
            background: var(--parchment-deep);
            border-radius: 12px;
            flex-wrap: wrap;
        }

        .framework-contrast .wrong {
            padding: var(--space-md) var(--space-lg);
            background: rgba(194, 73, 63, 0.15);
            border: 2px solid var(--flame);
            border-radius: 100px;
            color: var(--flame);
            font-weight: 600;
            text-decoration: line-through;
        }

        .framework-contrast .right {
            padding: var(--space-md) var(--space-lg);
            background: rgba(107, 123, 76, 0.15);
            border: 2px solid var(--olive);
            border-radius: 100px;
            color: var(--olive);
            font-weight: 700;
        }

        /* Identity Grid Block */
        .ca-identity-grid-block {
            background: linear-gradient(135deg, var(--surface) 0%, var(--parchment) 100%);
            border-radius: 16px;
            padding: var(--space-2xl);
            margin-bottom: var(--space-2xl);
            border: 3px solid var(--parchment-dark);
            box-shadow: 0 4px 16px rgba(0,0,0,0.08);
        }

        .ca-identity-grid-block h4 {
            font-family: var(--font-display);
            font-size: 1.5rem;
            color: var(--ink);
            margin: 0 0 var(--space-md) 0;
            text-align: center;
        }

        .ca-identity-grid-block > p {
            text-align: center;
            color: var(--ink-soft);
            margin-bottom: var(--space-xl);
            font-size: 1.05rem;
        }

        .identity-grid-three {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
            gap: var(--space-lg);
            margin-top: var(--space-lg);
        }

        .identity-column {
            background: white;
            border-radius: 12px;
            padding: var(--space-xl);
            border: 3px solid var(--parchment-dark);
            box-shadow: 0 2px 8px rgba(0,0,0,0.05);
        }

        .identity-column .column-title {
            font-family: var(--font-display);
            font-size: 1.2rem;
            font-weight: 700;
            color: var(--gold);
            margin-bottom: var(--space-lg);
            padding-bottom: var(--space-sm);
            border-bottom: 3px solid var(--gold);
            text-align: center;
        }

        .identity-column ul {
            list-style: none;
            padding: 0;
            margin: 0;
        }

        .identity-column li {
            padding: var(--space-sm) 0;
            font-size: 0.95rem;
            color: var(--ink-soft);
            position: relative;
            padding-left: 24px;
        }

        .identity-column li::before {
            content: "✓";
            position: absolute;
            left: 0;
            color: var(--olive);
            font-weight: 700;
        }

        /* Apologetics Block */
        .ca-apologetics-block {
            background: linear-gradient(135deg, var(--sanctuary) 0%, var(--compass) 100%);
            border-radius: 16px;
            padding: var(--space-2xl);
            margin-bottom: var(--space-2xl);
            border: 3px solid var(--sanctuary);
            box-shadow: 0 4px 16px rgba(139, 163, 168, 0.25);
        }

        .ca-apologetics-block h4 {
            font-family: var(--font-display);
            font-size: 1.5rem;
            color: white;
            margin: 0 0 var(--space-lg) 0;
        }

        .ca-apologetics-block p {
            color: white;
            font-size: 1.05rem;
            line-height: 1.7;
            margin-bottom: var(--space-lg);
        }

        .ca-apologetics-block ul {
            list-style: none;
            padding: 0;
            margin: 0;
        }

        .ca-apologetics-block li {
            background: rgba(255, 255, 255, 0.15);
            padding: var(--space-lg);
            margin-bottom: var(--space-md);
            border-radius: 12px;
            border-left: 4px solid white;
            color: white;
            line-height: 1.7;
        }

        .ca-apologetics-block strong {
            color: white;
            font-weight: 700;
            display: block;
            margin-bottom: var(--space-xs);
        }

        /* Journal Block */
        .ca-journal-block {
            background: linear-gradient(135deg, var(--surface) 0%, var(--parchment) 100%);
            border-radius: 16px;
            padding: var(--space-2xl);
            margin-bottom: var(--space-2xl);
            border: 3px solid var(--parchment-dark);
            box-shadow: 0 4px 16px rgba(0,0,0,0.08);
        }

        .ca-journal-block h4 {
            font-family: var(--font-display);
            font-size: 1.5rem;
            color: var(--ink);
            margin: 0 0 var(--space-xl) 0;
            padding-bottom: var(--space-sm);
            border-bottom: 2px solid var(--parchment-dark);
            text-align: center;
        }

        .ca-journal-block ol {
            counter-reset: journal-counter;
            list-style: none;
            padding: 0;
            margin: 0;
        }

        .ca-journal-block li {
            counter-increment: journal-counter;
            background: white;
            border-radius: 12px;
            padding: var(--space-lg);
            margin-bottom: var(--space-md);
            border-left: 4px solid var(--sanctuary);
            position: relative;
            padding-left: calc(var(--space-lg) + 40px);
            box-shadow: 0 2px 8px rgba(0,0,0,0.05);
            font-size: 1rem;
            color: var(--ink-soft);
            line-height: 1.7;
        }

        .ca-journal-block li::before {
            content: counter(journal-counter);
            position: absolute;
            left: var(--space-lg);
            top: var(--space-lg);
            width: 32px;
            height: 32px;
            background: linear-gradient(135deg, var(--sanctuary) 0%, var(--compass) 100%);
            color: white;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-family: var(--font-display);
            font-weight: 700;
            font-size: 0.95rem;
            box-shadow: 0 2px 8px rgba(139, 163, 168, 0.4);
        }

        /* Thread Compass Network - Interactive 35 Threads */
        .thread-node-group {
            cursor: pointer;
            transition: all 0.3s ease;
        }
        
        .thread-node-group circle {
            transition: all 0.3s ease;
        }
        
        .thread-node-group:hover circle {
            filter: brightness(1.3) drop-shadow(0 0 8px currentColor);
        }
        
        .thread-node-group.active circle {
            filter: brightness(1.5) drop-shadow(0 0 15px currentColor);
            stroke-width: 3 !important;
        }
        
        .thread-connection-line {
            transition: all 0.3s ease;
            stroke-dasharray: 5, 5;
        }
        
        .thread-connection-line.active {
            stroke-width: 2.5 !important;
            opacity: 0.9 !important;
            animation: threadPulse 1.5s ease-in-out infinite;
        }
        
        @keyframes threadPulse {
            0%, 100% { opacity: 0.9; }
            50% { opacity: 0.5; }
        }
        
        .thread-chip {
            display: inline-block;
            background: rgba(255, 255, 255, 0.1);
            padding: 0.4rem 0.8rem;
            margin: 0.3rem;
            border-radius: 8px;
            font-size: 0.85rem;
            cursor: pointer;
            transition: all 0.2s;
            border: 1px solid rgba(255, 255, 255, 0.2);
        }
        
        .thread-chip:hover {
            background: rgba(255, 255, 255, 0.2);
            transform: translateY(-2px);
        }
        
        /* Dark theme adjustments for Thread Network */
        body.dark-theme .thread-chip {
            background: rgba(255, 255, 255, 0.05);
        }
        
        body.dark-theme .thread-chip:hover {
            background: rgba(255, 255, 255, 0.15);
        }

        /* Family Room */
        .family-week { background: linear-gradient(135deg, var(--parchment) 0%, var(--gold-faint) 100%); border-radius: 16px; padding: var(--space-xl); margin-bottom: var(--space-xl); text-align: center; }
        .family-week-label { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.15em; color: var(--gold); margin-bottom: var(--space-sm); }
        .family-week-theme { font-family: var(--font-display); font-size: 1.8rem; margin-bottom: var(--space-sm); }
        .family-week-verse { font-family: var(--font-display); font-style: italic; color: var(--ink-soft); }
        .family-members { display: flex; justify-content: center; gap: var(--space-md); margin-top: var(--space-lg); flex-wrap: wrap; }
        .family-member { display: flex; flex-direction: column; align-items: center; gap: var(--space-xs); position: relative; }
        .family-member-avatar { width: 50px; height: 50px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; border: 2px solid var(--parchment-dark); box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
        .family-member-name { font-size: 0.8rem; color: var(--ink-soft); }
        .family-member:hover .tooltip { visibility: visible; }
        .tooltip { visibility: hidden; background: var(--ink); color: var(--parchment); padding: var(--space-xs); border-radius: 6px; position: absolute; top: -30px; white-space: nowrap; font-size: 0.75rem; }
        .age-tabs { display: flex; gap: var(--space-sm); margin-bottom: var(--space-lg); flex-wrap: wrap; }
        .age-tab { padding: var(--space-sm) var(--space-lg); background: var(--surface); border: 2px solid var(--parchment-dark); border-radius: 100px; font-family: var(--font-body); font-size: 0.85rem; cursor: pointer; transition: all 0.2s; }
        .age-tab:hover { border-color: var(--family); }
        .age-tab.active { background: var(--family); border-color: var(--family); color: white; }

        /* Projects */
        .project-categories { display: flex; gap: var(--space-sm); margin-bottom: var(--space-lg); flex-wrap: wrap; }
        .project-cat { padding: var(--space-xs) var(--space-md); background: var(--parchment); border-radius: 100px; font-size: 0.85rem; cursor: pointer; transition: all 0.2s; }
        .project-cat.active { background: var(--projects); color: white; }
        .project-card { background: var(--surface); border-radius: 16px; overflow: hidden; box-shadow: var(--shadow-sm); cursor: pointer; transition: all 0.3s; }
        .project-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
        .project-image { height: 120px; background: linear-gradient(135deg, var(--parchment) 0%, var(--projects) 100%); display: flex; align-items: center; justify-content: center; font-size: 2.5rem; }
        .project-info { padding: var(--space-md); }
        .project-title { font-family: var(--font-display); font-size: 1.1rem; margin-bottom: var(--space-xs); }
        .project-meta { font-size: 0.8rem; color: var(--ink-faint); }

        /* Repair */
        .repair-intro { text-align: center; max-width: 600px; margin: 0 auto var(--space-xl); }
        .repair-intro p { font-family: var(--font-display); font-size: 1.15rem; color: var(--ink-soft); line-height: 1.8; }
        .rupture-types { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: var(--space-md); max-width: 700px; margin: 0 auto; }
        .rupture-btn { padding: var(--space-lg); background: var(--surface); border: 2px solid var(--parchment-dark); border-radius: 16px; cursor: pointer; transition: all 0.2s; text-align: center; }
        .rupture-btn:hover { border-color: var(--repair); transform: translateY(-2px); }
        .rupture-btn.selected { border-color: var(--repair); background: rgba(196, 160, 96, 0.1); }
        .rupture-emoji { font-size: 2rem; margin-bottom: var(--space-sm); }
        .rupture-label { font-size: 0.9rem; }
        .repair-flow { background: var(--surface); border-radius: 16px; padding: var(--space-xl); max-width: 600px; margin: var(--space-xl) auto 0; display: none; }
        .repair-flow.active { display: block; }

        /* Fellowship */
        .post { background: var(--surface); border-radius: 16px; padding: var(--space-lg); margin-bottom: var(--space-md); box-shadow: var(--shadow-sm); }
        .post-header { display: flex; align-items: center; gap: var(--space-sm); margin-bottom: var(--space-md); }
        .post-avatar { width: 45px; height: 45px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: var(--font-display); color: white; }
        .post-author { font-weight: 600; }
        .post-time { font-size: 0.8rem; color: var(--ink-faint); }
        .post-content { line-height: 1.7; margin-bottom: var(--space-md); }
        .post-image { width: 100%; height: 180px; background: var(--parchment); border-radius: 12px; margin-bottom: var(--space-md); display: flex; align-items: center; justify-content: center; font-size: 3rem; }
        .post-actions { display: flex; gap: var(--space-md); }
        .post-action { display: flex; align-items: center; gap: var(--space-xs); font-size: 0.9rem; color: var(--ink-soft); cursor: pointer; }
        .post-action:hover { color: var(--gold); }
        .cohort-sidebar { background: var(--surface); border-radius: 16px; padding: var(--space-lg); box-shadow: var(--shadow-sm); }
        .cohort-item { display: flex; align-items: center; gap: var(--space-sm); padding: var(--space-sm) 0; border-bottom: 1px solid var(--parchment); cursor: pointer; }
        .cohort-item:last-child { border-bottom: none; }
        .cohort-icon { width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; }
        .cohort-name { flex: 1; font-weight: 500; }
        .cohort-count { font-size: 0.8rem; color: var(--ink-faint); }

        /* Marketplace */
        .market-filters { display: flex; gap: var(--space-sm); margin-bottom: var(--space-lg); flex-wrap: wrap; }
        .market-filter { padding: var(--space-xs) var(--space-md); background: var(--parchment); border-radius: 100px; font-size: 0.85rem; cursor: pointer; }
        .market-filter.active { background: var(--marketplace); color: white; }
        .listing-card { background: var(--surface); border-radius: 16px; overflow: hidden; box-shadow: var(--shadow-sm); }
        .listing-image { height: 120px; background: var(--parchment); display: flex; align-items: center; justify-content: center; font-size: 2.5rem; }
        .listing-info { padding: var(--space-md); }
        .listing-title { font-family: var(--font-display); font-size: 1.1rem; margin-bottom: var(--space-xs); }
        .listing-type { display: inline-block; padding: 2px 8px; background: var(--gold-faint); color: var(--gold); border-radius: 100px; font-size: 0.75rem; margin-bottom: var(--space-sm); }
        .listing-user { font-size: 0.85rem; color: var(--ink-soft); }

        /* Stream */
        .stream-categories { display: flex; gap: var(--space-sm); margin-bottom: var(--space-lg); flex-wrap: wrap; }
        .stream-cat { padding: var(--space-xs) var(--space-md); background: var(--parchment); border-radius: 100px; font-size: 0.85rem; cursor: pointer; }
        .stream-cat.active { background: var(--stream); color: white; }
        .media-card { background: var(--surface); border-radius: 16px; overflow: hidden; box-shadow: var(--shadow-sm); cursor: pointer; transition: all 0.3s; }
        .media-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
        .media-thumbnail { height: 140px; background: linear-gradient(135deg, var(--parchment) 0%, var(--stream) 100%); display: flex; align-items: center; justify-content: center; font-size: 2.5rem; position: relative; }
        .media-duration { position: absolute; bottom: 8px; right: 8px; background: rgba(0,0,0,0.7); color: white; padding: 2px 6px; border-radius: 4px; font-size: 0.75rem; }
        .media-info { padding: var(--space-md); }
        .media-title { font-family: var(--font-display); font-size: 1rem; margin-bottom: var(--space-xs); }
        .media-meta { font-size: 0.8rem; color: var(--ink-faint); }
        .media-rating { font-size: 0.75rem; color: var(--gold); }

        /* Binder */
        .binder-tabs { display: flex; gap: var(--space-sm); margin-bottom: var(--space-lg); border-bottom: 2px solid var(--parchment-deep); padding-bottom: var(--space-sm); flex-wrap: wrap; }
        .binder-tab { padding: var(--space-sm) var(--space-md); background: transparent; border: none; font-family: var(--font-body); font-size: 0.9rem; color: var(--ink-soft); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -10px; transition: all 0.2s; }
        .binder-tab:hover { color: var(--ink); }
        .binder-tab.active { color: var(--clay); border-bottom-color: var(--clay); }
        .binder-section { display: none; }
        .binder-section.active { display: block; }
        .identity-card { background: linear-gradient(135deg, var(--parchment) 0%, var(--gold-faint) 100%); border: 2px solid var(--gold); border-radius: 16px; padding: var(--space-xl); text-align: center; margin-bottom: var(--space-lg); animation: glowPulse 2s ease-in-out infinite; }
        .identity-label { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.15em; color: var(--gold); margin-bottom: var(--space-sm); }
        .identity-statement { font-family: var(--font-display); font-size: 1.4rem; line-height: 1.6; }
        .inventory-item { display: flex; align-items: center; gap: var(--space-md); padding: var(--space-md); background: var(--surface); border-radius: 12px; margin-bottom: var(--space-sm); box-shadow: var(--shadow-sm); }
        .inventory-icon { width: 50px; height: 50px; border-radius: 12px; background: var(--parchment); display: flex; align-items: center; justify-content: center; font-size: 1.5rem; }
        .inventory-details { flex: 1; }
        .inventory-name { font-weight: 600; margin-bottom: 2px; }
        .inventory-desc { font-size: 0.85rem; color: var(--ink-faint); }
        .radar-chart { width: 150px; height: 150px; background: conic-gradient(var(--sanctuary) 0 25%, var(--olive) 25% 50%, var(--gold) 50% 75%, var(--family) 75% 100%); border-radius: 50%; margin: 0 auto; position: relative; }
        .radar-label { position: absolute; font-size: 0.7rem; color: var(--ink-faint); }
        .radar-label.presence { top: 0; left: 50%; transform: translateX(-50%); }
        .radar-label.peace { bottom: 0; left: 50%; transform: translateX(-50%); }
        .radar-label.faith { right: 0; top: 50%; transform: translateY(-50%); }
        .radar-label.love { left: 0; top: 50%; transform: translateY(-50%); }

        /* Dashboard Tabs */
        /* The category list now sits to the left of the content panel. Remove the card styling and use the order property to position it first in the flex row. */
        .dashboard-tabs {
            display: flex;
            flex-direction: column;
            gap: var(--space-sm);
            width: 200px;
            /* Move the tab list to the left within the flex container */
            order: -1;
            /* Remove background, rounded corners and shadow to make the list blend into the page */
            background: none;
            border-radius: 0;
            box-shadow: none;
            /* Remove internal padding to align the buttons flush */
            padding: 0;
            /* Maintain spacing from the content panel */
            margin-right: var(--space-lg);
        }
        .dashboard-tab { padding: var(--space-sm); background: transparent; border: none; font-size: 0.9rem; cursor: pointer; border-left: 4px solid transparent; text-align: left; transition: all 0.2s; }
        .dashboard-tab:hover { border-left-color: var(--gold-soft); }
        .dashboard-tab.active { border-left-color: var(--gold); font-weight: 600; }
        .dashboard-content { flex: 1; display: flex; }
        .dashboard-tab-content { display: none; flex: 1; }
        .dashboard-tab-content.active { display: block; }
        .message-preview { background: var(--parchment); border-radius: 8px; padding: var(--space-sm); margin-bottom: var(--space-sm); }
        .message-user { font-weight: 500; }
        .message-text { font-size: 0.9rem; color: var(--ink-soft); }
        .glance-item { padding: var(--space-sm) 0; border-bottom: 1px solid var(--parchment); }
        .glance-item:last-child { border-bottom: none; }
        .month-event { font-size: 1.1rem; margin-bottom: var(--space-sm); font-weight: 500; }
        .lesson-plan { background: var(--parchment-deep); padding: var(--space-md); border-radius: 8px; margin-bottom: var(--space-sm); }
        .lesson-title { font-family: var(--font-display); font-size: 1.2rem; margin-bottom: var(--space-xs); }
        .lesson-desc { color: var(--ink-soft); }

        /* Page Tab Bar (Forum, Chat) */
        .page-tab-bar { display: flex; align-items: center; justify-content: space-between; background: var(--surface); border-radius: 12px; padding: var(--space-sm) var(--space-md); margin-bottom: var(--space-lg); box-shadow: var(--shadow-sm); }
        .page-tabs { display: flex; gap: var(--space-xs); }
        .page-tab { padding: var(--space-sm) var(--space-md); background: transparent; border: none; font-family: var(--font-body); font-size: 0.9rem; font-weight: 500; color: var(--ink-soft); cursor: pointer; border-radius: 8px; transition: all 0.2s; }
        .page-tab:hover { background: var(--parchment); color: var(--ink); }
        .page-tab.active { background: var(--gold-faint); color: var(--gold); font-weight: 600; }
        .page-search { display: flex; align-items: center; background: var(--parchment); border-radius: 100px; padding: var(--space-xs) var(--space-md); width: 220px; }
        .page-search input { flex: 1; border: none; background: transparent; font-family: var(--font-body); font-size: 0.85rem; outline: none; color: var(--ink); }
        .page-search input::placeholder { color: var(--ink-faint); }
        .page-search-icon { color: var(--ink-faint); margin-right: var(--space-xs); }

        /* Fellowship Events Banner */
        .events-banner { display: flex; gap: var(--space-md); overflow-x: auto; padding-bottom: var(--space-sm); margin-bottom: var(--space-lg); }
        .event-banner-card { flex: 0 0 auto; min-width: 280px; background: linear-gradient(135deg, var(--fellowship) 0%, var(--sky) 100%); color: var(--white); border-radius: 12px; padding: var(--space-md); box-shadow: var(--shadow-sm); }
        .event-banner-card h4 { font-family: var(--font-display); font-size: 1.1rem; margin-bottom: var(--space-xs); }
        .event-banner-date { font-weight: 600; font-size: 0.9rem; margin-bottom: var(--space-xs); opacity: 0.9; }
        .event-banner-desc { font-size: 0.85rem; opacity: 0.85; }

        /* Message Board Section */
        .message-board { background: var(--surface); border-radius: 16px; padding: var(--space-lg); margin-bottom: var(--space-lg); box-shadow: var(--shadow-sm); border: 1px solid var(--parchment-dark); }
        .message-board-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-md); }
        .message-board-title { font-family: var(--font-display); font-size: 1.3rem; display: flex; align-items: center; gap: var(--space-sm); }
        .message-board-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--space-md); }
        .board-note { background: var(--gold-faint); border-radius: 8px; padding: var(--space-md); cursor: pointer; transition: all 0.2s; border-left: 4px solid var(--gold); }
        .board-note:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); }
        .board-note:nth-child(2n) { background: var(--parchment-deep); border-left-color: var(--olive); }
        .board-note:nth-child(3n) { background: #E0D4F0; border-left-color: var(--compass); }
        .board-note-author { font-size: 0.75rem; color: var(--ink-faint); margin-bottom: var(--space-xs); }
        .board-note-content { font-size: 0.9rem; color: var(--ink); font-weight: 500; }
        .board-note-time { font-size: 0.7rem; color: var(--ink-faint); margin-top: var(--space-sm); }

        /* Facebook-style Feed */
        .social-feed { max-height: 600px; overflow-y: auto; padding-right: var(--space-sm); }
        .feed-post { background: var(--surface); border-radius: 16px; padding: var(--space-lg); margin-bottom: var(--space-md); box-shadow: var(--shadow-sm); border: 1px solid var(--parchment-dark); }
        .feed-post-header { display: flex; align-items: center; gap: var(--space-sm); margin-bottom: var(--space-md); }
        .feed-avatar { width: 48px; height: 48px; border-radius: 50%; background: linear-gradient(135deg, var(--olive) 0%, var(--olive-soft) 100%); display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: 1.1rem; color: white; flex-shrink: 0; }
        .feed-author-info { flex: 1; }
        .feed-author { font-weight: 600; font-size: 0.95rem; color: var(--ink); }
        .feed-meta { font-size: 0.8rem; color: var(--ink-faint); display: flex; align-items: center; gap: var(--space-xs); }
        .feed-content { font-size: 0.95rem; line-height: 1.6; color: var(--ink); margin-bottom: var(--space-md); }
        .feed-image { background: var(--parchment-deep); border-radius: 12px; padding: var(--space-xl); text-align: center; font-size: 3rem; margin-bottom: var(--space-md); }
        .feed-actions { display: flex; gap: var(--space-lg); padding-top: var(--space-md); border-top: 1px solid var(--parchment-deep); }
        .feed-action { display: flex; align-items: center; gap: var(--space-xs); color: var(--ink-soft); cursor: pointer; font-size: 0.9rem; transition: all 0.2s; }
        .feed-action:hover { color: var(--gold); }
        .feed-action-count { font-weight: 500; }
        .feed-compose { background: var(--parchment); border-radius: 12px; padding: var(--space-md); margin-bottom: var(--space-lg); display: flex; align-items: center; gap: var(--space-md); }
        .feed-compose-avatar { width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(135deg, var(--olive) 0%, var(--olive-soft) 100%); display: flex; align-items: center; justify-content: center; font-family: var(--font-display); color: white; }
        .feed-compose-input { flex: 1; background: var(--surface); border: 1px solid var(--parchment-dark); border-radius: 100px; padding: var(--space-sm) var(--space-md); font-family: var(--font-body); font-size: 0.9rem; cursor: pointer; color: var(--ink-faint); transition: all 0.2s; }
        .feed-compose-input:hover { border-color: var(--gold-soft); }

        /* Forum (Reddit-style) - Legacy */
        .forum-content-area { display: none; }
        .forum-content-area.active { display: block; }
        .forum-post { background: var(--surface); border-radius: 16px; padding: var(--space-lg); margin-bottom: var(--space-md); box-shadow: var(--shadow-sm); }
        .forum-post-title { font-family: var(--font-display); font-size: 1.2rem; margin-bottom: var(--space-sm); cursor: pointer; }
        .forum-post-content { font-size: 0.95rem; line-height: 1.6; margin-bottom: var(--space-md); display: none; }
        .forum-post.expanded .forum-post-content { display: block; }
        .forum-actions { display: flex; gap: var(--space-md); color: var(--ink-faint); }
        .forum-action { cursor: pointer; }
        .forum-reply { margin-left: var(--space-lg); border-left: 2px solid var(--parchment-dark); padding-left: var(--space-md); display: none; }
        .forum-post.expanded .forum-reply { display: block; }

        /* ═══════════════════════════════════════════════════════════════ */
        /* THE HAVEN - Dashboard Styles (Parchment Theme) */
        /* ═══════════════════════════════════════════════════════════════ */
        .haven-btn { 
            border: 2px dashed var(--parchment-edge); 
            background: var(--parchment-aged); 
            color: var(--ink); 
            padding: 7px 10px; 
            border-radius: var(--radius-md); 
            cursor: pointer; 
            font-size: 12px; 
            font-weight: 700; 
            transition: all 0.2s; 
        }
        .haven-btn:hover { 
            transform: translateY(-1px); 
            background: var(--parchment); 
            border-color: var(--thread);
            color: var(--thread);
        }
        .haven-btn.gold { background: var(--thread-faint); border-color: var(--thread-soft); }
        .haven-btn.gold:hover { background: var(--thread); color: var(--white); }
        .haven-btn.good { background: rgba(122, 139, 92, 0.15); border-color: var(--olive-soft); }
        .haven-btn.good:hover { background: var(--olive); color: var(--white); }
        .haven-link { 
            display: inline-flex; 
            align-items: center; 
            gap: 6px; 
            font-size: 11px; 
            color: var(--thread); 
            border: 1px dashed var(--thread-soft); 
            padding: 2px 8px; 
            border-radius: 999px; 
            background: var(--parchment); 
            cursor: pointer; 
            transition: all 0.15s; 
        }
        .haven-link:hover { background: var(--thread); color: var(--white); border-color: var(--thread); }
        .haven-item { 
            border: 2px dashed var(--parchment-edge); 
            background: var(--parchment-aged); 
            border-radius: var(--radius-md); 
            padding: 10px; 
            cursor: pointer; 
            transition: all 0.2s; 
            margin-bottom: 8px; 
        }
        .haven-item:last-child { margin-bottom: 0; }
        .haven-item:hover { 
            transform: translateY(-1px); 
            background: var(--parchment); 
            border-color: var(--thread-soft);
        }
        .haven-item-t { font-size: 12px; font-weight: 900; margin-bottom: 4px; color: var(--ink); }
        .haven-item-m { font-size: 11px; color: var(--ink-faint); }
        .haven-item-s { font-size: 14px; color: var(--ink); line-height: 1.45; margin-top: 6px; }
        .haven-card { 
            border: 2px dashed var(--parchment-edge); 
            border-radius: var(--radius-lg); 
            padding: 12px; 
            background: var(--parchment-aged); 
            margin-bottom: 10px; 
        }
        .haven-card:last-child { margin-bottom: 0; }
        .haven-card-title { font-weight: 900; margin-bottom: 6px; font-size: 13px; color: var(--ink); }
        .haven-card-meta { font-size: 11px; color: var(--ink-faint); margin-bottom: 10px; }
        .haven-station { 
            border: 2px dashed var(--parchment-edge); 
            background: var(--parchment-aged); 
            border-radius: var(--radius-lg); 
            padding: 12px; 
            min-height: 200px; 
        }
        .haven-station.active { border-color: var(--thread); box-shadow: 0 0 0 3px var(--thread-faint); }
        .haven-station.done { border-color: var(--olive); box-shadow: 0 0 0 3px rgba(122, 139, 92, 0.15); }
        @media (max-width: 980px) { #page-dashboard .haven-station { min-height: auto; } }

        /* ═══════════════════════════════════════════════════════════════ */
        /* MARKETPLACE - Craigslist Style */
        /* ═══════════════════════════════════════════════════════════════ */
        .market-tab { padding: 8px 16px; background: white; border: 1px solid #ddd; border-radius: 20px; cursor: pointer; font-size: 13px; transition: all 0.2s; }
        .market-tab:hover { background: #f5f0e8; border-color: var(--gold); }
        .market-tab.active { background: var(--gold); color: white; border-color: var(--gold); }
        .market-listing { display: flex; gap: 16px; background: white; border: 1px solid #ddd; border-radius: 12px; padding: 16px; cursor: pointer; transition: all 0.2s; }
        .market-listing:hover { border-color: var(--gold); box-shadow: 0 4px 12px rgba(0,0,0,0.1); transform: translateY(-2px); }
        .market-listing-img { width: 100px; height: 100px; background: linear-gradient(135deg, #f5e6d3 0%, #e8d5b9 100%); border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 40px; flex-shrink: 0; }
        .market-listing-info { flex: 1; }
        .market-listing-title { font-weight: 600; font-size: 16px; color: var(--ink); margin-bottom: 4px; }
        .market-listing-meta { font-size: 12px; color: #666; margin-bottom: 6px; }
        .market-listing-desc { font-size: 13px; color: #555; line-height: 1.4; margin-bottom: 8px; }
        .market-listing-tags { display: flex; gap: 6px; flex-wrap: wrap; }
        .market-tag { padding: 3px 8px; border-radius: 12px; font-size: 11px; background: #f0f0f0; color: #555; }
        .market-tag.sale { background: #dbeafe; color: #1e40af; }
        .market-tag.free { background: #dcfce7; color: #166534; }
        .market-tag.trade { background: #fef3c7; color: #92400e; }
        .market-tag.service { background: #ede9fe; color: #5b21b6; }
        .market-tag.wanted { background: #fee2e2; color: #991b1b; }
        .market-listing-price { font-size: 20px; font-weight: bold; color: var(--ink); text-align: right; min-width: 80px; }
        .market-listing-price.free { color: #166534; }
        .market-listing-price.trade { color: #92400e; font-size: 16px; }
        .market-quick-btn { width: 100%; padding: 10px; margin-bottom: 8px; background: #f5f0e8; border: 1px solid #ddd; border-radius: 8px; cursor: pointer; font-size: 13px; text-align: left; transition: all 0.2s; }
        .market-quick-btn:hover { background: #ebe5db; border-color: var(--gold); }
        .market-tool { display: flex; align-items: center; gap: 8px; padding: 8px 0; border-bottom: 1px solid #eee; font-size: 13px; }
        .market-tool span:first-child { font-size: 18px; }
        .market-tool span:nth-child(2) { flex: 1; }
        .tool-avail { color: #166534; font-size: 11px; font-weight: 600; }
        .tool-out { color: #991b1b; font-size: 11px; }
        .market-recent { padding: 8px 0; border-bottom: 1px solid #eee; font-size: 13px; color: #555; cursor: pointer; }
        .market-recent:hover { color: var(--gold); }

        /* ═══════════════════════════════════════════════════════════════ */
        /* S.H.E.M.A. TERMINAL Styles (Parchment Theme)                   */
        /* ═══════════════════════════════════════════════════════════════ */
        .shema-rail { width: 64px; background: var(--parchment-deep); border-right: 2px dashed var(--parchment-edge); display: flex; flex-direction: column; align-items: center; padding: 16px 0; gap: 4px; }
        .shema-nav-icon { width: 44px; height: 44px; border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; font-size: 18px; cursor: pointer; transition: all 0.15s; position: relative; color: var(--ink-soft); }
        .shema-nav-icon:hover { background: var(--parchment-aged); color: var(--ink); }
        .shema-nav-icon.active { background: var(--thread-faint); color: var(--thread); }
        .shema-nav-icon.active::before { content: ''; position: absolute; left: -10px; width: 3px; height: 24px; background: var(--thread); border-radius: 0 2px 2px 0; }
        .shema-tooltip { position: absolute; left: 56px; background: var(--parchment); color: var(--ink); padding: 6px 12px; border-radius: var(--radius-sm); font-size: 12px; font-weight: 500; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity 0.15s; border: 2px dashed var(--thread-soft); z-index: 1000; }
        .shema-nav-icon:hover .shema-tooltip { opacity: 1; }
        .shema-rail-divider { width: 24px; height: 2px; background: var(--parchment-edge); margin: 8px 0; }
        
        .shema-topbar { height: 52px; background: var(--parchment-aged); border-bottom: 2px dashed var(--parchment-edge); display: flex; align-items: center; padding: 0 24px; flex-shrink: 0; }
        .shema-breadcrumbs { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 500; }
        .shema-crumb { color: var(--ink-faint); }
        .shema-crumb.current { color: var(--ink); }
        .shema-sep { color: var(--parchment-edge); }
        .shema-status { margin-left: auto; display: flex; align-items: center; gap: 20px; }
        .shema-status-item { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--ink); }
        .shema-status-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--olive); }
        
        .shema-header { padding: 24px 32px; border-bottom: 2px dashed var(--parchment-edge); background: var(--parchment-aged); flex-shrink: 0; }
        .shema-title { font-size: 20px; font-weight: 600; color: var(--ink); margin-bottom: 6px; letter-spacing: -0.02em; font-family: var(--font-display); }
        .shema-subtitle { font-size: 13px; color: var(--ink-soft); }
        .shema-actions { display: flex; gap: 10px; margin-top: 16px; }
        .shema-action-btn { padding: 8px 14px; background: var(--parchment); border: 2px dashed var(--parchment-edge); border-radius: var(--radius-md); color: var(--ink-soft); font-size: 12px; font-weight: 500; cursor: pointer; transition: all 0.15s; }
        .shema-action-btn:hover { background: var(--thread); color: var(--white); border-color: var(--thread); }

        .shema-console-actions { display: flex; gap: 8px; align-items: center; }
        .shema-action-btn-sm { padding: 6px 10px; background: rgba(217, 119, 6, 0.1); border: 1px solid rgba(217, 119, 6, 0.3); border-radius: 6px; color: var(--thread); font-size: 11px; font-weight: 500; cursor: pointer; transition: all 0.15s; white-space: nowrap; }
        .shema-action-btn-sm:hover { background: var(--thread); color: var(--white); border-color: var(--thread); }
        
        .shema-content { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 24px 32px; padding-bottom: 24px; background: var(--parchment); min-height: 0; }

        .shema-terminal { font-family: 'JetBrains Mono', 'SF Mono', Georgia, monospace; font-size: 13px; line-height: 1.7; }
        .shema-line { display: flex; align-items: flex-start; margin-bottom: 6px; padding: 2px 0; word-wrap: break-word; }
        .shema-prompt { color: var(--thread); margin-right: 12px; user-select: none; opacity: 0.7; }
        .shema-text { color: var(--ink-soft); }
        .shema-text.system { color: var(--sky); }
        .shema-text.success { color: var(--olive); }
        .shema-text.warning { color: var(--thread); }
        .shema-text.error { color: var(--berry); }
        .shema-text.highlight { color: var(--ink); }
        .shema-text.user { color: var(--thread); font-weight: 500; }
        .shema-text.assistant { color: var(--ink); line-height: 1.6; white-space: pre-wrap; }
        
        .shema-card { background: var(--parchment-aged); border: 2px dashed var(--parchment-edge); border-radius: var(--radius-lg); margin: 16px 0; overflow: hidden; }
        .shema-card-header { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 2px dashed var(--parchment-edge); background: var(--parchment-deep); }
        .shema-card-title { font-size: 13px; font-weight: 600; color: var(--ink); }
        .shema-badge { padding: 4px 10px; background: var(--thread-faint); color: var(--thread); border-radius: 100px; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; }
        .shema-card-body { padding: 16px 18px; }
        .shema-cmd { margin-bottom: 10px; font-family: 'JetBrains Mono', monospace; font-size: 12px; }
        .cmd-name { color: var(--thread); }
        .cmd-arg { color: var(--ink-soft); }
        .cmd-flag { color: var(--ink-faint); }
        
        .shema-input-bar { background: var(--parchment-aged); border-top: 2px dashed var(--parchment-edge); padding: 14px 24px; flex-shrink: 0; }
        .shema-input-wrapper { display: flex; align-items: center; gap: 12px; background: var(--parchment); border: 2px dashed var(--parchment-edge); border-radius: var(--radius-md); padding: 0 16px; transition: border-color 0.15s; }
        .shema-input-wrapper:focus-within { border-color: var(--thread); }
        .shema-input-symbol { color: var(--thread); font-family: 'JetBrains Mono', monospace; font-size: 14px; opacity: 0.7; }
        .shema-input { flex: 1; background: none; border: none; color: var(--ink); font-family: 'JetBrains Mono', monospace; font-size: 13px; padding: 12px 0; outline: none; }
        .shema-input::placeholder { color: var(--ink-faint); }
        .shema-input-hint { font-size: 11px; color: var(--ink-faint); font-family: 'JetBrains Mono', monospace; }
        
        .shema-palette-overlay { position: absolute; inset: 0; background: rgba(44, 36, 22, 0.7); display: none; align-items: flex-start; justify-content: center; padding-top: 80px; z-index: 1000; backdrop-filter: blur(8px); }
        .shema-palette-overlay.active { display: flex; }
        .shema-palette { width: 90%; max-width: 580px; background: var(--parchment); border: 2px dashed var(--thread); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); overflow: hidden; }
        .shema-palette-search { display: flex; align-items: center; padding: 16px 20px; border-bottom: 2px dashed var(--parchment-edge); gap: 12px; color: var(--thread); }
        .shema-palette-input { flex: 1; background: none; border: none; color: var(--ink); font-size: 15px; outline: none; }
        .shema-palette-input::placeholder { color: var(--ink-faint); }
        .shema-palette-results { max-height: 360px; overflow-y: auto; padding: 8px; }
        .shema-palette-item { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-radius: var(--radius-md); cursor: pointer; transition: background 0.1s; }
        .shema-palette-item:hover, .shema-palette-item.selected { background: var(--parchment-aged); }
        .shema-palette-item-icon { width: 36px; height: 36px; background: var(--thread-faint); border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; font-size: 16px; }
        .shema-palette-item-title { font-size: 14px; font-weight: 500; color: var(--ink); }
        .shema-palette-item-desc { font-size: 12px; color: var(--ink-faint); }
        .shema-palette-item-shortcut { padding: 4px 8px; background: var(--parchment-deep); border-radius: 4px; font-size: 11px; color: var(--ink-faint); font-family: 'JetBrains Mono', monospace; }
        
        /* SHEMA Workspace Grids */
        .shema-grid { display: grid; gap: 16px; }
        .shema-grid-3 { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
        .shema-workflow-card { background: var(--parchment-aged); border: 2px dashed var(--parchment-edge); border-radius: var(--radius-lg); padding: 20px; cursor: pointer; transition: all 0.15s; }
        .shema-workflow-card:hover { border-color: var(--thread); transform: translateY(-2px); box-shadow: var(--shadow-md); }
        .shema-workflow-icon { width: 44px; height: 44px; background: var(--thread-faint); border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; font-size: 20px; margin-bottom: 14px; }
        .shema-workflow-name { font-size: 15px; font-weight: 600; color: var(--ink); margin-bottom: 6px; }
        .shema-workflow-desc { font-size: 13px; color: var(--ink-soft); line-height: 1.5; margin-bottom: 14px; }
        .shema-workflow-meta { display: flex; gap: 16px; font-size: 11px; color: var(--ink-faint); }
        
        .shema-project-item { display: flex; gap: 16px; background: var(--parchment-aged); border: 2px dashed var(--parchment-edge); border-radius: var(--radius-lg); padding: 18px 20px; margin-bottom: 12px; cursor: pointer; transition: all 0.15s; }
        .shema-project-item:hover { border-color: var(--thread); background: var(--parchment); }
        .shema-project-icon { width: 48px; height: 48px; background: var(--thread-faint); border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; font-size: 22px; flex-shrink: 0; }
        .shema-project-name { font-size: 15px; font-weight: 600; color: var(--ink); margin-bottom: 4px; }
        .shema-project-desc { font-size: 13px; color: var(--ink-soft); margin-bottom: 10px; }
        .shema-project-right { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; margin-left: auto; }
        .shema-project-badge { padding: 4px 12px; border-radius: 100px; font-size: 11px; font-weight: 600; }
        .shema-project-badge.active { background: rgba(122, 139, 92, 0.15); color: var(--olive); }
        .shema-project-badge.paused { background: var(--thread-faint); color: var(--thread); }
        .shema-project-badge.planning { background: rgba(139, 163, 168, 0.15); color: var(--sky); }
        .shema-progress-bar { width: 100px; height: 4px; background: var(--parchment-deep); border-radius: 2px; overflow: hidden; }
        .shema-progress-fill { height: 100%; background: linear-gradient(90deg, var(--thread), var(--thread-glow)); border-radius: 2px; }
        
        .shema-agent-card { background: var(--parchment-aged); border: 2px dashed var(--parchment-edge); border-radius: var(--radius-lg); padding: 18px; cursor: pointer; transition: all 0.15s; }
        .shema-agent-card:hover { border-color: var(--thread); transform: translateY(-2px); }
        .shema-agent-header { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
        .shema-agent-avatar { width: 40px; height: 40px; background: rgba(107, 138, 253, 0.1); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 18px; position: relative; }
        .shema-agent-online { position: absolute; bottom: 0; right: 0; width: 10px; height: 10px; background: var(--olive); border: 2px solid var(--parchment); border-radius: 50%; }
        .shema-agent-name { font-size: 14px; font-weight: 600; color: #e8e8ed; }
        .shema-agent-role { font-size: 10px; color: #5c5c6e; text-transform: uppercase; letter-spacing: 0.5px; }
        .shema-agent-desc { font-size: 13px; color: #9898a8; line-height: 1.5; margin-bottom: 12px; }
        .shema-agent-tags { display: flex; flex-wrap: wrap; gap: 6px; }
        .shema-agent-tag { padding: 3px 8px; background: var(--parchment-deep); border-radius: 4px; font-size: 10px; color: var(--ink-faint); }

        /* ═══════════════════════════════════════════════════════════════ */
        /* THE STREAM - Media Hub Styles (Parchment Theme) */
        /* ═══════════════════════════════════════════════════════════════ */
        .stream-type-icon { width: 48px; height: 48px; border-radius: 50%; margin: 8px 0; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 24px; transition: all 0.3s ease; position: relative; border: 2px dashed var(--parchment-edge); background: var(--parchment-aged); }
        .stream-type-icon:hover { border-radius: 35%; border-color: var(--thread-soft); transform: scale(1.05); }
        .stream-type-icon.active { border-radius: 35%; border-color: var(--thread); border-style: solid; box-shadow: 0 0 15px rgba(196, 136, 28, 0.4); background: linear-gradient(135deg, var(--thread) 0%, var(--thread-hover) 100%); }
        .stream-badge { position: absolute; top: -4px; right: -4px; width: 18px; height: 18px; background: var(--berry); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: bold; color: #fff; border: 2px solid var(--parchment); }
        .stream-filter { background: var(--parchment-aged); border: 1px dashed var(--parchment-edge); color: var(--ink); padding: 6px 12px; border-radius: var(--radius-sm); font-size: 13px; cursor: pointer; }
        .stream-category-title { font-size: 12px; font-weight: bold; text-transform: uppercase; color: var(--ink-faint); margin: 16px 0 12px 8px; letter-spacing: 0.5px; }
        .stream-media-item { background: var(--parchment-aged); border: 1px dashed var(--parchment-edge); border-radius: var(--radius-md); padding: 12px; margin-bottom: 10px; cursor: pointer; transition: all 0.3s ease; display: flex; gap: 12px; }
        .stream-media-item:hover { background: var(--parchment); border-color: var(--thread-soft); transform: translateX(3px); }
        .stream-thumb { width: 100px; height: 75px; border-radius: var(--radius-sm); background: linear-gradient(135deg, var(--parchment-deep) 0%, var(--parchment-dark) 100%); flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 32px; position: relative; }
        .stream-play-overlay { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 32px; height: 32px; background: rgba(44, 36, 22, 0.7); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--parchment); font-size: 12px; }
        .stream-item-info { flex: 1; min-width: 0; }
        .stream-item-title { font-weight: 600; font-size: 14px; color: var(--ink); margin-bottom: 4px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
        .stream-item-meta { font-size: 11px; color: var(--ink-faint); margin-bottom: 6px; }
        .stream-item-stats { display: flex; gap: 12px; font-size: 11px; color: var(--ink-faint); }
        .stream-action-icon { width: 36px; height: 36px; border-radius: 50%; background: var(--parchment); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.2s ease; border: 1px dashed var(--parchment-edge); }
        .stream-action-icon:hover { background: var(--thread-faint); border-color: var(--thread); }
        .stream-rec-item { background: var(--parchment-aged); border: 1px dashed var(--parchment-edge); border-radius: var(--radius-md); padding: 10px; margin-bottom: 10px; cursor: pointer; transition: all 0.2s ease; display: flex; gap: 10px; }
        .stream-rec-item:hover { background: var(--parchment); border-color: var(--thread-soft); }
        .stream-rec-thumb { width: 60px; height: 45px; border-radius: var(--radius-sm); background: linear-gradient(135deg, var(--parchment-deep) 0%, var(--parchment-dark) 100%); display: flex; align-items: center; justify-content: center; font-size: 20px; flex-shrink: 0; }
        .stream-rec-info { flex: 1; }
        .stream-rec-title { font-size: 13px; font-weight: 600; color: var(--ink); margin-bottom: 4px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
        .stream-rec-meta { font-size: 11px; color: var(--ink-faint); }
        .stream-elijah-btn { padding: 8px 12px; background: var(--thread-faint); border: 1px dashed var(--thread-soft); border-radius: 16px; color: var(--ink); font-size: 12px; cursor: pointer; transition: all 0.2s; }
        .stream-elijah-btn:hover { background: var(--thread); color: var(--white); border-color: var(--thread); }
        .stream-engage-btn { padding: 10px 20px; background: var(--parchment-aged); border: 1px dashed var(--parchment-edge); border-radius: 20px; color: var(--ink); font-size: 14px; cursor: pointer; display: flex; align-items: center; gap: 8px; transition: all 0.2s ease; }
        .stream-engage-btn:hover { background: var(--parchment); border-color: var(--thread); }
        .stream-ctrl-btn { width: 36px; height: 36px; border-radius: 50%; background: var(--thread-faint); border: none; color: var(--thread); font-size: 16px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.2s; }
        .stream-ctrl-btn:hover { background: var(--thread); color: var(--white); transform: scale(1.1); }
        .stream-layout { transition: opacity 0.3s; }
        .stream-layout.active { display: flex !important; }
        
        /* Shorts/Photos Layout */
        .shorts-tab { flex: 1; padding: 10px; background: transparent; border: none; color: var(--ink-faint); font-size: 14px; cursor: pointer; transition: all 0.2s; }
        .shorts-tab.active { background: var(--thread); color: white; }
        .shorts-tab:hover:not(.active) { background: var(--thread-faint); }
        .shorts-grid-item { background: linear-gradient(180deg, var(--parchment-aged) 0%, var(--parchment-deep) 100%); border: 1px dashed var(--parchment-edge); border-radius: var(--radius-lg); overflow: hidden; cursor: pointer; transition: transform 0.2s; }
        .shorts-grid-item:hover { transform: scale(1.03); border-color: var(--thread-soft); }
        .shorts-grid-thumb { aspect-ratio: 9/16; display: flex; align-items: center; justify-content: center; font-size: 40px; background: linear-gradient(180deg, var(--parchment-deep) 0%, var(--parchment-dark) 100%); }
        .shorts-grid-info { padding: 8px; }
        .shorts-grid-author { font-size: 12px; color: var(--ink); font-weight: 600; }
        .shorts-grid-stats { font-size: 11px; color: var(--ink-faint); }
        .photos-grid-item { background: var(--parchment-aged); border: 1px dashed var(--parchment-edge); border-radius: var(--radius-lg); overflow: hidden; cursor: pointer; transition: transform 0.2s; }
        .photos-grid-item:hover { transform: scale(1.03); border-color: var(--thread-soft); }
        .photos-grid-thumb { aspect-ratio: 1; display: flex; align-items: center; justify-content: center; font-size: 48px; background: linear-gradient(135deg, var(--parchment-deep) 0%, var(--parchment-dark) 100%); }
        .photos-grid-caption { padding: 10px; font-size: 14px; color: var(--ink); }
        .shorts-filter-btn { padding: 6px 12px; background: transparent; border-radius: 16px; color: var(--ink-faint); font-size: 12px; cursor: pointer; transition: all 0.2s; }
        .shorts-filter-btn:hover, .shorts-filter-btn.active { background: var(--thread-faint); color: var(--ink); }
        
        /* Playlist Layout */
        .playlist-list-item { display: flex; align-items: center; gap: 12px; padding: 12px; background: var(--parchment-aged); border: 1px dashed var(--parchment-edge); border-radius: var(--radius-md); margin-bottom: 8px; cursor: pointer; transition: all 0.2s; }
        .playlist-list-item:hover { background: var(--parchment); border-color: var(--thread-soft); }
        .playlist-list-item.active { background: var(--thread-faint); border-left: 3px solid var(--thread); }
        .playlist-list-icon { width: 40px; height: 40px; background: linear-gradient(135deg, var(--parchment-deep) 0%, var(--parchment-dark) 100%); border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; font-size: 20px; }
        .playlist-list-info { flex: 1; }
        .playlist-list-title { font-size: 14px; font-weight: 600; color: var(--ink); }
        .playlist-list-meta { font-size: 11px; color: var(--ink-faint); }
        .playlist-content-item { display: flex; align-items: center; gap: 12px; padding: 10px; background: var(--parchment-aged); border: 1px dashed var(--parchment-edge); border-radius: var(--radius-md); margin-bottom: 8px; cursor: pointer; transition: all 0.2s; }
        .playlist-content-item:hover { background: var(--parchment); border-color: var(--thread-soft); }
        
        /* Liked Layout */
        .liked-nav-item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--radius-md); color: var(--ink-soft); font-size: 13px; cursor: pointer; transition: all 0.2s; margin-bottom: 4px; }
        .liked-nav-item:hover { background: var(--parchment-aged); }
        .liked-nav-item.active { background: var(--thread-faint); color: var(--ink); }
        .liked-content-item { display: flex; align-items: center; gap: 14px; padding: 12px; background: var(--parchment-aged); border: 1px dashed var(--parchment-edge); border-radius: var(--radius-md); cursor: pointer; transition: all 0.2s; }
        .liked-content-item:hover { background: var(--parchment); border-color: var(--thread-soft); }
        .liked-content-thumb { width: 56px; height: 56px; background: linear-gradient(135deg, var(--parchment-deep) 0%, var(--parchment-dark) 100%); border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; font-size: 24px; flex-shrink: 0; }
        .liked-content-info { flex: 1; }
        .liked-content-type { font-size: 11px; margin-bottom: 2px; color: var(--ink-faint); }
        .liked-content-title { font-size: 14px; font-weight: 600; color: var(--ink); margin-bottom: 2px; }
        .liked-content-meta { font-size: 14px; color: var(--ink); }
        .liked-content-duration { font-size: 14px; color: var(--ink); font-family: monospace; }
        
        /* Music Layout (Haven Vinyl Style) */
        .music-nav-section { color: #b8860b; font-size: 10px; font-weight: bold; text-transform: uppercase; padding: 12px 8px 6px; font-family: 'Georgia', serif; letter-spacing: 0.5px; }
        .music-nav-item { padding: 8px 12px; color: var(--ink-soft); font-size: 12px; cursor: pointer; border-radius: 4px; transition: all 0.2s; }
        .music-nav-item:hover { background: rgba(184, 134, 11, 0.15); color: #d4b896; }
        .music-nav-item.active { background: rgba(184, 134, 11, 0.25); color: var(--ink); }
        .music-toolbar-btn { padding: 6px 12px; background: var(--parchment-aged); border: 2px dashed var(--parchment-edge); border-radius: 4px; color: #d4b896; font-size: 11px; cursor: pointer; transition: all 0.2s; }
        .music-toolbar-btn:hover { background: rgba(139, 90, 43, 0.4); border-color: #b8860b; color: var(--ink); }
        .music-track { display: flex; align-items: center; padding: 10px 16px; border-bottom: 1px solid rgba(93, 58, 26, 0.5); cursor: pointer; transition: background 0.2s; font-size: 14px; color: var(--ink); }
        .music-track:hover { background: rgba(139, 90, 43, 0.2); }
        .music-track.playing { background: rgba(184, 134, 11, 0.2); }
        .music-track.playing .track-icon { color: #b8860b; }
        .track-icon { color: #6b5540; }
        .music-player-btn { width: 32px; height: 32px; background: var(--parchment-aged); border: 2px dashed var(--parchment-edge); border-radius: 50%; color: #d4b896; font-size: 14px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.2s; }
        .music-player-btn:hover { background: rgba(139, 90, 43, 0.4); border-color: #b8860b; }
        .music-player-btn.big { width: 44px; height: 44px; font-size: 18px; background: linear-gradient(135deg, #8b5a2b, #b8860b); color: #fff; border: none; }
        .eq-bar { width: 8px; background: linear-gradient(180deg, #b8860b, #8b5a2b); border-radius: 2px; animation: eqPulse 0.5s ease-in-out infinite alternate; }
        @keyframes eqPulse { 0% { opacity: 0.6; } 100% { opacity: 1; } }
        @keyframes shortProgress { 0% { width: 0%; } 100% { width: 100%; } }
        
        /* Podcasts Layout */
        .podcast-filter { padding: 6px 14px; background: var(--parchment-aged); border: 2px dashed var(--parchment-edge); border-radius: 16px; color: var(--ink-soft); font-size: 12px; cursor: pointer; transition: all 0.2s; }
        .podcast-filter:hover, .podcast-filter.active { background: var(--gold); color: white; border-color: var(--gold); }
        .podcast-show { display: flex; gap: 14px; padding: 14px; background: rgba(45, 28, 18, 0.5); border: 2px dashed var(--parchment-edge); border-radius: 12px; margin-bottom: 12px; cursor: pointer; transition: all 0.2s; }
        .podcast-show:hover { background: var(--parchment-aged); border-color: var(--thread); transform: translateX(4px); }
        .podcast-art { width: 80px; height: 80px; background: linear-gradient(135deg, #5d3a1a 0%, #3d2817 100%); border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 36px; flex-shrink: 0; }
        .podcast-info { flex: 1; }
        .podcast-title { font-weight: bold; font-size: 15px; color: var(--ink); margin-bottom: 4px; }
        .podcast-meta { font-size: 14px; color: var(--ink); margin-bottom: 6px; }
        .podcast-desc { font-size: 13px; color: var(--ink-soft); line-height: 1.4; }
        
        /* Playlists Layout */
        .playlist-card { background: var(--parchment-aged); border: 2px dashed var(--parchment-edge); border-radius: 12px; padding: 16px; cursor: pointer; transition: all 0.2s; }
        .playlist-card:hover { background: var(--parchment); border-color: var(--thread); transform: translateY(-4px); }
        .playlist-card-art { width: 100%; aspect-ratio: 1; background: linear-gradient(135deg, #5d3a1a 0%, #3d2817 100%); border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 48px; margin-bottom: 12px; }
        .playlist-card-title { font-weight: bold; font-size: 15px; color: var(--ink); margin-bottom: 4px; }
        .playlist-card-meta { font-size: 14px; color: var(--ink); }
        
        /* Liked Layout */
        .liked-filter { padding: 8px 16px; background: var(--parchment-aged); border: 2px dashed var(--parchment-edge); border-radius: 20px; color: var(--ink-soft); font-size: 13px; cursor: pointer; transition: all 0.2s; }
        .liked-filter:hover, .liked-filter.active { background: var(--gold); color: white; border-color: var(--gold); }
        .liked-item { display: flex; gap: 14px; background: rgba(45, 28, 18, 0.5); border: 2px dashed var(--parchment-edge); border-radius: 12px; padding: 14px; cursor: pointer; transition: all 0.2s; }
        .liked-item:hover { background: var(--parchment-aged); border-color: var(--thread); }
        .liked-thumb { width: 70px; height: 70px; background: linear-gradient(135deg, #5d3a1a 0%, #3d2817 100%); border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 28px; flex-shrink: 0; }
        .liked-info { flex: 1; }
        .liked-badge { display: inline-block; padding: 2px 8px; background: rgba(184, 134, 11, 0.2); border-radius: 10px; font-size: 11px; margin-bottom: 6px; }
        .liked-title { font-weight: bold; font-size: 14px; color: var(--ink); margin-bottom: 4px; }
        .liked-meta { font-size: 14px; color: var(--ink); }

        /* ═══════════════════════════════════════════════════════════════ */
        /* ELIYAH - Epic Bible Study Panel Styles */
        /* ═══════════════════════════════════════════════════════════════ */
        
        /* Main Panel Container */
        .eliyah-panel { position: fixed; top: 0; right: 0; height: 100%; width: 85%; max-width: 1200px; background: #fffef8; border-left: 3px solid #8b5a2b; box-shadow: -8px 0 32px rgba(0,0,0,0.3); z-index: var(--z-eliyah, 1001); transform: translateX(100%); transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1); display: flex; pointer-events: auto; }
        .eliyah-panel.open { transform: translateX(0); }
        .eliyah-panel-inner { flex: 1; display: flex; flex-direction: column; overflow: hidden; pointer-events: auto; }
        
        /* Toggle Tab */
        .eliyah-toggle-tab { position: absolute; left: -48px; top: 50%; transform: translateY(-50%); width: 48px; height: 140px; background: linear-gradient(180deg, #8b5a2b 0%, #b8860b 50%, #8b5a2b 100%); border-radius: 12px 0 0 12px; cursor: pointer; display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 13px; box-shadow: -4px 0 12px rgba(0,0,0,0.2); transition: all 0.3s; pointer-events: auto; z-index: calc(var(--z-eliyah, 1001) + 1); }
        .eliyah-toggle-tab:hover { left: -52px; background: linear-gradient(180deg, #6b4423 0%, #8b5a2b 50%, #6b4423 100%); }
        
        /* Header */
        .eliyah-header { padding: 16px 20px; background: linear-gradient(135deg, #8b5a2b 0%, #b8860b 100%); color: white; display: flex; align-items: center; justify-content: space-between; border-bottom: 2px solid #5d3a1a; }
        .eliyah-close-btn { background: rgba(255,255,255,0.2); border: 1px solid rgba(255,255,255,0.3); color: white; width: 36px; height: 36px; border-radius: 50%; cursor: pointer; font-size: 20px; display: flex; align-items: center; justify-content: center; transition: all 0.2s; }
        .eliyah-close-btn:hover { background: rgba(255,255,255,0.3); transform: scale(1.1); }
        
        /* Navigation Bar */
        .eliyah-nav-bar { padding: 12px 20px; background: #f5e6d3; border-bottom: 2px solid #d4a574; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
        .eliyah-select { padding: 8px 12px; background: white; border: 1px solid #d4a574; border-radius: 6px; font-family: Georgia, serif; color: #3d2817; cursor: pointer; }
        .eliyah-select:focus { outline: none; border-color: #8b5a2b; }
        .eliyah-nav-btn { padding: 8px 14px; background: linear-gradient(135deg, #8b5a2b, #b8860b); color: white; border: none; border-radius: 6px; cursor: pointer; font-weight: 600; transition: all 0.2s; }
        .eliyah-nav-btn:hover { background: linear-gradient(135deg, #6b4423, #8b5a2b); transform: scale(1.05); }
        
        /* Main Content Area */
        .eliyah-main-content { flex: 1; display: flex; overflow: hidden; }
        
        /* Scripture Pane (Left) */
        .eliyah-scripture-pane { flex: 1; display: flex; flex-direction: column; border-right: 2px solid #d4a574; min-width: 0; }
        .eliyah-toolbar { padding: 10px 16px; background: rgba(245, 230, 211, 0.7); border-bottom: 1px solid #d4a574; display: flex; gap: 8px; flex-wrap: wrap; }
        .eliyah-tool-btn2 { padding: 6px 14px; background: rgba(139, 90, 43, 0.15); border: 1px solid #d4a574; border-radius: 6px; cursor: pointer; font-size: 12px; color: #5d3a1a; transition: all 0.2s; }
        .eliyah-tool-btn2:hover { background: rgba(139, 90, 43, 0.25); border-color: #8b5a2b; }
        .eliyah-tool-btn2.active { background: rgba(184, 134, 11, 0.35); border-color: #b8860b; color: #5d3a1a; font-weight: 600; }
        .eliyah-chapter-title { font-family: Georgia, serif; font-size: 26px; color: #8b5a2b; padding: 16px 24px 8px; border-bottom: 2px solid #d4a574; }
        .eliyah-scripture-scroll { flex: 1; overflow-y: auto; padding: 16px 24px; }
        
        /* Verse Styles */
        .eliyah-verse2 { margin-bottom: 12px; line-height: 1.9; font-size: 16px; color: #3d2817; cursor: pointer; padding: 10px 14px; border-radius: 8px; transition: all 0.2s; font-family: Georgia, serif; border-left: 3px solid transparent; }
        .eliyah-verse2:hover { background: rgba(184, 134, 11, 0.08); border-left-color: #d4a574; }
        .eliyah-verse2.highlighted { background: rgba(255, 215, 0, 0.25); border-left: 4px solid #b8860b; }
        .eliyah-verse2.selected { background: rgba(184, 134, 11, 0.2); border: 2px solid #8b5a2b; border-left-width: 4px; }
        .eliyah-verse-num2 { display: inline-block; min-width: 30px; font-weight: bold; color: #b8860b; font-size: 13px; vertical-align: super; margin-right: 6px; }
        .eliyah-verse-text2 { display: inline; }
        .eliyah-word { color: #0066cc; cursor: pointer; text-decoration: underline dotted; transition: all 0.2s; }
        .eliyah-word:hover { color: #004499; background: rgba(0, 102, 204, 0.12); border-radius: 3px; }
        
        /* Study Pane (Right) */
        .eliyah-study-pane { width: 380px; display: flex; flex-direction: column; background: #fffef8; }
        .eliyah-study-tabs { display: flex; background: #f5e6d3; border-bottom: 2px solid #d4a574; position: sticky; top: 0; z-index: 10; pointer-events: auto; }
        .eliyah-study-tab { flex: 1; padding: 12px 8px; cursor: pointer; text-align: center; font-size: 11px; font-weight: 500; color: #5d3a1a; border-bottom: 3px solid transparent; transition: all 0.2s; position: relative; z-index: 11; pointer-events: auto; }
        .eliyah-study-tab:hover { background: rgba(184, 134, 11, 0.1); }
        .eliyah-study-tab.active { background: #fffef8; border-bottom-color: #b8860b; color: #8b5a2b; font-weight: 600; }
        .eliyah-study-content { flex: 1; overflow-y: auto; }
        .eliyah-study-pane-content { padding: 16px; }
        
        /* Lexicon Styles */
        .eliyah-lexicon-header { font-size: 13px; color: var(--ink); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 8px; }
        .eliyah-lexicon-hint { font-size: 13px; color: #6b5540; margin-bottom: 16px; padding: 10px; background: rgba(245, 230, 211, 0.5); border-radius: 6px; }
        .eliyah-lexicon-result { min-height: 200px; }
        .eliyah-lexicon-empty { text-align: center; color: var(--ink-soft); padding: 40px 20px; }
        .eliyah-lexicon-card { padding: 20px; background: white; border: 2px solid #d4a574; border-radius: 10px; }
        .eliyah-lexicon-word { font-size: 24px; font-weight: bold; color: #8b5a2b; margin-bottom: 6px; }
        .eliyah-lexicon-pronun { font-style: italic; color: var(--ink-soft); margin-bottom: 12px; }
        .eliyah-lexicon-def { font-size: 14px; line-height: 1.7; color: #3d2817; margin-bottom: 12px; }
        .eliyah-lexicon-strongs { padding: 10px 14px; background: rgba(184, 134, 11, 0.12); border-radius: 6px; font-size: 13px; color: #5d3a1a; }
        
        /* Commentary Styles */
        .eliyah-commentary-header { font-size: 13px; color: var(--ink); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 12px; }
        .eliyah-commentary-section { margin-bottom: 20px; }
        .eliyah-commentary-title { font-weight: 600; color: #8b5a2b; margin-bottom: 10px; font-size: 15px; }
        .eliyah-commentary-text { font-size: 14px; line-height: 1.75; color: #3d2817; }
        .eliyah-commentary-text p { margin-bottom: 10px; }
        .eliyah-context-box { padding: 16px; background: rgba(245, 230, 211, 0.6); border: 1px solid #d4a574; border-radius: 8px; margin-top: 16px; }
        .eliyah-context-title { font-weight: 600; color: #8b5a2b; margin-bottom: 8px; font-size: 13px; }
        .eliyah-context-text { font-size: 13px; line-height: 1.6; color: #5d3a1a; }
        
        /* Cross Reference Styles */
        .eliyah-cross-header { font-size: 13px; color: var(--ink); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 12px; }
        .eliyah-cross-item { padding: 14px; background: rgba(245, 230, 211, 0.5); border: 1px solid #d4a574; border-radius: 8px; margin-bottom: 10px; cursor: pointer; transition: all 0.2s; }
        .eliyah-cross-item:hover { background: rgba(184, 134, 11, 0.15); border-color: #8b5a2b; transform: translateX(4px); }
        .eliyah-cross-ref { font-weight: 600; color: #8b5a2b; margin-bottom: 6px; }
        .eliyah-cross-text { font-size: 13px; line-height: 1.6; color: #3d2817; font-style: italic; }
        
        /* Notes Styles */
        .eliyah-notes-header { font-size: 13px; color: var(--ink); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 12px; }
        .eliyah-notes-form { margin-bottom: 20px; padding-bottom: 16px; border-bottom: 1px solid #d4a574; }
        .eliyah-note-input { width: 100%; padding: 10px 12px; border: 1px solid #d4a574; border-radius: 6px; font-family: Georgia, serif; margin-bottom: 8px; }
        .eliyah-note-input:focus { outline: none; border-color: #8b5a2b; }
        .eliyah-note-textarea { width: 100%; height: 100px; padding: 10px 12px; border: 1px solid #d4a574; border-radius: 6px; font-family: Georgia, serif; resize: vertical; }
        .eliyah-note-textarea:focus { outline: none; border-color: #8b5a2b; }
        .eliyah-note-save-btn { margin-top: 10px; padding: 10px 20px; background: linear-gradient(135deg, #8b5a2b, #b8860b); color: white; border: none; border-radius: 6px; cursor: pointer; font-weight: 600; transition: all 0.2s; }
        .eliyah-note-save-btn:hover { background: linear-gradient(135deg, #6b4423, #8b5a2b); }
        .eliyah-note-card { padding: 14px; background: rgba(255, 255, 255, 0.8); border: 1px solid #d4a574; border-radius: 8px; margin-bottom: 10px; }
        .eliyah-note-card-ref { font-weight: 600; color: #8b5a2b; margin-bottom: 6px; }
        .eliyah-note-card-text { font-size: 13px; line-height: 1.6; color: #3d2817; }
        .eliyah-note-card-date { font-size: 13px; color: var(--ink); margin-top: 8px; }
        
        /* Search Bar */
        .eliyah-search-bar { padding: 12px 16px; background: #f5e6d3; border-top: 2px solid #d4a574; display: flex; gap: 8px; }
        .eliyah-search-input { flex: 1; padding: 10px 14px; border: 1px solid #d4a574; border-radius: 6px; font-family: Georgia, serif; }
        .eliyah-search-input:focus { outline: none; border-color: #8b5a2b; }
        .eliyah-search-btn { padding: 10px 16px; background: linear-gradient(135deg, #8b5a2b, #b8860b); color: white; border: none; border-radius: 6px; cursor: pointer; }
        
        /* Footer */
        .eliyah-footer { padding: 10px 20px; background: linear-gradient(135deg, #5d3a1a 0%, #3d2817 100%); color: #d4b896; font-size: 12px; display: flex; align-items: center; gap: 16px; }
        .eliyah-footer-tool { cursor: pointer; padding: 4px 10px; border-radius: 4px; transition: all 0.2s; }
        .eliyah-footer-tool:hover { background: rgba(255,255,255,0.1); color: white; }

        /* ═══════════════════════════════════════════════════════════════ */
        /* THE WELLSPRING - Bottom Expandable Panel (Parchment Theme)     */
        /* ═══════════════════════════════════════════════════════════════ */
        
        /* Toggle Tab at Bottom */
        .wellspring-toggle { 
            position: fixed; 
            bottom: 0; 
            left: 50%; 
            transform: translateX(-50%); 
            background: linear-gradient(135deg, var(--ink) 0%, #3D2E1F 100%);
            color: var(--parchment); 
            padding: 10px 32px; 
            border-radius: var(--radius-lg) var(--radius-lg) 0 0; 
            cursor: pointer; 
            z-index: 1002; 
            display: flex; 
            align-items: center; 
            gap: 12px; 
            font-weight: 600; 
            font-size: 14px; 
            box-shadow: 0 -4px 20px rgba(92, 77, 60, 0.3); 
            transition: all 0.3s; 
            border: 2px dashed var(--thread);
            border-bottom: none; 
        }
        .wellspring-toggle:hover { 
            background: linear-gradient(135deg, #3D2E1F 0%, var(--ink) 100%);
            transform: translateX(-50%) translateY(-4px); 
        }
        .wellspring-toggle-icon { color: var(--thread); animation: twinkle 2s ease-in-out infinite; }
        @keyframes twinkle { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }
        
        /* Main Panel */
        .wellspring-panel { 
            position: fixed; 
            bottom: -100%; 
            left: 0; 
            right: 0; 
            height: 100%; 
            background: 
                linear-gradient(180deg, var(--parchment) 0%, var(--parchment-aged) 50%, var(--parchment-deep) 100%),
                repeating-linear-gradient(
                    0deg,
                    transparent,
                    transparent 100px,
                    rgba(196, 180, 142, 0.05) 100px,
                    rgba(196, 180, 142, 0.05) 101px
                );
            background-color: var(--parchment);
            z-index: 1001; 
            transition: bottom 0.5s cubic-bezier(0.4, 0, 0.2, 1); 
            display: flex; 
            flex-direction: column;
            border-top: 4px solid var(--thread);
        }
        .wellspring-panel.open { bottom: 0; }
        
        /* Collapse Button */
        .wellspring-collapse { padding: 16px; display: flex; justify-content: center; background: var(--parchment-aged); border-bottom: 2px dashed var(--parchment-dark); }
        .wellspring-collapse-btn { 
            background: linear-gradient(135deg, var(--thread) 0%, var(--thread-hover) 100%);
            color: var(--white); 
            padding: 10px 32px; 
            border-radius: var(--radius-xl); 
            cursor: pointer; 
            display: flex; 
            align-items: center; 
            gap: 8px; 
            font-weight: 600; 
            transition: all 0.3s; 
            border: 2px solid var(--thread-hover);
        }
        .wellspring-collapse-btn:hover { 
            background: linear-gradient(135deg, var(--thread-hover) 0%, var(--thread-glow) 100%);
            transform: scale(1.05); 
            box-shadow: 0 4px 16px rgba(196, 136, 28, 0.4);
        }
        
        /* Content Area */
        .wellspring-content { flex: 1; overflow-y: auto; display: flex; flex-direction: column; }
        
        /* Header */
        .wellspring-header { text-align: center; padding: 24px; background: var(--parchment); }
        .wellspring-header h2 { font-family: var(--font-display); font-size: 32px; color: var(--ink); margin-bottom: 8px; }
        .wellspring-header p { color: var(--ink-soft); font-size: 14px; }
        
        /* Mode Selector */
        .wellspring-modes { display: flex; justify-content: center; gap: 16px; padding: 16px; flex-wrap: wrap; background: var(--parchment-aged); border-bottom: 2px dashed var(--parchment-dark); }
        .wellspring-mode { 
            background: var(--parchment); 
            border: 2px dashed var(--parchment-edge);
            border-radius: var(--radius-lg); 
            padding: 16px 24px; 
            cursor: pointer; 
            transition: all 0.3s; 
            text-align: center; 
            min-width: 100px; 
        }
        .wellspring-mode:hover { 
            background: var(--parchment-aged); 
            border-color: var(--thread-soft);
            transform: translateY(-4px); 
        }
        .wellspring-mode.active { 
            background: var(--parchment);
            border: 2px solid var(--thread);
            box-shadow: 0 4px 16px rgba(196, 136, 28, 0.25); 
        }
        .mode-icon { font-size: 28px; display: block; margin-bottom: 6px; }
        .mode-label { color: var(--ink); font-size: 13px; font-weight: 600; }
        
        /* Main Content Area */
        .wellspring-main { flex: 1; padding: 24px; display: flex; justify-content: center; align-items: center; background: var(--parchment); }
        .wellspring-mode-content { display: none; width: 100%; max-width: 800px; }
        .wellspring-mode-content.active { display: block; }
        
        /* Ambient Mode */
        .ambient-display { text-align: center; margin-bottom: 32px; }
        .ambient-visual { position: relative; width: 200px; height: 200px; margin: 0 auto 24px; }
        .ambient-orb { position: absolute; inset: 20px; background: radial-gradient(circle, var(--thread) 0%, var(--thread-hover) 50%, transparent 70%); border-radius: 50%; animation: pulse 4s ease-in-out infinite; }
        .ambient-rings { position: absolute; inset: 0; border: 2px dashed var(--thread-soft); border-radius: 50%; animation: expand 4s ease-in-out infinite; }
        @keyframes pulse { 0%, 100% { transform: scale(1); opacity: 0.8; } 50% { transform: scale(1.1); opacity: 1; } }
        @keyframes expand { 0% { transform: scale(0.8); opacity: 0.5; } 100% { transform: scale(1.5); opacity: 0; } }
        .ambient-verse-text { font-family: var(--font-display); font-size: 24px; color: var(--ink); font-style: italic; margin-bottom: 8px; }
        .ambient-verse-ref { color: var(--thread); font-size: 14px; font-weight: 600; }
        .ambient-sounds { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; }
        .sound-option { 
            background: var(--parchment-aged); 
            border: 2px dashed var(--parchment-edge);
            border-radius: var(--radius-xl); 
            padding: 10px 20px; 
            cursor: pointer; 
            color: var(--ink); 
            transition: all 0.2s; 
        }
        .sound-option:hover { 
            background: var(--parchment);
            border-color: var(--thread);
            color: var(--thread);
        }
        
        /* Breathe Mode */
        .breathe-container { text-align: center; }
        .breathe-circle { 
            width: 250px; 
            height: 250px; 
            margin: 0 auto 32px; 
            border-radius: 50%; 
            background: radial-gradient(circle, var(--parchment) 0%, var(--parchment-aged) 100%);
            border: 4px dashed var(--thread);
            display: flex; 
            flex-direction: column; 
            align-items: center; 
            justify-content: center; 
            transition: all 1s ease;
            box-shadow: var(--shadow-lg);
        }
        .breathe-circle.inhale { transform: scale(1.2); background: radial-gradient(circle, var(--parchment) 0%, var(--thread-faint) 100%); border-style: solid; }
        .breathe-circle.exhale { transform: scale(0.9); }
        .breathe-text { font-size: 24px; color: var(--ink); font-weight: 600; font-family: var(--font-display); }
        .breathe-timer { font-size: 48px; color: var(--thread); font-weight: bold; }
        .breathe-controls { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; margin-bottom: 24px; }
        .breathe-btn { 
            background: var(--parchment-aged); 
            border: 2px dashed var(--parchment-edge);
            border-radius: var(--radius-md); 
            padding: 10px 20px; 
            color: var(--ink); 
            cursor: pointer; 
            transition: all 0.2s; 
        }
        .breathe-btn:hover { 
            background: var(--thread);
            color: var(--white);
            border-color: var(--thread);
        }
        .breathe-verse { color: var(--ink-soft); font-style: italic; font-size: 14px; }
        
        /* Reflect Mode */
        .reflect-container { max-width: 600px; margin: 0 auto; }
        .reflect-prompt { text-align: center; margin-bottom: 24px; }
        .reflect-icon { font-size: 48px; margin-bottom: 12px; }
        .reflect-question { font-family: var(--font-display); font-size: 24px; color: var(--ink); margin-bottom: 16px; }
        .reflect-new-btn { 
            background: transparent; 
            border: 2px dashed var(--thread-soft);
            color: var(--thread); 
            padding: 8px 16px; 
            border-radius: var(--radius-xl); 
            cursor: pointer; 
            transition: all 0.2s; 
        }
        .reflect-new-btn:hover { 
            border-color: var(--thread);
            background: var(--thread);
            color: var(--white);
        }
        .reflect-journal textarea { 
            width: 100%; 
            height: 150px; 
            background: var(--parchment-aged);
            border: 2px dashed var(--parchment-edge);
            border-radius: var(--radius-lg); 
            padding: 16px; 
            color: var(--ink); 
            font-family: var(--font-display); 
            font-size: 16px; 
            resize: none; 
        }
        .reflect-journal textarea:focus { 
            outline: none; 
            border-color: var(--thread);
            background: var(--parchment);
        }
        .reflect-actions { display: flex; justify-content: center; gap: 12px; margin-top: 16px; }
        .reflect-actions button { 
            background: linear-gradient(135deg, var(--thread) 0%, var(--thread-hover) 100%);
            border: none; 
            color: var(--white); 
            padding: 10px 24px; 
            border-radius: var(--radius-md); 
            cursor: pointer; 
            transition: all 0.2s; 
        }
        .reflect-actions button:hover { transform: scale(1.05); box-shadow: 0 4px 12px rgba(196, 136, 28, 0.3); }
        
        /* Worship Mode */
        .worship-container { display: flex; flex-direction: column; gap: 20px; }
        .worship-now-playing { 
            display: flex; 
            align-items: center; 
            gap: 16px; 
            background: var(--parchment-aged);
            padding: 16px; 
            border-radius: var(--radius-lg); 
            border: 2px dashed var(--parchment-edge);
        }
        .worship-album { font-size: 48px; }
        .worship-title { font-size: 18px; color: var(--ink); font-weight: 600; }
        .worship-artist { color: var(--ink-soft); font-size: 14px; }
        .worship-playlist { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
        .worship-track { 
            background: var(--parchment-aged);
            border: 2px dashed var(--parchment-edge);
            border-radius: var(--radius-md); 
            padding: 12px 16px; 
            cursor: pointer; 
            color: var(--ink); 
            transition: all 0.2s; 
        }
        .worship-track:hover { 
            background: var(--parchment);
            border-color: var(--thread);
            color: var(--thread);
        }
        .worship-lyrics { 
            background: var(--parchment-aged);
            border: 2px dashed var(--parchment-edge);
            border-radius: var(--radius-lg); 
            padding: 20px; 
            color: var(--ink-soft); 
            font-style: italic; 
            text-align: center; 
            max-height: 150px; 
            overflow-y: auto; 
        }
        
        /* Focus Mode */
        .focus-container { text-align: center; }
        .focus-timer-display { margin-bottom: 32px; }
        .focus-time { font-size: 72px; font-weight: bold; color: var(--thread); font-family: monospace; text-shadow: 0 0 30px rgba(196, 136, 28, 0.3); }
        .focus-label { color: var(--ink-soft); font-size: 16px; }
        .focus-presets { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; margin-bottom: 24px; }
        .focus-preset { 
            background: var(--parchment-aged);
            border: 2px dashed var(--parchment-edge);
            border-radius: var(--radius-md); 
            padding: 10px 20px; 
            color: var(--ink); 
            cursor: pointer; 
            transition: all 0.2s; 
        }
        .focus-preset:hover { 
            background: var(--parchment);
            border-color: var(--thread);
        }
        .focus-controls { display: flex; justify-content: center; gap: 12px; margin-bottom: 24px; }
        .focus-controls button { 
            background: linear-gradient(135deg, var(--thread) 0%, var(--thread-hover) 100%);
            border: none; 
            color: var(--white); 
            padding: 12px 24px; 
            border-radius: var(--radius-md); 
            cursor: pointer; 
            font-size: 16px; 
            transition: all 0.2s; 
        }
        .focus-controls button:hover { transform: scale(1.05); box-shadow: 0 4px 12px rgba(196, 136, 28, 0.3); }
        .focus-verse { color: var(--ink-soft); font-style: italic; font-size: 14px; }
        
        /* Gratitude Mode */
        .gratitude-container { max-width: 500px; margin: 0 auto; text-align: center; }
        .gratitude-header { display: flex; justify-content: center; gap: 12px; font-size: 24px; color: var(--ink); margin-bottom: 24px; font-family: var(--font-display); }
        .gratitude-inputs { display: flex; flex-direction: column; gap: 12px; margin-bottom: 24px; }
        .gratitude-item { display: flex; align-items: center; gap: 12px; }
        .gratitude-num { 
            width: 32px; 
            height: 32px; 
            background: linear-gradient(135deg, var(--thread) 0%, var(--thread-hover) 100%);
            border-radius: 50%; 
            display: flex; 
            align-items: center; 
            justify-content: center; 
            color: var(--white); 
            font-weight: bold; 
        }
        .gratitude-input { 
            flex: 1; 
            background: var(--parchment-aged);
            border: 2px dashed var(--parchment-edge);
            border-radius: var(--radius-md); 
            padding: 12px 16px; 
            color: var(--ink); 
            font-size: 16px; 
        }
        .gratitude-input:focus { 
            outline: none; 
            border-color: var(--thread);
            background: var(--parchment);
        }
        .gratitude-save { 
            background: linear-gradient(135deg, var(--thread) 0%, var(--thread-hover) 100%);
            border: none; 
            color: var(--white); 
            padding: 12px 32px; 
            border-radius: var(--radius-md); 
            cursor: pointer; 
            font-weight: 600; 
            font-size: 16px; 
            transition: all 0.2s; 
        }
        .gratitude-save:hover { transform: scale(1.05); box-shadow: 0 4px 16px rgba(196, 136, 28, 0.4); }
        .gratitude-verse { color: var(--ink-soft); font-style: italic; font-size: 14px; margin-top: 24px; }
        
        /* Quick Tools Bar */
        .wellspring-tools { 
            display: flex; 
            justify-content: center; 
            gap: 16px; 
            padding: 20px; 
            background: var(--parchment-aged);
            border-top: 2px dashed var(--parchment-dark);
            flex-wrap: wrap; 
        }
        .wellspring-tool { 
            background: var(--parchment); 
            border: 2px dashed var(--parchment-edge);
            border-radius: var(--radius-md); 
            padding: 10px 20px; 
            cursor: pointer; 
            color: var(--ink); 
            transition: all 0.2s; 
        }
        .wellspring-tool:hover { 
            background: var(--thread);
            color: var(--white);
            border-color: var(--thread);
        }

        /* ═══════════════════════════════════════════════════════════════ */
        /* THE STOA - Forum Styles */
        /* ═══════════════════════════════════════════════════════════════ */
        .stoa-nav-item { padding: 8px 12px; margin: 3px 0; border-radius: 6px; cursor: pointer; background: rgba(255,255,255,0.5); border-left: 3px solid transparent; display: flex; align-items: center; gap: 8px; transition: all 0.2s; font-size: 0.9rem; }
        .stoa-nav-item:hover { background: rgba(184, 134, 11, 0.15); border-left-color: var(--gold); transform: translateX(3px); }
        .stoa-nav-item.active { background: rgba(184, 134, 11, 0.25); border-left-color: var(--gold); font-weight: 600; }
        .stoa-badge { background: var(--gold); color: white; border-radius: 10px; padding: 1px 6px; font-size: 0.7rem; margin-left: auto; }
        .stoa-sort-btn { padding: 6px 14px; background: rgba(255,255,255,0.7); border: 1px solid var(--gold); border-radius: 16px; cursor: pointer; font-size: 0.85rem; transition: all 0.2s; }
        .stoa-sort-btn:hover { background: rgba(184, 134, 11, 0.2); }
        .stoa-sort-btn.active { background: var(--gold); color: white; }
        .stoa-post { background: #fffef8; border: 1px solid var(--gold); border-radius: 8px; margin-bottom: 12px; overflow: hidden; transition: all 0.2s; }
        .stoa-post:hover { box-shadow: 0 4px 16px rgba(139, 90, 43, 0.2); transform: translateY(-2px); }
        .stoa-post-header { display: flex; align-items: center; padding: 10px 14px; background: rgba(245, 230, 211, 0.5); border-bottom: 1px solid var(--parchment-dark); gap: 10px; }
        .stoa-avatar { width: 36px; height: 36px; border-radius: 50%; background: linear-gradient(135deg, var(--gold) 0%, #D97706 100%); display: flex; align-items: center; justify-content: center; color: white; font-weight: 600; }
        .stoa-post-body { display: flex; padding: 0; }
        .stoa-voting { width: 55px; display: flex; flex-direction: column; align-items: center; padding: 12px 0; background: rgba(245, 230, 211, 0.3); border-right: 1px solid var(--parchment-dark); }
        .stoa-vote-btn { background: none; border: none; font-size: 1.3rem; cursor: pointer; padding: 6px; filter: grayscale(50%); transition: all 0.2s; }
        .stoa-vote-btn:hover { transform: scale(1.2); filter: grayscale(0%); }
        .stoa-vote-btn.blessed { filter: grayscale(0%) drop-shadow(0 0 6px gold); }
        .stoa-flair { display: inline-block; background: linear-gradient(135deg, var(--gold) 0%, #D97706 100%); color: white; padding: 3px 8px; border-radius: 4px; font-size: 0.7rem; font-weight: 600; margin-bottom: 8px; }
        .stoa-title { font-size: 1.1rem; font-weight: 600; color: #3d2817; margin-bottom: 8px; cursor: pointer; line-height: 1.3; }
        .stoa-title:hover { color: var(--gold); }
        .stoa-text { font-size: 0.9rem; line-height: 1.6; color: #4a3319; margin-bottom: 10px; padding: 0 14px 0 0; }
        .stoa-scripture { background: rgba(184, 134, 11, 0.1); border-left: 3px solid var(--gold); padding: 8px 12px; margin: 10px 14px 10px 0; font-style: italic; color: #5d3a1a; font-size: 0.85rem; border-radius: 0 4px 4px 0; }
        .stoa-actions { display: flex; gap: 8px; padding: 10px 14px 10px 0; border-top: 1px solid var(--parchment-dark); margin-top: 8px; }
        .stoa-actions button { background: none; border: none; color: var(--ink-soft); cursor: pointer; padding: 4px 8px; border-radius: 4px; font-size: 0.8rem; transition: all 0.2s; }
        .stoa-actions button:hover { background: rgba(184, 134, 11, 0.1); color: #5d3a1a; }
        .stoa-comments { display: none; padding: 14px; background: rgba(245, 230, 211, 0.3); border-top: 2px solid var(--gold); }
        .stoa-post.expanded .stoa-comments { display: block; }
        .stoa-comment { margin-bottom: 10px; padding: 10px; background: #fffef8; border-radius: 6px; border: 1px solid var(--parchment-dark); margin-left: 16px; border-left: 2px solid var(--gold); }
        .stoa-comment-header { display: flex; align-items: center; margin-bottom: 6px; gap: 8px; }
        .stoa-comment-avatar { width: 24px; height: 24px; border-radius: 50%; background: linear-gradient(135deg, #6b4423 0%, #8b5a2b 100%); display: flex; align-items: center; justify-content: center; color: white; font-size: 0.8rem; }
        .stoa-comment-input { margin-top: 12px; margin-left: 16px; }
        .stoa-comment-input textarea { width: 100%; padding: 10px; border: 1px solid var(--gold); border-radius: 6px; font-family: inherit; font-size: 0.9rem; min-height: 60px; resize: vertical; }
        .stoa-comment-input button { margin-top: 8px; padding: 6px 16px; background: var(--gold); color: white; border: none; border-radius: 6px; cursor: pointer; font-weight: 600; }

        /* ═══════════════════════════════════════════════════════════════ */
        /* THE GUILDHALL - Chat Styles (Parchment Theme) */
        /* ═══════════════════════════════════════════════════════════════ */
        .guild-server { width: 48px; height: 48px; border-radius: 50%; background: linear-gradient(135deg, var(--thread) 0%, var(--thread-hover) 100%); margin: 6px 0; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; transition: all 0.2s; border: 2px dashed var(--parchment-edge); }
        .guild-server:hover { border-radius: 35%; border-color: var(--thread); border-style: solid; }
        .guild-server.active { border-radius: 35%; border-color: var(--thread); border-style: solid; box-shadow: 0 0 12px rgba(196, 136, 28, 0.4); }
        .guild-channel { padding: 6px 10px; margin: 2px 0; border-radius: var(--radius-sm); cursor: pointer; display: flex; align-items: center; color: var(--ink-soft); transition: all 0.2s; font-size: 0.9rem; gap: 6px; }
        .guild-channel:hover { background: var(--parchment-aged); color: var(--ink); }
        .guild-channel.active { background: var(--parchment); color: var(--ink); font-weight: 600; border-left: 3px solid var(--thread); }
        .guild-unread { background: var(--berry); color: white; border-radius: 8px; padding: 1px 5px; font-size: 0.7rem; margin-left: auto; }
        .guild-message { display: flex; padding: 6px 0; margin: 0 12px; transition: background 0.2s; border-radius: var(--radius-sm); }
        .guild-message:hover { background: var(--parchment-aged); margin: 0; padding: 6px 12px; }
        .guild-msg-avatar { width: 38px; height: 38px; border-radius: 50%; margin-right: 12px; flex-shrink: 0; background: linear-gradient(135deg, var(--thread) 0%, var(--thread-hover) 100%); display: flex; align-items: center; justify-content: center; font-weight: 600; color: white; }
        .guild-msg-content { flex: 1; }
        .guild-msg-header { display: flex; align-items: baseline; margin-bottom: 4px; gap: 6px; }
        .guild-msg-author { font-weight: 600; color: var(--ink); cursor: pointer; }
        .guild-msg-author:hover { text-decoration: underline; color: var(--thread); }
        .guild-role-badge { background: linear-gradient(135deg, var(--thread-hover) 0%, var(--thread) 100%); color: white; font-size: 0.75rem; padding: 2px 5px; border-radius: 3px; }
        .guild-bot-badge { background: var(--sky); color: white; font-size: 0.7rem; padding: 2px 5px; border-radius: 3px; }
        .guild-msg-time { font-size: 0.75rem; color: var(--ink-faint); }
        .guild-msg-text { color: var(--ink-soft); line-height: 1.45; font-size: 0.95rem; }
        .guild-bot-text { background: var(--thread-faint); border-radius: var(--radius-md); padding: 10px; margin: 6px 0; border: 1px dashed var(--thread-soft); }
        .guild-reactions { display: flex; gap: 5px; margin-top: 6px; }
        .guild-reaction { background: var(--parchment-aged); border: 1px dashed var(--parchment-edge); border-radius: 10px; padding: 3px 7px; font-size: 0.8rem; cursor: pointer; transition: all 0.2s; }
        .guild-reaction:hover { background: var(--parchment); border-color: var(--thread-soft); }
        .guild-reaction.active { background: var(--thread-faint); border-color: var(--thread); }
        .guild-member { display: flex; align-items: center; padding: 5px 6px; margin: 3px 0; border-radius: var(--radius-sm); cursor: pointer; transition: all 0.2s; }
        .guild-member:hover { background: var(--parchment-aged); }
        .guild-member-avatar { width: 28px; height: 28px; border-radius: 50%; margin-right: 10px; position: relative; background: linear-gradient(135deg, var(--clay) 0%, var(--clay-soft) 100%); display: flex; align-items: center; justify-content: center; font-weight: 600; color: white; font-size: 0.75rem; }
        .guild-status { position: absolute; bottom: -2px; right: -2px; width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--parchment); }
        .guild-status.online { background: var(--olive); }
        .guild-status.idle { background: var(--thread); }
        .guild-status.dnd { background: var(--berry); }
        .guild-status.prayer { background: var(--compass); }
        .guild-status.offline { background: var(--ink-faint); }
        .guild-member-info { flex: 1; }
        .guild-member-name { font-size: 0.9rem; color: var(--ink); }
        .guild-member-status { font-size: 0.75rem; color: var(--ink-faint); }
        @keyframes typing { 0%, 60%, 100% { transform: translateY(0); } 30% { transform: translateY(-6px); } }

        /* Chat (Discord-style) - Legacy */
        .chat-container { display: flex; height: calc(100vh - var(--header-height) - 2 * var(--space-lg)); }
        .chat-groups { width: 200px; background: var(--parchment-deep); padding: var(--space-md); border-right: 1px solid var(--parchment-dark); overflow-y: auto; }
        .chat-group { padding: var(--space-sm); cursor: pointer; border-radius: 8px; margin-bottom: var(--space-xs); }
        .chat-group:hover { background: var(--parchment); }
        .chat-group.active { background: var(--surface); }
        .chat-main { flex: 1; display: flex; flex-direction: column; }
        .chat-messages { flex: 1; overflow-y: auto; padding: var(--space-md); }
        .chat-message { display: flex; align-items: flex-start; gap: var(--space-sm); margin-bottom: var(--space-md); }
        .chat-avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--olive-soft); display: flex; align-items: center; justify-content: center; font-size: 0.9rem; }
        .chat-info { flex: 1; }
        .chat-user { font-weight: 500; }
        .chat-text { font-size: 0.95rem; }
        .chat-time { font-size: 0.75rem; color: var(--ink-faint); }
        .chat-input { display: flex; padding: var(--space-md); border-top: 1px solid var(--parchment-dark); background: var(--surface); }
        .chat-input input { flex: 1; padding: var(--space-sm); border: 1px solid var(--parchment-dark); border-radius: 100px; margin-right: var(--space-sm); }
        .chat-input button { padding: var(--space-sm) var(--space-md); }

        /* ═══════════════════════════════════════════════════════════════ */
        /* THREAD COMPASS - Intro Sections */
        /* ═══════════════════════════════════════════════════════════════ */

        /* Layer Info Panel - Click instruction */
        .layer-info-panel {
            background: linear-gradient(135deg, var(--sanctuary) 0%, var(--compass) 100%);
            border-radius: 16px;
            padding: var(--space-xl);
            margin: var(--space-xl) 0;
            text-align: center;
            border: 3px solid var(--parchment-dark);
            box-shadow: 0 4px 16px rgba(0,0,0,0.1);
        }

        .layer-info-panel p {
            font-size: 1.1rem;
            color: white;
            margin: 0;
            font-weight: 600;
            line-height: 1.6;
        }

        .layer-info-sub {
            font-size: 0.95rem !important;
            color: rgba(255, 255, 255, 0.9) !important;
            font-weight: 500 !important;
            margin-top: var(--space-sm) !important;
        }

        /* Trellis Analogy Card */
        .trellis-analogy-card {
            display: flex;
            gap: var(--space-lg);
            align-items: flex-start;
            background: linear-gradient(135deg, var(--olive-soft) 0%, var(--family) 100%);
            border-radius: 16px;
            padding: var(--space-xl);
            margin: var(--space-xl) 0;
            border: 3px solid var(--olive);
            box-shadow: 0 4px 16px rgba(107, 123, 76, 0.25);
        }

        .trellis-icon {
            font-size: 3.5rem;
            flex-shrink: 0;
            line-height: 1;
        }

        .trellis-content h4 {
            font-family: var(--font-display);
            font-size: 1.6rem;
            color: white;
            margin: 0 0 var(--space-md) 0;
            font-weight: 700;
        }

        .trellis-content p {
            font-size: 1.05rem;
            color: white;
            line-height: 1.7;
            margin: 0;
        }

        .trellis-content strong {
            font-weight: 700;
            text-decoration: underline;
        }

        /* Thread Info Section - Main heading */
        .thread-info {
            margin-top: var(--space-2xl);
            padding: var(--space-xl);
            background: linear-gradient(135deg, var(--surface) 0%, var(--parchment) 100%);
            border-radius: 20px;
            border: 3px solid var(--parchment-dark);
            box-shadow: 0 6px 24px rgba(0,0,0,0.08);
        }

        .thread-info > h3 {
            font-family: var(--font-display);
            font-size: 2rem;
            color: var(--ink);
            margin: 0 0 var(--space-lg) 0;
            text-align: center;
            padding-bottom: var(--space-md);
            border-bottom: 3px solid var(--gold);
        }

        .thread-intro-text {
            font-size: 1.1rem;
            color: var(--ink-soft);
            line-height: 1.9;
            margin: var(--space-xl) auto var(--space-2xl);
            text-align: center;
            max-width: 850px;
            padding: 0 var(--space-xl);
        }

        .thread-intro-text strong {
            color: var(--ink);
            font-weight: 700;
        }

        .thread-info details { background: var(--parchment-deep); border-radius: 12px; margin-bottom: var(--space-md); padding: var(--space-md); box-shadow: var(--shadow-xs); }
        .thread-info summary { font-family: var(--font-display); font-size: 1.1rem; cursor: pointer; outline: none; list-style: none; display: block; }
        .thread-info summary::-webkit-details-marker { display: none; }
        .thread-info summary::after { content: " +"; float: right; transition: transform 0.2s; }
        .thread-info details[open] summary::after { content: " −"; }
        .thread-info p { margin: var(--space-sm) 0; color: var(--ink-soft); line-height: 1.5; }
        .thread-info ul { margin-left: var(--space-md); list-style: disc; color: var(--ink-soft); }

        /* ═══════════════════════════════════════════════════════════════ */
        /* FAMILY ROOM - Profile Panel */
        /* ═══════════════════════════════════════════════════════════════ */

        .family-profile-panel {
            background: linear-gradient(135deg, var(--surface) 0%, var(--parchment) 100%);
            border-radius: 20px;
            padding: 0;
            margin: var(--space-2xl) 0;
            border: 3px solid var(--parchment-dark);
            box-shadow: 0 8px 32px rgba(0,0,0,0.15);
            overflow: hidden;
        }

        .profile-panel-header {
            background: linear-gradient(135deg, var(--family) 0%, var(--olive) 100%);
            padding: var(--space-xl);
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            border-bottom: 3px solid var(--parchment-dark);
        }

        .profile-panel-member {
            display: flex;
            gap: var(--space-lg);
            align-items: center;
            flex: 1;
        }

        .profile-panel-avatar {
            width: 80px;
            height: 80px;
            border-radius: 50%;
            background: var(--gold);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 3rem;
            border: 4px solid white;
            box-shadow: 0 4px 16px rgba(0,0,0,0.2);
            flex-shrink: 0;
        }

        .profile-panel-info {
            flex: 1;
        }

        .profile-panel-name {
            font-family: var(--font-display);
            font-size: 1.8rem;
            color: white;
            margin: 0 0 var(--space-xs) 0;
            font-weight: 700;
        }

        .profile-panel-role {
            font-size: 1rem;
            color: rgba(255, 255, 255, 0.9);
            margin: 0 0 var(--space-md) 0;
        }

        .profile-panel-tags {
            display: flex;
            gap: var(--space-xs);
            flex-wrap: wrap;
        }

        .profile-tag {
            padding: 6px 12px;
            background: rgba(255, 255, 255, 0.25);
            border-radius: 100px;
            font-size: 0.85rem;
            color: white;
            border: 1px solid rgba(255, 255, 255, 0.4);
            backdrop-filter: blur(4px);
        }

        .profile-panel-close {
            width: 40px;
            height: 40px;
            background: rgba(255, 255, 255, 0.2);
            border: 2px solid rgba(255, 255, 255, 0.4);
            border-radius: 50%;
            color: white;
            font-size: 1.5rem;
            cursor: pointer;
            transition: all 0.2s ease;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }

        .profile-panel-close:hover {
            background: rgba(255, 255, 255, 0.4);
            transform: scale(1.1);
        }

        .profile-panel-body {
            padding: var(--space-xl);
        }

        .profile-stats-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: var(--space-lg);
            margin-bottom: var(--space-2xl);
        }

        .profile-stat-card {
            background: white;
            border-radius: 12px;
            padding: var(--space-lg);
            border: 2px solid var(--parchment-dark);
            display: flex;
            gap: var(--space-md);
            box-shadow: 0 2px 8px rgba(0,0,0,0.05);
        }

        .stat-icon {
            font-size: 2.5rem;
            flex-shrink: 0;
            line-height: 1;
        }

        .stat-content {
            flex: 1;
        }

        .stat-content h4 {
            font-family: var(--font-display);
            font-size: 0.9rem;
            color: var(--ink-soft);
            margin: 0 0 var(--space-xs) 0;
            text-transform: uppercase;
            letter-spacing: 0.05em;
        }

        .stat-content p {
            font-size: 1.05rem;
            color: var(--ink);
            margin: 0;
            line-height: 1.5;
            font-weight: 600;
        }

        .identity-quote {
            font-family: var(--font-display);
            font-style: italic;
            color: var(--olive) !important;
            font-size: 1rem !important;
            font-weight: 500 !important;
        }

        .stat-progress {
            height: 8px;
            background: var(--parchment-deep);
            border-radius: 100px;
            overflow: hidden;
            margin-top: var(--space-sm);
        }

        .stat-progress-fill {
            height: 100%;
            background: linear-gradient(90deg, var(--family) 0%, var(--olive) 100%);
            border-radius: 100px;
            transition: width 0.5s ease;
        }

        .profile-badges {
            display: flex;
            gap: var(--space-sm);
            font-size: 1.5rem;
            margin-top: var(--space-xs);
        }

        .profile-badges span {
            padding: 8px;
            background: var(--parchment);
            border-radius: 8px;
            border: 2px solid var(--parchment-dark);
        }

        .profile-section {
            margin-bottom: var(--space-2xl);
        }

        .profile-section-title {
            font-family: var(--font-display);
            font-size: 1.4rem;
            color: var(--ink);
            margin: 0 0 var(--space-lg) 0;
            padding-bottom: var(--space-sm);
            border-bottom: 2px solid var(--parchment-dark);
        }

        .profile-studies {
            display: flex;
            flex-direction: column;
            gap: var(--space-md);
        }

        .profile-study-item {
            display: flex;
            gap: var(--space-md);
            align-items: flex-start;
            padding: var(--space-md);
            background: white;
            border-radius: 12px;
            border: 2px solid var(--parchment-dark);
        }

        .study-icon {
            font-size: 2rem;
            flex-shrink: 0;
        }

        .study-info {
            flex: 1;
        }

        .study-title {
            font-family: var(--font-display);
            font-size: 1.1rem;
            color: var(--ink);
            margin-bottom: var(--space-xs);
            font-weight: 600;
        }

        .study-progress {
            font-size: 0.9rem;
            color: var(--ink-soft);
        }

        .profile-tasks {
            display: flex;
            flex-direction: column;
            gap: var(--space-sm);
        }

        .profile-task-item {
            display: flex;
            gap: var(--space-md);
            align-items: center;
            padding: var(--space-md);
            background: white;
            border-radius: 12px;
            border: 2px solid var(--parchment-dark);
        }

        .task-check {
            width: 28px;
            height: 28px;
            border-radius: 50%;
            border: 3px solid var(--parchment-dark);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1rem;
            color: white;
            font-weight: 700;
            flex-shrink: 0;
            transition: all 0.2s ease;
        }

        .task-text {
            flex: 1;
            font-size: 1rem;
            color: var(--ink);
        }

        .task-time {
            font-size: 0.85rem;
            color: var(--ink-soft);
            flex-shrink: 0;
        }

        /* ═══════════════════════════════════════════════════════════════ */
        /* FAMILY ROOM - Lesson Popup Modal */
        /* ═══════════════════════════════════════════════════════════════ */

        .lesson-popup-overlay {
            position: fixed;
            inset: 0;
            background: rgba(0, 0, 0, 0.6);
            backdrop-filter: blur(4px);
            z-index: 10000;
            display: none;
            align-items: center;
            justify-content: center;
            padding: var(--space-lg);
            overflow-y: auto;
        }

        .lesson-popup-overlay.active {
            display: flex;
        }

        .lesson-popup {
            background: linear-gradient(135deg, var(--surface) 0%, var(--parchment) 100%);
            border-radius: 20px;
            max-width: 800px;
            width: 100%;
            max-height: 90vh;
            overflow-y: auto;
            border: 3px solid var(--parchment-dark);
            box-shadow: 0 12px 48px rgba(0,0,0,0.3);
            margin: auto;
        }

        .lesson-popup-header {
            background: linear-gradient(135deg, var(--family) 0%, var(--olive) 100%);
            padding: var(--space-xl);
            display: flex;
            gap: var(--space-lg);
            align-items: flex-start;
            border-bottom: 3px solid var(--parchment-dark);
            position: relative;
        }

        .popup-icon {
            width: 70px;
            height: 70px;
            background: rgba(255, 255, 255, 0.25);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 2.5rem;
            border: 3px solid rgba(255, 255, 255, 0.4);
            flex-shrink: 0;
            box-shadow: 0 4px 12px rgba(0,0,0,0.15);
        }

        .popup-header-info {
            flex: 1;
        }

        .popup-type-badge {
            display: inline-block;
            padding: 6px 14px;
            background: rgba(255, 255, 255, 0.3);
            border-radius: 100px;
            font-size: 0.8rem;
            font-weight: 700;
            color: white;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            margin-bottom: var(--space-sm);
        }

        .popup-title {
            font-family: var(--font-display);
            font-size: 1.8rem;
            color: white;
            margin: 0 0 var(--space-xs) 0;
            line-height: 1.3;
            font-weight: 700;
        }

        .popup-scripture {
            font-family: var(--font-display);
            font-size: 0.95rem;
            color: rgba(255, 255, 255, 0.9);
            font-style: italic;
        }

        .popup-close-btn {
            width: 40px;
            height: 40px;
            background: rgba(255, 255, 255, 0.2);
            border: 2px solid rgba(255, 255, 255, 0.4);
            border-radius: 50%;
            color: white;
            font-size: 1.5rem;
            cursor: pointer;
            transition: all 0.2s ease;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }

        .popup-close-btn:hover {
            background: rgba(255, 255, 255, 0.4);
            transform: scale(1.1);
        }

        .lesson-popup-body {
            padding: var(--space-2xl);
        }

        .popup-meta-row {
            display: flex;
            gap: var(--space-lg);
            margin-bottom: var(--space-2xl);
            flex-wrap: wrap;
        }

        .popup-meta-item {
            padding: 10px 16px;
            background: white;
            border-radius: 100px;
            font-size: 0.9rem;
            color: var(--ink);
            border: 2px solid var(--parchment-dark);
            font-weight: 600;
        }

        .popup-section {
            margin-bottom: var(--space-2xl);
        }

        .popup-section h3 {
            font-family: var(--font-display);
            font-size: 1.3rem;
            color: var(--ink);
            margin: 0 0 var(--space-md) 0;
            padding-bottom: var(--space-sm);
            border-bottom: 2px solid var(--parchment-dark);
        }

        .popup-section p {
            font-size: 1.05rem;
            color: var(--ink-soft);
            line-height: 1.7;
            margin: var(--space-md) 0;
        }

        .popup-scripture-box {
            background: linear-gradient(135deg, var(--gold-faint) 0%, var(--parchment) 100%);
            border-radius: 12px;
            padding: var(--space-xl);
            border-left: 4px solid var(--gold);
            margin: var(--space-lg) 0;
        }

        .scripture-text {
            font-family: var(--font-display);
            font-size: 1.15rem;
            color: var(--ink);
            font-style: italic;
            margin: 0 0 var(--space-sm) 0;
            line-height: 1.6;
        }

        .scripture-ref {
            font-size: 0.9rem;
            color: var(--ink-soft);
            font-weight: 600;
        }

        .popup-steps {
            display: flex;
            flex-direction: column;
            gap: var(--space-md);
        }

        .popup-step {
            display: flex;
            gap: var(--space-md);
            align-items: flex-start;
        }

        .step-number {
            width: 32px;
            height: 32px;
            background: linear-gradient(135deg, var(--family) 0%, var(--olive) 100%);
            color: white;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-family: var(--font-display);
            font-weight: 700;
            font-size: 0.95rem;
            flex-shrink: 0;
        }

        .step-text,
        .step-content {
            flex: 1;
            font-size: 1rem;
            color: var(--ink-soft);
            line-height: 1.6;
            padding-top: 4px;
        }

        .popup-questions {
            display: flex;
            flex-direction: column;
            gap: var(--space-md);
        }

        .popup-question {
            padding: var(--space-md) var(--space-lg);
            background: white;
            border-radius: 12px;
            border-left: 4px solid var(--sanctuary);
            font-size: 1rem;
            color: var(--ink);
            line-height: 1.6;
        }

        .popup-prayer {
            font-family: var(--font-display);
            font-size: 1.1rem;
            color: var(--ink);
            font-style: italic;
            line-height: 1.8;
            padding: var(--space-xl);
            background: linear-gradient(135deg, white 0%, var(--parchment) 100%);
            border-radius: 12px;
            border: 2px solid var(--parchment-dark);
        }

        .lesson-popup-footer {
            padding: var(--space-xl);
            background: var(--parchment);
            border-top: 3px solid var(--parchment-dark);
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: var(--space-lg);
            flex-wrap: wrap;
        }

        .popup-progress-section {
            flex: 1;
        }

        .popup-checkbox {
            display: flex;
            align-items: center;
            gap: var(--space-sm);
            cursor: pointer;
            font-size: 1rem;
            color: var(--ink);
            font-weight: 600;
        }

        .popup-checkbox input[type="checkbox"] {
            width: 24px;
            height: 24px;
            cursor: pointer;
        }

        .popup-actions {
            display: flex;
            gap: var(--space-md);
        }

        .btn {
            padding: 12px 24px;
            border-radius: 100px;
            font-family: var(--font-body);
            font-size: 1rem;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.2s ease;
            border: none;
        }

        .btn-secondary {
            background: white;
            color: var(--ink);
            border: 2px solid var(--parchment-dark);
        }

        .btn-secondary:hover {
            background: var(--parchment-deep);
        }

        .btn-primary {
            background: linear-gradient(135deg, var(--family) 0%, var(--olive) 100%);
            color: white;
            box-shadow: 0 4px 12px rgba(107, 123, 76, 0.3);
        }

        .btn-primary:hover {
            transform: scale(1.05);
            box-shadow: 0 6px 16px rgba(107, 123, 76, 0.4);
        }

        /* ═══════════════════════════════════════════════════════════════ */
        /* RIGHT PANEL (ID: #right-panel) — JS-Controlled State           */
        /* State classes: .open / .closed (controlled via JavaScript)     */
        /* Mobile: converts to full-screen drawer/modal                   */
        /* ═══════════════════════════════════════════════════════════════ */
        
        /* Right Sidebar - Desktop (persistent) */
        .right-sidebar { 
            width: var(--right-sidebar-width); 
            background: var(--surface); 
            border-left: 1px solid var(--parchment-dark); 
            display: flex; 
            flex-direction: column; 
            transition: width 0.3s var(--ease-gentle), transform 0.3s var(--ease-gentle); 
            overflow: hidden; 
            position: relative; 
        }
        
        /* JS-controlled state: closed */
        .right-sidebar.closed { 
            width: var(--right-sidebar-collapsed); 
            border-left: none; 
        }
        .right-sidebar.closed .right-toggle, 
        .right-sidebar.closed .bible-tabs, 
        .right-sidebar.closed .bible-content, 
        .right-sidebar.closed .right-sidebar-label { 
            display: none; 
        }
        
        /* Legacy support: collapsed class maps to closed */
        .right-sidebar.collapsed { width: var(--right-sidebar-collapsed); border-left: none; }
        .right-sidebar.collapsed .right-toggle, .right-sidebar.collapsed .bible-tabs, .right-sidebar.collapsed .bible-content, .right-sidebar.collapsed .right-sidebar-label { display: none; }
        .right-toggle { padding: var(--space-md); border-bottom: 1px solid var(--parchment-deep); display: flex; align-items: center; justify-content: space-between; min-height: 50px; }
        .right-title { font-family: var(--font-display); font-size: 1.1rem; }
        .right-toggle-btn { width: 32px; height: 32px; border: none; background: var(--gold); color: white; border-radius: 6px; cursor: pointer; display: flex; align-items: center; justify-content: center; z-index: 10; font-size: 1rem; flex-shrink: 0; }
        .right-toggle-btn:hover { background: #D97706; }
        /* Floating toggle for collapsed right sidebar */
        .right-sidebar-float-toggle { position: fixed; right: 0; top: 50%; transform: translateY(-50%); width: 28px; height: 80px; background: var(--gold); color: white; border: none; border-radius: 8px 0 0 8px; cursor: pointer; z-index: 9999; display: none; flex-direction: column; align-items: center; justify-content: center; gap: 4px; font-size: 0.7rem; writing-mode: vertical-rl; text-orientation: mixed; box-shadow: -2px 0 8px rgba(0,0,0,0.2); }
        .right-sidebar-float-toggle:hover { background: #D97706; }
        /* Bible tabs/content */
        .bible-tabs { display: flex; border-bottom: 1px solid var(--parchment-deep); flex-wrap: wrap; }
        .bible-tab { flex: 1 0 auto; padding: var(--space-sm); background: transparent; border: none; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-faint); cursor: pointer; border-bottom: 2px solid transparent; min-width: 60px; }
        .bible-tab:hover { color: var(--ink-soft); background: var(--parchment); }
        .bible-tab.active { color: var(--gold); border-bottom-color: var(--gold); }
        .bible-content { flex: 1; overflow-y: auto; display: block; padding: var(--space-md); }
        .books-section { margin-bottom: var(--space-lg); }
        .books-section-title { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-faint); margin-bottom: var(--space-sm); }
        .books-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 2px; }
        .book-btn { 
            padding: 8px 4px; 
            background: var(--parchment); 
            border: 1px solid var(--parchment-dark); 
            border-radius: 6px; 
            font-size: 0.7rem; 
            cursor: pointer; 
            transition: all 0.2s; 
            text-align: center; 
            margin: 0; 
            display: flex;
            align-items: center;
            justify-content: center;
            min-height: 34px;
            box-shadow: 0 1px 3px rgba(0,0,0,0.05);
        }
        .book-btn:hover { background: var(--gold-faint); border-color: var(--gold); transform: translateY(-1px); box-shadow: 0 2px 5px rgba(0,0,0,0.1); }
        .book-btn.active { background: var(--gold); color: white; border-color: var(--gold-deep); font-weight: bold; }        .tab-content { display: none; }
        
        /* ═══════════════════════════════════════════════════════════════ */
        /* RIGHT PANEL — Mobile Drawer/Modal Behavior                     */
        /* On mobile: full-height drawer from right, with backdrop        */
        /* No partial visibility states - fully open or fully closed      */
        /* ═══════════════════════════════════════════════════════════════ */
        
        /* Backdrop overlay for mobile drawer */
        #right-panel-backdrop {
            display: none;
            position: fixed;
            inset: 0;
            background: rgba(0, 0, 0, 0.5);
            backdrop-filter: blur(4px);
            z-index: var(--z-panel);
            opacity: 0;
            transition: opacity 0.3s var(--ease-gentle);
        }
        
        #right-panel-backdrop.visible {
            display: block;
            opacity: 1;
        }
        
        @media (max-width: 768px) {
            /* Mobile: Right panel becomes a drawer */
            #right-panel {
                position: fixed;
                top: 0;
                right: 0;
                height: 100%;
                width: 100%;
                max-width: 400px;
                z-index: calc(var(--z-panel) + 1);
                transform: translateX(100%);
                border-left: none;
                box-shadow: -4px 0 20px rgba(0, 0, 0, 0.3);
            }
            
            /* JS-controlled open state on mobile */
            #right-panel.open {
                transform: translateX(0);
            }
            
            /* Closed state on mobile - fully hidden */
            #right-panel.closed {
                transform: translateX(100%);
                width: 0;
            }
            
            /* Show floating toggle on mobile when panel closed */
            .right-sidebar-float-toggle {
                display: flex !important;
                z-index: 9999 !important;
                width: 36px !important;
                height: 100px !important;
                font-size: 0.8rem !important;
            }

            #right-panel.open ~ .right-sidebar-float-toggle {
                display: none !important;
            }

            #right-panel.closed ~ .right-sidebar-float-toggle {
                display: flex !important;
            }
        }

        /* Focus styles for keyboard navigation */
        .nav-item:focus,
        .dashboard-tab:focus,
        .binder-tab:focus,
        .bible-tab:focus,
        .thread-card:focus,
        .book-btn:focus,
        .project-cat:focus,
        .stream-cat:focus,
        .market-filter:focus,
        .age-tab:focus,
        .rupture-btn:focus,
        .todo-check:focus {
            outline: 2px solid var(--gold);
            outline-offset: 2px;
        }
        .tab-content.active { display: block; }
        .note-item { background: var(--parchment); border-radius: 10px; padding: var(--space-md); margin-bottom: var(--space-sm); }
        .note-ref { font-size: 0.75rem; color: var(--gold); margin-bottom: var(--space-xs); }
        .note-text { font-size: 0.9rem; line-height: 1.5; }
        .note-date { font-size: 0.7rem; color: var(--ink-faint); margin-top: var(--space-xs); }
        .study-item { border: 1px solid var(--parchment-dark); border-radius: 10px; padding: var(--space-md); margin-bottom: var(--space-sm); cursor: pointer; }
        .study-item:hover { border-color: var(--gold); background: var(--parchment); }
        .study-item-title { font-family: var(--font-display); font-size: 1rem; margin-bottom: var(--space-xs); }
        .study-item-meta { font-size: 0.8rem; color: var(--ink-faint); }
        .lesson-item { display: flex; align-items: center; gap: var(--space-sm); padding: var(--space-sm); border-radius: 8px; cursor: pointer; }
        .lesson-item:hover { background: var(--parchment); }
        .lesson-num { width: 28px; height: 28px; background: var(--gold-faint); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: 0.9rem; color: var(--gold); }
        .lesson-item.completed .lesson-num { background: var(--olive); color: white; }
        .lesson-title { flex: 1; font-size: 0.85rem; }
        .lesson-duration { font-size: 0.75rem; color: var(--ink-faint); }
        .fellowship-item { padding: var(--space-sm); border-bottom: 1px solid var(--parchment); }
        .fellowship-item:last-child { border-bottom: none; }
        .fellowship-prayer { font-style: italic; color: var(--ink-soft); }
        .fellowship-contribute { margin-top: var(--space-md); }
        .fellowship-contribute textarea { width: 100%; height: 80px; padding: var(--space-sm); border: 1px solid var(--parchment-dark); border-radius: 8px; }

        /* Additional layouts for dynamic pages */
        /* Content Type Tabs */
        .content-type-tabs {
            display: flex;
            gap: var(--space-sm);
            margin: var(--space-lg) 0;
            flex-wrap: wrap;
            padding: var(--space-md);
            background: var(--parchment);
            border-radius: 12px;
            border: 2px solid var(--parchment-dark);
        }

        .content-type-tab {
            padding: var(--space-sm) var(--space-lg);
            background: var(--surface);
            border: 2px solid var(--parchment-dark);
            border-radius: 100px;
            font-size: 0.9rem;
            cursor: pointer;
            transition: all 0.2s ease;
            font-family: var(--font-body);
        }

        .content-type-tab:hover {
            border-color: var(--family);
            transform: translateY(-2px);
        }

        .content-type-tab.active {
            background: var(--family);
            border-color: var(--family);
            color: white;
            font-weight: 600;
        }

        /* Family Content Area */
        .family-content-area {
            margin-top: var(--space-lg);
        }

        .family-lessons {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
            gap: var(--space-lg);
            margin-top: var(--space-lg);
        }

        .lesson-card {
            background: var(--surface);
            padding: var(--space-lg);
            border-radius: 12px;
            border: 2px solid var(--parchment-dark);
            cursor: pointer;
            transition: all 0.3s ease;
            box-shadow: 0 2px 8px rgba(0,0,0,0.08);
        }

        .lesson-card:hover {
            transform: translateY(-4px);
            border-color: var(--family);
            box-shadow: 0 8px 16px rgba(107, 123, 76, 0.2);
        }

        .lesson-card h4 {
            font-family: var(--font-display);
            font-size: 1.2rem;
            margin-bottom: var(--space-xs);
            color: var(--ink);
        }

        .lesson-card p {
            color: var(--ink-soft);
            margin-bottom: var(--space-md);
            line-height: 1.5;
        }

        .lesson-card .btn {
            margin-top: var(--space-xs);
        }

        /* Family Lesson Grid - Enhanced Layout */
        .family-lesson-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
            gap: var(--space-xl);
            margin-top: var(--space-lg);
        }

        /* Enhanced Lesson Cards - Rich Popup Style */
        .lesson-card-enhanced {
            background: linear-gradient(135deg, var(--surface) 0%, var(--parchment) 100%);
            border-radius: 16px;
            padding: 0;
            border: 3px solid var(--parchment-dark);
            cursor: pointer;
            transition: all 0.3s ease;
            box-shadow: 0 4px 16px rgba(0,0,0,0.1);
            overflow: hidden;
            display: flex;
            flex-direction: column;
        }

        .lesson-card-enhanced:hover {
            transform: translateY(-6px);
            border-color: var(--family);
            box-shadow: 0 12px 24px rgba(107, 123, 76, 0.25);
        }

        .lesson-card-header {
            background: linear-gradient(135deg, var(--family) 0%, var(--olive) 100%);
            padding: var(--space-lg);
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            border-bottom: 3px solid var(--parchment-dark);
        }

        .lesson-card-icon {
            font-size: 2.5rem;
            width: 60px;
            height: 60px;
            background: rgba(255, 255, 255, 0.2);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            border: 3px solid rgba(255, 255, 255, 0.4);
            box-shadow: 0 4px 12px rgba(0,0,0,0.15);
        }

        .lesson-card-meta {
            display: flex;
            gap: var(--space-xs);
            flex-wrap: wrap;
            justify-content: flex-end;
        }

        .lesson-tag {
            padding: 4px 10px;
            background: rgba(255, 255, 255, 0.9);
            border-radius: 12px;
            font-size: 0.7rem;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.05em;
        }

        .lesson-tag.new {
            background: var(--gold);
            color: white;
        }

        .lesson-tag.popular {
            background: var(--sanctuary);
            color: white;
        }

        .lesson-tag.required {
            background: var(--flame);
            color: white;
        }

        .lesson-card-title {
            font-family: var(--font-display);
            font-size: 1.4rem;
            margin: var(--space-lg) var(--space-lg) var(--space-sm);
            color: var(--ink);
            line-height: 1.3;
            font-weight: 600;
        }

        .lesson-card-scripture {
            font-family: var(--font-display);
            font-size: 0.85rem;
            color: var(--gold);
            margin: 0 var(--space-lg) var(--space-md);
            padding: var(--space-sm) var(--space-md);
            background: var(--gold-faint);
            border-left: 3px solid var(--gold);
            border-radius: 4px;
            font-style: italic;
        }

        .lesson-card-desc {
            color: var(--ink-soft);
            margin: 0 var(--space-lg) var(--space-lg);
            line-height: 1.6;
            font-size: 0.95rem;
            flex: 1;
        }

        .lesson-card-footer {
            padding: var(--space-md) var(--space-lg);
            background: var(--parchment);
            border-top: 2px solid var(--parchment-dark);
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .lesson-duration {
            font-size: 0.85rem;
            color: var(--ink-soft);
            display: flex;
            align-items: center;
            gap: var(--space-xs);
        }

        .lesson-card-btn {
            padding: var(--space-sm) var(--space-lg);
            background: linear-gradient(135deg, var(--family) 0%, var(--olive) 100%);
            color: white;
            border: none;
            border-radius: 100px;
            font-family: var(--font-body);
            font-size: 0.9rem;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.2s ease;
            box-shadow: 0 2px 8px rgba(107, 123, 76, 0.3);
        }

        .lesson-card-btn:hover {
            transform: scale(1.05);
            box-shadow: 0 4px 12px rgba(107, 123, 76, 0.4);
        }

        /* Add Content Panel Styles */
        #page-family .add-content-panel,
        .add-content-panel {
            display: block !important;
            background: var(--surface) !important;
            border-radius: 16px !important;
            padding: 2rem !important;
            border: 3px solid #C4881C !important;
            max-width: 900px !important;
            margin: 2rem auto !important;
            width: calc(100% - 4rem) !important;
            box-sizing: border-box !important;
            box-shadow: 0 8px 24px rgba(0,0,0,0.2) !important;
        }

        #page-family .add-content-header,
        .add-content-header {
            text-align: center !important;
            margin-bottom: 2rem !important;
            padding-bottom: 1.5rem !important;
            border-bottom: 2px dashed #D4C5A3 !important;
        }

        #page-family .add-content-header h3,
        .add-content-header h3 {
            font-family: 'Cormorant Garamond', Georgia, serif !important;
            font-size: 1.8rem !important;
            color: #2C2416 !important;
            margin-bottom: 0.5rem !important;
        }

        #page-family .add-content-header p,
        .add-content-header p {
            color: #5C4D3C !important;
            font-size: 1rem !important;
        }

        #page-family .add-content-form,
        .add-content-form {
            background: #EDE3C8 !important;
            border-radius: 12px !important;
            padding: 2rem !important;
            margin-bottom: 2rem !important;
            border: 2px solid #D4C5A3 !important;
        }

        #page-family .form-row,
        .form-row {
            margin-bottom: 1.5rem !important;
        }

        #page-family .form-row label,
        .form-row label {
            display: block !important;
            font-weight: 600 !important;
            margin-bottom: 0.5rem !important;
            color: #2C2416 !important;
            font-size: 0.95rem !important;
        }

        #page-family .form-select,
        #page-family .form-input,
        #page-family .form-textarea,
        .form-select,
        .form-input,
        .form-textarea {
            width: 100% !important;
            padding: 0.75rem !important;
            border: 2px solid #D4C5A3 !important;
            border-radius: 8px !important;
            font-family: 'Source Sans 3', sans-serif !important;
            font-size: 1rem !important;
            background: white !important;
            color: #2C2416 !important;
            transition: all 0.2s !important;
            box-sizing: border-box !important;
        }

        .form-select:focus,
        .form-input:focus,
        .form-textarea:focus {
            outline: none;
            border-color: var(--family);
            box-shadow: 0 0 0 3px rgba(107, 123, 76, 0.1);
        }

        .form-input::placeholder,
        .form-textarea::placeholder {
            color: var(--ink-faint);
        }

        .form-textarea {
            min-height: 100px;
            resize: vertical;
        }

        .form-actions {
            display: flex;
            gap: var(--space-md);
            justify-content: flex-end;
            margin-top: var(--space-lg);
            padding-top: var(--space-lg);
            border-top: 2px dashed var(--parchment-dark);
        }

        /* Library Browse Section / Import Section */
        #page-family .library-browse,
        #page-family .import-section,
        .library-browse,
        .import-section {
            background: #EDE3C8 !important;
            border-radius: 12px !important;
            padding: 2rem !important;
            margin-bottom: 2rem !important;
            border: 2px solid #D4C5A3 !important;
        }

        #page-family .library-browse h3,
        #page-family .library-browse h4,
        #page-family .import-section h4,
        .library-browse h3,
        .library-browse h4,
        .import-section h4 {
            font-family: 'Cormorant Garamond', Georgia, serif !important;
            font-size: 1.4rem !important;
            color: #2C2416 !important;
            margin-bottom: 0.5rem !important;
        }

        #page-family .library-browse p,
        #page-family .import-section p,
        .library-browse p,
        .import-section p {
            color: #5C4D3C !important;
            margin-bottom: 1.5rem !important;
        }

        #page-family .library-categories,
        #page-family .import-categories,
        .library-categories,
        .import-categories {
            display: grid !important;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important;
            gap: 1rem !important;
        }

        #page-family .library-category-btn,
        #page-family .import-cat-btn,
        .library-category-btn,
        .import-cat-btn {
            padding: 1.5rem !important;
            background: white !important;
            border: 2px solid #D4C5A3 !important;
            border-radius: 12px !important;
            cursor: pointer !important;
            transition: all 0.2s !important;
            text-align: center !important;
            font-size: 1rem !important;
            font-family: 'Source Sans 3', sans-serif !important;
        }

        #page-family .library-category-btn:hover,
        #page-family .import-cat-btn:hover,
        .library-category-btn:hover,
        .import-cat-btn:hover {
            border-color: #6B7B4C !important;
            transform: translateY(-2px) !important;
            box-shadow: 0 4px 8px rgba(107, 123, 76, 0.2) !important;
        }

        /* Custom Content List */
        #page-family .custom-content-section,
        #page-family .custom-content-list,
        .custom-content-section,
        .custom-content-list {
            background: #EDE3C8 !important;
            border-radius: 12px !important;
            padding: 2rem !important;
            border: 2px solid #D4C5A3 !important;
        }

        #page-family .custom-content-section h3,
        #page-family .custom-content-section h4,
        #page-family .custom-content-list h4,
        .custom-content-section h3,
        .custom-content-section h4,
        .custom-content-list h4 {
            font-family: 'Cormorant Garamond', Georgia, serif !important;
            font-size: 1.4rem !important;
            color: #2C2416 !important;
            margin-bottom: 1.5rem !important;
        }

        #customContentList {
            display: flex;
            flex-direction: column;
            gap: var(--space-md);
        }

        .custom-content-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: var(--space-lg);
            background: var(--surface);
            border: 2px solid var(--parchment-dark);
            border-radius: 12px;
            transition: all 0.2s;
        }

        .custom-content-item:hover {
            border-color: var(--family);
            box-shadow: 0 2px 8px rgba(107, 123, 76, 0.15);
        }

        .custom-item-info {
            display: flex;
            align-items: center;
            gap: var(--space-md);
        }

        .custom-item-icon {
            font-size: 2rem;
            width: 50px;
            height: 50px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: var(--parchment);
            border-radius: 50%;
            border: 2px solid var(--parchment-dark);
        }

        .custom-item-title {
            font-weight: 600;
            font-size: 1.1rem;
            color: var(--ink);
            margin-bottom: var(--space-xs);
        }

        .custom-item-meta {
            font-size: 0.85rem;
            color: var(--ink-soft);
        }

        .custom-item-actions {
            display: flex;
            gap: var(--space-sm);
        }

        .custom-item-btn {
            padding: var(--space-sm) var(--space-md);
            background: var(--parchment);
            border: 2px solid var(--parchment-dark);
            border-radius: 8px;
            cursor: pointer;
            transition: all 0.2s;
            font-size: 1.2rem;
        }

        .custom-item-btn:hover {
            border-color: var(--family);
            transform: scale(1.1);
        }

        .custom-item-btn.delete:hover {
            border-color: var(--flame);
            background: var(--flame-faint);
        }

        .empty-custom {
            text-align: center;
            padding: var(--space-xl);
            color: var(--ink-soft);
            font-style: italic;
        }

        .project-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--space-md); }
        .project-card { cursor: pointer; }
        .project-detail { display: none; background: var(--parchment-deep); border-radius: 8px; padding: var(--space-md); margin-top: var(--space-md); }
        .project-detail h3 { font-family: var(--font-display); font-size: 1.3rem; margin-bottom: var(--space-sm); }
        .project-detail p { color: var(--ink-soft); margin-bottom: var(--space-md); }

        .repair-flow { display: none; }

        /* ═══════════════════════════════════════════════════════════════ */
        /* THE FELLOWSHIP HUB - Community Styles */
        /* ═══════════════════════════════════════════════════════════════ */
        /* ═══════════════════════════════════════════════════════════════ */
        /* FELLOWSHIP HUB - Community Center (Parchment Theme)           */
        /* ═══════════════════════════════════════════════════════════════ */
        .fh-container { display: flex; height: 100%; background: linear-gradient(135deg, var(--parchment) 0%, var(--parchment-aged) 100%); color: var(--ink); overflow: hidden; position: relative; }
        .fh-container::before { content: ''; position: absolute; inset: 0; background-image: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(196, 180, 142, 0.03) 2px, rgba(196, 180, 142, 0.03) 4px), repeating-linear-gradient(90deg, transparent, transparent 2px, rgba(196, 180, 142, 0.03) 2px, rgba(196, 180, 142, 0.03) 4px); pointer-events: none; z-index: 1; }
        
        .fh-sidebar { width: 320px; background: var(--parchment-aged); border-right: 2px dashed var(--parchment-edge); overflow-y: auto; padding: 24px; position: relative; z-index: 2; }
        .fh-profile { background: var(--parchment); border: 2px dashed var(--parchment-edge); border-radius: var(--radius-lg); padding: 24px; margin-bottom: 24px; }
        .fh-profile-header { display: flex; gap: 16px; margin-bottom: 20px; }
        .fh-profile-avatar { width: 80px; height: 80px; border-radius: 50%; background: linear-gradient(135deg, var(--thread) 0%, var(--thread-hover) 100%); display: flex; align-items: center; justify-content: center; font-size: 36px; border: 3px solid var(--thread); flex-shrink: 0; position: relative; }
        .fh-presence { position: absolute; bottom: 2px; right: 2px; width: 18px; height: 18px; background: var(--olive); border: 3px solid var(--parchment); border-radius: 50%; }
        .fh-profile-name { font-size: 22px; font-weight: bold; color: var(--ink); margin-bottom: 6px; font-family: var(--font-display); }
        .fh-profile-role { font-size: 13px; color: var(--ink-soft); margin-bottom: 4px; }
        .fh-profile-location { font-size: 12px; color: var(--ink-faint); display: flex; align-items: center; gap: 4px; }
        .fh-stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 20px; padding-top: 20px; border-top: 2px dashed var(--parchment-edge); }
        .fh-stat-number { font-size: 20px; font-weight: bold; color: var(--thread); margin-bottom: 4px; text-align: center; }
        .fh-stat-label { font-size: 11px; color: var(--ink-faint); text-transform: uppercase; letter-spacing: 0.5px; text-align: center; }
        
        .fh-nav-section { margin-bottom: 24px; }
        .fh-nav-title { font-size: 12px; font-weight: bold; color: var(--ink-faint); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 12px; padding-left: 12px; }
        .fh-nav-item { padding: 14px 16px; margin: 4px 0; border-radius: var(--radius-md); cursor: pointer; transition: all 0.2s ease; display: flex; align-items: center; gap: 12px; font-weight: 500; background: var(--parchment); border: 1px dashed var(--parchment-edge); color: var(--ink-soft); border-left: 3px solid transparent; }
        .fh-nav-item:hover { background: var(--parchment-deep); border-left-color: var(--thread-soft); transform: translateX(4px); }
        .fh-nav-item.active { background: var(--parchment); border: 1px dashed var(--thread); border-left: 3px solid var(--thread); color: var(--ink); }
        .fh-nav-badge { margin-left: auto; background: var(--berry); color: white; border-radius: 12px; padding: 3px 9px; font-size: 11px; font-weight: bold; }
        
        .fh-groups { background: var(--parchment); border: 2px dashed var(--parchment-edge); border-radius: var(--radius-lg); padding: 20px; margin-top: 24px; }
        .fh-section-header { font-size: 15px; font-weight: bold; color: var(--ink); margin-bottom: 16px; display: flex; align-items: center; justify-content: space-between; }
        .fh-section-link { font-size: 12px; color: var(--thread); cursor: pointer; font-weight: normal; }
        .fh-section-link:hover { text-decoration: underline; }
        .fh-group-item { padding: 12px; background: var(--parchment-aged); border: 1px dashed var(--parchment-edge); border-radius: var(--radius-md); margin-bottom: 8px; cursor: pointer; transition: all 0.2s ease; }
        .fh-group-item:hover { background: var(--parchment); border-color: var(--thread-soft); }
        .fh-group-name { font-weight: 600; font-size: 14px; color: var(--ink); margin-bottom: 6px; display: flex; align-items: center; gap: 8px; }
        .fh-group-meta { font-size: 11px; color: var(--ink-faint); display: flex; gap: 12px; }
        .fh-group-badge { padding: 3px 8px; background: var(--thread-faint); border-radius: 6px; font-size: 10px; color: var(--thread); border: 1px dashed var(--thread-soft); }
        
        .fh-main { flex: 1; overflow-y: auto; padding: 24px; background: var(--parchment); position: relative; z-index: 2; }
        
        .fh-quick-actions { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 24px; }
        .fh-quick-action { padding: 14px 16px; background: var(--parchment-aged); border: 2px dashed var(--parchment-edge); border-radius: var(--radius-lg); cursor: pointer; transition: all 0.2s ease; display: flex; align-items: center; gap: 10px; }
        .fh-quick-action:hover { background: var(--parchment); border-color: var(--thread); transform: translateY(-2px); }
        .fh-action-icon { font-size: 28px; }
        .fh-action-title { font-weight: 600; font-size: 14px; color: var(--ink); margin-bottom: 2px; }
        .fh-action-subtitle { font-size: 11px; color: var(--ink-faint); }
        
        .fh-composer { background: var(--parchment-aged); border: 2px dashed var(--parchment-edge); border-radius: var(--radius-lg); padding: 24px; margin-bottom: 24px; }
        .fh-composer-header { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; }
        .fh-composer-avatar { width: 56px; height: 56px; border-radius: 50%; background: linear-gradient(135deg, var(--thread) 0%, var(--thread-hover) 100%); display: flex; align-items: center; justify-content: center; font-size: 24px; border: 2px solid var(--thread); }
        .fh-composer-textarea { width: 100%; min-height: 80px; padding: 16px; background: var(--parchment); border: 2px dashed var(--parchment-edge); border-radius: var(--radius-md); color: var(--ink); font-family: inherit; font-size: 15px; resize: vertical; outline: none; transition: all 0.2s ease; }
        .fh-composer-textarea:focus { border-color: var(--thread); background: var(--surface); }
        .fh-composer-textarea::placeholder { color: var(--ink-faint); }
        .fh-composer-actions { display: flex; gap: 12px; margin-top: 16px; flex-wrap: wrap; }
        .fh-composer-btn { padding: 10px 16px; background: var(--parchment); border: 1px dashed var(--parchment-edge); border-radius: var(--radius-md); cursor: pointer; transition: all 0.2s ease; display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-soft); font-family: inherit; }
        .fh-composer-btn:hover { background: var(--parchment-aged); border-color: var(--thread-soft); }
        .fh-post-btn { margin-left: auto; background: linear-gradient(135deg, var(--thread) 0%, var(--thread-hover) 100%); color: var(--white); font-weight: 600; border: none; }
        .fh-post-btn:hover { background: linear-gradient(135deg, var(--thread-hover) 0%, var(--thread-glow) 100%); }
        
        .fh-filters { display: flex; gap: 10px; margin-bottom: 24px; padding-bottom: 16px; border-bottom: 2px dashed var(--parchment-edge); flex-wrap: wrap; }
        .fh-filter { padding: 8px 16px; background: var(--parchment-aged); border: 1px dashed var(--parchment-edge); border-radius: 20px; cursor: pointer; font-size: 13px; color: var(--ink-soft); transition: all 0.2s ease; white-space: nowrap; font-family: inherit; }
        .fh-filter:hover { background: var(--parchment); border-color: var(--thread-soft); }
        .fh-filter.active { background: var(--thread-faint); border-color: var(--thread); color: var(--ink); }
        
        .fh-post { background: var(--parchment-aged); border: 2px dashed var(--parchment-edge); border-radius: var(--radius-lg); padding: 24px; margin-bottom: 20px; transition: all 0.3s ease; }
        .fh-post:hover { border-color: var(--thread-soft); background: var(--parchment); }
        .fh-post-header { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 20px; }
        .fh-post-avatar { width: 56px; height: 56px; border-radius: 50%; background: linear-gradient(135deg, var(--thread) 0%, var(--thread-hover) 100%); display: flex; align-items: center; justify-content: center; font-size: 26px; border: 2px solid var(--thread); flex-shrink: 0; }
        .fh-post-author { font-weight: 600; font-size: 17px; color: var(--ink); }
        .fh-post-credentials { padding: 3px 10px; background: var(--thread-faint); border-radius: 12px; font-size: 11px; color: var(--thread); font-weight: 600; border: 1px dashed var(--thread-soft); margin-left: 10px; }
        .fh-post-meta { font-size: 13px; color: var(--ink-faint); display: flex; gap: 12px; margin-top: 6px; }
        .fh-post-category { display: inline-block; padding: 6px 14px; background: var(--thread-faint); border: 1px dashed var(--thread-soft); border-radius: var(--radius-md); font-size: 12px; font-weight: 600; color: var(--thread); margin-bottom: 16px; }
        .fh-post-title { font-size: 20px; font-weight: bold; color: var(--ink); margin-bottom: 12px; line-height: 1.4; font-family: var(--font-display); }
        .fh-post-text { font-size: 15px; line-height: 1.7; color: var(--ink-soft); margin-bottom: 16px; white-space: pre-line; }
        .fh-post-quote { border-left: 4px solid var(--thread); padding: 16px 20px; background: var(--thread-faint); border-radius: var(--radius-md); font-style: italic; color: var(--ink); margin: 16px 0; }
        .fh-quote-ref { display: block; margin-top: 8px; font-size: 13px; color: var(--thread); font-style: normal; }
        .fh-post-attachments { display: flex; gap: 12px; margin-top: 16px; }
        .fh-attachment { flex: 1; padding: 16px; background: var(--parchment); border: 1px dashed var(--parchment-edge); border-radius: var(--radius-md); cursor: pointer; transition: all 0.2s ease; }
        .fh-attachment:hover { border-color: var(--thread); background: var(--parchment-aged); }
        .fh-attachment-icon { font-size: 32px; margin-bottom: 8px; }
        .fh-attachment-title { font-size: 13px; font-weight: 600; color: var(--ink); margin-bottom: 4px; }
        .fh-attachment-meta { font-size: 11px; color: var(--ink-faint); }
        .fh-post-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
        .fh-tag { padding: 6px 12px; background: var(--parchment); border: 1px dashed var(--parchment-edge); border-radius: var(--radius-sm); font-size: 14px; color: var(--ink); cursor: pointer; transition: all 0.2s ease; }
        .fh-tag:hover { background: var(--parchment-aged); border-color: var(--thread-soft); color: var(--thread); }
        
        .fh-engagement { display: flex; justify-content: space-between; padding: 16px 0; border-top: 2px dashed var(--parchment-edge); border-bottom: 2px dashed var(--parchment-edge); margin-bottom: 16px; font-size: 14px; color: var(--ink-faint); }
        .fh-engagement-group { display: flex; gap: 20px; }
        .fh-engagement-item { display: flex; align-items: center; gap: 6px; cursor: pointer; transition: color 0.2s; }
        .fh-engagement-item:hover { color: var(--thread); }
        
        .fh-post-actions { display: flex; gap: 8px; }
        .fh-action-btn { flex: 1; padding: 12px; background: var(--parchment); border: 1px dashed var(--parchment-edge); border-radius: var(--radius-md); cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 10px; font-size: 14px; color: var(--ink-soft); transition: all 0.2s ease; font-family: inherit; font-weight: 500; }
        .fh-action-btn:hover { background: var(--parchment-aged); border-color: var(--thread-soft); color: var(--ink); }
        .fh-action-btn.engaged { background: var(--thread-faint); border-color: var(--thread); color: var(--thread); }
        
        .fh-discussion { display: none; margin-top: 20px; padding-top: 20px; border-top: 2px dashed var(--parchment-edge); }
        .fh-discussion.active { display: block; }
        .fh-discussion-header { font-size: 15px; font-weight: 600; color: var(--ink); margin-bottom: 16px; }
        .fh-comment { display: flex; gap: 14px; margin-bottom: 16px; padding: 16px; background: var(--parchment); border: 1px dashed var(--parchment-edge); border-radius: var(--radius-md); border-left: 3px solid transparent; transition: all 0.2s ease; }
        .fh-comment:hover { border-left-color: var(--thread); background: var(--parchment-aged); }
        .fh-comment-avatar { width: 44px; height: 44px; border-radius: 50%; background: linear-gradient(135deg, var(--clay) 0%, var(--clay-soft) 100%); display: flex; align-items: center; justify-content: center; font-size: 20px; border: 2px solid var(--clay); flex-shrink: 0; }
        .fh-comment-author { font-weight: 600; font-size: 15px; color: var(--ink); }
        .fh-comment-role { font-size: 11px; color: var(--ink-faint); padding: 2px 8px; background: var(--parchment-deep); border-radius: 6px; margin-left: 8px; }
        .fh-comment-time { font-size: 12px; color: var(--ink-faint); margin-left: auto; }
        .fh-comment-text { font-size: 14px; color: var(--ink-soft); line-height: 1.6; margin: 8px 0 10px; }
        .fh-comment-actions { display: flex; gap: 16px; font-size: 12px; color: var(--ink-faint); }
        .fh-comment-action { cursor: pointer; transition: color 0.2s; display: flex; align-items: center; gap: 4px; }
        .fh-comment-action:hover { color: var(--thread); }
        .fh-reply-area { display: flex; gap: 12px; margin-top: 16px; }
        .fh-reply-input { flex: 1; padding: 12px 16px; background: var(--parchment); border: 2px dashed var(--parchment-edge); border-radius: 20px; color: var(--ink); font-family: inherit; font-size: 14px; outline: none; }
        .fh-reply-input:focus { border-color: var(--thread); }
        .fh-reply-submit { padding: 12px 24px; background: var(--thread); color: var(--white); border: none; border-radius: 20px; cursor: pointer; font-weight: 600; font-family: inherit; }
        .fh-reply-submit:hover { background: var(--thread-hover); }
        
        .fh-right { width: 340px; background: var(--parchment-aged); border-left: 2px dashed var(--parchment-edge); overflow-y: auto; padding: 24px; position: relative; z-index: 2; }
        .fh-card { background: var(--parchment); border: 2px dashed var(--parchment-edge); border-radius: var(--radius-lg); padding: 20px; margin-bottom: 20px; }
        
        .fh-prayer-item { padding: 14px; background: var(--parchment-aged); border: 1px dashed var(--parchment-edge); border-radius: var(--radius-md); margin-bottom: 10px; border-left: 3px solid var(--thread); }
        .fh-prayer-requester { font-weight: 600; font-size: 14px; color: var(--ink); margin-bottom: 6px; }
        .fh-prayer-text { font-size: 13px; color: var(--ink-soft); line-height: 1.5; margin-bottom: 8px; }
        .fh-prayer-meta { display: flex; justify-content: space-between; align-items: center; font-size: 11px; color: var(--ink-faint); }
        .fh-pray-btn { padding: 4px 10px; background: var(--thread-faint); border: 1px dashed var(--thread); border-radius: 6px; cursor: pointer; font-size: 11px; color: var(--thread); font-weight: 600; transition: all 0.2s; }
        .fh-pray-btn:hover { background: var(--thread); color: var(--white); }
        .fh-pray-btn.prayed { background: rgba(122, 139, 92, 0.2); border-color: var(--olive); color: var(--olive); }
        
        .fh-event-item { padding: 14px; background: var(--parchment-aged); border: 1px dashed var(--parchment-edge); border-radius: var(--radius-md); margin-bottom: 10px; cursor: pointer; transition: all 0.2s ease; }
        .fh-event-item:hover { background: var(--parchment); border-color: var(--thread-soft); }
        .fh-event-date { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--thread); font-weight: 600; margin-bottom: 8px; }
        .fh-event-title { font-weight: 600; font-size: 14px; color: var(--ink); margin-bottom: 6px; }
        .fh-event-details { font-size: 12px; color: var(--ink-faint); display: flex; gap: 12px; }
        
        .fh-mentor-item { display: flex; align-items: center; gap: 12px; padding: 12px; background: var(--parchment-aged); border-radius: 8px; margin-bottom: 10px; cursor: pointer; transition: all 0.2s ease; }
        .fh-mentor-item:hover { background: rgba(139, 90, 43, 0.3); }
        .fh-mentor-avatar { width: 46px; height: 46px; border-radius: 50%; background: linear-gradient(135deg, #8b5a2b 0%, #b8860b 100%); display: flex; align-items: center; justify-content: center; font-size: 20px; border: 2px solid #b8860b; flex-shrink: 0; position: relative; }
        .fh-mentor-badge { position: absolute; bottom: -2px; right: -2px; width: 18px; height: 18px; background: #b8860b; border: 2px solid rgba(45, 28, 18, 0.8); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 10px; }
        .fh-mentor-name { font-weight: 600; font-size: 14px; color: var(--ink); margin-bottom: 2px; }
        .fh-mentor-role { font-size: 13px; color: var(--ink); }
        
        .fh-resource-item { padding: 14px; background: var(--parchment-aged); border-radius: 8px; margin-bottom: 10px; cursor: pointer; transition: all 0.2s ease; }
        .fh-resource-item:hover { background: rgba(139, 90, 43, 0.3); }
        .fh-resource-type { font-size: 11px; color: #b8860b; text-transform: uppercase; font-weight: 600; margin-bottom: 6px; }
        .fh-resource-title { font-weight: 600; font-size: 14px; color: var(--ink); margin-bottom: 4px; }
        .fh-resource-author { font-size: 14px; color: var(--ink); }

        .market-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--space-md); margin-top: var(--space-md); }

        .stream-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--space-md); margin-top: var(--space-md); }

        /* Profile Page Styles */
        #page-profile { background: var(--parchment); }
        .profile-page-header { display: flex; gap: var(--space-xl); margin-bottom: var(--space-xl); }
        .profile-hero { flex: 0 0 280px; background: var(--parchment-aged); border-radius: 20px; padding: var(--space-xl); text-align: center; box-shadow: var(--shadow-sm); border: 2px solid var(--parchment-dark); }
        .profile-hero-avatar { width: 120px; height: 120px; border-radius: 50%; background: linear-gradient(135deg, var(--gold) 0%, var(--gold-soft) 100%); display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: 2.5rem; color: white; margin: 0 auto var(--space-md); box-shadow: 0 8px 24px rgba(184, 134, 11, 0.3); }
        .profile-hero-name { font-family: var(--font-display); font-size: 1.8rem; margin-bottom: var(--space-xs); }
        .profile-hero-role { color: var(--ink-soft); font-size: 0.9rem; margin-bottom: var(--space-md); }
        .profile-hero-identity { background: var(--parchment); border-radius: 12px; padding: var(--space-md); font-style: italic; color: var(--ink-soft); font-size: 0.95rem; line-height: 1.5; border-left: 3px solid var(--gold); }
        .profile-hero-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-sm); margin-top: var(--space-lg); }
        .profile-hero-stat { background: var(--parchment); border-radius: 10px; padding: var(--space-sm); }
        .profile-hero-stat-value { font-family: var(--font-display); font-size: 1.5rem; color: var(--gold); }
        .profile-hero-stat-label { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-faint); }
        .profile-summary { flex: 1; }
        .profile-tabs { display: flex; gap: var(--space-xs); margin-bottom: var(--space-lg); flex-wrap: wrap; }
        .profile-tab { padding: var(--space-sm) var(--space-md); background: var(--surface); border: 1px solid var(--parchment-dark); border-radius: 100px; font-size: 0.85rem; font-weight: 500; color: var(--ink-soft); cursor: pointer; transition: all 0.2s; }
        .profile-tab:hover { border-color: var(--gold-soft); color: var(--ink); }
        .profile-tab.active { background: var(--gold); color: white; border-color: var(--gold); }
        .profile-section { display: none; animation: fadeIn 0.3s ease; }
        .profile-section.active { display: block; }
        .profile-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--space-lg); }
        .profile-card { background: var(--parchment); border-radius: 16px; padding: var(--space-lg); box-shadow: var(--shadow-sm); border: 1px solid var(--parchment-dark); }
        .profile-card-header { display: flex; align-items: center; gap: var(--space-sm); margin-bottom: var(--space-md); }
        .profile-card-icon { width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; }
        .profile-card-title { font-family: var(--font-display); font-size: 1.2rem; }
        .profile-list { list-style: none; }
        .profile-list-item { display: flex; align-items: center; gap: var(--space-sm); padding: var(--space-sm) 0; border-bottom: 1px solid var(--parchment); }
        .profile-list-item:last-child { border-bottom: none; }
        .profile-list-icon { width: 32px; height: 32px; border-radius: 8px; background: var(--parchment); display: flex; align-items: center; justify-content: center; font-size: 0.9rem; }
        .profile-list-content { flex: 1; }
        .profile-list-label { font-weight: 500; font-size: 0.9rem; }
        .profile-list-meta { font-size: 0.8rem; color: var(--ink-faint); }
        .profile-tag { display: inline-block; padding: 4px 10px; background: var(--parchment); border-radius: 100px; font-size: 0.75rem; margin: 2px; color: var(--ink-soft); }
        .profile-tag.skill { background: var(--olive-soft); color: white; }
        .profile-tag.interest { background: var(--sky); color: white; }
        .profile-tag.spiritual { background: var(--gold-soft); color: var(--ink); }
        .profile-progress { margin-top: var(--space-md); }
        .profile-progress-bar { height: 8px; background: var(--parchment); border-radius: 100px; overflow: hidden; margin-top: var(--space-xs); }
        .profile-progress-fill { height: 100%; border-radius: 100px; transition: width 0.5s ease; }
        .profile-progress-fill.gold { background: linear-gradient(90deg, var(--gold-soft), var(--gold)); }
        .profile-progress-fill.olive { background: linear-gradient(90deg, var(--olive-soft), var(--olive)); }
        .profile-progress-fill.sky { background: linear-gradient(90deg, var(--sky), #5A8EA0); }
        .profile-timeline { position: relative; padding-left: var(--space-lg); }
        .profile-timeline::before { content: ''; position: absolute; left: 8px; top: 0; bottom: 0; width: 2px; background: var(--parchment-dark); }
        .profile-timeline-item { position: relative; padding-bottom: var(--space-md); }
        .profile-timeline-item::before { content: ''; position: absolute; left: calc(-1 * var(--space-lg) + 4px); top: 4px; width: 10px; height: 10px; background: var(--gold); border-radius: 50%; }
        .profile-timeline-date { font-size: 0.75rem; color: var(--ink-faint); margin-bottom: var(--space-xs); }
        .profile-timeline-content { font-size: 0.9rem; }
        .profile-goal { background: var(--parchment); border-radius: 12px; padding: var(--space-md); margin-bottom: var(--space-sm); }
        .profile-goal-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-xs); }
        .profile-goal-title { font-weight: 500; font-size: 0.9rem; }
        .profile-goal-status { font-size: 0.75rem; padding: 2px 8px; border-radius: 100px; }
        .profile-goal-status.active { background: var(--olive-soft); color: white; }
        .profile-goal-status.pending { background: var(--gold-faint); color: var(--gold); }
        .profile-goal-desc { font-size: 0.85rem; color: var(--ink-soft); }
        .profile-relationship { display: flex; align-items: center; gap: var(--space-sm); padding: var(--space-sm); background: var(--parchment); border-radius: 10px; margin-bottom: var(--space-sm); }
        .profile-relationship-avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--olive-soft); display: flex; align-items: center; justify-content: center; color: white; font-size: 0.9rem; }
        .profile-relationship-info { flex: 1; }
        .profile-relationship-name { font-weight: 500; font-size: 0.9rem; }
        .profile-relationship-role { font-size: 0.8rem; color: var(--ink-faint); }
        .profile-add-btn { display: flex; align-items: center; justify-content: center; gap: var(--space-xs); width: 100%; padding: var(--space-sm); background: transparent; border: 2px dashed var(--parchment-dark); border-radius: 10px; color: var(--ink-faint); font-size: 0.85rem; cursor: pointer; transition: all 0.2s; margin-top: var(--space-sm); }
        .profile-add-btn:hover { border-color: var(--gold); color: var(--gold); }

        /* Reveal / Self-Awareness Section Styles */
        .reveal-section { max-width: 900px; }
        .reveal-invocation { background: linear-gradient(135deg, var(--ink) 0%, #3D3426 100%); color: var(--parchment); border-radius: 16px; padding: var(--space-xl); text-align: center; margin-bottom: var(--space-xl); }
        .reveal-invocation-text { font-family: var(--font-display); font-size: 1.5rem; font-style: italic; margin-bottom: var(--space-sm); line-height: 1.4; }
        .reveal-invocation-sub { font-size: 0.9rem; opacity: 0.8; max-width: 550px; margin: 0 auto; line-height: 1.5; }
        .reveal-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-lg); margin-bottom: var(--space-lg); }
        .reveal-row.single { grid-template-columns: 1fr; }
        .reveal-card { background: var(--surface); border-radius: 16px; padding: var(--space-lg); box-shadow: var(--shadow-sm); border: 1px solid var(--parchment-dark); }
        .reveal-card-header { display: flex; align-items: center; gap: var(--space-sm); margin-bottom: var(--space-md); padding-bottom: var(--space-sm); border-bottom: 1px solid var(--parchment-deep); }
        .reveal-card-icon { width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; flex-shrink: 0; }
        .reveal-card-title { font-family: var(--font-display); font-size: 1.15rem; }
        .reveal-principle { background: var(--parchment); border-radius: 10px; padding: var(--space-md); margin-bottom: var(--space-sm); }
        .reveal-principle:last-child { margin-bottom: 0; }
        .reveal-principle-title { font-weight: 600; font-size: 0.9rem; margin-bottom: var(--space-xs); color: var(--ink); }
        .reveal-principle-text { font-size: 0.85rem; color: var(--ink-soft); line-height: 1.5; }
        .portal-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-sm); }
        .portal-card { background: var(--parchment); border-radius: 10px; padding: var(--space-sm) var(--space-md); border-left: 4px solid var(--parchment-dark); transition: all 0.2s; }
        .portal-card.transformed { border-left-color: var(--olive); background: #E8F5E8; }
        .portal-header { display: flex; align-items: center; gap: var(--space-xs); margin-bottom: 4px; }
        .portal-icon { font-size: 1rem; }
        .portal-name { font-weight: 600; font-size: 0.85rem; }
        .portal-desc { font-size: 0.75rem; color: var(--ink-soft); }
        .reveal-exercise-prompt { background: var(--gold-faint); border-radius: 10px; padding: var(--space-md); margin-bottom: var(--space-md); border-left: 3px solid var(--gold); }
        .reveal-exercise-prompt-label { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--gold); margin-bottom: var(--space-xs); font-weight: 600; }
        .reveal-exercise-prompt-text { font-family: var(--font-display); font-size: 0.95rem; font-style: italic; color: var(--ink); line-height: 1.4; }
        .reveal-journal { width: 100%; min-height: 80px; padding: var(--space-sm); border: 1px solid var(--parchment-dark); border-radius: 8px; font-family: var(--font-body); font-size: 0.85rem; resize: vertical; background: var(--parchment); }
        .reveal-journal:focus { outline: none; border-color: var(--gold); background: var(--surface); }
        .feedback-log { background: var(--parchment); border-radius: 10px; padding: var(--space-md); margin-bottom: var(--space-sm); }
        .feedback-log:last-of-type { margin-bottom: var(--space-md); }
        .feedback-log-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-xs); }
        .feedback-log-source { font-weight: 600; font-size: 0.85rem; }
        .feedback-log-date { font-size: 0.7rem; color: var(--ink-faint); }
        .feedback-log-content { font-size: 0.85rem; color: var(--ink-soft); margin-bottom: var(--space-xs); line-height: 1.4; font-style: italic; }
        .feedback-log-portal { display: inline-block; font-size: 0.8rem; padding: 2px 8px; border-radius: 100px; font-weight: 500; }
        .feedback-log-portal.transformed { background: #D4FFD4; color: #2D5A2D; }
        .feedback-log-portal.intellectual { background: #D4E4FF; color: #2D4A6D; }
        .feedback-log-portal.growing { background: var(--gold-faint); color: #8B7000; }
        .congruence-meter { margin-top: var(--space-md); padding-top: var(--space-md); border-top: 1px solid var(--parchment-deep); }
        .congruence-label { display: flex; justify-content: space-between; font-size: 0.8rem; margin-bottom: var(--space-xs); }
        .congruence-bar { height: 10px; background: var(--parchment-dark); border-radius: 100px; overflow: hidden; }
        .congruence-fill { height: 100%; border-radius: 100px; background: linear-gradient(90deg, var(--gold-soft), var(--gold), var(--olive)); transition: width 0.5s ease; }
        @media (max-width: 768px) {
            .reveal-row { grid-template-columns: 1fr; }
            .portal-grid { grid-template-columns: 1fr; }
        }

        ::-webkit-scrollbar { width: 8px; }
        ::-webkit-scrollbar-track { background: var(--parchment); }
        ::-webkit-scrollbar-thumb { background: var(--parchment-dark); border-radius: 4px; }

        @media (max-width: 1200px) {
            /* Left sidebar now uses slide-in behavior - keep full width */
            .left-sidebar {
                width: 260px !important;
            }
        }
        /* Haven Academy Styles */
        .academy-hero { background: linear-gradient(135deg, #C4A060 0%, #8B7340 100%); border-radius: 20px; padding: var(--space-xl); color: var(--white); margin-bottom: var(--space-lg); display: flex; justify-content: space-between; align-items: center; }
        .academy-hero-content h2 { font-family: var(--font-display); font-size: 2rem; margin-bottom: var(--space-xs); }
        .academy-hero-content p { opacity: 0.9; font-size: 1rem; }
        .academy-hero-stats { display: flex; gap: var(--space-lg); }
        .academy-stat { text-align: center; }
        .academy-stat-value { font-size: 1.8rem; font-weight: 600; }
        .academy-stat-label { font-size: 0.8rem; opacity: 0.8; }
        
        .academy-search { display: flex; gap: var(--space-md); margin-bottom: var(--space-lg); }
        .academy-search-input { flex: 1; padding: var(--space-md); border: 2px solid var(--parchment-dark); border-radius: 12px; font-size: 1rem; background: var(--surface); }
        .academy-search-input:focus { outline: none; border-color: var(--gold); }
        .academy-filter-btn { padding: var(--space-sm) var(--space-md); border: 2px solid var(--parchment-dark); border-radius: 12px; background: var(--surface); cursor: pointer; font-size: 0.9rem; transition: all 0.2s; display: flex; align-items: center; gap: var(--space-xs); }
        .academy-filter-btn:hover, .academy-filter-btn.active { border-color: var(--gold); background: var(--gold-faint); }
        
        .academy-categories { display: flex; gap: var(--space-sm); margin-bottom: var(--space-lg); flex-wrap: wrap; }
        .academy-cat { padding: var(--space-sm) var(--space-md); border-radius: 100px; background: var(--surface); border: 1px solid var(--parchment-dark); cursor: pointer; font-size: 0.85rem; transition: all 0.2s; display: flex; align-items: center; gap: var(--space-xs); }
        .academy-cat:hover { border-color: var(--gold-soft); transform: translateY(-2px); }
        .academy-cat.active { background: var(--gold); color: var(--white); border-color: var(--gold); }
        .academy-cat-count { background: var(--parchment-deep); padding: 2px 8px; border-radius: 100px; font-size: 0.75rem; }
        .academy-cat.active .academy-cat-count { background: rgba(255,255,255,0.3); }
        
        .academy-section { margin-bottom: var(--space-xl); }
        .academy-section-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--space-md); }
        .academy-section-title { font-family: var(--font-display); font-size: 1.4rem; display: flex; align-items: center; gap: var(--space-sm); }
        .academy-view-all { font-size: 0.85rem; color: var(--gold); cursor: pointer; }
        .academy-view-all:hover { text-decoration: underline; }
        
        .academy-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--space-md); }
        .academy-card { background: var(--surface); border-radius: 16px; overflow: hidden; border: 1px solid var(--parchment-dark); transition: all 0.3s; cursor: pointer; }
        .academy-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--gold-soft); }
        .academy-card-image { height: 140px; background: linear-gradient(135deg, var(--parchment-deep) 0%, var(--parchment-dark) 100%); display: flex; align-items: center; justify-content: center; font-size: 3rem; position: relative; }
        .academy-card-badge { position: absolute; top: var(--space-sm); right: var(--space-sm); background: var(--gold); color: var(--white); padding: 4px 10px; border-radius: 100px; font-size: 0.7rem; font-weight: 600; }
        .academy-card-badge.free { background: var(--olive); }
        .academy-card-badge.new { background: var(--family); }
        .academy-card-content { padding: var(--space-md); }
        .academy-card-category { font-size: 0.75rem; color: var(--gold); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: var(--space-xs); }
        .academy-card-title { font-family: var(--font-display); font-size: 1.1rem; margin-bottom: var(--space-xs); line-height: 1.3; }
        .academy-card-desc { font-size: 0.85rem; color: var(--ink-soft); margin-bottom: var(--space-sm); line-height: 1.4; }
        .academy-card-meta { display: flex; justify-content: space-between; align-items: center; font-size: 0.8rem; color: var(--ink-faint); }
        .academy-card-lessons { display: flex; align-items: center; gap: 4px; }
        .academy-card-ages { background: var(--parchment); padding: 2px 8px; border-radius: 100px; }
        .academy-card-progress { margin-top: var(--space-sm); }
        .academy-progress-bar { height: 6px; background: var(--parchment-deep); border-radius: 100px; overflow: hidden; }
        .academy-progress-fill { height: 100%; background: linear-gradient(90deg, var(--gold-soft), var(--gold)); border-radius: 100px; }
        
        .academy-featured { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-lg); margin-bottom: var(--space-xl); }
        .academy-featured-card { background: var(--surface); border-radius: 20px; overflow: hidden; border: 2px solid var(--gold-soft); display: flex; }
        .academy-featured-image { width: 200px; background: linear-gradient(135deg, var(--gold-faint) 0%, var(--gold-soft) 100%); display: flex; align-items: center; justify-content: center; font-size: 4rem; flex-shrink: 0; }
        .academy-featured-content { padding: var(--space-lg); display: flex; flex-direction: column; }
        .academy-featured-badge { display: inline-block; background: var(--gold); color: var(--white); padding: 4px 12px; border-radius: 100px; font-size: 0.75rem; font-weight: 600; margin-bottom: var(--space-sm); width: fit-content; }
        .academy-featured-title { font-family: var(--font-display); font-size: 1.3rem; margin-bottom: var(--space-xs); }
        .academy-featured-desc { font-size: 0.9rem; color: var(--ink-soft); margin-bottom: var(--space-md); flex: 1; }
        .academy-featured-meta { display: flex; gap: var(--space-md); font-size: 0.85rem; color: var(--ink-faint); }
        
        .academy-skills-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--space-md); }
        .academy-skill-card { background: var(--surface); border-radius: 12px; padding: var(--space-md); text-align: center; border: 1px solid var(--parchment-dark); cursor: pointer; transition: all 0.2s; }
        .academy-skill-card:hover { border-color: var(--gold); transform: translateY(-2px); }
        .academy-skill-icon { font-size: 2rem; margin-bottom: var(--space-xs); }
        .academy-skill-name { font-weight: 600; font-size: 0.9rem; margin-bottom: 4px; }
        .academy-skill-count { font-size: 0.75rem; color: var(--ink-faint); }
        
        .academy-path { background: var(--surface); border-radius: 16px; padding: var(--space-lg); border: 1px solid var(--parchment-dark); }
        .academy-path-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--space-md); }
        .academy-path-title { font-family: var(--font-display); font-size: 1.2rem; }
        .academy-path-progress { font-size: 0.85rem; color: var(--gold); font-weight: 600; }
        .academy-path-steps { display: flex; gap: var(--space-sm); overflow-x: auto; padding-bottom: var(--space-sm); }
        .academy-path-step { flex-shrink: 0; width: 120px; text-align: center; padding: var(--space-md); border-radius: 12px; background: var(--parchment); cursor: pointer; transition: all 0.2s; border: 2px solid transparent; }
        .academy-path-step:hover { background: var(--parchment-deep); }
        .academy-path-step.completed { background: var(--olive-soft); border-color: var(--olive); }
        .academy-path-step.current { border-color: var(--gold); background: var(--gold-faint); }
        .academy-path-step.locked { opacity: 0.5; cursor: not-allowed; }
        .academy-path-step-icon { font-size: 1.5rem; margin-bottom: var(--space-xs); }
        .academy-path-step-name { font-size: 0.8rem; font-weight: 500; }
        .academy-path-step-status { font-size: 0.7rem; color: var(--ink-faint); margin-top: 4px; }
        
        .academy-age-tabs { display: flex; gap: var(--space-sm); margin-bottom: var(--space-lg); background: var(--parchment-deep); padding: var(--space-xs); border-radius: 12px; }
        .academy-age-tab { padding: var(--space-sm) var(--space-md); border-radius: 10px; cursor: pointer; font-size: 0.85rem; transition: all 0.2s; flex: 1; text-align: center; background: transparent; border: none; }
        .academy-age-tab:hover { background: var(--surface); }
        .academy-age-tab.active { background: var(--surface); box-shadow: var(--shadow-sm); font-weight: 600; }
        
        .academy-quick-access { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-md); margin-bottom: var(--space-lg); }
        .academy-quick-btn { background: var(--surface); border-radius: 12px; padding: var(--space-md); display: flex; flex-direction: column; align-items: center; gap: var(--space-xs); cursor: pointer; border: 1px solid var(--parchment-dark); transition: all 0.2s; }
        .academy-quick-btn:hover { border-color: var(--gold); transform: translateY(-2px); }
        .academy-quick-icon { font-size: 1.5rem; }
        .academy-quick-label { font-size: 0.85rem; font-weight: 500; }
        
        .academy-lesson-detail { background: var(--surface); border-radius: 20px; padding: var(--space-xl); border: 1px solid var(--parchment-dark); display: none; }
        .academy-lesson-detail.active { display: block; }
        .academy-lesson-back { display: flex; align-items: center; gap: var(--space-xs); color: var(--ink-soft); cursor: pointer; margin-bottom: var(--space-md); font-size: 0.9rem; }
        .academy-lesson-back:hover { color: var(--gold); }
        .academy-lesson-header { display: flex; gap: var(--space-lg); margin-bottom: var(--space-lg); }
        .academy-lesson-image { width: 300px; height: 200px; background: var(--parchment-deep); border-radius: 16px; display: flex; align-items: center; justify-content: center; font-size: 4rem; flex-shrink: 0; }
        .academy-lesson-info { flex: 1; }
        .academy-lesson-category { font-size: 0.8rem; color: var(--gold); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: var(--space-xs); }
        .academy-lesson-title { font-family: var(--font-display); font-size: 1.8rem; margin-bottom: var(--space-sm); }
        .academy-lesson-desc { color: var(--ink-soft); margin-bottom: var(--space-md); line-height: 1.6; }
        .academy-lesson-tags { display: flex; gap: var(--space-xs); flex-wrap: wrap; }
        .academy-lesson-tag { background: var(--parchment); padding: 4px 12px; border-radius: 100px; font-size: 0.8rem; }
        .academy-lesson-modules { margin-top: var(--space-lg); }
        .academy-module { background: var(--parchment); border-radius: 12px; padding: var(--space-md); margin-bottom: var(--space-sm); cursor: pointer; display: flex; align-items: center; gap: var(--space-md); transition: all 0.2s; }
        .academy-module:hover { background: var(--parchment-deep); }
        .academy-module-check { width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--parchment-dark); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
        .academy-module.completed .academy-module-check { background: var(--olive); border-color: var(--olive); color: var(--white); }
        .academy-module-content { flex: 1; }
        .academy-module-title { font-weight: 500; margin-bottom: 2px; }
        .academy-module-duration { font-size: 0.8rem; color: var(--ink-faint); }
        .academy-module-type { font-size: 0.75rem; padding: 2px 8px; border-radius: 100px; background: var(--surface); }

        @media (max-width: 768px) {
            .search-bar { display: none; }
            .hub-grid, .grid-2, .grid-3 { grid-template-columns: 1fr; }
            .header-right { gap: var(--space-xs); }
            .header-btn span:last-child { display: none; }
            .btn { padding: var(--space-md) var(--space-lg); }
            .dashboard-content { flex-direction: column-reverse; }
            .dashboard-tabs { width: auto; flex-direction: row; margin-right: 0; margin-bottom: var(--space-lg); }
            .academy-featured { grid-template-columns: 1fr; }
            .academy-featured-card { flex-direction: column; }
            .academy-featured-image { width: 100%; height: 150px; }
            .academy-quick-access { grid-template-columns: repeat(2, 1fr); }
            .academy-lesson-header { flex-direction: column; }
            .academy-lesson-image { width: 100%; }

            /* ═══════════════════════════════════════════════════════════ */
            /* AUTHORITATIVE ID PROTECTION — Settings & Profile           */
            /* Per HavenHub Alignment: these MUST always be visible       */
            /* They may reposition but NEVER be hidden by CSS             */
            /* ═══════════════════════════════════════════════════════════ */
            #settings-trigger,
            #profile-trigger {
                display: flex !important;
                visibility: visible !important;
                pointer-events: auto !important;
            }

            /* Ensure header-actions container is always visible */
            #header-actions {
                display: flex !important;
                visibility: visible !important;
            }

            /* Hide floating toggle button - using logo instead */
            .left-sidebar-float-toggle {
                display: none !important;
            }

            /* Logo adds click feedback */
            .logo:active {
                opacity: 0.7;
            }
        }

        /* Enhanced Dashboard Messages */
        .dashboard-messages-container { display: flex; gap: var(--space-md); height: 280px; }
        .messages-list { flex: 1; overflow-y: auto; padding-right: var(--space-sm); }
        .messages-list::-webkit-scrollbar { width: 6px; }
        .messages-list::-webkit-scrollbar-thumb { background: var(--parchment-dark); border-radius: 3px; }
        .message-preview { padding: var(--space-sm) var(--space-md); border-radius: 10px; margin-bottom: var(--space-xs); cursor: pointer; transition: all 0.2s; border-left: 3px solid transparent; }
        .message-preview:hover { background: var(--parchment-deep); }
        .message-preview.active { background: var(--parchment-deep); border-left-color: var(--gold); }
        .message-preview .message-time { font-size: 0.7rem; color: var(--ink-faint); margin-top: 2px; }
        .message-reply-panel { width: 300px; background: var(--surface); border-radius: 12px; padding: var(--space-md); border: 1px solid var(--parchment-dark); display: none; flex-direction: column; }
        .message-reply-panel.active { display: flex; }
        .reply-header { display: flex; align-items: center; gap: var(--space-sm); margin-bottom: var(--space-md); padding-bottom: var(--space-sm); border-bottom: 1px solid var(--parchment-deep); }
        .reply-avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--olive); display: flex; align-items: center; justify-content: center; color: white; font-size: 0.9rem; }
        .reply-user { font-weight: 600; font-size: 0.9rem; }
        .reply-source { font-size: 0.75rem; color: var(--ink-faint); }
        .reply-message { flex: 1; overflow-y: auto; padding: var(--space-sm); background: var(--parchment); border-radius: 8px; margin-bottom: var(--space-md); font-size: 0.9rem; line-height: 1.5; }
        .reply-input-area { display: flex; gap: var(--space-xs); }
        .reply-input { flex: 1; padding: var(--space-sm); border: 1px solid var(--parchment-dark); border-radius: 8px; font-size: 0.85rem; resize: none; }
        .reply-send-btn { padding: var(--space-sm) var(--space-md); background: var(--gold); color: white; border: none; border-radius: 8px; cursor: pointer; }
        .reply-send-btn:hover { background: var(--gold-soft); }

        /* Full Bible Reader Overlay */
        .bible-reader-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.85); z-index: 10000; display: none; align-items: center; justify-content: center; backdrop-filter: blur(4px); }
        .bible-reader-overlay.active { display: flex; }
        .bible-reader { width: 90%; max-width: 1000px; height: 85vh; background: var(--parchment); border-radius: 20px; box-shadow: 0 20px 60px rgba(0,0,0,0.3); display: flex; flex-direction: column; overflow: hidden; }
        .bible-reader-header { display: flex; justify-content: space-between; align-items: center; padding: var(--space-md) var(--space-lg); background: var(--ink); color: var(--parchment); }
        .bible-reader-title { font-family: var(--font-display); font-size: 1.3rem; }
        .bible-reader-nav { display: flex; gap: var(--space-sm); }
        .bible-nav-btn { padding: var(--space-xs) var(--space-md); background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.2); border-radius: 8px; color: var(--parchment); cursor: pointer; transition: all 0.2s; }
        .bible-nav-btn:hover { background: var(--gold); border-color: var(--gold); }
        .bible-nav-select { padding: 4px 8px; background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.2); border-radius: 8px; color: var(--parchment); cursor: pointer; outline: none; }
        .bible-nav-select option { background: var(--parchment-aged); color: var(--ink); }
        .bible-reader-close { background: none; border: none; color: var(--parchment); font-size: 1.5rem; cursor: pointer; padding: var(--space-xs); }
        .bible-reader-body { flex: 1; display: flex; overflow: hidden; }
        .bible-page { flex: 1; padding: var(--space-xl); overflow-y: auto; background: linear-gradient(to right, var(--parchment-deep) 0%, var(--parchment) 3%, var(--parchment) 97%, var(--parchment-deep) 100%); border-right: 1px solid var(--parchment-dark); }
        .bible-page:last-child { border-right: none; }
        .bible-page-header { text-align: center; margin-bottom: var(--space-lg); padding-bottom: var(--space-md); border-bottom: 2px solid var(--gold-faint); }
        .bible-book-title { font-family: var(--font-display); font-size: 1.8rem; color: var(--gold); margin-bottom: var(--space-xs); }
        .bible-chapter-num { font-family: var(--font-display); font-size: 3rem; color: var(--gold); opacity: 0.3; }
        .bible-verse { margin-bottom: var(--space-md); line-height: 1.8; }
        .bible-verse-num { font-weight: 600; color: var(--gold); margin-right: var(--space-xs); font-size: 0.8rem; vertical-align: super; }
        .bible-reader-footer { display: flex; justify-content: center; align-items: center; padding: var(--space-md); background: var(--parchment-deep); gap: var(--space-lg); }
        .page-indicator { font-size: 0.9rem; color: var(--ink-soft); }
        .page-turn-btn { width: 50px; height: 50px; border-radius: 50%; background: var(--surface); border: 2px solid var(--gold); color: var(--gold); font-size: 1.2rem; cursor: pointer; transition: all 0.2s; display: flex; align-items: center; justify-content: center; }
        .page-turn-btn:hover { background: var(--gold); color: var(--white); }
        .bible-toc-panel { width: 250px; background: var(--surface); border-right: 1px solid var(--parchment-dark); overflow-y: auto; display: none; }
        .bible-toc-panel.active { display: block; }
        .toc-section { padding: var(--space-md); }
        .toc-section-title { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-faint); margin-bottom: var(--space-sm); }
        .toc-book { padding: var(--space-xs) var(--space-sm); cursor: pointer; border-radius: 6px; font-size: 0.9rem; margin-bottom: 2px; }
        .toc-book:hover { background: var(--parchment); }
        .toc-book.active { background: var(--gold-faint); color: var(--gold); font-weight: 600; }

        /* Bible Reader Pull Tab */
        .bible-pull-tab { position: absolute; right: 0; top: 40%; transform: translateY(-100%); width: 30px; height: 80px; background: var(--gold); border-radius: 8px 0 0 8px; cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--white); font-size: 0.8rem; writing-mode: vertical-rl; text-orientation: mixed; z-index: 10; transition: all 0.2s; }
        .bible-pull-tab:hover { width: 35px; background: var(--gold-soft); }

        /* Academy Category Toggles */
        .academy-toggle-group { display: flex; gap: var(--space-xs); margin-bottom: var(--space-md); flex-wrap: wrap; }
        .academy-toggle { padding: var(--space-xs) var(--space-md); border-radius: 100px; border: 1px solid var(--parchment-dark); background: var(--surface); cursor: pointer; font-size: 0.8rem; transition: all 0.2s; display: flex; align-items: center; gap: var(--space-xs); }
        .academy-toggle:hover { border-color: var(--gold-soft); }
        .academy-toggle.active { background: var(--gold); color: var(--white); border-color: var(--gold); }
        .academy-toggle-icon { font-size: 0.9rem; }
        .academy-subsection { display: none; margin-top: var(--space-md); padding: var(--space-md); background: var(--parchment); border-radius: 12px; }
        .academy-subsection.active { display: block; }

        /* Enhanced Self-Awareness System */
        .self-system { position: fixed; right: 520px; top: var(--header-height); bottom: 0; width: 400px; background: var(--surface); border-left: 1px solid var(--parchment-dark); overflow-y: auto; padding: var(--space-lg); z-index: 50; transition: right 0.3s; }
        .self-system.collapsed { right: 70px; }
        .self-system-title { font-family: var(--font-display); font-size: 1.3rem; margin-bottom: var(--space-xs); text-align: center; }
        .self-system-subtitle { font-size: 0.85rem; color: var(--ink-soft); text-align: center; margin-bottom: var(--space-lg); }
        .system-step { background: var(--parchment); border-radius: 12px; margin-bottom: var(--space-sm); overflow: hidden; }
        .system-step-header { display: flex; align-items: center; gap: var(--space-sm); padding: var(--space-md); cursor: pointer; }
        .system-step-number { background: var(--gold); color: var(--white); padding: 4px 10px; border-radius: 100px; font-size: 0.75rem; font-weight: 600; }
        .system-step-title { flex: 1; font-weight: 600; font-size: 0.9rem; }
        .system-step-toggle { font-size: 1.2rem; color: var(--ink-soft); }
        .system-step-content { display: none; padding: 0 var(--space-md) var(--space-md); font-size: 0.85rem; line-height: 1.6; }
        .system-step.expanded .system-step-content { display: block; }
        .system-step.expanded .system-step-toggle { transform: rotate(45deg); }
        .system-table { width: 100%; border-collapse: collapse; margin: var(--space-sm) 0; font-size: 0.8rem; }
        .system-table th, .system-table td { border: 1px solid var(--parchment-dark); padding: var(--space-xs); text-align: left; }
        .system-table th { background: var(--parchment-deep); font-weight: 600; }
        .system-table td[contenteditable="true"]:focus { outline: 2px solid var(--gold); background: var(--gold-faint); }
        .system-add-btn { margin-top: var(--space-sm); padding: var(--space-xs) var(--space-md); background: var(--parchment-deep); border: 1px dashed var(--parchment-dark); border-radius: 8px; cursor: pointer; font-size: 0.8rem; }
        .system-add-btn:hover { border-color: var(--gold); background: var(--gold-faint); }
        .system-note { font-size: 0.75rem; color: var(--ink-faint); font-style: italic; margin-top: var(--space-sm); }

        /* Strengths vs Weaknesses Comparison */
        .strength-weakness-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-md); margin: var(--space-md) 0; }
        .sw-column { padding: var(--space-md); border-radius: 12px; }
        .sw-column.strengths { background: linear-gradient(135deg, #E8F5E8 0%, #D4EED4 100%); border-left: 4px solid var(--olive); }
        .sw-column.weaknesses { background: linear-gradient(135deg, #FFF0E8 0%, #FFE4D4 100%); border-left: 4px solid var(--family); }
        .sw-title { font-weight: 600; font-size: 0.9rem; margin-bottom: var(--space-sm); display: flex; align-items: center; gap: var(--space-xs); }
        .sw-item { padding: var(--space-xs) 0; font-size: 0.85rem; border-bottom: 1px dashed rgba(0,0,0,0.1); }
        .sw-item:last-child { border-bottom: none; }

        /* Theme Toggle & Dark Mode */
        .theme-toggle { display: flex; gap: var(--space-xs); }
        .theme-btn { padding: 4px 8px; border-radius: 6px; border: 1px solid rgba(255,255,255,0.2); background: transparent; color: var(--parchment); cursor: pointer; font-size: 0.75rem; }
        .theme-btn.active { background: var(--gold); border-color: var(--gold); }
        
        /* Theme Selector - 3 way toggle */
        .theme-selector {
            display: flex;
            gap: 4px;
            background: var(--parchment-deep);
            padding: 4px;
            border-radius: 10px;
            border: 1px solid var(--parchment-edge);
        }
        
        .theme-option {
            width: 36px;
            height: 36px;
            border: none;
            border-radius: 8px;
            background: transparent;
            cursor: pointer;
            font-size: 1.1rem;
            transition: all 0.2s ease;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .theme-option:hover {
            background: var(--parchment-edge);
        }
        
        .theme-option.active {
            background: var(--gold);
            box-shadow: 0 2px 8px rgba(184, 134, 11, 0.4);
        }
        
        body.dark-theme .theme-selector {
            background: var(--parchment-deep);
            border-color: var(--parchment-edge);
        }
        
        body.unity-theme .theme-selector {
            background: var(--surface);
            border-color: var(--parchment-edge);
        }
        
        body.unity-theme .theme-option.active {
            background: var(--unity-flow);
            box-shadow: 0 2px 12px var(--unity-glow);
        }
        
        /* Accent Color Selector */
        .accent-selector {
            display: flex;
            gap: 6px;
        }
        
        .accent-option {
            width: 32px;
            height: 32px;
            border: 2px solid var(--parchment-edge);
            border-radius: 50%;
            background: transparent;
            cursor: pointer;
            padding: 3px;
            transition: all 0.2s ease;
        }
        
        .accent-option:hover {
            transform: scale(1.1);
        }
        
        .accent-option.active {
            border-color: var(--ink);
            box-shadow: 0 0 0 2px var(--parchment), 0 2px 8px rgba(0,0,0,0.2);
        }
        
        /* Font Size Selector */
        .font-size-selector {
            display: flex;
            gap: 6px;
        }
        
        .font-size-option {
            width: 36px;
            height: 32px;
            border: 2px solid var(--parchment-edge);
            border-radius: 8px;
            background: var(--surface);
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.2s ease;
            font-weight: 600;
            color: var(--ink);
        }
        
        .font-size-option:hover {
            transform: scale(1.05);
            background: var(--parchment-deep);
        }
        
        .font-size-option.active {
            border-color: var(--thread);
            background: var(--thread-faint);
            box-shadow: 0 0 0 2px var(--parchment), 0 2px 8px rgba(0,0,0,0.15);
        }
        
        .accent-swatch {
            display: block;
            width: 100%;
            height: 100%;
            border-radius: 50%;
        }
        
        .accent-swatch.gold {
            background: linear-gradient(135deg, #b8860b, #d4a574);
        }
        
        .accent-swatch.ember {
            background: linear-gradient(135deg, #c45c26, #e8a87c);
        }
        
        .accent-swatch.forest {
            background: linear-gradient(135deg, #4a7c59, #8fbc8f);
        }
        
        .accent-swatch.ocean {
            background: linear-gradient(135deg, #2d6a7a, #64b5c6);
        }
        
        .accent-swatch.ruach {
            background: linear-gradient(135deg, #e0f7ff, #fff0f5, #f0fff0, #fffaf0);
            background-size: 300% 300%;
            animation: ruachBreath 4s ease-in-out infinite;
            box-shadow: 0 0 8px rgba(255, 255, 255, 0.8), inset 0 0 4px rgba(135, 206, 250, 0.5);
        }
        
        @keyframes ruachBreath {
            0%, 100% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
        }
        
        /* Accent Color Variables */
        body.accent-ember {
            --thread: #c45c26;
            --thread-soft: rgba(196, 92, 38, 0.5);
            --thread-faint: rgba(196, 92, 38, 0.15);
            --gold: #e8a87c;
            --gold-soft: rgba(232, 168, 124, 0.5);
            --gold-faint: rgba(232, 168, 124, 0.15);
        }
        
        body.accent-forest {
            --thread: #4a7c59;
            --thread-soft: rgba(74, 124, 89, 0.5);
            --thread-faint: rgba(74, 124, 89, 0.15);
            --gold: #8fbc8f;
            --gold-soft: rgba(143, 188, 143, 0.5);
            --gold-faint: rgba(143, 188, 143, 0.15);
        }
        
        body.accent-ocean {
            --thread: #2d6a7a;
            --thread-soft: rgba(45, 106, 122, 0.5);
            --thread-faint: rgba(45, 106, 122, 0.15);
            --gold: #64b5c6;
            --gold-soft: rgba(100, 181, 198, 0.5);
            --gold-faint: rgba(100, 181, 198, 0.15);
        }
        
        /* Ruach (Spirit) - Light, airy, breath of God */
        body.accent-ruach {
            --thread: #7ec8e3;
            --thread-soft: rgba(126, 200, 227, 0.5);
            --thread-faint: rgba(126, 200, 227, 0.15);
            --gold: #ffd1dc;
            --gold-soft: rgba(255, 209, 220, 0.5);
            --gold-faint: rgba(255, 209, 220, 0.15);
        }
        
        /* Font Size Classes */
        body.font-size-small {
            font-size: 14px;
        }
        
        body.font-size-medium {
            font-size: 16px;
        }
        
        body.font-size-large {
            font-size: 18px;
        }
        
        body.font-size-xlarge {
            font-size: 20px;
        }
        
        /* Weather Widget */
        .weather-widget { display: flex; align-items: center; gap: var(--space-sm); padding: var(--space-sm) var(--space-md); background: linear-gradient(135deg, var(--sky) 0%, #5A8EA0 100%); border-radius: 12px; color: white; margin-bottom: var(--space-md); }
        .weather-icon { font-size: 2rem; }
        .weather-info { flex: 1; }
        .weather-temp { font-size: 1.3rem; font-weight: 600; }
        .weather-desc { font-size: 0.8rem; opacity: 0.9; }
        .weather-sun { text-align: right; font-size: 0.75rem; opacity: 0.8; }

        /* Notification Center */
        .notification-panel { position: absolute; top: 100%; right: 0; width: 350px; background: var(--surface); border-radius: 12px; box-shadow: var(--shadow-md); display: none; z-index: 200; max-height: 400px; overflow-y: auto; }
        .notification-panel.active { display: block; }
        .notification-header { padding: var(--space-md); border-bottom: 1px solid var(--parchment-dark); display: flex; justify-content: space-between; align-items: center; }
        .notification-item { padding: var(--space-md); border-bottom: 1px solid var(--parchment); cursor: pointer; transition: background 0.2s; }
        .notification-item:hover { background: var(--parchment); }
        .notification-item.unread { border-left: 3px solid var(--gold); }
        .notification-type { font-size: 0.7rem; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 2px; }
        .notification-text { font-size: 0.9rem; }
        .notification-time { font-size: 0.75rem; color: var(--ink-faint); margin-top: 4px; }

        /* Quick Actions Bar */
        .quick-actions { display: flex; gap: var(--space-sm); margin-bottom: var(--space-lg); flex-wrap: wrap; }
        .quick-action-btn { display: flex; align-items: center; gap: var(--space-xs); padding: var(--space-sm) var(--space-md); background: var(--surface); border: 1px solid var(--parchment-dark); border-radius: 100px; cursor: pointer; font-size: 0.85rem; transition: all 0.2s; }
        .quick-action-btn:hover { border-color: var(--gold); background: var(--gold-faint); }

        /* Family Dashboard */
        .family-toggle { display: flex; align-items: center; gap: var(--space-sm); margin-bottom: var(--space-md); }
        .family-member-tabs { display: flex; gap: var(--space-xs); }
        .family-member-tab { padding: var(--space-xs) var(--space-md); border-radius: 100px; background: var(--parchment); cursor: pointer; font-size: 0.85rem; }
        .family-member-tab.active { background: var(--gold); color: white; }
        .chore-chart { background: var(--surface); border-radius: 12px; padding: var(--space-md); border: 1px solid var(--parchment-dark); }
        .chore-item { display: flex; align-items: center; gap: var(--space-sm); padding: var(--space-sm) 0; border-bottom: 1px solid var(--parchment); }
        .chore-check { width: 24px; height: 24px; border: 2px solid var(--parchment-dark); border-radius: 6px; cursor: pointer; display: flex; align-items: center; justify-content: center; }
        .chore-check.done { background: var(--olive); border-color: var(--olive); color: white; }

        /* Memory Verse Widget */
        .memory-verse-widget { background: linear-gradient(135deg, var(--gold-faint) 0%, #FFF8E8 100%); padding: var(--space-lg); border-radius: 12px; border: 2px solid var(--gold); margin-bottom: var(--space-md); }
        .memory-verse-label { font-size: 0.8rem; color: var(--gold); text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: var(--space-xs); }
        .memory-verse-text { font-family: var(--font-display); font-size: 1.2rem; line-height: 1.5; margin-bottom: var(--space-sm); }
        .memory-verse-ref { font-size: 0.9rem; color: var(--ink-soft); }
        .memory-verse-progress { margin-top: var(--space-md); }
        .memory-verse-progress-bar { height: 6px; background: var(--parchment); border-radius: 3px; overflow: hidden; }
        .memory-verse-progress-fill { height: 100%; background: var(--gold); border-radius: 3px; }

        /* Repair Shop Enhancements */
        .repair-journal { margin-top: var(--space-lg); }
        .repair-pattern { background: var(--parchment); padding: var(--space-md); border-radius: 10px; margin-bottom: var(--space-sm); }
        .repair-pattern-header { display: flex; justify-content: space-between; align-items: center; }
        .repair-pattern-count { background: var(--family); color: white; padding: 2px 8px; border-radius: 100px; font-size: 0.75rem; }
        .repair-victory { background: linear-gradient(135deg, #E8F5E8 0%, #D4EED4 100%); padding: var(--space-md); border-radius: 10px; border-left: 4px solid var(--olive); margin-bottom: var(--space-sm); }
        .guided-meditation { background: var(--surface); padding: var(--space-lg); border-radius: 12px; border: 1px solid var(--parchment-dark); margin-top: var(--space-lg); }
        .meditation-player { display: flex; align-items: center; gap: var(--space-md); margin-top: var(--space-md); }
        .meditation-play-btn { width: 50px; height: 50px; border-radius: 50%; background: var(--sanctuary); color: white; border: none; font-size: 1.2rem; cursor: pointer; }
        .meditation-progress { flex: 1; height: 6px; background: var(--parchment); border-radius: 3px; }

        /* Fellowship Enhancements */
        .rsvp-btn { padding: var(--space-xs) var(--space-md); border-radius: 8px; border: 1px solid var(--parchment-dark); background: var(--surface); cursor: pointer; font-size: 0.8rem; margin-right: var(--space-xs); }
        .rsvp-btn.going { background: var(--olive); color: white; border-color: var(--olive); }
        .rsvp-btn.maybe { background: var(--gold-faint); border-color: var(--gold); }
        .attendees { display: flex; margin-top: var(--space-sm); }
        .attendee-avatar { width: 28px; height: 28px; border-radius: 50%; background: var(--sanctuary); color: white; display: flex; align-items: center; justify-content: center; font-size: 0.7rem; margin-left: -8px; border: 2px solid var(--white); }
        .attendee-avatar:first-child { margin-left: 0; }
        .prayer-wall { margin-top: var(--space-lg); }
        .prayer-request { background: var(--surface); padding: var(--space-md); border-radius: 12px; border: 1px solid var(--parchment-dark); margin-bottom: var(--space-sm); }
        .prayer-request.answered { border-left: 4px solid var(--olive); background: linear-gradient(135deg, #F8FFF8 0%, #F0F8F0 100%); }
        .prayer-count { display: flex; align-items: center; gap: var(--space-xs); color: var(--sanctuary); font-size: 0.85rem; cursor: pointer; }
        .skill-exchange { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-md); margin-top: var(--space-lg); }
        .skill-card { background: var(--surface); padding: var(--space-md); border-radius: 12px; border: 1px solid var(--parchment-dark); }
        .skill-card.teach { border-top: 4px solid var(--olive); }
        .skill-card.learn { border-top: 4px solid var(--sanctuary); }
        .meal-train { background: var(--surface); padding: var(--space-lg); border-radius: 12px; border: 1px solid var(--parchment-dark); margin-top: var(--space-lg); }
        .meal-slot { display: flex; justify-content: space-between; align-items: center; padding: var(--space-sm) 0; border-bottom: 1px solid var(--parchment); }
        .meal-slot.taken { opacity: 0.6; }

        /* Marketplace Enhancements */
        .listing-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: var(--space-md); }
        .listing-card { background: var(--surface); border-radius: 12px; overflow: hidden; border: 1px solid var(--parchment-dark); transition: all 0.2s; }
        .listing-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
        .listing-image { height: 150px; background: var(--parchment-deep); display: flex; align-items: center; justify-content: center; font-size: 3rem; }
        .listing-content { padding: var(--space-md); }
        .listing-title { font-weight: 600; margin-bottom: var(--space-xs); }
        .listing-price { color: var(--gold); font-weight: 600; }
        .listing-type { font-size: 0.75rem; padding: 2px 8px; border-radius: 100px; background: var(--parchment); display: inline-block; margin-bottom: var(--space-xs); }
        .listing-type.free { background: var(--olive); color: white; }
        .listing-type.trade { background: var(--sanctuary); color: white; }
        .tool-library { margin-top: var(--space-lg); }
        .tool-item { display: flex; align-items: center; gap: var(--space-md); padding: var(--space-md); background: var(--surface); border-radius: 10px; border: 1px solid var(--parchment-dark); margin-bottom: var(--space-sm); }
        .tool-icon { font-size: 1.5rem; }
        .tool-info { flex: 1; }
        .tool-owner { font-size: 0.8rem; color: var(--ink-faint); }
        .tool-status { padding: 4px 12px; border-radius: 100px; font-size: 0.75rem; }
        .tool-status.available { background: var(--olive-soft); color: white; }
        .tool-status.borrowed { background: var(--family); color: white; }
        .time-bank { background: linear-gradient(135deg, var(--gold-faint) 0%, #FFF8E8 100%); padding: var(--space-lg); border-radius: 12px; margin-top: var(--space-lg); }
        .time-balance { font-size: 2rem; font-weight: 600; color: var(--gold); }

        /* Stream Enhancements */
        .media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--space-md); }
        .media-card { background: var(--surface); border-radius: 12px; overflow: hidden; border: 1px solid var(--parchment-dark); }
        .media-thumbnail { height: 160px; background: var(--ink); display: flex; align-items: center; justify-content: center; position: relative; }
        .media-play-btn { width: 60px; height: 60px; border-radius: 50%; background: rgba(255,255,255,0.9); display: flex; align-items: center; justify-content: center; font-size: 1.5rem; cursor: pointer; }
        .media-duration { position: absolute; bottom: var(--space-sm); right: var(--space-sm); background: rgba(0,0,0,0.7); color: white; padding: 2px 8px; border-radius: 4px; font-size: 0.75rem; }
        .media-info { padding: var(--space-md); }
        .media-title { font-weight: 600; margin-bottom: var(--space-xs); }
        .media-meta { font-size: 0.8rem; color: var(--ink-faint); }
        .media-rating { display: flex; gap: 2px; margin-top: var(--space-xs); }
        .media-star { color: var(--gold); }
        .playlist-section { margin-top: var(--space-lg); }
        .playlist-card { display: flex; gap: var(--space-md); padding: var(--space-md); background: var(--surface); border-radius: 12px; border: 1px solid var(--parchment-dark); margin-bottom: var(--space-sm); cursor: pointer; }
        .playlist-cover { width: 80px; height: 80px; background: var(--parchment-deep); border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 2rem; }
        .playlist-info { flex: 1; }
        .playlist-count { font-size: 0.8rem; color: var(--ink-faint); }

        /* Living Binder New Tabs */
        .legacy-letter { background: var(--surface); padding: var(--space-lg); border-radius: 12px; border: 1px solid var(--parchment-dark); margin-bottom: var(--space-md); }
        .legacy-letter-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--space-md); }
        .legacy-recipient { font-size: 0.85rem; color: var(--ink-soft); }
        .health-card { background: var(--surface); padding: var(--space-md); border-radius: 12px; border: 1px solid var(--parchment-dark); margin-bottom: var(--space-sm); }
        .health-label { font-size: 0.8rem; color: var(--ink-faint); margin-bottom: var(--space-xs); }
        .health-value { font-weight: 600; }
        .finance-card { background: var(--surface); padding: var(--space-lg); border-radius: 12px; border: 1px solid var(--parchment-dark); }
        .finance-stat { text-align: center; padding: var(--space-md); }
        .finance-stat-value { font-size: 1.5rem; font-weight: 600; color: var(--gold); }
        .finance-stat-label { font-size: 0.85rem; color: var(--ink-soft); }
        .liturgical-calendar { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; margin-top: var(--space-md); }
        .calendar-day { padding: var(--space-sm); text-align: center; background: var(--surface); border-radius: 4px; font-size: 0.85rem; cursor: pointer; }
        .calendar-day.today { background: var(--gold); color: white; }
        .calendar-day.sabbath { background: var(--parchment-deep); }
        .calendar-day.feast { border: 2px solid var(--gold); }

        /* Needs Assessment Styles */
        .needs-rating { width: 32px; height: 32px; border: 1px solid var(--parchment-dark); background: var(--surface); border-radius: 6px; cursor: pointer; font-weight: 600; transition: all 0.2s; }
        .needs-rating:hover { border-color: var(--gold); background: var(--gold-faint); }
        .needs-rating.active { background: var(--gold); color: white; border-color: var(--gold); }

        /* Profile Enhancements */
        .profile-completeness { margin-bottom: var(--space-lg); }
        .completeness-bar { height: 8px; background: var(--parchment); border-radius: 4px; overflow: hidden; }
        .completeness-fill { height: 100%; background: linear-gradient(90deg, var(--gold) 0%, var(--olive) 100%); border-radius: 4px; }
        .completeness-text { display: flex; justify-content: space-between; margin-top: var(--space-xs); font-size: 0.85rem; }
        .badge-grid { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-top: var(--space-md); }
        .badge { display: flex; flex-direction: column; align-items: center; padding: var(--space-md); background: var(--surface); border-radius: 12px; border: 1px solid var(--parchment-dark); min-width: 100px; }
        .badge.earned { border-color: var(--gold); background: var(--gold-faint); }
        .badge-icon { font-size: 2rem; margin-bottom: var(--space-xs); }
        .badge-name { font-size: 0.8rem; text-align: center; }
        .badge.locked { opacity: 0.5; }
        .badge.locked .badge-icon { filter: grayscale(1); }
        .testimony-builder { background: var(--surface); padding: var(--space-lg); border-radius: 12px; border: 1px solid var(--parchment-dark); }
        .testimony-section { margin-bottom: var(--space-lg); }
        .testimony-label { font-weight: 600; margin-bottom: var(--space-sm); display: flex; align-items: center; gap: var(--space-sm); }
        .gifts-assessment { background: var(--parchment); padding: var(--space-lg); border-radius: 12px; margin-top: var(--space-lg); }
        .gifts-result { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-top: var(--space-md); }
        .gift-tag { padding: var(--space-sm) var(--space-md); background: var(--surface); border-radius: 100px; border: 2px solid var(--gold); font-size: 0.9rem; }

        /* Kids Zone */
        .kids-zone { background: linear-gradient(135deg, #FFF0F5 0%, #F0F8FF 100%); }
        .kids-header { background: linear-gradient(135deg, #FF6B9D 0%, #C44569 100%); color: white; padding: var(--space-xl); border-radius: 20px; margin-bottom: var(--space-lg); text-align: center; }
        .kids-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--space-md); }
        .kids-card { background: var(--surface); border-radius: 20px; padding: var(--space-lg); text-align: center; border: 3px solid transparent; cursor: pointer; transition: all 0.2s; }
        .kids-card:hover { border-color: var(--gold); transform: scale(1.02); }
        .kids-icon { font-size: 3rem; margin-bottom: var(--space-sm); }
        .kids-title { font-family: var(--font-display); font-size: 1.2rem; }
        .reward-stars { display: flex; justify-content: center; gap: var(--space-xs); margin-top: var(--space-sm); }
        .reward-star { font-size: 1.2rem; }
        .reward-star.earned { color: var(--gold); }
        .reward-star.empty { color: var(--parchment-dark); }

.kids-h1 { font-family: var(--font-display); font-size: 2.5rem; margin: 0 0 var(--space-sm) 0; }
.kids-sub { font-size: 1.1rem; margin: 0; }
.kids-muted { font-size: 0.9rem; color: var(--ink-soft); margin: var(--space-xs) 0 0 0; }
.kids-points { margin-top: var(--space-sm); font-weight: 700; color: var(--olive); font-size: 0.95rem; }

.kids-progress { display:flex; justify-content: space-between; gap: var(--space-md); padding: var(--space-md); border-radius: 16px; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.12); margin-bottom: var(--space-md); }
.kids-progress-title { font-weight: 800; letter-spacing: 0.2px; }
.kids-progress-total { font-family: var(--font-display); font-size: 1.8rem; margin-top: 2px; }
.kids-progress-sub { font-size: 0.9rem; color: rgba(255,255,255,0.82); margin-top: 6px; }
.kids-progress-right { text-align: right; display:flex; flex-direction:column; justify-content: space-between; }
.kids-progress-badge { display:inline-block; padding: 6px 10px; border-radius: 999px; background: rgba(0,0,0,0.18); border: 1px solid rgba(255,255,255,0.14); font-weight: 700; }
.kids-progress-mini { display:flex; gap: 10px; justify-content: flex-end; font-size: 0.9rem; opacity: 0.95; }
.kids-divider { opacity: 0.7; }

.kids-expander { margin-top: var(--space-md); background: var(--surface); border: 1px solid var(--parchment-edge); border-radius: 18px; padding: var(--space-md); }
.kids-expander-head { display:flex; justify-content: space-between; gap: var(--space-md); align-items: flex-start; margin-bottom: var(--space-sm); }
.kids-expander-title { font-family: var(--font-display); font-size: 1.5rem; margin: 0; }
.kids-expander-meta { text-align:right; }
.kids-expander-meta .pts { font-weight: 800; color: var(--olive); }
.kids-expander-body { display:grid; grid-template-columns: 1.2fr 0.8fr; gap: var(--space-md); }
.kids-panel { background: rgba(0,0,0,0.03); border: 1px solid rgba(0,0,0,0.08); border-radius: 14px; padding: var(--space-md); }
.kids-panel h4 { margin: 0 0 8px 0; font-size: 1rem; }
.kids-check { display:flex; align-items:center; gap: 10px; padding: 10px 12px; border-radius: 12px; border: 1px dashed rgba(0,0,0,0.18); background: rgba(255,255,255,0.55); }
.kids-check input { transform: scale(1.15); }
.kids-mini-list { margin: 0; padding-left: 18px; color: var(--ink-soft); }
.kids-mini-list li { margin: 6px 0; }
.kids-close { cursor:pointer; padding: 8px 10px; border-radius: 12px; border: 1px solid rgba(0,0,0,0.12); background: rgba(255,255,255,0.65); font-weight: 700; }
.kids-close:hover { transform: translateY(-1px); }

body.dark-theme .kids-progress { background: rgba(0,0,0,0.28); border-color: rgba(255,255,255,0.10); }
body.dark-theme .kids-progress-sub { color: rgba(232,223,208,0.78); }
body.dark-theme .kids-progress-badge { background: rgba(0,0,0,0.28); border-color: rgba(255,255,255,0.12); color: var(--ink); }
body.dark-theme .kids-panel { background: rgba(0,0,0,0.18); border-color: rgba(255,255,255,0.10); }
body.dark-theme .kids-check { background: rgba(0,0,0,0.22); border-color: rgba(255,255,255,0.14); }
body.dark-theme .kids-close { background: rgba(0,0,0,0.22); border-color: rgba(255,255,255,0.14); color: var(--ink); }

        /* THE FLAME - Teen Community (Parchment Theme) */
        .flame-container { display: flex; height: 100%; background: linear-gradient(135deg, var(--parchment) 0%, var(--parchment-aged) 100%); color: var(--ink); overflow: hidden; }
        .flame-sidebar { width: 260px; background: var(--parchment-aged); border-right: 2px dashed var(--parchment-edge); display: flex; flex-direction: column; }
        .flame-sidebar-header { padding: 20px; border-bottom: 2px dashed var(--parchment-edge); }
        .flame-logo { display: flex; align-items: center; gap: 12px; font-size: 22px; font-weight: 700; }
        .flame-logo span { background: linear-gradient(135deg, var(--thread) 0%, var(--thread-glow) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
        .flame-nav { flex: 1; padding: 16px 12px; overflow-y: auto; }
        .flame-nav-item { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: var(--radius-md); cursor: pointer; transition: all 0.2s; margin-bottom: 4px; color: var(--ink-soft); }
        .flame-nav-item:hover { background: var(--parchment); color: var(--ink); }
        .flame-nav-item.active { background: var(--parchment); color: var(--thread); border: 1px dashed var(--thread); }
        .flame-nav-badge { margin-left: auto; background: var(--thread); color: var(--white); font-size: 10px; padding: 2px 8px; border-radius: 100px; font-weight: 600; }
        .flame-nav-divider { height: 2px; background: var(--parchment-edge); margin: 12px 0; }
        .flame-profile { padding: 16px; border-top: 2px dashed var(--parchment-edge); display: flex; align-items: center; gap: 12px; }
        .flame-profile-avatar { width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(135deg, var(--thread) 0%, var(--thread-hover) 100%); display: flex; align-items: center; justify-content: center; font-weight: 600; color: var(--white); }
        .flame-profile-info { flex: 1; }
        .flame-profile-name { font-weight: 600; font-size: 14px; color: var(--ink); }
        .flame-profile-status { font-size: 11px; color: var(--olive); }
        
        .flame-main { flex: 1; display: flex; flex-direction: column; overflow: hidden; background: var(--parchment); }
        .flame-header { padding: 20px 24px; border-bottom: 2px dashed var(--parchment-edge); display: flex; align-items: center; justify-content: space-between; background: var(--parchment-aged); }
        .flame-header-title { font-size: 20px; font-weight: 600; font-family: var(--font-display); color: var(--ink); }
        .flame-header-actions { display: flex; gap: 12px; }
        .flame-header-btn { padding: 8px 16px; background: var(--parchment); border: 2px dashed var(--thread-soft); border-radius: var(--radius-md); color: var(--thread); font-size: 13px; cursor: pointer; transition: all 0.2s; }
        .flame-header-btn:hover { background: var(--thread-faint); border-color: var(--thread); }
        .flame-header-btn.primary { background: linear-gradient(135deg, var(--thread) 0%, var(--thread-hover) 100%); border: 2px solid var(--thread); color: var(--white); }
        
        .flame-content { flex: 1; overflow-y: auto; padding: 24px; }
        
        .flame-feed-post { background: var(--parchment-aged); border: 2px dashed var(--parchment-edge); border-radius: var(--radius-lg); padding: 20px; margin-bottom: 16px; }
        .flame-post-header { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
        .flame-post-avatar { width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 14px; background: var(--thread-faint); color: var(--thread); }
        .flame-post-author { font-weight: 600; font-size: 15px; color: var(--ink); }
        .flame-post-meta { font-size: 12px; color: var(--ink-faint); }
        .flame-post-badge { padding: 2px 8px; border-radius: 100px; font-size: 10px; font-weight: 600; margin-left: 8px; }
        .flame-post-badge.leader { background: var(--thread-faint); color: var(--thread); }
        .flame-post-badge.mentor { background: rgba(122, 139, 92, 0.15); color: var(--olive); }
        .flame-post-content { font-size: 15px; line-height: 1.6; color: var(--ink-soft); margin-bottom: 16px; }
        .flame-post-media { border-radius: var(--radius-md); overflow: hidden; margin-bottom: 16px; background: var(--parchment-deep); border: 1px dashed var(--parchment-edge); }
        .flame-post-actions { display: flex; gap: 20px; padding-top: 14px; border-top: 2px dashed var(--parchment-edge); }
        .flame-post-action { display: flex; align-items: center; gap: 6px; color: var(--ink-faint); font-size: 13px; cursor: pointer; transition: color 0.2s; }
        .flame-post-action:hover { color: var(--thread); }
        .flame-post-action.liked { color: var(--berry); }
        
        .flame-right { width: 300px; background: var(--parchment-aged); border-left: 2px dashed var(--parchment-edge); padding: 20px; overflow-y: auto; }
        .flame-card { background: var(--parchment); border: 2px dashed var(--parchment-edge); border-radius: var(--radius-lg); padding: 16px; margin-bottom: 16px; }
        .flame-card-title { font-size: 14px; font-weight: 600; margin-bottom: 12px; display: flex; align-items: center; gap: 8px; color: var(--ink); }
        .flame-event { padding: 10px 0; border-bottom: 1px dashed var(--parchment-edge); }
        .flame-event:last-child { border: none; }
        .flame-event-title { font-size: 14px; font-weight: 500; margin-bottom: 2px; color: var(--ink); }
        .flame-event-meta { font-size: 12px; color: var(--ink-faint); }
        .flame-event-tag { display: inline-block; padding: 2px 8px; background: var(--thread-faint); color: var(--thread); border-radius: 4px; font-size: 10px; margin-top: 4px; }
        
        .flame-challenge { background: var(--thread-faint); border: 2px dashed var(--thread-soft); }
        .flame-challenge-progress { height: 6px; background: var(--parchment-deep); border-radius: 3px; margin-top: 12px; overflow: hidden; }
        .flame-challenge-fill { height: 100%; background: linear-gradient(90deg, var(--thread), var(--thread-glow)); border-radius: 3px; }
        
        .flame-leaderboard-item { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px dashed var(--parchment-edge); }
        .flame-leaderboard-rank { width: 24px; height: 24px; border-radius: 50%; background: var(--thread-faint); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; color: var(--thread); }
        .flame-leaderboard-rank.gold { background: linear-gradient(135deg, var(--thread) 0%, var(--thread-glow) 100%); color: var(--white); }
        .flame-leaderboard-name { flex: 1; font-size: 13px; color: var(--ink); }
        .flame-leaderboard-xp { font-size: 12px; color: var(--thread); }
        
        .flame-mentor-card { display: flex; gap: 12px; padding: 12px; background: rgba(122, 139, 92, 0.1); border: 2px dashed var(--olive-soft); border-radius: var(--radius-md); }
        .flame-mentor-avatar { width: 48px; height: 48px; border-radius: 50%; background: linear-gradient(135deg, var(--olive) 0%, var(--olive-soft) 100%); display: flex; align-items: center; justify-content: center; font-weight: 600; color: var(--white); }
        .flame-mentor-name { font-weight: 600; font-size: 14px; color: var(--ink); }
        .flame-mentor-role { font-size: 11px; color: var(--olive); }
        .flame-mentor-btn { margin-top: 8px; padding: 6px 12px; background: rgba(122, 139, 92, 0.15); border: 1px dashed var(--olive-soft); border-radius: var(--radius-sm); color: var(--olive); font-size: 12px; cursor: pointer; }
        
        /* Flame View Sections */
        .flame-section { display: none; }
        .flame-section.active { display: block; }
        
        .flame-bible-verse { background: var(--thread-faint); border: 2px dashed var(--thread-soft); border-radius: var(--radius-lg); padding: 20px; margin-bottom: 20px; }
        .flame-verse-text { font-size: 18px; font-style: italic; line-height: 1.6; margin-bottom: 8px; color: var(--ink); font-family: var(--font-display); }
        .flame-verse-ref { font-size: 13px; color: var(--thread); }
        
        .flame-group-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; }
        .flame-group-card { background: var(--parchment-aged); border: 2px dashed var(--parchment-edge); border-radius: var(--radius-lg); padding: 16px; cursor: pointer; transition: all 0.2s; }
        .flame-group-card:hover { border-color: var(--thread); transform: translateY(-2px); }
        .flame-group-icon { width: 48px; height: 48px; border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; font-size: 24px; margin-bottom: 12px; background: var(--thread-faint); }
        .flame-group-name { font-weight: 600; margin-bottom: 4px; color: var(--ink); }
        .flame-group-members { font-size: 12px; color: var(--ink-faint); }

        /* Admin Dashboard */
        .admin-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-md); margin-bottom: var(--space-lg); }
        .admin-stat { background: var(--surface); padding: var(--space-lg); border-radius: 12px; text-align: center; border: 1px solid var(--parchment-dark); }
        .admin-stat-value { font-size: 2rem; font-weight: 600; color: var(--gold); }
        .admin-stat-label { font-size: 0.85rem; color: var(--ink-soft); }
        .admin-section { background: var(--surface); padding: var(--space-lg); border-radius: 12px; border: 1px solid var(--parchment-dark); margin-bottom: var(--space-lg); }
        .member-row { display: flex; align-items: center; gap: var(--space-md); padding: var(--space-md) 0; border-bottom: 1px solid var(--parchment); }
        .member-status { width: 10px; height: 10px; border-radius: 50%; }
        .member-status.active { background: var(--olive); }
        .member-status.inactive { background: var(--family); }

        /* Crisis Page */
        .crisis-header { background: linear-gradient(135deg, var(--family) 0%, #8B4A4A 100%); color: white; padding: var(--space-xl); border-radius: 16px; margin-bottom: var(--space-lg); text-align: center; }
        .crisis-btn { display: block; width: 100%; padding: var(--space-lg); background: var(--family); color: white; border: none; border-radius: 12px; font-size: 1.1rem; cursor: pointer; margin-bottom: var(--space-md); text-align: center; }
        .crisis-btn:hover { background: #A05050; }
        .crisis-contacts { background: var(--surface); padding: var(--space-lg); border-radius: 12px; border: 1px solid var(--parchment-dark); }
        .crisis-contact { display: flex; align-items: center; gap: var(--space-md); padding: var(--space-md) 0; border-bottom: 1px solid var(--parchment); }
        .crisis-contact-icon { font-size: 1.5rem; }

        /* Chat Enhancements */
        .chat-reactions { display: flex; gap: var(--space-xs); margin-top: var(--space-xs); }
        .chat-reaction { padding: 2px 6px; background: var(--parchment); border-radius: 100px; font-size: 0.75rem; cursor: pointer; }
        .chat-reaction.active { background: var(--gold-faint); }
        .voice-message { display: flex; align-items: center; gap: var(--space-sm); padding: var(--space-sm); background: var(--parchment); border-radius: 100px; }
        .voice-waveform { flex: 1; height: 30px; background: var(--parchment-deep); border-radius: 4px; }
        .pinned-message { background: var(--gold-faint); border-left: 3px solid var(--gold); padding: var(--space-sm) var(--space-md); margin-bottom: var(--space-md); border-radius: 0 8px 8px 0; }

        /* Focus Mode */
        .focus-mode .left-sidebar, .focus-mode .right-sidebar, .focus-mode .header { display: none; }
        .focus-mode .main-content { margin: 0; padding: var(--space-xl); max-width: 800px; margin: 0 auto; }

        /* Animations */
        @keyframes confetti { 0% { transform: translateY(0) rotate(0); opacity: 1; } 100% { transform: translateY(-100px) rotate(720deg); opacity: 0; } }
        @keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } }
        @keyframes slideIn { from { transform: translateX(20px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
        .animate-pulse { animation: pulse 2s infinite; }
        .animate-slide-in { animation: slideIn 0.3s ease-out; }
        .new-notification { animation: pulse 0.5s ease-out; }

        /* STEAM Lab Styles (Parchment Theme) */
        .steam-header { background: linear-gradient(135deg, var(--parchment-deep) 0%, var(--parchment-aged) 50%, var(--parchment) 100%); border: 2px dashed var(--thread); padding: 32px var(--space-xl); border-radius: var(--radius-xl); margin-bottom: var(--space-lg); color: var(--ink); text-align: center; position: relative; overflow: hidden; min-height: 120px; }
        .steam-header::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); }
        .steam-header h1 { font-family: var(--font-display); font-size: 2.2rem; margin-bottom: var(--space-sm); position: relative; }
        .steam-disciplines { display: flex; justify-content: center; gap: var(--space-lg); flex-wrap: wrap; margin-top: var(--space-lg); }
        .steam-discipline { display: flex; flex-direction: column; align-items: center; gap: var(--space-xs); padding: var(--space-md); background: rgba(255,255,255,0.1); border-radius: 12px; min-width: 100px; transition: all 0.3s; cursor: pointer; }
        .steam-discipline:hover { background: rgba(255,255,255,0.2); transform: translateY(-4px); }
        .steam-discipline-icon { font-size: 2rem; }
        .steam-discipline-name { font-weight: 600; font-size: 0.9rem; }
        .steam-discipline-color { width: 4px; height: 4px; border-radius: 50%; }
        .lab-station { background: var(--surface); border-radius: 16px; padding: var(--space-lg); margin-bottom: var(--space-lg); border: 2px solid var(--parchment-dark); position: relative; }
        .lab-station-header { display: flex; align-items: center; gap: var(--space-md); margin-bottom: var(--space-md); }
        .lab-station-icon { width: 48px; height: 48px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; }
        .lab-station-title { font-family: var(--font-display); font-size: 1.3rem; }
        .lab-station-badge { position: absolute; top: var(--space-md); right: var(--space-md); background: #8B5CF6; color: white; padding: 4px 12px; border-radius: 20px; font-size: 0.75rem; font-weight: 600; }
        .experiment-card { background: var(--parchment); border-radius: 12px; padding: var(--space-md); margin-bottom: var(--space-sm); cursor: pointer; transition: all 0.2s; border-left: 4px solid transparent; }
        .experiment-card:hover { transform: translateX(4px); border-left-color: #8B5CF6; }
        .experiment-meta { display: flex; gap: var(--space-md); margin-top: var(--space-sm); font-size: 0.85rem; color: var(--ink-soft); }

        /* The Arc Styles */
        .arc-header { background: linear-gradient(135deg, #FF6B35 0%, #D97706 50%, #B45309 100%); padding: var(--space-xl); border-radius: 16px; margin-bottom: var(--space-lg); color: white; text-align: center; }
        .arc-phases { display: flex; gap: var(--space-md); margin-top: var(--space-lg); }
        .arc-phase { flex: 1; background: var(--surface); border-radius: 16px; padding: var(--space-lg); text-align: center; position: relative; }
        .arc-phase-number { position: absolute; top: -15px; left: 50%; transform: translateX(-50%); background: var(--gold); color: white; width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; }
        .arc-connector { display: flex; align-items: center; justify-content: center; font-size: 1.5rem; color: var(--gold); }
        .rosetta-table { width: 100%; border-collapse: collapse; margin-top: var(--space-md); }
        .rosetta-table th, .rosetta-table td { padding: var(--space-md); text-align: left; border-bottom: 1px solid var(--parchment-dark); }
        .rosetta-table th { background: var(--parchment-deep); font-family: var(--font-display); }
        .rosetta-table tr:hover { background: var(--parchment); }

        /* Formation Pathway Styles */
        .pathway-card { background: var(--surface); border-radius: 16px; padding: var(--space-lg); margin-bottom: var(--space-lg); border: 2px solid var(--parchment-dark); }
        .pathway-header { display: flex; align-items: center; gap: var(--space-md); margin-bottom: var(--space-lg); }
        .pathway-badge { padding: 8px 16px; border-radius: 20px; font-weight: 700; font-size: 0.85rem; }
        .pathway-badge.ages-3-6 { background: #D1FAE5; color: #065F46; }
        .pathway-badge.ages-7-10 { background: #DBEAFE; color: #1E40AF; }
        .pathway-badge.ages-11-14 { background: #E9D5FF; color: #6B21A8; }
        .pathway-badge.ages-15-18 { background: #FED7AA; color: #C2410C; }
        .pathway-badge.adults { background: #FEE2E2; color: #991B1B; }
        .pathway-badge.family { background: #FEF3C7; color: #92400E; }
        .pathway-flow { display: flex; align-items: stretch; gap: var(--space-sm); }
        .pathway-step { flex: 1; background: var(--parchment); border-radius: 12px; padding: var(--space-md); text-align: center; position: relative; }
        .pathway-step-icon { font-size: 2rem; margin-bottom: var(--space-sm); }
        .pathway-step-title { font-family: var(--font-display); font-weight: 600; margin-bottom: var(--space-xs); }
        .pathway-step-subtitle { font-size: 0.8rem; color: var(--ink-soft); margin-bottom: var(--space-sm); }
        .pathway-arrow { display: flex; align-items: center; font-size: 1.5rem; color: var(--gold); }
        .pathway-outcome { background: linear-gradient(135deg, var(--gold-faint) 0%, #FFF8E8 100%); border: 2px solid var(--gold); border-radius: 12px; padding: var(--space-md); margin-top: var(--space-md); text-align: center; }

        /* Accessibility */
        .font-size-controls { display: flex; gap: var(--space-xs); }
        .font-size-btn { padding: 4px 8px; border: 1px solid var(--parchment-dark); background: var(--surface); border-radius: 4px; cursor: pointer; }
        .dyslexia-font { font-family: 'OpenDyslexic', var(--font-body); }
    

body.dark-theme .header,
body.dark-theme .header *{
  color: var(--ink);
}

body.dark-theme .header-btn{
  color: var(--ink) !important;
}

body.dark-theme .search-bar{
  color: var(--ink);
}
body.dark-theme .search-bar input{
  color: var(--ink) !important;
}
body.dark-theme .search-bar input::placeholder{
  color: rgba(232, 223, 208, 0.6);
}

/* Family Room: age tabs */
body.dark-theme .age-tab{
  color: var(--ink) !important;
  background: rgba(232, 223, 208, 0.06) !important;
  border-color: rgba(232, 223, 208, 0.18) !important;
}
body.dark-theme .age-tab.active{
  color: #1A1410 !important;
}

/* Repair Shop: rupture buttons and labels */
body.dark-theme .rupture-btn,
body.dark-theme .rupture-btn *{
  color: var(--ink) !important;
}
body.dark-theme .rupture-label{
  color: var(--ink) !important;
}

/* Repair Shop: colored boxes (make text readable) */
body.dark-theme .repair-card,
body.dark-theme .repair-step,
body.dark-theme .repair-module,
body.dark-theme .repair-box{
  color: var(--ink) !important;
}

/* SOTA: middle form + right-side tabs */
body.dark-theme .sota-form,
body.dark-theme .sota-form *{
  background: var(--parchment-aged);
  color: var(--ink) !important;
  border-color: rgba(232, 223, 208, 0.18);
}
body.dark-theme .sota-tabs button,
body.dark-theme .sota-tabs .tab,
body.dark-theme .sota-side-tabs button{
  background: rgba(232, 223, 208, 0.06) !important;
  color: var(--ink) !important;
  border-color: rgba(232, 223, 208, 0.18) !important;
}
body.dark-theme .sota-tabs button.active,
body.dark-theme .sota-side-tabs button.active{
  background: var(--thread) !important;
  color: #1A1410 !important;
}

/* Crisis: quick help request list */
body.dark-theme .crisis-actions button,
body.dark-theme .crisis-actions .action,
body.dark-theme .quick-help button,
body.dark-theme .quick-help a{
  color: var(--ink) !important;
}



/* ===== Dark theme readability fixes (targeted) ===== */

/* Ensure any legacy inline white surfaces flip in dark mode */
body.dark-theme [style*="background: var(--white)"]{
  background: var(--parchment-aged) !important;
  color: var(--ink) !important;
  border-color: rgba(232, 223, 208, 0.18) !important;
}

/* Header: make all text/icons readable */
body.dark-theme .header,
body.dark-theme .header *{
  color: var(--ink) !important;
}
body.dark-theme .header-btn{
  color: var(--ink) !important;
  border-color: rgba(232, 223, 208, 0.18) !important;
}
body.dark-theme .search-bar{
  border-color: rgba(232, 223, 208, 0.18) !important;
}
body.dark-theme .search-bar input{
  color: var(--ink) !important;
}
body.dark-theme .search-bar input::placeholder{
  color: rgba(232, 223, 208, 0.65) !important;
}

/* Family Room: Ages tabs */
body.dark-theme #page-family .age-tab{
  color: var(--ink) !important;
  background: rgba(232, 223, 208, 0.06) !important;
  border-color: rgba(232, 223, 208, 0.18) !important;
}
body.dark-theme #page-family .age-tab.active{
  color: #1A1410 !important;
}

/* Repair Shop: rupture buttons + labels + patterned boxes */
body.dark-theme #tab-repair .rupture-btn,
body.dark-theme #tab-repair .rupture-btn *{
  color: var(--ink) !important;
  background: rgba(232, 223, 208, 0.06) !important;
  border-color: rgba(232, 223, 208, 0.18) !important;
}
body.dark-theme #tab-repair .rupture-btn.selected{
  background: rgba(196, 136, 28, 0.18) !important;
  border-color: var(--thread) !important;
}
body.dark-theme #tab-repair .rupture-label{
  color: var(--ink) !important;
}

/* Repair Shop: any repair cards/blocks */
body.dark-theme #tab-repair .repair-pattern,
body.dark-theme #tab-repair .repair-journal,
body.dark-theme #tab-repair .repair-victory,
body.dark-theme #tab-repair .repair-flow{
  color: var(--ink) !important;
}
body.dark-theme #tab-repair .repair-pattern{
  background: var(--parchment-aged) !important;
  border-color: rgba(232, 223, 208, 0.18) !important;
}

/* Academy (SOTA): ensure lesson detail / forms + tags are dark themed */
body.dark-theme #page-academy .academy-card,
body.dark-theme #page-academy .academy-lesson-detail,
body.dark-theme #page-academy .academy-lesson-info,
body.dark-theme #page-academy .academy-module,
body.dark-theme #page-academy .academy-lesson-modules,
body.dark-theme #page-academy .academy-lesson-back{
  background: var(--parchment-aged) !important;
  color: var(--ink) !important;
  border-color: rgba(232, 223, 208, 0.18) !important;
}
body.dark-theme #page-academy .academy-lesson-tag,
body.dark-theme #page-academy .academy-card-badge{
  background: rgba(232, 223, 208, 0.08) !important;
  color: var(--ink) !important;
  border-color: rgba(232, 223, 208, 0.18) !important;
}

/* Crisis: quick help request buttons */
body.dark-theme #page-crisis .crisis-btn,
body.dark-theme #page-crisis .crisis-btn *{
  color: var(--ink) !important;
  background: rgba(232, 223, 208, 0.06) !important;
  border-color: rgba(232, 223, 208, 0.18) !important;
}
body.dark-theme #page-crisis .crisis-btn:hover{
  border-color: var(--thread) !important;
}


/* ===== Dark theme fixes v3: STOA + Crisis ===== */

/* STOA (Forum) - force any inline 'white' surfaces and light-ink colors to dark surfaces */
body.dark-theme #page-forum [style*="background: var(--white)"]{
  background: var(--parchment-aged) !important;
  color: var(--ink) !important;
  border-color: rgba(232, 223, 208, 0.18) !important;
}
body.dark-theme #page-forum [style*="color: var(--parchment"]{
  color: var(--ink) !important;
}
body.dark-theme #page-forum input,
body.dark-theme #page-forum textarea,
body.dark-theme #page-forum select{
  background: rgba(232, 223, 208, 0.06) !important;
  color: var(--ink) !important;
  border: 1px solid rgba(232, 223, 208, 0.18) !important;
}
body.dark-theme #page-forum button,
body.dark-theme #page-forum .stoa-nav-item,
body.dark-theme #page-forum a{
  color: var(--ink) !important;
}
body.dark-theme #page-forum button[style*="background: var(--white)"]{
  background: rgba(232, 223, 208, 0.06) !important;
  border: 1px solid rgba(232, 223, 208, 0.18) !important;
}
body.dark-theme #page-forum [style*="background: #fff"],
body.dark-theme #page-forum [style*="background:#fff"],
body.dark-theme #page-forum [style*="background: white"],
body.dark-theme #page-forum [style*="background:white"]{
  background: var(--parchment-aged) !important;
  color: var(--ink) !important;
}

/* Academy (SOTA/Academy) - ensure any inline white panels are dark + readable */
body.dark-theme #page-academy [style*="background: var(--white)"]{
  background: var(--parchment-aged) !important;
  color: var(--ink) !important;
  border-color: rgba(232, 223, 208, 0.18) !important;
}
body.dark-theme #page-academy [style*="color: var(--parchment"]{
  color: var(--ink) !important;
}
body.dark-theme #page-academy [style*="background: var(--gold-soft)"],
body.dark-theme #page-academy [style*="background: var(--gold-faint)"]{
  color: var(--ink) !important;
}

/* Crisis - Quick Help buttons are inline-styled; force readable ink */
body.dark-theme #page-crisis button{
  color: var(--ink) !important;
}
body.dark-theme #page-crisis button[style*="text-align: left"],
body.dark-theme #page-crisis button[style*="text-align:left"]{
  background: rgba(232, 223, 208, 0.06) !important;
  border: 1px solid rgba(232, 223, 208, 0.18) !important;
}


/* ===== Dark Theme: STOA / Forum deeper fixes ===== */
body.dark-theme #page-forum [style*="background: rgba(255,252,245"]{
  background: var(--parchment-aged) !important;
  color: var(--ink) !important;
  border-color: rgba(232, 223, 208, 0.18) !important;
}
body.dark-theme #page-forum [style*="background: rgba(255, 252, 245"]{
  background: var(--parchment-aged) !important;
  color: var(--ink) !important;
  border-color: rgba(232, 223, 208, 0.18) !important;
}

/* Right-side chips like “Identity-First / Pre-Teen Season” (gold-faint on tan issue) */
body.dark-theme #page-forum span[style*="background: var(--gold-faint)"]{
  background: rgba(244, 235, 221, 0.12) !important;
  color: var(--ink) !important;
  border: 1px solid rgba(232, 223, 208, 0.18) !important;
}

/* If the discussion board uses parchment surfaces that get too light, keep text high-contrast */
body.dark-theme #page-forum [style*="background: var(--parchment)"]{
  background: var(--parchment-aged) !important;
  color: var(--ink) !important;
}


/* ===== STOA: Theme tabs (tidy, high-contrast in both themes) ===== */
.stoa-theme-tabs{
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  margin: var(--space-md) 0 var(--space-md);
}

.stoa-theme-tab{
  appearance: none;
  border: 1px solid rgba(0,0,0,0.12);
  background: var(--gold-faint);
  color: var(--ink);
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
}

.stoa-theme-tab:hover{
  filter: brightness(0.98);
}

.stoa-theme-tab.active{
  background: var(--thread);
  color: #fff;
  border-color: transparent;
}

body.dark-theme .stoa-theme-tab{
  background: rgba(19,29,24,0.70);
  color: var(--ink);
  border-color: rgba(232,223,208,0.18);
}

body.dark-theme .stoa-theme-tab.active{
  background: var(--thread);
  color: #fff;
  border-color: transparent;
}


        /* Forum thread grouping */
        .forum-group { margin-bottom: var(--space-lg); }
        .forum-group-title {
            font-size: 0.75rem;
            text-transform: uppercase;
            letter-spacing: 0.08em;
            color: var(--ink-soft);
            margin: var(--space-md) 0 var(--space-sm);
            padding: 0 var(--space-sm);
        }


        /* STEAM v2 (tabs + expander + XP) */
        .steam-shell{
          display:grid;
          grid-template-columns: 1fr 220px;
          gap: var(--space-md);
          margin-top: var(--space-md);
          align-items:start;
        }
        .steam-main{ display:flex; flex-direction:column; gap: var(--space-md); }
        .steam-dashboard-card{
          background: var(--surface);
          border: 1px solid var(--parchment-edge);
          border-radius: 16px;
          padding: var(--space-md);
          box-shadow: var(--shadow-soft);
        }
        .steam-center-card{
          background: var(--surface);
          border: 1px solid var(--parchment-edge);
          border-radius: 18px;
          padding: var(--space-md);
          box-shadow: var(--shadow-soft);
        }
        .steam-center-top{
          display:flex;
          justify-content:space-between;
          gap: var(--space-md);
          align-items:flex-start;
          margin-bottom: var(--space-sm);
        }
        .steam-xp-badge{
          min-width: 120px;
          text-align:right;
          padding: 10px 12px;
          border: 1px solid var(--parchment-edge);
          border-radius: 14px;
          background: rgba(0,0,0,0.02);
        }
        body.dark-theme .steam-xp-badge{ background: rgba(255,255,255,0.03); border-color: rgba(255,255,255,0.10); }

        .steam-badge-row{
          display:flex;
          gap: var(--space-sm);
          flex-wrap:wrap;
          margin: 10px 0 12px 0;
        }
        .steam-chip{
          display:inline-flex;
          align-items:center;
          gap: 8px;
          padding: 8px 10px;
          border-radius: 14px;
          border: 1px solid var(--parchment-edge);
          background: rgba(0,0,0,0.02);
          font-weight: 700;
          font-size: 13px;
          color: var(--ink);
        }
        body.dark-theme .steam-chip{ background: rgba(255,255,255,0.03); border-color: rgba(255,255,255,0.10); }

        .steam-activities{
          display:grid;
          grid-template-columns: repeat(2, minmax(0, 1fr));
          gap: var(--space-sm);
        }
        .steam-activity{
          border: 1px solid var(--parchment-edge);
          border-radius: 16px;
          padding: 12px;
          background: rgba(0,0,0,0.015);
          cursor:pointer;
          transition: transform 120ms ease, box-shadow 120ms ease;
        }
        .steam-activity:hover{ transform: translateY(-1px); box-shadow: var(--shadow-soft); }
        body.dark-theme .steam-activity{ background: rgba(255,255,255,0.02); border-color: rgba(255,255,255,0.10); }
        .steam-activity .row{ display:flex; justify-content:space-between; gap: 10px; align-items:flex-start; }
        .steam-activity .title{ font-weight: 900; color: var(--ink); }
        .steam-activity .desc{ margin-top: 6px; color: var(--ink); opacity: 0.86; font-size: 13px; }
        .steam-activity .xp{ font-weight: 900; font-size: 12px; padding: 6px 8px; border-radius: 12px; border:1px solid var(--parchment-edge); background: rgba(0,0,0,0.02); }
        body.dark-theme .steam-activity .xp{ border-color: rgba(255,255,255,0.12); background: rgba(255,255,255,0.03); }

        .steam-expander{
          margin-top: var(--space-md);
          border: 1px solid var(--parchment-edge);
          border-radius: 18px;
          padding: var(--space-md);
          background: rgba(0,0,0,0.015);
        }
        body.dark-theme .steam-expander{ background: rgba(255,255,255,0.02); border-color: rgba(255,255,255,0.10); }
        .steam-expander h3{ margin: 0 0 6px 0; }
        .steam-expander .steam-actions{
          margin-top: 12px;
          display:flex;
          gap: 10px;
          flex-wrap:wrap;
          align-items:center;
        }
        .steam-expander .complete-pill{
          display:flex;
          align-items:center;
          gap: 10px;
          padding: 10px 12px;
          border-radius: 14px;
          border: 1px solid var(--parchment-edge);
          background: rgba(0,0,0,0.02);
        }
        body.dark-theme .steam-expander .complete-pill{ background: rgba(255,255,255,0.03); border-color: rgba(255,255,255,0.12); }
        .steam-expander .mini-btn{
          padding: 10px 12px;
          border-radius: 14px;
          border: 1px solid var(--parchment-edge);
          background: rgba(0,0,0,0.02);
          cursor:pointer;
          font-weight: 800;
          color: var(--ink);
        }
        body.dark-theme .steam-expander .mini-btn{ background: rgba(255,255,255,0.03); border-color: rgba(255,255,255,0.12); }

        .steam-tabs{
          position: sticky;
          top: 88px;
          background: var(--surface);
          border: 1px solid var(--parchment-edge);
          border-radius: 18px;
          padding: var(--space-sm);
          box-shadow: var(--shadow-soft);
        }
        .steam-tab{
          width:100%;
          text-align:left;
          padding: 11px 12px;
          border-radius: 14px;
          border: 1px solid var(--parchment-edge);
          background: rgba(0,0,0,0.015);
          font-weight: 900;
          color: var(--ink);
          cursor:pointer;
          margin-bottom: 8px;
        }
        .steam-tab.secondary{ font-weight: 800; opacity: 0.9; }
        .steam-tab.active{
          background: linear-gradient(135deg, rgba(123,97,255,0.18), rgba(47,167,255,0.12));
          border-color: rgba(123,97,255,0.35);
        }
        body.dark-theme .steam-tab{ background: rgba(255,255,255,0.03); border-color: rgba(255,255,255,0.12); }
        body.dark-theme .steam-tab.active{ border-color: rgba(123,97,255,0.45); }

        @media (max-width: 980px){
          .steam-shell{ grid-template-columns: 1fr; }
          .steam-tabs{ position: relative; top: auto; }
          .steam-activities{ grid-template-columns: 1fr; }
        }

        /* STEAM Lab Clickability Fixes */
        .steam-shell,
        .steam-main,
        .steam-dashboard-card,
        .steam-center-card,
        .steam-activities,
        .steam-activity,
        .steam-expander,
        .steam-tabs,
        .steam-tab {
            pointer-events: auto;
            position: relative;
        }
        
        .steam-activity button,
        .steam-expander button,
        .steam-tab {
            pointer-events: auto;
            cursor: pointer;
            position: relative;
            z-index: 2;
        }
        
        /* Fix any decorative overlays */
        .steam-header::before,
        .steam-header::after {
            pointer-events: none;
        }


/* ─────────────────────────────────────────────────────────────────────────────
   Wellspring Gate (Entry Modal) + ABIDE Toggle
   ───────────────────────────────────────────────────────────────────────────── */
.wellspring-gate-backdrop{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(10px);
  z-index: 9998;
}
body.gate-mode .wellspring-gate-backdrop{ display:block; }
.wellspring-gate-backdrop.hidden{ display:none; }

body.gate-mode #wellspringPanel{
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(920px, 92vw);
  height: min(84vh, 760px);
  max-height: 84vh;
  z-index: 9999;
  border-radius: 18px;
  box-shadow: 0 18px 70px rgba(0,0,0,.45);
  display: block;
  overflow: hidden;
}

body.gate-mode #wellspringPanel .wellspring-collapse{ display:none !important; }
body.gate-mode .app-shell,
body.gate-mode .header,
body.gate-mode .left-sidebar,
body.gate-mode .main-content,
body.gate-mode .right-sidebar{
  pointer-events: none;
  user-select: none;
}

.wellspring-lit{
  padding-bottom: 18px;
}
.wellspring-section{
  margin-top: 16px;
  padding: 14px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 14px;
}
body.dark-theme .wellspring-section{
  background: rgba(0,0,0,.10);
  border-color: rgba(255,255,255,.08);
}
.wellspring-section-title{
  font-weight: 800;
  letter-spacing: .2px;
  display:flex;
  align-items:center;
  justify-content: space-between;
}
.wellspring-section-sub{
  margin-top: 6px;
  opacity: .9;
  font-size: .95rem;
}
.ws-emoji{ opacity:.9; }

.ws-mirror-nav{
  display:flex;
  align-items:center;
  gap: 10px;
  margin-top: 10px;
}
.ws-chip{
  border-radius: 999px;
  padding: 8px 12px;
  border: 1px solid rgba(0,0,0,.12);
  background: rgba(255,255,255,.65);
  cursor: pointer;
}
body.dark-theme .ws-chip{
  border-color: rgba(255,255,255,.14);
  background: rgba(0,0,0,.18);
  color: var(--ink);
}
.ws-chip.active{
  background: var(--thread-gold);
  border-color: var(--thread-gold);
  color: #2a2115;
}
.ws-mirror-status{
  flex:1;
  text-align:center;
  opacity:.9;
}

.ws-card{
  margin-top: 10px;
  padding: 14px;
  border-radius: 14px;
  background: var(--surface);
  border: 1px solid var(--parchment-edge);
}
.ws-card-kicker{
  font-weight: 800;
  opacity: .95;
  margin-bottom: 10px;
}
.ws-card-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media (max-width: 720px){
  .ws-card-grid{ grid-template-columns: 1fr; }
}
.ws-card-label{ font-size:.85rem; opacity:.8; margin-bottom: 4px; }
.ws-card-value{ font-weight: 700; }

.ws-checklist{
  display:grid;
  gap: 10px;
  margin-top: 10px;
}
.ws-check{
  display:flex;
  align-items:flex-start;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(255,255,255,.55);
  border: 1px solid rgba(0,0,0,.10);
  cursor: pointer;
}
body.dark-theme .ws-check{
  background: rgba(0,0,0,.18);
  border-color: rgba(255,255,255,.12);
  color: var(--ink);
}
.ws-check input{ margin-top: 3px; }

.ws-fruit-grid{
  margin-top: 10px;
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
@media (max-width: 720px){
  .ws-fruit-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.ws-fruit{
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(255,255,255,.60);
  cursor: pointer;
  font-weight: 800;
}
body.dark-theme .ws-fruit{
  border-color: rgba(255,255,255,.12);
  background: rgba(0,0,0,.16);
  color: var(--ink);
}
.ws-fruit.active{
  background: var(--thread-gold);
  border-color: var(--thread-gold);
  color: #2a2115;
}

.ws-flash{
  margin-top: 10px;
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(0,0,0,.08);
  border: 1px solid rgba(0,0,0,.10);
}
body.dark-theme .ws-flash{
  background: rgba(0,0,0,.22);
  border-color: rgba(255,255,255,.10);
  color: var(--ink);
}

.ws-beatitudes{
  margin-top: 10px;
  display:grid;
  gap: 10px;
}
.ws-beat{
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(255,255,255,.55);
  border: 1px solid rgba(0,0,0,.10);
}
body.dark-theme .ws-beat{
  background: rgba(0,0,0,.18);
  border-color: rgba(255,255,255,.12);
  color: var(--ink);
}

.ws-exit{
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid rgba(0,0,0,.10);
}
body.dark-theme .ws-exit{
  border-top-color: rgba(255,255,255,.10);
}
.ws-amen{
  width: 100%;
  padding: 14px 16px;
  border-radius: 14px;
  font-weight: 900;
  letter-spacing: .6px;
}
.ws-exit-sub{
  margin-top: 10px;
  text-align:center;
  opacity:.9;
  font-size:.92rem;
}


@keyframes wsFlash{0%{transform:scale(.98);opacity:.7;}100%{transform:scale(1);opacity:1;}}

/* --- Modal overlay (Upload / Notes) --- */
.hidden{ display:none !important; }
.modal-overlay{
  position:fixed;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(12, 16, 20, 0.55);
  backdrop-filter: blur(6px);
  z-index: 9998;
}
.modal{
  width: min(720px, calc(100vw - 32px));
  max-height: min(80vh, 720px);
  overflow:auto;
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--parchment-edge);
  border-radius: 16px;
  padding: 16px;
  box-shadow: 0 18px 50px rgba(0,0,0,0.35);
}
.modal h3{ margin: 0 0 10px 0; }
.modal textarea{
  width:100%;
  min-height: 180px;
  background: rgba(0,0,0,0.08);
  color: var(--ink);
  border: 1px solid var(--parchment-edge);
  border-radius: 12px;
  padding: 10px;
}
body.dark-theme .modal textarea{
  background: rgba(255,255,255,0.06);
}


        /* ABIDE quick-toggle (DISABLED - hidden per user request) */
        .abide-quick-toggle{
            display: none !important;
        }
        
        /* ABIDE popup panel (DISABLED) */
        .abide-popup {
            display: none !important;
        }
            position: fixed;
            /* Center the ABIDE toggle along the bottom of the viewport */
            left: 50%;
            transform: translateX(-50%);
            bottom: 14px;
            z-index: 20050;
            padding: 10px 14px;
            border-radius: 999px;
            border: 1px solid var(--parchment-edge);
            background: var(--surface);
            color: var(--ink);
            font-weight: 900;
            letter-spacing: 0.08em;
            cursor: pointer;
            box-shadow: 0 10px 30px rgba(0,0,0,0.25);
        }
        body.dark-theme .abide-quick-toggle{
            border-color: var(--parchment-edge);
            background: var(--parchment-aged);
            color: var(--ink);
        }
        /* Remove vertical jitter on hover for ABIDE button; maintain horizontal centering */
        .abide-quick-toggle:hover{ transform: translateX(-50%); }

        /* ABIDE popup panel */
        .abide-popup {
            position: fixed;
            left: 50%;
            transform: translateX(-50%);
            /* position the popup above the toggle */
            bottom: 60px;
            width: 90%;
            max-width: 500px;
            background: var(--surface);
            border: 1px solid var(--parchment-edge);
            border-radius: 12px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.3);
            padding: 20px;
            display: none;
            z-index: 20040;
        }
        .abide-popup.open {
            display: block;
        }
        .abide-popup-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 10px;
            font-size: 20px;
            font-weight: 700;
            color: var(--ink);
        }
        .abide-popup-close {
            background: none;
            border: none;
            font-size: 24px;
            line-height: 1;
            cursor: pointer;
            color: var(--ink);
        }

        /* ===== ELIYAH SWORD WIDGET - FULL FEATURED ===== */
        
        /* Floating Toggle Button - Compact & Rounded */
        .es-floating-toggle {
            position: fixed;
            top: 50%;
            right: 0; /* Flush against right edge of screen */
            transform: translateY(-50%);
            z-index: 1050; /* Below modals (1100) but above content - prevents blocking */
            background: linear-gradient(135deg, #d4a574 0%, #f4e5c3 50%, #c9a961 100%);
            box-shadow: 0 4px 20px rgba(212, 165, 116, 0.5), inset 0 1px 0 rgba(255,255,255,0.4);
            cursor: pointer;
            transition: all 0.3s ease;
            border: none;
            padding: 0.75rem 0.5rem;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 0.4rem;
            border-radius: 12px 0 0 12px;
        }

        .es-floating-toggle:hover {
            background: linear-gradient(135deg, #e5b684 0%, #f4e5c3 50%, #d4a574 100%);
            box-shadow: 0 6px 25px rgba(212, 165, 116, 0.7), inset 0 1px 0 rgba(255,255,255,0.5);
            transform: translateY(-50%) scale(1.05);
        }

        .es-floating-toggle.active {
            transform: translateY(-50%) translateX(100%);
            opacity: 0;
            pointer-events: none;
        }

        .es-floating-toggle:not(.active) {
            animation: esTogglePulse 3s ease-in-out infinite;
        }

        @keyframes esTogglePulse {
            0%, 100% { box-shadow: 0 4px 20px rgba(212, 165, 116, 0.4); }
            50% { box-shadow: 0 4px 30px rgba(212, 165, 116, 0.7), 0 0 40px rgba(212, 165, 116, 0.3); }
        }

        .es-toggle-glow {
            display: none;
        }

        .es-toggle-icon {
            color: #3e2723;
            width: 20px;
            height: 20px;
        }

        .es-toggle-text {
            color: #3e2723;
            font-weight: 700;
            letter-spacing: 0.05em;
            font-size: 0.65rem;
            writing-mode: vertical-rl;
            text-orientation: mixed;
            text-shadow: 0 1px 0 rgba(255,255,255,0.3);
        }
        
        .es-toggle-emoji {
            font-size: 0.875rem;
        }

        /* Overlay */
        .es-overlay {
            position: fixed;
            top: 20px;
            left: 20px;
            right: 20px;
            bottom: 20px;
            z-index: 1100; /* Modal level - updated to match standard scale */
            display: flex;
            transform: translateX(110%);
            opacity: 0;
            transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
            pointer-events: none;
            border-radius: 16px;
            overflow: hidden;
            box-shadow: 0 25px 80px rgba(0, 0, 0, 0.5);
        }

        .es-overlay.open {
            transform: translateX(0);
            opacity: 1;
            pointer-events: all;
        }

        .es-dim-overlay {
            position: fixed;
            inset: 0;
            background: rgba(0, 0, 0, 0.7);
            backdrop-filter: blur(8px);
            z-index: 1000; /* Modal backdrop level - updated to match standard scale */
            opacity: 0;
            transition: opacity 0.4s;
            pointer-events: none;
        }

        .es-dim-overlay.active {
            opacity: 1;
            pointer-events: all;
        }

        .es-close-btn {
            position: absolute;
            top: 12px;
            right: 12px;
            background: #d4a574;
            color: #3e2723;
            border: none;
            border-radius: 50%;
            width: 36px;
            height: 36px;
            font-size: 20px;
            line-height: 36px;
            text-align: center;
            cursor: pointer;
            box-shadow: 0 2px 8px rgba(0,0,0,0.3);
            z-index: 1200; /* Popover level - above overlay to remain clickable */
            transition: all 0.2s;
        }

        .es-close-btn:hover {
            background: #e5b684;
            transform: scale(1.1);
        }

        /* Workspace */
        .es-workspace {
            position: relative;
            width: 100%;
            border-radius: 16px;
            height: 100%;
            display: flex;
            background: linear-gradient(to bottom, #5d4e37 0%, #4a3f2f 100%);
        }

        .es-bg-pattern {
            position: absolute;
            inset: 0;
            opacity: 0.08;
            background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23d4a574' fill-opacity='0.15'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
            pointer-events: none;
        }

        /* Left Panel */
        .es-left-panel {
            width: 20%;
            background: rgba(62, 39, 35, 0.98);
            border-right: 1px solid rgba(212, 165, 116, 0.3);
            display: flex;
            flex-direction: column;
            overflow: hidden;
            backdrop-filter: blur(8px);
            transition: all 0.3s ease;
            position: relative;
            border-radius: 16px 0 0 16px;
        }

        .es-left-panel.collapsed {
            width: 0;
            min-width: 0;
            border-right: none;
        }

        .es-panel-toggle {
            position: absolute;
            top: 50%;
            right: -12px;
            transform: translateY(-50%);
            width: 24px;
            height: 80px;
            background: linear-gradient(135deg, #d4a574 0%, #c49463 100%);
            border: none;
            border-radius: 0 8px 8px 0;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 10;
            box-shadow: 2px 0 8px rgba(0,0,0,0.3);
            transition: all 0.2s;
            color: #3e2723;
        }

        .es-panel-toggle:hover {
            background: linear-gradient(135deg, #e5b684 0%, #d4a574 100%);
        }

        .es-panel-toggle.right {
            right: auto;
            left: -12px;
            border-radius: 8px 0 0 8px;
        }

        .es-translation-selector {
            padding: 1rem;
            border-bottom: 1px solid rgba(212, 165, 116, 0.3);
        }

        .es-translation-selector select {
            width: 100%;
            background: #3e2723;
            color: #f5e6d3;
            padding: 0.75rem;
            border-radius: 0.5rem;
            border: 1px solid rgba(212, 165, 116, 0.3);
            font-weight: 500;
            font-size: 0.875rem;
            cursor: pointer;
        }

        .es-search-section {
            padding: 1rem;
            border-bottom: 1px solid rgba(212, 165, 116, 0.3);
        }

        .es-search-input {
            width: 100%;
            background: rgba(62, 39, 35, 0.5);
            color: #f5e6d3;
            padding: 0.5rem 0.75rem 0.5rem 2.5rem;
            border-radius: 0.5rem;
            font-size: 0.875rem;
            border: 1px solid rgba(212, 165, 116, 0.3);
        }

        .es-search-icon {
            position: absolute;
            left: 0.75rem;
            top: 50%;
            transform: translateY(-50%);
            color: #d4a574;
            width: 16px;
            height: 16px;
        }

        .es-book-scroller {
            flex: 1;
            overflow-y: auto;
            padding: 0.75rem;
        }

        .es-section-title {
            color: #d4a574;
            font-size: 0.75rem;
            font-weight: bold;
            margin-bottom: 0.5rem;
            text-transform: uppercase;
            letter-spacing: 0.05em;
        }

        .es-book-item {
            width: 100%;
            text-align: left;
            padding: 0.375rem 0.75rem;
            border-radius: 0.25rem;
            font-size: 0.875rem;
            transition: all 0.2s;
            cursor: pointer;
            color: #d4a574;
            background: transparent;
            border: none;
            margin-bottom: 0.25rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .es-book-item:hover {
            background: rgba(62, 39, 35, 0.5);
        }

        .es-book-item.active {
            background: rgba(212, 165, 116, 0.2);
            color: #f5deb3;
            font-weight: 500;
            border-left: 2px solid #d4a574;
        }

        .es-book-expand-icon {
            width: 12px;
            height: 12px;
            transition: transform 0.2s;
        }

        .es-book-item.expanded .es-book-expand-icon {
            transform: rotate(90deg);
        }

        .es-chapter-list {
            display: none;
            padding-left: 1rem;
            margin-top: 0.25rem;
            margin-bottom: 0.5rem;
            grid-template-columns: repeat(5, 1fr);
            gap: 0.25rem;
        }

        .es-chapter-list.show {
            display: grid;
        }

        .es-chapter-item {
            padding: 0.25rem;
            font-size: 0.75rem;
            color: rgba(212, 165, 116, 0.7);
            cursor: pointer;
            border-radius: 0.25rem;
            transition: all 0.2s;
            text-align: center;
        }

        .es-chapter-item:hover {
            background: rgba(62, 39, 35, 0.5);
            color: #f5e6d3;
        }

        .es-chapter-item.active {
            background: rgba(212, 165, 116, 0.3);
            color: #f5deb3;
            font-weight: 500;
        }

        /* Center Panel */
        .es-center-panel {
            flex: 1;
            display: flex;
            flex-direction: column;
            overflow: hidden;
        }

        .es-verse-header {
            background: linear-gradient(to right, rgba(93, 78, 55, 0.4), rgba(74, 63, 47, 0.3));
            border-bottom: 1px solid rgba(212, 165, 116, 0.3);
            padding: 0.75rem 1.5rem;
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            justify-content: space-between;
            gap: 0.5rem;
        }
        
        .es-header-left {
            display: flex;
            align-items: center;
            gap: 1rem;
        }

        .es-verse-title {
            font-size: 1.5rem;
            font-family: 'Crimson Pro', serif;
            color: #f5e6d3;
            margin: 0;
        }

        .es-verse-subtitle {
            color: rgba(212, 165, 116, 0.8);
            font-size: 0.8rem;
            font-style: italic;
        }

        .es-verse-nav {
            display: flex;
            gap: 0.5rem;
            align-items: center;
        }

        .es-nav-btn {
            padding: 0.4rem 0.75rem;
            background: rgba(62, 39, 35, 0.5);
            color: #d4a574;
            border: 1px solid rgba(212, 165, 116, 0.3);
            border-radius: 0.5rem;
            font-size: 0.8rem;
            cursor: pointer;
            transition: all 0.2s;
            display: flex;
            align-items: center;
            gap: 0.35rem;
        }

        .es-nav-btn:hover {
            background: rgba(62, 39, 35, 0.8);
            border-color: #d4a574;
        }

        .es-page-info {
            color: #d4a574;
            font-size: 0.75rem;
            padding: 0 0.5rem;
        }

        .es-lens-controls {
            display: flex;
            gap: 0.35rem;
            flex-wrap: wrap;
            align-items: center;
        }

        .es-lens-btn {
            padding: 0.25rem 0.75rem;
            border-radius: 9999px;
            font-size: 0.75rem;
            font-weight: 500;
            transition: all 0.2s;
            cursor: pointer;
            background: rgba(62, 39, 35, 0.5);
            color: #d4a574;
            border: 1px solid rgba(212, 165, 116, 0.3);
        }

        .es-lens-btn:hover {
            border-color: #d4a574;
            background: rgba(62, 39, 35, 0.7);
        }

        .es-highlighter-tools {
            display: flex;
            gap: 0.25rem;
            align-items: center;
            padding-left: 0.5rem;
            border-left: 1px solid rgba(212, 165, 116, 0.3);
        }

        .es-highlighter-btn {
            width: 28px;
            height: 28px;
            border-radius: 0.25rem;
            border: 2px solid transparent;
            cursor: pointer;
            transition: all 0.2s;
        }

        .es-highlighter-btn:hover { transform: scale(1.1); }
        .es-highlighter-btn.active { border-color: #d4a574; box-shadow: 0 0 0 2px rgba(212, 165, 116, 0.3); }
        .es-highlight-yellow { background: #fef08a; }
        .es-highlight-green { background: #86efac; }
        .es-highlight-blue { background: #93c5fd; }
        .es-highlight-pink { background: #f9a8d4; }
        .es-highlight-orange { background: #fdba74; }

        .es-scripture-area {
            flex: 1;
            overflow-y: auto;
            padding: 1.5rem 2rem;
            background: 
                linear-gradient(to right, rgba(0,0,0,0.06) 0%, transparent 3%, transparent 97%, rgba(0,0,0,0.06) 100%),
                linear-gradient(to bottom, #f8f3ea 0%, #f5ebe0 30%, #f2e8d8 70%, #efe4d2 100%);
            box-shadow: 
                inset 4px 0 12px -4px rgba(139,90,43,0.15),
                inset -4px 0 12px -4px rgba(139,90,43,0.15),
                inset 0 4px 8px -4px rgba(139,90,43,0.1);
            position: relative;
        }
        
        /* Page edge effect - subtle book binding feel */
        .es-scripture-area::before {
            content: '';
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            width: 20px;
            background: linear-gradient(to right, rgba(139,90,43,0.08), transparent);
            pointer-events: none;
        }
        
        .es-scripture-area::after {
            content: '';
            position: absolute;
            right: 0;
            top: 0;
            bottom: 0;
            width: 20px;
            background: linear-gradient(to left, rgba(139,90,43,0.08), transparent);
            pointer-events: none;
        }

        .es-scripture-area.double-page .es-scripture-content {
            max-width: none;
            column-count: 2;
            column-gap: 4rem;
        }

        .es-scripture-content {
            max-width: 48rem;
            margin: 0 auto;
            padding-left: 2.5rem;
        }
        
        /* Page transition for Bible navigation */
        .es-page {
            animation: esFadeIn 0.3s ease;
        }
        
        @keyframes esFadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }

        .es-verse-block {
            margin-bottom: 1.25rem;
            position: relative;
        }

        .es-verse-block.highlighted {
            background: rgba(212, 165, 116, 0.15);
            margin-left: -1rem;
            margin-right: -1rem;
            padding: 0.75rem 1rem;
            border-radius: 0.5rem;
            border-left: 4px solid #d4a574;
        }

        .es-verse-num {
            position: absolute;
            left: -2rem;
            color: #8b5a2b;
            font-weight: 700;
            font-size: 0.8rem;
            font-family: 'Crimson Pro', serif;
        }

        .es-scripture-area .es-verse-text {
            color: #2b1b14;
            line-height: 1.8;
            font-size: 1.1rem;
            font-family: 'Crimson Pro', serif;
            text-align: justify;
            hyphens: auto;
        }

        .es-strong-word {
            background: linear-gradient(to right, #dbeafe, #bfdbfe);
            padding: 0 0.25rem;
            border-radius: 0.125rem;
            cursor: pointer;
            position: relative;
            transition: all 0.2s;
        }

        .es-strong-word:hover { background: linear-gradient(to right, #93c5fd, #bfdbfe); }

        .es-user-highlight { padding: 0.15em 0.1em; border-radius: 3px; line-height: 1.8; }
        .es-scripture-area .es-user-highlight { color: #2b1b14; }
        .es-user-highlight.es-highlight-yellow { background: rgba(254, 240, 138, 0.5); box-shadow: 0 0 0 4px rgba(254, 240, 138, 0.5); }
        .es-user-highlight.es-highlight-green { background: rgba(134, 239, 172, 0.5); box-shadow: 0 0 0 4px rgba(134, 239, 172, 0.5); }
        .es-user-highlight.es-highlight-blue { background: rgba(147, 197, 253, 0.5); box-shadow: 0 0 0 4px rgba(147, 197, 253, 0.5); }
        .es-user-highlight.es-highlight-pink { background: rgba(249, 168, 212, 0.5); box-shadow: 0 0 0 4px rgba(249, 168, 212, 0.5); }
        .es-user-highlight.es-highlight-orange { background: rgba(253, 186, 116, 0.5); box-shadow: 0 0 0 4px rgba(253, 186, 116, 0.5); }

        .es-word-tooltip {
            position: absolute;
            bottom: 100%;
            left: 0;
            margin-bottom: 0.5rem;
            width: 12rem;
            background: #3e2723;
            color: #f5e6d3;
            padding: 0.75rem;
            border-radius: 0.5rem;
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.3);
            border: 1px solid rgba(212, 165, 116, 0.3);
            font-size: 0.875rem;
            z-index: 10;
            display: none;
        }

        .es-strong-word:hover .es-word-tooltip { display: block; }
        .es-tooltip-hebrew { color: #d4a574; font-weight: bold; display: flex; justify-content: space-between; margin-bottom: 0.25rem; }
        .es-tooltip-strongs { font-size: 0.75rem; color: rgba(212, 165, 116, 0.7); margin-bottom: 0.25rem; }
        .es-tooltip-meaning { font-size: 0.75rem; color: #f5e6d3; }

        /* Right Panel */
        .es-right-panel {
            width: 30%;
            background: linear-gradient(to bottom, #4a3f2f, #3e2723);
            border-left: 1px solid rgba(212, 165, 116, 0.3);
            display: flex;
            flex-direction: column;
            overflow: hidden;
            transition: all 0.3s ease;
            position: relative;
            border-radius: 0 16px 16px 0;
        }

        .es-right-panel.collapsed { width: 0; min-width: 0; border-left: none; }

        .es-context-header {
            background: rgba(62, 39, 35, 0.6);
            border-bottom: 1px solid rgba(212, 165, 116, 0.3);
            padding: 0.5rem 1rem;
            display: flex;
            align-items: center;
        }

        .es-covenant-badge {
            background: #d4a574;
            color: #3e2723;
            padding: 0.25rem 0.75rem;
            border-radius: 9999px;
            font-size: 0.75rem;
            font-weight: 600;
            text-transform: uppercase;
        }

        .es-tab-nav {
            display: flex;
            border-bottom: 1px solid rgba(212, 165, 116, 0.3);
        }

        .es-tab-btn {
            flex: 1;
            padding: 0.75rem 1rem;
            font-weight: 500;
            font-size: 0.875rem;
            transition: all 0.2s;
            cursor: pointer;
            color: #d4a574;
            background: transparent;
            border: none;
            border-bottom: 2px solid transparent;
        }

        .es-tab-btn:hover { background: rgba(62, 39, 35, 0.3); }
        .es-tab-btn.active { background: rgba(62, 39, 35, 0.5); color: #f5deb3; border-bottom-color: #d4a574; }

        .es-tab-content { flex: 1; overflow-y: auto; padding: 1.5rem; }
        .es-tab-content.hidden { display: none !important; }

        .es-connection-card {
            background: rgba(62, 39, 35, 0.5);
            border: 1px solid rgba(212, 165, 116, 0.4);
            border-radius: 0.5rem;
            padding: 1rem;
            margin-bottom: 1rem;
            color: #f5e6d3;
            display: flex;
            align-items: flex-start;
            gap: 0.75rem;
        }

        .es-connection-icon { font-size: 1.75rem; }
        .es-connection-title { font-size: 1rem; font-weight: 600; color: #d4a574; margin-bottom: 0.25rem; }
        .es-connection-description { font-size: 0.875rem; line-height: 1.4; }

        .es-word-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.5rem; }

        .es-word-chip {
            padding: 0.4rem 0.75rem;
            background: rgba(212, 165, 116, 0.15);
            border: 1px solid rgba(212, 165, 116, 0.3);
            border-radius: 1rem;
            color: #d4a574;
            font-size: 0.8rem;
            cursor: pointer;
            transition: all 0.2s;
        }

        .es-word-chip:hover { background: rgba(212, 165, 116, 0.3); border-color: #d4a574; }
        .es-word-chip.active { background: #d4a574; color: #3e2723; }

        .es-lexicon-detail {
            background: rgba(62, 39, 35, 0.4);
            border-radius: 0.5rem;
            padding: 1rem;
            border: 1px solid rgba(212, 165, 116, 0.3);
        }

        .es-detail-hebrew { font-size: 2rem; color: #f5deb3; font-weight: bold; margin-bottom: 0.5rem; }
        .es-detail-row { display: flex; margin-bottom: 0.5rem; }
        .es-detail-label { color: #d4a574; font-size: 0.75rem; text-transform: uppercase; width: 80px; }
        .es-detail-value { color: #f5e6d3; font-size: 0.875rem; flex: 1; }

        .es-empty-state {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 200px;
            text-align: center;
            opacity: 0.6;
            color: #d4a574;
        }

        /* Eliyah AI Chat */
        .es-chat-messages { flex: 1; overflow-y: auto; padding: 1rem; }
        .es-message { margin-bottom: 1rem; }
        .es-message-content { border-radius: 0.5rem; padding: 1rem; }
        .es-message-content.eliyah { background: rgba(62, 39, 35, 0.5); color: #f5e6d3; }
        .es-message-content.insight { background: linear-gradient(135deg, rgba(93, 78, 55, 0.5), rgba(74, 63, 47, 0.4)); border: 1px solid rgba(212, 165, 116, 0.4); color: #f5e6d3; }
        .es-eliyah-header { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem; }
        .es-eliyah-avatar { width: 1.5rem; height: 1.5rem; border-radius: 9999px; background: #d4a574; display: flex; align-items: center; justify-content: center; font-size: 0.75rem; }
        .es-eliyah-name { font-size: 0.75rem; font-weight: bold; color: #d4a574; }
        .es-message-text { font-size: 0.875rem; line-height: 1.5; }

        .es-chat-input-area { padding: 1rem; border-top: 1px solid rgba(212, 165, 116, 0.3); background: rgba(62, 39, 35, 0.5); }
        .es-chat-input { width: 100%; background: rgba(62, 39, 35, 0.6); color: #f5e6d3; padding: 0.5rem 1rem; border-radius: 0.5rem; border: 1px solid rgba(212, 165, 116, 0.3); font-size: 0.875rem; margin-bottom: 0.5rem; }
        .es-chat-send-btn { width: 100%; padding: 0.5rem; background: #d4a574; color: #3e2723; border-radius: 0.5rem; font-weight: 500; cursor: pointer; border: none; }
        .es-chat-send-btn:hover { background: #e5b684; }

        /* Widget anchors */
        .es-widget-anchor {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            z-index: 15;
            width: 28px;
            height: 160px;
            background: linear-gradient(135deg, #d4a574 0%, #c49463 100%);
            color: #3e2723;
            display: none;
            align-items: center;
            justify-content: center;
            border-radius: 0 8px 8px 0;
            cursor: pointer;
            font-size: 0.75rem;
            font-weight: bold;
            writing-mode: vertical-rl;
            text-orientation: mixed;
            letter-spacing: 0.05em;
            box-shadow: 2px 0 8px rgba(0,0,0,0.3);
        }

        .es-widget-anchor.library { left: 0; }
        .es-widget-anchor.tools { right: 0; left: auto; border-radius: 8px 0 0 8px; }

        /* Notes handle */
        .es-notes-handle {
            position: fixed;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            background: linear-gradient(135deg, #d4a574 0%, #c49463 100%);
            color: #3e2723;
            padding: 0.6rem 1.5rem;
            border-radius: 8px 8px 0 0;
            font-size: 0.75rem;
            font-weight: 600;
            letter-spacing: 0.05em;
            cursor: pointer;
            z-index: 1100; /* Modal level - same as dock it controls */
            box-shadow: 0 -2px 8px rgba(0,0,0,0.3);
            transition: all 0.2s;
        }

        .es-notes-handle:hover { padding-bottom: 0.8rem; }

        /* Bottom dock - Full Study Dashboard */
        .es-bottom-dock {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            height: 0;
            background: linear-gradient(180deg, rgba(45, 35, 28, 0.99), rgba(35, 28, 22, 0.99));
            backdrop-filter: blur(10px);
            border-top: 2px solid rgba(212, 165, 116, 0.4);
            z-index: 1150; /* Above es-overlay (1100), positioned after overlay in DOM for proper stacking */
            transition: height 0.4s ease;
            display: flex;
            flex-direction: column;
            overflow: hidden;
        }

        .es-bottom-dock.open { height: calc(100vh - 60px); } /* Full screen minus header space */

        .es-dock-handle {
            height: 28px;
            background: linear-gradient(90deg, rgba(212,165,116,0.2), rgba(212,165,116,0.4), rgba(212,165,116,0.2));
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #d4a574;
            flex-shrink: 0;
        }

        .es-dock-handle:hover { background: linear-gradient(90deg, rgba(212,165,116,0.3), rgba(212,165,116,0.5), rgba(212,165,116,0.3)); }

        .es-dock-tabs {
            display: flex;
            background: rgba(0,0,0,0.2);
            border-bottom: 1px solid rgba(212,165,116,0.2);
            flex-shrink: 0;
        }

        .es-dock-tab {
            flex: 1;
            padding: 0.6rem 0.5rem;
            background: transparent;
            border: none;
            color: #d4a574;
            font-size: 0.75rem;
            cursor: pointer;
            transition: all 0.2s;
            border-bottom: 2px solid transparent;
        }

        .es-dock-tab:hover { background: rgba(212,165,116,0.1); }
        .es-dock-tab.active { background: rgba(212,165,116,0.15); color: #f5deb3; border-bottom-color: #d4a574; }

        .es-dock-content { flex: 1; overflow-y: auto; padding: 1rem; }
        .es-dock-content.hidden { display: none; }

        .es-notes-textarea {
            width: 100%;
            height: 100%;
            background: rgba(93, 78, 55, 0.3);
            color: #f5e6d3;
            border: 1px solid rgba(212, 165, 116, 0.3);
            border-radius: 0.5rem;
            padding: 1rem;
            font-size: 0.9rem;
            resize: none;
            font-family: inherit;
            line-height: 1.6;
        }

        .es-notes-textarea:focus { outline: none; border-color: #d4a574; }

        /* ═══════════════════════════════════════════════════════════════ */
        /* STUDY DASHBOARD - Full Screen Panel                              */
        /* ═══════════════════════════════════════════════════════════════ */
        
        .es-study-dashboard {
            flex: 1;
            display: flex;
            flex-direction: column;
            overflow: hidden;
            background: linear-gradient(180deg, #2d231c, #231c16);
        }
        
        /* Dashboard Header */
        .es-dashboard-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 1.25rem 2rem;
            background: rgba(45, 35, 28, 0.95);
            border-bottom: 1px solid rgba(212, 165, 116, 0.2);
        }
        
        .es-dashboard-title-section {
            display: flex;
            align-items: center;
            gap: 1rem;
        }
        
        .es-dashboard-icon {
            font-size: 2.5rem;
        }
        
        .es-dashboard-title {
            font-size: 1.5rem;
            font-weight: 600;
            color: #f5e6d3;
            margin: 0;
            font-family: 'Cinzel', Georgia, serif;
            letter-spacing: 0.05em;
        }
        
        .es-dashboard-subtitle {
            font-size: 0.85rem;
            color: rgba(212, 165, 116, 0.7);
            margin: 0.25rem 0 0 0;
        }
        
        .es-dashboard-actions {
            display: flex;
            gap: 0.75rem;
        }
        
        .es-action-btn {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            padding: 0.6rem 1rem;
            background: #d4a574;
            color: #2d231c;
            border: none;
            border-radius: 0.5rem;
            font-weight: 600;
            font-size: 0.85rem;
            cursor: pointer;
            transition: all 0.2s;
        }
        
        .es-action-btn:hover {
            background: #e5b684;
            transform: translateY(-1px);
        }
        
        .es-action-btn.secondary {
            background: rgba(212, 165, 116, 0.15);
            color: #d4a574;
            border: 1px solid rgba(212, 165, 116, 0.3);
        }
        
        .es-action-btn.secondary:hover {
            background: rgba(212, 165, 116, 0.25);
        }
        
        /* Dashboard Tabs */
        .es-dashboard-tabs {
            display: flex;
            gap: 0.25rem;
            padding: 0 2rem;
            background: rgba(35, 28, 22, 0.8);
            border-bottom: 1px solid rgba(212, 165, 116, 0.15);
        }
        
        .es-dash-tab {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            padding: 1rem 1.25rem;
            background: transparent;
            border: none;
            color: rgba(212, 165, 116, 0.7);
            font-size: 0.9rem;
            cursor: pointer;
            transition: all 0.2s;
            border-bottom: 2px solid transparent;
            margin-bottom: -1px;
        }
        
        .es-dash-tab:hover {
            color: #d4a574;
            background: rgba(212, 165, 116, 0.05);
        }
        
        .es-dash-tab.active {
            color: #f5e6d3;
            background: rgba(212, 165, 116, 0.1);
            border-bottom-color: #d4a574;
        }
        
        /* Dashboard Content */
        .es-dashboard-content {
            flex: 1;
            overflow-y: auto;
            padding: 1.5rem 2rem;
        }
        
        .es-dash-content {
            display: none;
        }
        
        .es-dash-content.active {
            display: block;
        }
        
        /* Continue Studying Card */
        .es-continue-card {
            background: rgba(62, 49, 39, 0.6);
            border: 1px solid rgba(212, 165, 116, 0.2);
            border-radius: 0.75rem;
            padding: 1.25rem;
            margin-bottom: 1.5rem;
        }
        
        .es-continue-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 1rem;
            font-size: 0.9rem;
            color: rgba(212, 165, 116, 0.8);
        }
        
        .es-progress-badge {
            background: rgba(212, 165, 116, 0.2);
            color: #d4a574;
            padding: 0.25rem 0.75rem;
            border-radius: 1rem;
            font-size: 0.75rem;
        }
        
        .es-continue-body {
            display: flex;
            align-items: center;
            gap: 1rem;
            margin-bottom: 1rem;
        }
        
        .es-study-icon {
            font-size: 2.5rem;
            background: rgba(212, 165, 116, 0.1);
            padding: 0.75rem;
            border-radius: 0.5rem;
        }
        
        .es-study-info h3 {
            margin: 0 0 0.5rem 0;
            color: #f5e6d3;
            font-size: 1.1rem;
        }
        
        .es-progress-bar {
            height: 8px;
            background: rgba(212, 165, 116, 0.2);
            border-radius: 4px;
            overflow: hidden;
            margin-bottom: 0.5rem;
            width: 400px;
            max-width: 100%;
        }
        
        .es-progress-fill {
            height: 100%;
            background: linear-gradient(90deg, #d4a574, #c9a961);
            border-radius: 4px;
            transition: width 0.3s;
        }
        
        .es-progress-text {
            margin: 0;
            font-size: 0.8rem;
            color: rgba(212, 165, 116, 0.6);
        }
        
        .es-continue-btn {
            width: 100%;
            padding: 0.85rem;
            background: rgba(212, 165, 116, 0.15);
            color: #d4a574;
            border: 1px solid rgba(212, 165, 116, 0.3);
            border-radius: 0.5rem;
            font-size: 0.95rem;
            cursor: pointer;
            transition: all 0.2s;
        }
        
        .es-continue-btn:hover {
            background: rgba(212, 165, 116, 0.25);
        }
        
        /* Dashboard Grid */
        .es-dashboard-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 1.5rem;
            margin-bottom: 1.5rem;
        }
        
        .es-dash-card {
            background: rgba(62, 49, 39, 0.5);
            border: 1px solid rgba(212, 165, 116, 0.15);
            border-radius: 0.75rem;
            overflow: hidden;
        }
        
        .es-card-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 1rem 1.25rem;
            background: rgba(45, 35, 28, 0.5);
            border-bottom: 1px solid rgba(212, 165, 116, 0.1);
            color: #f5e6d3;
            font-weight: 500;
        }
        
        .es-add-btn {
            background: rgba(212, 165, 116, 0.2);
            color: #d4a574;
            border: none;
            padding: 0.35rem 0.75rem;
            border-radius: 0.35rem;
            font-size: 0.8rem;
            cursor: pointer;
        }
        
        .es-add-btn:hover {
            background: rgba(212, 165, 116, 0.3);
        }
        
        /* Activity List */
        .es-activity-list {
            padding: 0.5rem 0;
        }
        
        /* ═══════════════════════════════════════════════════════════════════ */
        /* HAVEN FOUNDATION STYLES — CrossLink, Eliyah Widget                  */
        /* ═══════════════════════════════════════════════════════════════════ */
        
        /* CrossLink Navigation Links */
        .haven-crosslink {
            color: var(--gold);
            text-decoration: none;
            border-bottom: 1px dotted var(--gold);
            transition: all 0.2s ease;
            cursor: pointer;
        }
        
        .haven-crosslink:hover {
            color: var(--ember);
            border-bottom-color: var(--ember);
        }
        
        /* Eliyah Suggestion Widget — Floating contextual helper */
        .eliyah-suggestion-widget {
            position: fixed;
            bottom: 80px;
            right: 24px;
            width: 320px;
            max-height: 400px;
            background: linear-gradient(135deg, rgba(30, 27, 24, 0.98) 0%, rgba(45, 40, 35, 0.95) 100%);
            border: 1px solid rgba(212, 165, 116, 0.25);
            border-radius: 16px;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.05) inset;
            z-index: 1000;
            overflow: hidden;
            transform: translateY(20px);
            opacity: 0;
            visibility: hidden;
            transition: all 0.3s ease;
        }
        
        .eliyah-suggestion-widget.visible {
            transform: translateY(0);
            opacity: 1;
            visibility: visible;
        }
        
        .eliyah-widget-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 12px 16px;
            background: rgba(212, 165, 116, 0.1);
            border-bottom: 1px solid rgba(212, 165, 116, 0.15);
        }
        
        .eliyah-widget-title {
            display: flex;
            align-items: center;
            gap: 8px;
            font-weight: 600;
            color: var(--gold);
            font-size: 0.9rem;
        }
        
        .eliyah-widget-close {
            background: none;
            border: none;
            color: rgba(212, 165, 116, 0.5);
            cursor: pointer;
            padding: 4px;
            font-size: 1.1rem;
            line-height: 1;
            transition: color 0.2s;
        }
        
        .eliyah-widget-close:hover {
            color: var(--gold);
        }
        
        .eliyah-widget-body {
            padding: 12px;
            max-height: 300px;
            overflow-y: auto;
        }
        
        .eliyah-suggestion-card {
            background: rgba(212, 165, 116, 0.08);
            border: 1px solid rgba(212, 165, 116, 0.12);
            border-radius: 10px;
            padding: 12px;
            margin-bottom: 8px;
            cursor: pointer;
            transition: all 0.2s ease;
        }
        
        .eliyah-suggestion-card:hover {
            background: rgba(212, 165, 116, 0.15);
            border-color: rgba(212, 165, 116, 0.25);
        }
        
        .eliyah-suggestion-card:last-child {
            margin-bottom: 0;
        }
        
        .eliyah-suggestion-type {
            display: inline-block;
            font-size: 0.7rem;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            padding: 2px 6px;
            border-radius: 4px;
            margin-bottom: 6px;
        }
        
        .eliyah-suggestion-type.navigation { background: rgba(59, 130, 246, 0.2); color: #60a5fa; }
        .eliyah-suggestion-type.scripture { background: rgba(212, 165, 116, 0.2); color: var(--gold); }
        .eliyah-suggestion-type.thread { background: rgba(16, 185, 129, 0.2); color: #34d399; }
        .eliyah-suggestion-type.content { background: rgba(139, 92, 246, 0.2); color: #a78bfa; }
        .eliyah-suggestion-type.notification { background: rgba(236, 72, 153, 0.2); color: #f472b6; }
        
        .eliyah-suggestion-message {
            color: #f5e6d3;
            font-size: 0.85rem;
            line-height: 1.4;
        }
        
        .eliyah-no-suggestions {
            text-align: center;
            color: rgba(212, 165, 116, 0.5);
            font-size: 0.85rem;
            padding: 20px;
        }
        
        /* Eliyah Floating Button */
        .eliyah-fab {
            position: fixed;
            bottom: 24px;
            right: 24px;
            width: 56px;
            height: 56px;
            border-radius: 50%;
            background: linear-gradient(135deg, var(--gold) 0%, #c9a227 100%);
            border: none;
            color: #1e1b18;
            font-size: 1.5rem;
            cursor: pointer;
            box-shadow: 0 4px 16px rgba(212, 165, 116, 0.4);
            z-index: 1001;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .eliyah-fab:hover {
            transform: scale(1.05);
            box-shadow: 0 6px 24px rgba(212, 165, 116, 0.5);
        }
        
        .eliyah-fab.has-suggestions::after {
            content: '';
            position: absolute;
            top: -2px;
            right: -2px;
            width: 14px;
            height: 14px;
            background: var(--ember);
            border-radius: 50%;
            border: 2px solid #1e1b18;
        }
        
        /* Responsive adjustments */
        @media (max-width: 768px) {
            .eliyah-suggestion-widget {
                right: 12px;
                left: 12px;
                width: auto;
                bottom: 90px;
            }
            
            .eliyah-fab {
                bottom: 16px;
                right: 16px;
                width: 48px;
                height: 48px;
                font-size: 1.25rem;
            }
        }
        
        /* ═══════════════════════════════════════════════════════════════════ */
        
        .es-activity-item {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            padding: 0.75rem 1.25rem;
            border-bottom: 1px solid rgba(212, 165, 116, 0.08);
        }
        
        .es-activity-item:last-child {
            border-bottom: none;
        }
        
        .es-activity-icon {
            font-size: 1rem;
        }
        
        .es-activity-text {
            flex: 1;
            color: #f5e6d3;
            font-size: 0.9rem;
        }
        
        .es-activity-time {
            color: rgba(212, 165, 116, 0.5);
            font-size: 0.8rem;
        }
        
        /* Quick Actions */
        .es-quick-actions {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 0.75rem;
            padding: 1.25rem;
        }
        
        .es-quick-action-btn {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 0.5rem;
            padding: 1rem;
            background: rgba(212, 165, 116, 0.08);
            border: 1px solid rgba(212, 165, 116, 0.15);
            border-radius: 0.5rem;
            color: #d4a574;
            cursor: pointer;
            transition: all 0.2s;
        }
        
        .es-quick-action-btn:hover {
            background: rgba(212, 165, 116, 0.15);
            transform: translateY(-2px);
        }
        
        .es-qa-icon {
            font-size: 1.5rem;
        }
        
        /* Goals */
        .es-goals-card {
            grid-column: 1 / -1;
        }
        
        .es-goals-list {
            padding: 0.75rem 1.25rem;
        }
        
        .es-goal-item {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            padding: 0.6rem 0;
            color: #f5e6d3;
            cursor: pointer;
            border-bottom: 1px solid rgba(212, 165, 116, 0.08);
        }
        
        .es-goal-item:last-child {
            border-bottom: none;
        }
        
        .es-goal-item input[type="checkbox"] {
            width: 18px;
            height: 18px;
            accent-color: #d4a574;
        }
        
        .es-goal-item input:checked + span {
            text-decoration: line-through;
            opacity: 0.6;
        }
        
        /* Current Study Tab Styles */
        .es-current-study-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 1.5rem;
            margin-bottom: 1.5rem;
        }
        
        .es-themes-chips {
            display: flex;
            flex-wrap: wrap;
            gap: 0.5rem;
            padding: 1rem 1.25rem;
        }
        
        .es-themes-chips .es-theme-chip {
            padding: 0.5rem 1rem;
            background: rgba(93, 78, 55, 0.4);
            color: #f5e6d3;
            border-radius: 2rem;
            font-size: 0.85rem;
            border: 1px solid rgba(212, 165, 116, 0.2);
        }
        
        .es-themes-chips .es-theme-chip.add {
            background: transparent;
            border-style: dashed;
            color: #d4a574;
            cursor: pointer;
        }
        
        .es-hebrew-list {
            padding: 0.5rem 0;
        }
        
        .es-hebrew-row {
            display: grid;
            grid-template-columns: 1fr 1fr 1fr;
            padding: 0.75rem 1.25rem;
            border-bottom: 1px solid rgba(212, 165, 116, 0.08);
        }
        
        .es-hebrew-word {
            font-size: 1.25rem;
            color: #f5e6d3;
            font-family: 'SBL Hebrew', serif;
        }
        
        .es-hebrew-translit {
            color: rgba(212, 165, 116, 0.7);
            font-style: italic;
        }
        
        .es-hebrew-meaning {
            color: #d4a574;
        }
        
        /* Memory Verses */
        .es-memory-verses {
            padding: 1rem 1.25rem;
            display: flex;
            flex-direction: column;
            gap: 1rem;
        }
        
        .es-memory-verse-card {
            background: rgba(45, 35, 28, 0.5);
            padding: 1rem;
            border-radius: 0.5rem;
            border: 1px solid rgba(212, 165, 116, 0.15);
        }
        
        .es-mv-ref {
            font-size: 0.85rem;
            font-weight: 600;
            color: #d4a574;
            margin-bottom: 0.5rem;
        }
        
        .es-mv-text {
            color: #f5e6d3;
            font-style: italic;
            line-height: 1.5;
            margin-bottom: 0.75rem;
        }
        
        .es-mv-badge {
            display: inline-block;
            padding: 0.25rem 0.75rem;
            border-radius: 1rem;
            font-size: 0.75rem;
        }
        
        .es-mv-badge.memorized {
            background: rgba(74, 124, 89, 0.3);
            color: #8fbc8f;
        }
        
        .es-mv-badge.learning {
            background: rgba(212, 165, 116, 0.25);
            color: #d4a574;
        }
        
        /* Cross References */
        .es-cross-refs {
            padding: 0.5rem 0;
        }
        
        .es-cross-ref-item {
            display: flex;
            align-items: center;
            gap: 1rem;
            padding: 0.75rem 1.25rem;
            border-bottom: 1px solid rgba(212, 165, 116, 0.08);
            color: #f5e6d3;
        }
        
        .es-ref-badge {
            background: rgba(133, 193, 233, 0.2);
            color: #85c1e9;
            padding: 0.25rem 0.6rem;
            border-radius: 0.35rem;
            font-size: 0.8rem;
            font-weight: 500;
        }
        
        /* Study Library */
        .es-library-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
            gap: 1.25rem;
        }
        
        .es-study-card {
            background: rgba(62, 49, 39, 0.5);
            border: 1px solid rgba(212, 165, 116, 0.15);
            border-radius: 0.75rem;
            padding: 1.25rem;
            text-align: center;
            cursor: pointer;
            transition: all 0.2s;
        }
        
        .es-study-card:hover {
            background: rgba(62, 49, 39, 0.7);
            transform: translateY(-3px);
        }
        
        .es-study-card.add-new {
            border-style: dashed;
            background: transparent;
        }
        
        .es-study-card-icon {
            font-size: 2.5rem;
            margin-bottom: 0.75rem;
        }
        
        .es-study-card h4 {
            margin: 0 0 0.35rem 0;
            color: #f5e6d3;
        }
        
        .es-study-card p {
            margin: 0 0 0.75rem 0;
            color: rgba(212, 165, 116, 0.6);
            font-size: 0.85rem;
        }
        
        .es-study-progress {
            height: 4px;
            background: rgba(212, 165, 116, 0.2);
            border-radius: 2px;
            overflow: hidden;
        }
        
        .es-progress-mini {
            height: 100%;
            background: #d4a574;
        }
        
        /* Journal Tab */
        .es-journal-container,
        .es-journal-workspace {
            max-width: 800px;
            position: relative;
            z-index: 100;
        }
        
        .es-journal-prompt-card {
            display: flex;
            align-items: flex-start;
            gap: 1rem;
            background: rgba(62, 49, 39, 0.5);
            border: 1px solid rgba(212, 165, 116, 0.2);
            border-radius: 0.75rem;
            padding: 1.25rem;
            margin-bottom: 1.25rem;
        }
        
        .es-prompt-icon {
            font-size: 1.5rem;
        }
        
        .es-prompt-text {
            flex: 1;
            color: #f5e6d3;
            font-style: italic;
            line-height: 1.5;
        }
        
        .es-new-prompt-btn {
            background: rgba(212, 165, 116, 0.15);
            color: #d4a574;
            border: none;
            padding: 0.5rem 1rem;
            border-radius: 0.35rem;
            cursor: pointer;
            font-size: 0.85rem;
        }
        
        .es-journal-textarea {
            width: 100%;
            min-height: 250px;
            background: rgba(62, 49, 39, 0.4);
            color: #f5e6d3;
            border: 1px solid rgba(212, 165, 116, 0.2);
            border-radius: 0.75rem;
            padding: 1.25rem;
            font-size: 1rem;
            line-height: 1.7;
            resize: vertical;
            font-family: Georgia, serif;
        }
        
        .es-journal-footer {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 1rem;
        }
        
        .es-journal-date {
            color: rgba(212, 165, 116, 0.5);
            font-size: 0.9rem;
        }
        
        .es-save-journal-btn {
            background: #d4a574;
            color: #2d231c;
            border: none;
            padding: 0.65rem 1.5rem;
            border-radius: 0.5rem;
            font-weight: 600;
            cursor: pointer;
        }
        
        /* Notes Tab */
        .es-notes-container,
        .es-notes-workspace {
            height: 100%;
            position: relative;
            z-index: 100;
        }
        
        .es-notes-container .es-notes-textarea {
            min-height: 400px;
        }

        .es-notes-footer {
            margin-top: 1rem;
            text-align: right;
        }

        /* Highlights Tab */
        .es-highlights-container {
            display: flex;
            flex-direction: column;
            gap: 1rem;
        }
        
        .es-highlight-card {
            background: rgba(62, 49, 39, 0.5);
            border: 1px solid rgba(212, 165, 116, 0.15);
            border-left: 4px solid;
            border-radius: 0.5rem;
            padding: 1rem 1.25rem;
        }
        
        .es-highlight-card .es-highlight-ref {
            font-weight: 600;
            color: #d4a574;
            margin-bottom: 0.5rem;
        }
        
        .es-highlight-card .es-highlight-text {
            color: #f5e6d3;
            font-style: italic;
            line-height: 1.5;
            margin-bottom: 0.5rem;
        }
        
        .es-highlight-meta {
            font-size: 0.8rem;
            color: rgba(212, 165, 116, 0.5);
        }

        /* Scrollbar styling for Eliyah Sword */
        .es-overlay ::-webkit-scrollbar { width: 8px; }
        .es-overlay ::-webkit-scrollbar-track { background: rgba(62, 39, 35, 0.3); }
        .es-overlay ::-webkit-scrollbar-thumb { background: rgba(212, 165, 116, 0.4); border-radius: 4px; }

/* --- COVENANTAL AGAPE CARDS --- */

.ca-intro-card {
    background: var(--white);
    border: 1px solid var(--parchment-edge);
    border-radius: 12px;
    padding: 24px;
    margin-bottom: 24px;
    box-shadow: var(--shadow-sm);
}

.ca-intro-text {
    font-size: 1.1rem;
    line-height: 1.6;
    color: var(--ink);
    margin-bottom: 24px;
}

.ca-three-pillars {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.ca-pillar {
    background: var(--parchment-aged);
    padding: 16px;
    border-radius: 8px;
    border-left: 4px solid var(--gold);
    transition: transform 0.2s;
}

.ca-pillar:hover {
    transform: translateY(-2px);
    background: var(--parchment-deep);
}

.pillar-num {
    font-family: var(--font-display);
    font-size: 1.5rem;
    color: var(--gold);
    opacity: 0.5;
    margin-bottom: 4px;
}

.pillar-title {
    font-weight: 700;
    color: var(--ink);
    margin-bottom: 8px;
}

.pillar-desc {
    font-size: 0.9rem;
    color: var(--ink-soft);
    line-height: 1.4;
}

.ca-core-truth {
    background: linear-gradient(135deg, var(--parchment-deep) 0%, var(--parchment-aged) 100%);
    padding: 16px;
    border-radius: 8px;
    display: flex;
    gap: 12px;
    align-items: flex-start;
    border: 1px dashed var(--gold);
}

.ca-truth-icon {
    font-size: 1.2rem;
    color: var(--gold);
}

.ca-truth-text {
    font-size: 0.95rem;
    font-style: italic;
    color: var(--ink);
}

.ca-intro-subtext {
    margin-top: 16px;
    font-size: 0.85rem;
    color: var(--ink-faint);
    text-align: center;
}

/* --- GROWTH STAGE CARDS --- */

.growth-stage-container {
    max-width: 1000px;
    margin: 0 auto;
}

.stage-header {
    background: var(--white);
    border: 1px solid var(--parchment-edge);
    border-radius: 16px;
    padding: 24px;
    display: flex;
    align-items: center;
    gap: 24px;
    margin-bottom: 32px;
    box-shadow: var(--shadow-md);
}

.stage-icon-large {
    font-size: 3.5rem;
    background: var(--parchment-aged);
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 2px solid var(--parchment-edge);
}

.stage-info h2 {
    font-family: var(--font-display);
    font-size: 2rem;
    margin: 0 0 8px 0;
    color: var(--ink);
}

.stage-description {
    font-size: 1.1rem;
    color: var(--ink-soft);
    margin: 0 0 8px 0;
}

.stage-meta {
    font-size: 0.9rem;
    color: var(--ink-faint);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Header Colors per Stage */
.covenantal-agape-header { border-top: 6px solid var(--gold); }
.mighty-oaks-header { border-top: 6px solid var(--olive); }
.strong-shoots-header { border-top: 6px solid var(--projects); }
.saplings-header { border-top: 6px solid var(--sanctuary); }
.seedlings-header { border-top: 6px solid var(--stream); }

/* --- CONTENT SECTIONS --- */

.content-section {
    margin-bottom: 40px;
    animation: fadeIn 0.3s ease;
}

.content-section h3 {
    font-family: var(--font-display);
    font-size: 1.5rem;
    color: var(--ink);
    margin-bottom: 16px;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--parchment-edge);
}

/* Dark Theme Adjustments */
body.dark-theme .havenhub-academy-header {
    background: linear-gradient(135deg, var(--parchment-aged) 0%, var(--parchment-deep) 100%);
    border-bottom-color: var(--parchment-edge);
}

body.dark-theme .ca-intro-card {
    background: var(--parchment-aged);
    border-color: var(--parchment-edge);
}

body.dark-theme .ca-pillar {
    background: var(--parchment-deep);
}

body.dark-theme .ca-core-truth {
    background: var(--parchment-deep);
    border-color: var(--thread);
}

body.dark-theme .stage-header {
    background: var(--parchment-aged);
    border-color: var(--parchment-edge);
}

body.dark-theme .stage-icon-large {
    background: var(--parchment-deep);
    border-color: var(--parchment-edge);
}

/* ═══════════════════════════════════════════════════════════════ */
/* HAVENHUB MATH DASHBOARD STYLES                                  */
/* ═══════════════════════════════════════════════════════════════ */

.math-grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

.math-edition-card {
    background-color: var(--white);
    border-radius: 15px;
    box-shadow: var(--shadow-sm);
    padding: 25px;
    border-top: 5px solid var(--thread);
    transition: transform 0.2s;
    border: 1px solid var(--parchment-edge);
}

.math-edition-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-md);
}

.math-edition-card h2 {
    margin-top: 0;
    color: var(--ink);
    border-bottom: 1px solid var(--parchment-edge);
    padding-bottom: 10px;
    font-family: var(--font-display);
    font-size: 1.5rem;
}

.math-unit-list {
    list-style: none;
    padding: 0;
}

.math-unit-item {
    margin-bottom: 15px;
    padding: 10px;
    background-color: var(--parchment-aged);
    border-radius: 8px;
    border: 1px solid var(--parchment-edge);
}

.math-unit-title {
    font-weight: bold;
    display: block;
    margin-bottom: 5px;
    color: var(--ink);
}

.math-links {
    display: flex;
    gap: 10px;
    font-size: 0.9rem;
}

.math-links a {
    text-decoration: none;
    color: var(--olive);
    font-weight: 600;
}

.math-links a:hover {
    text-decoration: underline;
    color: var(--thread);
}

.math-badge {
    background-color: var(--olive);
    color: white;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 0.7rem;
    vertical-align: middle;
    margin-left: 5px;
}

/* Dark Theme Adjustments for Math */
body.dark-theme .math-edition-card {
    background: var(--parchment-deep);
    border-color: var(--parchment-edge);
}

body.dark-theme .math-unit-item {
    background: var(--parchment-aged);
    border-color: var(--parchment-edge);
}

body.dark-theme .math-edition-card h2 {
    color: var(--thread);
}

body.dark-theme .math-unit-title {
    color: var(--ink);
}

/* ═══════════════════════════════════════════════════════════════ */
/* HAVENHUB MATH WORKSPACE STYLES                                  */
/* ═══════════════════════════════════════════════════════════════ */



#tab-havenhub-math {
    width: 100%;
}

#tab-havenhub-math.active {
    display: flex !important;
}

/* One-Room Schoolhouse tab */
#tab-one-room-schoolhouse {
    width: 100%;
}

#tab-one-room-schoolhouse.active {
    display: flex !important;
    flex-direction: column;
}

/* SIDEBAR */


.math-sidebar-header {
    padding: 16px;
    font-family: var(--font-display);
    font-size: 1.2rem;
    font-weight: 700;
    border-bottom: 1px solid var(--parchment-edge);
    background: var(--parchment);
    color: var(--ink);
    position: sticky;
    top: 0;
    z-index: 10;
}

.math-vol-btn {
    width: 100%;
    padding: 12px 16px;
    text-align: left;
    background: var(--parchment-deep);
    border: none;
    border-bottom: 1px solid var(--parchment-edge);
    font-family: var(--font-display);
    font-weight: 600;
    color: var(--ink);
    cursor: pointer;
    transition: background 0.2s;
}

.math-vol-btn:hover {
    background: var(--thread-faint);
}

.math-vol-btn.active {
    background: var(--thread);
    color: white;
}

.math-vol-content {
    display: none;
    background: var(--white);
}

.math-vol-content.active {
    display: block;
}

.math-edition-item {
    border-bottom: 1px solid var(--parchment-edge);
}

.math-edition-header {
    padding: 10px 16px;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--ink-soft);
    cursor: pointer;
    background: var(--white);
}

.math-edition-header:hover {
    color: var(--thread);
    background: var(--parchment-aged);
}

.math-edition-units {
    display: none;
    padding: 8px 16px;
    background: var(--parchment-aged);
    border-top: 1px dashed var(--parchment-edge);
}

.math-edition-units.active {
    display: block;
}

.math-unit-row {
    margin-bottom: 8px;
    padding-bottom: 8px;
    border-bottom: 1px dashed var(--parchment-edge);
}

.math-unit-row:last-child {
    border-bottom: none;
}

.m-unit-name {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 4px;
    color: var(--ink);
}

.m-unit-actions {
    display: flex;
    gap: 6px;
}

.m-unit-actions button {
    font-size: 0.75rem;
    padding: 2px 8px;
    border: 1px solid var(--olive);
    background: white;
    color: var(--olive);
    border-radius: 4px;
    cursor: pointer;
}

.m-unit-actions button:hover {
    background: var(--olive);
    color: white;
}

/* VIEWER */


.math-iframe {
    width: 100%;
    height: 100%;
    border: none;
    display: none; /* Hidden until loaded */
}

.math-iframe.active {
    display: block;
}

.math-welcome-screen {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--parchment) 0%, var(--white) 100%);
    text-align: center;
    z-index: 5;
}

.math-welcome-content h1 {
    font-family: var(--font-display);
    font-size: 3rem;
    color: var(--thread);
    margin-bottom: 16px;
}

.math-stat-grid {
    display: flex;
    gap: 24px;
    justify-content: center;
    margin-top: 32px;
}

.math-stat-grid div {
    background: var(--white);
    padding: 16px;
    border-radius: 8px;
    border: 1px solid var(--parchment-edge);
    font-weight: 600;
    color: var(--ink-soft);
    box-shadow: var(--shadow-sm);
}

/* Dark Theme */
body.dark-theme 
body.dark-theme .math-sidebar-header { background: var(--parchment-deep); color: var(--ink); }
body.dark-theme .math-vol-btn { background: var(--parchment-deep); color: var(--ink); }
body.dark-theme .math-vol-btn:hover { background: var(--parchment); }
body.dark-theme .math-vol-btn.active { background: var(--thread); }
body.dark-theme .math-vol-content { background: var(--parchment-aged); }
body.dark-theme .math-edition-header { background: var(--parchment-aged); color: var(--ink-soft); }
body.dark-theme .math-edition-header:hover { background: var(--parchment-deep); color: var(--thread); }
body.dark-theme .math-edition-units { background: var(--parchment-deep); }
body.dark-theme .m-unit-name { color: var(--ink); }
body.dark-theme .m-unit-actions button { background: var(--parchment-aged); color: var(--olive); border-color: var(--olive); }
body.dark-theme .m-unit-actions button:hover { background: var(--olive); color: white; }
body.dark-theme 
body.dark-theme .math-welcome-screen { background: linear-gradient(135deg, var(--parchment-deep) 0%, var(--parchment-aged) 100%); }
body.dark-theme .math-stat-grid div { background: var(--parchment-deep); border-color: var(--parchment-edge); color: var(--ink); }

/* ═══════════════════════════════════════════════════════════════ */
/* MATH WORKSPACE STYLE UPDATES                                    */
/* ═══════════════════════════════════════════════════════════════ */

/* Sidebar Background matching app panels */


.math-sidebar-header {
    background: var(--parchment-deep) !important;
    font-size: 1.3rem !important;
    padding: 20px 16px !important;
    border-bottom: 2px solid var(--parchment-edge) !important;
}

/* Volume Buttons - Bigger & Better */
.math-vol-btn {
    font-size: 1.15rem !important; /* Bigger text */
    padding: 16px 20px !important;
    background: var(--parchment-aged) !important;
    border-bottom: 1px solid var(--parchment-edge) !important;
    color: var(--ink) !important;
    display: flex;
    align-items: center;
    gap: 10px;
}

.math-vol-btn:hover {
    background: var(--parchment-deep) !important;
    color: var(--thread) !important;
}

.math-vol-btn.active {
    background: var(--white) !important;
    color: var(--olive) !important;
    border-left: 4px solid var(--olive);
}

/* Edition Headers */
.math-edition-header {
    background: var(--parchment-aged) !important;
    font-size: 1rem !important;
    padding: 12px 24px !important;
}

.math-edition-units {
    background: var(--white) !important;
}

/* Intro Button Special Styling */
.math-vol-btn.intro-btn {
    background: linear-gradient(135deg, var(--parchment-deep) 0%, var(--parchment-aged) 100%) !important;
    border-bottom: 2px solid var(--thread) !important;
    font-size: 1rem !important;
}

/* ═══════════════════════════════════════════════════════════════ */
/* CREATION WORKSPACE STYLES                                       */
/* ═══════════════════════════════════════════════════════════════ */







#tab-creation-index {
    width: 100%;
}

#tab-creation-index.active {
    display: flex !important;
}

#tab-creation-index .page-header {
    display: none; /* Already hidden to save space */
}

/* SIDEBAR */




.creation-sidebar-header, .math-sidebar-header {
    padding: 20px;
    font-family: var(--font-display);
    font-size: 1.3rem;
    font-weight: 800;
    text-align: center;
    border-bottom: 2px solid var(--parchment-edge);
    background: var(--parchment-deep);
    color: var(--ink);
    position: sticky;
    top: 0;
    z-index: 15;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.creation-vol-btn {
    width: 100%;
    padding: 12px 16px;
    text-align: left;
    background: var(--parchment-deep);
    border: none;
    border-bottom: 1px solid var(--parchment-edge);
    font-family: var(--font-display);
    font-weight: 600;
    color: var(--ink);
    cursor: pointer;
    transition: background 0.2s;
    display: flex;
    align-items: center;
    gap: 8px;
}

.creation-vol-btn:hover {
    background: var(--olive-soft);
    color: white;
}

.creation-vol-btn.active {
    background: var(--olive);
    color: white;
}

.creation-vol-content {
    display: none;
    background: var(--white);
}

.creation-vol-content.active {
    display: block;
}

.creation-edition-item {
    border-bottom: 1px solid var(--parchment-edge);
}

.creation-edition-header {
    padding: 10px 16px;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--ink-soft);
    cursor: pointer;
    background: var(--white);
}

.creation-edition-header:hover {
    color: var(--olive);
    background: var(--parchment-aged);
}

.creation-edition-units {
    display: none;
    padding: 8px 16px;
    background: var(--parchment-aged);
    border-top: 1px dashed var(--parchment-edge);
}

.creation-edition-units.active {
    display: block;
}

.creation-unit-row {
    margin-bottom: 8px;
    padding-bottom: 8px;
    border-bottom: 1px dashed var(--parchment-edge);
}

.creation-unit-row:last-child {
    border-bottom: none;
}

.c-unit-name {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 4px;
    color: var(--ink);
}

.c-unit-actions {
    display: flex;
    gap: 6px;
}

.c-unit-actions button {
    font-size: 0.75rem;
    padding: 2px 8px;
    border: 1px solid var(--olive);
    background: white;
    color: var(--olive);
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s;
}

.c-unit-actions button:hover {
    background: var(--olive);
    color: white;
}

.creation-cat-btn {
    width: 100%;
    padding: 12px 16px;
    text-align: left;
    background: var(--parchment-aged);
    border: none;
    border-bottom: 1px solid var(--parchment-edge);
    font-family: var(--font-display);
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--ink);
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 8px;
}

.creation-cat-btn:hover {
    background: var(--parchment-deep);
    color: var(--thread);
}

.creation-cat-btn.active {
    background: var(--white);
    color: var(--olive);
    border-left: 4px solid var(--olive);
}

.creation-cat-content {
    display: none;
    background: var(--white);
}

.creation-cat-content.active {
    display: block;
}

/* Item Links */
.creation-item {
    padding: 8px 20px;
    font-size: 0.95rem;
    color: var(--ink-soft);
    cursor: pointer;
    border-bottom: 1px solid var(--parchment-edge);
    display: flex;
    align-items: center;
    gap: 10px;
    transition: all 0.2s;
}

.creation-item:hover {
    background: var(--parchment-aged);
    color: var(--thread);
}

.creation-item span {
    font-size: 1.1rem;
    width: 24px;
    text-align: center;
}

/* VIEWER */






.creation-iframe {
    width: 100%;
    height: 100%;
    border: none;
    display: none; /* Hidden until loaded */
    flex: 1;
}

.creation-iframe.active {
    display: block;
}

.creation-welcome-screen {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--parchment) 0%, var(--white) 100%);
    text-align: center;
    z-index: 5;
}

.creation-welcome-content h2 {
    font-family: var(--font-display);
    font-size: 2.5rem;
    color: var(--olive);
    margin-bottom: 12px;
}

/* Dark Theme */
body.dark-theme 


body.dark-theme .creation-sidebar-header { background: var(--parchment-deep); color: var(--ink); }
body.dark-theme .creation-cat-btn { background: var(--parchment-deep); color: var(--ink); }
body.dark-theme .creation-cat-btn:hover { background: var(--parchment); }
body.dark-theme .creation-cat-btn.active { background: var(--parchment-aged); color: var(--olive); }
body.dark-theme .creation-cat-content { background: var(--parchment-aged); }
body.dark-theme .creation-item:hover { background: var(--parchment-deep); }
body.dark-theme 




body.dark-theme .creation-welcome-screen { background: linear-gradient(135deg, var(--parchment-deep) 0%, var(--parchment-aged) 100%); }

body.dark-theme .creation-item { border-color: var(--parchment-edge); color: var(--ink-soft); }
body.dark-theme .creation-item:hover { background: var(--parchment-deep); color: var(--thread); }
body.dark-theme 





/* Fix for mission text overlay issues */
.creation-iframe {
    position: relative !important;
    z-index: 1 !important;
    width: 100% !important;
    height: 100% !important;
}
.creation-welcome-screen {
    position: absolute !important;
    inset: 0 !important;
    z-index: 5 !important;
}


.creation-workspace, .math-workspace {
    display: flex !important;
    flex-direction: row !important; /* Sidebar on the left */
    height: 85vh !important;
    min-height: 600px;
    background: var(--parchment-aged);
    border: 1px solid var(--parchment-edge);
    border-radius: 12px;
    overflow: hidden;
    width: 100%;
    box-shadow: var(--shadow-lg);
}

.creation-sidebar, .math-sidebar {
    width: 320px !important;
    flex-shrink: 0 !important;
    background: var(--parchment-deep) !important;
    border-right: 2px solid var(--parchment-edge) !important;
    border-left: none !important;
    display: flex !important;
    flex-direction: column !important;
    overflow-y: auto !important;
    z-index: 10 !important;
    order: -1 !important; /* Move sidebar to left */
}

.creation-viewer, .math-viewer {
    flex: 1 !important;
    background: var(--white) !important;
    position: relative !important;
    overflow-y: auto !important; /* Scrollable workspace */
    display: flex !important;
    flex-direction: column !important;
}

.creation-iframe, .math-iframe {
    width: 100% !important;
    flex: 1 !important;
    border: none !important;
    display: none !important;
    position: relative !important;
    z-index: 10 !important;
}

.creation-iframe.active, .math-iframe.active {
    display: block !important;
}

/* Print button styling */
.creation-print-btn {
    position: absolute !important;
    top: 20px !important;
    right: 20px !important;
    z-index: 9999 !important;
    background: var(--olive) !important;
    color: white !important;
    border: none !important;
    border-radius: 8px !important;
    padding: 10px 16px !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15) !important;
    transition: all 0.2s ease !important;
    pointer-events: auto !important;
    user-select: none !important;
    -webkit-user-select: none !important;
}

.creation-print-btn:hover {
    background: #657449 !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2) !important;
    transform: translateY(-1px) !important;
}

.creation-print-btn:active {
    transform: translateY(0) !important;
}

/* "Tabs go spread out" - Making category buttons wider and more prominent */
.creation-cat-btn, .math-vol-btn {
    width: 100% !important;
    text-align: center !important;
    padding: 15px !important;
    font-size: 1.1rem !important;
    border-bottom: 1px solid var(--parchment-edge) !important;
    letter-spacing: 1px !important;
}

.creation-cat-content, .math-vol-content {
    background: var(--parchment-aged) !important;
}

.creation-item, .math-unit-row {
    padding: 10px 15px !important;
    border-bottom: 1px dashed var(--parchment-edge) !important;
}


.creation-workspace, .math-workspace {
    display: flex !important;
    flex-direction: row !important; /* Sidebar on Left, Workspace on Right */
    height: 85vh !important;
    min-height: 700px;
    background: var(--parchment-aged);
    border: 2px solid var(--parchment-edge);
    border-radius: 16px;
    overflow: hidden !important;
    margin: 0;
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
    width: 100% !important;
}

.creation-sidebar, .math-sidebar {
    width: 300px !important;
    flex-shrink: 0 !important;
    background: var(--parchment-deep) !important;
    border-right: 2px solid var(--parchment-edge) !important;
    border-left: none !important;
    display: flex !important;
    flex-direction: column !important;
    overflow-y: auto !important;
    z-index: 5 !important;
    order: -1 !important; /* Move sidebar to left */
}

.creation-viewer, .math-viewer {
    flex: 1 !important;
    background: var(--surface) !important;
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
}

.creation-iframe, .math-iframe {
    width: 100% !important;
    height: 100% !important;
    flex: 1 !important;
    border: none !important;
}

/* Spreading out the tabs/buttons in the sidebar */
.creation-cat-btn, .math-vol-btn {
    width: 100% !important;
    padding: 18px 12px !important;
    text-align: center !important;
    font-size: 1.1rem !important;
    font-weight: 700 !important;
    border-bottom: 1px solid var(--parchment-edge) !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    background: var(--parchment-aged) !important;
}

.creation-cat-btn:hover, .math-vol-btn:hover {
    background: var(--white) !important;
    color: var(--olive) !important;
}

/* Welcome screen fix */
.creation-welcome-screen {
    position: absolute !important;
    inset: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: var(--white) !important;
    z-index: 10 !important;
}


.creation-workspace, .math-workspace {
    display: flex !important;
    flex-direction: row !important; /* Viewer Left, Sidebar Right */
    height: 80vh !important;
    min-height: 600px;
    background: var(--parchment-aged);
    border: 2px solid var(--parchment-edge);
    border-radius: 16px;
    overflow: hidden !important;
    margin: 0;
    box-shadow: var(--shadow-lg);
    width: 100% !important;
}

.creation-viewer, .math-viewer {
    flex: 1 !important;
    position: relative !important;
    background: var(--surface) !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    min-height: 0;
    order: 1; /* Left side */
}

.creation-sidebar, .math-sidebar {
    width: 320px !important;
    flex-shrink: 0 !important;
    background: var(--parchment-deep) !important;
    border-left: 2px solid var(--parchment-edge) !important;
    display: flex !important;
    flex-direction: column !important;
    overflow-y: auto !important;
    min-height: 0;
    order: 2; /* Right side */
    z-index: 10;
}

.creation-iframe, .math-iframe {
    width: 100% !important;
    height: 100% !important;
    border: none !important;
    flex: 1 !important;
}

/* Category Buttons as "Tabs" */
.creation-cat-btn, .math-vol-btn {
    width: calc(100% - 20px) !important;
    margin: 10px auto !important;
    padding: 16px !important;
    text-align: center !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    border: 1px solid var(--parchment-edge) !important;
    border-radius: 12px !important;
    background: var(--parchment-aged) !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    cursor: pointer;
    transition: all 0.2s;
    display: block !important;
}

.creation-cat-btn:hover, .math-vol-btn:hover {
    background: var(--white) !important;
    color: var(--olive) !important;
}

.creation-cat-content, .math-vol-content {
    background: var(--white) !important;
}

/* Welcome Screen Fix */
.creation-welcome-screen, .math-welcome-screen {
    position: absolute !important;
    inset: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: var(--surface) !important;
    z-index: 5 !important;
    text-align: center;
    padding: 40px;
}


.creation-workspace, .math-workspace {
    display: flex !important;
    flex-direction: row !important; /* Viewer Left, Sidebar Right */
    height: calc(100vh - 220px) !important;
    min-height: 600px;
    background: var(--parchment-aged);
    border: 2px solid var(--parchment-edge);
    border-radius: 16px;
    overflow: hidden !important;
    margin: 0 !important;
    width: 100% !important;
    gap: 0 !important;
}

.creation-viewer, .math-viewer {
    flex: 1 !important;
    position: relative !important;
    background: var(--surface) !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    height: 100% !important;
}

.creation-sidebar, .math-sidebar {
    width: 300px !important;
    flex-shrink: 0 !important;
    background: var(--parchment-deep) !important;
    border-left: 2px solid var(--parchment-edge) !important;
    display: flex !important;
    flex-direction: column !important;
    overflow-y: auto !important;
    height: 100% !important;
}

.creation-iframe, .math-iframe {
    width: 100% !important;
    height: 100% !important;
    border: none !important;
}

/* Tab-like Sidebar Buttons */
.creation-cat-btn, .math-vol-btn {
    width: 90% !important;
    margin: 8px auto !important;
    padding: 14px !important;
    text-align: center !important;
    font-size: 0.95rem !important;
    font-weight: 700 !important;
    border: 1px solid var(--parchment-edge) !important;
    border-radius: 8px !important;
    background: var(--parchment-aged) !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    cursor: pointer;
    transition: all 0.2s;
}

.creation-cat-btn:hover, .math-vol-btn:hover {
    background: var(--white) !important;
    color: var(--olive) !important;
    transform: translateX(-2px);
}

.creation-cat-btn.active, .math-vol-btn.active {
    background: var(--white) !important;
    border-left: 4px solid var(--olive) !important;
}

.creation-sidebar-header, .math-sidebar-header {
    padding: 15px;
    font-size: 1.1rem;
    font-weight: 800;
    text-align: center;
    background: var(--parchment-deep);
    border-bottom: 2px solid var(--parchment-edge);
    position: sticky;
    top: 0;
    z-index: 20;
}

/* UNIFIED RIGHT-SIDE NAVIGATION WORKSPACE */
.creation-workspace, .math-workspace {
    display: flex !important;
    flex-direction: row !important; /* Viewer Left, Sidebar Right */
    height: 85vh !important;
    min-height: 650px;
    background: var(--parchment-aged);
    border: 2px solid var(--parchment-edge);
    border-radius: 16px;
    overflow: hidden !important;
    margin: 0 !important;
    width: 100% !important;
}

.creation-viewer, .math-viewer {
    flex: 1 !important;
    position: relative !important;
    background: var(--surface) !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
}

.creation-sidebar, .math-sidebar {
    width: 320px !important;
    flex-shrink: 0 !important;
    background: var(--parchment-deep) !important;
    border-left: 2px solid var(--parchment-edge) !important;
    display: flex !important;
    flex-direction: column !important;
    overflow-y: auto !important;
    z-index: 10;
}

.creation-iframe, .math-iframe {
    width: 100% !important;
    height: 100% !important;
    border: none !important;
    flex: 1 !important;
}

/* Sidebar Tab-Buttons */
.creation-cat-btn, .math-vol-btn {
    width: 92% !important;
    margin: 8px auto !important;
    padding: 14px !important;
    text-align: center !important;
    font-size: 0.95rem !important;
    font-weight: 700 !important;
    border: 1px solid var(--parchment-edge) !important;
    border-radius: 10px !important;
    background: var(--parchment-aged) !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    cursor: pointer;
    transition: all 0.2s;
    display: block !important;
}

.creation-cat-btn:hover, .math-vol-btn:hover {
    background: var(--white) !important;
    color: var(--olive) !important;
}

.creation-cat-btn.active, .math-vol-btn.active {
    background: var(--white) !important;
    border-left: 5px solid var(--olive) !important;
}

.creation-sidebar-header, .math-sidebar-header {
    padding: 20px;
    font-size: 1.2rem;
    font-weight: 800;
    text-align: center;
    background: var(--parchment-deep);
    border-bottom: 2px solid var(--parchment-edge);
    position: sticky;
    top: 0;
    z-index: 20;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.creation-welcome-screen, .math-welcome-screen {
    position: absolute !important;
    inset: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: var(--surface) !important;
    z-index: 5 !important;
    padding: 40px;
}

/* UNIFIED RIGHT-SIDE NAVIGATION WORKSPACE */
.creation-workspace, .math-workspace {
    display: flex !important;
    flex-direction: row !important; /* Viewer Left, Sidebar Right */
    height: 85vh !important;
    min-height: 650px;
    background: var(--parchment-aged);
    border: 2px solid var(--parchment-edge);
    border-radius: 16px;
    overflow: hidden !important;
    margin: 0 !important;
    width: 100% !important;
}

.creation-viewer, .math-viewer {
    flex: 1 !important;
    position: relative !important;
    background: var(--surface) !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
}

.creation-sidebar, .math-sidebar {
    width: 320px !important;
    flex-shrink: 0 !important;
    background: var(--parchment-deep) !important;
    border-left: 2px solid var(--parchment-edge) !important;
    display: flex !important;
    flex-direction: column !important;
    overflow-y: auto !important;
    z-index: 10;
}

.creation-iframe, .math-iframe {
    width: 100% !important;
    height: 100% !important;
    border: none !important;
    flex: 1 !important;
}

/* Sidebar Tab-Buttons */
.creation-cat-btn, .math-vol-btn {
    width: 92% !important;
    margin: 8px auto !important;
    padding: 14px !important;
    text-align: center !important;
    font-size: 0.95rem !important;
    font-weight: 700 !important;
    border: 1px solid var(--parchment-edge) !important;
    border-radius: 10px !important;
    background: var(--parchment-aged) !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    cursor: pointer;
    transition: all 0.2s;
    display: block !important;
}

.creation-cat-btn:hover, .math-vol-btn:hover {
    background: var(--white) !important;
    color: var(--olive) !important;
}

.creation-cat-btn.active, .math-vol-btn.active {
    background: var(--white) !important;
    border-left: 5px solid var(--olive) !important;
}

.creation-sidebar-header, .math-sidebar-header {
    padding: 20px;
    font-size: 1.2rem;
    font-weight: 800;
    text-align: center;
    background: var(--parchment-deep);
    border-bottom: 2px solid var(--parchment-edge);
    position: sticky;
    top: 0;
    z-index: 20;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.creation-welcome-screen, .math-welcome-screen {
    position: absolute !important;
    inset: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: var(--surface) !important;
    z-index: 5 !important;
    padding: 40px;
}

/* UNIFIED RIGHT-SIDE NAVIGATION WORKSPACE */
.creation-workspace, .math-workspace {
    display: flex !important;
    flex-direction: row !important; /* Viewer Left, Sidebar Right */
    height: 85vh !important;
    min-height: 650px;
    background: var(--parchment-aged);
    border: 2px solid var(--parchment-edge);
    border-radius: 16px;
    overflow: hidden !important;
    margin: 0 !important;
    width: 100% !important;
}

.creation-viewer, .math-viewer {
    flex: 1 !important;
    position: relative !important;
    background: var(--surface) !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
}

.creation-sidebar, .math-sidebar {
    width: 320px !important;
    flex-shrink: 0 !important;
    background: var(--parchment-deep) !important;
    border-left: 2px solid var(--parchment-edge) !important;
    display: flex !important;
    flex-direction: column !important;
    overflow-y: auto !important;
    z-index: 10;
}

.creation-iframe, .math-iframe {
    width: 100% !important;
    height: 100% !important;
    border: none !important;
    flex: 1 !important;
}

/* Sidebar Tab-Buttons */
.creation-cat-btn, .math-vol-btn {
    width: 92% !important;
    margin: 8px auto !important;
    padding: 14px !important;
    text-align: center !important;
    font-size: 0.95rem !important;
    font-weight: 700 !important;
    border: 1px solid var(--parchment-edge) !important;
    border-radius: 10px !important;
    background: var(--parchment-aged) !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    cursor: pointer;
    transition: all 0.2s;
    display: block !important;
}

.creation-cat-btn:hover, .math-vol-btn:hover {
    background: var(--white) !important;
    color: var(--olive) !important;
}

.creation-cat-btn.active, .math-vol-btn.active {
    background: var(--white) !important;
    border-left: 5px solid var(--olive) !important;
}

.creation-sidebar-header, .math-sidebar-header {
    padding: 20px;
    font-size: 1.2rem;
    font-weight: 800;
    text-align: center;
    background: var(--parchment-deep);
    border-bottom: 2px solid var(--parchment-edge);
    position: sticky;
    top: 0;
    z-index: 20;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.creation-welcome-screen, .math-welcome-screen {
    position: absolute !important;
    inset: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: var(--surface) !important;
    z-index: 5 !important;
    padding: 40px;
}

/* UNIFIED RIGHT-SIDE NAVIGATION WORKSPACE */
.creation-workspace, .math-workspace {
    display: flex !important;
    flex-direction: row !important; /* Viewer Left, Sidebar Right */
    height: 85vh !important;
    min-height: 650px;
    background: var(--parchment-aged);
    border: 2px solid var(--parchment-edge);
    border-radius: 16px;
    overflow: hidden !important;
    margin: 0 !important;
    width: 100% !important;
}

.creation-viewer, .math-viewer {
    flex: 1 !important;
    position: relative !important;
    background: var(--surface) !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
}

.creation-sidebar, .math-sidebar {
    width: 320px !important;
    flex-shrink: 0 !important;
    background: var(--parchment-deep) !important;
    border-left: 2px solid var(--parchment-edge) !important;
    display: flex !important;
    flex-direction: column !important;
    overflow-y: auto !important;
    z-index: 10;
}

.creation-iframe, .math-iframe {
    width: 100% !important;
    height: 100% !important;
    border: none !important;
    flex: 1 !important;
}

/* Sidebar Tab-Buttons */
.creation-cat-btn, .math-vol-btn {
    width: 92% !important;
    margin: 8px auto !important;
    padding: 14px !important;
    text-align: center !important;
    font-size: 0.95rem !important;
    font-weight: 700 !important;
    border: 1px solid var(--parchment-edge) !important;
    border-radius: 10px !important;
    background: var(--parchment-aged) !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    cursor: pointer;
    transition: all 0.2s;
    display: block !important;
}

.creation-cat-btn:hover, .math-vol-btn:hover {
    background: var(--white) !important;
    color: var(--olive) !important;
}

.creation-cat-btn.active, .math-vol-btn.active {
    background: var(--white) !important;
    border-left: 5px solid var(--olive) !important;
}

.creation-sidebar-header, .math-sidebar-header {
    padding: 20px;
    font-size: 1.2rem;
    font-weight: 800;
    text-align: center;
    background: var(--parchment-deep);
    border-bottom: 2px solid var(--parchment-edge);
    position: sticky;
    top: 0;
    z-index: 20;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.creation-welcome-screen, .math-welcome-screen {
    position: absolute !important;
    inset: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: var(--surface) !important;
    z-index: 5 !important;
    padding: 40px;
}

/* UNIFIED RIGHT-SIDE NAVIGATION WORKSPACE */
.creation-workspace, .math-workspace {
    display: flex !important;
    flex-direction: row !important; /* Viewer Left, Sidebar Right */
    height: 85vh !important;
    min-height: 650px;
    background: var(--parchment-aged);
    border: 2px solid var(--parchment-edge);
    border-radius: 16px;
    overflow: hidden !important;
    margin: 0 !important;
    width: 100% !important;
}

.creation-viewer, .math-viewer {
    flex: 1 !important;
    position: relative !important;
    background: var(--surface) !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
}

.creation-sidebar, .math-sidebar {
    width: 320px !important;
    flex-shrink: 0 !important;
    background: var(--parchment-deep) !important;
    border-left: 2px solid var(--parchment-edge) !important;
    display: flex !important;
    flex-direction: column !important;
    overflow-y: auto !important;
    z-index: 10;
}

.creation-iframe, .math-iframe {
    width: 100% !important;
    height: 100% !important;
    border: none !important;
    flex: 1 !important;
}

/* Sidebar Tab-Buttons */
.creation-cat-btn, .math-vol-btn {
    width: 92% !important;
    margin: 8px auto !important;
    padding: 14px !important;
    text-align: center !important;
    font-size: 0.95rem !important;
    font-weight: 700 !important;
    border: 1px solid var(--parchment-edge) !important;
    border-radius: 10px !important;
    background: var(--parchment-aged) !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    cursor: pointer;
    transition: all 0.2s;
    display: block !important;
}

.creation-cat-btn:hover, .math-vol-btn:hover {
    background: var(--white) !important;
    color: var(--olive) !important;
}

.creation-cat-btn.active, .math-vol-btn.active {
    background: var(--white) !important;
    border-left: 5px solid var(--olive) !important;
}

.creation-sidebar-header, .math-sidebar-header {
    padding: 20px;
    font-size: 1.2rem;
    font-weight: 800;
    text-align: center;
    background: var(--parchment-deep);
    border-bottom: 2px solid var(--parchment-edge);
    position: sticky;
    top: 0;
    z-index: 20;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.creation-welcome-screen, .math-welcome-screen {
    position: absolute !important;
    inset: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: var(--surface) !important;
    z-index: 5 !important;
    padding: 40px;
}
    transform: scale(1.05);
    box-shadow: 0 6px 20px rgba(16, 185, 129, 0.4);
}

/* Library Featured Section */
.es-library-featured {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
    border-radius: 16px;
    padding: 24px;
    margin-bottom: 24px;
}

.es-featured-header {
    margin-bottom: 20px;
}

.es-featured-badge {
    display: inline-block;
    background: rgba(255, 215, 0, 0.2);
    color: #ffd700;
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    margin-bottom: 8px;
}

.es-featured-header h3 {
    color: white;
    margin: 0 0 4px 0;
    font-size: 1.2rem;
}

.es-featured-header p {
    color: rgba(255, 255, 255, 0.6);
    margin: 0;
    font-size: 0.85rem;
}

.es-featured-study {
    display: flex;
    gap: 20px;
    align-items: center;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 20px;
    cursor: pointer;
    transition: all 0.2s;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.es-featured-study:hover {
    background: rgba(255, 255, 255, 0.12);
    transform: translateY(-2px);
}

.es-featured-icon {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.3) 0%, rgba(255, 215, 0, 0.1) 100%);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    flex-shrink: 0;
}

.es-featured-info {
    flex: 1;
}

.es-featured-info h4 {
    color: white;
    margin: 0 0 4px 0;
    font-size: 1.2rem;
}

.es-featured-subtitle {
    color: #ffd700;
    font-size: 0.85rem;
    margin: 0 0 8px 0;
}

.es-featured-desc {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.9rem;
    margin: 0 0 12px 0;
    line-height: 1.5;
}

.es-featured-meta {
    display: flex;
    gap: 16px;
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.5);
}

.es-featured-btn {
    background: #ffd700;
    color: #1a1a2e;
    border: none;
    padding: 12px 20px;
    border-radius: 10px;
    font-weight: 700;
    font-size: 0.9rem;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.2s;
}

.es-featured-btn:hover {
    background: #ffed4a;
    transform: scale(1.05);
}

.es-library-section-title {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--ink-soft);
    margin-bottom: 12px;
    padding-left: 4px;
}

/* Related Resources */
.es-related-resources {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.es-resource-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: var(--parchment);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s;
}

.es-resource-item:hover {
    background: var(--parchment-deep);
}

.es-resource-icon {
    font-size: 1.5rem;
}

.es-resource-info h5 {
    margin: 0 0 2px 0;
    font-size: 0.85rem;
    color: var(--ink);
}

.es-resource-info p {
    margin: 0;
    font-size: 0.75rem;
    color: var(--ink-soft);
}

/* Responsive */
@media (max-width: 768px) {
    .lts-study-container {
        border-radius: 16px;
        margin: 10px;
    }
    
    .lts-study-header {
        padding: 24px;
    }
    
    .lts-title {
        font-size: 1.8rem;
    }
    
    .lts-part {
        padding: 20px;
    }
    
    .lts-part-nav {
        padding: 8px 12px;
    }
    
    .lts-part-btn {
        min-width: 60px;
        padding: 8px 12px;
    }
    
    .lts-symptoms-grid {
        grid-template-columns: 1fr;
    }
    
    .lts-nav-footer {
        flex-direction: column;
        gap: 12px;
    }
    
    .lts-prev-btn,
    .lts-next-btn,
    .lts-complete-btn {
        width: 100%;
        text-align: center;
    }
    
    .es-featured-study {
        flex-direction: column;
        text-align: center;
    }
    
    .es-featured-meta {
        justify-content: center;
    }
    
    .es-related-resources {
        grid-template-columns: 1fr;
    }
}

/* Dark Theme */
body.dark-theme .lts-study-container {
    background: var(--surface);
}

body.dark-theme .lts-part-header h2,

.lts-study-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(8px);
    z-index: 10001;
    display: none;
    overflow-y: auto;
    padding: 20px;
}

.lts-study-overlay.active {
    display: block;
}

.lts-study-container {
    max-width: 800px;
    margin: 0 auto;
    background: var(--white);
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 25px 80px rgba(0, 0, 0, 0.5);
    animation: ltsSlideIn 0.4s ease;
}

@keyframes ltsSlideIn {
    from {
        opacity: 0;
        transform: translateY(40px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Study Header */
.lts-study-header {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
    padding: 32px;
    position: relative;
    text-align: center;
}

.lts-header-content {
    position: relative;
    z-index: 1;
}

.lts-badge {
    display: inline-block;
    background: rgba(255, 215, 0, 0.2);
    color: #ffd700;
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.5px;
    margin-bottom: 12px;
    border: 1px solid rgba(255, 215, 0, 0.3);
}

.lts-title {
    font-family: var(--font-display);
    font-size: 2.5rem;
    color: white;
    margin: 0 0 8px 0;
    text-shadow: 0 2px 20px rgba(0, 0, 0, 0.3);
}

.lts-subtitle {
    color: rgba(255, 255, 255, 0.7);
    font-size: 1rem;
    margin: 0;
}

.lts-close-btn {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.1);
    color: white;
    font-size: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.lts-close-btn:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: scale(1.1);
}

/* Part Navigation */
.lts-part-nav {
    display: flex;
    background: var(--parchment);
    padding: 12px 16px;
    gap: 8px;
    overflow-x: auto;
    border-bottom: 1px solid var(--parchment-dark);
}

.lts-part-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 10px 16px;
    border: none;
    border-radius: 12px;
    background: transparent;
    cursor: pointer;
    transition: all 0.2s;
    min-width: 70px;
}

.lts-part-btn:hover {
    background: var(--white);
}

.lts-part-btn.active {
    background: var(--thread);
    box-shadow: 0 4px 12px rgba(196, 136, 28, 0.3);
}

.lts-part-btn.active .lts-part-label {
    color: white;
}

.lts-part-icon {
    font-size: 1.3rem;
}

.lts-part-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--ink-soft);
}

/* Study Content */
.lts-study-content {
    padding: 0;
}

.lts-part {
    display: none;
    padding: 32px;
    animation: ltsFadeIn 0.3s ease;
}

.lts-part.active {
    display: block;
}

@keyframes ltsFadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Part Header */
.lts-part-header {
    margin-bottom: 32px;
    padding-bottom: 20px;
    border-bottom: 2px solid var(--parchment-dark);
}

.lts-part-number {
    display: inline-block;
    background: var(--thread);
    color: white;
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 8px;
}

.lts-part-header h2 {
    font-family: var(--font-display);
    font-size: 1.8rem;
    color: var(--ink);
    margin: 0;
}

/* Section Styling */
.lts-section {
    margin-bottom: 32px;
}

.lts-section h3 {
    font-family: var(--font-display);
    font-size: 1.3rem;
    color: var(--ink);
    margin: 0 0 16px 0;
    padding-left: 12px;
    border-left: 4px solid var(--thread);
}

.lts-section p {
    font-size: 1.05rem;
    line-height: 1.8;
    color: var(--ink-soft);
    margin: 0 0 16px 0;
}

.lts-section p:last-child {
    margin-bottom: 0;
}

/* Typography Enhancements */
.lts-lead {
    font-size: 1.15rem !important;
    color: var(--ink) !important;
}

.lts-opening {
    background: linear-gradient(135deg, var(--parchment) 0%, var(--parchment-deep) 100%);
    padding: 32px;
    border-radius: 16px;
    margin-bottom: 24px;
}

.lts-opening p {
    color: var(--ink);
}

.lts-highlight {
    background: linear-gradient(135deg, rgba(196, 136, 28, 0.1) 0%, rgba(196, 136, 28, 0.05) 100%);
    padding: 16px 20px;
    border-radius: 12px;
    border-left: 4px solid var(--thread);
    margin: 20px 0;
}

.lts-emphasis {
    font-size: 1.1rem !important;
    color: var(--ink) !important;
    text-align: center;
    padding: 16px;
}

/* Key Truth Box */
.lts-key-truth {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    background: linear-gradient(135deg, #fef3c7 0%, #fef9e7 100%);
    padding: 20px 24px;
    border-radius: 16px;
    margin: 24px 0;
    border: 1px solid #fcd34d;
}

.lts-key-truth.finished {
    background: linear-gradient(135deg, #dcfce7 0%, #f0fdf4 100%);
    border-color: #86efac;
}

.lts-key-truth.identity {
    background: linear-gradient(135deg, #e0e7ff 0%, #eef2ff 100%);
    border-color: #a5b4fc;
}

.lts-key-truth.ambassador {
    background: linear-gradient(135deg, #dbeafe 0%, #eff6ff 100%);
    border-color: #93c5fd;
}

.lts-key-icon {
    font-size: 1.8rem;
    flex-shrink: 0;
}

.lts-key-truth p {
    margin: 0;
    font-size: 1.1rem;
    color: var(--ink);
    line-height: 1.6;
}

/* Lists */
.lts-lie-list {
    list-style: none;
    padding: 0;
    margin: 16px 0;
}

.lts-lie-list li {
    padding: 10px 16px;
    background: rgba(239, 68, 68, 0.08);
    border-left: 3px solid #ef4444;
    margin-bottom: 8px;
    border-radius: 0 8px 8px 0;
    color: var(--ink);
}

.lts-old-identity {
    list-style: none;
    padding: 0;
    margin: 16px 0;
}

.lts-old-identity li {
    padding: 8px 16px;
    background: var(--parchment);
    margin-bottom: 6px;
    border-radius: 8px;
    color: var(--ink-soft);
    text-decoration: line-through;
    opacity: 0.7;
}

/* Symptoms Grid */
.lts-symptoms-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin: 24px 0;
}

.lts-symptom {
    background: var(--parchment);
    padding: 20px;
    border-radius: 12px;
    text-align: center;
}

.lts-symptom-icon {
    font-size: 2rem;
    display: block;
    margin-bottom: 8px;
}

.lts-symptom h4 {
    margin: 0 0 8px 0;
    font-size: 1rem;
    color: var(--ink);
}

.lts-symptom p {
    margin: 0;
    font-size: 0.9rem;
    color: var(--ink-soft);
    line-height: 1.5;
}

/* Cross Moment */
.lts-cross-moment {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    padding: 28px;
    border-radius: 16px;
    margin: 24px 0;
}

.lts-cross-moment p {
    color: rgba(255, 255, 255, 0.9) !important;
    text-align: center;
}

/* Reflection Box */
.lts-reflection-box {
    background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
    border-radius: 16px;
    padding: 24px;
    margin: 32px 0;
    border: 1px solid #7dd3fc;
}

.lts-reflection-header {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 700;
    font-size: 1.1rem;
    color: #0369a1;
    margin-bottom: 16px;
}

.lts-reflection-questions {
    list-style: none;
    padding: 0;
    margin: 0;
}

.lts-reflection-questions li {
    padding: 12px 0;
    border-bottom: 1px solid rgba(125, 211, 252, 0.3);
    color: var(--ink);
    font-size: 1rem;
    line-height: 1.6;
}

.lts-reflection-questions li:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

/* Prayer Box */
.lts-prayer-box {
    background: linear-gradient(135deg, #faf5ff 0%, #f3e8ff 100%);
    border-radius: 16px;
    padding: 24px;
    margin: 32px 0;
    border: 1px solid #d8b4fe;
}

.lts-prayer-box.final {
    background: linear-gradient(135deg, #fef3c7 0%, #fef9e7 100%);
    border-color: #fcd34d;
}

.lts-prayer-header {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 700;
    font-size: 1.1rem;
    color: #7c3aed;
    margin-bottom: 12px;
}

.lts-prayer-box.final .lts-prayer-header {
    color: #b45309;
}

.lts-prayer-text {
    margin: 0;
    font-size: 1.05rem;
    line-height: 1.8;
    color: var(--ink);
}

/* Closing Section */
.lts-closing {
    background: linear-gradient(135deg, var(--parchment) 0%, var(--parchment-deep) 100%);
    padding: 32px;
    border-radius: 16px;
    margin-top: 40px;
    text-align: center;
}

.lts-closing h3 {
    border: none;
    padding: 0;
    text-align: center;
    margin-bottom: 20px;
}

.lts-closing p {
    text-align: center;
}

.lts-final-truth {
    background: var(--white);
    padding: 24px;
    border-radius: 12px;
    margin: 24px 0;
    border: 2px solid var(--thread);
}

.lts-final-truth p {
    margin: 8px 0;
    font-size: 1.15rem;
    color: var(--ink);
}

.lts-final-verse {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    padding: 24px;
    border-radius: 12px;
    margin-top: 24px;
}

.lts-final-verse p {
    font-family: var(--font-display);
    font-size: 1.2rem;
    font-style: italic;
    color: white !important;
    margin: 0 0 8px 0;
}

.lts-final-verse span {
    color: #ffd700;
    font-size: 0.95rem;
}

/* Navigation Footer */
.lts-nav-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 32px;
    margin-top: 32px;
    border-top: 1px solid var(--parchment-dark);
}

.lts-nav-footer.final {
    justify-content: space-between;
}

.lts-prev-btn,
.lts-next-btn {
    padding: 12px 24px;
    border-radius: 10px;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.lts-prev-btn {
    background: var(--parchment);
    border: 1px solid var(--parchment-dark);
    color: var(--ink-soft);
}

.lts-prev-btn:hover {
    background: var(--parchment-deep);
}

.lts-next-btn {
    background: var(--thread);
    border: none;
    color: white;
}

.lts-next-btn:hover {
    background: var(--thread-hover);
    transform: translateX(4px);
}

.lts-complete-btn {
    padding: 14px 32px;
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    border: none;
    border-radius: 10px;
    color: white;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
}

.lts-complete-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}

/* ═══════════════════════════════════════════════════════════════ */
/* HOUSEHOLD SYNC WIDGETS - Added February 2026                    */
/* ═══════════════════════════════════════════════════════════════ */

.household-calendar-widget,
.household-formation-widget,
.household-tasks-widget,
.household-summary-widget {
    background: var(--parchment);
    border-radius: 12px;
    padding: var(--spacing-lg);
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    margin-bottom: var(--spacing-md);
}

.widget-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-md);
    padding-bottom: var(--spacing-sm);
    border-bottom: 1px solid var(--parchment-dark);
}

.widget-header h3 {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--ink);
}

.widget-badge {
    background: var(--thread-faint);
    color: var(--thread);
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
}

/* Calendar Events */
.calendar-events {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.calendar-event-item {
    display: flex;
    gap: var(--spacing-md);
    padding: var(--spacing-sm);
    border-radius: 8px;
    transition: background 0.2s;
}

.calendar-event-item:hover {
    background: var(--parchment-aged);
}

.event-date {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: var(--thread-faint);
    border-radius: 8px;
    padding: 8px 12px;
    min-width: 60px;
}

.event-date-day {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--thread);
    line-height: 1;
}

.event-date-month {
    font-size: 0.75rem;
    color: var(--thread);
    text-transform: uppercase;
}

.event-details {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.event-title {
    font-weight: 600;
    color: var(--ink);
}

.event-meta {
    display: flex;
    gap: var(--spacing-sm);
    font-size: 0.875rem;
    color: var(--ink-soft);
}

.event-time,
.event-member {
    display: inline-flex;
    align-items: center;
}

/* Formation Progress */
.formation-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-lg);
}

.summary-stat {
    text-align: center;
    padding: var(--spacing-sm);
    background: var(--parchment-aged);
    border-radius: 8px;
}

.stat-value {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--thread);
}

.stat-label {
    font-size: 0.875rem;
    color: var(--ink-soft);
}

.formation-members {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.formation-member-card {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-sm);
    background: var(--parchment-aged);
    border-radius: 8px;
    transition: transform 0.2s;
}

.formation-member-card:hover {
    transform: translateX(4px);
}

.member-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--thread-faint);
    color: var(--thread);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.125rem;
}

.member-info {
    flex: 1;
}

.member-name {
    font-weight: 600;
    color: var(--ink);
}

.member-stage {
    font-size: 0.875rem;
    color: var(--ink-soft);
}

.member-progress {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    min-width: 120px;
}

.progress-bar {
    flex: 1;
    height: 8px;
    background: var(--parchment-dark);
    border-radius: 4px;
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    border-radius: 4px;
    transition: width 0.3s ease;
}

.progress-label {
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--ink-soft);
    min-width: 40px;
    text-align: right;
}

/* Tasks */
.task-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.task-item {
    display: flex;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm);
    background: var(--parchment-aged);
    border-radius: 8px;
    transition: background 0.2s;
}

.task-item:hover {
    background: var(--parchment-deep);
}

.task-checkbox input[type="checkbox"] {
    width: 20px;
    height: 20px;
    cursor: pointer;
}

.task-content {
    flex: 1;
}

.task-title {
    font-weight: 500;
    color: var(--ink);
    margin-bottom: 4px;
}

.task-meta {
    display: flex;
    gap: var(--spacing-sm);
    font-size: 0.875rem;
    color: var(--ink-soft);
    flex-wrap: wrap;
}

.task-priority {
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
}

.task-priority.high {
    background: rgba(239, 83, 80, 0.2);
    color: #EF5350;
}

.task-priority.medium {
    background: rgba(255, 167, 38, 0.2);
    color: #FFA726;
}

.task-priority.low {
    background: rgba(76, 175, 80, 0.2);
    color: #4CAF50;
}

/* Summary Grid */
.household-summary-widget {
    padding: 0;
    background: transparent;
    box-shadow: none;
}

.summary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--spacing-md);
}

.summary-card {
    background: var(--parchment);
    border-radius: 12px;
    padding: var(--spacing-lg);
    text-align: center;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    transition: transform 0.2s;
}

.summary-card:hover {
    transform: translateY(-4px);
}

.summary-icon {
    font-size: 2rem;
    margin-bottom: var(--spacing-sm);
}

.summary-value {
    font-size: 2rem;
    font-weight: 700;
    color: var(--thread);
    margin-bottom: 4px;
}

.summary-label {
    font-size: 0.875rem;
    color: var(--ink-soft);
}

/* Empty States */
.empty-state {
    text-align: center;
    padding: var(--spacing-xl) var(--spacing-md);
    color: var(--ink-soft);
}

.empty-icon {
    font-size: 3rem;
    display: block;
    margin-bottom: var(--spacing-sm);
    opacity: 0.5;
}

.permission-notice,
.error-message {
    text-align: center;
    padding: var(--spacing-lg);
    background: var(--parchment-aged);
    border-radius: 8px;
    color: var(--ink-soft);
}

.notice-icon {
    font-size: 2rem;
    display: block;
    margin-bottom: var(--spacing-sm);
}

/* Responsive */
@media (max-width: 768px) {
    .formation-summary {
        grid-template-columns: repeat(2, 1fr);
    }

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

    .member-progress {
        flex-direction: column;
        align-items: stretch;
        min-width: auto;
    }

    .progress-label {
        text-align: center;
    }
}