:root {
  --bg: #f4f7f2; --surface: #ffffff; --surface-raised: #fbfdf9; --surface-soft: #edf4ed;
  --ink: #18342d; --muted: #647a70; --muted-2: #84968d; --line: #dbe8df;
  --emerald: #087a60; --emerald-deep: #075445; --emerald-soft: #d9f1e8;
  --gold: #b98728; --gold-bright: #e9c96f; --gold-soft: #fff2ce;
  --danger: #b94848; --danger-soft: #ffe6e3; --nav-h: 78px;
  --shadow: 0 22px 55px rgba(8, 72, 56, .11); --shadow-small: 0 7px 22px rgba(8, 72, 56, .09);
}
[data-theme="dark"] {
  --bg: #0d211d; --surface: #17332c; --surface-raised: #1b3b33; --surface-soft: #23463d;
  --ink: #f2f6ee; --muted: #b0c1b8; --muted-2: #81998d; --line: #34594e;
  --emerald: #5bcdb0; --emerald-deep: #219275; --emerald-soft: #1f4b40;
  --gold: #efc96e; --gold-bright: #ffe4a1; --gold-soft: #41371d;
  --danger: #ffa4a0; --danger-soft: #4b2828; --shadow: 0 24px 60px rgba(0, 0, 0, .33); --shadow-small: 0 8px 25px rgba(0,0,0,.26);
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
button, a, select, input, textarea { touch-action: manipulation; }
button, a { -webkit-user-select: none; user-select: none; }
html { min-width: 320px; background: var(--bg); touch-action: manipulation; }
body { min-width: 320px; min-height: 100dvh; margin: 0; color: var(--ink); background: radial-gradient(circle at 3% 0%, rgba(241, 205, 112, .24), transparent 26%), var(--bg); font: 500 14px/1.45 Manrope, "Noto Sans", system-ui, sans-serif; transition: background .25s, color .25s; }
body { overscroll-behavior-y: none; }
html[lang="ar"] body, html[lang="fa"] body { font-family: "Noto Naskh Arabic", Amiri, serif; font-size: 16px; }
html[lang="ur"] body { font-family: "Noto Nastaliq Urdu", "Noto Naskh Arabic", serif; font-size: 15px; line-height: 1.7; }
html[lang="bn"] body { font-family: "Noto Sans Bengali", "Noto Sans", sans-serif; }
button, input, textarea, select { font: inherit; } button, select { cursor: pointer; } button { color: inherit; } button:disabled { cursor: not-allowed; opacity: .55; }
button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, summary:focus-visible { outline: 3px solid rgba(233, 201, 111, .85); outline-offset: 3px; }
.app-shell { position: relative; width: 100%; min-height: 100dvh; max-width: 540px; margin: auto; overflow: hidden; background: var(--bg); isolation: isolate; }
.app-shell::before { content: ""; position: absolute; inset: 0 0 auto; z-index: -1; height: 272px; opacity: .45; pointer-events: none; background-image: linear-gradient(30deg, transparent 47.5%, rgba(8, 122, 96, .07) 48%, rgba(8,122,96,.07) 52%, transparent 52.5%), linear-gradient(-30deg, transparent 47.5%, rgba(8, 122, 96, .07) 48%, rgba(8,122,96,.07) 52%, transparent 52.5%); background-size: 43px 74px; mask-image: linear-gradient(#000, transparent); }
.topbar { display: flex; align-items: center; justify-content: space-between; min-height: 76px; padding: max(14px, env(safe-area-inset-top)) 20px 12px; }
.brand { display: flex; align-items: center; gap: 7px; padding-left: .22em; color: var(--emerald); font-size: 15px; font-weight: 800; letter-spacing: .22em; }.brand-mark { color: var(--gold); font: 29px/.7 Amiri, serif; }
.icon-button, .language-picker, .icon-action, .refresh-button { display: grid; place-items: center; border: 1px solid var(--line); background: rgba(255,255,255,.62); color: var(--emerald); border-radius: 14px; transition: transform .18s, background .18s, color .18s; }
[data-theme="dark"] .icon-button, [data-theme="dark"] .language-picker, [data-theme="dark"] .icon-action, [data-theme="dark"] .refresh-button { background: rgba(23,51,44,.78); }
.icon-button, .language-picker { position: relative; width: 41px; height: 41px; }.icon-button:active, .icon-action:active, .refresh-button:active { transform: scale(.91); }.icon-button svg { width: 19px; height: 19px; }.language-picker { font-size: 17px; font-weight: 800; }.language-picker select { position: absolute; inset: 0; width: 100%; opacity: 0; }
main { min-height: calc(100dvh - 76px - var(--nav-h)); }.screen { display: none; min-height: calc(100dvh - 76px); padding: 11px 20px calc(var(--nav-h) + 26px); animation: screen-enter .32s cubic-bezier(.2,.8,.2,1); }.screen.active { display: block; } @keyframes screen-enter { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
.screen-topline { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 18px; }.eyebrow { color: var(--emerald); font-size: 10px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }.live-dot, .scratch-safe, .reading-badge, .source-chip { color: var(--muted); font-size: 10px; font-weight: 700; }.live-dot { display: flex; align-items: center; gap: 5px; }.live-dot i { width: 6px; height: 6px; border-radius: 99px; background: var(--emerald); box-shadow: 0 0 0 3px var(--emerald-soft); }.scratch-safe, .source-chip { padding: 4px 8px; border: 1px solid var(--line); border-radius: 99px; background: var(--surface); }.reading-badge { display: grid; min-width: 25px; height: 25px; place-items: center; color: var(--gold); border-radius: 50%; background: var(--gold-soft); }
h1 { margin: 3px 0 0; font: 700 clamp(35px, 8vw, 46px)/.98 Amiri, "Noto Naskh Arabic", serif; letter-spacing: -.028em; } h2, h3 { margin: 0; } h2 { font-size: 17px; } p { margin: 0; }.screen-intro { max-width: 44ch; margin-top: 11px; color: var(--muted); font-size: 13px; line-height: 1.65; }.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; padding: 0; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* Tasbih */
.tasbih-heading { display: flex; align-items: end; justify-content: space-between; gap: 15px; }.tasbih-heading p { margin-top: 6px; color: var(--muted); font-size: 12px; }.icon-action { flex: 0 0 auto; width: 42px; height: 42px; font-size: 18px; }.tasbih-button { position: relative; display: grid; width: min(76vw, 337px); height: min(76vw, 337px); place-items: center; margin: 24px auto 17px; overflow: hidden; isolation: isolate; border: 0; border-radius: 50%; color: #fff; background: radial-gradient(circle at 32% 25%, #60d1b3 0%, #129778 39%, #076650 72%, #05483c 100%); box-shadow: 0 0 0 13px rgba(8,122,96,.11), 0 21px 39px rgba(7,102,79,.31), inset 4px 5px 19px rgba(255,255,255,.3), inset -14px -16px 26px rgba(0,0,0,.15); transition: transform .11s ease, box-shadow .25s ease; }.tasbih-button::before { content: ""; position: absolute; inset: 12px; border: 1px solid rgba(255,255,255,.24); border-radius: 50%; }.tasbih-button:active { transform: scale(.965); }.tasbih-button.goal-hit { animation: goal-glow 1.2s ease; }.tasbih-pulse { position: absolute; inset: 0; border: 2px solid #fff2bd; border-radius: 50%; opacity: 0; }.tasbih-button.tap-animation .tasbih-pulse { animation: tap-pulse .43s ease-out; }.tasbih-orbit { position: absolute; border: 1px dashed rgba(255,255,255,.22); border-radius: 50%; }.orbit-one { inset: 28px; animation: spin 27s linear infinite; }.orbit-two { inset: 55px; border-style: solid; border-color: rgba(255,255,255,.12); animation: spin 38s linear infinite reverse; }.tasbih-number { z-index: 1; margin-left: -.08em; font-size: clamp(86px, 21vw, 118px); font-weight: 800; letter-spacing: -.08em; font-variant-numeric: tabular-nums; text-shadow: 0 3px 7px rgba(0,0,0,.1); } @keyframes spin { to { transform: rotate(360deg); } } @keyframes tap-pulse { 0% { opacity: .6; transform: scale(.73); } 100% { opacity: 0; transform: scale(1.17); } } @keyframes goal-glow { 50% { box-shadow: 0 0 0 25px rgba(233,201,111,.28),0 0 54px rgba(233,201,111,.68), 0 21px 39px rgba(7,102,79,.31); } }
.practice-panel { padding: 14px 15px 13px; border: 1px solid var(--line); border-radius: 20px; background: linear-gradient(135deg, var(--surface), var(--surface-raised)); box-shadow: var(--shadow-small); }.practice-panel-header { display: flex; align-items: center; gap: 10px; }.practice-icon { display: grid; flex: 0 0 35px; width: 35px; height: 35px; place-items: center; border-radius: 12px; color: var(--gold); background: var(--gold-soft); font-size: 18px; }.practice-panel-header > div { min-width: 0; flex: 1; }.practice-kicker { display: block; overflow: hidden; color: var(--muted); font-size: 9px; font-weight: 800; letter-spacing: .1em; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }.practice-panel strong { display: block; overflow: hidden; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }.practice-step { display: grid; min-width: 35px; min-height: 27px; place-items: center; padding: 2px 5px; color: var(--emerald); border-radius: 9px; background: var(--emerald-soft); font-size: 10px; font-weight: 800; }.arabic-phrase { min-height: 25px; margin: 12px 0 1px; color: var(--emerald-deep); direction: rtl; font: 700 25px/1.1 "Noto Naskh Arabic", Amiri, serif; text-align: start; }.transliteration { min-height: 16px; color: var(--muted); font-size: 11px; font-style: italic; }.practice-progress { display: grid; grid-template-columns: 1fr auto; gap: 9px; align-items: center; margin-top: 11px; color: var(--gold); font-size: 10px; font-weight: 800; }.practice-progress > div { height: 5px; overflow: hidden; border-radius: 50px; background: var(--line); }.practice-progress i { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--emerald), var(--gold)); transition: width .27s ease; }.upgraded-actions { display: grid; grid-template-columns: minmax(0,1.35fr) minmax(0, .8fr); gap: 9px; margin-top: 14px; }.primary-button, .secondary-button, .danger-button { display: inline-flex; align-items: center; justify-content: center; min-height: 43px; border-radius: 14px; padding: 0 14px; border: 1px solid transparent; gap: 7px; font-size: 12px; font-weight: 800; transition: transform .17s, filter .17s, background .17s; }.primary-button { color: #fff; background: var(--emerald); box-shadow: 0 8px 16px rgba(8,122,96,.21); }.secondary-button { color: var(--emerald); border-color: var(--line); background: var(--surface); }.danger-button { color: #fff; background: var(--danger); }.primary-button:active, .secondary-button:active, .danger-button:active { transform: scale(.96); }.wide { width: 100%; }.session-note { min-height: 17px; margin: 12px 4px 0; color: var(--muted); font-size: 11px; text-align: center; }

/* Scratch card */
.scratch-card { position: relative; height: min(92vw, 425px); min-height: 315px; max-height: 425px; margin-top: 22px; overflow: hidden; border-radius: 28px; background: #075144; box-shadow: var(--shadow); }.sunna-content { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: end; padding: 29px 26px; overflow: hidden; color: #fffdf3; background: radial-gradient(circle at 80% 11%, rgba(243,207,118,.55), transparent 16%), linear-gradient(144deg, #0c8267 0%, #075f50 54%, #043a32 100%); }.sunna-content::before { content: "۞"; position: absolute; top: 14px; right: -28px; color: rgba(255,224,139,.18); font: 210px/1 Amiri, serif; }.sunna-content .card-type { position: relative; z-index: 1; color: #ffe3a0; font-size: 10px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }.sunna-content blockquote { position: relative; z-index: 1; margin: 10px 0 11px; font: 700 29px/1.14 Amiri, "Noto Naskh Arabic", serif; }.sunna-content cite { position: relative; z-index: 1; color: rgba(255,255,255,.78); font-size: 11px; font-style: normal; line-height: 1.55; }.scratch-card canvas { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; cursor: crosshair; }.scratch-hint { position: absolute; inset: 0; display: grid; place-content: center; gap: 7px; color: #fff; font-size: 14px; font-weight: 800; text-align: center; pointer-events: none; transition: opacity .22s; }.scratch-hint > span:first-child { font-size: 38px; animation: swipe 2.2s ease-in-out infinite; }.scratch-card.revealed { animation: scratch-glow 1s ease both; }.scratch-card.revealed .scratch-hint { opacity: 0; } @keyframes swipe { 50% { transform: translateX(20px) rotate(-9deg); } } @keyframes scratch-glow { 40% { box-shadow: 0 0 0 5px rgba(233,201,111,.4),0 0 45px rgba(233,201,111,.5); } }.scratch-meter { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; margin: 17px 3px 15px; color: var(--muted); font-size: 11px; font-weight: 700; }.scratch-meter > div { height: 5px; overflow: hidden; border-radius: 50px; background: var(--line); }.scratch-meter i { display: block; width: 0; height: 100%; background: var(--gold); transition: width .2s; }.split-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }.source-note { margin: 15px 10px; color: var(--muted); font-size: 10px; line-height: 1.55; text-align: center; }

/* Knowledge */
.daily-insight { width: 100%; display: grid; grid-template-columns: 41px 1fr auto; gap: 11px; align-items: center; margin: 19px 0 15px; padding: 12px 13px; color: #fff; border: 0; border-radius: 18px; background: linear-gradient(127deg, #0b735e, #075548); box-shadow: 0 13px 25px rgba(7,99,77,.23); text-align: start; }.daily-insight:active { transform: scale(.985); }.insight-spark { display: grid; width: 41px; height: 41px; place-items: center; color: #f5d57e; border: 1px solid rgba(255,255,255,.22); border-radius: 13px; font-size: 21px; }.daily-insight small, .daily-insight strong, .daily-insight em { display: block; }.daily-insight small { color: rgba(255,255,255,.73); font-size: 9px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }.daily-insight strong { overflow: hidden; margin-top: 1px; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }.daily-insight em { margin-top: 2px; color: #f3da9e; font-size: 10px; font-style: normal; }.daily-insight b { color: #ffe2a3; font-size: 26px; font-weight: 400; }.knowledge-filters { display: flex; gap: 7px; margin: 0 -20px 14px; padding: 0 20px 2px; overflow-x: auto; scrollbar-width: none; }.knowledge-filters::-webkit-scrollbar { display: none; }.knowledge-filter { flex: 0 0 auto; border: 1px solid var(--line); border-radius: 99px; padding: 7px 10px; color: var(--muted); background: var(--surface); font-size: 10px; font-weight: 800; }.knowledge-filter.active { color: #fff; border-color: var(--emerald); background: var(--emerald); }.knowledge-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 11px; }.knowledge-card { position: relative; min-height: 190px; overflow: hidden; padding: 15px; color: #fff; border: 0; border-radius: 20px; background: var(--card-bg, #0b7160); box-shadow: var(--shadow-small); text-align: start; transition: transform .2s, box-shadow .2s; }.knowledge-card:active { transform: scale(.97); }.knowledge-card::after { content: attr(data-glyph); position: absolute; right: -8px; bottom: -34px; color: rgba(255,255,255,.12); font: 150px/.8 Amiri, serif; }.knowledge-card.wide-card { grid-column: span 2; min-height: 150px; }.knowledge-card .knowledge-icon { position: relative; z-index: 1; display: grid; width: 32px; height: 32px; place-items: center; border-radius: 10px; background: rgba(255,255,255,.16); font-size: 16px; }.knowledge-card .label { position: relative; z-index: 1; display: block; margin-top: 11px; color: #ffe4a1; font-size: 9px; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; }.knowledge-card h3 { position: relative; z-index: 1; margin-top: 4px; font: 700 25px/1.03 Amiri, "Noto Naskh Arabic", serif; }.knowledge-card p { position: relative; z-index: 1; margin-top: 8px; color: rgba(255,255,255,.85); font-size: 10px; line-height: 1.5; }.knowledge-card footer { position: absolute; z-index: 1; bottom: 13px; left: 15px; right: 15px; overflow: hidden; color: #ffe3a0; font-size: 9px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }

/* Assistant */
.assistant-disclaimer { margin: 13px 0 12px; padding: 8px 0 8px 11px; color: var(--muted); border-inline-start: 3px solid var(--gold); font-size: 12px; line-height: 1.5; }.source-rail { display: flex; gap: 6px; margin: 0 -20px 12px; padding: 0 20px 3px; overflow-x: auto; color: var(--emerald); scrollbar-width: none; }.source-rail::-webkit-scrollbar { display: none; }.source-rail span { flex: 0 0 auto; border: 1px solid var(--line); border-radius: 10px; padding: 6px 8px; background: var(--surface); font-size: 10px; }.source-rail b { font-weight: 800; }.prompt-chips { display: flex; gap: 7px; overflow-x: auto; padding: 2px 0 12px; scrollbar-width: none; }.prompt-chips::-webkit-scrollbar { display: none; }.prompt-chips button { flex: 0 0 auto; border: 1px solid var(--line); border-radius: 99px; padding: 8px 11px; color: var(--emerald); background: var(--surface); font-size: 10px; font-weight: 800; }.chat { display: flex; flex-direction: column; min-height: 250px; max-height: calc(100dvh - 367px); gap: 10px; padding: 5px 2px 13px; overflow-y: auto; }.message { max-width: 89%; padding: 11px 13px; border-radius: 17px; font-size: 12px; line-height: 1.58; white-space: pre-wrap; animation: message-in .22s ease; }.message.assistant { border: 1px solid var(--line); border-top-left-radius: 4px; background: var(--surface); }.message.user { align-self: end; color: #fff; border-top-right-radius: 4px; background: var(--emerald); }.message-label { display: block; margin-bottom: 4px; color: var(--gold); font-size: 9px; font-weight: 800; }.message.user .message-label { color: #d6f4e9; }.typing { display: flex; width: fit-content; gap: 4px; }.typing i { width: 5px; height: 5px; border-radius: 50%; background: var(--gold); animation: typing 0.8s infinite alternate; }.typing i:nth-child(2) { animation-delay: .16s; }.typing i:nth-child(3) { animation-delay: .32s; } @keyframes typing { to { opacity: .4; transform: translateY(-4px); } } @keyframes message-in { from { opacity: 0; transform: translateY(6px); } }.chat-form { display: flex; align-items: end; gap: 8px; padding: 8px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); box-shadow: var(--shadow-small); }.chat-form textarea { flex: 1; max-height: 110px; padding: 7px; resize: none; color: var(--ink); border: 0; outline: 0; background: transparent; font-size: 13px; line-height: 1.35; }.chat-form button { flex: 0 0 37px; width: 37px; height: 37px; border: 0; border-radius: 12px; color: #fff; background: var(--emerald); font-size: 20px; font-weight: 800; }.assistant-footnote { margin: 10px 4px; color: var(--muted); font-size: 10px; line-height: 1.5; text-align: center; }

/* Quran */
.quran-art { position: relative; display: grid; height: 151px; margin: 7px 0 12px; overflow: hidden; place-items: center; border-radius: 24px; color: #f4d17a; background: linear-gradient(135deg, #073e35, #126150); }.quran-art > span { z-index: 1; font: 85px Amiri, serif; }.quran-art::after { content: ""; position: absolute; width: 116px; height: 116px; border: 1px solid rgba(245,213,139,.4); transform: rotate(45deg); }.moon { position: absolute; top: 28px; right: 48px; width: 30px; height: 30px; border-radius: 50%; background: #f7d67f; box-shadow: 9px 4px 0 #126150; }.star { position: absolute; width: 4px; height: 4px; border-radius: 50%; background: #fff; }.star-one { top: 37px; left: 64px; }.star-two { right: 77px; bottom: 39px; }.field-label { display: block; margin: 13px 1px 6px; color: var(--muted); font-size: 10px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }.select-field { width: 100%; padding: 12px 38px 12px 13px; appearance: auto; color: var(--ink); border: 1px solid var(--line); border-radius: 14px; background: var(--surface); font-size: 12px; font-weight: 700; }.now-playing { margin: 21px 2px 10px; }.now-playing-label { display: block; margin-bottom: 3px; color: var(--muted); font-size: 9px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }.now-playing strong { font: 700 25px/1.1 Amiri, "Noto Naskh Arabic", serif; }.audio-progress input { width: 100%; height: 5px; appearance: none; border-radius: 5px; background: var(--line); accent-color: var(--gold); }.audio-progress > div { display: flex; justify-content: space-between; margin-top: 2px; color: var(--muted); font-size: 10px; font-variant-numeric: tabular-nums; }.player-controls { display: flex; align-items: center; justify-content: center; gap: 21px; margin-top: 19px; }.round-button, .play-button { display: grid; width: 47px; height: 47px; place-items: center; border: 1px solid var(--line); border-radius: 50%; color: var(--emerald); background: var(--surface); font-size: 32px; line-height: 1; }.play-button { width: 68px; height: 68px; padding-left: 4px; border: 0; color: #fff; background: var(--emerald); box-shadow: 0 10px 22px rgba(8,122,96,.27); font-size: 22px; }

/* Stories */
.refresh-button { width: 32px; height: 32px; border-radius: 11px; font-size: 19px; }.stories-status { min-height: 18px; margin: 15px 1px 7px; color: var(--muted); font-size: 11px; }.stories-status[data-state="error"] { color: var(--danger); }.stories-list { display: grid; gap: 10px; }.community-story { position: relative; padding: 15px 15px 14px; overflow: hidden; border: 1px solid var(--line); border-radius: 19px; background: var(--surface); box-shadow: var(--shadow-small); }.community-story::before { content: "❝"; position: absolute; top: -17px; right: 8px; color: var(--gold-soft); font: 100px/1 Amiri, serif; }.community-story h3 { position: relative; padding-right: 26px; font: 700 24px/1.05 Amiri, "Noto Naskh Arabic", serif; }.community-story p { position: relative; display: -webkit-box; overflow: hidden; margin: 7px 0 10px; color: var(--muted); font-size: 11px; line-height: 1.6; -webkit-box-orient: vertical; -webkit-line-clamp: 4; }.community-story footer { position: relative; color: var(--emerald); font-size: 10px; font-weight: 800; }.empty-stories { padding: 24px 16px; border: 1px dashed var(--line); border-radius: 18px; color: var(--muted); background: var(--surface-raised); font-size: 12px; line-height: 1.55; text-align: center; }.submit-story-cta { width: 100%; display: grid; grid-template-columns: 40px 1fr auto; gap: 11px; align-items: center; margin-top: 15px; padding: 13px; color: var(--emerald); border: 1px solid var(--line); border-radius: 18px; background: var(--surface); text-align: start; box-shadow: var(--shadow-small); }.submit-story-cta:active { transform: scale(.985); }.submit-story-cta > span:first-child { display: grid; width: 40px; height: 40px; place-items: center; color: var(--gold); border-radius: 12px; background: var(--gold-soft); font-size: 19px; }.submit-story-cta strong, .submit-story-cta small { display: block; }.submit-story-cta strong { font-size: 12px; }.submit-story-cta small { margin-top: 2px; color: var(--muted); font-size: 9px; }.submit-story-cta b { color: var(--gold); font-size: 24px; font-weight: 400; }

/* Settings */
.settings-group { margin-top: 23px; }.settings-group > h2, .faq-section > h2 { margin-bottom: 9px; font: 700 28px/1 Amiri, "Noto Naskh Arabic", serif; }.settings-card, .install-card, .settings-link { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 11px; padding: 14px 15px; border: 1px solid var(--line); border-radius: 17px; color: var(--ink); background: var(--surface); text-align: start; }.settings-card + .settings-card, .install-card + .settings-link, .settings-link + .settings-link { margin-top: 7px; }.settings-card h3, .settings-link strong, .install-card strong { font-size: 13px; }.settings-card p, .settings-link small, .install-card small { display: block; margin-top: 3px; color: var(--muted); font-size: 10px; }.switch { position: relative; flex: 0 0 48px; width: 48px; height: 28px; padding: 3px; border: 0; border-radius: 99px; background: var(--line); }.switch i { display: block; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 2px 5px rgba(0,0,0,.15); transition: transform .2s; }.switch[aria-checked="true"] { background: var(--emerald); }.switch[aria-checked="true"] i { transform: translateX(20px); }.language-setting select { min-width: 101px; padding: 8px; color: var(--emerald); border: 0; border-radius: 9px; background: var(--surface-soft); font-size: 11px; font-weight: 800; }.install-card { color: var(--emerald); }.install-card > span:first-child { display: grid; flex: 0 0 42px; width: 42px; height: 42px; place-items: center; color: var(--gold); border-radius: 12px; background: var(--gold-soft); font-size: 23px; }.install-card > span:nth-child(2), .settings-link > span:nth-child(2) { flex: 1; }.install-card b { font-size: 24px; font-weight: 400; }.settings-link { margin-top: 7px; text-decoration: none; }.settings-link > span:first-child { display: grid; flex: 0 0 33px; width: 33px; height: 33px; place-items: center; color: var(--emerald); border-radius: 10px; background: var(--emerald-soft); font-size: 15px; }.danger-link { color: var(--danger); }.danger-link > span:first-child { color: var(--danger); background: var(--danger-soft); }.privacy-card { display: flex; gap: 9px; margin-top: 14px; padding: 12px; color: var(--muted); border-radius: 14px; background: var(--surface-soft); font-size: 10px; line-height: 1.55; }.privacy-card > span { color: var(--emerald); font-size: 16px; }.faq-section { margin-top: 28px; }.faq-item { border-bottom: 1px solid var(--line); }.faq-item summary { padding: 14px 1px; cursor: pointer; list-style: none; font-size: 12px; font-weight: 800; }.faq-item summary::after { content: "+"; float: right; color: var(--gold); font-size: 18px; }.faq-item[open] summary::after { content: "−"; }.faq-item p { padding: 0 1px 14px; color: var(--muted); font-size: 11px; line-height: 1.6; }

/* Navigation and modals */
.bottom-nav { position: fixed; z-index: 5; bottom: 0; left: 50%; width: min(100%, 540px); height: calc(var(--nav-h) + env(safe-area-inset-bottom)); padding: 8px 7px calc(8px + env(safe-area-inset-bottom)); overflow: hidden; transform: translateX(-50%); display: flex; gap: 3px; border-top: 1px solid var(--line); background: rgba(255,255,255,.93); backdrop-filter: blur(18px); scrollbar-width: none; }.bottom-nav::-webkit-scrollbar { display: none; } [data-theme="dark"] .bottom-nav { background: rgba(23,51,44,.93); }.nav-item { display: flex; flex: 1 1 0; min-width: 0; align-items: center; flex-direction: column; gap: 3px; padding: 5px 1px; color: var(--muted); border: 0; border-radius: 12px; background: transparent; transition: color .2s, background .2s; }.nav-item span { font-size: 17px; line-height: 19px; }.nav-item small { overflow: hidden; max-width: 54px; font-size: 8px; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }.nav-item.active { color: var(--emerald); background: var(--emerald-soft); }
.modal { width: min(calc(100% - 30px), 455px); max-height: min(730px, calc(100dvh - 30px)); padding: 25px; overflow-y: auto; color: var(--ink); border: 0; border-radius: 24px; background: var(--surface); box-shadow: var(--shadow); }.modal::backdrop { background: rgba(5,31,25,.6); backdrop-filter: blur(5px); }.modal h2 { margin: 0 25px 7px 0; font: 700 32px/1.02 Amiri, "Noto Naskh Arabic", serif; }.modal > form > p { color: var(--muted); font-size: 12px; line-height: 1.62; }.modal-close { position: absolute; top: 13px; right: 14px; display: grid; width: 34px; height: 34px; place-items: center; border: 0; border-radius: 50%; color: var(--ink); background: var(--surface-soft); font-size: 25px; line-height: 1; }.practice-list { display: grid; gap: 8px; margin-top: 18px; }.practice-option { width: 100%; display: grid; grid-template-columns: 37px 1fr auto; gap: 10px; align-items: center; padding: 11px; color: var(--ink); border: 1px solid var(--line); border-radius: 15px; background: var(--surface-raised); text-align: start; }.practice-option.active { border-color: var(--emerald); box-shadow: inset 0 0 0 1px var(--emerald); }.practice-option > span:first-child { display: grid; width: 37px; height: 37px; place-items: center; color: var(--gold); border-radius: 11px; background: var(--gold-soft); font-size: 17px; }.practice-option strong, .practice-option small { display: block; }.practice-option strong { font-size: 12px; }.practice-option small { margin-top: 2px; color: var(--muted); font-size: 9px; }.practice-option b { color: var(--emerald); font-size: 16px; }.modal-source { margin-top: 15px; padding: 9px 10px; color: var(--emerald); border-radius: 10px; background: var(--emerald-soft); font-size: 11px; font-weight: 800; }.modal-action { margin: 12px 0 0; color: var(--gold) !important; font-size: 12px !important; font-weight: 700; }.modal .primary-button { margin-top: 17px; }.modal .secondary-button + .primary-button { margin-top: 8px; }.modal-input { width: 100%; padding: 11px; color: var(--ink); border: 1px solid var(--line); border-radius: 12px; outline: 0; background: var(--surface-soft); font-size: 12px; }.story-body { resize: vertical; min-height: 112px; }.consent { display: flex; gap: 8px; align-items: start; margin-top: 15px; color: var(--muted); font-size: 10px; line-height: 1.5; }.consent input { margin-top: 2px; accent-color: var(--emerald); }.form-feedback { min-height: 17px; margin-top: 9px !important; color: var(--danger) !important; font-size: 10px !important; }.form-feedback.success { color: var(--emerald) !important; }.install-steps { margin: 13px 0 15px; padding-left: 20px; color: var(--muted); font-size: 12px; line-height: 1.65; }.modal-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 18px; }.toast { position: fixed; z-index: 12; bottom: calc(var(--nav-h) + 17px); left: 50%; max-width: calc(100% - 38px); padding: 11px 15px; transform: translate(-50%, 28px); color: #fff; border-radius: 12px; background: #123c32; box-shadow: 0 8px 21px rgba(0,0,0,.25); font-size: 11px; font-weight: 700; pointer-events: none; opacity: 0; transition: opacity .25s, transform .25s; }.toast.show { opacity: 1; transform: translate(-50%, 0); }.svg-sprite { display: none; }

html[dir="rtl"] .modal-close { right: auto; left: 14px; } html[dir="rtl"] .modal h2 { margin-right: 0; margin-left: 25px; } html[dir="rtl"] .knowledge-card footer { right: 15px; left: auto; } html[dir="rtl"] .community-story::before { right: auto; left: 8px; } html[dir="rtl"] .community-story h3 { padding-right: 0; padding-left: 26px; } html[dir="rtl"] .install-steps { padding-right: 20px; padding-left: 0; }
@media (min-width: 560px) { body { padding: 20px; }.app-shell { min-height: calc(100dvh - 40px); border-radius: 30px; box-shadow: var(--shadow); }.bottom-nav { bottom: 20px; border-radius: 0 0 30px 30px; }.tasbih-button { width: 337px; height: 337px; } }
@media (max-width: 360px) { .topbar, .screen { padding-left: 15px; padding-right: 15px; }.knowledge-filters { margin-left: -15px; margin-right: -15px; padding-left: 15px; padding-right: 15px; }.tasbih-button { width: min(78vw, 300px); height: min(78vw, 300px); }.tasbih-number { font-size: 80px; }.knowledge-card { min-height: 180px; padding: 13px; }.knowledge-card h3 { font-size: 23px; }.nav-item small { font-size: 7px; } }
html[data-reduce-motion="true"] *, html[data-reduce-motion="true"] *::before, html[data-reduce-motion="true"] *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; }

/* Interaction safety and focused practice mode */
.tasbih-header-actions { display: flex; gap: 7px; }.focus-toggle { font-size: 16px; }
.app-shell.focus-mode .topbar, .app-shell.focus-mode .screen-topline, .app-shell.focus-mode .tasbih-heading, .app-shell.focus-mode .practice-panel, .app-shell.focus-mode .tasbih-actions, .app-shell.focus-mode .session-note, .app-shell.focus-mode .bottom-nav { display: none !important; }.app-shell.focus-mode .screen { min-height: 100dvh; display: grid; place-content: center; padding: 20px; }.app-shell.focus-mode .tasbih-button { width: min(88vw, 540px); height: min(88vw, 540px); margin: 0; }.app-shell.focus-mode::after { content: "Нажмите двумя пальцами, чтобы выйти"; position: fixed; bottom: 22px; left: 50%; color: var(--muted); font-size: 11px; transform: translateX(-50%); }

/* The reminder is genuinely hidden until the user finishes the card. */
.sunna-content { opacity: 0 !important; transform: scale(.97); transition: opacity .5s ease, transform .5s ease; }.scratch-card.revealed .sunna-content { opacity: 1 !important; transform: scale(1); }.scratch-card canvas { touch-action: none; overscroll-behavior: contain; }

/* A changing daily knowledge prompt makes this screen useful before card browsing. */
.knowledge-quest { display: grid; grid-template-columns: 43px 1fr auto; gap: 11px; align-items: center; margin: 17px 0 10px; padding: 13px; border: 1px solid rgba(233,201,111,.5); border-radius: 18px; background: linear-gradient(135deg, var(--gold-soft), var(--surface)); }.quest-orb { display: grid; width: 43px; height: 43px; place-items: center; color: #fff; border-radius: 14px; background: linear-gradient(135deg, var(--gold), #9c6a16); font-size: 20px; }.knowledge-quest small { display: block; color: var(--gold); font-size: 9px; font-weight: 800; letter-spacing: .09em; }.knowledge-quest strong { display: block; margin-top: 2px; font-size: 13px; }.knowledge-quest p { margin-top: 3px; color: var(--muted); font-size: 10px; }.knowledge-quest button { width: 34px; height: 34px; border: 1px solid var(--line); border-radius: 11px; color: var(--emerald); background: var(--surface); font-size: 17px; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; } }

/* Mobile-first navigation cleanup */
.more-grid { display: grid; grid-template-columns: 1fr; gap: 9px; margin-top: 20px; }
.more-card { width: 100%; display: grid; grid-template-columns: 44px minmax(0,1fr) auto; grid-template-rows: auto auto; gap: 2px 11px; align-items: center; padding: 14px; border: 1px solid var(--line); border-radius: 18px; color: var(--ink); background: var(--surface); text-align: start; text-decoration: none; box-shadow: var(--shadow-small); }
.more-card > span:first-child { grid-row: 1 / 3; display: grid; width: 44px; height: 44px; place-items: center; color: var(--gold); border-radius: 13px; background: var(--gold-soft); font-size: 20px; }
.more-card strong { font-size: 13px; }
.more-card small { color: var(--muted); font-size: 10px; line-height: 1.35; }
.more-card b { grid-column: 3; grid-row: 1 / 3; color: var(--emerald); font-size: 23px; font-weight: 400; }
.more-card:active { transform: scale(.985); }
.more-note { margin-top: 14px; }
@media (min-width: 420px) { .more-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 360px) { .nav-item span { font-size: 15px; } }