*,*:before,*:after{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}html,body,#root{height:100%;overflow:hidden}body{font-family:Cinzel,Georgia,serif;background:#1a0f08}:root{--bead: 50px;--rope-w: 7px;--gold: #c9a84c;--gold-dim: #7a6030;--gold-faint: rgba(201,168,76,.12);--bg: #160c06}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none}.app{height:100vh;height:100svh;display:flex;flex-direction:column;align-items:center;background:radial-gradient(ellipse 70% 40% at 50% 0%,#3d2010 0%,transparent 100%),radial-gradient(ellipse 70% 40% at 50% 100%,#3d2010 0%,transparent 100%),linear-gradient(180deg,#180d06,#221208 45%,#180d06);position:relative;overflow:hidden;touch-action:none;cursor:pointer}.app--flash{animation:flash 1.4s ease forwards}@keyframes flash{0%{filter:brightness(1)}12%{filter:brightness(2.4) saturate(1.6)}35%{filter:brightness(1.3)}to{filter:brightness(1)}}.wood-grain{position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:0;opacity:1;visibility:visible;transition:opacity 1s ease-in-out,visibility 1s ease-in-out;transform:translateZ(0);will-change:transform}.wood-grain--hidden{opacity:0;visibility:hidden}.header{z-index:1;flex-shrink:0;text-align:center;padding:clamp(14px,4vw,26px) 20px 8px;pointer-events:none}.header--wallpaper-mode{position:absolute;top:43%;left:50%;transform:translate(-50%,-50%);width:100%;z-index:10;padding:0 20px}.zikir-arabic{font-family:Amiri,serif;font-size:clamp(1.9rem,7.5vw,2.7rem);color:var(--gold);direction:rtl;line-height:1.25;text-shadow:0 0 22px rgba(201,168,76,.5),0 0 55px rgba(201,168,76,.18)}.zikir-latin{font-family:Cinzel,serif;font-size:clamp(.85rem,3.5vw,1.1rem);font-weight:700;color:#ffe9b0;letter-spacing:.18em;margin-top:8px;text-shadow:0 2px 5px rgba(0,0,0,.9),0 0 15px rgba(201,168,76,.5)}.header--pulse .zikir-arabic,.header--pulse .zikir-latin{animation:zikir-pulse .4s cubic-bezier(.34,1.56,.64,1);transform-origin:center center;will-change:transform,filter}@keyframes zikir-pulse{0%{transform:scale(1);filter:brightness(1)}30%{transform:scale(1.05);filter:brightness(1.3)}to{transform:scale(1);filter:brightness(1)}}.tasbih{z-index:1;flex:1;min-height:0;position:relative;width:100%;pointer-events:none;transition:transform .7s cubic-bezier(.34,1.56,.64,1);transform-origin:100% 100%}.tasbih--wallpaper-mode{transform:scale(.6) translate(120px,-20px)}.counter-wrap:before,.counter-wrap:after{content:"";position:absolute;left:50%;transform:translate(-50%);width:var(--rope-w);background:linear-gradient(180deg,#2e1c08,#7a5828,#8a6838,#7a5828,#2e1c08);border-radius:3px;box-shadow:2px 0 4px #00000080,-1px 0 2px #0000004d}.counter-wrap:before{bottom:calc(100% - 1px);height:28px}.counter-wrap:after{top:calc(100% - 1px);height:28px}.cluster{position:absolute;left:50%;transform:translate(-50%);width:80px;display:flex;flex-direction:column;align-items:center;overflow:hidden;z-index:2}.cluster--top{top:0;bottom:calc(50% + 60px);justify-content:flex-end}.cluster--bot{top:calc(50% + 60px);bottom:0;justify-content:flex-start}.overflow-tag{font-family:Cinzel,serif;font-size:.6rem;color:var(--gold-dim);letter-spacing:.1em;display:block;text-align:center}.cluster--top .overflow-tag{margin-bottom:4px}.overflow-tag--bot{margin-top:6px}.bead{width:var(--bead);height:var(--bead);border-radius:50%;flex-shrink:0;position:relative;background:radial-gradient(circle at 36% 30%,#ddb87e,#bc8850 16%,#8e5e30,#6a3c16 56%,#482207 74%,#2c1104 90%);box-shadow:inset -5px -5px 13px #0000009e,inset 4px 4px 10px #ffcd6e33,3px 6px 16px #000000b8,0 2px 5px #00000073}.bead--kubah{width:44px;height:72px;border-radius:22px 22px 0 0;background:radial-gradient(ellipse at 50% 18%,#fff4c0,#e8c050 14%,#b88828,#7a5818 54%,#3e2c08 78%);box-shadow:inset -4px -8px 18px #0000008c,inset 3px 5px 12px #ffeb8266,3px 8px 20px #000000bf,0 2px 6px #00000080,0 0 18px #c9a84c59}.bead--dim{background:radial-gradient(circle at 36% 30%,#b89060,#966840 16%,#6a4420,#4a2c0a 56%,#301603 74%,#1c0a02 90%);box-shadow:inset -5px -5px 13px #000000b8,inset 4px 4px 10px #ffb9501a,3px 6px 16px #000c}.bead__shine{position:absolute;top:13%;left:17%;width:32%;height:22%;background:radial-gradient(ellipse at 40% 40%,rgba(255,245,210,.48),transparent 68%);border-radius:50%;pointer-events:none}.bead__hole{position:absolute;left:50%;transform:translate(-50%);width:7px;height:7px;border-radius:50%;background:radial-gradient(circle,#080300 55%,#200c04);box-shadow:inset 0 1px 3px #000000f2}.bead__hole--top{top:-1px}.bead__hole--bot{bottom:-1px}.counter-wrap{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:3;width:116px;height:116px;display:flex;align-items:center;justify-content:center}.progress-ring{display:none;position:absolute;top:-8px;right:-8px;bottom:-8px;left:-8px;width:calc(100% + 16px);height:calc(100% + 16px);overflow:visible;pointer-events:none}.progress-ring__track{fill:none;stroke:#c9a84c1a;stroke-width:2.5}.progress-ring__fill{fill:none;stroke:var(--gold);stroke-width:2.5;stroke-linecap:round;transition:stroke-dasharray .35s ease}.counter{position:absolute;top:0;right:0;bottom:0;left:0;border-radius:50%;background:radial-gradient(circle at 36% 30%,#ddb87e,#bc8850 14%,#8e5e30,#6a3c16 54%,#482207 72%,#2c1104 88%);box-shadow:inset -8px -8px 20px #000000a6,inset 6px 6px 16px #ffcd6e2e,inset 0 0 4px #ffffff08,4px 8px 24px #000c,0 3px 8px #0000008c;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:0}.counter:after{content:"";position:absolute;bottom:-1px;left:50%;transform:translate(-50%);width:10px;height:10px;border-radius:50%;background:radial-gradient(circle,#080300 55%,#1e0a02);box-shadow:inset 0 1px 4px #000000f2;z-index:2}.counter-shine{position:absolute;top:12%;left:16%;width:34%;height:24%;background:radial-gradient(ellipse at 40% 40%,rgba(255,248,220,.42),transparent 68%);border-radius:50%;pointer-events:none}.counter-text-overlay{display:flex;flex-direction:column;align-items:center;justify-content:center}.counter__num{font-family:Cinzel,serif;font-size:2.3rem;font-weight:700;color:#ffe9b0;text-shadow:0 1px 3px rgba(0,0,0,.8),0 0 16px rgba(255,210,100,.5);line-height:1;position:relative;z-index:1}.counter__frac{font-family:Cinzel,serif;font-size:.8rem;font-weight:700;color:#ffe696f2;letter-spacing:.08em;position:relative;z-index:1;margin-top:2px;text-shadow:0 1px 4px rgba(0,0,0,.9),0 0 8px rgba(255,210,100,.4)}.anim-imam,.anim-replace{position:absolute;top:50%;left:50%;border-radius:50%;pointer-events:none;will-change:transform,opacity;backface-visibility:hidden;background:radial-gradient(circle at 36% 30%,#ddb87e,#bc8850 14%,#8e5e30,#6a3c16 54%,#482207 72%,#2c1104 88%)}.anim-imam{width:116px;height:116px;z-index:10;box-shadow:inset -8px -8px 20px #000000a6,inset 6px 6px 16px #ffcd6e2e,4px 8px 24px #000c;display:flex;flex-direction:column;align-items:center;justify-content:center;animation:imam-drop .35s cubic-bezier(.4,0,.9,.6) forwards}.anim-imam:after{content:"";position:absolute;left:50%;transform:translate(-50%);width:10px;height:10px;border-radius:50%;background:radial-gradient(circle,#080300 55%,#1e0a02);box-shadow:inset 0 1px 4px #000000f2}.anim-imam:after{bottom:-1px}@keyframes imam-drop{0%{transform:translate(-50%,-50%) scale(1);opacity:1}to{transform:translate(-50%,calc(-50% + 80px)) scale(.45);opacity:0}}.anim-replace{width:116px;height:116px;z-index:9;box-shadow:inset -8px -8px 20px #000000a6,inset 6px 6px 16px #ffcd6e2e,4px 8px 24px #000c;animation:bead-replace .52s cubic-bezier(.2,.8,.4,1) forwards}.anim-replace:after{content:"";position:absolute;bottom:-1px;left:50%;transform:translate(-50%);width:10px;height:10px;border-radius:50%;background:radial-gradient(circle,#080300 55%,#1e0a02);box-shadow:inset 0 1px 4px #000000f2}.anim-replace .bead__shine{position:absolute;top:13%;left:17%;width:32%;height:22%;background:radial-gradient(ellipse at 40% 40%,rgba(255,245,210,.48),transparent 68%);border-radius:50%}@keyframes bead-replace{0%{transform:translate(-50%,calc(-50% - 80px)) scale(.43);opacity:.85}to{transform:translate(-50%,-50%) scale(1);opacity:1}}.footer{z-index:1;flex-shrink:0;display:flex;flex-direction:column;align-items:center;gap:10px;padding:8px 20px clamp(16px,4vw,28px)}.footer__row{display:flex;align-items:center;gap:12px}.meta{font-family:Cinzel,serif;font-size:.85rem;font-weight:700;color:#e8ca8e;letter-spacing:.08em;text-shadow:0 1px 3px rgba(0,0,0,.8)}.divider{color:#8a6838;font-size:.85rem}.reset-btn{pointer-events:all;background:#5c3a1e66;border:1px solid #a07840;color:#ffe9b0;padding:8px 22px;border-radius:20px;font-family:Cinzel,serif;font-size:.75rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;cursor:pointer;transition:background .2s,border-color .2s,color .2s;margin-left:6px;box-shadow:0 2px 6px #0006}.reset-btn:hover,.reset-btn:active{background:#8c5f2d99;border-color:var(--gold);color:#fff}.hint{font-size:.7rem;color:var(--gold-dim);letter-spacing:.12em;text-transform:uppercase;animation:hint-pulse 3s ease-in-out infinite}.hint__arrow{display:inline-block;animation:hint-drop 3s ease-in-out infinite}@keyframes hint-pulse{0%,to{opacity:.35}50%{opacity:.75}}@keyframes hint-drop{0%,to{transform:translateY(0)}50%{transform:translateY(3px)}}.overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:100;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;background:#080401d1;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);animation:overlay-in .28s ease both;pointer-events:none}@keyframes overlay-in{0%{opacity:0;transform:scale(.93)}to{opacity:1;transform:scale(1)}}.overlay__star{font-size:2.8rem;color:var(--gold);text-shadow:0 0 40px rgba(201,168,76,.9);animation:star-appear .55s cubic-bezier(.34,1.56,.64,1) both}@keyframes star-appear{0%{transform:rotate(-120deg) scale(0);opacity:0}to{transform:rotate(0) scale(1);opacity:1}}.overlay__title{font-family:Amiri,serif;font-size:clamp(2rem,8vw,2.8rem);color:var(--gold);direction:rtl;text-shadow:0 0 28px rgba(201,168,76,.75)}.overlay__sub{font-family:Cinzel,serif;font-size:.8rem;color:var(--gold-dim);letter-spacing:.22em;text-transform:uppercase}.overlay--modal{pointer-events:auto}.modal-box{background:linear-gradient(145deg,#2a180e,#1c0f08);border:1px solid #5c3a1e;border-radius:16px;padding:24px;width:85%;max-width:320px;text-align:center;box-shadow:0 10px 30px #000c,inset 0 2px 5px #ffffff0d;animation:modal-pop .3s cubic-bezier(.34,1.56,.64,1) forwards}@keyframes modal-pop{0%{transform:scale(.8);opacity:0}to{transform:scale(1);opacity:1}}.modal-title{font-family:Cinzel,serif;font-size:1.2rem;font-weight:700;color:var(--gold);margin-bottom:8px}.modal-desc{font-size:.85rem;color:#bca078;margin-bottom:24px;line-height:1.4}.modal-actions{display:flex;gap:12px;justify-content:center}.modal-btn{flex:1;padding:10px 0;border-radius:8px;font-family:Cinzel,serif;font-size:.8rem;font-weight:700;cursor:pointer;transition:all .2s;letter-spacing:.05em}.modal-btn--cancel{background:transparent;border:1px solid #5c3a1e;color:#bca078}.modal-btn--cancel:active{background:#5c3a1e4d}.modal-btn--confirm{background:#8a2a2a;border:1px solid #a83c3c;color:#ffe9b0;box-shadow:0 2px 8px #0006}.modal-btn--confirm:active{background:#732222}.setup-overlay{z-index:200;background:#100804eb;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);pointer-events:auto}.setup-box{background:linear-gradient(145deg,#2a180e,#1c0f08);border:1px solid #5c3a1e;border-radius:20px;padding:24px 20px;width:90%;max-width:380px;max-height:92svh;overflow-y:auto;display:flex;flex-direction:column;gap:20px;box-shadow:0 15px 40px #000000e6,inset 0 2px 5px #ffffff0d;animation:modal-pop .4s cubic-bezier(.34,1.56,.64,1) forwards}.setup-box::-webkit-scrollbar{width:3px}.setup-box::-webkit-scrollbar-track{background:transparent}.setup-box::-webkit-scrollbar-thumb{background:#5c3a1e;border-radius:2px}.setup-title{font-family:Amiri,serif;font-size:1.8rem;color:var(--gold);text-align:center;text-shadow:0 2px 10px rgba(201,168,76,.3)}.setup-columns{display:flex;gap:16px}.setup-col{flex:1;display:flex;flex-direction:column;gap:10px;min-width:0}.setup-col-list{display:flex;flex-direction:column;gap:10px;max-height:220px;overflow-y:auto;padding-right:4px}.setup-col-list::-webkit-scrollbar{width:3px}.setup-col-list::-webkit-scrollbar-track{background:transparent}.setup-col-list::-webkit-scrollbar-thumb{background:#5c3a1e;border-radius:2px}.setup-col-title{font-family:Cinzel,serif;font-size:.8rem;color:#bca078;text-align:center;letter-spacing:.1em;text-transform:uppercase;margin-bottom:4px;border-bottom:1px solid #5c3a1e;padding-bottom:8px}.setup-opt{background:#00000040;border:1px solid #4a2c1a;color:#a08050;padding:10px 6px;border-radius:12px;font-family:Cinzel,serif;font-size:.78rem;font-weight:700;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;justify-content:center;text-align:center;line-height:1.2}.setup-custom-input{background:#00000040;border:1px solid #4a2c1a;color:#a08050;padding:10px;border-radius:12px;font-family:Cinzel,serif;font-size:.75rem;font-weight:700;width:100%;outline:none;text-align:center;transition:all .2s ease}.setup-custom-input::placeholder{color:#5a3c20;font-style:italic}.setup-custom-input--active,.setup-custom-input:focus{background:#c9a84c26;border-color:var(--gold);color:#ffe9b0;box-shadow:0 0 12px #c9a84c33}.setup-opt--active{background:#c9a84c26;border-color:var(--gold);color:#ffe9b0;box-shadow:0 0 12px #c9a84c33}.setup-start-btn{margin-top:8px;background:linear-gradient(to right,#8a6838,#a88040);border:none;color:#160c06;padding:16px;border-radius:14px;font-family:Cinzel,serif;font-size:1.05rem;font-weight:900;letter-spacing:.1em;text-transform:uppercase;cursor:pointer;box-shadow:0 4px 15px #00000080;transition:transform .2s,filter .2s}.setup-start-btn:active{transform:scale(.96);filter:brightness(.9)}.setup-actions{display:flex;flex-direction:column;gap:10px;margin-top:8px}.tukar-btn{pointer-events:all;background:#321e0a66;border:1px solid #8a6838;color:#e8ca8e;padding:8px 22px;border-radius:20px;font-family:Cinzel,serif;font-size:.75rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;cursor:pointer;transition:background .2s,border-color .2s,color .2s;box-shadow:0 2px 6px #0006}.tukar-btn:hover,.tukar-btn:active{background:#64461499;border-color:var(--gold);color:#fff}.records-btn{pointer-events:all;background:#1e324666;border:1px solid #4a7090;color:#b8d8f0;padding:8px 22px;border-radius:20px;font-family:Cinzel,serif;font-size:.75rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;cursor:pointer;transition:background .2s,border-color .2s,color .2s;box-shadow:0 2px 6px #0006}.records-btn:hover,.records-btn:active{background:#325a8299;border-color:#80b8e0;color:#fff}.records-overlay{z-index:200;background:#080402eb;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.records-box{background:linear-gradient(145deg,#0e1820,#080f16);border:1px solid #2a4860;border-radius:20px;padding:20px 18px 24px;width:92%;max-width:380px;max-height:86vh;display:flex;flex-direction:column;gap:14px;box-shadow:0 15px 40px #000000e6,inset 0 1px 4px #50a0ff0f;animation:modal-pop .35s cubic-bezier(.34,1.56,.64,1) forwards}.records-header{display:flex;align-items:center;justify-content:space-between}.records-title{font-family:Cinzel,serif;font-size:1.1rem;font-weight:700;color:#80b8e0;letter-spacing:.1em}.records-close{background:transparent;border:none;color:#4a7090;font-size:1.1rem;cursor:pointer;padding:4px 8px;border-radius:8px;transition:color .2s}.records-close:active{color:#80b8e0}.records-tabs{display:flex;gap:6px}.records-tab{flex:1;padding:8px 4px;border-radius:10px;border:1px solid #1e3448;background:#00000040;color:#4a7090;font-family:Cinzel,serif;font-size:.65rem;font-weight:700;letter-spacing:.06em;cursor:pointer;transition:all .2s}.records-tab--active{background:#1e50824d;border-color:#4a90c0;color:#b8d8f0;box-shadow:0 0 10px #4a90c033}.month-scroller{display:flex;gap:6px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;padding:2px 0 4px}.month-scroller::-webkit-scrollbar{display:none}.month-opt{flex-shrink:0;scroll-snap-align:center;padding:6px 12px;border-radius:20px;border:1px solid #1e3448;background:#00000040;color:#4a7090;font-family:Cinzel,serif;font-size:.65rem;font-weight:700;letter-spacing:.04em;cursor:pointer;transition:all .2s;white-space:nowrap}.month-opt--active{background:#1e50824d;border-color:#4a90c0;color:#b8d8f0;box-shadow:0 0 10px #4a90c033}.records-date-input{width:100%;background:#0000004d;border:1px solid #2a4860;border-radius:10px;color:#b8d8f0;font-family:Cinzel,serif;font-size:.8rem;padding:8px 12px;outline:none;color-scheme:dark}.records-period{font-family:Cinzel,serif;font-size:.75rem;color:#4a7090;letter-spacing:.08em;text-align:center}.records-list{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:8px;min-height:80px;max-height:40vh;padding-right:2px}.records-list::-webkit-scrollbar{width:3px}.records-list::-webkit-scrollbar-track{background:transparent}.records-list::-webkit-scrollbar-thumb{background:#2a4860;border-radius:2px}.records-item{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;background:#14325040;border:1px solid #1a3448;border-radius:10px}.records-item--total{background:#1e508233;border-color:#2a5880;font-weight:700}.records-item--total span{font-family:Cinzel,serif;font-size:.88rem;color:#80b8e0;letter-spacing:.06em}.records-zikir{font-family:Cinzel,serif;font-size:.78rem;color:#8ab8d8;letter-spacing:.04em}.records-count{font-family:Cinzel,serif;font-size:1rem;font-weight:700;color:#b8d8f0}.records-divider{height:1px;background:#1a3448;margin:2px 0}.records-empty{font-family:Cinzel,serif;font-size:.8rem;color:#2a5070;text-align:center;padding:24px 0;letter-spacing:.06em}.records-reset-btn{width:100%;padding:10px;border-radius:10px;background:#641e1e4d;border:1px solid #6a2a2a;color:#e09090;font-family:Cinzel,serif;font-size:.75rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;cursor:pointer;transition:all .2s}.records-reset-btn:active{background:#8c282880;border-color:#a83c3c;color:#ffe0e0}.footer-btn--sm{padding:6px 16px;font-size:.68rem}.picker-overlay{z-index:300;background:#0a0502ed;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.picker-box{background:linear-gradient(145deg,#2a180e,#1c0f08);border:1px solid #5c3a1e;border-radius:20px;padding:22px 20px 24px;width:88%;max-width:340px;display:flex;flex-direction:column;gap:18px;box-shadow:0 15px 40px #000000e6,inset 0 2px 5px #ffffff0d;animation:modal-pop .35s cubic-bezier(.34,1.56,.64,1) forwards}.picker-header{display:flex;align-items:center;justify-content:space-between}.picker-title{font-family:Cinzel,serif;font-size:1rem;font-weight:700;color:var(--gold);letter-spacing:.1em}.picker-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(70px,1fr));gap:10px}.picker-card{display:flex;flex-direction:column;align-items:center;gap:6px;background:#00000038;border:1px solid #3a2010;border-radius:14px;padding:12px 6px 10px;cursor:pointer;transition:all .18s ease}.picker-card:active{transform:scale(.94)}.picker-card--active{background:#c9a84c1f;border-color:var(--gold);box-shadow:0 0 14px var(--gold-faint)}.picker-swatch{display:block;width:38px;height:38px;border-radius:50%;border:2px solid rgba(255,255,255,.08);box-shadow:inset -4px -4px 8px #0000008c,inset 2px 2px 5px #fff3,2px 3px 8px #0009;transition:all .18s}.picker-card--active .picker-swatch{border-color:var(--gold);box-shadow:inset -4px -4px 8px #0000008c,inset 2px 2px 5px #fff3,2px 3px 8px #0009,0 0 12px var(--gold-faint)}.picker-label{font-family:Cinzel,serif;font-size:.6rem;font-weight:700;color:#7a5830;letter-spacing:.05em;transition:color .18s}.picker-card--active .picker-label{color:var(--gold)}.setup-customize{display:flex;flex-direction:column;gap:10px;border-top:1px solid #3a2010;padding-top:14px}.setup-customize-row{display:flex;align-items:center;gap:10px}.setup-col-title--inline{flex-shrink:0;width:48px;text-align:right;border-bottom:none;padding-bottom:0;margin-bottom:0}.setup-swatches{display:flex;gap:6px;overflow-x:auto;-webkit-overflow-scrolling:touch;flex:1;padding:2px 0}.setup-swatches::-webkit-scrollbar{display:none}.swatch-btn{display:flex;flex-direction:column;align-items:center;gap:3px;background:none;border:none;cursor:pointer;padding:3px;border-radius:8px;flex-shrink:0;transition:all .15s}.swatch-circle{display:block;width:26px;height:26px;border-radius:50%;border:2px solid rgba(255,255,255,.08);box-shadow:inset -3px -3px 6px #0000008c,inset 2px 2px 4px #ffffff2e,1px 2px 5px #0000008c;transition:all .15s}.swatch-btn--active .swatch-circle{border-color:var(--gold);box-shadow:inset -3px -3px 6px #0000008c,inset 2px 2px 4px #ffffff2e,1px 2px 5px #0000008c,0 0 10px var(--gold-faint),0 0 4px #c9a84c66}.swatch-label{font-family:Cinzel,serif;font-size:.48rem;color:#5c3c1e;letter-spacing:.03em;transition:color .15s;white-space:nowrap}.swatch-btn--active .swatch-label{color:var(--gold)}.theme-perak{--gold: #a0b0cc;--gold-dim: #607080;--gold-faint: rgba(160,176,204,.12);background:radial-gradient(ellipse 70% 40% at 50% 0%,#2a3448 0%,transparent 100%),radial-gradient(ellipse 70% 40% at 50% 100%,#2a3448 0%,transparent 100%),linear-gradient(180deg,#10141e,#181e2c 45%,#10141e)}.theme-zamrud{--gold: #58b870;--gold-dim: #337848;--gold-faint: rgba(88,184,112,.12);background:radial-gradient(ellipse 70% 40% at 50% 0%,#183c20 0%,transparent 100%),radial-gradient(ellipse 70% 40% at 50% 100%,#183c20 0%,transparent 100%),linear-gradient(180deg,#081410,#102018 45%,#081410)}.theme-lautan{--gold: #5090d0;--gold-dim: #305878;--gold-faint: rgba(80,144,208,.12);background:radial-gradient(ellipse 70% 40% at 50% 0%,#102840 0%,transparent 100%),radial-gradient(ellipse 70% 40% at 50% 100%,#102840 0%,transparent 100%),linear-gradient(180deg,#060c16,#0e1828 45%,#060c16)}.theme-mawar{--gold: #cc7888;--gold-dim: #7c4858;--gold-faint: rgba(204,120,136,.12);background:radial-gradient(ellipse 70% 40% at 50% 0%,#3c1828 0%,transparent 100%),radial-gradient(ellipse 70% 40% at 50% 100%,#3c1828 0%,transparent 100%),linear-gradient(180deg,#160810,#201018 45%,#160810)}.beads-mutiara .bead,.beads-mutiara .bead--dim{background:radial-gradient(circle at 36% 30%,#fffcf8,#ede4d8,#d4c8bc 44%,#b8a89c 64%,#988878 82%,#786858 94%);box-shadow:inset -5px -5px 13px #00000047,inset 4px 4px 10px #ffffffa6,3px 6px 16px #00000085,0 0 8px #fff5eb2e}.beads-mutiara .bead--kubah{background:radial-gradient(ellipse at 50% 18%,#fffef8,#f4eee4 18%,#e0ceba,#c8b0a0,#a89080 78%);box-shadow:inset -4px -8px 18px #00000038,inset 3px 5px 12px #ffffffb8,3px 8px 20px #00000094,0 0 18px #fff5eb47}.beads-mutiara .counter,.beads-mutiara .anim-imam,.beads-mutiara .anim-replace{background:radial-gradient(circle at 36% 30%,#fffcf8,#ede4d8,#d4c8bc 44%,#b8a89c 64%,#988878 82%,#786858 94%);box-shadow:inset -8px -8px 20px #00000047,inset 6px 6px 16px #ffffff9e,4px 8px 24px #0009,0 0 12px #fff5eb2e}.beads-mutiara .bead__shine,.beads-mutiara .counter-shine{background:radial-gradient(ellipse at 40% 40%,rgba(255,255,255,.8),transparent 68%)}.beads-mutiara .counter__num{color:#2a1408;text-shadow:0 1px 3px rgba(255,255,255,.5)}.beads-mutiara .counter__frac{color:#2a1408a6}.beads-kristal .bead,.beads-kristal .bead--dim{background:radial-gradient(circle at 36% 30%,#eaf6ff,#b8d8f0,#7aaed8 44%,#4878b0 64%,#205888 82%,#0a3050 94%);box-shadow:inset -5px -5px 13px #0006,inset 4px 4px 10px #b4f0ff6b,3px 6px 16px #0000009e,0 0 10px #50a0ff2e}.beads-kristal .bead--kubah{background:radial-gradient(ellipse at 50% 18%,#f4fcff,#c8e8ff 18%,#88c0e0 40%,#5090c8,#266890 80%);box-shadow:inset -4px -8px 18px #00000061,inset 3px 5px 12px #b4f0ff85,3px 8px 20px #000000ad,0 0 18px #50a0ff52}.beads-kristal .counter,.beads-kristal .anim-imam,.beads-kristal .anim-replace{background:radial-gradient(circle at 36% 30%,#eaf6ff,#b8d8f0,#7aaed8 44%,#4878b0 64%,#205888 82%,#0a3050 94%)}.beads-kristal .bead__shine,.beads-kristal .counter-shine{background:radial-gradient(ellipse at 40% 40%,rgba(220,248,255,.72),transparent 68%)}.beads-kristal .counter__num{color:#d8f0ff}.beads-kristal .counter__frac{color:#b4dcffa6}.beads-akik .bead,.beads-akik .bead--dim{background:radial-gradient(circle at 36% 30%,#f09090,#cc5050,#9a2828,#701010 60%,#480808 78%,#2c0404 92%);box-shadow:inset -5px -5px 13px #000000ad,inset 4px 4px 10px #ff96642e,3px 6px 16px #000000c7,0 0 8px #b4282833}.beads-akik .bead--kubah{background:radial-gradient(ellipse at 50% 18%,#ffc0a0,#ee8060 18%,#c84030,#902020,#580808 78%);box-shadow:inset -4px -8px 18px #00000094,inset 3px 5px 12px #ffa0785c,3px 8px 20px #000c,0 0 18px #c832325c}.beads-akik .counter,.beads-akik .anim-imam,.beads-akik .anim-replace{background:radial-gradient(circle at 36% 30%,#f09090,#cc5050,#9a2828,#701010 60%,#480808 78%,#2c0404 92%)}.beads-akik .bead__shine,.beads-akik .counter-shine{background:radial-gradient(ellipse at 40% 40%,rgba(255,200,180,.55),transparent 68%)}.beads-pirus .bead,.beads-pirus .bead--dim{background:radial-gradient(circle at 36% 30%,#90e0d8,#48b8a8,#208878,#0a6060 60%,#044848 78%,#022828 92%);box-shadow:inset -5px -5px 13px #0000008c,inset 4px 4px 10px #64dcc840,3px 6px 16px #000000ad,0 0 8px #28b4a02e}.beads-pirus .bead--kubah{background:radial-gradient(ellipse at 50% 18%,#c0f0e8,#70d0c0 18%,#30a890,#107868,#045050 78%);box-shadow:inset -4px -8px 18px #0000007a,inset 3px 5px 12px #64dcc86b,3px 8px 20px #000000b8,0 0 18px #28b4a057}.beads-pirus .counter,.beads-pirus .anim-imam,.beads-pirus .anim-replace{background:radial-gradient(circle at 36% 30%,#90e0d8,#48b8a8,#208878,#0a6060 60%,#044848 78%,#022828 92%)}.beads-pirus .bead__shine,.beads-pirus .counter-shine{background:radial-gradient(ellipse at 40% 40%,rgba(180,255,245,.55),transparent 68%)}.beads-pirus .counter__num{color:#c8fff8}.beads-pirus .counter__frac{color:#a0f0e4a6}.beads-onyx .bead,.beads-onyx .bead--dim{background:radial-gradient(circle at 36% 30%,#707080,#484858 18%,#303040,#202030 58%,#141420 76%,#080810 92%);box-shadow:inset -5px -5px 13px #000000e6,inset 4px 4px 10px #c8c8ff1a,3px 6px 16px #000000f2,0 0 6px #6464a01f}.beads-onyx .bead--kubah{background:radial-gradient(ellipse at 50% 18%,#9898b0,#606070 18%,#404050,#282838,#181828 78%);box-shadow:inset -4px -8px 18px #000c,inset 3px 5px 12px #c8c8ff1f,3px 8px 20px #000000eb,0 0 18px #6464b433}.beads-onyx .counter,.beads-onyx .anim-imam,.beads-onyx .anim-replace{background:radial-gradient(circle at 36% 30%,#707080,#484858 18%,#303040,#202030 58%,#141420 76%,#080810 92%)}.beads-onyx .bead__shine,.beads-onyx .counter-shine{background:radial-gradient(ellipse at 40% 40%,rgba(200,200,255,.3),transparent 68%)}.beads-ambar .bead,.beads-ambar .bead--dim{background:radial-gradient(circle at 36% 30%,#ffe890,#e8b030,#c07810,#985008 60%,#6e3002 78%,#481800 92%);box-shadow:inset -5px -5px 13px #00000080,inset 4px 4px 10px #ffdc5059,3px 6px 16px #000000ad,0 0 10px #d28c0038}.beads-ambar .bead--kubah{background:radial-gradient(ellipse at 50% 18%,#fff4a0,#f0c840 18%,#d09020,#a06010,#703808 78%);box-shadow:inset -4px -8px 18px #00000073,inset 3px 5px 12px #ffe6647a,3px 8px 20px #000000b3,0 0 20px #dca00066}.beads-ambar .counter,.beads-ambar .anim-imam,.beads-ambar .anim-replace{background:radial-gradient(circle at 36% 30%,#ffe890,#e8b030,#c07810,#985008 60%,#6e3002 78%,#481800 92%);box-shadow:inset -8px -8px 20px #00000080,inset 6px 6px 16px #ffdc5052,4px 8px 24px #000000b3,0 0 14px #d28c0033}.beads-ambar .bead__shine,.beads-ambar .counter-shine{background:radial-gradient(ellipse at 40% 40%,rgba(255,250,180,.68),transparent 68%)}.beads-ambar .counter__num{color:#2a1200;text-shadow:0 1px 3px rgba(255,200,0,.4)}.beads-ambar .counter__frac{color:#2a1200a6}.appearance-section-title{font-family:Cinzel,serif;font-size:.75rem;font-weight:700;color:#a08050;letter-spacing:.1em;text-transform:uppercase;margin-bottom:-6px;margin-top:4px}.appearance-divider{height:1px;background:#5c3a1e66;margin:4px 0}.picker-box{max-height:85svh;overflow-y:auto}.picker-box::-webkit-scrollbar{width:3px}.picker-box::-webkit-scrollbar-track{background:transparent}.picker-box::-webkit-scrollbar-thumb{background:#5c3a1e;border-radius:2px}.icon-btn{padding:6px 12px;font-size:1.1rem;border-radius:14px;display:flex;align-items:center;justify-content:center;line-height:1}.wallpaper-btn{position:absolute;top:16px;left:16px;z-index:50;padding:8px 12px;font-size:1.2rem;border-radius:14px;background:#321e0a66;border:1px solid #8a6838;color:#e8ca8e;cursor:pointer;transition:all .2s;box-shadow:0 2px 6px #0006;pointer-events:all;display:flex;align-items:center;justify-content:center;line-height:1}.wallpaper-btn:hover,.wallpaper-btn:active{background:#64461499;border-color:var(--gold)}.wallpaper-btn--active{background:var(--gold);color:#1a0a00;border-color:var(--gold);box-shadow:0 0 15px #c9a84c99}.obj-date-label{font-family:Cinzel,serif;font-size:.75rem;color:#a08050;letter-spacing:.08em;text-transform:uppercase;text-align:center;margin-bottom:12px;padding-bottom:10px;border-bottom:1px solid rgba(92,58,30,.35)}.obj-list{display:flex;flex-direction:column;gap:10px;max-height:52svh;overflow-y:auto;padding-right:2px}.obj-list::-webkit-scrollbar{width:3px}.obj-list::-webkit-scrollbar-thumb{background:#5c3a1e;border-radius:2px}.obj-card{width:100%;background:#1e1006b3;border:1px solid rgba(138,104,56,.35);border-radius:14px;padding:12px 14px;cursor:pointer;transition:border-color .2s,background .2s,transform .1s;text-align:left;display:flex;flex-direction:column;gap:10px}.obj-card:active{transform:scale(.98);background:#321e0acc}.obj-card--done{border-color:#50a05066;background:#1428148c;cursor:default}.obj-card--done:active{transform:none}.obj-card-top{display:flex;justify-content:space-between;align-items:flex-start;gap:8px}.obj-card-text{display:flex;flex-direction:column;gap:2px}.obj-card-arabic{font-family:Amiri,serif;font-size:1.15rem;color:var(--gold);direction:rtl;line-height:1.3}.obj-card-latin{font-size:.78rem;color:#c8a870;letter-spacing:.02em}.obj-card-status{flex-shrink:0}.obj-done-badge{font-size:.72rem;font-weight:700;letter-spacing:.04em;color:#60c060;background:#2864284d;border:1px solid rgba(80,160,80,.4);border-radius:20px;padding:3px 9px}.obj-tap-hint{font-size:.68rem;color:#a08050;letter-spacing:.02em}.obj-progress-bar-wrap{display:flex;align-items:center;gap:10px}.obj-progress-bar{flex:1;height:5px;background:#5c3a1e59;border-radius:4px;overflow:hidden}.obj-progress-fill{height:100%;background:linear-gradient(90deg,#c9a84c,#e8ca8e);border-radius:4px;transition:width .4s ease}.obj-card--done .obj-progress-fill{background:linear-gradient(90deg,#40a040,#80c880)}.obj-progress-label{font-size:.7rem;color:#a08050;white-space:nowrap;min-width:70px;text-align:right}.obj-setup-overlay{z-index:200}.obj-setup-box{background:linear-gradient(160deg,#1e0f04,#2a160a);border:1px solid rgba(138,104,56,.45);border-radius:22px;padding:20px 18px 18px;width:min(92vw,400px);max-height:88svh;display:flex;flex-direction:column;gap:0;box-shadow:0 8px 40px #000000b3}.obj-setup-hint{font-size:.78rem;color:#a08050;margin-bottom:12px;line-height:1.4}.obj-setup-list{display:flex;flex-direction:column;gap:8px;overflow-y:auto;max-height:55svh;padding-right:2px;margin-bottom:4px}.obj-setup-list::-webkit-scrollbar{width:3px}.obj-setup-list::-webkit-scrollbar-thumb{background:#5c3a1e;border-radius:2px}.obj-setup-row{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;border:1px solid rgba(92,58,30,.3);background:#140a0266;transition:border-color .2s,background .2s;flex-wrap:wrap}.obj-setup-row--on{border-color:#c9a84c66;background:#281808b3}.obj-check{width:26px;height:26px;border-radius:50%;border:2px solid #5c3a1e;background:transparent;color:var(--gold);font-size:.85rem;display:flex;align-items:center;justify-content:center;flex-shrink:0;cursor:pointer;transition:border-color .2s,background .2s}.obj-check--on{border-color:var(--gold);background:#c9a84c33}.obj-setup-info{flex:1;display:flex;flex-direction:column;gap:1px;cursor:pointer;min-width:0}.obj-setup-arabic{font-family:Amiri,serif;font-size:1rem;color:var(--gold);direction:rtl;line-height:1.2}.obj-setup-latin{font-size:.72rem;color:#a08050}.obj-count-chips{display:flex;gap:5px;flex-wrap:wrap;width:100%;margin-top:4px;padding-left:36px}.obj-chip{font-size:.72rem;padding:3px 9px;border-radius:20px;border:1px solid rgba(92,58,30,.5);background:#140a0280;color:#c8a870;cursor:pointer;transition:all .15s;font-family:inherit}.obj-chip--on{background:#c9a84c40;border-color:var(--gold);color:var(--gold);font-weight:700}.obj-chip-input{width:95px;text-align:center;outline:none;box-shadow:none}.obj-chip-input::placeholder{color:#c8a87066;font-style:italic;font-weight:400}.obj-chip-input:focus{background:#c9a84c40;border-color:var(--gold);color:var(--gold)}.menu-btn{font-family:Cinzel,serif;font-size:.88rem;font-weight:700;letter-spacing:.12em;color:var(--gold);background:#1e1006b3;border:1px solid rgba(138,104,56,.5);border-radius:22px;padding:9px 32px;cursor:pointer;transition:background .2s,border-color .2s,transform .1s;box-shadow:0 2px 10px #00000059}.menu-btn:active{transform:scale(.96);background:#3c240ce6;border-color:var(--gold)}.menu-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:150;background:#0000008c;display:flex;align-items:flex-end;justify-content:center;padding-bottom:24px;animation:fadeInBackdrop .18s ease}@keyframes fadeInBackdrop{0%{opacity:0}to{opacity:1}}.menu-popup{background:linear-gradient(160deg,#1e0f04,#2a160a);border:1px solid rgba(138,104,56,.45);border-radius:22px;padding:18px 14px 14px;width:min(88vw,320px);display:flex;flex-direction:column;gap:6px;box-shadow:0 -4px 40px #0009,0 8px 40px #00000080;animation:slideUpMenu .22s cubic-bezier(.22,1,.36,1)}@keyframes slideUpMenu{0%{opacity:0;transform:translateY(28px)}to{opacity:1;transform:translateY(0)}}.menu-popup-title{font-family:Cinzel,serif;font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#7a6030;text-align:center;margin-bottom:6px}.menu-item{display:flex;align-items:center;gap:14px;width:100%;padding:13px 16px;border-radius:14px;border:1px solid rgba(92,58,30,.3);background:#140a0266;color:#e8ca8e;font-family:inherit;font-size:.93rem;letter-spacing:.02em;cursor:pointer;transition:background .15s,border-color .15s,transform .1s;text-align:left}.menu-item:hover,.menu-item:active{background:#3c240cbf;border-color:#c9a84c66;transform:scale(.985)}.menu-item-icon{font-size:1.2rem;width:28px;text-align:center;flex-shrink:0}.menu-item--close{justify-content:center;margin-top:4px;color:#7a6030;border-color:transparent;background:transparent;font-size:.82rem;letter-spacing:.06em;padding:8px}.menu-item--close:hover,.menu-item--close:active{color:#c8a870;background:transparent;border-color:transparent;transform:none}.menu-backdrop--center{align-items:center;justify-content:center;padding-bottom:0}.menu-popup--wide{width:min(92vw,420px);max-height:82svh;overflow-y:auto;gap:10px;display:flex;flex-direction:column}.menu-popup--wide::-webkit-scrollbar{width:3px}.menu-popup--wide::-webkit-scrollbar-thumb{background:#5c3a1e;border-radius:2px}.menu-sub-header{display:flex;align-items:center;gap:8px;margin-bottom:4px}.menu-back-btn{font-family:Cinzel,serif;font-size:.72rem;font-weight:700;letter-spacing:.06em;color:#a08050;background:#1e100699;border:1px solid rgba(92,58,30,.4);border-radius:20px;padding:5px 12px;cursor:pointer;transition:color .15s,border-color .15s;white-space:nowrap;flex-shrink:0}.menu-back-btn:hover,.menu-back-btn:active{color:var(--gold);border-color:var(--gold)}.wallpaper-container{position:absolute;top:0;right:0;bottom:0;left:0;overflow:hidden;z-index:0;opacity:0;visibility:hidden;transition:opacity 1s ease-in-out,visibility 1s ease-in-out}.wallpaper-container--visible{opacity:1;visibility:visible}.wallpaper-layer{position:absolute;top:0;right:0;bottom:0;left:0;background-size:cover;background-position:center;opacity:0;transition:opacity 2s ease-in-out}.wallpaper-layer.active{opacity:1}.wallpaper-overlay{position:absolute;top:0;right:0;bottom:0;left:0;background:#00000073;pointer-events:none}.unsplash-attribution{position:absolute;bottom:8px;left:12px;z-index:10;font-family:sans-serif;font-size:.65rem;color:#fff9;pointer-events:all;text-shadow:0 1px 3px rgba(0,0,0,.8)}.unsplash-attribution a{color:#fffc;text-decoration:underline;text-decoration-color:#fff6}.unsplash-attribution a:hover{color:#fff;text-decoration-color:#fff}