@charset "UTF-8";

@font-face{font-family:IranYekan;src:url('fonts/woff2/iranyekanwebregular.woff2') format('woff2');font-style:normal;font-weight:400;font-display:swap}
@font-face{font-family:IranYekan;src:url('fonts/woff2/iranyekanwebmedium.woff2') format('woff2');font-style:normal;font-weight:500;font-display:swap}
@font-face{font-family:IranYekan;src:url('fonts/woff2/iranyekanwebbold.woff2') format('woff2');font-style:normal;font-weight:700;font-display:swap}
@font-face{font-family:IranYekan;src:url('fonts/woff2/iranyekanwebextrabold.woff2') format('woff2');font-style:normal;font-weight:800;font-display:swap}

:root{
  color-scheme:light;
  --bg:#f6f1eb;
  --surface:#fffdf9;
  --surface-strong:#fff;
  --text:#211c1b;
  --muted:#766d69;
  --primary:#8f111b;
  --primary-strong:#741018;
  --primary-soft:#f7e6e7;
  --border:#eadfd8;
  --shadow:0 18px 50px rgba(63,35,30,.09);
  --header-h:78px;
  --bottom-h:76px;
  --arabic-size:22px;
  --persian-size:15px;
}

html[data-theme="dark"]{
  color-scheme:dark;
  --bg:#151313;
  --surface:#1e1a1a;
  --surface-strong:#262020;
  --text:#f7f1ed;
  --muted:#baaca7;
  --primary:#e06169;
  --primary-strong:#f27980;
  --primary-soft:#3a2224;
  --border:#3a3030;
  --shadow:0 18px 55px rgba(0,0,0,.28);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font-family:IranYekan,Tahoma,sans-serif;line-height:1.8;-webkit-font-smoothing:antialiased}
