@font-face{font-family:ArabicUI;src:url('fonts/arabic-ui.woff') format('woff');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:ArabicDisplay;src:url('fonts/arabic-display.woff') format('woff');font-weight:400;font-style:normal;font-display:swap}
:root{color-scheme:dark;--bg:#091e1c;--surface:#112e29;--gold:#d4ba7d;--gold-bright:#f0dfb4;--text:#f3efe3;--muted:#a0b4aa;--line:rgba(195,213,190,.12)}
*{box-sizing:border-box}
html{min-width:280px;background:var(--bg)}
body{margin:0;font-family:ArabicUI,Tahoma,Arial,sans-serif;color:var(--text);font-size:1rem;line-height:1.7;background:radial-gradient(ellipse at 50% 43%,rgba(47,88,66,.24),transparent 58%),radial-gradient(ellipse at 90% 0,rgba(77,103,69,.09),transparent 40%),var(--bg);-webkit-tap-highlight-color:transparent}
button,a{-webkit-tap-highlight-color:transparent}
button{font:inherit;color:inherit;cursor:pointer;touch-action:manipulation}
button:focus-visible,a:focus-visible{outline:2px solid var(--gold-bright);outline-offset:7px}
button:disabled{cursor:default}
button svg,.session-footer svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.page-shell{min-height:100svh;max-width:1440px;margin:auto;display:flex;flex-direction:column;padding:0 max(32px,env(safe-area-inset-right)) 0 max(32px,env(safe-area-inset-left))}
.header{min-height:110px;display:flex;align-items:center;justify-content:space-between;gap:20px;border-bottom:1px solid var(--line);margin:0 30px}
.brand{display:flex;align-items:center;gap:12px;color:var(--gold);text-decoration:none}
.brand-mark{width:35px;height:35px;flex-shrink:0}
.brand-name{font-family:ArabicDisplay,serif;font-size:2rem;line-height:1.7;color:var(--text)}
.brand-description{font-size:.875rem;color:var(--muted);border-right:1px solid var(--line);padding-right:18px;margin-right:10px}
.sound-toggle{display:flex;align-items:center;gap:9px;background:rgba(255,255,255,.025);border:1px solid rgba(195,213,190,.17);border-radius:999px;padding:9px 17px;font-size:.875rem;min-height:44px;color:#c3cdbd;transition:background .2s,border-color .2s}
.sound-toggle:hover{background:rgba(212,186,125,.075);border-color:rgba(212,186,125,.4)}
.sound-toggle[aria-pressed="true"] svg{color:var(--gold)}
.hidden{display:none}
.dhikr-nav{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;width:min(100%,880px);margin:22px auto 0}
.dhikr-nav a{display:flex;align-items:center;justify-content:center;min-height:48px;padding:9px 12px;border:1px solid var(--line);border-radius:12px;text-decoration:none;text-align:center;color:var(--muted);font-size:.875rem;line-height:1.8;transition:color .2s,background .2s,border-color .2s}
.dhikr-nav a:hover{background:rgba(212,186,125,.06);border-color:rgba(212,186,125,.3);color:var(--text)}
.dhikr-nav a[aria-current="page"]{color:var(--gold-bright);background:rgba(212,186,125,.1);border-color:rgba(212,186,125,.5)}
main{flex:1;display:grid;place-items:center;padding:42px 0 30px}
.tasbih{width:100%;max-width:880px;display:flex;align-items:center;flex-direction:column;text-align:center}
.introduction{margin-bottom:28px}
.eyebrow{display:flex;align-items:center;justify-content:center;gap:14px;font-size:.875rem;color:var(--muted);margin:0 0 9px}
.eyebrow span{width:28px;height:1px;background:linear-gradient(90deg,transparent,rgba(212,186,125,.45))}
.eyebrow span:last-child{transform:rotate(180deg)}
h1{font-family:ArabicDisplay,'Times New Roman',serif;font-weight:400;font-size:clamp(2.35rem,5.2vw,3.65rem);color:var(--gold-bright);line-height:1.9;margin:0;text-wrap:balance;padding-inline:5px}
h1.dhikr-long{max-width:780px;font-size:clamp(1.8rem,3.6vw,2.7rem);line-height:1.85}
.dhikr-instruction{font-size:.875rem;color:var(--muted);line-height:1.9;margin:5px 0 0}
.counter-wrap{position:relative;width:min(360px,82vw);aspect-ratio:1;flex-shrink:0;display:grid;place-items:center;isolation:isolate}
.counter-wrap:before{content:"";position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle,rgba(118,143,87,.07),transparent 68%);z-index:-1;pointer-events:none}
.dial{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.dial-track{stroke:rgba(213,191,142,.10);stroke-width:1;fill:none}
.dial-progress{stroke:url(#gold);stroke-width:2;fill:none;stroke-dasharray:100;stroke-dashoffset:100;stroke-linecap:round;transform:rotate(-90deg);transform-origin:200px 200px;transition:stroke-dashoffset .25s ease}
.tick{stroke:rgba(186,199,170,.22);stroke-width:2;stroke-linecap:round;transition:stroke .25s}
.tick.active{stroke:var(--gold-bright)}
.counter{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;width:78%;height:78%;padding:22px 10px 20px;border:1px solid rgba(210,192,149,.20);border-radius:50%;background:radial-gradient(circle at 46% 24%,#203d31 0,#18352d 44%,#102a25 100%);box-shadow:0 0 0 8px rgba(20,43,35,.56),0 0 0 9px rgba(202,187,144,.07),inset 0 2px 2px rgba(228,217,162,.065),0 18px 48px rgba(0,0,0,.14);user-select:none;-webkit-user-select:none;transition:transform .13s,box-shadow .25s,border-color .25s;overflow:hidden}
.counter:hover{border-color:rgba(210,192,149,.43);box-shadow:0 0 0 8px rgba(20,43,35,.56),0 0 0 9px rgba(202,187,144,.13),inset 0 2px 2px rgba(228,217,162,.085),0 18px 48px rgba(0,0,0,.14)}
.counter:active:not([aria-disabled="true"]){transform:scale(.972)}
.count-caption{font-size:.875rem;color:#b8c8b7;line-height:1.8}
.count{display:block;font-family:ArabicDisplay,serif;font-size:6.3rem;line-height:1.05;font-variant-numeric:tabular-nums;color:#f2e7ca;min-height:1.05em;margin-top:4px;direction:ltr}
.count-goal{font-size:.875rem;color:var(--muted);line-height:1.7}
.counter-divider{width:26px;height:1px;background:rgba(212,186,125,.27);margin:13px 0 10px}
.counter-action{display:flex;align-items:center;gap:6px;font-size:.9375rem;color:var(--gold);line-height:1.6}
.counter-action svg{width:15px;height:15px}
.counter.pulse .count{animation:count-pulse .2s ease-out}
@keyframes count-pulse{0%{opacity:.7;transform:translateY(2px)}100%{opacity:1;transform:translateY(0)}}
.counter-wrap.complete .counter{border-color:rgba(212,186,125,.64);box-shadow:0 0 0 8px rgba(212,186,125,.025),0 0 0 9px rgba(212,186,125,.13),0 0 60px rgba(199,179,100,.08);cursor:default}
.counter-wrap.complete{animation:complete-glow 1.4s ease-out}
@keyframes complete-glow{0%,100%{filter:brightness(1)}40%{filter:brightness(1.25)}}
.feedback{min-height:50px;margin:17px 0 5px;width:100%;display:grid;place-items:start center}
.tap-hint,.completion-message{grid-area:1/1;font-size:.9375rem;margin:0;line-height:1.9;color:var(--muted);transition:opacity .2s}
.completion-message{color:var(--gold-bright);opacity:0}
.feedback.complete .tap-hint{visibility:hidden;opacity:0}
.feedback.complete .completion-message{opacity:1}
.sound-error{font-size:.875rem;margin:8px 0;color:#e2be8c;max-width:420px}
.reset-button{display:flex;align-items:center;gap:8px;justify-content:center;min-height:44px;padding:8px 20px;border:1px solid rgba(212,186,125,.2);border-radius:999px;background:transparent;color:#c6c8b3;font-size:.875rem;transition:background .2s,border-color .2s,opacity .2s}
.reset-button svg{width:17px;height:17px}
.reset-button:hover:enabled{background:rgba(212,186,125,.065);border-color:rgba(212,186,125,.4)}
.reset-button:disabled{opacity:.4}
.reset-button.restart{border-color:var(--gold);background:var(--gold);color:var(--bg)}
.reset-button.restart:hover{background:var(--gold-bright);border-color:var(--gold-bright)}
.counter-controls{display:flex;justify-content:center;align-items:center;gap:12px;flex-wrap:wrap;width:100%}
.voice-toggle{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:46px;padding:9px 19px;border:1px solid rgba(212,186,125,.55);border-radius:999px;background:rgba(212,186,125,.08);color:var(--gold-bright);font-size:.9375rem;transition:background .2s,border-color .2s}
.voice-toggle:hover:enabled{background:rgba(212,186,125,.16);border-color:var(--gold)}
.voice-toggle[aria-pressed="true"]{background:var(--gold);border-color:var(--gold);color:var(--bg)}
.voice-toggle[aria-pressed="true"]:hover{background:var(--gold-bright)}
.voice-toggle:disabled{opacity:.5}
.voice-toggle[data-state="listening"] svg{animation:microphone-pulse 1.8s ease-in-out infinite}
@keyframes microphone-pulse{0%,100%{opacity:1}50%{opacity:.55}}
.voice-feedback{width:min(100%,450px);margin-top:10px;overflow-wrap:anywhere}
.voice-status,.voice-transcript,.voice-tip{font-size:.875rem;line-height:1.9;margin:0;color:var(--muted)}
.voice-status[data-state="listening"]{color:var(--gold-bright)}
.voice-status[data-state="error"]{color:#e2be8c}
.voice-transcript{margin-top:5px;color:#c3cdbd}
.voice-tip{margin-top:5px}
.session-footer{display:flex;align-items:center;justify-content:center;gap:26px;flex-wrap:wrap;margin-top:35px;color:var(--muted);font-size:.875rem}
.session-footer>span{display:inline-flex;align-items:center;gap:8px}
.session-footer svg{width:17px;height:17px;color:#829889}
.keyboard-hint{padding-right:26px;border-right:1px solid var(--line)}
kbd{font-family:Arial,sans-serif;direction:ltr;border:1px solid rgba(195,213,190,.17);border-radius:5px;padding:0 6px;font-size:.75rem;line-height:1.6;color:#adbcad;background:rgba(255,255,255,.025)}
.footer{display:flex;align-items:center;justify-content:center;gap:15px;color:#7d9282;font-family:ArabicDisplay,serif;font-size:1rem;min-height:58px;padding-bottom:max(14px,env(safe-area-inset-bottom))}
.footer-line{width:35px;height:1px;background:var(--line)}
.noscript-message{color:var(--gold);text-align:center}
@media(min-width:1500px) and (min-height:950px){main{padding-block:60px}.introduction{margin-bottom:40px}.counter-wrap{width:400px}.count{font-size:7.25rem}.feedback{margin-top:22px}.session-footer{margin-top:40px}}
@media(max-width:600px){.page-shell{padding-inline:max(18px,env(safe-area-inset-right)) max(18px,env(safe-area-inset-left))}.header{margin:0;min-height:86px;gap:10px}.brand{gap:8px}.brand-mark{width:28px;height:28px}.brand-name{font-size:1.75rem}.brand-description{display:none}.sound-toggle{font-size:.8125rem;padding:8px 12px;gap:7px}.sound-toggle svg{width:17px;height:17px}main{padding:25px 0 20px}.introduction{margin-bottom:20px}h1{font-size:clamp(2.1rem,8.7vw,3.2rem);line-height:1.9}.eyebrow{font-size:.875rem}.counter-wrap{width:min(345px,87vw)}.count{font-size:5.8rem}.feedback{margin-top:18px;min-height:42px}.session-footer{margin-top:24px;gap:10px}.session-footer .keyboard-hint{display:none}.footer{min-height:48px}}
@media(max-width:350px){.page-shell{padding-inline:12px}.count{font-size:4.9rem}.count-caption,.count-goal{font-size:.8125rem}.counter-divider{margin:8px 0}.introduction{margin-bottom:12px}.counter{padding-block:14px}}
@media(max-height:780px) and (min-width:601px){.header{min-height:82px}main{padding:20px 0}.introduction{margin-bottom:12px}h1{font-size:2.8rem}.counter-wrap{width:310px}.count{font-size:5.2rem}.counter-divider{margin:8px 0}.feedback{margin-top:12px;min-height:38px}.session-footer{margin-top:18px}.footer{min-height:40px}}
@media(max-height:720px) and (max-width:600px){.header{min-height:72px}main{padding:16px 0}.introduction{margin-bottom:12px}.counter-wrap{width:min(294px,84vw)}.count{font-size:5rem}.counter-divider{margin:8px 0}.feedback{margin-top:12px;min-height:36px}.session-footer{margin-top:18px}.footer{min-height:38px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
@media(max-width:600px){.dhikr-nav{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;margin-top:16px}.dhikr-nav a{min-height:46px;padding:7px 8px}h1.dhikr-long{font-size:clamp(1.7rem,6.2vw,2.3rem);line-height:1.8}.introduction{max-width:100%}}

.dhikr-nav{grid-template-columns:repeat(5,minmax(0,1fr));max-width:980px}.dhikr-nav .custom-nav-link{border-style:dashed;color:var(--gold-bright);background:#d4ba7d0a}.custom-main{display:flex;flex-direction:column;gap:35px}.custom-panel{max-width:880px;width:100%;padding:26px;border:1px solid #d4ba7d30;border-radius:20px;background:linear-gradient(135deg,#14372f,#0b2520)}.custom-panel h1{font-size:2.5rem;padding:0}.custom-panel p{color:var(--muted);margin:8px 0 16px}.custom-panel textarea{width:100%;margin:10px 0 15px;padding:14px 16px;resize:vertical;background:#071e19;color:var(--text);border:1px solid #587063;border-radius:12px;font:inherit;font-size:1.125rem;line-height:1.8}.custom-form-actions{display:flex;flex-wrap:wrap;gap:10px}.custom-privacy{font-size:.875rem}.custom-list{display:grid;gap:10px;margin-top:20px}.custom-item{display:flex;gap:10px}.custom-choice{flex:1;text-align:right;border:1px solid var(--line);background:#102c25;border-radius:12px;padding:12px 16px;white-space:pre-wrap;overflow-wrap:anywhere;max-height:180px;overflow:auto;font-size:1rem}.custom-choice[aria-pressed="true"]{border-color:var(--gold);color:var(--gold-bright);background:#d4ba7d14}.custom-remove{border:0;background:transparent;font-size:.875rem;color:var(--muted);min-width:44px}.custom-dhikr{font-size:clamp(1.7rem,4vw,2.5rem)!important;line-height:2!important;max-width:840px;white-space:pre-wrap;overflow-wrap:anywhere}.custom-panel label{color:var(--gold-bright)}
@media(max-width:600px){.dhikr-nav{grid-template-columns:repeat(2,minmax(0,1fr))}.dhikr-nav .custom-nav-link{grid-column:1/-1}.custom-panel{padding:19px}.custom-panel h1{font-size:2rem}.custom-main{padding-top:25px}.custom-form-actions>*{flex:1}}