/* --- Design System & Reset --- */
        :root {
            /* Color Palette - Slate Scale (Refined for Higher Contrast) */
            --slate-50: #f8fafc;
            --slate-100: #f1f5f9;
            --slate-200: #e2e8f0;
            --slate-300: #cbd5e1;
            --slate-400: #94a3b8;
            --slate-500: #64748b;
            --slate-600: #475569;
            --slate-700: #334155;
            --slate-800: #1e293b;
            --slate-900: #0f172a;
            --slate-950: #020617;

            /* Accent Colors (Refined Indigo - Slightly Softened) */
            --accent-primary: #4f46e5;
            --accent-hover: #4338ca;
            --accent-surface: #eff6ff;
            --accent-ring: rgba(79, 70, 229, 0.25);
            
            /* Semantic Variables (Light Mode) */
            --bg-body: #ffffff;
            --bg-surface: #ffffff;
            --bg-surface-alt: #fafafa;
            --bg-surface-elevated: #ffffff;
            
            --text-main: var(--slate-900);
            --text-body: var(--slate-600);
            --text-muted: var(--slate-500);
            
            --border-subtle: var(--slate-200);
            --border-hover: var(--slate-300);
            --border-focus: var(--accent-primary);
            
            /* Premium Shadows (Refined for depth) */
            --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.04);
            --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.06), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
            --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.06), 0 4px 6px -2px rgba(0, 0, 0, 0.03);
            --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.06), 0 10px 10px -5px rgba(0, 0, 0, 0.02);
            --shadow-button: 0 4px 14px 0 rgba(79, 70, 229, 0.25);
            
            /* Radius & Spacing */
            --radius-sm: 6px;
            --radius-md: 10px;
            --radius-lg: 16px;
            --radius-xl: 24px;
            
            --container-width: 1200px;
            --header-height: 80px;
            
            /* Fonts & Animations */
            --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
            --ease-smooth: cubic-bezier(0.2, 0.0, 0, 1.0);
            --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
        }

        /* Dark Mode Overrides */
        [data-theme="dark"] {
            --bg-body: #0b0f19;
            --bg-surface: #111827;
            --bg-surface-alt: #161e2e;
            --bg-surface-elevated: #1f2937;
            
            --text-main: #f3f4f6;
            --text-body: #cbd5e1;
            --text-muted: #94a3b8;
            
            --border-subtle: #2d3748;
            --border-hover: #4b5563;
            
            --accent-primary: #6366f1;
            --accent-hover: #818cf8;
            --accent-surface: rgba(99, 102, 241, 0.1);
            
            --shadow-sm: 0 1px 2px rgba(0,0,0,0.5);
            --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.5);
            --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.5);
            --shadow-button: none;
        }

        /* Base Reset & Core Styles */
        *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

        html { 
            scroll-behavior: smooth; 
            -webkit-text-size-adjust: 100%;
        }

        body {
            font-family: var(--font-sans);
            background-color: var(--bg-body);
            color: var(--text-body);
            line-height: 1.75;
            transition: background-color 0.4s var(--ease-smooth), color 0.4s var(--ease-smooth);
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }

        button { font: inherit; cursor: pointer; border: none; background: none; }
        img { max-width: 100%; height: auto; display: block; }
        a { text-decoration: none; color: inherit; transition: color 0.2s; }
        ul { list-style: none; }
        i.ph { vertical-align: middle; font-size: 1.2em; }


        /* Utilities */
        .container {
            max-width: var(--container-width);
            margin: 0 auto;
            padding: 0 32px;
        }
        
        @media (max-width: 640px) {
            .container { padding: 0 24px; }
        }

        .grid-3 {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
            gap: 40px;
        }

        /* Typography Scale */
        h1, h2, h3, h4 {
            font-weight: 700;
            line-height: 1.2;
            letter-spacing: -0.025em;
            color: var(--text-main);
            margin-bottom: 1rem;
        }

        h1 { font-size: clamp(2.5rem, 5vw, 4rem); letter-spacing: -0.035em; }
        h2 { font-size: clamp(2rem, 3.5vw, 2.5rem); letter-spacing: -0.03em; margin-bottom: 1.5rem; }
        h3 { font-size: 1.25rem; line-height: 1.4; margin-bottom: 0.75rem; }
        p { 
            color: var(--text-body); 
            margin-bottom: 1.5rem; 
            font-size: 1.05rem; 
        }

        /* --- Buttons --- */
        .btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 14px 28px;
            border-radius: var(--radius-md);
            font-size: 1rem;
            transition: all 0.2s var(--ease-smooth);
            gap: 10px;
            white-space: nowrap;
            position: relative;
            overflow: hidden;
        }

        .btn:focus-visible {
            outline: none;
            box-shadow: 0 0 0 3px var(--accent-ring);
        }

        .btn-primary {
            background-color: var(--text-main);
            color: var(--bg-body);
            font-weight: 700;
            box-shadow: var(--shadow-md);
            border: 1px solid transparent;
        }

        .btn-primary:hover {
            transform: translateY(-2px);
            box-shadow: var(--shadow-lg);
            background-color: var(--accent-hover);
            color: white;
        }

        .btn-secondary {
            background-color: transparent;
            border: 1px solid var(--border-subtle);
            color: var(--text-body);
            font-weight: 500;
        }

        .btn-secondary:hover {
            border-color: var(--text-main);
            background-color: var(--bg-surface-alt);
            color: var(--text-main);
            transform: translateY(-1px);
        }

        .btn-lg { padding: 18px 36px; font-size: 1.125rem; }
        .btn-sm { padding: 10px 20px; font-size: 0.925rem; }
        .btn-full { width: 100%; }

        /* --- Navigation --- */
        .navbar {
            position: sticky;
            top: 0;
            z-index: 1000;
            background-color: rgba(255, 255, 255, 0.9);
            backdrop-filter: blur(16px);
            -webkit-backdrop-filter: blur(16px);
            border-bottom: 1px solid rgba(0,0,0,0.04);
            height: var(--header-height);
            display: flex;
            align-items: center;
            transition: background-color 0.4s, border-color 0.4s;
        }

        [data-theme="dark"] .navbar { 
            background-color: rgba(11, 15, 25, 0.85); 
            border-bottom: 1px solid rgba(255,255,255,0.05);
        }

        .nav-inner {
            width: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .logo {
            display: flex;
            align-items: center;
            gap: 12px;
            font-weight: 800;
            font-size: 1.35rem;
            letter-spacing: -0.03em;
            color: var(--text-main);
        }
        .logo svg { width: 30px; height: 30px; fill: var(--text-main); }
        .logo i.ph { font-size: 1.6rem; color: var(--text-main); }

        .nav-links { display: none; gap: 40px; }
        .nav-links a { 
            font-weight: 500; 
            font-size: 0.95rem; 
            color: var(--text-muted); 
            transition: color 0.2s; 
            position: relative;
        }
        .nav-links a:hover { color: var(--text-main); }

        .nav-actions { display: flex; align-items: center; gap: 20px; }

        @media (min-width: 860px) {
            .nav-links { display: flex; }
            .nav-cta { display: inline-flex; }
        }

        /* Theme Toggle */
        .theme-toggle {
            color: var(--text-muted);
            padding: 10px;
            border-radius: 50%;
            transition: all 0.2s;
            background-color: transparent;
        }
        .theme-toggle:hover { color: var(--text-main); background-color: var(--bg-surface-alt); }
        .theme-toggle:focus-visible { box-shadow: 0 0 0 2px var(--accent-ring); }
        .theme-toggle svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

        [data-theme="light"] .moon-icon { display: block; }
        [data-theme="light"] .sun-icon { display: none; }
        [data-theme="dark"] .moon-icon { display: none; }
        [data-theme="dark"] .sun-icon { display: block; }

        /* --- Hero Section --- */
        .hero-section {
            padding: 120px 0 120px;
            position: relative;
            overflow: hidden;
            text-align: center;
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .hero-bg {
            position: absolute;
            top: 0; left: 0; width: 100%; height: 100%;
            background-image: radial-gradient(circle at 50% 0%, var(--accent-surface) 0%, transparent 60%);
            opacity: 0.8;
            z-index: -1;
            pointer-events: none;
        }

        .hero-content {
            position: relative;
            z-index: 10;
            max-width: 800px;
            margin: 0 auto;
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .badge {
            background-color: var(--bg-surface);
            border: 1px solid var(--border-subtle);
            padding: 6px 16px;
            border-radius: 100px;
            font-size: 0.875rem;
            font-weight: 600;
            margin-bottom: 32px;
            color: var(--text-body);
            box-shadow: var(--shadow-sm);
            display: inline-block;
            letter-spacing: 0.02em;
        }

        .hero-sub {
            font-size: 1.25rem;
            line-height: 1.6;
            margin: 24px 0 48px;
            max-width: 640px;
            color: var(--text-body);
            font-weight: 400;
        }

        .hero-actions {
            display: flex;
            gap: 20px;
            flex-wrap: wrap;
            justify-content: center;
            margin-bottom: 80px;
        }

        /* Animations */
        .fade-in-up {
            animation: fadeInUp 0.8s var(--ease-smooth) forwards;
            opacity: 0;
            transform: translateY(20px);
        }
        .delay-1 { animation-delay: 0.1s; }
        .delay-2 { animation-delay: 0.2s; }
        .delay-3 { animation-delay: 0.3s; }
        .delay-4 { animation-delay: 0.4s; }

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

        .trust-indicators {
            display: flex;
            gap: 48px;
            justify-content: center;
            flex-wrap: wrap;
            padding-top: 40px;
            border-top: 1px solid var(--border-subtle);
            width: 100%;
        }

        .trust-item {
            display: flex;
            align-items: center;
            gap: 10px;
            font-size: 0.95rem;
            font-weight: 500;
            color: var(--text-muted);
        }
        .trust-item svg { width: 20px; height: 20px; stroke: var(--accent-primary); fill: none; stroke-width: 2; opacity: 0.9; }

        /* --- Sections & Cards --- */
        .section { padding: 120px 0; }
        
        .section-alt { 
            background: linear-gradient(to bottom, var(--bg-surface-alt), var(--bg-body));
        }

        .section-header {
            text-align: center;
            max-width: 640px;
            margin: 0 auto 80px;
        }
        .section-header h2 { margin-bottom: 24px; }
        .section-header p { font-size: 1.25rem; color: var(--text-body); font-weight: 300; }

        /* Card Commons */
        .book-card, .feature-card, .review-card, .capture-card {
            background-color: var(--bg-surface);
            border: 1px solid var(--border-subtle);
            border-radius: var(--radius-lg);
            transition: all 0.3s var(--ease-smooth);
            position: relative;
            overflow: hidden;
        }

        /* Feature Cards */
        .feature-card { padding: 40px 32px; }
        .feature-card:hover { transform: translateY(-4px); border-color: var(--border-hover); box-shadow: var(--shadow-lg); }
        .feature-icon {
            width: 56px; height: 56px;
            background-color: var(--bg-surface-alt);
            border-radius: var(--radius-md);
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 24px;
            color: var(--accent-primary);
        }
        .feature-icon svg { width: 28px; height: 28px; stroke: currentColor; fill: none; stroke-width: 2; }

        /* Book Cards */
        .book-card { display: flex; flex-direction: column; height: 100%; }
        .book-card:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent-ring); }
        .book-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-xl); border-color: var(--border-hover); }

        .book-cover-container {
            height: 320px;
            background-color: var(--bg-surface-alt);
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            overflow: hidden;
            padding: 40px;
        }
        .book-cover-img { 
            height: 100%; 
            width: auto; 
            object-fit: contain; 
            transition: transform 0.5s var(--ease-smooth); 
            box-shadow: 0 12px 30px rgba(0,0,0,0.08);
            border-radius: 4px;
        }
        .book-card:hover .book-cover-img { transform: scale(1.05) translateY(-8px); }

        .book-info { padding: 32px; flex-grow: 1; display: flex; flex-direction: column; }
        .book-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 16px; }
        .book-header h3 { font-size: 1.5rem; margin-right: 16px; margin-bottom: 0; }
        .book-price { font-weight: 700; color: var(--accent-primary); font-size: 1.15rem; background: var(--accent-surface); padding: 4px 12px; border-radius: 100px; }
        .book-price-row{display:inline-flex;align-items:center;gap:10px;flex-wrap:nowrap;white-space:nowrap;}
        .book-free{display:inline-flex;align-items:center;gap:6px;font-size:0.85rem;font-weight:600;color:var(--text-muted);background:var(--bg-surface-alt);padding:4px 10px;border-radius:999px;border:1px dashed var(--border-subtle);white-space:nowrap;}
        .book-free svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
        .book-info p { flex-grow: 1; margin-bottom: 24px; color: var(--text-body); line-height: 1.6; }
        .book-actions { display: grid; grid-template-columns: 1fr 1.5fr; gap: 16px; margin-top: auto; }

        /* --- Social Proof --- */
        .testimonial-grid { gap: 32px; }
        .review-card { padding: 40px 32px; display: flex; flex-direction: column; height: 100%; }
        .stars { color: #f59e0b; margin-bottom: 20px; display: flex; gap: 4px; opacity: 0.9; }
        .review-body { font-style: italic; margin-bottom: 24px; font-size: 1.1rem; color: var(--text-main); flex-grow: 1; line-height: 1.8; }
        .review-meta { 
            font-size: 0.95rem; 
            padding-top: 24px; 
            border-top: 1px solid var(--border-subtle); 
            color: var(--text-muted);
        }
        .review-author { font-weight: 700; color: var(--text-main); }

        .stats-row {
            display: flex;
            justify-content: center;
            align-items: center;
            margin-top: 120px;
            gap: 80px;
            flex-wrap: wrap;
        }
        .stat { text-align: center; }
        .stat-number { display: block; font-size: 3.5rem; font-weight: 800; color: var(--text-main); line-height: 1; margin-bottom: 12px; letter-spacing: -0.05em; }
        .stat-label { font-size: 0.9rem; color: var(--text-muted); font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; }
        .stat-divider { width: 1px; height: 60px; background-color: var(--border-subtle); display: none; }
        @media(min-width: 768px) { .stat-divider { display: block; } }

        /* --- Email Capture --- */
        .email-capture-section { padding: 140px 0; }
        .capture-container { max-width: 800px; }
        .capture-card { padding: 80px 64px; text-align: center; box-shadow: var(--shadow-xl); background: var(--bg-surface-elevated); border: 1px solid var(--border-subtle); }
        .capture-content h2 { margin-bottom: 24px; }
        .capture-content p { max-width: 500px; margin: 0 auto 48px; }

        .email-form { margin-top: 0; display: flex; flex-direction: column; gap: 20px; }
        .form-row { display: grid; grid-template-columns: 1fr; gap: 20px; }
        @media(min-width: 600px) { .form-row { grid-template-columns: 1fr 1fr; } }

        .input-group { position: relative; text-align: left; }
        .form-input {
            width: 100%;
            padding: 18px 24px;
            border: 1px solid var(--border-subtle);
            border-radius: var(--radius-sm);
            background: var(--bg-body);
            color: var(--text-main);
            font-size: 1rem;
            transition: all 0.2s;
            appearance: none;
        }
        .form-input:focus { outline: none; border-color: var(--accent-primary); box-shadow: 0 0 0 4px var(--accent-surface); }
        .form-input:invalid:not(:placeholder-shown) { border-color: #ef4444; }

        .floating-label {
            position: absolute;
            left: 20px;
            top: 50%;
            transform: translateY(-50%);
            color: var(--text-muted);
            transition: all 0.2s var(--ease-smooth);
            pointer-events: none;
            font-size: 1rem;
            background-color: var(--bg-body);
            padding: 0 6px;
        }

        .form-input:focus + .floating-label,
        .form-input:not(:placeholder-shown) + .floating-label {
            top: 0;
            font-size: 0.8rem;
            color: var(--accent-primary);
            font-weight: 600;
        }

        .success-message {
            display: none;
            margin-top: 32px;
            padding: 20px;
            background-color: #ecfdf5;
            color: #065f46;
            border-radius: var(--radius-md);
            border: 1px solid #a7f3d0;
            align-items: center;
            justify-content: center;
            gap: 12px;
            font-weight: 500;
        }
        [data-theme="dark"] .success-message { background-color: rgba(6, 95, 70, 0.2); color: #d1fae5; border-color: #065f46; }

        /* --- FAQ --- */
        .faq-container { max-width: 840px; }
        .faq-list { border-top: 1px solid var(--border-subtle); }
        .faq-item { border-bottom: 1px solid var(--border-subtle); }
        .faq-trigger {
            width: 100%;
            text-align: left;
            padding: 32px 0;
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-weight: 600;
            font-size: 1.15rem;
            color: var(--text-main);
            background: transparent;
            cursor: pointer;
        }
        .faq-trigger:hover { color: var(--accent-primary); }
        .faq-trigger:focus-visible { outline: none; color: var(--accent-primary); }

        .icon-wrapper {
            width: 32px; height: 32px;
            display: flex; align-items: center; justify-content: center;
            border-radius: 50%;
            background-color: var(--bg-surface);
            border: 1px solid var(--border-subtle);
            transition: all 0.3s;
        }
        .chevron { width: 18px; height: 18px; transition: transform 0.3s var(--ease-bounce); fill: none; stroke: currentColor; stroke-width: 2.5; }

        .faq-item[aria-expanded="true"] .icon-wrapper { background-color: var(--accent-primary); border-color: var(--accent-primary); color: white; }
        .faq-item[aria-expanded="true"] .chevron { transform: rotate(180deg); }

        .faq-content {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.4s var(--ease-smooth);
        }
        .faq-inner { padding-bottom: 32px; color: var(--text-body); line-height: 1.8; font-size: 1.05rem; max-width: 90%; }

        /* --- CTA Section --- */
        .cta-section { 
            text-align: center; 
            padding: 160px 0; 
        }
        .cta-content { max-width: 700px; margin: 0 auto; }
        .cta-content h2 { margin-bottom: 24px; }
        .cta-content p { font-size: 1.25rem; margin-bottom: 48px; color: var(--text-body); }

        /* --- Footer --- */
        .footer {
            border-top: 1px solid var(--border-subtle);
            padding: 100px 0 40px;
            font-size: 0.95rem;
            color: var(--text-muted);
            background-color: var(--bg-surface-alt);
        }
        .footer-grid {
            display: grid;
            grid-template-columns: 2fr 1fr 1fr;
            gap: 80px;
            margin-bottom: 80px;
        }
        @media(max-width: 768px) { .footer-grid { grid-template-columns: 1fr; gap: 48px; } }

        .footer-brand p { margin-top: 16px; max-width: 300px; }
        .social-links { display: flex; gap: 20px; margin-top: 32px; }
        .social-links a { 
            width: 40px; height: 40px; 
            border-radius: 50%; 
            background: var(--bg-surface); 
            border: 1px solid var(--border-subtle);
            display: flex; align-items: center; justify-content: center;
            transition: all 0.2s;
            color: var(--text-main);
        }
        .social-links svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; }
        .social-links i.ph { font-size: 20px; line-height: 1; }
        .social-links a:hover { border-color: var(--text-main); transform: translateY(-3px); }

        .footer-nav h4 { color: var(--text-main); margin-bottom: 24px; font-size: 1.1rem; }
        .footer-nav ul li { margin-bottom: 16px; }
        .footer-nav a { color: var(--text-body); }
        .footer-nav a:hover { color: var(--accent-primary); }

        .footer-bottom { 
            border-top: 1px solid var(--border-subtle); 
            padding-top: 40px; 
            text-align: center; 
            font-size: 0.9rem; 
            display: flex; 
            justify-content: space-between;
            flex-wrap: wrap;
            gap: 20px;
        }

        /* --- Modals --- */
        .modal-overlay {
            position: fixed;
            inset: 0;
            background-color: rgba(0, 0, 0, 0.5);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            z-index: 2000;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 24px;
            opacity: 0;
            visibility: hidden;
            transition: all 0.3s var(--ease-smooth);
        }

        .modal-overlay.open { opacity: 1; visibility: visible; }

        .modal {
            background: var(--bg-surface-elevated);
            border-radius: var(--radius-xl);
            box-shadow: var(--shadow-xl);
            width: 100%;
            position: relative;
            transform: translateY(40px) scale(0.96);
            transition: transform 0.4s var(--ease-bounce);
            display: flex;
            flex-direction: column;
            max-height: 90vh;
            border: 1px solid var(--border-subtle);
        }

        .modal-overlay.open .modal { transform: translateY(0) scale(1); }

        .modal-lg { max-width: 1000px; height: auto; overflow: hidden; }
        .modal-sm { max-width: 540px; }

        /* FIXED: Added specific style for .modal-content to ensure it flexes correctly */
        .modal-content {
            display: flex;
            flex-direction: column;
            width: 100%;
            flex: 1;
            min-height: 0;
        }

        /* FIXED: Set explicit height on desktop to allow internal scrolling logic to work */
        @media (min-width: 641px) {
            .modal-lg {
                height: 80vh; 
                max-height: 800px;
            }
        }

        .modal-close {
            position: absolute;
            top: 24px; right: 24px;
            width: 40px; height: 40px;
            border-radius: 50%;
            background: var(--bg-surface-alt);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.5rem;
            color: var(--text-muted);
            transition: all 0.2s;
            z-index: 20;
            border: 1px solid var(--border-subtle);
            line-height: 1;
        }
        .modal-close:hover { background: var(--bg-body); color: var(--text-main); transform: rotate(90deg); }
        .modal-close:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent-ring); }

        .modal-body { padding: 48px; overflow-y: auto; }
        .modal-header { padding: 48px 48px 0; text-align: center; }
        .modal-header h3 { font-size: 1.75rem; margin-bottom: 8px; }
        .modal-header p { font-size: 1.1rem; }

        @media (max-width: 640px) {
            .modal-body { padding: 24px; }
            .modal-header { padding: 32px 24px 0; }
            

        }

        /* Desktop Layout */
        .book-details-layout {
            display: grid;
            grid-template-columns: 360px 1fr;
            height: 100%;
        }
        @media (max-width: 900px) {
            /* DETAILS MODAL: Single scroll container (sidebar + content scroll together) */
            .modal-lg {
                height: 90vh;
                max-height: 90vh;
                overflow: hidden; /* prevent double scroll */
            }

            /* In the Details modal, make the injected modal-content the scroll container */
            #detailsModal .modal-content {
                height: 100%;
                overflow-y: auto;
                -webkit-overflow-scrolling: touch;
            }

            /* Stack sidebar above content */
            #detailsModal .book-details-layout {
                display: flex;
                flex-direction: column;
                height: auto;
                min-height: 0;
            }

            /* Ensure neither child becomes an inner scroll area */
            #detailsModal .details-sidebar {
                position: static;
                height: auto;
                overflow: visible;
                padding: 24px;
                border-right: none;
                border-bottom: 1px solid var(--border-subtle);
            }

            #detailsModal .details-content {
                height: auto;
                max-height: none;
                overflow: visible;
                padding: 24px;
            }
        }
        .details-sidebar {
            background-color: var(--bg-surface-alt);
            padding: 60px 40px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-right: 1px solid var(--border-subtle);
        }
        .details-cover {
            width: 100%;
            max-width: 240px;
            box-shadow: 0 25px 50px -12px rgba(0,0,0,0.2);
            border-radius: 6px;
            transform: rotateY(-5deg);
        }

        .details-content { padding: 60px; overflow-y: auto; }
        .details-meta { 
            display: flex; 
            justify-content: space-between; 
            align-items: flex-start; 
            margin-bottom: 32px; 
            border-bottom: 1px solid var(--border-subtle); 
            padding-bottom: 24px; 
        }
        .details-meta h2 { font-size: 2.25rem; line-height: 1.1; margin-bottom: 0; }
        .details-price { font-size: 1.75rem; font-weight: 800; color: var(--accent-primary); white-space: nowrap; margin-left: 20px; }

        .outcome-list { margin: 40px 0 48px; background: var(--bg-surface-alt); padding: 32px; border-radius: var(--radius-lg); }
        .outcome-item { display: flex; gap: 16px; margin-bottom: 16px; align-items: flex-start; font-weight: 500; }
        .outcome-item:last-child { margin-bottom: 0; }
        .outcome-icon { color: var(--accent-primary); margin-top: 2px; flex-shrink: 0; }
        .outcome-icon svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.5; }

        .access-options { display: flex; flex-direction: column; gap: 20px; margin-top: 32px; }
        .access-card {
            display: flex;
            align-items: center;
            gap: 24px;
            padding: 24px;
            width: 100%;
            text-align: left;
            background: var(--bg-surface);
            border: 2px solid var(--border-subtle);
            border-radius: var(--radius-lg);
            transition: all 0.2s;
            cursor: pointer;
        }
        .access-card:focus-visible { outline: none; border-color: var(--accent-primary); box-shadow: 0 0 0 3px var(--accent-ring); }
        .access-card:hover { border-color: var(--accent-primary); background-color: var(--accent-surface); transform: scale(1.01); }

        .access-icon {
            width: 56px; height: 56px;
            background: var(--bg-surface-alt);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--text-main);
            border: 1px solid var(--border-subtle);
            flex-shrink: 0;
        }
        .access-card:hover .access-icon { background: white; border-color: var(--accent-primary); color: var(--accent-primary); }
        .access-icon svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 2; }

        .access-info { flex-grow: 1; }
        .access-info h4 { font-size: 1.15rem; margin-bottom: 4px; }
        .access-info p { font-size: 0.95rem; color: var(--text-muted); margin: 0; }

        .access-arrow { font-size: 1.75rem; color: var(--border-subtle); transition: transform 0.2s; font-weight: 300; }
        .access-card:hover .access-arrow { color: var(--accent-primary); transform: translateX(6px); }

        @media (prefers-reduced-motion: reduce) {
            *, *::before, *::after { 
                animation-duration: 0.01ms !important; 
                animation-iteration-count: 1 !important; 
                transition-duration: 0.01ms !important; 
                scroll-behavior: auto !important; 
            }
            .fade-in-up { opacity: 1; transform: none; animation: none; }
        }