button,input{font:inherit}
button,a{-webkit-tap-highlight-color:transparent}
a{color:inherit}
svg{width:1.35rem;height:1.35rem;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.skip-link{position:fixed;top:8px;right:8px;z-index:1000;padding:8px 12px;border-radius:10px;background:var(--surface-strong);transform:translateY(-150%)}
.skip-link:focus{transform:translateY(0)}

.app-header{position:sticky;top:0;z-index:40;background:color-mix(in srgb,var(--surface) 90%,transparent);backdrop-filter:blur(18px);border-bottom:1px solid color-mix(in srgb,var(--border) 72%,transparent)}
.header-inner{max-width:920px;height:var(--header-h);margin:auto;padding:0 22px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.brand-block{display:flex;align-items:center;gap:12px;min-width:0}
.brand-mark{display:grid;place-items:center;width:48px;height:48px;border-radius:16px;background:linear-gradient(145deg,var(--primary),var(--primary-strong));color:#fff;font-size:10px;font-weight:800;box-shadow:0 10px 25px color-mix(in srgb,var(--primary) 28%,transparent)}
h1{font-size:18px;line-height:1.4;margin:0;font-weight:800}
.brand-block p{margin:2px 0 0;color:var(--muted);font-size:11px}
.header-actions{display:flex;gap:8px}
.icon-button{display:grid;place-items:center;width:42px;height:42px;border:1px solid var(--border);border-radius:14px;background:var(--surface-strong);color:var(--text);cursor:pointer}
.icon-button:hover{border-color:var(--primary);color:var(--primary)}
.moon-icon{fill:currentColor;stroke:none}
.progress-track{height:3px;background:transparent;direction:ltr}
.progress-track span{display:block;width:0;height:100%;background:linear-gradient(90deg,var(--primary-strong),var(--primary));transition:width .12s linear}

.main-content{max-width:920px;margin:auto;padding:24px 20px calc(var(--bottom-h) + 34px)}
.primary-button,.secondary-button,.install-button{border:0;border-radius:14px;padding:11px 16px;text-decoration:none;cursor:pointer;font-weight:700;text-align:center}
.primary-button,.install-button{background:var(--primary);color:#fff}
.secondary-button{background:var(--primary-soft);color:var(--primary);white-space:nowrap}


.prayer-content{display:grid;gap:12px}
.faraz{position:relative;padding:25px 26px 22px;border:1px solid var(--border);border-radius:22px;background:var(--surface);box-shadow:0 8px 25px rgba(59,35,31,.045);text-align:center;content-visibility:auto;contain-intrinsic-size:180px;scroll-margin-top:150px;transition:border-color .2s,transform .2s,background .2s}
.faraz:hover{border-color:color-mix(in srgb,var(--primary) 32%,var(--border));transform:translateY(-1px)}
.faraz::before{content:"";position:absolute;top:16px;right:16px;width:5px;height:5px;border-radius:50%;background:var(--primary);opacity:.35}
.ar_txt{font-size:var(--arabic-size);font-weight:800;line-height:2.05;color:var(--text);text-wrap:balance}
.fa_txt{font-size:var(--persian-size);line-height:1.95;margin-top:10px;color:var(--primary);text-wrap:pretty;transition:opacity .2s,max-height .2s,margin .2s}
html[data-translation="off"] .fa_txt,.translation-hidden .fa_txt{display:none!important}
.steps{display:inline-flex;margin:0 auto 14px;padding:6px 11px;border-radius:999px;background:var(--primary-soft);color:var(--primary);font-size:12px;font-weight:700}

.bottom-nav{position:fixed;right:50%;bottom:max(10px,env(safe-area-inset-bottom));transform:translateX(50%);z-index:45;width:min(560px,calc(100% - 24px));height:var(--bottom-h);display:grid;grid-template-columns:repeat(4,1fr);padding:7px;border:1px solid color-mix(in srgb,var(--border) 85%,transparent);border-radius:24px;background:color-mix(in srgb,var(--surface-strong) 94%,transparent);backdrop-filter:blur(18px);box-shadow:0 16px 42px rgba(46,24,22,.17)}
.nav-item{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;border:0;border-radius:17px;background:transparent;color:var(--muted);font-size:10px;font-weight:700;cursor:pointer}
.nav-item svg{width:20px;height:20px}
.nav-item:hover,.nav-item.is-active{background:var(--primary-soft);color:var(--primary)}

.app-dialog{width:min(520px,calc(100% - 28px));max-height:min(720px,calc(100dvh - 32px));padding:0;border:0;border-radius:28px;background:transparent;color:var(--text);overflow:visible}
.app-dialog::backdrop{background:rgba(20,12,12,.5);backdrop-filter:blur(5px)}
.dialog-card{overflow:hidden;border:1px solid var(--border);border-radius:28px;background:var(--surface-strong);box-shadow:0 28px 80px rgba(0,0,0,.25)}
.dialog-card header{display:flex;align-items:center;justify-content:space-between;padding:22px 24px;border-bottom:1px solid var(--border)}
.dialog-close{display:grid;place-items:center;width:38px;height:38px;border:0;border-radius:13px;background:var(--primary-soft);color:var(--primary);font-size:25px;line-height:1;cursor:pointer}
.dialog-content{padding:22px 24px 26px}
.segmented-control{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;padding:5px;border-radius:16px;background:var(--bg)}
.segmented-control button{border:0;border-radius:12px;padding:10px 8px;background:transparent;color:var(--muted);cursor:pointer;font-weight:700}
.segmented-control button.is-active{background:var(--surface-strong);color:var(--primary);box-shadow:0 5px 15px rgba(40,25,22,.08)}
.switch-row{display:flex;align-items:center;justify-content:space-between;gap:18px;width:100%;margin-top:18px;padding:16px;border:1px solid var(--border);border-radius:18px;background:transparent;color:inherit;text-align:right;font:inherit;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.switch-copy{display:grid;flex:1}.switch-row small{color:var(--muted);font-size:11px;margin-top:2px}.toggle-switch{position:relative;display:block;width:48px;height:28px;flex:0 0 48px;border-radius:999px;background:var(--border);transition:background .2s ease,box-shadow .2s ease}.toggle-knob{position:absolute;top:4px;right:4px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 2px 7px rgba(0,0,0,.22);transition:transform .2s ease}.switch-row[aria-checked="true"] .toggle-switch{background:var(--primary)}.switch-row[aria-checked="true"] .toggle-knob{transform:translateX(-20px)}.switch-row:focus-visible{outline:3px solid color-mix(in srgb,var(--primary) 30%,transparent);outline-offset:3px}.switch-row:active{transform:scale(.995)}
.install-button{width:100%;margin-top:14px}
.settings-grid{display:grid;gap:20px}
.setting-group{display:grid;gap:10px}.setting-label{display:flex;justify-content:space-between}.setting-label output{min-width:38px;text-align:center;padding:2px 7px;border-radius:8px;background:var(--primary-soft);color:var(--primary);font-weight:700}
input[type="range"]{width:100%;accent-color:var(--primary)}
.full-width{width:100%}
.support-content{display:grid;gap:14px;text-align:center}.support-content p{margin:0;color:var(--muted);font-size:14px}.text-link{color:var(--primary);font-size:13px;font-weight:700;text-decoration:none}
.toast{position:fixed;right:50%;bottom:calc(var(--bottom-h) + 24px);transform:translateX(50%);z-index:80;max-width:calc(100% - 30px);padding:10px 15px;border-radius:13px;background:#211c1b;color:#fff;font-size:12px;box-shadow:0 12px 35px rgba(0,0,0,.25)}
.noscript{position:fixed;inset:auto 12px 12px;z-index:100;padding:12px;border-radius:12px;background:#fff3cd;color:#664d03;text-align:center}


.icon-button svg,.nav-item svg{transition:transform .2s ease,stroke-width .2s ease}
.icon-button:hover svg,.nav-item:hover svg{transform:scale(1.08);stroke-width:2}
.install-prompt-dialog{width:min(430px,calc(100% - 24px))}
.install-prompt-card{position:relative;text-align:center;padding-top:30px;overflow:visible}
.install-prompt-card>.dialog-close{position:absolute;top:14px;left:14px;z-index:2}
.install-visual{width:92px;height:92px;margin:0 auto 4px;padding:10px;border-radius:25px;background:linear-gradient(145deg,var(--primary-soft),var(--surface-strong));box-shadow:0 16px 38px color-mix(in srgb,var(--primary) 20%,transparent)}
.install-visual img{display:block;width:100%;height:100%;border-radius:19px}
.install-prompt-card h2{margin:4px 0 8px;font-size:23px}
.install-prompt-card p{margin:0;color:var(--muted);font-size:13px;line-height:1.9}
.install-actions{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:20px}
.install-actions button{width:100%}

:focus-visible{outline:3px solid color-mix(in srgb,var(--primary) 45%,transparent);outline-offset:3px}

@media (max-width:700px){
  :root{--header-h:70px;--bottom-h:68px}
  .header-inner{padding:0 14px}.brand-mark{width:42px;height:42px;border-radius:14px}.brand-block p{display:none}.header-actions .icon-button{width:38px;height:38px}
  .main-content{padding:16px 12px calc(var(--bottom-h) + 30px)}
  .prayer-content{gap:9px}.faraz{padding:21px 17px 18px;border-radius:18px}.ar_txt{line-height:2}.fa_txt{line-height:1.9}
  .bottom-nav{bottom:max(6px,env(safe-area-inset-bottom));width:calc(100% - 16px);border-radius:21px}.nav-item{border-radius:15px}
  .app-dialog{width:calc(100% - 18px);margin:auto}.dialog-card,.app-dialog{border-radius:23px}.dialog-card header{padding:18px}.dialog-content{padding:18px 18px 22px}
}

@media (min-width:701px) and (max-width:1024px){.main-content,.header-inner{max-width:780px}.faraz{padding-inline:40px}}
@media (min-width:1025px){.bottom-nav{bottom:18px}.prayer-content{grid-template-columns:1fr}.faraz{padding-inline:56px}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}
@media print{.app-header,.bottom-nav{display:none!important}.main-content{max-width:none;padding:0}.faraz{break-inside:avoid;box-shadow:none;border-color:#ddd}.fa_txt{color:#7b1119}}


.primary-button.is-disabled,.primary-button:disabled{opacity:.48;cursor:not-allowed;filter:grayscale(.2);box-shadow:none;pointer-events:none}