*{box-sizing:border-box;margin:0;padding:0}body{font-family:sans-serif;transition:background-color .3s,color .3s}.app{color:#111;background-color:#f9fafb;min-height:100vh;transition:background-color .3s,color .3s}.app.dark{color:#f1f5f9;background-color:#0f172a}.theme-toggle{cursor:pointer;color:inherit;z-index:100;background:0 0;border:2px solid;border-radius:20px;padding:6px 14px;font-size:14px;transition:background-color .2s;position:fixed;top:16px;right:16px}.theme-toggle:hover{background-color:#80808026}@media (width<=480px){.theme-toggle{padding:4px 10px;font-size:12px;top:10px;right:10px}}.header{justify-content:center;padding:10px 0 20px;display:flex}.dhikr-select{appearance:none;color:#1b5e20;cursor:pointer;text-align:center;direction:rtl;background-color:#f0fdf4;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%232e7d32' d='M6 8L1 3h10z'/%3E%3C/svg%3E");background-position:12px;background-repeat:no-repeat;border:2px solid #2e7d32;border-radius:12px;min-width:260px;padding:10px 40px 10px 16px;font-size:1.2rem;transition:border-color .2s,box-shadow .2s}.dhikr-select:focus{border-color:#1b5e20;outline:none;box-shadow:0 0 0 3px #2e7d3233}.dhikr-select option{padding:8px;font-size:1.1rem}.app.dark .mheader h1{color:#86efac}.app.dark .dhikr-select{color:#86efac;background-color:#1e293b;border-color:#86efac}.app.dark .dhikr-select:focus{border-color:#4ade80;box-shadow:0 0 0 3px #86efac33}@media (width<=480px){.mheader h1{letter-spacing:1px;font-size:1.4rem}.dhikr-select{min-width:unset;width:90%;padding:8px 32px 8px 12px;font-size:1rem}}.circle-wrapper{flex-direction:column;align-items:center;gap:16px;padding:24px;display:flex}.circle-buttons{gap:12px;display:flex}.circle-btn{cursor:pointer;color:#fff;background-color:#2e7d32;border:none;border-radius:8px;padding:10px 24px;font-size:18px;transition:background-color .2s,transform .1s}.circle-btn:hover{background-color:#1b5e20}.circle-btn:active{background-color:#145214;transform:scale(.96)}.circle-btn.reset{background-color:#dc2626}.circle-btn.reset:hover{background-color:#b91c1c}.circle-btn.reset:active{background-color:#991b1b;transform:scale(.96)}.app.dark .circle-btn{background-color:#166534}.app.dark .circle-btn:hover{background-color:#14532d}.app.dark .circle-btn.reset{background-color:#991b1b}.app.dark .circle-btn.reset:hover{background-color:#7f1d1d}@media (width<=480px){.circle-wrapper{gap:12px;padding:16px}.circle-wrapper svg{width:160px;height:160px}.circle-btn{padding:8px 18px;font-size:15px}}.mheader{text-align:center;padding:20px 0 4px}.mheader h1{letter-spacing:2px;color:#2e7d32;text-transform:uppercase;margin:0;font-size:2rem;font-weight:800}.bottom-message{text-align:center;color:#a5d6a7;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);background:#0009;border-radius:20px;width:80%;padding:10px;position:fixed;bottom:20px;left:50%;overflow:hidden;transform:translate(-50%)}.moving-text{white-space:nowrap;font-size:20px;font-weight:700;animation:8s linear infinite moveText;display:inline-block}@keyframes moveText{0%{transform:translate(100%)}to{transform:translate(-100%)}}