html { -webkit-tap-highlight-color: transparent; scroll-behavior: smooth; }
body { overscroll-behavior-y: none; }
.safe-top { padding-top: env(safe-area-inset-top); }
.safe-bottom { padding-bottom: env(safe-area-inset-bottom); }

.nav-btn { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; padding:10px 0 8px; font-size:11px; color:#94a3b8; transition: color .15s; }
.nav-btn i { font-size:18px; }
.nav-btn.active { color:#2dd4bf; }

.card { background: rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.07); border-radius:1.25rem; padding:1rem; }
.card-glow { background: linear-gradient(135deg, rgba(20,184,166,.18), rgba(15,118,110,.05)); border:1px solid rgba(45,212,191,.25); border-radius:1.25rem; padding:1rem; }

.chip { display:inline-flex; align-items:center; gap:.35rem; padding:.3rem .7rem; border-radius:9999px; font-size:.75rem; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.08); }
.chip.on { background:rgba(20,184,166,.2); border-color:rgba(45,212,191,.5); color:#99f6e4; }

.item-row { display:flex; align-items:center; gap:.75rem; padding:.75rem .9rem; border-radius:1rem; background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.06); transition: all .15s; }
.item-row.done { background:rgba(20,184,166,.12); border-color:rgba(45,212,191,.35); }
.item-row .chk { width:26px; height:26px; border-radius:9999px; border:2px solid #475569; display:flex; align-items:center; justify-content:center; flex-shrink:0; transition: all .15s; }
.item-row.done .chk { background:#14b8a6; border-color:#14b8a6; color:#042f2e; }

.btn { display:inline-flex; align-items:center; justify-content:center; gap:.5rem; padding:.7rem 1.1rem; border-radius:1rem; font-weight:700; transition: transform .1s, opacity .15s; }
.btn:active { transform: scale(.97); }
.btn-primary { background:#0d9488; color:white; }
.btn-ghost { background:rgba(255,255,255,.06); color:#e2e8f0; }
.btn-danger { background:#dc2626; color:white; }
.btn-gold { background:linear-gradient(135deg,#f59e0b,#d97706); color:#1c1917; }

.input { width:100%; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1); border-radius:.9rem; padding:.7rem .9rem; color:#f1f5f9; outline:none; }
.input:focus { border-color:#2dd4bf; }
select.input option { background:#0f172a; }

.modal-bg { position:fixed; inset:0; z-index:60; background:rgba(2,6,23,.75); backdrop-filter: blur(4px); display:flex; align-items:flex-end; justify-content:center; animation: fade .2s; }
.modal { width:100%; max-width:28rem; max-height:92vh; overflow-y:auto; background:#0f172a; border-radius:1.75rem 1.75rem 0 0; padding:1.25rem 1.25rem calc(1.25rem + env(safe-area-inset-bottom)); border-top:1px solid rgba(255,255,255,.08); animation: up .25s cubic-bezier(.2,.8,.2,1); }
.modal.full { max-height:100vh; height:100vh; border-radius:0; }
@keyframes up { from { transform: translateY(40px); opacity:0 } to { transform:none; opacity:1 } }
@keyframes fade { from { opacity:0 } to { opacity:1 } }

.toast { background:#115e59; color:#ccfbf1; padding:.6rem 1.1rem; border-radius:9999px; font-size:.85rem; box-shadow:0 10px 30px rgba(0,0,0,.4); animation: up .25s; }

.ring { transform: rotate(-90deg); }
.ring circle { fill:none; stroke-width:10; stroke-linecap:round; }
.ring .bg { stroke: rgba(255,255,255,.08); }
.ring .fg { stroke:#2dd4bf; transition: stroke-dashoffset .4s; }

.tasbih-btn { width:220px; height:220px; border-radius:9999px; background: radial-gradient(circle at 30% 30%, #14b8a6, #0f766e 60%, #134e4a); box-shadow: 0 20px 60px rgba(20,184,166,.35), inset 0 -10px 30px rgba(0,0,0,.3); display:flex; flex-direction:column; align-items:center; justify-content:center; user-select:none; transition: transform .08s; }
.tasbih-btn:active { transform: scale(.95); }

.pulse-soft { animation: pulse 2s infinite; }
@keyframes pulse { 0%,100% { transform: scale(1) } 50% { transform: scale(1.05) } }

.heat { display:grid; grid-template-columns: repeat(10, 1fr); gap:4px; }
.heat div { aspect-ratio:1; border-radius:4px; background:rgba(255,255,255,.06); }
.heat .l1 { background:#134e4a } .heat .l2 { background:#0f766e } .heat .l3 { background:#14b8a6 } .heat .l4 { background:#5eead4 }

.accordion summary { list-style:none; cursor:pointer; }
.accordion summary::-webkit-details-marker { display:none; }

.breathe { animation: breathe 8s ease-in-out infinite; }
@keyframes breathe { 0%,100% { transform: scale(.7); opacity:.5 } 50% { transform: scale(1); opacity:1 } }

.fade-in { animation: fade .3s; }
::-webkit-scrollbar { width: 0; height: 0; }