/* Emerald and gold identity. Every control remains a real interactive element. */
@layer sacred {
 @font-face{font-family:"Wird Tajawal";src:url("./assets/fonts/Tajawal-Regular.ttf") format("truetype");font-weight:400;font-display:swap}
 @font-face{font-family:"Amiri Quran";src:url("./assets/fonts/Amiri-Regular.ttf") format("truetype");font-weight:400;font-display:swap}
 :root{--font-ui:"Wird Tajawal",sans-serif;--font-reading:"Amiri Quran",serif;--font-quran:"Amiri Quran",serif;font-family:var(--font-ui)}
 :root {--gold:#815b20;--gold-light:#edd39b;--gold-dark:#705020;--line:#bd9b5b55;--radius-card:24px;--radius-panel:32px;--shadow-sm:0 4px 24px #162b1910;--sacred-panel:linear-gradient(145deg,#fffaf0,#f0e8d7);--sacred-gold:linear-gradient(115deg,#ae7a31,#f5dfa3 45%,#c29951 75%,#e8cc88);}
 html.dark {--bg:#031b12;--surface:#06291d;--surface-soft:#0b3425;--surface-strong:#104531;--text:#fff8e7;--muted:#bdcdbf;--brand:#e6c482;--brand-strong:#f4daa0;--brand-soft:#153e2b;--on-brand:#122719;--gold:#e6c482;--gold-dark:#9b783c;--line:#ba965c50;--focus:#f2d28e;--sacred-panel:linear-gradient(145deg,#0d3929,#032218 75%);--shadow-sm:0 12px 30px #0003,inset 0 1px #e6c48213;--shadow-lg:0 24px 70px #0005;}
 body {background:radial-gradient(ellipse at 50% 0%,color-mix(in srgb,var(--gold) 9%,transparent),transparent 55%),var(--bg);}
 .app-header {border-bottom-color:var(--line);background:color-mix(in srgb,var(--bg) 94%,transparent);}
 .brand-button b {color:var(--gold);}.brand-button img{border:1px solid var(--line)}
 button {transition:background 180ms,border-color 180ms,box-shadow 180ms,transform 180ms;}
 button:focus-visible,a:focus-visible {outline:3px solid var(--focus);outline-offset:4px;}
 .primary-button,html.dark .primary-button {background:var(--sacred-gold);border:1px solid #efd8a2;color:#13271b;box-shadow:0 3px 12px #caa05224;}
 .primary-button:hover {filter:brightness(1.07);}
 .secondary-button,.search-launch,.text-list article,.card,.surah-list button,.feature-grid button,.wird-now,.resume-reading,.install-card {background:var(--sacred-panel);border:1px solid var(--line);box-shadow:var(--shadow-sm);}
 .home-hero {position:relative;isolation:isolate;overflow:hidden;text-align:center;border:1px solid var(--line);border-radius:32px 32px 24px 24px;min-height:350px;padding:155px 24px 28px;background:var(--sacred-panel);box-shadow:var(--shadow-sm);}
 .sacred-architecture-slot {position:absolute;inset:0;z-index:-1;pointer-events:none;}
 .sacred-architecture {width:100%;height:100%;display:block;}
 .home-hero .eyebrow {position:absolute;inset:20px 24px auto;font-size:.8rem;}
 .home-hero h1 {font-family:var(--font-reading);font-size:clamp(2.7rem,6vw,4.3rem);margin:0;color:var(--text);text-shadow:0 3px 15px #0003;line-height:1.3;}
 .home-brand-mark {display:none;}.hero-subtitle{margin:8px 0;color:var(--muted)}
 .verified-ayah {border:0;margin:22px auto 0;padding:16px 0 0;position:relative;max-width:550px;}
 .verified-ayah::before {content:'◇';position:absolute;inset:-8px 10% auto;color:var(--gold);border-bottom:1px solid var(--line);line-height:0;}
 .verified-ayah p {font-family:var(--font-quran);font-size:clamp(1.25rem,3vw,1.8rem);}.verified-ayah cite{color:var(--muted);font-size:.75rem}
 .search-launch {border-radius:100px;margin:20px 0;}.search-launch .search-icon{color:var(--gold)}
 .quick-access {margin:24px 0 36px;border:0;padding:0;}.quick-access-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;}
 .quick-access-grid button {position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:24px 12px;min-height:150px;background:var(--sacred-panel);border:1px solid var(--line);border-radius:26px;box-shadow:var(--shadow-sm);text-align:center;overflow:hidden;}
 .quick-access-grid button::before {content:'';position:absolute;inset:5px;border:1px solid color-mix(in srgb,var(--gold) 16%,transparent);border-radius:21px;pointer-events:none;}
 .quick-access-grid button:hover {transform:translateY(-3px);border-color:var(--gold);box-shadow:0 10px 28px #c5a05716;}
 .quick-access-grid button>span:first-child {width:52px;height:54px;color:var(--gold);background:none;border:0;border-radius:0;}
 [data-sacred-icon] svg{width:100%;height:100%;display:block;filter:drop-shadow(0 2px 5px #c9a45f22)}
 .quick-access-grid b{font-size:1.15rem;color:var(--text)}.quick-access-grid small{font-size:.75rem;color:var(--muted)}
 .section-heading h2,.section-header h1{font-family:var(--font-reading);}.section-header{padding:12px 0 20px;border-bottom:1px solid var(--line);margin-bottom:24px}
 .text-list article {border-radius:24px;padding:24px;margin-bottom:16px;}.text-list article>p{font-family:var(--font-reading);font-size:1.35rem;line-height:2;}
 .chips button,.tabs button,[data-target] {border:1px solid var(--line);background:var(--sacred-panel);border-radius:18px;}
 .chips button.active,.tabs button.active,[data-target].active {background:var(--sacred-gold);color:#14281c;border-color:#e6c482;}
 .bottom-nav {border:1px solid var(--line);background:color-mix(in srgb,var(--bg) 96%,transparent);box-shadow:0 -10px 30px #0002;}
 .bottom-nav button.active {color:var(--gold);background:color-mix(in srgb,var(--gold) 10%,transparent);}.bottom-nav button.active::before{background:var(--gold)}
 .dhikr-deck {position:relative;padding:30px 26px 22px;border:1px solid var(--line);border-radius:30px;background:var(--sacred-panel);box-shadow:var(--shadow-lg);margin:24px 0;}
 .dhikr-deck::before {content:"";display:block;width:30px;height:30px;margin:0 auto 18px;background:var(--gold);clip-path:polygon(50% 0%,62% 23%,85% 15%,77% 38%,100% 50%,77% 62%,85% 85%,62% 77%,50% 100%,38% 77%,15% 85%,23% 62%,0% 50%,23% 38%,15% 15%,38% 23%);}
 #deckText {font-family:var(--font-quran);font-size:clamp(1.5rem,4vw,2.1rem);line-height:2.1;text-align:center;margin:0;white-space:pre-line;user-select:text;}
 #deckSource {color:var(--muted);text-align:center;font-size:.85rem;margin:18px 0;}
 .deck-actions{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:18px;border-top:1px solid var(--line);}.deck-actions button{background:var(--surface-soft);border:1px solid var(--line);border-radius:100px;padding:8px 16px;color:var(--gold)}
 .deck-position{font-variant-numeric:tabular-nums;color:var(--gold);white-space:nowrap}
 .counter-wrap {width:min(100%,440px);aspect-ratio:auto;position:relative;min-height:410px;display:grid;place-items:center;margin:8px auto 24px;max-width:440px;isolation:isolate;}
 .counter-shell{display:none}.sacred-beads{position:absolute;inset:0;pointer-events:none;z-index:0}.sacred-beads svg{width:100%;height:100%;overflow:visible}
 #sacredBeads circle[data-bead]{fill:url(#bead-unlit);stroke:#bd985a;stroke-width:.7;transition:fill 200ms;}
 #sacredBeads circle.lit{fill:url(#bead-lit);stroke:#f2d998}.bead-thread{fill:none;stroke:#c3a361;stroke-width:1}.bead-tassel{fill:#b88c46;stroke:#efcf87;stroke-width:1}
 #counter {color:var(--text);position:relative;z-index:1;width:57%;aspect-ratio:1;height:auto;min-height:0;border:3px double var(--gold);border-radius:50%;background:radial-gradient(circle at 40% 25%,var(--surface-strong),var(--bg) 85%);box-shadow:inset 0 0 32px #c7a05718,0 0 24px #c7a05720;padding:15px;transform:translateY(-28px);}
 #counter:active {transform:translateY(-28px) scale(.97)}#counter #count{color:var(--gold);font-size:clamp(3.1rem,10vw,5rem);font-variant-numeric:tabular-nums;line-height:1.2}#counter small{color:var(--muted)}#counter em{color:var(--muted)}#counter strong{font-size:.8rem;color:var(--muted)}
 .sacred-target{width:min(100%,440px);display:flex;align-items:center;gap:16px;padding:16px 24px;margin:0 auto 24px;max-width:440px;border:1px solid var(--line);border-radius:24px;background:var(--sacred-panel);color:var(--gold);font-variant-numeric:tabular-nums;}
 #sacredTargetProgress{flex:1;min-width:0;height:8px;border:0;border-radius:20px;overflow:hidden;accent-color:var(--gold)}#sacredTargetProgress::-webkit-progress-bar{background:var(--surface-strong)}#sacredTargetProgress::-webkit-progress-value{background:var(--sacred-gold);border-radius:20px}#sacredTargetProgress::-moz-progress-bar{background:#d9b66f}
 .reader {background:#f0dfb9;color:#233022;border:1px solid #b28c4c;box-shadow:0 20px 70px #0005;}
 .reader>header {background:#f0dfb9;}.reader .ayah-actions button{background:#e5d3ab;color:#243926}.reader .ayah-actions .ayah-play{background:#254d37;color:#fff5df}.reader .ayah-text b{color:#38512e;border-color:#957238;border-radius:25% 50%;}.reader h2 {font-family:var(--font-quran);color:#213526;border-block:3px double #b28c4c;padding:18px;text-align:center;background:linear-gradient(90deg,#d4bc84,#f9e9c9,#d4bc84);}
 .reader .ayah,.reader .verse,.reader [data-ayah] {color:#203021;border-color:#baa26c55;}.reader button {color:#314632;border-color:#ad925c66;}.reader .active,.reader .playing {background:#d9c593;}.reader p{line-height:2.2}.reader small{color:#53604b}
 dialog:not(.knowledge-sheet) {border:1px solid var(--line);background:var(--surface);color:var(--text);box-shadow:var(--shadow-lg);border-radius:28px;}dialog::backdrop{background:#00150fbb;backdrop-filter:blur(5px)}
 .player {border-top:1px solid var(--line);background:var(--sacred-panel);}.player button{color:var(--gold)}
 #qiblaCanvas {width:min(100%,340px);height:auto;border:1px solid var(--line);border-radius:50%;background:radial-gradient(circle,var(--surface-strong),var(--bg));padding:12px;box-shadow:0 0 0 8px #c3a0570b,0 0 0 9px var(--line);margin:24px auto;}
 .wird-intro {background:#031b12;color:#fff5df;}.wird-intro-pattern{opacity:1;background:none;}.wird-intro-pattern .sacred-architecture{opacity:.85}.wird-intro-inner{position:relative;z-index:1}.wird-intro-mark{color:#e4c17c;filter:drop-shadow(0 0 18px #d6b67566)}.wird-intro h1{font-family:var(--font-reading);color:#fff2d3}.wird-intro-progress{border:1px solid #c5a36177;background:#07291b}.wird-intro-progress span{background:var(--sacred-gold)}
 @media(min-width:1024px){.home-hero{min-height:400px;padding-top:175px}.home-hero .sacred-architecture{object-position:center}.quick-access-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.quick-access-grid button{min-height:175px}.home-page .quick-access{max-width:850px;margin-inline:auto}.counter-wrap{min-height:460px}.bottom-nav{border-inline-end:1px solid var(--line)}}
 @media(max-width:480px){.quick-access-grid{gap:10px}.quick-access-grid button{min-height:130px;padding:20px 7px;gap:9px;border-radius:22px}.quick-access-grid b{font-size:1rem}.quick-access-grid small{font-size:.65rem}.quick-access-grid button>span:first-child{width:42px;height:44px}.home-hero{min-height:330px;padding:145px 16px 24px}.counter-wrap{min-height:380px}.deck-actions{gap:8px}.deck-actions button{padding:8px 10px}.dhikr-deck{padding:22px 18px}}
 @media(prefers-reduced-motion:reduce){button,#sacredBeads circle[data-bead]{transition:none}.quick-access-grid button:hover{transform:none}}
}