/* Tasbih designs. Each design is a palette of the counter's existing bead, thread and sky variables,
   so the protected ring renderer stays untouched. Decorative layers are aria-hidden and motion-safe. */
[data-skin]{--skin-glow:rgba(243,212,147,.55)}
[data-skin="classic"]{--bead-off:#2C3F6B;--bead-off-hi:#4A6196;--bead-off-lo:#1B2A4D;--thread:#34497A;--gold:#F3D493;--amber-hi:#FFE9B8;--amber-mid:#E3A23A;--amber-lo:#8A5210}
[data-skin="olive"]{--bead-off:#4A3A2A;--bead-off-hi:#6E5843;--bead-off-lo:#2B2118;--thread:#6B5A44;--gold:#E8C99A;--amber-hi:#F3DDB6;--amber-mid:#A8743A;--amber-lo:#5A3714;--skin-sky1:#17130E;--skin-sky2:#2E261B;--skin-glow:rgba(232,201,154,.5)}
[data-skin="amber"]{--bead-off:#4E3311;--bead-off-hi:#76511F;--bead-off-lo:#2B1B07;--thread:#6A4A1E;--gold:#FFD27A;--amber-hi:#FFF0C2;--amber-mid:#F2A31B;--amber-lo:#9A4A08;--skin-sky1:#170E05;--skin-sky2:#33200B;--skin-glow:rgba(242,163,27,.55)}
[data-skin="turquoise"]{--bead-off:#1C4A55;--bead-off-hi:#2E6A74;--bead-off-lo:#0F2D35;--thread:#3A7C84;--gold:#E9D8A6;--amber-hi:#D9FFF8;--amber-mid:#2EC4B6;--amber-lo:#0B6E68;--skin-sky1:#061C22;--skin-sky2:#0E3842;--skin-glow:rgba(46,196,182,.55)}
[data-skin="pearl"]{--bead-off:#3A3E52;--bead-off-hi:#5B6079;--bead-off-lo:#23263A;--thread:#7A7F99;--gold:#F4EFFA;--amber-hi:#FFFFFF;--amber-mid:#E6E1EF;--amber-lo:#9C95B0;--skin-sky1:#15161F;--skin-sky2:#2C2E3F;--skin-glow:rgba(240,236,255,.6)}
[data-skin="golden"]{--bead-off:#3A2F12;--bead-off-hi:#5C4B1F;--bead-off-lo:#201907;--thread:#8C6A1E;--gold:#FFE7A0;--amber-hi:#FFF8DC;--amber-mid:#E8B531;--amber-lo:#7E560B;--skin-sky1:#100D06;--skin-sky2:#2A210C;--skin-glow:rgba(255,215,110,.7)}
[data-skin="ramadan"]{--bead-off:#2C2A5A;--bead-off-hi:#45437F;--bead-off-lo:#1A1938;--thread:#4C4A86;--gold:#F6DE95;--amber-hi:#FFF2C4;--amber-mid:#E9B949;--amber-lo:#8E6514;--skin-sky1:#0C0E30;--skin-sky2:#20225E;--skin-glow:rgba(233,185,73,.6)}
[data-skin="qadr"]{--bead-off:#1C2550;--bead-off-hi:#33417C;--bead-off-lo:#0E1432;--thread:#3B4A8A;--gold:#E6ECFF;--amber-hi:#FFFFFF;--amber-mid:#C9D6FF;--amber-lo:#6C7FC0;--skin-sky1:#03061A;--skin-sky2:#0F1B4D;--skin-glow:rgba(201,214,255,.7)}
[data-skin="arafah"]{--bead-off:#4A3550;--bead-off-hi:#6B5070;--bead-off-lo:#2C1E32;--thread:#7A5A6E;--gold:#FFD7B0;--amber-hi:#FFEBD6;--amber-mid:#F28C58;--amber-lo:#9E3E1C;--skin-sky1:#24183A;--skin-sky2:#6E4256;--skin-glow:rgba(242,140,88,.55)}
[data-skin="eid"]{--bead-off:#135E4B;--bead-off-hi:#22806A;--bead-off-lo:#0A3A2E;--thread:#2D8C72;--gold:#F6D98A;--amber-hi:#FFF4CC;--amber-mid:#E3B23C;--amber-lo:#86610F;--skin-sky1:#04211A;--skin-sky2:#0D4436;--skin-glow:rgba(227,178,60,.6)}
[data-skin="ashura"]{--bead-off:#2E1E22;--bead-off-hi:#4A3238;--bead-off-lo:#1A1013;--thread:#5A3A40;--gold:#E7C6BE;--amber-hi:#F4D9D2;--amber-mid:#A8434A;--amber-lo:#561419;--skin-sky1:#0E0809;--skin-sky2:#24161A;--skin-glow:rgba(168,67,74,.35)}
[data-skin="newyear"]{--bead-off:#26314F;--bead-off-hi:#3E4C72;--bead-off-lo:#151C33;--thread:#56648C;--gold:#E3EAFB;--amber-hi:#F7F9FF;--amber-mid:#B9C6E4;--amber-lo:#5D6C93;--skin-sky1:#0A0F22;--skin-sky2:#1D2849;--skin-glow:rgba(185,198,228,.6)}
[data-skin="mawlid"]{--bead-off:#1C3A2C;--bead-off-hi:#2E5844;--bead-off-lo:#0F2219;--thread:#3E7357;--gold:#F1E6C2;--amber-hi:#F2FFF7;--amber-mid:#3FAE6A;--amber-lo:#16603A;--skin-sky1:#071A11;--skin-sky2:#123A2A;--skin-glow:rgba(63,174,106,.55)}
[data-skin="rajab27"]{--bead-off:#2A1E4E;--bead-off-hi:#45337A;--bead-off-lo:#160F2E;--thread:#5A47A0;--gold:#EBDDFF;--amber-hi:#FAF5FF;--amber-mid:#A98AF0;--amber-lo:#4B2F96;--skin-sky1:#0E0822;--skin-sky2:#24164F;--skin-glow:rgba(169,138,240,.6)}
[data-skin="baraah"]{--bead-off:#1E3B44;--bead-off-hi:#335A66;--bead-off-lo:#10242A;--thread:#4A7480;--gold:#DDEFF2;--amber-hi:#F4FBFC;--amber-mid:#9CCFD8;--amber-lo:#3F7884;--skin-sky1:#071419;--skin-sky2:#163640;--skin-glow:rgba(156,207,216,.6)}
[data-skin="ghadir"]{--bead-off:#164A3E;--bead-off-hi:#256A5A;--bead-off-lo:#0B2C25;--thread:#3A8A76;--gold:#F4F0DC;--amber-hi:#FFFFFF;--amber-mid:#7FD6BE;--amber-lo:#1F7A63;--skin-sky1:#05201A;--skin-sky2:#0F3F33;--skin-glow:rgba(127,214,190,.6)}
[data-skin="jumuah"]{--bead-off:#23402F;--bead-off-hi:#365E46;--bead-off-lo:#13261B;--thread:#4A7A5C;--gold:#F3E7B5;--amber-hi:#FBF4D6;--amber-mid:#C9A646;--amber-lo:#6E5618;--skin-sky1:#0B1C13;--skin-sky2:#1A3526;--skin-glow:rgba(201,166,70,.55)}

/* Counter surface follows the design's sky; the classic design keeps the app's own sky. */
.counter[data-skin]:not([data-skin="classic"]){--sky1:var(--skin-sky1);--sky2:var(--skin-sky2)}
.counter[data-skin] .bead{filter:drop-shadow(0 1px 1.5px rgba(0,0,0,.35))}
.counter[data-skin] .celebrate .ring-wrap,.counter[data-skin] .c-stage.celebrate .ring-wrap{animation:skinGlow 1.2s ease-out}
@keyframes skinGlow{0%{filter:drop-shadow(0 0 0 transparent)}35%{filter:drop-shadow(0 0 28px var(--skin-glow))}100%{filter:drop-shadow(0 0 0 transparent)}}
.counter[data-skin] .ring-wrap::before,.counter[data-skin] .ring-wrap::after{content:"";position:absolute;inset:-6%;border-radius:50%;pointer-events:none}
/* Premium sheens */
.counter[data-skin="pearl"] .ring-wrap::after{background:conic-gradient(from 0deg,transparent 0 20%,rgba(255,255,255,.10) 30%,rgba(214,200,255,.12) 40%,transparent 52% 100%);mix-blend-mode:screen;animation:skinTurn 14s linear infinite}
.counter[data-skin="golden"] .ring-wrap::after{background:conic-gradient(from 90deg,transparent 0 30%,rgba(255,230,150,.16) 40%,transparent 50% 80%,rgba(255,230,150,.10) 88%,transparent 95%);mix-blend-mode:screen;animation:skinTurn 10s linear infinite}
.counter[data-skin="golden"] .ring-wrap::before{background:radial-gradient(circle at 50% 46%,rgba(255,215,110,.12),transparent 62%)}
/* Night skies and crescents */
.counter[data-skin="qadr"] .ring-wrap::before,.counter[data-skin="rajab27"] .ring-wrap::before,.counter[data-skin="baraah"] .ring-wrap::before{inset:-30% -20%;border-radius:0;background-image:radial-gradient(1.4px 1.4px at 12% 18%,#fff 60%,transparent),radial-gradient(1px 1px at 28% 72%,#fff 60%,transparent),radial-gradient(1.6px 1.6px at 82% 22%,#fff 60%,transparent),radial-gradient(1px 1px at 68% 84%,#fff 60%,transparent),radial-gradient(1.2px 1.2px at 92% 58%,#fff 60%,transparent),radial-gradient(1px 1px at 6% 52%,#fff 60%,transparent),radial-gradient(1.3px 1.3px at 46% 8%,#fff 60%,transparent);opacity:.75;animation:skinTwinkle 4.5s ease-in-out infinite alternate}
.counter[data-skin="ramadan"] .ring-wrap::before,.counter[data-skin="newyear"] .ring-wrap::before{inset:auto -2% auto auto;top:-4%;width:18%;height:18%;border-radius:50%;box-shadow:inset -.55em -.2em 0 0 var(--gold);transform:rotate(-20deg);font-size:clamp(14px,4vw,22px);opacity:.9}
.counter[data-skin="eid"] .ring-wrap::after,.counter[data-skin="mawlid"] .ring-wrap::after,.counter[data-skin="ghadir"] .ring-wrap::after{background:radial-gradient(circle at 50% 46%,var(--skin-glow),transparent 58%);opacity:.22}
.counter[data-skin="arafah"] .ring-wrap::after{inset:auto -20% -12%;height:40%;border-radius:50% 50% 0 0;background:radial-gradient(ellipse at 50% 100%,rgba(255,190,130,.28),transparent 70%)}
.counter[data-skin="jumuah"] .ring-wrap::after{background:radial-gradient(circle at 50% 46%,rgba(201,166,70,.14),transparent 60%)}
@keyframes skinTurn{to{transform:rotate(1turn)}}
@keyframes skinTwinkle{from{opacity:.45}to{opacity:.85}}

/* Gallery */
.tasbih-gallery{display:grid;gap:12px;padding-bottom:8px}
.tasbih-hero{display:flex;align-items:center;gap:16px;padding:16px;border-radius:16px;color:#F4F6FB;background:linear-gradient(160deg,var(--skin-sky2,#1D3466),var(--skin-sky1,#10203F))}
.tasbih-hero[data-skin="classic"]{background:linear-gradient(160deg,#1D3466,#10203F)}
.tasbih-hero>div{flex:1;min-width:0;display:grid;gap:6px}
.tasbih-total{font-size:1.0625rem;font-weight:700;margin:0}
.tasbih-hero .small{margin:0;color:rgba(244,246,251,.82)}
.tasbih-h{font-size:.8125rem;font-weight:600;letter-spacing:.02em;text-transform:uppercase;color:var(--muted);margin:8px 4px 0}
.tasbih-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:10px}
.tasbih-card{position:relative;width:100%;min-height:150px;display:flex;flex-direction:column;align-items:center;gap:8px;padding:14px 10px 12px;border-radius:16px;border:1px solid var(--control-line,var(--line));background:var(--card);color:var(--ink);text-align:center;cursor:pointer;font:inherit;transition:transform .2s cubic-bezier(.2,.8,.2,1),border-color .2s,box-shadow .2s}
.tasbih-card:active{transform:scale(.97)}
.tasbih-card:focus-visible{outline:3px solid var(--turq);outline-offset:2px}
.tasbih-card.is-current{border-color:var(--turq);box-shadow:0 0 0 2px var(--turq) inset}
.tasbih-card.is-locked{cursor:default}
.tasbih-card.is-locked .tasbih-preview{filter:saturate(.45) brightness(.92);opacity:.72}
.tasbih-card-copy{display:grid;gap:4px;width:100%}
.tasbih-card-copy b{font-size:.9375rem;line-height:1.25}
.tasbih-card-copy small{font-size:.75rem;line-height:1.35;color:var(--muted)}
.tasbih-card.is-current small{color:var(--turq);font-weight:600}
.tasbih-lock{position:absolute;top:8px;inset-inline-end:8px;color:var(--muted)}
.tasbih-preview{display:inline-grid;place-items:center;flex:none;border-radius:50%;background:radial-gradient(circle at 50% 45%,var(--skin-sky2,#1D3466),var(--skin-sky1,#10203F) 72%)}
.tasbih-preview[data-skin="classic"]{background:radial-gradient(circle at 50% 45%,#1D3466,#10203F 72%)}
.tasbih-meter{display:block;height:4px;border-radius:2px;background:color-mix(in srgb,currentColor 18%,transparent);overflow:hidden}
.tasbih-meter i{display:block;height:100%;border-radius:inherit;background:var(--turq)}
.tasbih-hero .tasbih-meter i{background:var(--gold,#F3D493)}
.tasbih-note{text-align:center;margin:4px 8px 0}
.tasbih-row{display:flex;align-items:center;gap:12px;width:100%;min-height:56px;padding:8px 12px;border:0;background:none;color:inherit;font:inherit;text-align:start;cursor:pointer}
.tasbih-row>span:not(.tasbih-preview){flex:1;min-width:0;display:grid;gap:3px}
.tasbih-row small{color:var(--muted);font-size:.8125rem}
.tasbih-row>svg{flex:none;width:18px;height:18px;opacity:.55}
[dir="rtl"] .tasbih-row>svg{transform:scaleX(-1)}
.tasbih-stats .tasbih-row{padding:4px 0}

/* Unlock moment */
.tasbih-unlock{position:relative;display:grid;justify-items:center;gap:10px;text-align:center;padding:8px 4px 4px;overflow:hidden}
.tasbih-unlock h3{margin:6px 0 0;font-size:1.375rem}
.tasbih-unlock p{margin:0}
.tasbih-unlock .btn{margin-top:4px}
.tasbih-unlock .tasbih-preview{position:relative;z-index:1;box-shadow:0 10px 40px -8px var(--skin-glow)}
.tasbih-burst{position:absolute;top:-10px;left:50%;width:240px;height:240px;margin-left:-120px;border-radius:50%;background:conic-gradient(from 0deg,transparent 0 6%,var(--skin-glow) 8%,transparent 10% 16%,var(--skin-glow) 18%,transparent 20% 26%,var(--skin-glow) 28%,transparent 30% 36%,var(--skin-glow) 38%,transparent 40% 46%,var(--skin-glow) 48%,transparent 50% 56%,var(--skin-glow) 58%,transparent 60% 66%,var(--skin-glow) 68%,transparent 70% 76%,var(--skin-glow) 78%,transparent 80% 86%,var(--skin-glow) 88%,transparent 90% 96%,var(--skin-glow) 98%);-webkit-mask:radial-gradient(circle,transparent 30%,#000 32%,transparent 70%);mask:radial-gradient(circle,transparent 30%,#000 32%,transparent 70%);opacity:.35;animation:skinTurn 24s linear infinite,skinPop .6s cubic-bezier(.2,.8,.2,1) both}
.tasbih-also{color:var(--muted)}
@keyframes skinPop{from{transform:scale(.6);opacity:0}to{transform:scale(1);opacity:.35}}
@media (prefers-reduced-motion:reduce){.counter[data-skin] .ring-wrap::before,.counter[data-skin] .ring-wrap::after,.tasbih-burst{animation:none!important}}
.srow.tasbih-row{flex-wrap:nowrap;justify-content:flex-start}
.srow.tasbih-row>.tasbih-preview{flex:none}
.srow.tasbih-row>span:not(.tasbih-preview){flex:1 1 auto}
.srow.tasbih-row b{font-weight:500}
/* Bead rendering details shared by every design */
.thread{stroke:var(--thread);stroke-width:2}
.thread-shadow{fill:none;stroke:rgba(0,0,0,.28);stroke-width:3.4}
.bead-shine,.imam .bead-shine{pointer-events:none;mix-blend-mode:screen;opacity:var(--shine,.75)}
.spacer{filter:drop-shadow(0 1px 1px rgba(0,0,0,.35))}
.imam ellipse:first-child{filter:drop-shadow(0 2px 3px rgba(0,0,0,.4))}
.tassel{stroke:var(--gold);stroke-width:1.3;stroke-linecap:round;fill:none;opacity:.9}
.tassel-knot{fill:var(--gold)}
/* Material character per design */
[data-skin="olive"]{--shine:.35}
[data-skin="amber"]{--shine:.9}
[data-skin="pearl"]{--shine:1}
[data-skin="golden"]{--shine:.95}
[data-skin="ashura"]{--shine:.3}
[data-skin="onyx"]{--bead-off:#1B1D22;--bead-off-hi:#3A3D45;--bead-off-lo:#0B0C0F;--thread:#5A5F6B;--gold:#D8DCE4;--amber-hi:#FFFFFF;--amber-mid:#AEB4C0;--amber-lo:#4A505C;--skin-sky1:#0B0C10;--skin-sky2:#1E2028;--skin-glow:rgba(200,210,230,.45);--shine:1}
[data-skin="emerald"]{--bead-off:#0E3B2C;--bead-off-hi:#1B5A44;--bead-off-lo:#062218;--thread:#2E7A5C;--gold:#F1D98B;--amber-hi:#C9FBE3;--amber-mid:#18A06B;--amber-lo:#075A3A;--skin-sky1:#03170F;--skin-sky2:#0B3324;--skin-glow:rgba(24,160,107,.55);--shine:.95}
.counter[data-skin="emerald"] .ring-wrap::after{background:radial-gradient(circle at 50% 46%,rgba(24,160,107,.16),transparent 60%)}
.counter[data-skin="onyx"] .ring-wrap::after{background:conic-gradient(from 200deg,transparent 0 35%,rgba(255,255,255,.07) 45%,transparent 55% 100%);mix-blend-mode:screen;animation:skinTurn 18s linear infinite}
/* Tasbih rendering v2 (tasbih-render.js): cheap contact shadows instead of per-bead filters, material textures, sliding beads */
.counter[data-skin] .bead,#cRing .bead{filter:none}
#cRing .bead-g{transform-box:view-box}
#cRing.ring-animate .bead-g,#cRing.ring-animate .spacer-g{transition:transform .32s cubic-bezier(.2,.8,.2,1)}
#cRing .bead-shine{opacity:calc(var(--shine,.75) * .55)}
#cRing .bead-g.on .bead-shine{opacity:var(--shine,.75)}
#cRing .tex{fill:none;stroke-width:.6;pointer-events:none}
#cRing .tex-wood ellipse{stroke:var(--tex-ink,#1A0D04);opacity:.28}
#cRing .bead-g.on .tex-wood ellipse{opacity:.4}
#cRing .tex-bands ellipse{stroke:#FFF1E4;opacity:.16}
#cRing .bead-g.on .tex-bands ellipse{opacity:.42}
#cRing .tex-veins{stroke:var(--tex-ink,#3B2A1C);opacity:.28}
#cRing .bead-g.on .tex-veins{opacity:.55}
#cRing .tex-lustre{stroke:none;opacity:0}
#cRing .bead-g.on .tex-lustre{opacity:1}
#cRing .spacer{filter:none}
#cRing .imam ellipse:first-child{filter:none}
#cRing .tassel{stroke-width:1.05;opacity:.92}
@media (prefers-reduced-motion:reduce){#cRing .bead-g,#cRing .spacer-g{transition:none!important}}
/* New materials (Figma: Kuka wood, Yemeni agate, Firuze, Night pearl) */
[data-skin="kuka"]{--bead-off:#3E2B1C;--bead-off-hi:#6A4C35;--bead-off-lo:#1B110A;--thread:#C9A14A;--gold:#D9B25E;--amber-hi:#C08A55;--amber-mid:#74451F;--amber-lo:#2A160B;--skin-sky1:#120C08;--skin-sky2:#2C1C11;--skin-glow:rgba(230,194,122,.4);--shine:.45;--tex-ink:#1A0D04}
[data-skin="agate"]{--bead-off:#5E352C;--bead-off-hi:#9A766B;--bead-off-lo:#2A1512;--thread:#E2D8CC;--gold:#EDE4D6;--amber-hi:#FFD0B4;--amber-mid:#F06A3A;--amber-lo:#7A1C08;--skin-sky1:#120707;--skin-sky2:#3A1412;--skin-glow:rgba(255,180,138,.4);--shine:.8;--metal-hi:#F4F6FA;--metal-lo:#6E7484}
[data-skin="firuze"]{--bead-off:#2C5452;--bead-off-hi:#5E8A86;--bead-off-lo:#132E2D;--thread:#7A5A3C;--gold:#C9A14A;--amber-hi:#C2F7EE;--amber-mid:#33B8AA;--amber-lo:#0A4B46;--skin-sky1:#031113;--skin-sky2:#0F3338;--skin-glow:rgba(143,227,214,.38);--shine:.6;--tex-ink:#3B2A1C}
[data-skin="nightpearl"]{--bead-off:#767C95;--bead-off-hi:#C3C8D6;--bead-off-lo:#3A3F5C;--thread:#D9B866;--gold:#E7C879;--amber-hi:#FFFFFF;--amber-mid:#F1EAF7;--amber-lo:#A79DBF;--skin-sky1:#050A17;--skin-sky2:#1A2A55;--skin-glow:rgba(233,207,134,.35);--shine:1}
.tasbih-hero[data-skin="kuka"],.tasbih-preview[data-skin="kuka"]{background:radial-gradient(circle at 50% 45%,#2C1C11,#120C08 72%)}
.tasbih-hero[data-skin="agate"],.tasbih-preview[data-skin="agate"]{background:radial-gradient(circle at 50% 45%,#3A1412,#120707 72%)}
.tasbih-hero[data-skin="firuze"],.tasbih-preview[data-skin="firuze"]{background:radial-gradient(circle at 50% 45%,#0F3338,#031113 72%)}
.tasbih-hero[data-skin="nightpearl"],.tasbih-preview[data-skin="nightpearl"]{background:radial-gradient(circle at 50% 45%,#1A2A55,#050A17 72%)}
.counter[data-skin="nightpearl"] .ring-wrap::after{background:conic-gradient(from 0deg,transparent 0 20%,rgba(255,255,255,.10) 30%,rgba(214,200,255,.12) 40%,transparent 52% 100%);mix-blend-mode:screen;animation:skinTurn 14s linear infinite}
/* Gallery v2 (Figma › Design gallery): preview first, locked designs previewable, background switch, grid. */
.tg{padding:0 var(--gutter,16px) calc(env(safe-area-inset-bottom,0px) + 20px)}
.tg-head{position:sticky;top:0;z-index:2;display:grid;grid-template-columns:64px 1fr 64px;align-items:center;margin:0 calc(-1 * var(--gutter,16px));padding:14px var(--gutter,16px) 10px;background:var(--bg-elev)}
.tg-head h2{margin:0;text-align:center;font-size:17px;font-weight:600}
.tg-done{justify-self:end;min-height:44px;padding:0 4px;border:0;background:none;color:var(--tint);font:inherit;font-size:17px;font-weight:600;cursor:pointer}
.tg-stage{position:relative;display:grid;place-items:center;height:300px;border-radius:28px;overflow:hidden;background:linear-gradient(180deg,var(--skin-sky2,#2E5BA8),var(--skin-sky1,#0E2148));touch-action:pan-y}
.tg-stage[data-bg="sky"]{background:linear-gradient(180deg,#2E5BA8,#0E2148 85%)}
.tg-stage::before{content:"";position:absolute;width:280px;height:280px;border-radius:50%;background:radial-gradient(circle,var(--skin-glow,rgba(243,212,147,.3)),transparent 65%);opacity:.6}
.tg-ring{position:relative;line-height:0}
.tg-count{position:absolute;display:grid;justify-items:center;color:#F8F1E3;pointer-events:none}
.tg-count b{font-size:56px;font-weight:200;line-height:1;letter-spacing:-.03em}
.tg-count small{margin-top:6px;font-size:10px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;opacity:.55}
.tg-badge{position:absolute;top:14px;inset-inline-start:14px;display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:14px;background:rgba(0,0,0,.45);color:#fff;font-size:12px;font-weight:600}
.tg-nav{position:absolute;top:50%;width:44px;height:44px;margin-top:-22px;border:0;border-radius:50%;background:rgba(0,0,0,.28);color:#fff;font-size:24px;line-height:1;cursor:pointer}
.tg-prev{inset-inline-start:8px}.tg-next{inset-inline-end:8px}
.tg-nav:disabled{opacity:0;pointer-events:none}
.tg-pos{margin:10px 0 0;text-align:center;color:var(--label-3);font-size:12px;font-weight:600}
.tg-name{margin:4px 0 0;text-align:center;font-family:var(--serif);font-size:24px;font-weight:500}
.tg-status{margin:4px 0 0;text-align:center;color:var(--label-3);font-size:14px}
.tg-status.is-locked{color:var(--gold-ink)}
.tg-meter{display:block;width:min(240px,70%);margin:10px auto 0}
.tg-bg{margin:16px 0 0}
.tg-cta{margin-top:12px}
.tg-cta .btn{width:100%;min-height:48px;border-radius:24px}
.tg-inuse{display:flex;align-items:center;justify-content:center;gap:6px;min-height:48px;border-radius:24px;background:var(--bg-sunk);color:var(--label-2);font-weight:600}
.tg-total{margin:18px 2px 0;color:var(--label-3);font-size:13px;text-align:center}
.tg-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
@media (max-width:360px){.tg-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.tg-cell{display:grid;justify-items:center;gap:4px;width:100%;padding:8px 4px 10px;border:0;border-radius:16px;background:transparent;color:inherit;font:inherit;cursor:pointer}
.tg-thumb{position:relative;display:grid;place-items:center;width:100%;aspect-ratio:1;border-radius:16px;background:linear-gradient(180deg,var(--skin-sky2,#2E5BA8),var(--skin-sky1,#0E2148));box-shadow:inset 0 0 0 .6px rgba(255,255,255,.1)}
.tg-cell.is-focus .tg-thumb{box-shadow:0 0 0 2px var(--tint)}
.tg-cell.is-locked .tg-thumb svg{opacity:.85}
.tg-mark{position:absolute;top:5px;inset-inline-end:5px;display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:rgba(0,0,0,.55);color:#fff;font-style:normal}
.tg-mark.tg-check{background:var(--tint);color:var(--on-tint,#071022)}
.tg-cell-name{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px;font-weight:600;color:var(--label-2)}
.tg .tasbih-h{margin:22px 2px 8px}
.tg-bg{display:flex;width:100%}.tg-bg button{flex:1 1 0}