:root {
    /* Light Theme */
    --bg-gradient: linear-gradient(135deg, #fdfbfb 0%, #ebedee 100%);
    --card-bg: rgba(255, 255, 255, 0.85);
    --text-color: #2d3748;
    --text-muted: #718096;
    --primary: #667eea;
    --primary-hover: #5a67d8;
    --secondary: #ed64a6;
    --success: #48bb78;
    --danger: #e53e3e;
    --warning: #ecc94b;
    --whatsapp: #25D366;
    --border: rgba(255, 255, 255, 0.4);
    --shadow: 0 4px 15px rgba(0, 0, 0, 0.05); /* Softer shadow for mobile */
}

[data-theme="dark"] {
    --bg-gradient: linear-gradient(135deg, #1a202c 0%, #2d3748 100%);
    --card-bg: rgba(45, 55, 72, 0.85);
    --text-color: #f7fafc;
    --text-muted: #a0aec0;
    --primary: #7f9cf5;
    --primary-hover: #5a67d8;
    --secondary: #f687b3;
    --shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    --border: rgba(255, 255, 255, 0.05);
}

* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Poppins', 'Noto Sans Devanagari', sans-serif; }

body {
    background: var(--bg-gradient);
    color: var(--text-color);
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 10px 0;
    transition: background 0.3s ease, color 0.3s ease;
}

.app-container { width: 100%; max-width: 600px; padding: 10px; margin: 0 auto; }

header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.logo { display: flex; align-items: center; gap: 8px; }
.logo i { font-size: 1.5rem; color: var(--primary); }
.logo h1 { font-size: 1.25rem; font-weight: 800; background: -webkit-linear-gradient(45deg, var(--primary), var(--secondary)); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; line-height: 1.5; padding: 5px 0;}

.header-controls { display: flex; align-items: center; gap: 8px; }
.score-badge { background: var(--warning); color: #000; padding: 4px 8px; border-radius: 12px; font-weight: 600; font-size: 0.85rem; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }

.icon-btn { background: var(--card-bg); border: none; color: var(--text-color); width: 32px; height: 32px; border-radius: 50%; cursor: pointer; box-shadow: var(--shadow); transition: transform 0.2s; display:flex; justify-content:center; align-items:center; }
.icon-btn:hover { transform: scale(1.1); }

.controls-bar { display: flex; justify-content: space-between; margin-bottom: 12px; gap: 8px; }
select { padding: 6px 10px; border-radius: 8px; border: 1px solid var(--border); background: var(--card-bg); color: var(--text-color); outline: none; flex: 1; font-size: 0.85rem; backdrop-filter: blur(10px); }
.feature-btn { background: linear-gradient(45deg, #f6d365 0%, #fda085 100%); border: none; padding: 6px 10px; border-radius: 8px; color: #fff; font-size: 0.85rem; font-weight: 600; cursor: pointer; transition: transform 0.2s; box-shadow: 0 2px 8px rgba(253, 160, 133, 0.4); white-space: nowrap; }
.feature-btn:hover { transform: translateY(-2px); }

.paheli-card { background: var(--card-bg); backdrop-filter: blur(15px); border-radius: 15px; padding: 15px; box-shadow: var(--shadow); border: 1px solid var(--border); animation: fadeIn 0.5s ease; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

.card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.category-tag { background: rgba(102, 126, 234, 0.1); color: var(--primary); padding: 2px 10px; border-radius: 10px; font-size: 0.8rem; font-weight: 600; }
.timer { font-weight: 600; color: var(--danger); background: rgba(229, 62, 62, 0.1); padding: 2px 10px; border-radius: 10px; transition: opacity 0.3s; font-size: 0.85rem; }

.question-container { text-align: left; margin-bottom: 15px; min-height: 50px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.question-container h2 { font-size: 1.15rem; line-height: 1.3; font-weight: 600; flex: 1; margin: 0; }
.speak-btn { background: rgba(102, 126, 234, 0.1); border: none; color: var(--primary); width: 35px; height: 35px; border-radius: 50%; cursor: pointer; transition: all 0.2s; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.speak-btn:hover { background: var(--primary); color: white; transform: scale(1.1); }

.input-section { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; width: 100%; }
.input-wrapper { display: flex; position: relative; width: 100%; align-items: center; }
.input-wrapper input { flex: 1; padding: 8px 40px 8px 12px; border-radius: 8px; border: 2px solid var(--border); background: transparent; color: var(--text-color); outline: none; font-size: 0.9rem; transition: border-color 0.3s; }
.input-wrapper input:focus { border-color: var(--primary); }
.mic-btn { position: absolute; right: 5px; background: none; border: none; color: var(--text-muted); font-size: 1.1rem; width: 30px; height: 30px; display: flex; justify-content: center; align-items: center; border-radius: 50%; cursor: pointer; transition: all 0.3s; }
.mic-btn:hover { color: var(--primary); background: rgba(0,0,0,0.05); }
.mic-btn.recording { color: var(--danger); animation: pulse 1.5s infinite; }
@keyframes pulse { 0% { opacity: 1; transform: scale(1); } 50% { opacity: 0.6; transform: scale(1.1); } 100% { opacity: 1; transform: scale(1); } }

.primary-btn { background: var(--primary); color: white; border: none; padding: 8px 12px; border-radius: 8px; font-size: 0.9rem; font-weight: 600; cursor: pointer; transition: background 0.3s; white-space: nowrap; }
.primary-btn:hover { background: var(--primary-hover); }

.action-buttons { display: flex; justify-content: space-between; align-items: center; gap: 5px; margin-bottom: 10px; }
.secondary-btn { background: transparent; border: 1.5px solid var(--primary); color: var(--primary); padding: 5px 10px; border-radius: 8px; font-size: 0.8rem; font-weight: 600; cursor: pointer; transition: all 0.3s; display:flex; align-items:center; gap:5px; }
.secondary-btn:hover { background: var(--primary); color: white; }

.text-btn { background: none; border: none; color: var(--text-muted); text-decoration: underline; cursor: pointer; font-size: 0.8rem; }
.text-btn:hover { color: var(--text-color); }

.alert { padding: 8px 10px; border-radius: 8px; margin-bottom: 10px; font-size: 0.85rem; text-align: center; animation: slideDown 0.3s ease; }
@keyframes slideDown { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: translateY(0); } }
.alert.info { background: rgba(102, 126, 234, 0.1); color: var(--primary); border: 1px dashed var(--primary); }
.alert.success { background: rgba(72, 187, 120, 0.1); color: var(--success); border: 1px solid var(--success); }
.alert.error { background: rgba(229, 62, 62, 0.1); color: var(--danger); border: 1px solid var(--danger); }
.hidden { display: none !important; }

.nav-buttons { display: flex; justify-content: space-between; gap:6px; margin-top: 15px; padding-top: 12px; border-top: 1px solid var(--border); }
.nav-btn { flex: 1; min-width: 0; justify-content: center; background: rgba(113, 128, 150, 0.1); border: none; color: var(--text-color); padding: 8px 5px; border-radius: 8px; font-size: 0.85rem; cursor: pointer; font-weight: 500; transition: background 0.2s; display: flex; align-items: center; gap: 4px; }
.nav-btn:hover:not(:disabled) { background: rgba(113, 128, 150, 0.2); }
.nav-btn.random { background: rgba(237, 100, 166, 0.1); color: var(--secondary); margin: 0 4px;}
.nav-btn.random:hover { background: rgba(237, 100, 166, 0.2); }

.share-section { margin-top: 12px; text-align: center; }
.whatsapp-btn { background: var(--whatsapp); color: white; border: none; padding: 10px; border-radius: 20px; font-size: 0.9rem; font-weight: 600; cursor: pointer; box-shadow: 0 3px 10px rgba(37, 211, 102, 0.3); transition: transform 0.2s; display: inline-flex; align-items: center; gap: 8px; width: 100%; justify-content: center; }
.whatsapp-btn:hover { transform: translateY(-2px); }

.confetti { position: absolute; width: 8px; height: 8px; z-index: 1000; pointer-events: none; }

/* Responsive Stacking for Small Screens */
@media (max-width: 480px) {
    .controls-bar { flex-direction: column; gap: 10px; }
    .feature-btn { width: 100%; text-align: center; }

    .input-section { flex-direction: column; }
    
    .action-buttons { flex-direction: row; gap: 5px; align-items: center; justify-content: space-between; }
    .secondary-btn, .text-btn, .primary-btn { flex: 1; padding: 6px 4px; font-size: 0.75rem; text-align: center; justify-content: center; margin: 0; width: auto; }

    .nav-buttons { flex-wrap: nowrap; gap: 4px; }
    .nav-btn { flex: 1; font-size: 0.8rem; padding: 8px 4px; }
    .nav-btn.random { flex: 1; margin: 0; }
}

@media (max-width: 360px) {
    .logo h1 { font-size: 1.1rem; }
    .question-container h2 { font-size: 1.05rem; }
    .nav-btn { font-size: 0.75rem; padding: 8px 2px; gap: 2px; }
}