/* Basic Reset */
        * { margin: 0; padding: 0; box-sizing: border-box; }
        html { height: 100%; }
        body {
            font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
            background-color: #FFFFFF;
            color: #111;
            height: 100%;
            position: relative;
            overflow-x: hidden;
        }
        h1, h2, h3, h4, h5, h6 { font-weight: 700; color: #000000; }
        
        /* Background Blur Element */
        .background-blur {
            position: absolute; top: 0; left: 0; width: 100%; height: 100%;
            overflow: hidden; z-index: -1; display: flex; align-items: center; justify-content: center;
        }
        .background-blur::before {
            content: ""; position: absolute; width: 70vw; max-width: 1000px; height: 50vh; max-height: 800px;
            background: linear-gradient(90deg, rgba(248,113,179,1) 0%, rgba(167,139,250,1) 50%, rgba(113,240,255,1) 100%);
            filter: blur(140px); opacity: 0.3; animation: spin 20s linear infinite;
        }
        @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

        /* Container */
        .container {
            min-height: 100%; display: flex; flex-direction: column;
            align-items: center; justify-content: center; padding: 16px;
            position: relative; z-index: 1;
        }

        .page-step { width: 100%; display: none; }
        #step-1-landing.active { display: block; }
        
        /* Landing Page */
        #step-1-landing { max-width: 600px; }
        .landing-card { padding: 32px; text-align: center; }
        .landing-card h1 { font-size: 3.25rem; line-height: 1.2; margin-bottom: 16px; }
        .landing-card p { font-size: 1.125rem; color: #555; margin-bottom: 32px; }
        .form-group { margin-bottom: 16px; text-align: left; }
        .form-group label { display: block; font-size: 14px; font-weight: 500; color: #333; margin-bottom: 6px; }
        .form-group input {
            width: 100%; padding: 12px; font-size: 16px; background-color: #FFFFFF;
            border: 1px solid #DDDDDD; border-radius: 8px; color: #111;
        }
        .form-group input:focus { outline: none; border-color: #A78BFA; box-shadow: 0 0 0 3px rgba(167, 139, 250, 0.3); }

        .btn {
            width: 100%; padding: 12px 16px; font-size: 16px; font-weight: 600;
            border: none; border-radius: 8px; cursor: pointer; transition: all 0.3s ease;
        }
        .btn-primary {
            color: #ffffff; background: linear-gradient(to right, #F871B3, #A78BFA);
            background-size: 150% auto;
        }
        .btn-primary:hover { background-position: right center; box-shadow: 0 4px 15px rgba(167, 139, 250, 0.4); }

        /* App Shell */
        #step-2-app {
            max-width: 400px; height: 740px; background-color: #F9F9F9;
            border: 1px solid #DDDDDD; border-radius: 20px;
            box-shadow: 0 10px 50px rgba(0, 0, 0, 0.1);
            flex-direction: column; overflow: hidden;
            height: 95vh;
        }
        #step-2-app.active { display: flex; }

        .app-header { padding: 16px; border-bottom: 1px solid #EEEEEE; background-color: #FFFFFF; }
        .app-header h1 { font-size: 20px; text-align: center; color: #111; }
        .app-main { flex-grow: 1; overflow-y: auto; background-color: #F0F2F5; padding: 24px; }
        
        .app-panel { display: none; }
        .app-panel.active { display: block; animation: fadeIn 0.3s ease-in-out; }
        @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

        /* Post Creator Panel */
        #post-preview { display: none; }
        #post-creator h2 { font-size: 20px; margin-bottom: 16px; text-align: center; }
        .btn-secondary { background-color: #333; color: #E0E0E0; }
        .btn-secondary:hover { background-color: #444; }
        .divider { display: flex; align-items: center; text-align: center; color: #777; margin: 20px 0; }
        .divider::before, .divider::after { content: ''; flex: 1; border-bottom: 1px solid #DDDDDD; }
        textarea {
            width: 100%; padding: 10px; font-size: 16px; font-family: inherit;
            border: 1px solid #DDDDDD; border-radius: 8px; min-height: 100px; margin-bottom: 8px;
        }

        .post-card { background: #FFFFFF; border: 1px solid #EEEEEE; border-radius: 12px; overflow: hidden; margin-top: 16px; }
        .post-card h2 { padding: 16px 16px 0 16px; font-size: 18px; }
        .post-card img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; background: #EEEEEE; }
        .post-card-content { padding: 16px; }
        .post-card p { font-size: 16px; color: #333; margin-bottom: 16px; }
        
        .btn-link {
            background: none; border: none; color: #6A11CB; text-decoration: none;
            font-weight: 500; cursor: pointer; padding: 8px 0; width: 100%; margin-top: 8px;
        }

        /* Answers Panel */
        .qa-card { background: #FFFFFF; border: 1px solid #EEEEEE; border-radius: 12px; padding: 16px; margin-bottom: 16px; }
        .qa-question { font-style: italic; color: #333; padding-left: 8px; border-left: 3px solid #CCCCCC; }
        .qa-answer { background: #F4F8FF; border: 1px solid #DDEBFF; border-radius: 8px; padding: 12px; }
        .qa-actions { margin-top: 12px; display: flex; gap: 8px; }
        .btn-small { padding: 6px 12px; font-size: 14px; width: auto; border-radius: 6px; }
        .btn-outline { background: transparent; color: #333; border: 1px solid #CCCCCC; }

        /* Navigation */
        .app-nav {
            border-top: 1px solid #DDDDDD; background-color: #FFFFFF; height: 64px;
            display: flex; justify-content: space-around; align-items: center;
        }
        .nav-btn {
            flex: 1; display: flex; flex-direction: column; align-items: center;
            justify-content: center; background: none; border: none; cursor: pointer; color: #777;
        }
        .nav-btn.active { color: #6A11CB; }
        .nav-icon { position: relative; }
        .nav-notification {
            position: absolute; top: -2px; right: -6px; width: 12px; height: 12px;
            background-color: #D93025; border: 2px solid #FFFFFF; border-radius: 50%;
        }

        /* --- NEW: Modal for Page Selection --- */
        #page-select-modal {
            display: none; position: absolute; top: 0; left: 0; width: 100%; height: 100%;
            background: rgba(0,0,0,0.5); z-index: 100; align-items: center; justify-content: center;
        }
        .modal-content {
            background: white; padding: 20px; border-radius: 12px; width: 90%; max-width: 350px; text-align: center;
        }
        .modal-content h3 { font-size: 18px; margin-bottom: 8px; }
        .modal-content select {
            width: 100%; padding: 10px; margin: 15px 0; border: 1px solid #ddd; border-radius: 8px; font-size: 16px;
        }
        .btn-cancel { background: #eee; color: #333; margin-top: 10px; }

       

/* Force the Main area to grow and fill empty space */
.app-main {
    flex: 1;
    overflow-y: auto;        /* Scroll ONLY this area */
    min-height: 0;           /* Crucial for nested flex scrolling */
    padding: 16px;
    position: relative;
}

/* Prevent the header and nav from shrinking */
.app-header, .app-nav {
    flex-shrink: 0;
}