/* NAVSEARCH_CSS_V1 */
.nav-search{ position: relative; display:flex; align-items:center; }

.nav-icon-btn{
    width: 40px; height: 40px; border-radius: 999px;
    border: 1px solid var(--border-subtle);
    background: var(--bg-surface);
    display:flex; align-items:center; justify-content:center;
    cursor:pointer;
    transition: transform .15s ease, border-color .15s ease, background .15s ease, color .15s ease;
    color: var(--text-muted);
}
.nav-icon-btn:hover{ transform: translateY(-1px); border-color: var(--border-hover); color: var(--text-main); }
.nav-icon-btn:focus-visible{ outline:none; box-shadow: 0 0 0 3px var(--accent-ring); color: var(--text-main); }
.nav-icon-btn i{ font-size: 18px; line-height: 1; color: currentColor; }

.nav-search-panel{
    position:absolute; right:0; top: calc(100% + 10px);
    width: min(520px, calc(100vw - 32px));
    padding: 12px;
    border-radius: 16px;
    border: 1px solid var(--border-subtle);
    background: var(--bg-surface);
    box-shadow: 0 20px 60px rgba(0,0,0,.12);
    opacity: 0;
    transform: translateY(-6px);
    pointer-events: none;
    transition: opacity .18s ease, transform .18s ease;
    z-index: 50;
}
[data-theme="dark"] .nav-search-panel{ box-shadow: 0 20px 60px rgba(0,0,0,.35); }
.nav-search-panel.open{ opacity: 1; transform: translateY(0); pointer-events: auto; }

.nav-search-input{
    display:flex; align-items:center; gap:10px;
    padding: 10px 12px;
    border-radius: 14px;
    border: 1px solid var(--border-subtle);
    background: var(--bg-surface-alt);
}
.nav-search-input i{ font-size: 18px; line-height: 1; color: var(--text-muted); }
.nav-search-input input{
    width: 100%;
    border: 0; outline: none;
    background: transparent;
    color: var(--text-main);
    font-size: 0.98rem;
}
.nav-search-close{
    border:0; background: transparent;
    cursor:pointer;
    width: 34px; height: 34px;
    border-radius: 10px;
    display:flex; align-items:center; justify-content:center;
    color: var(--text-muted);
}
.nav-search-close i{ line-height: 1; }
.nav-search-close:hover{ background: rgba(0,0,0,.05); color: var(--text-main); }
[data-theme="dark"] .nav-search-close:hover{ background: rgba(255,255,255,.06); color: var(--text-main); }

/* Empty state (no results) */
.nav-search-empty{
    display:none;
    margin-top: 10px;
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px dashed var(--border-subtle);
    color: var(--text-muted);
    background: var(--bg-surface-alt);
    font-size: 0.92rem;
}
.nav-search-empty.show{ display:block; }