:root{--primary: #1a5f4a;--primary-dark: #134539;--secondary: #d4af37;--accent: #2a7a63;--bg-gradient-start: #0f2027;--bg-gradient-middle: #203a43;--bg-gradient-end: #2c5364;--text-light: #f8f9fa;--text-gold: #d4af37;--shadow: rgba(0, 0, 0, .3);--card-bg: rgba(255, 255, 255, .05);--card-border: rgba(212, 175, 55, .2)}*{margin:0;padding:0;box-sizing:border-box}body{font-family:Poppins,sans-serif;background:linear-gradient(135deg,var(--bg-gradient-start) 0%,var(--bg-gradient-middle) 50%,var(--bg-gradient-end) 100%);min-height:100vh;color:var(--text-light);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden}#root{min-height:100vh;display:flex;flex-direction:column}.app{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:2rem 1rem;position:relative}.app:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background-image:radial-gradient(circle at 20% 50%,rgba(212,175,55,.05) 0%,transparent 50%),radial-gradient(circle at 80% 80%,rgba(42,122,99,.05) 0%,transparent 50%);pointer-events:none}.container{width:100%;max-width:480px;position:relative;z-index:1}.header{text-align:center;margin-bottom:2rem}.header h1{font-family:Amiri,serif;font-size:2.5rem;font-weight:700;color:var(--text-gold);margin-bottom:.5rem;text-shadow:2px 2px 4px var(--shadow);letter-spacing:2px}.header p{font-size:.95rem;color:#f8f9facc;font-weight:300}.tasbih-card{background:var(--card-bg);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:30px;padding:3rem 2rem;box-shadow:0 8px 32px var(--shadow),inset 0 1px #ffffff1a;border:1px solid var(--card-border);position:relative;overflow:hidden}.tasbih-card:before{content:"";position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:radial-gradient(circle,rgba(212,175,55,.1) 0%,transparent 70%);animation:rotate 30s linear infinite;pointer-events:none;will-change:transform}@keyframes rotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.goal-section{margin-bottom:2rem;text-align:center;position:relative;z-index:2}.goal-section label{display:block;margin-bottom:.75rem;font-size:.9rem;color:var(--text-gold);font-weight:600;font-family:Amiri,serif;letter-spacing:1px}.goal-input{width:100%;max-width:200px;padding:.875rem 1.25rem;background:#ffffff0d;border:2px solid var(--card-border);border-radius:15px;color:var(--text-light);font-size:1.25rem;font-weight:600;text-align:center;transition:all .3s ease;font-family:Poppins,sans-serif}.goal-input::placeholder{color:#f8f9fa66;font-size:.9rem;font-weight:400}.goal-input:focus{outline:none;border-color:var(--secondary);background:#ffffff14;box-shadow:0 0 0 3px #d4af371a}.goal-input::-webkit-outer-spin-button,.goal-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.goal-input[type=number]{-moz-appearance:textfield}.dhikr-selector{margin-bottom:2rem;position:relative;z-index:2}.dhikr-selector label{display:block;margin-bottom:.75rem;font-size:.9rem;color:var(--text-gold);font-weight:600;text-align:center;font-family:Amiri,serif;letter-spacing:1px}.dhikr-buttons{display:grid;grid-template-columns:repeat(2,1fr);gap:.75rem}.dhikr-btn{padding:1rem;border:2px solid var(--card-border);background:#ffffff08;color:var(--text-light);border-radius:15px;cursor:pointer;transition:all .3s ease;font-family:Amiri,serif;font-size:1.1rem;font-weight:600;position:relative;overflow:hidden}.dhikr-btn:before{content:"";position:absolute;top:50%;left:50%;width:0;height:0;border-radius:50%;background:#d4af3733;transform:translate(-50%,-50%);transition:width .6s,height .6s}.dhikr-btn:hover:before{width:300px;height:300px}.dhikr-btn:hover{border-color:var(--secondary);transform:translateY(-2px);box-shadow:0 4px 12px #d4af374d}.dhikr-btn.active{background:linear-gradient(135deg,var(--primary) 0%,var(--accent) 100%);border-color:var(--secondary);box-shadow:0 4px 16px #d4af3766}.dhikr-btn span{position:relative;z-index:1}.counter-section{text-align:center;margin:3rem 0;position:relative;z-index:2}.counter-display{font-size:5rem;font-weight:700;color:var(--text-gold);margin:1.5rem 0;text-shadow:0 4px 8px var(--shadow);font-family:Poppins,sans-serif;line-height:1;will-change:contents}.target-count{font-size:1rem;color:#f8f9fa99;margin-bottom:2rem;font-weight:300}.counter-btn{width:200px;height:200px;border-radius:50%;border:none;background:linear-gradient(135deg,var(--primary) 0%,var(--accent) 100%);color:var(--text-gold);font-size:1.2rem;font-weight:700;cursor:pointer;box-shadow:0 8px 24px #1a5f4a66,inset 0 -4px 8px #0003,inset 0 4px 8px #ffffff1a;transition:transform .1s ease,box-shadow .1s ease;position:relative;overflow:hidden;font-family:Amiri,serif;letter-spacing:2px;margin:0 auto;display:block;will-change:transform;transform:translateZ(0);-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;touch-action:manipulation}.counter-btn:before{content:"";position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:radial-gradient(circle,rgba(255,255,255,.1) 0%,transparent 70%)}.counter-btn:hover{transform:scale(1.05);box-shadow:0 12px 32px #1a5f4a80,inset 0 -4px 8px #0003,inset 0 4px 8px #fff3}.counter-btn:active{transform:scale(.95);box-shadow:0 4px 12px #1a5f4a4d,inset 0 2px 8px #0000004d}.actions{display:flex;gap:1rem;justify-content:center;margin-top:2rem;position:relative;z-index:2}.action-btn{padding:.875rem 2rem;border:2px solid var(--card-border);background:#ffffff0d;color:var(--text-light);border-radius:12px;cursor:pointer;transition:all .3s ease;font-size:.95rem;font-weight:600;display:flex;align-items:center;gap:.5rem}.action-btn:hover{background:#d4af371a;border-color:var(--secondary);transform:translateY(-2px);box-shadow:0 4px 12px #d4af3733}.action-btn:active{transform:translateY(0)}.undo-btn{background:#d4af3726;border-color:var(--secondary);animation:slideIn .3s ease forwards}@keyframes slideIn{0%{opacity:0;transform:translate(-10px)}to{opacity:1;transform:translate(0)}}.undo-btn:hover{background:#d4af3740}.completion-message{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%) scale(0);background:linear-gradient(135deg,var(--primary) 0%,var(--accent) 100%);padding:2rem 3rem;border-radius:20px;box-shadow:0 8px 32px #00000080;text-align:center;z-index:1000;border:2px solid var(--secondary);animation:popup .5s ease forwards}@keyframes popup{0%{transform:translate(-50%,-50%) scale(0);opacity:0}50%{transform:translate(-50%,-50%) scale(1.1)}to{transform:translate(-50%,-50%) scale(1);opacity:1}}.completion-message h2{font-family:Amiri,serif;font-size:2rem;color:var(--text-gold);margin-bottom:1rem}.completion-message p{color:var(--text-light);font-size:1.1rem;margin-bottom:1.5rem}.completion-actions{display:flex;gap:1rem;justify-content:center;align-items:center}.completion-message button{padding:.75rem 2rem;background:var(--secondary);color:var(--primary-dark);border:none;border-radius:10px;cursor:pointer;font-weight:700;font-size:1rem;transition:all .3s ease}.completion-message button:hover{background:#e6c04e;transform:translateY(-2px)}.reset-btn-alt{background:#ffffff1a!important;color:var(--text-light)!important;border:2px solid rgba(255,255,255,.3)!important}.reset-btn-alt:hover{background:#ffffff26!important;border-color:#ffffff80!important;transform:translateY(-2px)}@media (max-width: 480px){.header h1{font-size:2rem}.counter-display{font-size:4rem}.counter-btn{width:180px;height:180px;font-size:1.1rem}.tasbih-card{padding:2rem 1.5rem}.dhikr-buttons{grid-template-columns:1fr}}.footer{text-align:center;margin-top:2rem;padding:1rem;position:relative;z-index:1}.footer p{font-size:.9rem;color:var(--text-gold);font-weight:600;text-shadow:0 2px 4px var(--shadow);letter-spacing:.5px}