:root {
    --bg: #f4f7f6; --card: #ffffff; --text: #2c3e50;
    --primary: #1a5276; --gold: #b8860b; --shadow: rgba(0,0,0,0.1);
}
[data-theme="dark"] {
    --bg: #121212; --card: #1e1e1e; --text: #e0e0e0;
    --primary: #3498db; --gold: #f1c40f; --shadow: rgba(0,0,0,0.5);
}

body { font-family: 'Segoe UI', sans-serif; background: var(--bg); color: var(--text); margin: 0; transition: 0.3s; overflow-x: hidden; }

/* Landing Page Style */
#landingPage {
    height: 100vh; display: flex; flex-direction: column;
    justify-content: center; align-items: center;
    text-align: center; background: linear-gradient(135deg, var(--primary), #2c3e50);
    color: white; padding: 20px;
}
.welcome-card { background: rgba(255,255,255,0.1); padding: 40px; border-radius: 20px; backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,0.2); max-width: 500px; }
.btn-enter { background: var(--gold); color: white; border: none; padding: 15px 40px; border-radius: 30px; font-size: 18px; font-weight: bold; cursor: pointer; margin-top: 25px; transition: 0.3s; }
.btn-enter:hover { transform: scale(1.05); background: #966d08; }
.instruction { margin-top: 20px; font-size: 0.85em; opacity: 0.8; line-height: 1.5; }

/* Main App Style (Hidden by default) */
#mainApp { display: none; padding: 20px; animation: fadeIn 0.5s; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* Other pages, hidden by default */
.page-buttons,
#infaqPage,
#otherAppsPage {
    display: none;
}

/* Make bioPage hidden by default, but not page-buttons initially */
#bioPage {
    display: none;
}

.page-buttons {
    padding: 15px; display: flex; gap: 10px; justify-content: center;
    position: sticky; bottom: 0; background: var(--bg);
}

/* Reuse previous styles for App */
.container { max-width: 850px; margin: auto; }
.header { background: var(--card); padding: 20px; border-radius: 15px; text-align: center; box-shadow: 0 4px 15px var(--shadow); margin-bottom: 20px; position: relative; }
#searchInput { width: 85%; padding: 12px; border: 2px solid #ddd; border-radius: 25px; background: var(--card); color: var(--text); outline: none; }
.chapter-card { background: var(--card); padding: 20px; border-radius: 12px; margin-bottom: 12px; cursor: pointer; border-left: 5px solid var(--primary); display: flex; justify-content: space-between; align-items: center; box-shadow: 0 2px 8px var(--shadow); }
.arabic-title { font-family: 'Traditional Arabic', serif; font-size: 24px; direction: rtl; color: var(--primary); }
.theme-toggle { position: absolute; right: 20px; top: 20px; cursor: pointer; font-size: 24px; border: none; background: none; }
.theme-toggle {
    position: absolute;
    right: 20px;
    top: 20px;
    cursor: pointer;
    background: var(--bg);
    border: 1px solid var(--primary);
    color: var(--text);
    padding: 5px 10px;
    border-radius: 8px;
    font-size: 14px;
}
/* Modal */
.modal { display: none; position: fixed; z-index: 1000; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.8); overflow-y: auto; }
.modal-content { background: var(--card); margin: 5% auto; padding: 30px; width: 90%; max-width: 700px; border-radius: 20px; position: relative; }
.close-btn { position: absolute; right: 25px; top: 15px; font-size: 30px; cursor: pointer; }
.section-box { background: rgba(0,0,0,0.03); padding: 15px; border-radius: 12px; margin-top: 15px; }