/* v176 · فیلترهای دیسکاور + سربرگ + استوری دسکتاپ */
/* ── سربرگ ── */
.hb175:not(.lng):not(.flt){ display:grid !important }
.hb175.brand176{ border:0 !important; background:linear-gradient(135deg,#FF3D7F 0%,#A855F7 55%,#3B82F6 100%) !important; box-shadow:0 8px 18px -6px rgba(168,85,247,.6), inset 0 1px 0 rgba(255,255,255,.35) !important }
.hb175.brand176::after{ content:""; position:absolute; inset:0; border-radius:inherit; background:linear-gradient(160deg,rgba(255,255,255,.35),transparent 45%); pointer-events:none }
.hb175.brand176 > svg{ width:25px !important; height:25px !important; filter:drop-shadow(0 1px 2px rgba(0,0,0,.2)); animation:gr175 14s linear infinite }
.hb175.brand176.spin > svg{ animation:gs176 .7s cubic-bezier(.3,.9,.3,1) }
@keyframes gs176{ to{ transform:rotate(180deg) } }

/* ── بینندهٔ استوری در کامپیوتر: قاب گوشی وسط صفحه ── */
@media (min-width:600px){
  body.sv109-open::before{ content:""; position:fixed; inset:0; z-index:10029; background:rgba(8,4,18,.88); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px) }
  #sv109{ left:0; right:0; margin:0 auto; width:min(440px, calc((100vh - 24px) * 9 / 16)); top:12px; bottom:12px; border-radius:24px; box-shadow:0 30px 80px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.08) }
  #sv109 .sv109-media img{ object-fit:cover }
}
/* ── نوار «پاسخ فرستاده شد» ── */
.sb175{ display:flex; align-items:center; gap:10px; padding:8px 8px 8px 12px; border-radius:18px; color:#fff; background:linear-gradient(100deg,rgba(16,185,129,.9),rgba(14,165,233,.9)); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); box-shadow:0 10px 24px rgba(0,0,0,.35); animation:sb175 .35s cubic-bezier(.2,1.3,.3,1) both }
[dir=rtl] .sb175, .sb175:dir(rtl){ padding:8px 12px 8px 8px }
.sb175.out{ animation:sb175o .3s ease both }
@keyframes sb175{ from{ transform:translateY(14px) scale(.95); opacity:0 } } @keyframes sb175o{ to{ transform:translateY(10px); opacity:0 } }
.sb175 > i{ flex:none; width:28px; height:28px; border-radius:50%; display:grid; place-items:center; background:rgba(255,255,255,.25) } .sb175 > i svg{ width:15px; height:15px }
.sb175 span{ flex:1; min-width:0; display:flex; flex-direction:column } .sb175 b{ font-size:13px; font-weight:900; white-space:nowrap; overflow:hidden; text-overflow:ellipsis } .sb175 small{ font-size:11px; font-weight:700; opacity:.9 }
.sb175 button{ flex:none; height:32px; padding:0 14px; border:0; border-radius:11px; cursor:pointer; font-family:inherit; font-size:12.5px; font-weight:900; color:#047857; background:#fff }

/* ── صفحهٔ فیلتر ── */
#s-filters.fl176on{ padding-left:0 !important; padding-right:0 !important }
#s-filters.fl176on > *:not(#fl176host){ display:none !important }
.fl176{ --ink:#1F1433; --sub:#8A82A0; --line:#EEE8F8; color:var(--ink); max-width:640px; margin:0 auto; padding:2px 14px 110px }
.fl176 button{ font-family:inherit; color:inherit }
.fl176 svg{ display:block }
.hd176{ display:flex; align-items:center; gap:10px; margin:4px 0 12px }
.hd176 > div{ flex:1; min-width:0 }
.hd176 h2{ margin:0; font-size:21px; font-weight:900; background:linear-gradient(90deg,#FF3D7F,#8B5CF6,#3B82F6); -webkit-background-clip:text; background-clip:text; color:transparent }
.hd176 small{ font-size:11.5px; font-weight:700; color:var(--sub) }
.bk176{ flex:none; width:40px; height:40px; border:0; border-radius:14px; cursor:pointer; display:grid; place-items:center; background:#F3EFFA; color:#5B5270 !important } .bk176 svg{ width:21px; height:21px } [dir=rtl] .bk176 svg{ transform:scaleX(-1) }
.rs176{ flex:none; display:flex; align-items:center; gap:5px; height:36px; padding:0 12px; border:0; border-radius:12px; cursor:pointer; font-size:12px; font-weight:900; color:#8B5CF6 !important; background:#F3EEFF } .rs176 svg{ width:15px; height:15px }
.cd176{ margin-bottom:12px; padding:14px; border-radius:22px; background:#fff; box-shadow:0 8px 22px -14px rgba(76,29,149,.3), inset 0 0 0 1px var(--line) }
.cd176 h3{ display:flex; align-items:center; gap:6px; margin:0 2px 12px; font-size:14px; font-weight:900 }
.cd176 h3 svg{ width:16px; height:16px; color:#8B5CF6 }
.av176{ margin-inline-start:auto; padding:4px 11px; border-radius:99px; font-style:normal; font-size:12px; font-weight:900; color:#fff; background:linear-gradient(100deg,#FF3D7F,#8B5CF6) }
.gd176{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px }
.gd176 button{ display:flex; flex-direction:column; align-items:center; gap:7px; padding:14px 6px 12px; border:0; border-radius:18px; cursor:pointer; background:#F7F4FC; box-shadow:inset 0 0 0 1.5px transparent; transition:.2s }
.gd176 i{ width:44px; height:44px; border-radius:15px; display:grid; place-items:center; color:#fff; background:linear-gradient(135deg,#A78BFA,#8B5CF6) } .gd176 i svg{ width:22px; height:22px }
.gd176 .g-w i{ background:linear-gradient(135deg,#FF3D7F,#F472B6) } .gd176 .g-m i{ background:linear-gradient(135deg,#3B82F6,#22D3EE) }
.gd176 b{ font-size:13px; font-weight:900 }
.gd176 button.on{ background:#fff; box-shadow:inset 0 0 0 2px #8B5CF6, 0 10px 22px -12px rgba(139,92,246,.6); transform:translateY(-2px) }
.rg176{ position:relative; height:34px; direction:ltr }
.tr176{ position:absolute; left:0; right:0; top:50%; height:8px; margin-top:-4px; border-radius:4px; background:#EDE8F5 }
.tr176 i{ position:absolute; top:0; bottom:0; border-radius:4px; background:linear-gradient(90deg,#FF3D7F,#8B5CF6) }
.rg176 input{ position:absolute; left:0; right:0; top:0; width:100%; height:34px; margin:0; background:none; pointer-events:none; -webkit-appearance:none; appearance:none }
.rg176 input::-webkit-slider-thumb{ -webkit-appearance:none; pointer-events:auto; width:26px; height:26px; border-radius:50%; background:#fff; border:3px solid #8B5CF6; box-shadow:0 4px 12px rgba(139,92,246,.45); cursor:grab }
.rg176 input::-moz-range-thumb{ pointer-events:auto; width:22px; height:22px; border-radius:50%; background:#fff; border:3px solid #8B5CF6; box-shadow:0 4px 12px rgba(139,92,246,.45); cursor:grab }
.rg176 input::-webkit-slider-runnable-track{ background:none } .rg176 input::-moz-range-track{ background:none }
.rl176{ display:flex; justify-content:space-between; margin-top:4px; font-size:11px; font-weight:800; color:var(--sub); direction:ltr }
.lc176{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px }
.lc176 button{ display:flex; flex-direction:column; align-items:center; gap:4px; padding:12px 4px; border:0; border-radius:18px; cursor:pointer; background:#F7F4FC; transition:.2s; min-width:0 }
.lc176 i{ width:36px; height:36px; margin-bottom:2px; border-radius:12px; display:grid; place-items:center; color:#8B5CF6; background:#EDE7FE } .lc176 i svg{ width:19px; height:19px }
.lc176 b{ font-size:12.5px; font-weight:900 } .lc176 small{ max-width:100%; font-size:10.5px; font-weight:700; color:var(--sub); white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.lc176 button.on{ background:linear-gradient(135deg,#FF3D7F,#8B5CF6); color:#fff !important } .lc176 button.on i{ color:#fff; background:rgba(255,255,255,.22) } .lc176 button.on small{ color:rgba(255,255,255,.85) }
.ls176{ display:flex; flex-direction:column }
.rw176{ position:relative; display:flex; align-items:center; gap:12px; min-height:56px; padding:6px 2px; border:0; background:none; cursor:pointer; text-align:start }
.rw176 + .rw176{ border-top:1px solid #F2EEF8 }
.rw176 > i{ flex:none; width:38px; height:38px; border-radius:13px; display:grid; place-items:center; color:#fff } .rw176 > i svg{ width:19px; height:19px }
.rw176 > i.c-gr{ background:#ECFDF5 } .rw176 > i.c-sk{ background:#E0F2FE } .rw176 > i.c-pk{ background:linear-gradient(135deg,#FF3D7F,#F472B6) } .rw176 > i.c-am{ background:linear-gradient(135deg,#F59E0B,#F97316) }
.rw176 > span{ flex:1; min-width:0; display:flex; flex-direction:column } .rw176 b{ font-size:14px; font-weight:800 } .rw176 small{ font-size:11.5px; font-weight:600; color:var(--sub) }
.tg176{ position:relative; flex:0 0 48px; width:48px; height:29px; border-radius:99px; background:#E5E0EE; transition:background .25s }
.tg176 i{ position:absolute; top:3.5px; inset-inline-start:3.5px; width:22px; height:22px; border-radius:50%; background:#fff; box-shadow:0 2px 6px rgba(0,0,0,.2); transition:inset-inline-start .25s cubic-bezier(.3,.9,.3,1.3) }
.tg176.on{ background:linear-gradient(90deg,#FF3D7F,#8B5CF6) } .tg176.on i{ inset-inline-start:22.5px }
.ac176{ display:grid; grid-template-columns:repeat(4,1fr); gap:6px }
.ac176 button{ height:40px; border:0; border-radius:13px; cursor:pointer; font-size:12.5px; font-weight:900; color:#8A82A0 !important; background:#F7F4FC }
.ac176 button.on{ color:#fff !important; background:linear-gradient(100deg,#FF3D7F,#8B5CF6) }
.ft176{ position:fixed; left:0; right:0; bottom:calc(64px + env(safe-area-inset-bottom)); z-index:30; display:flex; justify-content:center; padding:10px 14px; pointer-events:none;
  background:linear-gradient(0deg, rgba(250,248,253,.98) 55%, rgba(250,248,253,0)) }
.ap176{ pointer-events:auto; display:flex; align-items:center; justify-content:center; gap:8px; width:100%; max-width:420px; height:54px; border:0; border-radius:18px; cursor:pointer; color:#fff !important;
  background:linear-gradient(100deg,#FF3D7F,#8B5CF6 60%,#3B82F6); box-shadow:0 14px 28px -10px rgba(139,92,246,.7); position:relative; overflow:hidden }
.ap176::after{ content:""; position:absolute; inset:0; background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.35) 50%,transparent 65%); background-size:250% 100%; animation:ap176 2.8s ease-in-out infinite }
@keyframes ap176{ 0%{ background-position:130% 0 } 60%,100%{ background-position:-40% 0 } }
.ap176 svg{ width:19px; height:19px } .ap176 b{ font-size:15px; font-weight:900 } .ap176 b.ld{ opacity:.6 }
.ap176.zero{ background:linear-gradient(100deg,#94A3B8,#64748B); box-shadow:none }
.rw176 > .tg176{ flex:0 0 48px; width:48px }