:root {
    --font-bengali: 'Hind Siliguri', sans-serif;
    --font-number: 'Hind Siliguri', sans-serif;
}
body { font-family: var(--font-bengali); display: flex; justify-content: center; align-items: center; min-height: 100vh; margin: 0; transition: background-color 0.4s ease; -webkit-tap-highlight-color: transparent; }
body.theme-default { --bg: #f0eefc; --container-bg: #fff; --text: #2c3e50; --secondary-text: #5a3e8a; --accent: #7e57c2; --accent-dark: #673ab7; --border: #e0e0e0; --shadow: rgba(90, 70, 120, 0.1); --icon: #5a3e8a; --reset: #d32f2f; }
body.theme-green { --bg: #e8f5e9; --container-bg: #fff; --text: #1b5e20; --secondary-text: #2e7d32; --accent: #4caf50; --accent-dark: #388e3c; --border: #c8e6c9; --shadow: rgba(76, 175, 80, 0.15); --icon: #2e7d32; --reset: #f44336; }
body.theme-blue { --bg: #e3f2fd; --container-bg: #fff; --text: #0d47a1; --secondary-text: #1565c0; --accent: #2196f3; --accent-dark: #1976d2; --border: #bbdefb; --shadow: rgba(33, 150, 243, 0.15); --icon: #1565c0; --reset: #f44336; }
body.dark-mode { --bg: #121212; --container-bg: #1e1e1e; --text: #e0e0e0; --secondary-text: #bb86fc; --accent: #90caf9; --accent-dark: #bb86fc; --border: #424242; --shadow: rgba(0, 0, 0, 0.3); --icon: #e0e0e0; --reset: #cf6679; }
.container { background: var(--container-bg); padding: 25px; border-radius: 25px; box-shadow: 0 15px 35px var(--shadow); text-align: center; width: 90%; max-width: 400px; border: 1px solid var(--border); transition: all 0.4s ease; }
.header-toolbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; }
.streak-display { font-weight: bold; color: var(--secondary-text); font-size: 1.1em; }
#count-display { font-size:clamp(4rem, 20vw, 6rem); font-weight: 700; color: var(--secondary-text); margin: 15px 0; font-family: var(--font-number); }
#increment-btn { width: 180px; height: 180px; border-radius: 50%; border: none; background: linear-gradient(145deg, var(--accent), var(--accent-dark)); box-shadow: 0 8px 20px rgba(126, 87, 194, 0.4); cursor: pointer; transition: all 0.2s; }
#increment-btn:active { transform: scale(0.95); }
.icon-btn { background: none; border: none; cursor: pointer; padding: 8px; border-radius: 50%; display: flex; transition: background-color 0.2s; }
.icon-btn:hover { background-color: rgba(0,0,0,0.05); }
.icon-btn svg { stroke: var(--icon); }
#reset-btn { margin: 15px auto 0; } #reset-btn svg { stroke: var(--reset); }
.dhikr-selector select { width: 100%; padding: 12px; border-radius: 12px; border: 1px solid var(--border); background-color: var(--bg); color: var(--text); font-family: var(--font-bengali); font-size: 1em; }
.dhikr-display { margin: 20px 0 15px; min-height: 80px; }
#dhikr-text-arabic { font-size: 2.2em; font-weight: normal; color: var(--text); margin: 0; direction: rtl; line-height: 1.5; font-family: sans-serif; }
#dhikr-benefit { font-size: 0.9em; color: var(--secondary-text); margin: 10px auto 0; opacity: 0.9; max-width: 90%; line-height: 1.6; }
.goal-progress { margin: 20px 0; }
.goal-bar { background-color: var(--border); border-radius: 10px; height: 10px; overflow: hidden; }
.goal-bar-fill { background-color: var(--accent); width: 0%; height: 100%; border-radius: 10px; transition: width 0.5s ease-out; }
.goal-text { font-size: 0.9em; color: var(--secondary-text); margin-top: 8px; }
.modal { display: none; position: fixed; z-index: 1000; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0,0,0,0.6); backdrop-filter: blur(5px); animation: fadeIn 0.3s; }
.modal-content { background-color: var(--container-bg); margin: 25% auto; padding: 25px; border: 1px solid var(--border); width: 90%; max-width: 500px; border-radius: 20px; position: relative; box-shadow: 0 10px 30px rgba(0,0,0,0.2); }
.close-btn { color: var(--text); position: absolute; top: 15px; right: 20px; font-size: 28px; font-weight: bold; cursor: pointer; }
.modal-content h3 { color: var(--accent); margin-top: 0; font-family: var(--font-bengali); }
.stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 20px; }
.stat-item h4 { margin: 0 0 5px; color: var(--secondary-text); font-size: 0.9em; font-weight: normal; }
.stat-item p { margin: 0; font-size: 1.5em; font-weight: bold; color: var(--text); }
.settings-section { margin-bottom: 20px; text-align: left; } .settings-section label { display: block; margin-bottom: 8px; color: var(--secondary-text); } .settings-section select, .settings-section input { width: 100%; padding: 10px; border-radius: 8px; border: 1px solid var(--border); background: var(--bg); color: var(--text); box-sizing: border-box; } .settings-section button { width: 100%; padding: 10px; border: none; border-radius: 8px; background-color: var(--accent); color: white; font-size: 1em; cursor: pointer; margin-top: 10px; }
.theme-selector { display: flex; gap: 15px; } .theme-option { width: 30px; height: 30px; border-radius: 50%; cursor: pointer; border: 2px solid var(--border); }
.theme-option[data-theme="theme-default"] { background-color: #7e57c2; } .theme-option[data-theme="theme-green"] { background-color: #4caf50; } .theme-option[data-theme="theme-blue"] { background-color: #2196f3; }
.switch { position: relative; display: inline-block; width: 50px; height: 28px; } .switch input { opacity: 0; width: 0; height: 0; } .slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; transition: .4s; border-radius: 28px; } .slider:before { position: absolute; content: ""; height: 20px; width: 20px; left: 4px; bottom: 4px; background-color: white; transition: .4s; border-radius: 50%; } input:checked + .slider { background-color: var(--accent); } input:checked + .slider:before { transform: translateX(22px); }
.toast { visibility: hidden; min-width: 250px; background-color: var(--secondary-text); color: #fff; text-align: center; border-radius: 8px; padding: 16px; position: fixed; z-index: 2000; left: 50%; transform: translateX(-50%); bottom: 30px; }
.toast.show { visibility: visible; animation: toast-fadein 0.5s, toast-fadeout 0.5s 2.5s; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes toast-fadein { from { bottom: 0; opacity: 0; } to { bottom: 30px; opacity: 1; } }
@keyframes toast-fadeout { from { bottom: 30px; opacity: 1; } to { bottom: 0; opacity: 0; } }