/* شاخه‌ها: استایل مشترک (رنگ برند هر شاخه با متغیرهای :root از خود صفحه میاد) */
@font-face { font-family: Estedad; src: url(/fonts/Estedad-arabic-400.woff2) format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: Estedad; src: url(/fonts/Estedad-arabic-700.woff2) format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: Estedad; src: url(/fonts/Estedad-arabic-900.woff2) format('woff2'); font-weight: 900; font-display: swap; }
:root { --bg: #fbf7f3; --surface: #fff; --s2: #f5ede6; --text: #2c1d22; --muted: #7d6a6f; --line: #ecdfd6; --acc: #9b4f6e; --acc2: #c08a6b; --on: #fff;
  --hero: linear-gradient(135deg, #f7e9e1, #fbf7f3 55%, #efe2f0); --r: 20px; --shadow: 0 1px 2px rgba(60,20,30,.05), 0 14px 40px -18px rgba(60,20,30,.25); }
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: Estedad, Tahoma, sans-serif; background: var(--bg); color: var(--text); line-height: 1.9; }
a { color: var(--acc); text-decoration: none; }
a:hover { color: var(--text); }
img { max-width: 100%; }
[hidden] { display: none !important; }
.wrap { width: min(1180px, 100% - 32px); margin-inline: auto; }
h1, h2, h3 { line-height: 1.5; margin: 0 0 .4em; }
.muted { color: var(--muted); } .small { font-size: .86rem; } .faint { color: var(--muted); opacity: .8; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 20px; border-radius: 14px; font: inherit; font-weight: 800; border: 1px solid var(--line); background: var(--surface); color: var(--text); cursor: pointer; transition: transform .15s, box-shadow .15s; }
.btn:hover { transform: translateY(-1px); color: var(--text); }
.btn-acc { background: linear-gradient(120deg, var(--acc), var(--acc2)); color: #fff; border: 0; box-shadow: 0 10px 26px -12px var(--acc); }
.btn-acc:hover { color: #fff; }
.btn-sm { padding: 7px 13px; font-size: .86rem; border-radius: 11px; }
.btn-wa { background: #1fa855; color: #fff; border: 0; } .btn-wa:hover { color: #fff; }
.btn-ig { background: linear-gradient(45deg, #f09433, #dc2743 50%, #bc1888); color: #fff; border: 0; } .btn-ig:hover { color: #fff; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 20px; box-shadow: var(--shadow); }
.chip { display: inline-flex; align-items: center; gap: 4px; font-size: .76rem; padding: 2px 10px; border-radius: 999px; border: 1px solid var(--line); background: var(--s2); color: var(--text); white-space: nowrap; }
.grid { display: grid; gap: 16px; } .g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 900px) { .g3, .g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .g2, .g3, .g4 { grid-template-columns: 1fr; } }
.alert { padding: 10px 14px; border-radius: 12px; background: var(--s2); border: 1px solid var(--line); margin: 10px 0; }
.alert.err { color: #a2283c; border-color: #f0c5cd; background: #fdf0f2; } .alert.ok { color: #23704f; border-color: #c7e8d8; background: #f0faf5; }
label.f { display: block; margin: 10px 0; } label.f > span { display: block; font-size: .86rem; font-weight: 700; margin-bottom: 4px; }
input[type=text], input[type=tel], input[type=password], input[type=number], input[type=url], input[type=search], select, textarea {
  width: 100%; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); color: var(--text); font: inherit; }
input:focus, select:focus, textarea:focus { outline: 2px solid color-mix(in srgb, var(--acc) 35%, transparent); border-color: var(--acc); }
.hint { font-size: .78rem; color: var(--muted); margin-top: 3px; }
.checks { display: flex; flex-wrap: wrap; gap: 6px; }
.checks label { cursor: pointer; } .checks input { position: absolute; opacity: 0; pointer-events: none; }
.checks span { display: inline-block; padding: 5px 11px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); font-size: .84rem; }
.checks input:checked + span { background: color-mix(in srgb, var(--acc) 14%, var(--surface)); border-color: var(--acc); font-weight: 700; }
.checks input:focus-visible + span { outline: 2px solid var(--acc); }

/* سربرگ و پانوشت سایت عطریجات */
.top { position: sticky; top: 0; z-index: 30; background: color-mix(in srgb, var(--bg) 86%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.top .in { display: flex; align-items: center; gap: 18px; height: 64px; }
.brand { display: flex; align-items: center; gap: 8px; font-weight: 900; font-size: 1.3rem; color: var(--text); }
.brand i { font-style: normal; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 12px; background: linear-gradient(135deg, var(--acc), var(--acc2)); color: #fff; font-size: 1.1rem; }
.top nav { display: flex; gap: 4px; margin-inline-start: 8px; }
.top nav a { padding: 6px 12px; border-radius: 10px; color: var(--text); font-weight: 700; font-size: .92rem; }
.top nav a:hover, .top nav a.on { background: var(--s2); }
.top .end { margin-inline-start: auto; display: flex; gap: 8px; }
@media (max-width: 760px) { .top .end .btn.mode-t { display: none; } .top .end .btn { padding: 6px 10px; font-size: .8rem; } }
.foot { margin-top: 60px; border-top: 1px solid var(--line); background: var(--s2); padding: 30px 0 22px; font-size: .88rem; color: var(--muted); }
.foot-grid { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 24px; }
.foot h4 { color: var(--text); margin: 0 0 8px; font-size: .95rem; }
.foot a { display: block; color: var(--muted); padding: 3px 0; } .foot a:hover { color: var(--acc); }
.foot-legal { margin-top: 20px; padding-top: 14px; border-top: 1px solid var(--line); font-size: .78rem; line-height: 1.9; }
@media (max-width: 760px) { .foot-grid { grid-template-columns: 1fr 1fr; } .foot-grid > div:first-child { grid-column: 1 / -1; } }

/* صفحه‌ی اصلی */
.hero { background: var(--hero); border-bottom: 1px solid var(--line); padding: 56px 0 46px; overflow: hidden; }
.hero .in { display: grid; grid-template-columns: 1.05fr 1fr; gap: 40px; align-items: center; }
.eyebrow { display: inline-flex; gap: 6px; padding: 5px 14px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); font-size: .84rem; font-weight: 700; color: var(--acc); }
.hero h1 { font-size: clamp(2.1rem, 5vw, 3.6rem); font-weight: 900; margin: 16px 0 10px; line-height: 1.35; }
.grad { background: linear-gradient(90deg, var(--acc), var(--acc2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lead { font-size: 1.08rem; color: var(--muted); max-width: 36em; }
.ctas { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.hero-art { position: relative; height: 430px; }
.hero-art .bt { position: absolute; width: 230px; border-radius: 28px; overflow: hidden; box-shadow: 0 30px 60px -24px rgba(60,20,30,.45); border: 4px solid #fff; }
.hero-art .bt img { display: block; width: 100%; }
.hero-art .b1 { left: 4%; top: 30px; transform: rotate(-8deg); } .hero-art .b2 { left: 34%; top: 0; z-index: 2; width: 250px; } .hero-art .b3 { left: 62%; top: 60px; transform: rotate(8deg); }
@media (max-width: 900px) { .hero .in { grid-template-columns: 1fr; } .hero-art { height: 300px; } .hero-art .bt { width: 160px; } .hero-art .b2 { width: 175px; } }
.sec { padding: 46px 0 10px; }
.sec-h { text-align: center; max-width: 760px; margin: 0 auto 22px; }
.sec-h h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); font-weight: 900; }
.feat { display: flex; gap: 14px; align-items: flex-start; }
.feat i { flex: none; font-style: normal; font-size: 1.5rem; width: 50px; height: 50px; border-radius: 16px; display: grid; place-items: center; background: color-mix(in srgb, var(--acc) 12%, var(--surface)); }
.feat b { display: block; } .feat p { margin: 2px 0 0; color: var(--muted); font-size: .9rem; }
.steps { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 0; }
.steps li { display: flex; gap: 12px; align-items: center; padding: 16px; border-radius: 16px; border: 1px dashed var(--line); background: var(--surface); }
.steps b.n { flex: none; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(135deg, var(--acc), var(--acc2)); color: #fff; }
@media (max-width: 760px) { .steps { grid-template-columns: 1fr; } }
.shot { border-radius: 22px; overflow: hidden; border: 1px solid var(--line); box-shadow: var(--shadow); background: var(--surface); }
.shot img { display: block; width: 100%; height: auto; }
.faq details { margin: 8px 0; } .faq summary { cursor: pointer; font-weight: 800; }
.band { margin: 40px 0 0; padding: 26px; border-radius: 26px; color: #fff; background: linear-gradient(120deg, #3b1f2b, #6b3550 55%, #9b4f6e); display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: space-between; }
.band b { font-size: 1.25rem; } .band p { margin: 4px 0 0; opacity: .85; }
.band .btn { background: #fff; color: #3b1f2b; border: 0; }

/* بلاگ عطریجات */
.bcards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 900px) { .bcards { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 600px) { .bcards { grid-template-columns: 1fr; } }
.bcard { display: flex; flex-direction: column; border-radius: var(--r); overflow: hidden; background: var(--surface); border: 1px solid var(--line); color: var(--text); box-shadow: var(--shadow); transition: transform .2s; }
.bcard:hover { transform: translateY(-3px); color: var(--text); }
.bcard img { width: 100%; height: auto; display: block; aspect-ratio: 16 / 9; object-fit: cover; }
.bcard div { padding: 14px 16px 16px; } .bcard h3 { font-size: 1.02rem; margin: 0 0 4px; } .bcard p { margin: 0; color: var(--muted); font-size: .86rem; }
.post { max-width: 780px; margin: 0 auto; }
.post h1 { font-size: clamp(1.7rem, 3.8vw, 2.4rem); font-weight: 900; }
.post h2 { font-size: 1.45rem; margin-top: 1.6em; } .post h3 { margin-top: 1.3em; font-size: 1.12rem; }
.post p, .post li { line-height: 2.1; }
.post figure { margin: 22px 0; border-radius: 18px; overflow: hidden; border: 1px solid var(--line); background: var(--surface); }
.post figure img { display: block; width: 100%; height: auto; } .post figcaption { padding: 8px 14px; font-size: .84rem; color: var(--muted); text-align: center; }
.post .tbl { overflow-x: auto; border: 1px solid var(--line); border-radius: 12px; margin: 16px 0; }
.post table { width: 100%; border-collapse: collapse; font-size: .93rem; } .post th, .post td { padding: 9px 12px; border-bottom: 1px solid var(--line); text-align: start; } .post th { background: var(--s2); }
.post .tip, .post blockquote { margin: 16px 0; padding: 6px 16px; border-inline-start: 4px solid var(--acc); background: color-mix(in srgb, var(--acc) 8%, var(--surface)); border-radius: 12px; }
.post .cta-box { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: space-between; padding: 18px; border-radius: 18px; border: 1px solid var(--line); background: var(--s2); margin: 22px 0; }
.post .cta-box .btn, .post .cta-box a.btn { background: linear-gradient(120deg, var(--acc), var(--acc2)); color: #fff; border: 0; }
.post .viz { margin: 20px 0; background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 14px 18px; }
.post .viz figcaption { text-align: start; font-weight: 800; color: var(--text); padding: 0 0 8px; }
.post .viz-steps ol { counter-reset: s; list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.post .viz-steps li { counter-increment: s; display: flex; gap: 10px; }
.post .viz-steps li::before { content: counter(s, persian); flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(135deg, var(--acc), var(--acc2)); color: #fff; font-size: .85rem; }
.post .vq-g { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; } .post .vq-c { background: var(--s2); border-radius: 10px; padding: 10px; font-size: .88rem; }
.post .vq { display: grid; grid-template-columns: auto 1fr; gap: 6px; } .post .vq-y { writing-mode: vertical-rl; font-size: .75rem; color: var(--muted); display: flex; justify-content: space-between; } .post .vq-x { grid-column: 2; display: flex; justify-content: space-between; font-size: .75rem; color: var(--muted); }
.crumbs { font-size: .84rem; color: var(--muted); margin: 18px 0 10px; }

/* پنل */
.pn { display: grid; grid-template-columns: 230px 1fr; gap: 20px; padding: 22px 0; }
.pn-nav { display: flex; flex-direction: column; gap: 4px; position: sticky; top: 80px; align-self: start; }
.pn-nav a { padding: 9px 12px; border-radius: 12px; color: var(--text); font-weight: 700; }
.pn-nav a.on, .pn-nav a:hover { background: var(--surface); box-shadow: var(--shadow); }
@media (max-width: 820px) { .pn { grid-template-columns: 1fr; } .pn-nav { position: static; flex-direction: row; flex-wrap: wrap; } }
.plist { display: grid; gap: 8px; }
.prow { display: flex; gap: 12px; align-items: center; padding: 10px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.prow img { width: 56px; height: 56px; border-radius: 12px; object-fit: cover; flex: none; }
.prow .t { flex: 1; min-width: 0; } .prow .t b { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sizes-ed { display: grid; gap: 6px; } .sizes-ed .r { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 6px; }
.kpi { font-size: 1.7rem; font-weight: 900; }
.theme-pick { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.theme-pick label { cursor: pointer; } .theme-pick input { position: absolute; opacity: 0; }
.theme-pick span { display: block; border-radius: 16px; overflow: hidden; border: 2px solid var(--line); }
.theme-pick i { display: block; height: 60px; } .theme-pick em { display: block; font-style: normal; padding: 6px 10px; font-size: .84rem; font-weight: 700; background: var(--surface); }
.theme-pick input:checked + span { border-color: var(--acc); box-shadow: 0 0 0 3px color-mix(in srgb, var(--acc) 25%, transparent); }
.auth { max-width: 460px; margin: 40px auto; }

/* منوی عمومی فروشگاه */
.mn { padding-bottom: 40px; }
.mn-hero { background: var(--hero); border-bottom: 1px solid var(--line); }
.mn-cover { height: 150px; background-size: cover; background-position: center; }
.mn-id { display: flex; gap: 16px; align-items: flex-end; padding: 0 0 18px; margin-top: -48px; }
.mn-hero.nocover .mn-id { margin-top: 0; padding-top: 26px; }
.mn-logo { flex: none; width: 96px; height: 96px; border-radius: 26px; overflow: hidden; background: var(--surface); border: 3px solid var(--surface); box-shadow: var(--shadow); display: grid; place-items: center; font-size: 2.4rem; font-weight: 900; color: var(--acc); }
.mn-logo img { width: 100%; height: 100%; object-fit: cover; }
.mn-id h1 { font-size: 1.6rem; margin: 0; font-weight: 900; } .mn-id p { margin: 0; color: var(--muted); }
.mn-ct { display: flex; flex-wrap: wrap; gap: 6px; padding-bottom: 16px; }
.mn-ct a { display: inline-flex; gap: 6px; align-items: center; padding: 7px 12px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); color: var(--text); font-size: .86rem; font-weight: 700; }
.mn-bar { position: sticky; top: 0; z-index: 20; background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(8px); padding: 10px 0; border-bottom: 1px solid var(--line); }
.mn-search { display: flex; gap: 8px; }
.mn-search input { flex: 1; }
.mn-tabs { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin-top: 8px; }
.mn-tabs button { flex: none; font: inherit; font-size: .86rem; font-weight: 700; padding: 6px 13px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--text); cursor: pointer; }
.mn-tabs button.on { background: var(--acc); color: var(--on); border-color: var(--acc); }
.mn-filters { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.mn-filters select { width: auto; padding: 6px 10px; font-size: .84rem; border-radius: 10px; }
.mn-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-top: 16px; }
@media (max-width: 960px) { .mn-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 680px) { .mn-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } }
.pc { position: relative; display: flex; flex-direction: column; border-radius: 18px; overflow: hidden; background: var(--surface); border: 1px solid var(--line); color: var(--text); transition: transform .2s, box-shadow .2s; }
.pc:hover { transform: translateY(-3px); box-shadow: var(--shadow); color: var(--text); }
.pc .im { aspect-ratio: 1; background: var(--s2); } .pc .im img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pc .bd { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 3px; flex: 1; }
.pc .br { font-size: .74rem; color: var(--muted); font-weight: 700; letter-spacing: .02em; }
.pc .nm { font-weight: 800; font-size: .96rem; line-height: 1.6; }
.pc .tg { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 2px; }
.pc .pr { margin-top: auto; padding-top: 6px; font-weight: 900; color: var(--acc); }
.pc .pr small { color: var(--muted); font-weight: 500; font-size: .74rem; } .pc .pr s { color: var(--muted); font-weight: 400; font-size: .78rem; margin-inline-end: 4px; }
.pc .bdg { position: absolute; top: 8px; inset-inline-start: 8px; z-index: 2; font-size: .72rem; font-weight: 800; padding: 3px 9px; border-radius: 999px; background: var(--acc); color: var(--on); }
.pc.na { opacity: .55; }
.empty { text-align: center; padding: 40px 0; color: var(--muted); }
.finder { position: fixed; inset: 0; z-index: 60; background: rgba(20,10,15,.45); display: grid; place-items: center; padding: 16px; }
.finder .box { width: min(520px, 100%); background: var(--surface); border-radius: 24px; padding: 22px; box-shadow: 0 30px 80px rgba(0,0,0,.35); max-height: 90vh; overflow: auto; }
.finder h3 { margin: 0 0 4px; } .finder .q { margin: 14px 0 6px; font-weight: 800; }
.pd { display: grid; grid-template-columns: 1fr 1.1fr; gap: 26px; padding: 22px 0; }
@media (max-width: 820px) { .pd { grid-template-columns: 1fr; } }
.pd-im { border-radius: 24px; overflow: hidden; border: 1px solid var(--line); background: var(--s2); aspect-ratio: 1; } .pd-im img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pd h1 { font-size: 1.7rem; font-weight: 900; margin: 4px 0; }
.pd .en { direction: ltr; text-align: right; color: var(--muted); font-size: .95rem; }
.pyr { display: grid; gap: 8px; margin: 14px 0; }
.pyr div { padding: 10px 14px; border-radius: 14px; background: var(--s2); } .pyr b { display: block; font-size: .82rem; color: var(--muted); }
.meter { display: flex; align-items: center; gap: 10px; margin: 6px 0; font-size: .88rem; }
.meter span { width: 90px; flex: none; color: var(--muted); }
.meter i { flex: 1; height: 8px; border-radius: 8px; background: var(--s2); overflow: hidden; } .meter i b { display: block; height: 100%; background: linear-gradient(90deg, var(--acc2), var(--acc)); border-radius: 8px; }
.opts { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; }
.opts label { cursor: pointer; } .opts input { position: absolute; opacity: 0; }
.opts span { display: flex; flex-direction: column; padding: 8px 14px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface); min-width: 110px; }
.opts span b { font-size: .9rem; } .opts span em { font-style: normal; color: var(--acc); font-weight: 900; } .opts span s { color: var(--muted); font-size: .76rem; }
.opts input:checked + span { border-color: var(--acc); box-shadow: 0 0 0 2px color-mix(in srgb, var(--acc) 30%, transparent); }
.gcalc { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding: 12px; border-radius: 14px; background: var(--s2); margin: 10px 0; }
.gcalc input { width: 110px; }
.gcalc b { color: var(--acc); font-size: 1.15rem; }
.acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.mn-foot { margin-top: 40px; padding: 20px 0; border-top: 1px solid var(--line); font-size: .8rem; color: var(--muted); text-align: center; line-height: 2; }
.mn-foot a { color: var(--muted); text-decoration: underline; }
.qr-box { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; } .qr-box img { width: 180px; height: 180px; border-radius: 14px; border: 1px solid var(--line); background: #fff; padding: 8px; }
img { height: auto; }
.meter i { display: flex; }
/* قالب‌ها: فونت، نقش و سبک کارت */
body.mn { font-family: var(--fbody, Estedad), Tahoma, sans-serif; background: var(--pattern, none), var(--bg); background-attachment: fixed; }
.mn h1, .mn h2, .mn .nm, .mn-id h1 { font-family: var(--fhead, Estedad), Tahoma, sans-serif; font-weight: var(--hw, 900); }
.mn .pc, .mn .pd-im, .mn .mn-logo, .mn .pyr div, .mn .opts span { border-radius: var(--r, 18px); }
.card-glass .pc { background: color-mix(in srgb, var(--surface) 70%, transparent); backdrop-filter: blur(10px); border-color: color-mix(in srgb, var(--acc) 25%, var(--line)); }
.card-outline .pc { background: transparent; border: 1.5px solid var(--line); box-shadow: none; }
.card-outline .pc .im { border-bottom: 1.5px solid var(--line); }
.card-frame .pc { border: 1px solid color-mix(in srgb, var(--acc) 55%, var(--line)); box-shadow: inset 0 0 0 5px var(--surface), inset 0 0 0 6px color-mix(in srgb, var(--acc) 35%, transparent); padding: 6px; }
.card-frame .pc .im { border-radius: calc(var(--r, 18px) - 6px); overflow: hidden; }
.card-flat .pc { border: 0; background: var(--s2); }
.card-flat .pc .im { background: var(--surface); }
.theme-pick { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.theme-pick i { position: relative; height: 70px; }
.theme-pick i b { position: absolute; bottom: 10px; width: 34px; height: 34px; border-radius: 10px; }
.theme-pick i b:first-child { inset-inline-start: 10px; } .theme-pick i b:last-child { inset-inline-start: 50px; }
.theme-pick em small { display: block; font-size: .72rem; font-weight: 400; line-height: 1.6; }
.theme-pick em a { display: inline-block; font-size: .74rem; margin-top: 2px; }
@media (max-width: 900px) { .theme-pick { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* افکت‌های متحرک پس‌زمینه‌ی قالب‌ها */
.fx { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
body.mn > :not(.fx) { position: relative; z-index: 1; }
body.mn > .mn-bar { position: sticky; z-index: 20; }
.has-fx .mn-hero { background: color-mix(in srgb, var(--surface) 25%, transparent); backdrop-filter: blur(2px); }
.has-fx .mn-bar { background: color-mix(in srgb, var(--bg) 70%, transparent); }
.fx i, .fx img { position: absolute; display: block; }
/* شیشه‌های شناور */
.fx-bottles img { opacity: .32; filter: blur(.5px) drop-shadow(0 18px 30px rgba(0,0,0,.2)); animation: fxFloat 16s ease-in-out infinite; transform: translate(-50%, -50%); }
.fx-bottles img:nth-child(odd) { opacity: .2; filter: blur(2px); animation-duration: 22s; }
@keyframes fxFloat { 0%, 100% { transform: translate(-50%, -50%) rotate(-6deg); } 50% { transform: translate(-50%, calc(-50% - 34px)) rotate(6deg); } }
/* آتش */
/* حباب */
.fx-bubbles i { top: auto !important; bottom: -60px; width: calc(26px * var(--s)); height: calc(26px * var(--s)); border-radius: 50%; border: 1.5px solid color-mix(in srgb, var(--acc) 60%, #fff); background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.6), transparent 60%); opacity: .5; animation: fxRise calc(12s / var(--s)) linear infinite; }
@keyframes fxRise { to { transform: translate(30px, -115vh); } }
/* گلبرگ */
.fx-petals i { top: -40px !important; width: calc(22px * var(--s)); height: calc(16px * var(--s)); border-radius: 80% 0 80% 0; background: linear-gradient(135deg, #ffc1d4, #f37fa6); opacity: .65; animation: fxFall calc(14s / var(--s)) linear infinite; }
@keyframes fxFall { 0% { transform: translate(0, 0) rotate(0); } 50% { transform: translate(60px, 55vh) rotate(200deg); } 100% { transform: translate(-30px, 110vh) rotate(400deg); } }
/* دود */
.fx-smoke i { width: 46vmax; height: 46vmax; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--muted) 35%, transparent), transparent 65%); filter: blur(30px); opacity: .35; animation: fxDrift 26s ease-in-out infinite alternate; transform: translate(-50%, -50%); }
@keyframes fxDrift { to { transform: translate(-30%, -75%) scale(1.3); opacity: .15; } }
/* ستاره و درخشش */
.fx-sparkle i { width: calc(4px * var(--s)); height: calc(4px * var(--s)); border-radius: 50%; background: var(--acc); box-shadow: 0 0 10px var(--acc); animation: fxTwinkle 3.2s ease-in-out infinite; }
@keyframes fxTwinkle { 0%, 100% { opacity: .1; transform: scale(.6); } 50% { opacity: .9; transform: scale(1.4); } }
/* دیاگرام رنگی (لکه‌های رنگی متحرک) */
.fx-mesh { filter: blur(60px); opacity: .55; }
.fx-mesh i { width: 55vmax; height: 55vmax; border-radius: 50%; animation: fxBlob 18s ease-in-out infinite alternate; transform: translate(-50%, -50%); }
.fx-mesh i:nth-child(1) { background: #ff7eb3; } .fx-mesh i:nth-child(2) { background: #7afcff; } .fx-mesh i:nth-child(3) { background: #feff9c; } .fx-mesh i:nth-child(4) { background: #b28dff; }
@keyframes fxBlob { 0% { transform: translate(-50%, -50%) scale(1); } 50% { transform: translate(-20%, -70%) scale(1.25); } 100% { transform: translate(-70%, -30%) scale(.9); } }
/* شفق */
.fx-aurora { filter: blur(50px); opacity: .6; }
.fx-aurora i { left: -20% !important; width: 140%; height: 30vh; border-radius: 50%; animation: fxAurora 14s ease-in-out infinite alternate; }
.fx-aurora i:nth-child(1) { top: 5% !important; background: linear-gradient(90deg, transparent, #6effc4, #5b8cff, transparent); }
.fx-aurora i:nth-child(2) { top: 35% !important; background: linear-gradient(90deg, transparent, #c86bff, #ff6bd0, transparent); animation-duration: 18s; }
.fx-aurora i:nth-child(3) { top: 65% !important; background: linear-gradient(90deg, transparent, #5bd6ff, #8a6bff, transparent); animation-duration: 22s; }
@keyframes fxAurora { to { transform: translateX(12%) skewY(-6deg) scaleY(1.4); } }
/* کنتراست: قالب‌های خطی و سیاه‌وسفید */
.card-outline .pc .pr { color: var(--text); }
/* ---- پس‌زمینه‌های آورده‌شده از منوجات ---- */
/* ویدیوی تمام‌صفحه */
.bgv video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bgv i { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.35), color-mix(in srgb, var(--bg) 55%, transparent) 45%, color-mix(in srgb, var(--bg) 85%, transparent)); }
/* کهکشان: ستاره، سیاره و شهاب (منوجات) */
.fx-galaxy { background: radial-gradient(circle, #fff 1px, transparent 1.5px) 0 0/90px 90px, radial-gradient(circle, rgba(255,255,255,.6) 1px, transparent 1.5px) 45px 30px/70px 70px,
  radial-gradient(50% 60% at 30% 30%, rgba(179,136,255,.35), transparent 70%), radial-gradient(40% 40% at 80% 70%, rgba(255,105,180,.25), transparent 70%); }
.fx-galaxy::before { content: ''; position: absolute; top: 90px; right: 6%; width: 120px; height: 72px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 60'%3E%3Cellipse cx='50' cy='30' rx='46' ry='10' fill='none' stroke='%23FFC6F2' stroke-width='3' transform='rotate(-15 50 30)'/%3E%3Ccircle cx='50' cy='30' r='20' fill='%23B388FF'/%3E%3Cpath d='M30 26a20 20 0 0 1 40 0' fill='%23D1B7FF'/%3E%3C/svg%3E") no-repeat center/contain; opacity: .9; }
.fx-galaxy::after { content: ''; position: absolute; top: 18%; left: -10%; width: 80px; height: 2px; background: linear-gradient(90deg, transparent, #fff); transform: rotate(-20deg); animation: fxShoot 5s ease-in infinite; }
.fx-galaxy i { left: 8% !important; top: 62% !important; width: 46px; height: 46px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Ccircle cx='20' cy='20' r='14' fill='%23FFB86B'/%3E%3Ccircle cx='15' cy='16' r='3' fill='%23E8913F'/%3E%3Ccircle cx='24' cy='24' r='4' fill='%23E8913F'/%3E%3C/svg%3E") no-repeat center/contain; opacity: .8; }
@keyframes fxShoot { 0%, 70% { opacity: 0; transform: translate(0, 0) rotate(-20deg); } 75% { opacity: 1; } 100% { opacity: 0; transform: translate(60vw, 22vh) rotate(-20deg); } }
/* شفق (منوجات) */
.fx-aurora { filter: none; opacity: 1; }
.fx-aurora::before { content: ''; position: absolute; inset: -20%; background: radial-gradient(40% 35% at 20% 20%, rgba(110,243,214,.55), transparent 70%), radial-gradient(35% 30% at 80% 25%, rgba(124,92,255,.55), transparent 70%), radial-gradient(45% 40% at 50% 80%, rgba(46,168,255,.45), transparent 70%);
  filter: blur(30px); animation: fxAurora2 18s ease-in-out infinite alternate; }
.fx-aurora i { display: none !important; }
@keyframes fxAurora2 { 0% { transform: translate3d(0, 0, 0) rotate(0); } 50% { transform: translate3d(4%, -3%, 0) rotate(8deg) scale(1.08); } 100% { transform: translate3d(-4%, 3%, 0) rotate(-6deg) scale(1.04); } }
/* برف (زمستان منوجات) */
.fx-snow { background: radial-gradient(circle, #9fc6ee 2px, transparent 3px) 0 0/34px 34px, radial-gradient(circle, rgba(170,205,240,.9) 1.4px, transparent 1.8px) 17px 11px/26px 26px; animation: fxSnow 12s linear infinite; opacity: .85; }
.fx-snow::after { content: ''; position: absolute; inset: auto 0 0; height: 70px; opacity: .55;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 70'%3E%3Cpath d='M30 5 48 40H38L52 62H8L22 40H12z' fill='%232F6B4F'/%3E%3Cpath d='M30 5 48 40H38L52 62H8L22 40H12z' fill='none' stroke='%23fff' stroke-width='3' stroke-dasharray='4 8'/%3E%3C/svg%3E") repeat-x 0 bottom/56px 66px; }
@keyframes fxSnow { to { background-position: 10px 340px, 27px 271px; } }
.zemestan-dark .fx-snow { opacity: 1; }
/* برگ پاییزی (پاییز منوجات) */
.fx-leaves { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60'%3E%3Cpath d='M30 5 36 20 50 16 42 30 55 38 38 40 36 55 30 44 24 55 22 40 5 38 18 30 10 16 24 20z' fill='%23D9642A'/%3E%3Cpath d='M30 20v36' stroke='%238A3B12' stroke-width='2'/%3E%3C/svg%3E") 0 0/54px 54px; opacity: .22; animation: fxLeaves 14s linear infinite; }
@keyframes fxLeaves { to { background-position: 30px 216px; } }
/* چراغونی (پشت‌بام منوجات) */
.fx-lights { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 40'%3E%3Cpath d='M0 6q50 26 100 0t100 0' stroke='%23666' stroke-width='1.5' fill='none'/%3E%3Cg fill='%23FFC857'%3E%3Ccircle cx='12' cy='11' r='3'/%3E%3Ccircle cx='36' cy='18' r='3'/%3E%3Ccircle cx='62' cy='18' r='3'/%3E%3Ccircle cx='88' cy='10' r='3'/%3E%3Ccircle cx='112' cy='11' r='3'/%3E%3Ccircle cx='138' cy='18' r='3'/%3E%3Ccircle cx='162' cy='18' r='3'/%3E%3Ccircle cx='188' cy='10' r='3'/%3E%3C/g%3E%3C/svg%3E") repeat-x 0 8px/200px 40px,
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 40'%3E%3Cpath d='M0 6q50 26 100 0t100 0' stroke='%23555' stroke-width='1.5' fill='none'/%3E%3Cg fill='%23FF7AA8'%3E%3Ccircle cx='25' cy='15' r='3'/%3E%3Ccircle cx='75' cy='15' r='3'/%3E%3Ccircle cx='125' cy='15' r='3'/%3E%3Ccircle cx='175' cy='15' r='3'/%3E%3C/g%3E%3C/svg%3E") repeat-x 60px 70px/200px 40px; }
.fx-lights::after { content: ''; position: absolute; inset: 0 0 auto; height: 120px; background: radial-gradient(circle, rgba(255,200,87,.9) 0 3px, transparent 4px) 12px 17px/25px 40px; opacity: 0; animation: fxTw 2.4s ease-in-out infinite; }
@keyframes fxTw { 50% { opacity: .45; } }
/* شبکه‌ی نئون پرسپکتیو و هاله (شب منوجات) */
.fx-grid::before { content: ''; position: absolute; width: 380px; height: 380px; left: 50%; top: -240px; transform: translateX(-50%); background: var(--acc); filter: blur(90px); opacity: .5; border-radius: 50%; }
.fx-grid::after { content: ''; position: absolute; inset: auto 0 0; height: 55%; background: linear-gradient(transparent 95%, color-mix(in srgb, var(--acc) 55%, transparent) 0) 0 0/100% 22px, linear-gradient(90deg, transparent 95%, color-mix(in srgb, var(--acc) 55%, transparent) 0) 0 0/28px 100%;
  transform: perspective(220px) rotateX(55deg); transform-origin: bottom; -webkit-mask: linear-gradient(transparent, #000 70%); mask: linear-gradient(transparent, #000 70%); opacity: .55; }
/* مه (شمال منوجات) */
.fx-mist i { left: -20% !important; width: 140%; height: 60px; background: radial-gradient(closest-side, rgba(255,255,255,.85), transparent); filter: blur(10px); animation: fxMist 16s ease-in-out infinite alternate; }
.fx-mist i:nth-child(1) { top: 28% !important; } .fx-mist i:nth-child(2) { top: 62% !important; animation-duration: 22s; }
@keyframes fxMist { to { transform: translateX(18%); } }

/* آتش واقعی: ذره‌های شعله که بالا میرن، کوچیک میشن و از زرد به قرمز میرسن */
.fx-fire { filter: blur(2px) contrast(1.4); }
.fx-fire::before { content: ''; position: absolute; inset: auto -10% -6vh; height: 48vh; background: radial-gradient(60% 100% at 50% 100%, rgba(255,120,20,.75), rgba(255,40,0,.25) 55%, transparent 75%); animation: fxGlow 1.6s ease-in-out infinite alternate; }
.fx-fire i { top: auto !important; bottom: -30px; width: calc(140px * var(--s)); height: calc(140px * var(--s)); border-radius: 50%; mix-blend-mode: screen;
  background: radial-gradient(circle, #fff6c2 0%, #ffcf4a 22%, #ff7a1a 48%, rgba(255,40,0,0) 70%); animation: fxBurn calc(1.6s + .9s * var(--s)) ease-in infinite; }
@keyframes fxBurn { 0% { transform: translate(0, 0) scale(1); opacity: 0; } 10% { opacity: .95; } 60% { transform: translate(-12px, -26vh) scale(.6); opacity: .7; filter: hue-rotate(-12deg); } 100% { transform: translate(14px, -70vh) scale(.15); opacity: 0; filter: hue-rotate(-25deg); } }
@keyframes fxGlow { from { opacity: .7; transform: scaleY(1); } to { opacity: 1; transform: scaleY(1.15); } }
/* اخگر: جرقه‌های ریز آتیش که بالا میرن */
.fx-embers i { top: auto !important; bottom: -10px; width: calc(5px * var(--s)); height: calc(5px * var(--s)); border-radius: 50%; background: #ffb347; box-shadow: 0 0 8px 2px #ff6a00; animation: fxEmber calc(5s + 4s * var(--s)) linear infinite; }
@keyframes fxEmber { 0% { transform: translate(0, 0); opacity: 0; } 10% { opacity: 1; } 50% { transform: translate(30px, -50vh); } 100% { transform: translate(-20px, -105vh); opacity: 0; } }
/* نئون: لوله‌های نوری که سوسو میزنن و جابه‌جا میشن */
.fx-neon i { height: 3px; width: calc(160px * var(--s)); border-radius: 3px; background: var(--acc); box-shadow: 0 0 6px var(--acc), 0 0 18px var(--acc), 0 0 40px var(--acc); animation: fxFlick 3.6s steps(1) infinite, fxSlide calc(10s / var(--s)) ease-in-out infinite alternate; }
.fx-neon i:nth-child(even) { background: #ff3df2; box-shadow: 0 0 6px #ff3df2, 0 0 18px #ff3df2, 0 0 40px #ff3df2; width: 3px; height: calc(140px * var(--s)); }
.fx-neon i:nth-child(3n) { background: #3dfcff; box-shadow: 0 0 6px #3dfcff, 0 0 18px #3dfcff, 0 0 40px #3dfcff; }
@keyframes fxFlick { 0%, 18%, 22%, 62%, 66%, 100% { opacity: .9; } 20%, 64% { opacity: .15; } }
@keyframes fxSlide { to { transform: translate(40px, 60px) rotate(8deg); } }
/* حرکت بیشتر برای کهکشان، شبکه و دیاگرام */
.fx-galaxy { animation: fxStars 60s linear infinite; }
@keyframes fxStars { to { background-position: 90px 90px, -25px 100px, 0 0, 0 0; } }
.fx-grid::after { animation: fxGridRun 1.2s linear infinite; }
@keyframes fxGridRun { to { background-position: 0 22px, 0 0; } }
.fx-grid::before { animation: fxGlow 3s ease-in-out infinite alternate; }
.fx-mesh i { animation-duration: 10s; }
.fx-aurora::before { animation-duration: 9s; }
.fx-smoke i { animation-duration: 14s; }

/* شهاب‌سنگ‌ها: چندتا با فاصله و زاویه‌ی متفاوت */
.fx-meteors i { width: calc(140px * var(--s)); height: 2px; border-radius: 2px; background: linear-gradient(90deg, #fff, rgba(255,255,255,.4) 30%, transparent); box-shadow: 0 0 8px #fff; opacity: 0; transform: rotate(155deg); animation: fxMeteor calc(3.5s + 3s * var(--s)) ease-in infinite; }
.fx-meteors i::before { content: ''; position: absolute; left: -3px; top: -3px; width: 8px; height: 8px; border-radius: 50%; background: #fff; box-shadow: 0 0 14px 4px rgba(200,220,255,.9); }
@keyframes fxMeteor { 0%, 55% { opacity: 0; transform: rotate(155deg) translateX(0); } 60% { opacity: 1; } 100% { opacity: 0; transform: rotate(155deg) translateX(-75vh); } }
/* ستاره‌ها: چشمک + کمی جابه‌جایی */
.fx-sparkle i { animation: fxTwinkle calc(1.6s + 2.4s * var(--s)) ease-in-out infinite, fxSlide calc(14s / var(--s)) ease-in-out infinite alternate; }
/* پرتوهای نور که آروم میچرخن */
.fx-rays i { top: -30% !important; width: calc(90px * var(--s)); height: 140vh; background: linear-gradient(180deg, color-mix(in srgb, var(--acc) 45%, #fff), transparent 75%); opacity: .14; filter: blur(14px); transform-origin: 50% 0; animation: fxRay calc(9s + 6s * var(--s)) ease-in-out infinite alternate; mix-blend-mode: screen; }
@keyframes fxRay { 0% { transform: rotate(-22deg); opacity: .08; } 50% { opacity: .26; } 100% { transform: rotate(22deg); opacity: .1; } }
/* باد کویر: رگه‌های شن و غبار که افقی رد میشن */
.fx-wind i { left: -40% !important; width: calc(220px * var(--s)); height: 2px; border-radius: 2px; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--acc) 70%, #fff), transparent); opacity: .5; animation: fxWind calc(2.2s + 2.5s * var(--s)) linear infinite; }
.fx-wind i:nth-child(3n) { height: 5px; filter: blur(3px); opacity: .3; }
.fx-wind::before { content: ''; position: absolute; inset: -20%; background: radial-gradient(40% 25% at 30% 60%, color-mix(in srgb, var(--acc) 30%, transparent), transparent 70%); filter: blur(30px); animation: fxDust 8s ease-in-out infinite alternate; }
@keyframes fxWind { 0% { transform: translateX(0) translateY(0); } 100% { transform: translateX(190vw) translateY(-6vh); } }
@keyframes fxDust { to { transform: translateX(25%) scale(1.2); } }

/* ---- آمار پنل ---- */
.up { color: #1f9d55; font-weight: 700; } .down { color: #d64545; font-weight: 700; }
.bars { display: flex; align-items: flex-end; gap: 3px; height: 150px; margin: 14px 0 8px; padding-bottom: 2px; border-bottom: 1px solid var(--line); }
.bars span { flex: 1; height: 100%; display: flex; align-items: flex-end; justify-content: center; position: relative; }
.bars i { display: block; width: 100%; max-width: 26px; min-height: 2px; border-radius: 6px 6px 0 0; background: color-mix(in srgb, var(--acc) 55%, transparent); }
.bars b { position: absolute; bottom: 0; width: 40%; max-width: 10px; border-radius: 4px 4px 0 0; background: #25d366; }
.lg { display: inline-block; width: 10px; height: 10px; border-radius: 3px; vertical-align: middle; margin-inline: 8px 4px; } .lg.a { background: color-mix(in srgb, var(--acc) 55%, transparent); } .lg.b { background: #25d366; }
.toplist { margin: 10px 0 0; padding-inline-start: 22px; } .toplist li { display: flex; justify-content: space-between; gap: 10px; padding: 5px 0; border-bottom: 1px dashed var(--line); } .toplist li::marker { color: var(--muted); }
.prow form { display: inline; }
.posts { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; margin-top: 10px; }
.post-t { display: flex; flex-direction: column; gap: 6px; } .post-t textarea { width: 100%; font: inherit; font-size: .8rem; border: 1px solid var(--line); border-radius: 10px; padding: 8px; background: var(--s2); color: var(--text); resize: vertical; }
/* ---- علاقه‌مندی و مقایسه ---- */
.pc { position: relative; }
.pc-act { position: absolute; top: 8px; left: 8px; z-index: 3; display: flex; flex-direction: column; gap: 6px; }
.pc-act button { width: 34px; height: 34px; border-radius: 50%; border: 0; background: color-mix(in srgb, var(--surface) 88%, transparent); color: var(--text); font-size: 1.05rem; cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,.15); display: grid; place-items: center; backdrop-filter: blur(4px); }
.pc-act button.on, [data-fav].on { color: #e0245e; } [data-cmp].on { background: var(--acc) !important; color: var(--on) !important; }
.pc-act [data-fav].on { font-size: 1.15rem; }
.cmp-bar { position: fixed; bottom: 14px; left: 50%; transform: translateX(-50%); z-index: 40; display: flex; gap: 8px; align-items: center; background: var(--surface); color: var(--text); border: 1px solid var(--line); border-radius: 40px; padding: 8px 10px 8px 16px; box-shadow: 0 10px 30px rgba(0,0,0,.2); white-space: nowrap; font-size: .9rem; }
.cmp-bar[hidden] { display: none; }
.cmp-wrap { overflow-x: auto; margin: 14px 0 30px; border-radius: var(--r); border: 1px solid var(--line); background: var(--surface); }
.cmp { border-collapse: collapse; width: 100%; font-size: .85rem; }
.cmp td { min-width: 120px; } .cmp th { width: 1%; }
@media (max-width: 600px) { .cmp td img { width: 80px; height: 80px; } .cmp th, .cmp td { padding: 8px 6px; } }
.cmp th, .cmp td { padding: 10px; border-bottom: 1px solid var(--line); text-align: center; vertical-align: top; }
.cmp th { background: var(--s2); white-space: nowrap; font-weight: 700; color: var(--muted); position: sticky; right: 0; }
.cmp td img { width: 110px; height: 110px; object-fit: cover; border-radius: 14px; display: block; margin: 0 auto 6px; }
.cmp td a { color: var(--text); }
/* ---- راهنما ---- */
.steps { display: grid; gap: 12px; margin: 18px 0; } .step { display: flex; gap: 14px; align-items: flex-start; } .step h3 { margin: 0 0 4px; } .step p { margin: 0; }
.step .n { flex: none; width: 46px; height: 46px; border-radius: 14px; background: var(--acc); color: var(--on); display: grid; place-items: center; font-weight: 900; font-size: 1.3rem; }

/* ---- نت‌ها، حرفه‌ای ---- */
.notes-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; }
.note-c { display: flex; flex-direction: column; padding: 12px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); color: var(--text); transition: transform .2s, border-color .2s; }
.note-c:hover { transform: translateY(-2px); border-color: var(--acc); } .note-c small { color: var(--muted); direction: ltr; text-align: right; }
.pro-on { border: 2px solid var(--acc); background: linear-gradient(160deg, color-mix(in srgb, var(--acc) 10%, var(--surface)), var(--surface)); }
.feat { display: flex; gap: 10px; align-items: flex-start; } .feat > span { font-size: 1.5rem; } .feat p { margin: 2px 0 0; }
.shots { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .shots img { width: 100%; height: auto; border-radius: var(--r); border: 1px solid var(--line); }
.cmp.why td { min-width: 90px; } .cmp.why td.win { background: color-mix(in srgb, var(--acc) 8%, transparent); min-width: 130px; }
/* ---- زیباجات: رنگ‌ها، دسته‌ها ---- */
.sw { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; margin: 4px 0; }
.sw i { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--surface); box-shadow: 0 0 0 1px var(--line); display: inline-block; }
.sw small { color: var(--muted); font-size: .72rem; }
.shade-pick { margin: 12px 0; } .shade-pick > div { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.shade-pick label { cursor: pointer; } .shade-pick input { position: absolute; opacity: 0; pointer-events: none; }
.shade-pick i { display: block; width: 38px; height: 38px; border-radius: 50%; border: 3px solid var(--surface); box-shadow: 0 0 0 1px var(--line); transition: transform .15s, box-shadow .15s; }
.shade-pick input:checked + i { box-shadow: 0 0 0 2px var(--acc); transform: scale(1.12); } .shade-pick input:focus-visible + i { outline: 2px solid var(--acc); outline-offset: 3px; }
.shades-ed { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 6px; margin-top: 6px; }
.shades-ed .r { display: flex; gap: 6px; align-items: center; } .shades-ed input[type=color] { width: 40px; height: 38px; padding: 2px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); flex: none; cursor: pointer; }
.shades-ed input[type=text] { flex: 1; min-width: 0; }
.cat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; }
.cat-c { display: flex; flex-direction: column; gap: 4px; text-align: center; align-items: center; padding: 16px 10px; } .cat-c > span { font-size: 2rem; }
a.cat-c { color: inherit; text-decoration: none; transition: transform .15s, box-shadow .15s, border-color .15s; } a.cat-c:hover { transform: translateY(-3px); border-color: var(--acc); box-shadow: 0 14px 28px -18px var(--acc); } a.cat-c:hover b { color: var(--acc); }
.feats { display: flex; flex-wrap: wrap; gap: 5px; }

/* ---- حالت تیره‌ی سایت شاخه ---- */
.mode-t { padding: 6px 10px; }
:root[data-theme=dark] .alert.err { color: #ffb3bf; background: #3a1820; border-color: #5a2430; } :root[data-theme=dark] .alert.ok { color: #a8e6c8; background: #12301f; border-color: #1f4a32; }
@media (prefers-color-scheme: dark) { :root:not([data-theme=light]) .alert.err { color: #ffb3bf; background: #3a1820; border-color: #5a2430; } :root:not([data-theme=light]) .alert.ok { color: #a8e6c8; background: #12301f; border-color: #1f4a32; } }
/* ---- صفحه‌های تکمیلی: امکانات، طرح‌ها، قیمت، نقشه، سفر، آموزش، جشنواره ---- */
.hero.mini { padding: 46px 0 18px; text-align: center; } .hero.mini h1 { font-size: clamp(1.7rem, 5vw, 2.8rem); font-weight: 900; margin: 0 0 8px; } .hero.mini .lead { max-width: 680px; margin: 0 auto; }
.tfilter { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; margin: 8px 0 18px; }
.tgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 14px; }
.tcard { display: flex; flex-direction: column; border-radius: 20px; overflow: hidden; background: var(--ts); color: var(--tt); border: 1px solid color-mix(in srgb, var(--tt) 12%, transparent); transition: transform .25s, box-shadow .25s; }
.tcard:hover { transform: translateY(-5px); box-shadow: 0 22px 40px -24px var(--ta); color: var(--tt); }
.tcard[hidden] { display: none; }
.tc-top { height: 110px; position: relative; display: flex; gap: 6px; align-items: flex-end; padding: 12px; }
.tc-top i { flex: 1; height: 56px; border-radius: 10px; background: var(--ts); box-shadow: 0 6px 14px -8px rgba(0,0,0,.3); } .tc-top i:nth-child(2) { height: 72px; background: var(--ta); opacity: .85; }
.tc-body { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 2px; } .tc-body small { color: var(--tm); font-size: .78rem; } .tc-body em { font-style: normal; font-size: .76rem; color: var(--ta); font-weight: 700; } .tc-mode { font-size: .72rem; color: var(--tm); }
.plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 10px 0 12px; align-items: stretch; }
.plan { position: relative; display: flex; flex-direction: column; } .plan h3 { margin: 0; } .plan .price { margin: 6px 0 10px; } .plan .price b { font-size: 2.1rem; font-weight: 900; } .plan ul { list-style: none; padding: 0; margin: 0 0 16px; flex: 1; } .plan li { padding: 4px 0; font-size: .9rem; }
.plan.pop { border: 2px solid var(--acc); transform: translateY(-6px); box-shadow: 0 30px 60px -34px var(--acc); } .ribbon { position: absolute; top: -12px; inset-inline-end: 16px; background: var(--acc); color: var(--on); padding: 2px 12px; border-radius: 999px; font-size: .76rem; font-weight: 800; }
@media (max-width: 860px) { .plans { grid-template-columns: 1fr; } .plan.pop { transform: none; } }
.iran { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); grid-auto-rows: minmax(74px, auto); gap: 6px; max-width: 760px; margin: 10px auto; direction: ltr; }
.ptile { direction: rtl; border-radius: 14px; padding: 8px; display: flex; flex-direction: column; justify-content: center; text-align: center; background: color-mix(in srgb, var(--acc) calc(var(--a) * 100%), var(--s2)); border: 1px solid var(--line); color: var(--text); transition: transform .2s; }
.ptile.has { color: var(--on); font-weight: 700; } .ptile:hover { transform: scale(1.06); z-index: 2; color: inherit; } .ptile b { font-size: .78rem; line-height: 1.4; } .ptile small { font-size: .68rem; opacity: .8; }
@media (max-width: 600px) { .iran { gap: 3px; grid-auto-rows: minmax(56px, auto); } .ptile { padding: 4px; border-radius: 9px; } .ptile b { font-size: .62rem; } .ptile small { font-size: .56rem; } }
.trip-f { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto; gap: 10px; align-items: end; } .trip-f .f { margin: 0; }
@media (max-width: 760px) { .trip-f { grid-template-columns: 1fr; } }
.trip-map { height: 460px; border-radius: var(--r); margin: 14px 0 6px; border: 1px solid var(--line); z-index: 0; }
.trip-pin span { display: block; width: 22px; height: 22px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: var(--acc); border: 3px solid #fff; box-shadow: 0 3px 8px rgba(0,0,0,.35); }
.trip-pin.me span { background: #1e88e5; } .trip-pin.to span { background: #2e7d32; }
.trip-list { padding-inline-start: 0; list-style: none; } .trip-list li { padding: 8px 0; border-bottom: 1px dashed var(--line); }
.lessons { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 10px 0 20px; } .lesson { display: flex; gap: 14px; align-items: flex-start; color: var(--text); } .lesson h3 { margin: 0; } .lesson p { margin: 2px 0 0; }
.lesson .n { flex: none; width: 46px; height: 46px; border-radius: 14px; background: var(--acc); color: var(--on); display: grid; place-items: center; font-weight: 900; font-size: 1.2rem; }
@media (max-width: 700px) { .lessons { grid-template-columns: 1fr; } }
.evc { display: flex; gap: 12px; align-items: center; color: var(--text); } .evc p { margin: 2px 0 0; }
.ev-badge { flex: none; width: 64px; height: 64px; border-radius: 18px; display: grid; place-items: center; background: linear-gradient(135deg, var(--acc), var(--acc2)); color: #fff; font-weight: 900; font-size: 1.2rem; }
/* ---- سربرگ: منو و دکمه‌ی جدای پنل ---- */
.top nav { overflow-x: auto; scrollbar-width: none; } .top nav::-webkit-scrollbar { display: none; } .top nav a { white-space: nowrap; }
.btn-panel { background: var(--text); color: var(--bg); border: 0; } .btn-panel:hover { color: var(--bg); opacity: .9; }
@media (max-width: 760px) { .top .in { height: auto; flex-wrap: wrap; padding: 8px 0; gap: 8px; } .top nav { order: 3; width: 100%; margin: 0; } }

/* ---- بلاگ ---- */
.blog-hero { padding: 46px 0 10px; text-align: center; } .blog-hero h1 { font-size: clamp(1.8rem, 5vw, 2.8rem); font-weight: 900; margin: 10px 0 6px; } .blog-hero .lead { max-width: 640px; margin: 0 auto; }
.bfeat { display: grid; grid-template-columns: 1.2fr 1fr; gap: 0; border-radius: calc(var(--r) + 6px); overflow: hidden; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); color: var(--text); margin-top: 18px; transition: transform .25s; }
.bfeat:hover { transform: translateY(-4px); color: var(--text); } .bfeat img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 16/9; } .bfeat > div { padding: 26px; display: flex; flex-direction: column; gap: 8px; justify-content: center; } .bfeat h2 { margin: 0; font-size: 1.5rem; font-weight: 900; line-height: 1.6; } .bfeat p { margin: 0; color: var(--muted); }
@media (max-width: 760px) { .bfeat { grid-template-columns: 1fr; } }
.bcard { transition: transform .25s, box-shadow .25s; } .bcard:hover { transform: translateY(-5px); box-shadow: 0 24px 44px -28px var(--acc); }
.read-bar { position: fixed; top: 0; inset-inline: 0; height: 4px; z-index: 50; } .read-bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--acc), var(--acc2)); }
.post-x { max-width: 780px; } .post-x h1 { font-size: clamp(1.6rem, 4.5vw, 2.4rem); font-weight: 900; line-height: 1.6; } .post-x .lead2 { font-size: 1.05rem; }
.post-x figure { margin: 18px 0; } .post-x figure img { border-radius: calc(var(--r) + 4px); width: 100%; height: auto; box-shadow: var(--shadow); }
.post-x h2 { margin-top: 1.8em; padding-inline-start: 12px; border-inline-start: 4px solid var(--acc); scroll-margin-top: 80px; }
.post-x table { width: 100%; border-collapse: collapse; margin: 14px 0; font-size: .92rem; } .post-x th, .post-x td { border: 1px solid var(--line); padding: 8px 10px; } .post-x th { background: var(--s2); }
.post-x blockquote { margin: 16px 0; padding: 12px 16px; border-radius: 14px; background: color-mix(in srgb, var(--acc) 9%, var(--surface)); border-inline-start: 4px solid var(--acc); }
.toc { margin: 16px 0; } .toc ol { margin: 6px 0 0; padding-inline-start: 22px; } .toc a { color: var(--text); }
.share { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 24px 0; }
.pick-map { height: 280px; border-radius: 14px; border: 1px solid var(--line); z-index: 0; }

/* ---- منو: اطلاعیه، رویداد، سفارشی، فهرستی ---- */
.notice { padding: 10px 16px; text-align: center; font-weight: 700; font-size: .92rem; background: var(--acc); color: var(--on); position: relative; z-index: 2; }
.notice.n-red { background: #c62828; color: #fff; } .notice.n-green { background: #2e7d32; color: #fff; } .notice.n-gold { background: #c9a227; color: #1d1600; } .notice.n-blue { background: #1e6fd9; color: #fff; } .notice.n-dark { background: #111; color: #fff; }
.ev-banner { display: flex; gap: 14px; align-items: center; margin: 16px 0 0; padding: 14px 16px; border-radius: var(--r); background: linear-gradient(120deg, color-mix(in srgb, var(--acc) 18%, var(--surface)), var(--surface)); border: 1px solid color-mix(in srgb, var(--acc) 40%, var(--line)); }
.ev-banner p { margin: 2px 0; font-size: .88rem; } .ev-banner small { color: var(--muted); }
.custom-cta { display: flex; gap: 12px; align-items: center; justify-content: space-between; margin: 14px 0 0; padding: 14px 16px; border-radius: var(--r); background: var(--surface); border: 1px dashed var(--acc); } .custom-cta p { margin: 2px 0 0; }
.mn-grid.as-list { grid-template-columns: 1fr !important; } .as-list .pc { display: grid; grid-template-columns: 110px 1fr; } .as-list .pc .im { aspect-ratio: 1; } .as-list .pc-act { flex-direction: row; }
/* ---- پنل ---- */
.pn-hello { display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; }
.ring { --p: 0; width: 92px; height: 92px; border-radius: 50%; display: grid; place-items: center; text-align: center; background: radial-gradient(closest-side, var(--surface) 76%, transparent 77% 100%), conic-gradient(var(--acc) calc(var(--p) * 1%), var(--line) 0); }
.ring b { display: block; font-size: 1.3rem; line-height: 1; } .ring small { font-size: .62rem; color: var(--muted); display: block; max-width: 64px; line-height: 1.3; } .ring.big { width: 130px; height: 130px; } .ring.big b { font-size: 1.8rem; }
.quick { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; margin-top: 14px; } .quick a { text-align: center; padding: 12px 6px; font-size: .82rem; font-weight: 700; color: var(--text); } .quick a span { display: block; font-size: 1.5rem; }
@media (max-width: 760px) { .quick { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.todo, .checklist { margin: 8px 0; padding-inline-start: 18px; } .checklist { list-style: none; padding: 0; } .checklist li { padding: 6px 0; border-bottom: 1px dashed var(--line); } .checklist li.ok { color: var(--muted); }
.growth { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
.otable { width: 100%; border-collapse: collapse; font-size: .86rem; } .otable th, .otable td { padding: 9px 10px; border-bottom: 1px solid var(--line); text-align: start; vertical-align: top; } .otable th { background: var(--s2); white-space: nowrap; } .ost select { padding: 5px 8px; font-size: .8rem; width: auto; }
.pub { display: flex; justify-content: space-between; gap: 12px; align-items: center; flex-wrap: wrap; } .pub.on { border-color: #2e7d32; }
.chart { width: 100%; height: auto; margin-top: 10px; } .chart .gl { stroke: var(--line); stroke-dasharray: 4 4; } .chart .ax { fill: var(--muted); font-size: 11px; font-family: inherit; }
.hbars { display: flex; flex-direction: column; gap: 7px; margin-top: 10px; } .hbars div { display: grid; grid-template-columns: minmax(70px, 30%) 1fr auto; gap: 8px; align-items: center; font-size: .82rem; } .hbars span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hbars i { display: block; height: 12px; border-radius: 6px; background: var(--s2); overflow: hidden; } .hbars b { display: block; height: 100%; border-radius: 6px; } .hbars em { font-style: normal; color: var(--muted); }
.hours { display: flex; align-items: flex-end; gap: 2px; height: 130px; margin-top: 12px; } .hours span { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; } .hours i { width: 100%; border-radius: 3px 3px 0 0; background: var(--acc); } .hours small { font-size: .6rem; color: var(--muted); height: 14px; }
.donut-w { display: flex; gap: 16px; align-items: center; margin-top: 10px; flex-wrap: wrap; } .donut { width: 120px; height: 120px; border-radius: 50%; display: grid; place-items: center; flex: none; } .donut span { width: 70px; height: 70px; border-radius: 50%; background: var(--surface); display: grid; place-items: center; font-weight: 900; }
.donut-w ul { list-style: none; padding: 0; margin: 0; font-size: .82rem; } .donut-w li { display: flex; gap: 6px; align-items: center; padding: 2px 0; } .donut-w li i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.pn-nav a { white-space: nowrap; }
@media (max-width: 900px) {
  .pn-nav { display: flex !important; flex-wrap: nowrap !important; overflow-x: auto; gap: 6px; padding: 4px 0 10px; scrollbar-width: none; position: sticky; top: 0; z-index: 20; background: var(--bg); }
  .pn-nav::-webkit-scrollbar { display: none; } .pn-nav a { flex: none; padding: 8px 12px !important; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); font-size: .85rem; }
  .pn-nav a.on { background: var(--acc); color: var(--on); border-color: var(--acc); } .pn-nav form { flex: none; } .pn-nav form .btn { margin: 0 !important; width: auto !important; }
}

/* ---- ابزارها و اینستاگرام ---- */
.tool-out { margin-top: 12px; padding: 16px; border-radius: 16px; background: color-mix(in srgb, var(--acc) 9%, var(--surface)); border: 1px solid color-mix(in srgb, var(--acc) 30%, var(--line)); font-size: 1.02rem; line-height: 2; min-height: 64px; }
.tool-out hr { border: 0; border-top: 1px dashed var(--line); margin: 8px 0; }
.bridge { border-inline-start: 5px solid var(--acc); background: color-mix(in srgb, var(--acc) 7%, var(--surface)); } .bridge p { margin: 4px 0 0; }
.ig-out, .hl-out { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; margin-top: 12px; } .ig-out img, .hl-out img { width: 100%; height: auto; border-radius: 12px; border: 1px solid var(--line); display: block; }
.hl-out img { border-radius: 50%; } .hl-out { grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); }
.ig-band { color: #fff !important; background: linear-gradient(120deg, #f09433, #dc2743 50%, #bc1888) !important; } .ig-band .btn { background: #fff; color: #bc1888; }
/* مربی‌ها: برنامه‌ی شاگرد */
.co-day{margin-bottom:10px}.co-day summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:8px}.co-day summary::-webkit-details-marker{display:none}
.co-list{list-style:none;padding:0;margin:10px 0 0}.co-list li{padding:9px 0;border-top:1px dashed color-mix(in srgb,currentColor 15%,transparent)}.co-list li:first-child{border-top:0}
.co-list label{display:flex;gap:10px;align-items:flex-start;cursor:pointer}.co-list input{width:20px;height:20px;margin-top:3px;accent-color:var(--acc);flex:none}
.co-list input:checked+span{opacity:.55;text-decoration:line-through}.co-ed button.chip{cursor:pointer;border:0;font:inherit;margin:2px}
@media print{.co-tabs,#prog form,.mn-foot a{display:none}.co-day{break-inside:avoid}details.co-day:not([open])>*:not(summary){display:block}}

/* ================================================================ پس‌زمینه‌ی متحرک سایت شاخه‌ها
   الهام از Stripe (مش گرادیان)، Linear (پرتو نور و درخشش زیر نشانگر)، Vercel (توری محوشونده)، Apple (لکه‌های نرم) + دونه‌ی فیلم.
   همه با transform/opacity؛ بدون filter: blur تا روی گوشی هم روون باشه. */
:root { --sb-a: .34; --sb-grid: color-mix(in srgb, var(--text) 7%, transparent); --sb-motif: .13; }
:root[data-theme=dark] { --sb-a: .42; --sb-grid: color-mix(in srgb, var(--text) 6%, transparent); --sb-motif: .16; }
@media (prefers-color-scheme: dark) { :root:not([data-theme=light]) { --sb-a: .42; --sb-grid: color-mix(in srgb, var(--text) 6%, transparent); --sb-motif: .16; } }
body.sfx { position: relative; isolation: isolate; }
body.sfx > :not(.sbg):not(.sb-spot) { position: relative; z-index: 1; }
body.sfx > .top { position: sticky; z-index: 30; }
body.sfx .hero { background: transparent; border-bottom-color: color-mix(in srgb, var(--line) 60%, transparent); }
.sbg { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; contain: strict; }
.sbg i, .sbg svg { position: absolute; display: block; }
/* لکه‌های رنگی (مش) */
.sb-blob { width: 68vmax; height: 68vmax; border-radius: 50%; opacity: var(--sb-a); will-change: transform; animation: sbDrift var(--d, 26s) ease-in-out infinite alternate; }
.sb-blob.b1 { background: radial-gradient(circle at center, var(--acc) 0, transparent 62%); top: -38vmax; right: -16vmax; --d: 24s; }
.sb-blob.b2 { background: radial-gradient(circle at center, var(--acc2) 0, transparent 62%); top: -26vmax; left: -24vmax; --d: 31s; animation-direction: alternate-reverse; }
.sb-blob.b3 { background: radial-gradient(circle at center, color-mix(in srgb, var(--acc) 55%, var(--acc2)) 0, transparent 60%); top: 38vh; left: 30vw; width: 52vmax; height: 52vmax; --d: 37s; opacity: calc(var(--sb-a) * .6); }
.sb-blob.b4 { background: radial-gradient(circle at center, color-mix(in srgb, var(--acc2) 60%, var(--surface)) 0, transparent 60%); bottom: -30vmax; right: 10vw; width: 58vmax; height: 58vmax; --d: 29s; opacity: calc(var(--sb-a) * .7); animation-direction: alternate-reverse; }
@keyframes sbDrift {
  0% { transform: translate3d(0, 0, 0) scale(1) rotate(0deg); }
  33% { transform: translate3d(6vw, 4vh, 0) scale(1.12) rotate(25deg); }
  66% { transform: translate3d(-5vw, 7vh, 0) scale(.92) rotate(-18deg); }
  100% { transform: translate3d(3vw, -3vh, 0) scale(1.06) rotate(12deg); }
}
/* پرتو نور چرخان بالای صفحه */
.sb-beam { width: 160vmax; height: 160vmax; left: 50%; top: -118vmax; margin-left: -80vmax; border-radius: 50%; opacity: .55;
  background: conic-gradient(from 0deg, transparent 0 40deg, color-mix(in srgb, var(--acc) 22%, transparent) 60deg, transparent 85deg 175deg, color-mix(in srgb, var(--acc2) 20%, transparent) 200deg, transparent 230deg 360deg);
  -webkit-mask-image: radial-gradient(closest-side, transparent 55%, #000 72%, transparent 100%); mask-image: radial-gradient(closest-side, transparent 55%, #000 72%, transparent 100%);
  animation: sbSpin 48s linear infinite; will-change: transform; }
@keyframes sbSpin { to { transform: rotate(360deg); } }
/* توری محوشونده */
.sb-grid { inset: -64px 0 0 0; background-image: linear-gradient(var(--sb-grid) 1px, transparent 1px), linear-gradient(90deg, var(--sb-grid) 1px, transparent 1px); background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(ellipse 80% 55% at 50% 0%, #000 30%, transparent 75%); mask-image: radial-gradient(ellipse 80% 55% at 50% 0%, #000 30%, transparent 75%);
  animation: sbGrid 14s linear infinite; }
@keyframes sbGrid { to { transform: translate3d(0, 64px, 0); } }
/* نقش‌های شناور مخصوص هر شاخه */
.sb-m { width: var(--s, 34px); height: var(--s, 34px); left: var(--x); bottom: -80px; color: var(--acc); opacity: 0; animation: sbRise var(--d, 30s) linear var(--w, 0s) infinite; will-change: transform, opacity; }
.sb-m:nth-child(even) { color: var(--acc2); }
@keyframes sbRise {
  0% { transform: translate3d(0, 0, 0) rotate(0deg); opacity: 0; }
  10% { opacity: var(--sb-motif); }
  50% { transform: translate3d(var(--sw, 30px), -55vh, 0) rotate(var(--r, 40deg)); }
  90% { opacity: var(--sb-motif); }
  100% { transform: translate3d(calc(var(--sw, 30px) * -1), -112vh, 0) rotate(calc(var(--r, 40deg) * 2)); opacity: 0; }
}
/* دونه‌ی فیلم */
.sb-grain { inset: -50%; opacity: .05; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: sbGrain 1.2s steps(6) infinite; }
@keyframes sbGrain { 0% { transform: translate(0, 0); } 20% { transform: translate(-3%, 2%); } 40% { transform: translate(2%, -3%); } 60% { transform: translate(-2%, -1%); } 80% { transform: translate(3%, 3%); } 100% { transform: translate(0, 0); } }
/* درخشش زیر نشانگر موس */
.sb-spot { position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: 0; transition: opacity .6s;
  background: radial-gradient(520px circle at var(--mx, 50%) var(--my, 30%), color-mix(in srgb, var(--acc) 13%, transparent), transparent 65%); }
.sb-on .sb-spot { opacity: 1; }
/* کارت‌ها: لبه‌ی نورانی زیر موس و ظاهر شیشه‌ای ملایم */
body.sfx .card { background: color-mix(in srgb, var(--surface) 90%, transparent); transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s, border-color .35s; }
body.sfx a.card:hover, body.sfx .grid > .card:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--acc) 35%, var(--line)); box-shadow: 0 18px 40px -22px color-mix(in srgb, var(--acc) 55%, transparent); }
body.sfx .hero h1 .grad, body.sfx .hero.mini h1 .grad { background-image: linear-gradient(90deg, var(--acc), var(--acc2), var(--acc)); background-size: 220% auto; animation: sbShine 7s ease-in-out infinite alternate; }
@keyframes sbShine { to { background-position: 100% center; } }
/* ظاهر شدن با اسکرول (فقط وقتی جاوااسکریپت فعاله) */
.js-rv .rv { opacity: 0; transform: translate3d(0, 22px, 0); transition: opacity .7s cubic-bezier(.2,.8,.2,1), transform .7s cubic-bezier(.2,.8,.2,1); transition-delay: var(--rd, 0s); }
.js-rv .rv.in { opacity: 1; transform: none; }
@media (max-width: 700px) { .sb-blob { width: 95vmax; height: 95vmax; } .sb-m:nth-of-type(n+7) { display: none; } .sb-grain { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .sbg *, .sb-spot { animation: none !important; } .sb-m, .sb-spot { display: none; }
  .js-rv .rv { opacity: 1; transform: none; transition: none; } body.sfx .card { transition: none; }
}
@media print { .sbg, .sb-spot { display: none; } }
/* منوی بالا: اگه جا نشد، افقی اسکرول بخوره و لبه‌ش محو بشه (نه اینکه بیرون بزنه) */
@media (min-width: 901px) {
  .top nav { flex: 1 1 auto; min-width: 0; overflow-x: auto; scrollbar-width: none; }
  .top nav.ovf { -webkit-mask-image: linear-gradient(to left, #000 92%, transparent); mask-image: linear-gradient(to left, #000 92%, transparent); }
  .top nav::-webkit-scrollbar { display: none; }
  .top nav a { white-space: nowrap; flex: none; }
  .top .end { flex: none; }
}
@media (min-width: 901px) and (max-width: 1400px) { .top nav a { padding: 6px 8px; font-size: .88rem; } .top nav { gap: 2px; } }

/* ================================================================ ظاهر مجله‌ای (lk-mag، عطریجات)
   زمینه‌ی روشن و تمیز، گوشه‌های کم‌گرد، خط‌های نازک، تیترهای با خط زیرین، لینک‌های فیروزه‌ای، مواد اولیه‌ی محو در پس‌زمینه */
body.lk-mag { --r: 10px; --shadow: 0 1px 2px rgba(0,0,0,.04), 0 8px 24px -16px rgba(0,0,0,.18); }
body.lk-mag a:not(.btn):not(.card):not(.pc):not(.acc-chip) { color: var(--acc2); }
body.lk-mag .top { background: color-mix(in srgb, var(--surface) 92%, transparent); }
body.lk-mag .top nav a { font-weight: 500; color: var(--muted); font-size: .95rem; }
body.lk-mag .top nav a.on, body.lk-mag .top nav a:hover { color: var(--text); background: transparent; box-shadow: inset 0 -2px 0 var(--acc); border-radius: 0; }
body.lk-mag .btn { border-radius: 8px; font-weight: 700; }
body.lk-mag .btn:not(.btn-acc):not(.btn-panel) { color: var(--acc2); border-color: color-mix(in srgb, var(--acc2) 55%, transparent); background: var(--surface); }
body.lk-mag .btn-acc { background: var(--acc); box-shadow: 0 8px 20px -12px var(--acc); }
body.lk-mag .card { border-radius: 10px; }
body.lk-mag .grad { background-image: linear-gradient(90deg, var(--acc), color-mix(in srgb, var(--acc) 55%, var(--acc2))); }
body.lk-mag .sec-h { text-align: start; max-width: none; } body.lk-mag .sec-h h2, .ul { position: relative; padding-bottom: 10px; }
body.lk-mag .sec-h h2::after, .ul::after { content: ""; position: absolute; inset-inline-start: 0; bottom: 0; width: 140px; height: 3px; border-radius: 3px; background: linear-gradient(to left, var(--text) 0, color-mix(in srgb, var(--text) 10%, transparent) 100%); }
body.lk-mag .sec-h h2 { font-size: clamp(1.3rem, 2.4vw, 1.75rem); }
/* پس‌زمینه: مواد اولیه‌ی شناور */
.sbg.mag .sb-blob { opacity: calc(var(--sb-a) * .35); }
.sbg .sb-ing { position: absolute; display: block; left: var(--x); top: var(--y); width: var(--s); height: var(--s); opacity: .2; animation: sbBob var(--d) ease-in-out var(--w) infinite alternate; will-change: transform; }
.sbg .sb-ing svg { position: static; width: 100%; height: 100%; display: block; }
:root[data-theme=dark] .sb-ing { opacity: .12; } @media (prefers-color-scheme: dark) { :root:not([data-theme=light]) .sb-ing { opacity: .12; } }
@keyframes sbBob { 0% { transform: translate3d(0, 0, 0) rotate(0deg) scale(1); } 100% { transform: translate3d(14px, -26px, 0) rotate(var(--r)) scale(1.06); } }
/* نوار جستجو زیر هدر */
.mag-search { border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--surface) 70%, transparent); }
.mag-search .wrap { display: flex; gap: 12px; align-items: center; padding: 10px 0; }
.mag-search form { flex: 1; display: flex; align-items: center; gap: 8px; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 4px 6px 4px 12px; }
.mag-search form:focus-within { border-color: var(--acc2); box-shadow: 0 0 0 3px color-mix(in srgb, var(--acc2) 18%, transparent); }
.mag-search input { flex: 1; border: 0; background: transparent; padding: 8px 4px; font: inherit; color: var(--text); outline: 0; min-width: 0; }
.mag-search .ms-link { white-space: nowrap; font-weight: 700; font-size: .9rem; }
@media (max-width: 600px) { .mag-search .ms-link { display: none; } }
/* مطلب ویژه + ستون کناری */
.mag-top { padding: 22px 0 8px; }
.mag-grid { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 18px; align-items: start; }
@media (max-width: 960px) { .mag-grid { grid-template-columns: 1fr; } }
.mag-feat { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; box-shadow: var(--shadow); }
.mf-img { position: relative; height: 420px; overflow: hidden; background: radial-gradient(60% 70% at 50% 42%, #f7a440 0, #b3541e 28%, #3a1a0c 62%, #120806 100%); }
.mf-img::after { content: ""; position: absolute; inset: auto 0 0 0; height: 38%; background: linear-gradient(to top, rgba(10,4,2,.85), transparent); }
.mf-bottle { position: absolute; left: 50%; top: 50%; width: 300px; height: 300px; margin: -170px 0 0 -150px; filter: drop-shadow(0 30px 40px rgba(0,0,0,.55)); animation: mfFloat 7s ease-in-out infinite alternate; border-radius: 26px; }
@keyframes mfFloat { to { transform: translateY(-12px) rotate(-1.5deg); } }
.mf-ing { position: absolute; width: 96px; height: 96px; filter: drop-shadow(0 14px 16px rgba(0,0,0,.45)); animation: sbBob 9s ease-in-out infinite alternate; }
.mf-ing svg { width: 100%; height: 100%; }
.mf-ing.i0 { left: 8%; bottom: 10%; width: 130px; height: 130px; } .mf-ing.i1 { right: 6%; top: 8%; width: 120px; height: 120px; animation-delay: -3s; }
.mf-ing.i2 { right: 14%; bottom: 16%; width: 62px; height: 62px; animation-delay: -5s; } .mf-ing.i3 { left: 14%; top: 10%; width: 110px; height: 110px; animation-delay: -1s; }
.mf-ing.i4 { left: 30%; bottom: 4%; width: 72px; height: 72px; animation-delay: -6s; } .mf-ing.i5 { right: 30%; top: 4%; width: 58px; height: 58px; animation-delay: -2s; }
.mf-tag { position: absolute; z-index: 2; inset-inline-start: 22px; bottom: 18px; background: rgba(0,0,0,.45); color: #fff; padding: 6px 14px; border-radius: 6px; font-size: .82rem; letter-spacing: .04em; backdrop-filter: blur(6px); }
.mf-bd { padding: 20px 24px 24px; } .mf-bd h1 { margin: 0 0 8px; font-size: clamp(1.5rem, 3.2vw, 2.3rem); font-weight: 900; line-height: 1.45; } .mf-bd .lead { margin: 0 0 14px; color: var(--muted); }
@media (max-width: 600px) { .mf-img { height: 300px; } .mf-bottle { width: 210px; height: 210px; margin: -120px 0 0 -105px; } .mf-ing.i2, .mf-ing.i4, .mf-ing.i5 { display: none; } .mf-ing.i0 { width: 78px; height: 78px; left: 4%; bottom: 6%; } .mf-ing.i1 { width: 70px; height: 70px; right: 3%; top: 5%; } .mf-ing.i3 { width: 66px; height: 66px; left: 6%; top: 6%; } }
.mag-side { display: grid; gap: 14px; } .ms-box { padding: 18px; } .ms-box h3 { margin: 0 0 12px; font-size: 1.05rem; }
.ms-stats { margin: 0; } .ms-stats div { display: flex; justify-content: space-between; padding: 7px 4px; } .ms-stats dt { color: var(--muted); } .ms-stats dd { margin: 0; font-weight: 800; font-variant-numeric: tabular-nums; }
.ms-bars { display: flex; gap: 3px; align-items: flex-end; height: 34px; margin-top: 12px; } .ms-bars i { flex: 1; background: color-mix(in srgb, var(--muted) 45%, transparent); border-radius: 2px; transform-origin: bottom; animation: msBar 2.4s ease-in-out infinite alternate; }
.ms-bars i:nth-child(3n) { animation-delay: -.8s; } .ms-bars i:nth-child(3n+1) { animation-delay: -1.6s; }
@keyframes msBar { from { transform: scaleY(.82); } to { transform: scaleY(1); } }
.ms-list { list-style: none; margin: 0; padding: 0; } .ms-list li + li { border-top: 1px solid var(--line); }
.ms-list a { display: flex; gap: 12px; align-items: center; padding: 10px 2px; color: var(--text); }
.ms-list img { width: 56px; height: 56px; object-fit: contain; border-radius: 8px; background: var(--s2); flex: none; }
.ms-list span { display: flex; flex-direction: column; line-height: 1.6; min-width: 0; } .ms-list b { font-weight: 600; color: var(--acc2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ms-list b.br { font-weight: 800; }
.ms-list small { font-size: .78rem; }
.ms-more { display: inline-block; margin-top: 8px; font-weight: 800; font-size: .88rem; color: var(--acc2); }
/* نوارهای رنگی گروه رایحه (آکورد) */
.mag-notes { margin-top: 22px; } .mag-notes .mn-h { display: flex; justify-content: space-between; align-items: end; margin-bottom: 12px; } .mag-notes h2 { margin: 0; font-size: 1.35rem; }
.acc-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.acc-chip { position: relative; display: inline-flex; align-items: baseline; gap: 8px; padding: 8px 14px 8px 16px; border-radius: 8px; background: color-mix(in srgb, var(--ac) 14%, var(--surface)); border: 1px solid color-mix(in srgb, var(--ac) 30%, transparent); color: var(--text); overflow: hidden; transition: transform .25s, box-shadow .25s; }
.acc-chip i { position: absolute; inset-inline-start: 0; top: 0; bottom: 0; width: 4px; background: var(--ac); }
.acc-chip small { color: var(--muted); font-size: .74rem; direction: ltr; } .acc-chip:hover { transform: translateY(-2px); box-shadow: 0 10px 20px -14px var(--ac); color: var(--text); }
@media (prefers-reduced-motion: reduce) { .sb-ing, .mf-bottle, .mf-ing, .ms-bars i { animation: none !important; } }
.acc-dot { display: inline-block; width: 12px; height: 12px; border-radius: 3px; background: var(--ac); margin-inline-end: 8px; vertical-align: middle; }
.mag-main { display: grid; gap: 18px; min-width: 0; } .mag-notes.card { margin-top: 0; padding: 18px; }
.mf-bottle.mb-l, .mf-bottle.mb-r { width: 200px; height: 200px; top: 58%; margin: -100px 0 0 -100px; opacity: .92; z-index: 0; animation-duration: 9s; }
.mf-bottle.mb-l { left: 30%; transform: rotate(-6deg); animation-delay: -3s; } .mf-bottle.mb-r { left: 70%; animation-delay: -5s; }
.mf-bottle { z-index: 1; } .mf-ing { z-index: 2; }
.mf-glow { position: absolute; left: 50%; top: 46%; width: 420px; height: 420px; margin: -210px 0 0 -210px; border-radius: 50%; background: radial-gradient(circle, rgba(255,200,120,.55), transparent 62%); animation: mfGlow 5s ease-in-out infinite alternate; z-index: 0; }
@keyframes mfGlow { from { opacity: .6; transform: scale(.92); } to { opacity: 1; transform: scale(1.06); } }
@media (max-width: 600px) { .mf-bottle.mb-l, .mf-bottle.mb-r { width: 130px; height: 130px; margin: -65px 0 0 -65px; } .mf-glow { width: 280px; height: 280px; margin: -140px 0 0 -140px; } }
@media (prefers-reduced-motion: reduce) { .mf-glow { animation: none; } }
.acc-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: .82rem; color: var(--muted); } .acc-legend .acc-dot { width: 10px; height: 10px; margin-inline-end: 5px; }
/* خانواده‌ی طلاجات: دکمه‌ی هدر و نوار فوتر */
.btn-fam { gap: 4px; } .btn-fam span[aria-hidden] { font-size: 1.05em; line-height: 1; }
@media (max-width: 1100px) { .btn-fam .fam-t { display: none; } }
.fam-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin: 22px 0 4px; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--r); background: color-mix(in srgb, var(--surface) 80%, transparent); }
.fam-strip .fam-home { display: flex; flex-direction: column; line-height: 1.5; color: var(--text); } .fam-strip .fam-home small { color: var(--muted); font-size: .78rem; }
.fam-strip nav { display: flex; flex-wrap: wrap; gap: 6px; flex: 1; }
.fam-strip nav a { display: inline-flex !important; padding: 5px 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--text); font-size: .86rem; margin: 0 !important; }
.fam-strip nav a:hover { border-color: var(--acc); color: var(--acc); }
.fam-strip nav a.fam-all { background: var(--acc); border-color: var(--acc); color: var(--on); font-weight: 800; }
body .fam-strip nav a { color: var(--text) !important; } body .fam-strip nav a.fam-all { color: var(--on) !important; }
@media (max-width: 700px) { .fam-strip { flex-direction: column; align-items: stretch; } .fam-strip nav { justify-content: flex-start; } }
/* طرح‌های قفل نسخه‌ی رایگان */
.theme-pick label.locked { cursor: pointer; } .theme-pick label.locked span { opacity: .72; filter: saturate(.75); } .theme-pick label.locked:hover span { opacity: 1; filter: none; }
.theme-pick i { position: relative; } .theme-pick .lock { position: absolute; top: 8px; inset-inline-start: 8px; text-decoration: none; font-size: .72rem; font-weight: 800; background: rgba(0,0,0,.62); color: #fff; padding: 2px 8px; border-radius: 999px; }
.post ol { list-style-type: persian; } .post ol li::marker { font-weight: 800; color: var(--acc); }

/* ================================================================ جلوه‌های بلاگ: نمودار، مراحل، ماتریس، کارت و کاور */
.post .viz-bars .vb-r { display: grid; grid-template-columns: minmax(90px, 34%) 1fr auto; gap: 10px; align-items: center; padding: 6px 0; }
.post .viz-bars .vb-l { font-size: .9rem; color: var(--text); }
.post .viz-bars .vb-t { height: 12px; border-radius: 99px; background: color-mix(in srgb, var(--line) 70%, transparent); overflow: hidden; }
.post .viz-bars .vb-t i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--acc2), var(--acc)); transform-origin: right; animation: vbGrow 1.1s cubic-bezier(.2,.8,.2,1) both; }
.post .viz-bars .vb-r:nth-child(2) i { animation-delay: .12s; } .post .viz-bars .vb-r:nth-child(3) i { animation-delay: .24s; } .post .viz-bars .vb-r:nth-child(4) i { animation-delay: .36s; } .post .viz-bars .vb-r:nth-child(n+5) i { animation-delay: .48s; }
.js-rv .post .viz.rv:not(.in) .vb-t i { animation: none; transform: scaleX(0); }
@keyframes vbGrow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.post .viz-bars b { font-size: .85rem; font-variant-numeric: tabular-nums; }
.post .viz-steps ol { position: relative; } .post .viz-steps ol::before { content: ""; position: absolute; inset-inline-start: 12px; top: 13px; bottom: 13px; width: 2px; background: linear-gradient(var(--acc), var(--acc2)); transform-origin: top; animation: vsLine 1.2s ease both; }
.js-rv .post .viz.rv:not(.in) .viz-steps ol::before, .js-rv .post .viz-steps.rv:not(.in) ol::before { animation: none; transform: scaleY(0); }
@keyframes vsLine { from { transform: scaleY(0); } to { transform: scaleY(1); } }
.post .viz-steps li { position: relative; z-index: 1; } .post .viz-steps li::before { box-shadow: 0 0 0 4px var(--surface); }
.post .viz-quad .vq { display: grid; grid-template-columns: auto 1fr; gap: 8px; }
.post .viz-quad .vq-y { writing-mode: horizontal-tb; display: flex; flex-direction: column; justify-content: space-between; align-items: center; font-size: .72rem; color: var(--muted); padding: 10px 0; max-width: 64px; text-align: center; line-height: 1.4; }
.post .viz-quad .vq-g { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.post .viz-quad .vq-c { padding: 12px; border-radius: 14px; display: flex; flex-direction: column; gap: 4px; min-height: 86px; transition: transform .25s; }
.post .viz-quad .vq-c:hover { transform: translateY(-3px); }
.post .viz-quad .vq-c b { font-size: .95rem; } .post .viz-quad .vq-c span { font-size: .82rem; color: var(--muted); }
.post .viz-quad .c0 { background: color-mix(in srgb, var(--acc) 20%, var(--surface)); } .post .viz-quad .c1 { background: color-mix(in srgb, var(--acc2) 18%, var(--surface)); }
.post .viz-quad .c2 { background: color-mix(in srgb, var(--acc2) 10%, var(--surface)); } .post .viz-quad .c3 { background: color-mix(in srgb, var(--line) 60%, var(--surface)); }
.post .viz-quad .vq-x { grid-column: 2; display: flex; justify-content: space-between; font-size: .75rem; color: var(--muted); }
/* کارت‌های بلاگ: زوم نرم کاور و رد نور */
.bcard, .bfeat { position: relative; overflow: hidden; }
.bcard img, .bfeat img { transition: transform .8s cubic-bezier(.2,.8,.2,1), filter .5s; }
.bcard:hover img, .bfeat:hover img { transform: scale(1.06); filter: saturate(1.08); }
.bcard::after, .bfeat::after { content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; pointer-events: none; background: linear-gradient(100deg, transparent, rgba(255,255,255,.35), transparent); transform: skewX(-18deg); opacity: 0; }
.bcard:hover::after, .bfeat:hover::after { animation: bShine .9s ease; }
@keyframes bShine { from { left: -60%; opacity: 1; } to { left: 130%; opacity: 1; } }
/* کاور بالای مقاله: زوم خیلی آهسته (کن برنز) */
.post > figure:first-of-type, .post-x figure:first-of-type { overflow: hidden; }
.post-x > figure:first-of-type img { animation: kenBurns 18s ease-in-out infinite alternate; transform-origin: 60% 40%; }
@keyframes kenBurns { from { transform: scale(1); } to { transform: scale(1.07); } }
.post figure img { border-radius: 16px; }
@media (prefers-reduced-motion: reduce) { .post .viz-bars .vb-t i, .post .viz-steps ol::before, .post-x > figure:first-of-type img, .bcard:hover::after, .bfeat:hover::after { animation: none !important; } .bcard:hover img, .bfeat:hover img { transform: none; } }

/* ---------------------------------------------------------------- خرید اشتراک: کارت‌به‌کارت با تصویر کارت و رسید (مثل منوجات) */
.theme-pick .lock:hover { background: var(--acc); color: var(--on, #fff); }
.btn-pro { background: linear-gradient(120deg, #e3c160, #fff1b8 50%, #d4af37); color: #2a1d05 !important; border-color: transparent; font-weight: 900; }
.pro-hero { position: relative; overflow: hidden; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 22px 24px; border-radius: 22px; margin-bottom: 16px; color: #fff;
  background: radial-gradient(500px 240px at 0% 0%, color-mix(in srgb, var(--acc) 70%, transparent), transparent 70%), linear-gradient(135deg, #17130c, #2a2214 55%, #0d0b07); box-shadow: 0 24px 50px -30px rgba(0,0,0,.7); }
.pro-hero h2 { margin: 8px 0 6px; font-size: clamp(1.2rem, 3.4vw, 1.7rem); font-weight: 900; } .pro-hero p { margin: 0; opacity: .85; }
.pro-hero .chip { display: inline-block; font-size: .78rem; font-weight: 800; padding: 3px 12px; border-radius: 99px; background: rgba(255,241,184,.15); border: 1px solid rgba(255,241,184,.35); color: #fff1b8; }
.pro-crown { font-size: 3.6rem; filter: drop-shadow(0 8px 18px rgba(212,175,55,.5)); animation: crownF 4s ease-in-out infinite; }
@keyframes crownF { 50% { transform: translateY(-6px) rotate(-4deg); } }
.pro-bar { height: 6px; border-radius: 9px; background: rgba(255,255,255,.15); margin-top: 12px; overflow: hidden; } .pro-bar i { display: block; height: 100%; background: linear-gradient(90deg, #d4af37, #fff1b8); }
.why-pro { display: flex; gap: 14px; align-items: center; padding: 14px 16px; margin-bottom: 14px; border-radius: 18px; border: 1px solid color-mix(in srgb, var(--acc) 45%, var(--line)); background: color-mix(in srgb, var(--acc) 8%, var(--surface)); animation: whyIn .5s ease-out; }
.why-pro > i { flex: none; position: relative; width: 74px; height: 56px; border-radius: 14px; box-shadow: 0 6px 16px -8px rgba(0,0,0,.5); }
.why-pro > i b { position: absolute; inset-inline-start: 10px; bottom: 9px; width: 24px; height: 24px; border-radius: 8px; }
.why-pro > i.lim { display: grid; place-items: center; font-style: normal; font-weight: 900; font-size: 1.5rem; background: var(--acc); color: var(--on, #fff); }
.why-pro p { margin: 4px 0 0; }
@keyframes whyIn { from { opacity: 0; transform: translateY(-8px); } }
.pro-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 16px; align-items: start; }
.feat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .feat-grid .feat { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 12px; }
.pay-box { position: sticky; top: 80px; border: 1px solid color-mix(in srgb, var(--acc) 40%, var(--line)); box-shadow: 0 20px 50px -34px color-mix(in srgb, var(--acc) 80%, transparent); }
.c2c .step { align-items: center; gap: 10px; margin: 16px 0 10px; } .c2c .step em { flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-weight: 900; background: var(--acc); color: var(--on, #fff); }
.c2c .amt { color: var(--acc); font-size: 1.1em; }
.plan-pick { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 8px; padding-top: 8px; }
.pp { position: relative; display: grid; gap: 3px; padding: 16px 12px 12px; border-radius: 16px; border: 2px solid var(--line); background: var(--surface); cursor: pointer; text-align: center; transition: .18s; }
.pp:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--acc) 50%, var(--line)); }
.pp input { position: absolute; opacity: 0; pointer-events: none; }
.pp:has(input:checked) { border-color: var(--acc); background: color-mix(in srgb, var(--acc) 9%, var(--surface)); box-shadow: 0 0 0 4px color-mix(in srgb, var(--acc) 18%, transparent); }
.pp-m { font-weight: 800; font-size: .92rem; } .pp-p { font-size: clamp(.98rem, 3.6vw, 1.18rem); font-weight: 900; white-space: nowrap; } .pp-p small { display: block; font-size: .7rem; color: var(--muted); font-weight: 400; } .pp-per { font-size: .72rem; color: var(--muted); }
.pp-save { justify-self: center; font-size: .7rem; font-weight: 800; color: var(--up, #16a34a); background: color-mix(in srgb, var(--up, #16a34a) 12%, transparent); padding: 1px 8px; border-radius: 99px; }
.pp-rib { position: absolute; top: -10px; inset-inline-start: 50%; transform: translateX(50%); white-space: nowrap; font-size: .68rem; font-weight: 900; padding: 1px 10px; border-radius: 99px; background: linear-gradient(120deg, #e3c160, #fff1b8 50%, #d4af37); color: #2a1d05; }
.pp-rib.alt { background: var(--acc); color: var(--on, #fff); }
.c2c-card { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.c2c-copy { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; text-align: center; } .c2c-copy small { width: 100%; }
.btn.ok { color: var(--up, #16a34a); border-color: currentColor; }
.bank-card { position: relative; width: min(100%, 380px); aspect-ratio: 85.6 / 53.98; border-radius: 20px; padding: 18px 22px; color: #f7ecd0; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between;
  background: radial-gradient(120% 90% at 100% 0%, color-mix(in srgb, var(--bank) 60%, transparent), transparent 55%), radial-gradient(90% 80% at 0% 100%, color-mix(in srgb, var(--acc) 35%, transparent), transparent 60%), linear-gradient(135deg, #17130c 0%, #26200f 45%, #0d0b07 100%);
  box-shadow: 0 30px 60px -28px rgba(0,0,0,.85), 0 0 0 1px rgba(227,193,96,.35) inset, 0 1px 0 rgba(255,255,255,.15) inset; transform: perspective(900px) rotateX(4deg); transition: transform .5s; }
.bank-card:hover { transform: perspective(900px) rotateX(0) translateY(-3px); }
.bank-card::before { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(115deg, rgba(255,255,255,.025) 0 2px, transparent 2px 7px); pointer-events: none; }
.bc-shine { position: absolute; inset: -40% -60%; background: linear-gradient(100deg, transparent 40%, rgba(255,241,184,.2) 50%, transparent 60%); animation: bcShine 6s ease-in-out infinite; pointer-events: none; }
@keyframes bcShine { 0%, 100% { transform: translateX(-30%); } 50% { transform: translateX(30%); } }
.bc-top, .bc-mid, .bc-num, .bc-bottom { position: relative; display: flex; justify-content: space-between; align-items: center; }
.bc-bank { font-weight: 800; font-size: .92rem; padding: 2px 10px; border-radius: 8px; background: color-mix(in srgb, var(--bank) 45%, rgba(0,0,0,.3)); border: 1px solid rgba(255,255,255,.12); }
.bc-brand { font-weight: 900; font-size: .88rem; color: #fff1b8; }
.bc-mid { direction: ltr; } .bc-chip { width: 48px; height: 36px; } .bc-nfc { width: 26px; height: 26px; color: rgba(247,236,208,.7); }
.bc-num { font: 700 clamp(1.05rem, 4.6vw, 1.45rem) 'Courier New', monospace; letter-spacing: 1px; color: #fff6dc; text-shadow: 0 1px 0 rgba(0,0,0,.5); }
.bc-bottom { align-items: flex-end; } .bc-holder small { display: block; font-size: .62rem; opacity: .6; }
.bc-holder b { display: block; font-size: 1.2rem; font-weight: 900; line-height: 1.3; background: linear-gradient(120deg, #e3c160, #fff1b8 45%, #d4af37); -webkit-background-clip: text; background-clip: text; color: transparent; }
.bc-holder span { display: block; font-size: .72rem; letter-spacing: 3px; opacity: .75; }
.bc-mark { display: flex; direction: ltr; } .bc-mark i { width: 30px; height: 30px; border-radius: 50%; background: #d4af37; opacity: .9; } .bc-mark i + i { margin-left: -12px; background: #fff1b8; opacity: .7; }
.drop { position: relative; display: grid; place-items: center; gap: 8px; min-height: 110px; padding: 16px; border-radius: 16px; border: 2px dashed var(--line); background: var(--s2, var(--surface)); cursor: pointer; text-align: center; transition: .15s; }
.drop input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.drop.over, .drop.has { border-color: var(--acc); background: color-mix(in srgb, var(--acc) 8%, var(--surface)); }
.drop img { max-height: 180px; border-radius: 10px; } .drop-t { color: var(--muted); font-size: .9rem; }
.pay-go { width: 100%; margin-top: 12px; padding: 13px; font-size: 1.02rem; }
.rcpt img { width: 64px; height: 64px; object-fit: cover; border-radius: 10px; border: 1px solid var(--line); display: block; }
@media (max-width: 980px) { .pro-split { grid-template-columns: minmax(0, 1fr); } .pay-box { position: static; } .pro-split > div:first-child { order: 2; } }
@media (max-width: 560px) { .feat-grid { grid-template-columns: 1fr; } .pro-crown { display: none; } }
@media (prefers-reduced-motion: reduce) { .bc-shine, .pro-crown, .why-pro { animation: none; } }

/* لینک‌های بلند (آدرس منو، لینک معرفی) توی موبایل بشکنن و صفحه اسکرول افقی نخوره */
code, .small code { overflow-wrap: anywhere; word-break: break-word; }

/* ---------------------------------------------------------------- ورزش‌جات: نقش حساب، فرم درخواست برنامه، صندوق پیام مربی */
.role-pick { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.role-pick label { cursor: pointer; } .role-pick input { position: absolute; opacity: 0; }
.role-pick span { display: grid; gap: 2px; height: 100%; padding: 12px 10px; border: 2px solid var(--line); border-radius: 14px; text-align: center; background: var(--surface); transition: .15s; }
.role-pick i { font-style: normal; font-size: 1.6rem; } .role-pick b { font-size: .9rem; } .role-pick small { font-size: .72rem; color: var(--muted); line-height: 1.5; }
.role-pick input:checked + span { border-color: var(--acc); background: color-mix(in srgb, var(--acc) 9%, var(--surface)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--acc) 18%, transparent); }
.role-pick input:focus-visible + span { outline: 2px solid var(--acc); }
@media (max-width: 520px) { .role-pick { grid-template-columns: 1fr; } .role-pick span { grid-template-columns: auto 1fr; text-align: start; align-items: center; column-gap: 10px; } .role-pick i { grid-row: span 2; } }
.co-ask { position: relative; border: 1px solid color-mix(in srgb, var(--acc) 40%, var(--line)); }
.co-msg { border: 1px solid var(--line); border-radius: 14px; padding: 12px; margin-top: 10px; background: var(--surface); }
.co-msg.new { border-color: var(--acc); box-shadow: 0 0 0 3px color-mix(in srgb, var(--acc) 15%, transparent); } .co-msg.done { opacity: .7; }
.co-msg-h { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; } .co-msg-h small { margin-inline-start: auto; }
.co-msg .ctas { margin-top: 8px; } .co-msg form { display: inline; }

/* ---------------------------------------------------------------- صفحه‌های جذب فروشنده و «مشتری‌های ما» */
.mk-pain i { display: block; font-style: normal; font-size: 1.8rem; margin-bottom: 4px; } .mk-pain p { margin: 6px 0 0; }
.mk-links { display: flex; flex-wrap: wrap; gap: 8px; } .mk-links .chip { padding: 6px 14px; font-size: .84rem; white-space: normal; max-width: 100%; text-align: center; }
.mk-hub { display: grid; gap: 6px; color: var(--text); } .mk-hub p { margin: 0; }
.mk-stats { display: flex; justify-content: center; gap: 22px; flex-wrap: wrap; margin-top: 14px; } .mk-stats b { font-size: 1.5rem; color: var(--acc); }
.cu-card { display: grid; gap: 10px; color: var(--text); } .cu-top { display: flex; gap: 12px; align-items: center; } .cu-top small { display: block; }
.cu-logo { width: 56px !important; height: 56px !important; border-radius: 16px !important; font-size: 1.4rem !important; flex: none; }
.cu-pro { color: var(--acc); font-weight: 800; } .cu-th { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; } .cu-th img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 10px; background: var(--s2); }
.cu-empty { text-align: center; max-width: 560px; margin: 0 auto; }
/* فیلد تله‌ی ربات: دیده نمیشه و صفحه رو پهن نمی‌کنه (left منفی توی صفحه‌ی راست‌به‌چپ اسکرول افقی می‌ساخت) */
.hp { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); opacity: 0; pointer-events: none; }

/* ---------------------------------------------------------------- اعلان‌ها، شمارنده‌ی منوی پنل و پیام به پشتیبانی */
.pn-nav a[data-badge] { position: relative; }
.pn-nav a[data-badge]::after { content: attr(data-badge); position: absolute; top: 4px; inset-inline-end: 6px; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 99px; background: #e5484d; color: #fff; font-size: .7rem; font-weight: 800; display: grid; place-items: center; box-shadow: 0 0 0 2px var(--surface); }
.nt-list, .nt-strip { display: grid; gap: 8px; }
.nt { position: relative; display: flex; gap: 12px; align-items: flex-start; padding: 12px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface); color: var(--text); transition: .15s; }
.nt:hover { border-color: color-mix(in srgb, var(--acc) 40%, var(--line)); transform: translateY(-1px); }
.nt i { flex: none; font-style: normal; font-size: 1.3rem; width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: color-mix(in srgb, var(--acc) 10%, var(--surface)); }
.nt b { display: block; } .nt p { margin: 2px 0 0; color: var(--muted); font-size: .86rem; } .nt small { color: var(--muted); font-size: .74rem; }
.nt.new { border-color: color-mix(in srgb, var(--acc) 45%, var(--line)); background: color-mix(in srgb, var(--acc) 5%, var(--surface)); }
.nt-pro i { background: linear-gradient(135deg, #fff1b8, #e3c160); } .nt-order i { background: #e6f6ec; } .nt-support i { background: #e7f0fb; }
.nt-dot { position: absolute; top: 14px; inset-inline-end: 14px; width: 9px; height: 9px; border-radius: 50%; background: #e5484d; }
.nt-strip { margin-bottom: 14px; }
.tk-thread { display: flex; flex-direction: column; gap: 10px; max-height: 460px; overflow-y: auto; padding: 6px 2px; margin: 12px 0; }
.tk { max-width: 80%; padding: 10px 14px; border-radius: 16px; } .tk p { margin: 0; } .tk small { display: block; margin-top: 4px; font-size: .72rem; opacity: .75; }
.tk.me { align-self: flex-start; background: var(--acc); color: var(--on, #fff); border-end-start-radius: 4px; }
.tk.them { align-self: flex-end; background: var(--s2, #f2f2f2); border-end-end-radius: 4px; }
.tk-form { display: flex; gap: 8px; align-items: flex-end; } .tk-form textarea { flex: 1; }

/* ---------------------------------------------------------------- قیف حرفه‌ای: کارت خلاصه، دکمه‌ی ارتقا، جدول مقایسه */
.pro-card { margin-bottom: 14px; border: 1px solid color-mix(in srgb, #d4af37 45%, var(--line)); background: radial-gradient(500px 200px at 100% 0, rgba(227,193,96,.18), transparent 70%), var(--surface); }
.pro-card.trial { border-color: color-mix(in srgb, var(--acc) 50%, var(--line)); }
.pc-head { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; } .pc-head p { margin: 4px 0 0; }
.pc-rows { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; margin-top: 12px; }
.pc-row { display: flex; gap: 10px; align-items: flex-start; padding: 10px; border-radius: 12px; background: var(--s2, #f6f6f6); } .pc-row > span { font-size: 1.3rem; } .pc-row b { display: block; font-size: .88rem; margin-top: 2px; } .pc-row small { display: block; }
.pc-bar { display: block; height: 6px; border-radius: 9px; background: color-mix(in srgb, var(--acc) 15%, transparent); margin: 6px 0 2px; overflow: hidden; } .pc-bar i { display: block; height: 100%; background: var(--acc); }
.pn-up { width: 100%; margin-top: 10px; text-align: center; }
.cmp-table table { width: 100%; border-collapse: collapse; font-size: .92rem; } .cmp-table th, .cmp-table td { padding: 11px 14px; text-align: start; border-top: 1px solid var(--line); }
.cmp-table thead th { background: var(--s2, #f6f6f6); border-top: 0; } .cmp-table td:last-child, .cmp-table th:last-child { background: color-mix(in srgb, #d4af37 9%, transparent); }
@media (max-width: 560px) { .pc-head { flex-direction: column; } .cmp-table th, .cmp-table td { padding: 9px 8px; font-size: .82rem; } }

/* تب‌های داخل مقاله ([[tabs …]]) بدون جاوااسکریپت */
.viz-tabs .vt { display: flex; flex-wrap: wrap; gap: 6px; }
.viz-tabs .vt > input { position: absolute; opacity: 0; pointer-events: none; }
.viz-tabs .vt > label { order: 1; cursor: pointer; padding: 7px 16px; border-radius: 99px; border: 1px solid var(--line, #ddd); font-weight: 700; font-size: .9rem; background: var(--surface, #fff); }
.viz-tabs .vt > input:checked + label { background: var(--acc, var(--gold2, #b8902a)); border-color: transparent; color: var(--on, #fff); }
.viz-tabs .vt > input:focus-visible + label { outline: 2px solid var(--acc, #b8902a); }
.viz-tabs .vt-p { order: 2; display: none; width: 100%; padding: 14px 16px; margin-top: 4px; border-radius: 14px; background: var(--s2, var(--surface2, #f6f6f6)); line-height: 2; }
.viz-tabs .vt > input:checked + label + .vt-p { display: block; }

/* ---------------------------------------------------------------- ستون کناری مقاله */
.post-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 28px; align-items: start; }
.post-grid > .post { max-width: none; margin: 0; }
/* مقاله‌های مرتبط بیرون از گرید؛ وگرنه ستون کناری چسبون موقع اسکرول می‌رفت زیرش */
.post-more { margin-top: 30px; }
.post-side { position: sticky; top: 84px; display: grid; gap: 14px; padding-top: 26px; }
.post-side .card { padding: 16px; }
.ps-toc ol { margin: 8px 0 0; padding-inline-start: 18px; font-size: .86rem; line-height: 1.9; max-height: 46vh; overflow-y: auto; } .ps-toc a { color: var(--text); }
.ps-cta { display: grid; gap: 8px; text-align: center; background: radial-gradient(300px 160px at 50% 0, color-mix(in srgb, var(--acc) 14%, transparent), transparent 70%), var(--surface); } .ps-cta p { margin: 0; }
.ps-list { display: grid; gap: 4px; } .ps-list b { margin-bottom: 4px; }
.ps-list a { display: flex; gap: 8px; align-items: center; padding: 6px 4px; border-radius: 10px; font-size: .86rem; color: var(--text); line-height: 1.6; } .ps-list a:hover { background: var(--s2); }
.ps-list img { flex: none; width: 64px; height: 36px; object-fit: cover; border-radius: 6px; }
.post .autolink { text-decoration: underline; text-decoration-style: dotted; text-underline-offset: 4px; }
@media (min-width: 1001px) { .toc-inline { display: none; } }
@media (max-width: 1000px) { .post-grid { grid-template-columns: minmax(0, 1fr); } .post-side { position: static; padding-top: 0; } .ps-toc { display: none; } }

/* ---------------------------------------------------------------- منوی فروشگاه: هدر رنگی، فیلتر جمع‌شونده، پرفروش‌ها، دکمه‌ی شناور سفارش */
.mn-hero.nocover { background: radial-gradient(700px 260px at 85% -10%, color-mix(in srgb, var(--acc) 22%, transparent), transparent 70%), radial-gradient(500px 220px at 0% 120%, color-mix(in srgb, var(--acc) 12%, transparent), transparent 70%), var(--hero); }
.mn-share { display: inline-flex; gap: 6px; align-items: center; padding: 7px 12px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); color: var(--text); font: inherit; font-size: .88rem; font-weight: 700; cursor: pointer; }
.mn-ftoggle { display: none; margin-top: 8px; }
.mn-top { margin: 16px 0 4px; } .mn-top h2 { font-size: 1.1rem; margin: 0 0 8px; }
.mn-top-row { display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none; padding-bottom: 6px; scroll-snap-type: x mandatory; }
.mn-mini { flex: none; width: 150px; scroll-snap-align: start; display: grid; gap: 4px; padding: 8px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); color: var(--text); transition: .18s; }
.mn-mini:hover { transform: translateY(-2px); box-shadow: 0 10px 24px -16px rgba(0,0,0,.45); }
.mn-mini img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 12px; background: var(--s2); }
.mn-mini b { font-size: .84rem; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .mn-mini span { font-size: .84rem; font-weight: 900; color: var(--acc); }
.pc { transition: transform .2s, box-shadow .2s; } .pc:hover { transform: translateY(-3px); box-shadow: 0 18px 34px -22px rgba(0,0,0,.5); }
.pc .im { overflow: hidden; } .pc .im img { transition: transform .5s; } .pc:hover .im img { transform: scale(1.05); }
.mn-fab { display: none; }
@media (max-width: 700px) {
  .mn-ftoggle { display: inline-flex; gap: 4px; }
  .mn-filters { display: none; } .mn-filters.open { display: flex; }
  .pc .tg .chip:nth-child(n+3) { display: none; }
  .pc .pr { font-size: 1.02rem; }
  .mn-fab { display: flex; position: fixed; z-index: 30; bottom: 14px; inset-inline: 16px; justify-content: center; align-items: center; gap: 6px; padding: 13px; border-radius: 16px; background: var(--acc); color: var(--on, #fff); font-weight: 900; box-shadow: 0 14px 30px -12px rgba(0,0,0,.55); }
  body.mn { padding-bottom: 76px; }
}
@media (prefers-reduced-motion: reduce) { .pc, .pc .im img, .mn-mini { transition: none; } }

/* ---------------------------------------------------------------- صفحه‌های جذب فروشنده: موبایل واقعی، مسیر سفارش، مقایسه‌ی پلن */
.sc-demo, .sc-pro { display: grid; grid-template-columns: 1.05fr 1fr; gap: 34px; align-items: center; }
.sc-txt h2 { font-size: clamp(1.4rem, 3vw, 2rem); margin: 8px 0 10px; line-height: 1.5; }
.sc-list { list-style: none; padding: 0; margin: 12px 0 18px; display: grid; gap: 8px; } .sc-list li { padding: 9px 12px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); font-weight: 700; font-size: .92rem; }
.sc-phones { position: relative; display: flex; justify-content: center; min-height: 480px; padding-top: 14px; overflow: hidden; }
.phone { position: absolute; width: 210px; border-radius: 34px; padding: 9px; background: #16161a; box-shadow: 0 30px 60px -30px rgba(0,0,0,.6), inset 0 0 0 2px #2c2c33; transition: transform .35s; }
.phone img { display: block; width: 100%; height: auto; border-radius: 26px; }
.phone::before { content: ''; position: absolute; top: 15px; left: 50%; width: 56px; height: 14px; margin-left: -28px; border-radius: 10px; background: #16161a; z-index: 1; }
.phone.p1 { transform: translateX(-62px) rotate(-4deg); z-index: 2; } .phone.p2 { transform: translateX(78px) translateY(34px) rotate(5deg); }
.sc-phones:hover .p1 { transform: translateX(-70px) rotate(-6deg) translateY(-6px); } .sc-phones:hover .p2 { transform: translateX(88px) translateY(26px) rotate(7deg); }
.sc-flow { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; counter-reset: f; }
.sc-flow li { position: relative; text-align: center; padding: 18px 14px; border-radius: 18px; background: var(--surface); border: 1px solid var(--line); display: grid; gap: 4px; justify-items: center; }
.sc-flow li i { font-style: normal; font-size: 1.7rem; width: 58px; height: 58px; display: grid; place-items: center; border-radius: 50%; background: color-mix(in srgb, var(--acc) 14%, var(--surface)); }
.sc-flow li small { color: var(--muted); line-height: 1.7; }
.sc-flow li:not(:last-child)::after { content: '←'; position: absolute; top: 50%; left: -22px; transform: translateY(-50%); color: var(--acc); font-weight: 900; font-size: 1.2rem; }
.sc-cmp { padding: 0; overflow-x: auto; } .sc-gift { padding: 10px 14px; border-radius: 12px; background: color-mix(in srgb, var(--acc) 12%, var(--surface)); font-weight: 700; }
@media (max-width: 860px) {
  .sc-demo, .sc-pro { grid-template-columns: 1fr; gap: 20px; }
  .sc-pro .sc-txt { order: -1; }
  .sc-phones { min-height: 360px; } .phone { width: 150px; border-radius: 26px; padding: 7px; } .phone img { border-radius: 20px; }
  .phone.p1, .sc-phones:hover .p1 { transform: translateX(-42px) rotate(-4deg); } .phone.p2, .sc-phones:hover .p2 { transform: translateX(50px) translateY(26px) rotate(5deg); }
  .sc-flow { grid-template-columns: 1fr 1fr; gap: 14px; } .sc-flow li::after { display: none; }
}
@media (prefers-reduced-motion: reduce) { .phone { transition: none; } }

/* ---------------------------------------------------------------- گزارش ماهانه */
.rp-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.rp-months { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding-bottom: 6px; margin-bottom: 12px; } .rp-months .chip { flex: none; } .rp-months .chip.on { background: var(--acc); color: var(--on, #fff); border-color: transparent; } .rp-months .chip.lock { opacity: .65; }
.rp-k .kpi { margin: 2px 0; }
.rp-ins { margin-top: 14px; } .rp-ins ul { list-style: none; padding: 0; margin: 8px 0 0; display: grid; gap: 8px; } .rp-ins li { display: flex; gap: 10px; align-items: flex-start; padding: 8px 10px; border-radius: 12px; background: var(--s2); font-size: .9rem; line-height: 1.8; } .rp-ins li i { font-style: normal; }
.rp-t { margin-top: 8px; overflow-x: auto; box-shadow: none; border: 0; } .rp-t td, .rp-t th { white-space: nowrap; }
.rp-pro { background: linear-gradient(135deg, color-mix(in srgb, #d4af37 14%, var(--surface)), var(--surface)); }
@media print { .pn-nav, .rp-months, .rp-head .ctas, .rp-pro, header, footer, .site-head, .site-foot { display: none !important; } .pn { display: block !important; } .card { break-inside: avoid; box-shadow: none !important; } }

/* ---------------------------------------------------------------- حراج پلن سالانه */
.sale-band { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 14px 0; padding: 14px 18px; border-radius: 18px; color: #fff; text-decoration: none; background: linear-gradient(120deg, #b3122e, #e0452b 55%, #f29a2e); box-shadow: 0 16px 32px -20px rgba(179,18,46,.8); }
.sale-band b { font-size: 1.02rem; } .sale-band .sb-tag { padding: 3px 10px; border-radius: 999px; background: rgba(255,255,255,.2); font-weight: 800; font-size: .85rem; }
.sale-band .sb-cd { font-variant-numeric: tabular-nums; font-weight: 700; } .sale-band .sb-cd i { font-style: normal; } .sale-band .btn { margin-inline-start: auto; background: #fff; color: #b3122e; border-color: #fff; }
.pp.on-sale { border-color: #e0452b; } .pp-rib.sale { background: #e0452b; color: #fff; } .pp-old { color: var(--muted); font-size: .85rem; }
.sale-admin { margin: 12px 0; } .sa-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; margin-top: 8px; } .sa-row label { display: grid; gap: 2px; font-size: .8rem; } .sa-row input, .sa-row select { padding: 6px 8px; border-radius: 8px; border: 1px solid var(--line); background: var(--surface); color: var(--text); font: inherit; min-width: 80px; }

/* ---------------------------------------------------------------- قالب مناسبتی خودکار */
.occ-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px; margin: 10px 0; }
.occ-it { display: flex; align-items: center; gap: 10px; padding: 9px 11px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface); cursor: pointer; }
.occ-it:has(input:checked) { border-color: var(--acc); box-shadow: 0 0 0 2px color-mix(in srgb, var(--acc) 25%, transparent); }
.occ-it span { display: grid; flex: 1; min-width: 0; } .occ-it small { font-size: .76rem; }
.occ-sw { flex: none; width: 38px; height: 38px; border-radius: 10px; position: relative; overflow: hidden; border: 1px solid var(--line); } .occ-sw b { position: absolute; inset: auto 6px 6px auto; width: 12px; height: 12px; border-radius: 50%; }
.occ-custom summary { cursor: pointer; font-weight: 700; margin-top: 4px; } .occ-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; } .occ-row label { display: grid; gap: 2px; font-size: .8rem; } .occ-row label:has(select + select), .occ-row label:has(input + select) { grid-template-columns: auto auto; align-items: end; }
.occ-row input, .occ-row select { padding: 6px 8px; border-radius: 8px; border: 1px solid var(--line); background: var(--surface); color: var(--text); font: inherit; }
.mn-occ { text-align: center; padding: 8px 12px; font-weight: 900; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--acc) 22%, transparent), transparent); color: var(--text); letter-spacing: .2px; }

/* ---------------------------------------------------------------- دعوت دوستان */
.inv-hero { display: flex; gap: 18px; align-items: center; justify-content: space-between; flex-wrap: wrap; padding: 20px; border-radius: 22px; background: linear-gradient(135deg, color-mix(in srgb, var(--acc) 16%, var(--surface)), var(--surface)); border: 1px solid var(--line); }
.inv-hero h2 { margin: 8px 0 6px; } .inv-hero p { margin: 0; max-width: 560px; }
.inv-sum { display: flex; gap: 10px; } .inv-sum > div { display: grid; justify-items: center; min-width: 110px; padding: 12px 16px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); } .inv-sum b { font-size: 1.8rem; font-weight: 900; color: var(--acc); line-height: 1.3; } .inv-sum small { color: var(--muted); font-size: .8rem; }
.inv-bar { position: relative; height: 12px; margin: 26px 6px 12px; border-radius: 8px; background: var(--s2); } .inv-bar i { position: absolute; inset: 0 0 0 auto; border-radius: 8px; background: var(--acc); }
.inv-bar em { position: absolute; top: -26px; transform: translateX(50%); font-style: normal; font-size: .78rem; font-weight: 800; padding: 1px 7px; border-radius: 8px; background: var(--surface); border: 1px solid var(--line); } .inv-bar em.on { background: var(--acc); color: var(--on, #fff); border-color: transparent; }
.inv textarea { width: 100%; font: inherit; font-size: .85rem; padding: 8px; border-radius: 10px; border: 1px solid var(--line); background: var(--s2); color: var(--text); resize: vertical; }
.inv-teaser { display: flex; gap: 12px; align-items: center; margin-top: 16px; color: var(--text); } .inv-teaser > span:first-child { font-size: 1.8rem; } .inv-teaser div { flex: 1; }

/* ---------------------------------------------------------------- صفحه‌ی شهر */
.cy-stats { margin-top: 14px; } .cy-stats .card { display: grid; justify-items: center; text-align: center; gap: 2px; } .cy-stats span { font-size: 1.4rem; } .cy-stats b { font-size: 1.6rem; font-weight: 900; color: var(--acc); }
.cy-kinds .chip.on { background: var(--acc); color: var(--on, #fff); border-color: transparent; }
.faq details summary { cursor: pointer; font-weight: 700; padding: 6px 0; }

/* ---------------------------------------------------------------- نظر مشتری‌ها */
.mn-rv { margin-top: 26px; padding: 18px; border-radius: 20px; background: var(--surface); border: 1px solid var(--line); }
.rv-head { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; } .rv-head h2 { margin: 0; font-size: 1.15rem; }
.rv-avg { display: flex; align-items: center; gap: 8px; } .rv-avg b { font-size: 1.6rem; font-weight: 900; }
.rv-st { color: #f5a623; letter-spacing: 1px; } .rv-st i { font-style: normal; color: var(--line); }
.rv-dist { display: grid; gap: 4px; margin: 10px 0; max-width: 380px; } .rv-dist div { display: grid; grid-template-columns: 40px 1fr 30px; gap: 8px; align-items: center; font-size: .8rem; } .rv-dist i { height: 8px; border-radius: 6px; background: var(--s2); overflow: hidden; } .rv-dist b { display: block; height: 100%; background: #f5a623; } .rv-dist em { font-style: normal; color: var(--muted); }
.rv-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; margin: 12px 0; }
.rv { padding: 12px; border-radius: 14px; background: var(--s2); } .rv p { margin: 6px 0 0; font-size: .9rem; line-height: 1.8; overflow-wrap: anywhere; }
.rv-top { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .rv-reply { margin-top: 8px; padding: 8px 10px; border-radius: 10px; background: var(--surface); font-size: .85rem; border-inline-start: 3px solid var(--acc); }
.rv-form summary { list-style: none; display: inline-flex; cursor: pointer; } .rv-form summary::-webkit-details-marker { display: none; } .rv-form form { margin-top: 10px; max-width: 520px; }
.rv-pick { display: inline-flex; flex-direction: row-reverse; gap: 2px; margin-bottom: 6px; } .rv-pick input { position: absolute; opacity: 0; width: 1px; height: 1px; } .rv-pick label { font-size: 1.9rem; color: var(--line); cursor: pointer; line-height: 1; }
.rv-pick input:checked ~ label, .rv-pick label:hover, .rv-pick label:hover ~ label { color: #f5a623; }
.rv-pick input:focus-visible + label { outline: 2px solid var(--acc); border-radius: 4px; }
.rv-admin { margin-bottom: 10px; } .rv-admin.pending { border-color: #f5a623; } .rv-admin.hidden { opacity: .65; }
.rv-rep { display: flex; gap: 6px; margin-top: 6px; } .rv-rep input { flex: 1; min-width: 0; padding: 6px 8px; border-radius: 8px; border: 1px solid var(--line); background: var(--surface); color: var(--text); font: inherit; }
.mn-rv textarea, .mn-rv input[name=name] { width: 100%; }

/* ---------------------------------------------------------------- جزئیات سفارش (متن کارت، زمان تحویل، حک اسم…) */
.ox { display: grid; gap: 8px; margin: 12px 0 4px; padding: 12px; border-radius: 14px; background: var(--s2); border: 1px dashed var(--line); }
.ox .f { margin: 0; } .ox input { width: 100%; }

/* بنر «با ما بیشتر بفروش» (views/sell-banner.js) */
.sbn{margin:28px 0;clear:both}
.wrap>.sbn,.sbn.wrap{margin-inline:auto}
.sbn>a{position:relative;display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,.82fr);align-items:center;gap:18px;padding:24px 26px;border-radius:24px;overflow:hidden;text-decoration:none;color:#fff;
  background:radial-gradient(120% 140% at 0% 100%,color-mix(in srgb,var(--sb) 75%,transparent),transparent 55%),linear-gradient(125deg,color-mix(in srgb,var(--sa) 82%,#000),color-mix(in srgb,var(--sa) 70%,var(--sb)));
  box-shadow:0 14px 34px -14px color-mix(in srgb,var(--sa) 70%,transparent);transition:transform .2s,box-shadow .2s}
.sbn>a::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 92% 12%,rgba(255,255,255,.22) 0 7%,transparent 7.5%),radial-gradient(circle at 8% 18%,rgba(255,255,255,.12) 0 4%,transparent 4.5%),repeating-linear-gradient(135deg,rgba(255,255,255,.05) 0 2px,transparent 2px 16px);pointer-events:none}
.sbn>a:hover{transform:translateY(-2px);box-shadow:0 20px 40px -16px color-mix(in srgb,var(--sa) 80%,transparent)}
.sbn-tx{position:relative;display:flex;flex-direction:column;gap:9px;min-width:0}
.sbn-eye{align-self:flex-start;background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.35);border-radius:999px;padding:4px 12px;font-size:.82rem;font-weight:800;backdrop-filter:blur(4px)}
.sbn-h{font-size:clamp(1.15rem,2.4vw,1.6rem);line-height:1.5;font-weight:900;color:#fff}
.sbn-h em{font-style:normal;background:#fff;color:color-mix(in srgb,var(--sa) 85%,#000);padding:0 10px;border-radius:10px;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.sbn-p{font-size:.92rem;line-height:1.9;opacity:.94}
.sbn-chips{display:flex;flex-wrap:wrap;gap:6px}
.sbn-chips i{font-style:normal;font-size:.78rem;background:rgba(0,0,0,.18);border-radius:999px;padding:3px 10px;white-space:nowrap}
.sbn-cta{display:flex;align-items:center;flex-wrap:wrap;gap:10px 14px;margin-top:4px}
.sbn-btn{background:#fff;color:color-mix(in srgb,var(--sa) 85%,#000);font-weight:900;border-radius:14px;padding:10px 18px;box-shadow:0 6px 16px -6px rgba(0,0,0,.35)}
.sbn-brand{font-weight:800;font-size:.9rem;opacity:.9}
.sbn-art{position:relative;height:200px;width:min(100%,320px);justify-self:center}
.sbn .sbn-art img{height:auto!important;max-width:none!important;margin:0!important;display:block;position:absolute;aspect-ratio:1;object-fit:cover;border-radius:20px;border:4px solid rgba(255,255,255,.85);box-shadow:0 12px 24px -10px rgba(0,0,0,.45);background:#fff;width:120px;top:52px}
.sbn .sbn-art img:nth-child(1){left:calc(50% - 76px);top:6px;width:152px;z-index:2}
.sbn .sbn-art img:nth-child(2){left:0;transform:rotate(-8deg)}
.sbn .sbn-art img:nth-child(3){right:0;left:auto;transform:rotate(8deg)}
@media (max-width:640px){
  .sbn>a{grid-template-columns:1fr;padding:18px;gap:6px}
  .sbn-art{order:-1;height:122px;width:260px;margin-bottom:6px}
  .sbn .sbn-art img{width:86px;top:26px;border-width:3px;border-radius:16px}
  .sbn .sbn-art img:nth-child(1){width:106px;left:calc(50% - 53px);top:0}
  .sbn-p{font-size:.86rem}
}
@media (prefers-reduced-motion:reduce){.sbn>a{transition:none}}
.sbn>a,.sbn .sbn-h,.sbn .sbn-p,.sbn .sbn-eye,.sbn .sbn-chips i,.sbn .sbn-brand{color:#fff!important}
.sbn .sbn-btn,.sbn .sbn-h em{color:color-mix(in srgb,var(--sa) 85%,#000)!important}
.sbn>a:hover,.sbn>a:focus{text-decoration:none!important}