/* Hallmark · genre: utility file-manager · macrostructure: Workbench + Catalogue + Steps · design-system: design.md
 * pre-emit critique: P4 H4 E4 S4 R4 V4 */
/* همه‌ی رنگ‌ها، سایه‌ها، فونت‌ها، فاصله‌ها و زمان‌ها از tokens.css می‌آیند؛ تم روشن/تیره همان‌جا عوض می‌شود */

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; overflow-x: clip; }
body {
  background: var(--color-paper); color: var(--color-ink);
  font-family: var(--font-body); font-size: var(--text-md); line-height: 1.55;
  overflow: hidden; user-select: none; -webkit-font-smoothing: antialiased;
  transition: background var(--dur-med) var(--ease-out), color var(--dur-med) var(--ease-out);
}
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
svg { width: 20px; height: 20px; flex: none; }
h1, h2, h3 { margin: 0; font-family: var(--font-display); font-weight: var(--display-weight); font-style: normal; line-height: 1.3; overflow-wrap: anywhere; }
p { margin: 0; }
.hidden { display: none !important; }
.num { font-family: var(--font-num); font-variant-numeric: tabular-nums; direction: ltr; unicode-bidi: isolate; }
.gold { color: var(--color-star); }
.red { color: var(--color-danger); }
.muted { color: var(--color-ink-3); }
.small { font-size: var(--text-sm); }
.center { text-align: center; }
.label { font-size: var(--text-sm); color: var(--color-ink-2); }
.wordmark { font-family: var(--font-mark); font-weight: 700; letter-spacing: 0.08em; direction: ltr; margin: 0; }
.wordmark.small { font-size: 0.625rem; color: var(--color-ink-3); }
:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }

/* --- لایه‌های تمام‌صفحه --- */
.layer { position: fixed; inset: 0; z-index: 1000; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-md); background: var(--color-paper); transition: opacity var(--dur-med) var(--ease-out); }
.layer.fade { opacity: 0; pointer-events: none; }
.splash-logo { width: 88px; height: 88px; border-radius: 28px; object-fit: cover; box-shadow: var(--shadow-raised); animation: breathe 1.6s var(--ease-in-out) infinite alternate; }
#splash .wordmark { font-size: var(--text-lg); color: var(--color-ink-2); }
.error-box { max-width: 320px; margin: var(--space-md); text-align: center; display: flex; flex-direction: column; gap: var(--space-md); line-height: 1.8; }

/* --- اولین ورود --- */
.onboarding { justify-content: space-between; padding: calc(var(--space-xl) + env(safe-area-inset-top)) 0 calc(var(--space-lg) + env(safe-area-inset-bottom)); }
.ob-skip { position: absolute; top: calc(var(--space-md) + env(safe-area-inset-top)); inset-inline-end: var(--space-md); }
.ob-track { flex: 1; width: 100%; display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.ob-track::-webkit-scrollbar { display: none; }
.ob-slide { flex: 0 0 100%; scroll-snap-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-md); padding: 0 var(--space-xl); text-align: center; }
.ob-slide h2 { font-size: var(--text-2xl); max-width: 18ch; }
.ob-slide p { color: var(--color-ink-2); max-width: 32ch; line-height: 1.8; }
.ob-art { width: min(78vw, 300px); height: auto; margin-bottom: var(--space-md); filter: drop-shadow(0 10px 18px var(--color-accent-soft)); }
.ob-foot { width: 100%; padding: 0 var(--space-lg); display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); }
.ob-dots { display: flex; gap: var(--space-2xs); }
.ob-dots i { width: 8px; height: 8px; border-radius: var(--radius-pill); background: var(--color-paper-3); box-shadow: var(--shadow-inset); transition: width var(--dur-med) var(--ease-out), background var(--dur-med) var(--ease-out); }
.ob-dots i.on { width: 24px; background: var(--color-accent); box-shadow: none; }
.ob-foot .btn-accent { min-width: 9rem; }

/* تصویرهای SVG دست‌ساز (فقط از توکن‌ها) */
.a-card { fill: var(--color-paper-2); stroke: var(--color-rule); stroke-width: 1.5; }
.a-line { stroke: var(--color-ink-3); stroke-width: 4; stroke-linecap: round; fill: none; }
.a-ink { stroke: var(--color-ink-2); stroke-width: 4; stroke-linecap: round; }
.a-gold { fill: var(--color-star); }
.a-gold-soft { fill: var(--color-star-soft); }
.a-gold-stroke { fill: none; stroke: var(--color-accent); stroke-width: 3.5; stroke-linecap: round; }
.a-violet { fill: var(--color-accent-soft); stroke: var(--color-accent); stroke-width: 1.5; }
.a-arrow { fill: none; stroke: var(--color-accent); stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; }
.a-blur { fill: var(--k-photo-soft); }
.a-shield { fill: var(--color-success-soft); stroke: var(--color-success); stroke-width: 3; stroke-linejoin: round; }
.a-check-path { fill: none; stroke: var(--color-success); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 40; stroke-dashoffset: 40; }
.ob-slide.in .a-check-path { animation: draw var(--dur-long) var(--ease-out) 200ms forwards; }
.ob-slide.in .a-pop { animation: pop var(--dur-long) var(--ease-out) both; transform-box: fill-box; transform-origin: center; }
.a-float { animation: float 3.2s var(--ease-in-out) infinite alternate; transform-box: fill-box; }
.a-float-2 { animation: float 2.6s var(--ease-in-out) infinite alternate-reverse; transform-box: fill-box; }
.a-float-3 { animation: float 3.8s var(--ease-in-out) infinite alternate; transform-box: fill-box; }

/* --- چیدمان --- */
#app { position: fixed; inset: 0; }
.header { position: fixed; top: 0; left: 0; right: 0; z-index: 30; display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); padding: var(--space-sm) var(--space-md); background: var(--color-paper); }
.header::after { content: ""; position: absolute; inset-inline: 0; top: 100%; height: var(--space-md); background: linear-gradient(var(--color-paper), transparent); pointer-events: none; }
.hello { display: flex; align-items: center; gap: var(--space-2xs); min-width: 0; }
.hello-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.hello-text b { font-size: var(--text-md); font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hello-text .wordmark { align-self: flex-start; }
.status-pill { display: inline-flex; align-items: center; gap: var(--space-2xs); padding: var(--space-3xs) var(--space-xs); border-radius: var(--radius-pill); background: var(--color-paper-2); box-shadow: var(--shadow-soft); border: var(--card-border); font-size: var(--text-xs); color: var(--color-ink-2); max-width: 50vw; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--color-success); flex: none; }
.dot.red { background: var(--color-danger); }
.page { position: absolute; inset: 0; z-index: 10; padding: calc(64px + var(--space-sm) + env(safe-area-inset-top)) var(--space-md) calc(120px + env(safe-area-inset-bottom)); overflow-y: auto; overflow-x: clip; scrollbar-width: none; display: none; }
.page::-webkit-scrollbar { display: none; }
.page.active { display: block; animation: page-in var(--dur-med) var(--ease-out); }
.page > * + *, section > * + * { margin-top: var(--space-md); }

/* --- سطح‌ها: روشن = برجسته‌ی نرم (نئومورفیک)، تیره = کارت با سایه --- */
.card { position: relative; background: var(--color-paper-2); border: var(--card-border); border-radius: var(--radius-card); padding: var(--space-md); box-shadow: var(--shadow-raised); }
.reveal { animation: rise var(--dur-med) var(--ease-out) both; }
.reveal:nth-child(2) { animation-delay: 40ms; } .reveal:nth-child(3) { animation-delay: 80ms; } .reveal:nth-child(4) { animation-delay: 120ms; } .reveal:nth-child(5) { animation-delay: 160ms; }
.warn { background: var(--color-danger-soft); box-shadow: none; color: var(--color-ink); font-size: var(--text-sm); line-height: 1.8; }
.note { background: var(--color-accent-soft); box-shadow: none; font-size: var(--text-sm); }

/* آیکن رنگی هر نوع: نماد رنگی روی زمینه‌ی کم‌رنگ همان رنگ */
.kicon { --k: var(--color-accent); --k-soft: var(--color-accent-soft); width: 40px; height: 40px; flex: none; display: grid; place-items: center; border-radius: 13px; background: var(--k-soft); color: var(--k); }
.kicon svg { width: 21px; height: 21px; }
.kicon.sm { width: 34px; height: 34px; border-radius: 11px; }
.kicon.sm svg { width: 18px; height: 18px; }
.kicon.big { width: 60px; height: 60px; border-radius: 20px; }
.kicon.big svg { width: 30px; height: 30px; }

/* --- دکمه‌ها --- */
.btn-accent, .btn-light, .btn-soft, .text-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2xs); min-height: 48px; padding: 0 var(--space-lg); border-radius: var(--radius-pill); font-weight: 600; white-space: nowrap; transition: transform var(--dur-short) var(--ease-out), box-shadow var(--dur-short) var(--ease-out); }
.btn-accent { background: linear-gradient(135deg, var(--color-accent), var(--color-accent-2)); color: var(--color-accent-ink); box-shadow: 0 8px 20px var(--color-accent-soft); }
.btn-light { background: var(--hero-ink); color: var(--hero-to); }
.btn-soft { background: var(--color-paper-2); color: var(--color-ink); min-height: 44px; padding: 0 var(--space-md); font-size: var(--text-sm); box-shadow: var(--shadow-soft); border: var(--card-border); }
.text-btn { color: var(--color-accent); min-height: 40px; padding: 0 var(--space-sm); font-size: var(--text-sm); }
.btn-accent:active, .btn-light:active, .btn-soft:active, .text-btn:active, .icon-btn:active, .row:active, .chip:active, .p-card:active, .tile:active { transform: scale(0.97); }
.btn-soft:active, .icon-btn:active, .tile:active { box-shadow: var(--shadow-inset); }
.btn-accent:disabled { opacity: 0.5; }
.wide { width: 100%; }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--space-2xs); }
.btn-row > * { flex: 1 1 140px; min-width: 0; }  /* گوشی خیلی باریک: دکمه‌ها زیر هم */
.btn-row span { overflow: hidden; text-overflow: ellipsis; }
.icon-btn { width: 44px; height: 44px; border-radius: var(--radius-control); background: var(--color-paper-2); box-shadow: var(--shadow-soft); border: var(--card-border); display: grid; place-items: center; color: var(--color-ink-2); transition: transform var(--dur-short) var(--ease-out); }

/* --- خانه: کارت سرمه‌ای + حلقه‌ی پیشرفت --- */
.hero-card { position: relative; overflow: hidden; border-radius: var(--radius-card); padding: var(--space-lg) var(--space-md) var(--space-md); color: var(--hero-ink); background: radial-gradient(120% 90% at 100% 0%, var(--color-accent-soft), transparent 60%), linear-gradient(160deg, var(--hero-from), var(--hero-to)); box-shadow: var(--shadow-float); }
.hero-top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); }
.hero-balance { display: flex; flex-direction: column; gap: var(--space-3xs); min-width: 0; }
.hero-label { font-size: var(--text-sm); color: var(--hero-ink-2); }
.hero-sub { font-size: var(--text-xs); color: var(--hero-ink-2); }
.balance { display: flex; align-items: center; gap: var(--space-2xs); font-size: var(--text-balance); font-weight: 700; line-height: 1.1; color: var(--hero-ink); }
.balance .star { width: 0.6em; height: 0.6em; color: var(--color-star); }
.ring { width: 96px; height: 96px; flex: none; transform: rotate(-90deg); }
.ring-a { stop-color: var(--color-accent); }
.ring-b { stop-color: var(--color-accent-2); }
.ring-track { fill: none; stroke: var(--hero-track); stroke-width: 9; }
.ring-value { fill: none; stroke: url(#ring-grad); stroke-width: 9; stroke-linecap: round; stroke-dasharray: 251.3; stroke-dashoffset: 251.3; transition: stroke-dashoffset 900ms var(--ease-out); }
.ring-text { fill: var(--hero-ink); font: 700 18px var(--font-num); transform: rotate(90deg); transform-origin: 50px 50px; }
.hero-stats { margin-top: var(--space-md); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2xs); }
.hero-stats > div { display: flex; flex-direction: column; gap: 2px; padding: var(--space-xs) var(--space-xs); border-radius: var(--radius-control); background: var(--hero-track); min-width: 0; }
.hero-stats span { font-size: var(--text-xs); color: var(--hero-ink-2); line-height: 1.35; overflow-wrap: anywhere; }
.hero-stats b { display: flex; align-items: center; gap: 3px; font-size: var(--text-lg); font-weight: 700; }
.hero-stats .star { width: 15px; height: 15px; color: var(--color-star); }
.hero-stats small { font-size: 0.6875rem; color: var(--hero-ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#hero-wallet { cursor: pointer; transition: transform var(--dur-short) var(--ease-out); }
#hero-wallet:active { transform: scale(0.98); }
.hero-stats.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.hero-stats.two small { white-space: normal; line-height: 1.4; }

/* --- اعتماد: «پولت دست خودته» --- */
.trust-card { display: flex; flex-direction: column; gap: var(--space-sm); }
.trust-top { display: flex; align-items: flex-start; gap: var(--space-sm); }
.trust-top > div { display: flex; flex-direction: column; gap: var(--space-3xs); min-width: 0; }
.trust-top b { font-size: var(--text-md); }
.trust-top small { font-size: var(--text-sm); color: var(--color-ink-2); line-height: 1.75; }
.steps { margin: 0 0 var(--space-sm); padding-inline-start: var(--space-lg); display: flex; flex-direction: column; gap: var(--space-xs); line-height: 1.8; font-size: var(--text-md); }
.steps li::marker { color: var(--color-accent); font-weight: 700; }
#verify-open { margin-top: var(--space-md); }
.faq { margin-bottom: var(--space-sm); }
.faq details { padding: var(--space-xs) var(--space-md); }
.faq details + details { border-top: 1px solid var(--color-rule); }
.faq summary { cursor: pointer; font-weight: 600; list-style: none; display: flex; justify-content: space-between; gap: var(--space-sm); align-items: center; min-height: 36px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; background: var(--color-accent-soft); color: var(--color-accent); font-weight: 700; transition: transform var(--dur-short) var(--ease-out); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { margin-top: var(--space-2xs); font-size: var(--text-sm); color: var(--color-ink-2); line-height: 1.85; animation: fade-in var(--dur-med) var(--ease-out); }

/* --- ویترین‌ها: کارت‌های خانه --- */
.sc-cards { display: flex; gap: var(--space-sm); overflow-x: auto; scrollbar-width: none; margin-inline: calc(var(--space-md) * -1); padding: var(--space-2xs) var(--space-md) var(--space-md); }
.sc-cards::-webkit-scrollbar { display: none; }
.sc-card { --k: var(--color-success); --k-soft: var(--color-success-soft); flex: none; width: 168px; display: flex; flex-direction: column; gap: var(--space-2xs); padding: var(--space-sm); border-radius: var(--radius-tile); background: var(--color-paper-2); box-shadow: var(--shadow-raised); border: var(--card-border); text-align: start; position: relative; overflow: hidden; animation: rise var(--dur-med) var(--ease-out) both; transition: transform var(--dur-short) var(--ease-out); }
.sc-card::before { content: ""; position: absolute; inset: 0 0 auto; height: 4px; background: var(--k); }
.sc-card.once { --k: var(--color-star); --k-soft: var(--color-star-soft); }
.sc-card.monthly { --k: var(--color-accent); --k-soft: var(--color-accent-soft); }
.sc-card:active { transform: scale(0.97); }
.sc-card b { font-size: var(--text-md); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sc-card small { font-size: var(--text-xs); color: var(--color-ink-3); }
.sc-card .bio-btn { margin-top: auto; display: inline-flex; align-items: center; justify-content: center; gap: 4px; min-height: 34px; border-radius: var(--radius-pill); background: var(--k-soft); color: var(--k); font-size: var(--text-xs); font-weight: 700; }
.sc-card .bio-btn svg { width: 15px; height: 15px; }
.sc-card.new { --k: var(--color-accent); align-items: center; justify-content: center; text-align: center; color: var(--color-accent); background: transparent; box-shadow: var(--shadow-inset); border: 2px dashed var(--color-accent-soft); }
.sc-card.new::before { display: none; }
.sc-card.new .kicon { margin-bottom: var(--space-3xs); }
.sc-badge { --k: var(--color-success); --k-soft: var(--color-success-soft); align-self: flex-start; display: inline-flex; align-items: center; gap: 3px; padding: 2px var(--space-2xs); border-radius: var(--radius-pill); background: var(--k-soft); color: var(--k); font-size: 0.6875rem; font-weight: 700; white-space: nowrap; }
.sc-badge.once { --k: var(--color-star); --k-soft: var(--color-star-soft); }
.sc-badge.monthly { --k: var(--color-accent); --k-soft: var(--color-accent-soft); }

/* --- برگه‌ی ساخت ویترین: سه قدم --- */
/* ساخت ویترین: یک سؤال در هر صفحه */
.wiz-head { display: flex; flex-direction: column; align-items: center; gap: var(--space-2xs); margin-bottom: var(--space-md); }
.wiz-head .sheet-title { margin: 0; }
.wiz-dots { display: flex; gap: 6px; }
.wiz-dots i { width: 8px; height: 8px; border-radius: var(--radius-pill); background: var(--color-paper-3); box-shadow: var(--shadow-inset); transition: width var(--dur-med) var(--ease-out), background var(--dur-med) var(--ease-out); }
.wiz-dots i.on { width: 22px; background: var(--color-accent); box-shadow: none; }
.sce-page { display: none; flex-direction: column; gap: var(--space-sm); animation: fade-in var(--dur-med) var(--ease-out); }
.sce-page.on { display: flex; }
.wiz-q { font-family: var(--font-display); font-weight: var(--display-weight); font-size: var(--text-lg); text-align: center; }
.wiz-sub { font-size: var(--text-sm); font-weight: 600; color: var(--color-ink-2); margin-top: var(--space-2xs); }
.big-input { font-size: var(--text-lg); padding: var(--space-sm); text-align: center; }
.access-list { display: flex; flex-direction: column; gap: var(--space-2xs); }
.access-opt { display: flex; align-items: center; gap: var(--space-sm); padding: var(--space-sm); border-radius: var(--radius-tile); background: var(--color-paper-2); box-shadow: var(--shadow-soft); border: 2px solid transparent; text-align: start; transition: border-color var(--dur-short) var(--ease-out), transform var(--dur-short) var(--ease-out); }
.access-opt:active { transform: scale(0.98); }
.ao-text { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.ao-text b { font-size: var(--text-md); }
.ao-text small { font-size: var(--text-xs); color: var(--color-ink-3); }
.ao-check { width: 24px; height: 24px; flex: none; display: grid; place-items: center; border-radius: 50%; box-shadow: var(--shadow-inset); color: transparent; }
.ao-check svg { width: 15px; height: 15px; }
.access-opt.active { border-color: var(--color-accent); background: var(--color-accent-soft); box-shadow: none; }
.access-opt.active .ao-check { background: var(--color-accent); color: var(--color-accent-ink); box-shadow: none; }
.bio-card { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-xs) var(--space-sm); align-items: center; padding: var(--space-md); border-radius: var(--radius-card); background: var(--color-accent-soft); }
.bio-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.bio-text code { direction: ltr; font-size: var(--text-xs); color: var(--color-ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: start; }
.bio-copy { grid-column: 1 / -1; min-height: 44px; }
.done-page { align-items: center; text-align: center; padding: var(--space-md) 0; }
.done-icon { width: 72px; height: 72px; display: grid; place-items: center; border-radius: 50%; background: var(--color-success); color: var(--color-paper-2); animation: pop var(--dur-long) var(--ease-out) both; }
.done-icon svg { width: 38px; height: 38px; }
.done-page h3 { font-size: var(--text-xl); }
.done-link { direction: ltr; font-size: var(--text-sm); padding: var(--space-xs) var(--space-sm); border-radius: var(--radius-control); background: var(--color-paper-3); box-shadow: var(--shadow-inset); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; user-select: all; }
.date-row { display: flex; flex-direction: column; gap: var(--space-2xs); padding: var(--space-sm) var(--space-md); border-radius: var(--radius-control); background: var(--color-paper-2); box-shadow: var(--shadow-soft); border: var(--card-border); }
.date-row > span { display: flex; flex-direction: column; gap: 2px; }
.date-row small { font-size: var(--text-xs); color: var(--color-ink-3); line-height: 1.6; }
.date-field { display: flex; align-items: center; gap: var(--space-2xs); }
.date-field input { flex: 1; min-width: 0; padding: var(--space-xs); border-radius: var(--radius-control); border: 0; background: var(--color-paper-3); box-shadow: var(--shadow-inset); color: var(--color-ink); font: inherit; }
.ed-date { margin-top: var(--space-lg); }
/* «رایگان برای اعضا | قیمت جدا»: دو گزینه‌ی واضح زیر هر محتوای انتخاب‌شده */
.pick-item + .pick-item { border-top: 1px solid var(--color-rule); }
.pick-item .row { border: 0; }
.seg { display: flex; gap: 4px; margin: 0 var(--space-md) var(--space-sm); padding: 3px; border-radius: var(--radius-pill); background: var(--color-paper-3); box-shadow: var(--shadow-inset); }
.seg button { flex: 1; min-height: 34px; border-radius: var(--radius-pill); font-size: var(--text-xs); font-weight: 600; color: var(--color-ink-3); white-space: nowrap; transition: background var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out); }
.seg button.active[data-v="1"] { background: var(--color-success); color: var(--color-paper-2); }
.seg button.active[data-v="0"] { background: var(--color-star); color: var(--hero-to); }
.sc-card.archived { opacity: 0.6; }
#sce-price-box { margin-top: var(--space-sm); display: flex; flex-direction: column; gap: var(--space-2xs); }
#sce-chips .chip { font-family: var(--font-num); }
#sce-chips .chip.active { background: var(--color-star); color: var(--hero-to); }
.pick-list .row { min-height: 60px; cursor: pointer; }
.pick-list .thumb { width: 42px; height: 42px; flex: none; border-radius: 12px; }
.pick-list .thumb > svg { width: 20px; height: 20px; }
.pick-list .row > span.pick { width: 24px; height: 24px; flex: none; display: grid; place-items: center; border-radius: 8px; box-shadow: var(--shadow-inset); background: var(--color-paper-3); color: transparent; transition: background var(--dur-short) var(--ease-out); }
.pick svg { width: 16px; height: 16px; }
.pick-list .row.on > span.pick { background: var(--color-accent); color: var(--color-accent-ink); box-shadow: none; }
.mf-toggle { flex: none; padding: 3px var(--space-2xs); border-radius: var(--radius-pill); font-size: 0.6875rem; font-weight: 700; background: var(--color-success-soft); color: var(--color-success); white-space: nowrap; }
.mf-toggle.paid { background: var(--color-star-soft); color: var(--color-star); }
.sce-actions { margin-top: var(--space-lg); display: flex; flex-direction: column; gap: var(--space-2xs); }
.ed-hint { margin-top: var(--space-2xs); line-height: 1.7; }
#ed-showcases .chip.active { background: var(--color-accent); color: var(--color-accent-ink); }

/* --- صفحه‌ی ویترین برای خریدار (مثل صفحه‌ی سازنده‌ها) --- */
.profile-card { padding: 0; overflow: hidden; }
.cover { height: 104px; background: radial-gradient(120% 140% at 0% 0%, var(--color-accent-2), transparent 60%), linear-gradient(135deg, var(--hero-from), var(--color-accent)); background-size: cover; background-position: center; }
.profile-body { padding: 0 var(--space-md) var(--space-md); display: flex; flex-direction: column; align-items: flex-start; text-align: start; gap: var(--space-3xs); }
.avatar.xl { width: 84px; height: 84px; border-radius: 50%; font-size: var(--text-2xl); margin-top: -42px; border: 4px solid var(--color-paper-2); box-shadow: var(--shadow-soft); }
.profile-body .sc-badge { align-self: flex-start; margin-top: var(--space-2xs); }
.profile-body h1 { font-size: var(--text-xl); margin-top: var(--space-3xs); }
.store-desc { color: var(--color-ink-2); font-size: var(--text-sm); line-height: 1.8; max-width: 42ch; white-space: pre-line; margin-top: var(--space-3xs); }
.profile-stats { display: flex; flex-wrap: wrap; gap: var(--space-md); margin: var(--space-sm) 0 var(--space-2xs); }
.profile-stats > div { display: flex; align-items: baseline; gap: 4px; }
.profile-stats b { font-size: var(--text-lg); font-weight: 700; }
.profile-stats span { font-size: var(--text-xs); color: var(--color-ink-3); }
.join-card { align-self: stretch; margin-top: var(--space-xs); padding: var(--space-sm); border-radius: var(--radius-control); background: var(--color-paper-3); box-shadow: var(--shadow-inset); display: flex; flex-direction: column; gap: var(--space-2xs); }
.join-label { font-size: var(--text-xs); font-weight: 700; color: var(--color-ink-3); letter-spacing: 0.02em; }
.of-tabs .tab { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.of-tabs .tab svg { width: 17px; height: 17px; }
/* پست‌ها: کارت‌های بزرگ یک‌ستونه */
.products.feed { display: flex; flex-direction: column; gap: var(--space-md); }
.post { display: flex; flex-direction: column; border-radius: var(--radius-card); background: var(--color-paper-2); box-shadow: var(--shadow-raised); border: var(--card-border); overflow: hidden; text-align: start; animation: rise var(--dur-med) var(--ease-out) both; }
.post-head { display: flex; align-items: center; gap: var(--space-2xs); padding: var(--space-sm) var(--space-md) var(--space-2xs); }
.avatar.xs { width: 32px; height: 32px; border-radius: 50%; font-size: var(--text-sm); }
.post-head b { flex: 1; font-size: var(--text-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.post-head small { font-size: var(--text-xs); color: var(--color-ink-3); }
.post-text { padding: 0 var(--space-md) var(--space-sm); display: flex; flex-direction: column; gap: 2px; }
.post-text b { font-size: var(--text-md); }
.post-text p { font-size: var(--text-sm); color: var(--color-ink-2); line-height: 1.7; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.post .thumb { width: 100%; aspect-ratio: 16 / 11; }
.post .thumb > svg { width: 44px; height: 44px; }
.post-cta { position: absolute; inset: auto 0 var(--space-md); margin: 0 auto; width: max-content; max-width: 90%; display: inline-flex; align-items: center; gap: 6px; padding: var(--space-2xs) var(--space-md); border-radius: var(--radius-pill); background: var(--color-paper-2); color: var(--color-ink); font-size: var(--text-sm); font-weight: 700; box-shadow: var(--shadow-float); }
.post-cta svg { width: 16px; height: 16px; }
.post-cta.lock { background: var(--color-ink); color: var(--color-paper-2); }
.post-cta.buy { background: var(--color-star); color: var(--hero-to); }
.post-cta.own { background: var(--color-success); color: var(--color-paper-2); }
.post-foot { display: flex; align-items: center; gap: var(--space-sm); padding: var(--space-xs) var(--space-md); font-size: var(--text-xs); color: var(--color-ink-3); }
.post-foot span { display: inline-flex; align-items: center; gap: 4px; }
.post-foot svg { width: 14px; height: 14px; }
.post:active { transform: scale(0.99); }
.join-btn { min-height: 54px; font-size: var(--text-md); margin-top: var(--space-2xs); }
.member-box { align-self: stretch; display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3xs); margin-top: var(--space-2xs); padding: var(--space-sm); border-radius: var(--radius-control); background: var(--color-success-soft); }
.member-box .tag { display: inline-flex; align-items: center; gap: 4px; font-size: var(--text-sm); padding: 4px var(--space-sm); }
.member-box .tag svg { width: 15px; height: 15px; }
.others .chip { display: inline-flex; align-items: center; gap: 6px; }
.lock-overlay { position: absolute; inset: 0; display: grid; place-items: center; background: var(--color-scrim); color: var(--hero-ink); pointer-events: none; }
.lock-overlay svg { width: 28px; height: 28px; }
.p-card .thumb { position: relative; }
.member-chip { position: absolute; top: var(--space-2xs); inset-inline-start: var(--space-2xs); padding: 2px var(--space-2xs); border-radius: var(--radius-pill); background: var(--color-success); color: var(--color-paper-2); font-size: 0.6875rem; font-weight: 700; }
.member-chip.lock-chip { background: var(--color-ink); color: var(--color-paper-2); }
.rating-num { display: inline-flex; align-items: center; gap: 3px; }
.rating-num .star, .card-meta .star { width: 14px; height: 14px; color: var(--color-star); }
#top-list .thumb { width: 40px; height: 40px; flex: none; border-radius: 12px; }
#top-list .thumb > svg { width: 20px; height: 20px; }
.top-rank { width: 22px; text-align: center; color: var(--color-star); font-size: var(--text-lg); }
.rate-box { margin-bottom: var(--space-md); padding: var(--space-sm) var(--space-md); border-radius: var(--radius-card); background: var(--color-star-soft); display: flex; flex-direction: column; align-items: center; gap: var(--space-2xs); }
.rate-box b { font-size: var(--text-sm); }
.stars { display: flex; gap: var(--space-2xs); direction: ltr; }
.stars button { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; color: var(--color-ink-3); transition: transform var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out); }
.stars button svg { width: 30px; height: 30px; }
.stars button.on { color: var(--color-star); }
.stars button:active { transform: scale(1.2); }
.sce-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2xs); margin-bottom: var(--space-2xs); }
.sce-stats > div { padding: var(--space-xs) var(--space-3xs); border-radius: var(--radius-control); background: var(--color-paper-2); box-shadow: var(--shadow-soft); border: var(--card-border); display: flex; flex-direction: column; align-items: center; gap: 2px; }
.sce-stats b { font-size: var(--text-lg); font-weight: 700; }
.sce-stats span { font-size: var(--text-xs); color: var(--color-ink-3); text-align: center; }
.made-with { margin: var(--space-xl) auto 0; display: flex; align-items: center; justify-content: center; gap: 6px; padding: var(--space-2xs) var(--space-md); border-radius: var(--radius-pill); color: var(--color-ink-3); font-size: var(--text-xs); }
.made-with svg { width: 15px; height: 15px; color: var(--color-accent); }

/* --- کیف پول --- */
.note-card { display: flex; align-items: center; gap: var(--space-sm); font-size: var(--text-sm); line-height: 1.8; color: var(--color-ink-2); }
.section-hint { margin: calc(var(--space-xs) * -1) var(--space-3xs) 0 !important; line-height: 1.7; }
.premium-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-xs); }
.premium-opt { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: var(--space-sm) var(--space-3xs); border-radius: var(--radius-tile); background: var(--color-paper-2); box-shadow: var(--shadow-raised); border: var(--card-border); transition: transform var(--dur-short) var(--ease-out); }
.premium-opt b { font-size: var(--text-lg); font-weight: 700; }
.premium-opt .num { display: inline-flex; align-items: center; gap: 2px; font-size: var(--text-sm); color: var(--color-star); font-weight: 700; }
.premium-opt .num svg { width: 13px; height: 13px; }
.premium-opt small { font-size: 0.6875rem; color: var(--color-ink-3); text-align: center; line-height: 1.4; }
.premium-opt:active { transform: scale(0.97); box-shadow: var(--shadow-inset); }
.premium-opt:disabled { opacity: 0.55; cursor: default; }
.premium-opt.best { background: linear-gradient(160deg, var(--hero-from), var(--hero-to)); color: var(--hero-ink); }
.premium-opt.best small { color: var(--hero-ink-2); }
.withdraw-card { font-size: var(--text-sm); line-height: 1.9; color: var(--color-ink-2); }
.withdraw-card ol { margin: var(--space-2xs) 0; padding-inline-start: var(--space-lg); }
.withdraw-card .bar-track { height: 8px; margin: var(--space-2xs) 0; border-radius: var(--radius-pill); background: var(--color-paper-3); box-shadow: var(--shadow-inset); overflow: hidden; }
.withdraw-card .bar-track i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--color-accent), var(--color-accent-2)); transform-origin: left; animation: grow-x var(--dur-long) var(--ease-out) both; }
[dir="rtl"] .withdraw-card .bar-track i { transform-origin: right; }
.sale-amount { flex: none; font-weight: 700; color: var(--color-success); }
.sale-amount.refunded { color: var(--color-ink-3); text-decoration: line-through; font-weight: 500; }
.tag.wait { background: var(--color-star-soft); color: var(--color-star); }
.tag.gone { background: var(--color-paper-3); color: var(--color-ink-3); }

.none-hero { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-sm); padding: var(--space-xl) var(--space-md) var(--space-md); }
.none-hero h2 { font-size: var(--text-xl); }
.none-hero p { color: var(--hero-ink-2); line-height: 1.8; max-width: 30ch; }
.none-hero .kicon.big { background: var(--hero-track); }

.section-head { display: flex; align-items: center; justify-content: space-between; }
.section-title { margin: var(--space-xs) var(--space-3xs) var(--space-xs) !important; font-size: var(--text-md); font-family: var(--font-display); font-weight: var(--display-weight); color: var(--color-ink); }
.section-head .section-title { margin: 0 !important; }

/* کاشی‌های نوع فایل */
.tiles { display: flex; gap: var(--space-sm); overflow-x: auto; scrollbar-width: none; margin-inline: calc(var(--space-md) * -1); padding: var(--space-2xs) var(--space-md) var(--space-md); }
.tiles::-webkit-scrollbar { display: none; }
.tile { flex: none; width: 82px; display: flex; flex-direction: column; align-items: center; gap: var(--space-2xs); padding: var(--space-sm) var(--space-3xs) var(--space-xs); border-radius: var(--radius-tile); background: var(--color-paper-2); box-shadow: var(--shadow-raised); border: var(--card-border); min-width: 0; transition: transform var(--dur-short) var(--ease-out), box-shadow var(--dur-short) var(--ease-out); animation: rise var(--dur-med) var(--ease-out) both; }
.tile b { font-size: var(--text-xs); font-weight: 600; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tile small { font-size: 0.6875rem; color: var(--color-ink-3); margin-top: -6px; }
#kinds-box .section-title { margin-bottom: 0 !important; }

.chart-card { display: flex; flex-direction: column; gap: var(--space-xs); }
#chart { width: 100%; height: 130px; display: block; }
.bar { fill: url(#bar-grad); transform-box: fill-box; transform-origin: bottom; animation: grow var(--dur-long) var(--ease-out) both; }
.bar.zero { fill: var(--color-paper-3); }
.bar-label { fill: var(--color-ink-2); font-family: var(--font-num); font-size: 10px; }
.chart-labels { display: flex; font-size: var(--text-xs); color: var(--color-ink-3); direction: ltr; }
.chart-labels span { flex: 1; min-width: 0; text-align: center; white-space: nowrap; overflow: hidden; }
.share-card { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-sm); align-items: center; }
.share-card .btn-row { grid-column: 1 / -1; }
.share-text { display: flex; flex-direction: column; gap: var(--space-3xs); }
.share-text small { color: var(--color-ink-3); font-size: var(--text-sm); line-height: 1.7; }

/* --- محصولات --- */
.page-head { display: flex; justify-content: space-between; align-items: center; min-height: 44px; }
.page-title { font-size: var(--text-xl); }
.search { display: flex; align-items: center; gap: var(--space-2xs); padding: 0 var(--space-sm); height: 46px; border-radius: var(--radius-control); background: var(--color-paper-3); box-shadow: var(--shadow-inset); color: var(--color-ink-3); }
.search input { flex: 1; min-width: 0; background: none; border: 0; outline: none; color: var(--color-ink); font: inherit; }
.search input::placeholder { color: var(--color-ink-3); }
.tabs { display: flex; gap: var(--space-3xs); padding: var(--space-3xs); border-radius: var(--radius-control); background: var(--color-paper-3); box-shadow: var(--shadow-inset); }
.tab { flex: 1; min-height: 38px; border-radius: 12px; font-size: var(--text-sm); color: var(--color-ink-2); transition: background var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out), box-shadow var(--dur-short) var(--ease-out); white-space: nowrap; }
.tab b { font-family: var(--font-num); font-weight: 500; color: var(--color-ink-3); }
.tab.active { background: var(--color-paper-2); color: var(--color-accent); font-weight: 600; box-shadow: var(--shadow-soft); }
.tab.active b { color: var(--color-accent); }
.space-tab { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.space-tab svg { width: 17px; height: 17px; }
.link-head { display: flex; align-items: center; gap: var(--space-sm); margin-bottom: var(--space-sm); }
.ls-thumb { width: 64px; height: 64px; flex: none; border-radius: var(--radius-tile); }
.ls-thumb > svg { width: 28px; height: 28px; }
.ls-info { min-width: 0; }
.ls-info h2 { font-size: var(--text-lg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ls-open { margin-top: var(--space-sm); }
.danger-text { color: var(--color-danger); margin-top: var(--space-2xs); }
.filter-chip { display: inline-flex; align-items: center; gap: var(--space-2xs); min-height: 34px; padding: 0 var(--space-xs) 0 var(--space-sm); border-radius: var(--radius-pill); background: var(--color-accent-soft); color: var(--color-accent); font-size: var(--text-sm); font-weight: 600; }
.filter-chip svg { width: 16px; height: 16px; }

.products.grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-sm); }
.products.list { display: flex; flex-direction: column; gap: var(--space-xs); }
.p-card { position: relative; overflow: hidden; border-radius: var(--radius-tile); background: var(--color-paper-2); box-shadow: var(--shadow-raised); border: var(--card-border); text-align: start; transition: transform var(--dur-short) var(--ease-out); animation: rise var(--dur-med) var(--ease-out) both; }
.grid .p-card { display: flex; flex-direction: column; }
.grid .thumb { width: 100%; aspect-ratio: 1; }
.list .p-card { display: flex; align-items: center; gap: var(--space-sm); padding: var(--space-xs); }
.list .thumb { width: 52px; height: 52px; border-radius: var(--radius-thumb); flex: none; }
.thumb { --k: var(--color-ink-3); --k-soft: var(--color-paper-3); position: relative; display: grid; place-items: center; overflow: hidden; background: var(--k-soft); color: var(--k); }
.thumb img { width: 100%; height: 100%; object-fit: cover; animation: fade-in var(--dur-med) var(--ease-out); }
.thumb > svg { width: 38%; height: 38%; }
.list .thumb > svg { width: 24px; height: 24px; }
.thumb .txt { padding: var(--space-sm); font-size: var(--text-xs); line-height: 1.7; color: var(--color-ink-2); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; }
.list .thumb .txt { display: none; }
.grid .thumb .txt + svg { display: none; }
.card-info { padding: var(--space-2xs) var(--space-sm) var(--space-sm); min-width: 0; }
.list .card-info { padding: 0; flex: 1; }
.card-name { font-size: var(--text-sm); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card-meta { margin-top: var(--space-3xs); display: flex; align-items: center; gap: var(--space-xs); font-size: var(--text-xs); color: var(--color-ink-3); white-space: nowrap; overflow: hidden; }
.card-meta span { display: inline-flex; align-items: center; gap: 3px; }
.card-meta svg { width: 13px; height: 13px; }
.card-meta .link-only { padding: 0 var(--space-2xs); border-radius: var(--radius-pill); background: var(--color-accent-soft); color: var(--color-accent); font-weight: 600; }
.price-chip { position: absolute; top: var(--space-2xs); inset-inline-start: var(--space-2xs); padding: 2px var(--space-2xs); border-radius: var(--radius-pill); background: var(--color-paper-2); color: var(--color-star); font-family: var(--font-num); font-weight: 700; font-size: var(--text-xs); direction: ltr; box-shadow: var(--shadow-soft); }
.price-chip.free { color: var(--color-success); }
.list .price-chip { position: static; flex: none; background: var(--color-star-soft); box-shadow: none; }
.list .price-chip.free { background: var(--color-success-soft); }
.sens-chip { position: absolute; top: var(--space-2xs); inset-inline-end: var(--space-2xs); width: 24px; height: 24px; display: grid; place-items: center; border-radius: var(--radius-pill); background: var(--color-paper-2); font-size: var(--text-xs); }
.list .sens-chip { position: static; background: none; }
.empty { margin-top: var(--space-2xl); text-align: center; color: var(--color-ink-2); line-height: 1.9; display: flex; flex-direction: column; align-items: center; gap: var(--space-md); }
.skeleton { background: linear-gradient(90deg, var(--color-paper-3), var(--color-paper-2), var(--color-paper-3)); background-size: 200% 100%; animation: shimmer 1.2s linear infinite; }

/* --- ویترین --- */
.store-head { display: flex; align-items: center; gap: var(--space-sm); }
.avatar { width: 56px; height: 56px; flex: none; border-radius: 18px; overflow: hidden; display: grid; place-items: center; background: linear-gradient(135deg, var(--color-accent), var(--color-accent-2)); color: var(--color-accent-ink); font-family: var(--font-display); font-weight: 700; font-size: var(--text-xl); }
.avatar.sm { width: 38px; height: 38px; border-radius: 50%; font-size: var(--text-md); box-shadow: var(--shadow-soft); }
.avatar.lg { width: 84px; height: 84px; border-radius: 50%; font-size: var(--text-2xl); box-shadow: var(--shadow-raised); }
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.store-info { min-width: 0; }
.store-info h1 { font-size: var(--text-lg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.store-info p { margin-top: var(--space-3xs); font-size: var(--text-sm); }
.chips { display: flex; flex-wrap: wrap; gap: var(--space-2xs); }
.chips.scroll-x { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: calc(var(--space-md) * -1); padding: var(--space-3xs) var(--space-md) var(--space-xs); }
.chips.scroll-x::-webkit-scrollbar { display: none; }
.chip { flex: none; min-height: 38px; padding: 0 var(--space-sm); border-radius: var(--radius-pill); background: var(--color-paper-2); box-shadow: var(--shadow-soft); border: var(--card-border); font-size: var(--text-sm); color: var(--color-ink-2); white-space: nowrap; transition: transform var(--dur-short) var(--ease-out), background var(--dur-short) var(--ease-out); }
.chip.active { background: var(--color-accent); color: var(--color-accent-ink); box-shadow: 0 6px 14px var(--color-accent-soft); }
#ed-chips .chip { font-family: var(--font-num); }
#ed-chips .chip.active { background: var(--color-star); color: var(--hero-to); }

/* --- پروفایل و لیست‌ها --- */
.profile-head { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-2xs); padding: var(--space-lg) var(--space-md); }
.profile-head h1 { font-size: var(--text-xl); margin-top: var(--space-2xs); }
.profile-head p { font-size: var(--text-sm); }
.list { padding: var(--space-3xs) 0; overflow: hidden; }
.row { width: 100%; min-height: 56px; display: flex; align-items: center; gap: var(--space-sm); padding: var(--space-2xs) var(--space-md); text-align: start; transition: background var(--dur-short) var(--ease-out); }
.row + .row, .row + .withdraw, .withdraw + .row { border-top: 1px solid var(--color-rule); }
.row > span:not(.kicon) { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row-value { font-style: normal; font-size: var(--text-sm); color: var(--color-ink-3); white-space: nowrap; max-width: 42%; overflow: hidden; text-overflow: ellipsis; }
#sce-manage .row > span:not(.kicon) { white-space: normal; line-height: 1.4; }
.row .chev { width: 16px; height: 16px; color: var(--color-ink-3); }
[dir="rtl"] .row .chev, [dir="rtl"] .p-card .chev { transform: scaleX(-1); }
.p-card .chev { width: 16px; height: 16px; flex: none; color: var(--color-ink-3); }
.grid .p-card .chev { display: none; }
.row.danger { color: var(--color-danger); }
.row.selected { color: var(--color-accent); font-weight: 600; }
.row.selected > svg:last-child { color: var(--color-accent); }
.owned-badge { position: absolute; top: var(--space-2xs); inset-inline-start: var(--space-2xs); display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--color-success); color: var(--color-paper-2); }
.p-card.bought .price-chip { display: none; }
.owned-badge svg { width: 14px; height: 14px; }
.purchase-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.purchase-meta b { font-size: var(--text-md); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.purchase-meta small { color: var(--color-ink-3); font-size: var(--text-xs); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.purchase-meta .tag { align-self: flex-start; margin-top: 2px; }
.tag { flex: none; padding: 2px var(--space-2xs); border-radius: var(--radius-pill); font-size: 0.6875rem; font-weight: 600; background: var(--color-success-soft); color: var(--color-success); }
.tag.new { background: var(--color-accent-soft); color: var(--color-accent); }
.withdraw { padding: var(--space-sm) var(--space-md) var(--space-md); font-size: var(--text-sm); line-height: 1.9; color: var(--color-ink-2); animation: fade-in var(--dur-med) var(--ease-out); }
.withdraw .bar-track { height: 8px; margin: var(--space-2xs) 0; border-radius: var(--radius-pill); background: var(--color-paper-3); box-shadow: var(--shadow-inset); overflow: hidden; }
.withdraw .bar-track i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--color-accent), var(--color-accent-2)); transform-origin: left; animation: grow-x var(--dur-long) var(--ease-out) both; }
[dir="rtl"] .withdraw .bar-track i { transform-origin: right; }
.withdraw ol { margin: var(--space-2xs) 0 0; padding-inline-start: var(--space-lg); }
.rules p { white-space: pre-line; }

/* --- برگه‌ی پایین --- */
.overlay { position: fixed; inset: 0; z-index: 150; background: var(--color-scrim); opacity: 0; pointer-events: none; transition: opacity var(--dur-med) var(--ease-out); }
.overlay.open { opacity: 1; pointer-events: auto; }
.sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 200; max-height: 92dvh; overflow-y: auto; scrollbar-width: none; padding: var(--space-2xs) var(--space-md) calc(var(--space-lg) + env(safe-area-inset-bottom)); border-radius: 28px 28px 0 0; background: var(--color-paper); transform: translateY(105%); transition: transform var(--dur-med) var(--ease-out); user-select: text; }
.sheet::-webkit-scrollbar { display: none; }
.sheet.open { transform: translateY(0); }
.sheet-handle { width: 40px; height: 4px; margin: 0 auto var(--space-md); border-radius: var(--radius-pill); background: var(--color-ink-3); opacity: 0.4; }
.sheet-title { font-size: var(--text-lg); margin-bottom: var(--space-md); text-align: center; }
.small-sheet .row { min-height: 52px; }
.ed-top { display: flex; gap: var(--space-sm); align-items: center; }
.ed-thumb { width: 84px; height: 84px; flex: none; border-radius: var(--radius-tile); box-shadow: var(--shadow-soft); }
.ed-head { min-width: 0; display: flex; flex-direction: column; gap: var(--space-3xs); align-items: flex-start; }
.ed-head h2 { font-size: var(--text-lg); max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.badge { display: inline-flex; padding: 2px var(--space-2xs); border-radius: var(--radius-pill); font-size: var(--text-xs); font-weight: 600; background: var(--color-success-soft); color: var(--color-success); }
.badge.draft { background: var(--color-star-soft); color: var(--color-star); }
.badge.archived { background: var(--color-paper-3); color: var(--color-ink-3); }
.ed-stats { display: flex; gap: var(--space-2xs); margin: var(--space-md) 0 var(--space-2xs); }
.ed-stats > div { flex: 1; padding: var(--space-xs) var(--space-3xs); border-radius: var(--radius-control); background: var(--color-paper-2); box-shadow: var(--shadow-soft); border: var(--card-border); text-align: center; display: flex; flex-direction: column; gap: 2px; }
.ed-stats b { font-size: var(--text-lg); font-weight: 700; }
.ed-stats span { font-size: var(--text-xs); color: var(--color-ink-3); }
.quote { margin-top: var(--space-sm); padding: var(--space-xs) var(--space-sm); border-radius: var(--radius-control); background: var(--color-paper-3); border-inline-start: 3px solid var(--color-accent); font-size: var(--text-sm); line-height: 1.8; color: var(--color-ink-2); white-space: pre-line; }
.ed-label { margin: var(--space-lg) 0 var(--space-2xs); font-size: var(--text-sm); font-family: var(--font-body); font-weight: 600; color: var(--color-ink-2); }
.text-input { width: 100%; padding: var(--space-xs) var(--space-sm); border-radius: var(--radius-control); border: 1px solid transparent; background: var(--color-paper-3); box-shadow: var(--shadow-inset); color: var(--color-ink); font: inherit; outline: none; resize: vertical; transition: border-color var(--dur-short) var(--ease-out); }
.text-input:focus { border-color: var(--color-accent); }
.price-input { margin-top: var(--space-xs); display: flex; align-items: center; gap: var(--space-2xs); padding: 0 var(--space-sm); border-radius: var(--radius-control); background: var(--color-paper-3); box-shadow: var(--shadow-inset); }
.price-input input { flex: 1; min-width: 0; padding: var(--space-xs) 0; background: none; border: 0; outline: none; color: var(--color-star); font: 700 var(--text-xl) var(--font-num); direction: ltr; text-align: center; }
.price-input .star { width: 22px; height: 22px; color: var(--color-star); }
.switch-row { display: flex; align-items: center; gap: var(--space-sm); margin-top: var(--space-sm); padding: var(--space-sm) var(--space-md); border-radius: var(--radius-control); background: var(--color-paper-2); box-shadow: var(--shadow-soft); border: var(--card-border); cursor: pointer; }
.switch-row > span { flex: 1; display: flex; flex-direction: column; gap: var(--space-3xs); }
.switch-row b { font-size: var(--text-md); font-weight: 600; }
.switch-row small { font-size: var(--text-xs); color: var(--color-ink-3); line-height: 1.7; }
.switch-row input { position: absolute; opacity: 0; pointer-events: none; }
.switch { position: relative; width: 48px; height: 28px; flex: none; border-radius: var(--radius-pill); background: var(--color-paper-3); box-shadow: var(--shadow-inset); transition: background var(--dur-short) var(--ease-out); }
.switch::after { content: ""; position: absolute; top: 3px; inset-inline-start: 3px; width: 22px; height: 22px; border-radius: 50%; background: var(--color-paper-2); box-shadow: var(--shadow-soft); transition: transform var(--dur-short) var(--ease-out); }
.switch-row input:checked + .switch { background: var(--color-accent); box-shadow: none; }
.switch-row input:focus-visible + .switch { outline: 2px solid var(--color-focus); outline-offset: 2px; }
[dir="ltr"] .switch-row input:checked + .switch::after { transform: translateX(20px); }
[dir="rtl"] .switch-row input:checked + .switch::after { transform: translateX(-20px); }
.switch-row.disabled { opacity: 0.45; }
.link-box { margin-top: var(--space-md); padding: var(--space-sm); border-radius: var(--radius-control); background: var(--color-paper-3); box-shadow: var(--shadow-inset); display: flex; flex-direction: column; gap: var(--space-sm); }
.link-box code { direction: ltr; font-size: var(--text-xs); color: var(--color-ink-2); word-break: break-all; user-select: all; }
#ed-archive { margin-top: var(--space-sm); color: var(--color-ink-2); }

/* --- برگه‌ی خرید --- */
.gallery { display: flex; gap: var(--space-2xs); overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 calc(var(--space-md) * -1) var(--space-sm); padding: 0 var(--space-md); scrollbar-width: none; }
.gallery::-webkit-scrollbar { display: none; }
.gallery .thumb { flex: none; width: 82%; aspect-ratio: 4 / 3; border-radius: var(--radius-card); scroll-snap-align: center; }
.gallery .thumb.single { width: 100%; }
#buy-audio { width: 100%; margin-bottom: var(--space-sm); }
.buy-title { margin: var(--space-2xs) 0 var(--space-3xs); font-size: var(--text-xl); }
.verified { margin-top: var(--space-2xs); display: flex; gap: var(--space-2xs); align-items: flex-start; font-size: var(--text-xs); color: var(--color-success); line-height: 1.7; }
.verified svg { width: 16px; height: 16px; margin-top: 2px; }
.buy-notes { margin: var(--space-md) 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--space-2xs); font-size: var(--text-sm); line-height: 1.8; color: var(--color-ink-2); }
.owned { margin-bottom: var(--space-md); padding: var(--space-md); border-radius: var(--radius-card); background: var(--color-success-soft); display: flex; flex-direction: column; gap: var(--space-2xs); animation: rise var(--dur-med) var(--ease-out); }
.owned b { color: var(--color-success); }
.owned p { font-size: var(--text-sm); line-height: 1.8; color: var(--color-ink-2); margin-bottom: var(--space-2xs); }

/* --- ناوبری پایین: نوار شناور + دکمه‌ی آپلود وسط --- */
.nav-dock { position: fixed; z-index: 100; bottom: calc(var(--space-sm) + env(safe-area-inset-bottom)); left: var(--space-md); right: var(--space-md); height: 68px; display: flex; align-items: center; padding: 0 var(--space-3xs); border-radius: 26px; background: var(--color-paper-2); border: var(--card-border); box-shadow: var(--shadow-float); }
.nav-item { flex: 1; height: 56px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; border-radius: 18px; color: var(--color-ink-3); font-size: 0.6875rem; min-width: 0; transition: color var(--dur-short) var(--ease-out); }
.nav-item span { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav-item svg { width: 22px; height: 22px; }
.nav-item.active { color: var(--color-accent); font-weight: 600; }
.fab { width: 58px; height: 58px; flex: none; margin: 0 var(--space-3xs); margin-top: -30px; border-radius: 50%; display: grid; place-items: center; color: var(--color-accent-ink); background: linear-gradient(135deg, var(--color-accent), var(--color-accent-2)); box-shadow: 0 10px 22px var(--color-accent-soft), 0 0 0 6px var(--color-paper); transition: transform var(--dur-short) var(--ease-out); }
.fab svg { width: 26px; height: 26px; }
.fab:active { transform: scale(0.92); }

/* --- پیام کوتاه --- */
.toast { position: fixed; left: 50%; bottom: calc(100px + env(safe-area-inset-bottom)); z-index: 300; max-width: calc(100% - 2 * var(--space-md)); padding: var(--space-xs) var(--space-md); border-radius: var(--radius-control); background: var(--color-ink); color: var(--color-paper); font-size: var(--text-sm); line-height: 1.7; text-align: center; transform: translate(-50%, 16px); opacity: 0; pointer-events: none; transition: opacity var(--dur-med) var(--ease-out), transform var(--dur-med) var(--ease-out); }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

@keyframes page-in { from { opacity: 0; transform: translateY(8px); } }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } }
@keyframes fade-in { from { opacity: 0; } }
@keyframes grow { from { transform: scaleY(0); } }
@keyframes grow-x { from { transform: scaleX(0); } }
@keyframes pop { from { opacity: 0; transform: scale(0.6); } }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes float { to { transform: translateY(-6px); } }
@keyframes breathe { to { transform: scale(1.05); opacity: 0.85; } }
@keyframes shimmer { to { background-position: -200% 0; } }

@media (max-width: 340px) {
  .ring { width: 80px; height: 80px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; animation-delay: 0ms !important; transition-duration: 120ms !important; }
  .a-check-path { stroke-dashoffset: 0; }
}

/* پرش از پروفایل به ویترین‌ها: یک درخشش کوتاه */
#sc-box { scroll-margin-top: 16px; }
#sc-box.flash { animation: flash 1.2s ease-out 1; border-radius: var(--radius-card); }
@keyframes flash { 0%, 40% { box-shadow: 0 0 0 3px var(--color-accent-soft); } 100% { box-shadow: 0 0 0 0 transparent; } }
@media (prefers-reduced-motion: reduce) { #sc-box.flash { animation: none; } }

/* ---------- ظاهر ویترین (مثل Linktree): فقط صفحه‌ی ویترینِ خریدار، روی <html data-look> ----------
 * soft = همان تم تلگرام. بقیه مستقل از روشن/تیره‌ی تلگرام‌اند و فقط توکن‌ها را عوض می‌کنند،
 * پس همه‌ی اجزا (کارت، دکمه، برگه‌ی خرید) خودبه‌خود هماهنگ می‌شوند. design.md § Showcase looks */
:root[data-look] body { background: var(--look-bg, var(--color-paper)); background-attachment: fixed; }

/* غروب: روشن و گرم، کارت‌های شیشه‌ای */
:root[data-look="sunset"] {
  --color-paper: #fff1ea; --color-paper-2: #fffaf7; --color-paper-3: #ffe6dc;
  --color-rule: oklch(45% 0.1 20 / 0.1);
  --color-ink: #3b1530; --color-ink-2: #74445d; --color-ink-3: #94667c;
  --color-accent: #e23a62; --color-accent-2: #ff8a3d; --color-accent-ink: #ffffff;
  --color-accent-soft: oklch(62% 0.2 15 / 0.16);
  --color-star: #d97a00; --color-star-soft: oklch(78% 0.15 65 / 0.18);
  --color-scrim: oklch(25% 0.06 10 / 0.45);
  --hero-from: #ff5f87; --hero-to: #ff9a3d;
  --shadow-raised: 0 10px 28px oklch(55% 0.13 20 / 0.16); --shadow-soft: 0 4px 14px oklch(55% 0.13 20 / 0.12);
  --shadow-inset: inset 0 1px 4px oklch(50% 0.1 20 / 0.14); --shadow-float: 0 16px 36px oklch(50% 0.13 20 / 0.22);
  --card-border: 1px solid oklch(100% 0 0 / 0.8);
  --look-bg: radial-gradient(110% 55% at 100% 0%, #ffd2c0 0%, transparent 60%),
             radial-gradient(90% 55% at 0% 100%, #f9c8e6 0%, transparent 60%), linear-gradient(180deg, #fff4ee, #ffe9f1);
}

/* شفق: تیره با نور فیروزه‌ای و بنفش */
:root[data-look="aurora"] {
  --color-paper: #0a0f24; --color-paper-2: #121a36; --color-paper-3: #1b2548;
  --color-rule: oklch(100% 0 0 / 0.09);
  --color-ink: #eef2ff; --color-ink-2: #aeb7d8; --color-ink-3: #8590b4;
  --color-accent: #2ee6c8; --color-accent-2: #8b6cff; --color-accent-ink: #062320;
  --color-accent-soft: oklch(85% 0.14 175 / 0.16);
  --color-star: #ffd166; --color-star-soft: oklch(86% 0.14 85 / 0.14);
  --color-success: #3dd68c; --color-success-soft: oklch(78% 0.17 155 / 0.14);
  --color-danger: #ff6b7a; --color-danger-soft: oklch(68% 0.2 20 / 0.16);
  --color-scrim: oklch(5% 0.02 270 / 0.6);
  --hero-from: #1d2a5c; --hero-to: #3b2a7a;
  --shadow-raised: 0 10px 30px oklch(0% 0 0 / 0.45); --shadow-soft: 0 4px 14px oklch(0% 0 0 / 0.35);
  --shadow-inset: inset 0 2px 6px oklch(0% 0 0 / 0.4); --shadow-float: 0 16px 40px oklch(0% 0 0 / 0.55);
  --card-border: 1px solid oklch(100% 0 0 / 0.08);
  --look-bg: radial-gradient(90% 45% at 90% 0%, oklch(62% 0.16 175 / 0.32), transparent 70%),
             radial-gradient(80% 45% at 0% 35%, oklch(52% 0.2 290 / 0.32), transparent 70%), #0a0f24;
}

/* شب طلایی: مشکی با خط‌های طلایی (فروشگاه‌های لوکس) */
:root[data-look="noir"] {
  --color-paper: #0c0c0d; --color-paper-2: #161617; --color-paper-3: #222224;
  --color-rule: oklch(82% 0.08 85 / 0.18);
  --color-ink: #f6f1e7; --color-ink-2: #c3bba9; --color-ink-3: #948c7c;
  --color-accent: #d9b46a; --color-accent-2: #f2d898; --color-accent-ink: #1a1408;
  --color-accent-soft: oklch(80% 0.1 85 / 0.16);
  --color-star: #e9c46a; --color-star-soft: oklch(84% 0.12 85 / 0.14);
  --color-success: #8fd19e; --color-success-soft: oklch(80% 0.1 150 / 0.14);
  --color-danger: #ff7a7a; --color-danger-soft: oklch(70% 0.17 25 / 0.15);
  --color-scrim: oklch(0% 0 0 / 0.65);
  --hero-from: #2a2418; --hero-to: #0c0c0d;
  --shadow-raised: 0 10px 30px oklch(0% 0 0 / 0.55); --shadow-soft: 0 4px 14px oklch(0% 0 0 / 0.45);
  --shadow-inset: inset 0 2px 6px oklch(0% 0 0 / 0.5); --shadow-float: 0 16px 40px oklch(0% 0 0 / 0.6);
  --card-border: 1px solid var(--color-rule);
  --look-bg: radial-gradient(70% 38% at 50% 0%, oklch(48% 0.07 85 / 0.32), transparent 72%), #0c0c0d;
}
:root[data-look="noir"] #store-avatar { box-shadow: 0 0 0 3px var(--color-paper-2), 0 0 0 5px var(--color-accent); }
:root[data-look="noir"] #store-name { letter-spacing: 0.01em; }
:root[data-look="aurora"] .cover:not(.has-image) { background: linear-gradient(120deg, #2ee6c8, #4f7bff 55%, #8b6cff); }
:root[data-look="sunset"] .cover:not(.has-image) { background: linear-gradient(120deg, #ff5f87, #ff8a3d 60%, #ffc06b); }
:root[data-look="noir"] .cover:not(.has-image) { background: linear-gradient(120deg, #1a1712, #3a3020 50%, #1a1712); }
:root[data-look="sunset"] .profile-card, :root[data-look="sunset"] .post { background: oklch(100% 0 0 / 0.72); backdrop-filter: blur(14px); }
.avatar img, .cover-img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ابزار صاحب ویترین روی صفحه‌ی خودش: ظاهر و کارت استوری */
.owner-tools { display: flex; gap: var(--space-xs); }
.owner-tools .btn-soft { flex: 1 1 0; min-width: 0; min-height: 44px; padding: 0 var(--space-sm); }
.owner-tools .btn-soft span { overflow: hidden; text-overflow: ellipsis; }

/* برگه‌ی ظاهر */
.theme-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-xs); }
.theme-opt { display: grid; gap: var(--space-3xs); justify-items: center; font-size: var(--text-xs); color: var(--color-ink-2); }
.theme-sw { position: relative; width: 100%; aspect-ratio: 3 / 4; border-radius: var(--radius-thumb); overflow: hidden; box-shadow: var(--shadow-soft); border: var(--card-border); display: grid; align-content: end; gap: 4px; padding: 6px; transition: transform var(--dur-short) var(--ease-out); }
.theme-sw i { display: block; height: 7px; border-radius: 4px; }
.theme-sw i:first-child { width: 70%; }
.theme-sw .sw-btn { height: 12px; border-radius: 6px; }
.theme-opt.active .theme-sw { box-shadow: 0 0 0 2px var(--color-paper-2), 0 0 0 4px var(--color-accent); }
.theme-opt.active { color: var(--color-ink); font-weight: 700; }
.theme-opt:active .theme-sw { transform: scale(0.96); }
.sw-soft   { background: linear-gradient(160deg, #eef0f7, #dfe2ee); } .sw-soft i { background: #c9cce0; } .sw-soft .sw-btn { background: linear-gradient(90deg, #5b5bd6, #33c3e8); }
.sw-sunset { background: linear-gradient(160deg, #ffd2c0, #f9c8e6); } .sw-sunset i { background: #fff; } .sw-sunset .sw-btn { background: linear-gradient(90deg, #e23a62, #ff8a3d); }
.sw-aurora { background: radial-gradient(80% 60% at 90% 0%, #1e8f86, transparent), radial-gradient(70% 60% at 0% 40%, #4a3399, transparent), #0a0f24; } .sw-aurora i { background: #26304f; } .sw-aurora .sw-btn { background: linear-gradient(90deg, #2ee6c8, #8b6cff); }
.sw-noir   { background: radial-gradient(70% 50% at 50% 0%, #4a3f28, transparent), #0c0c0d; } .sw-noir i { background: #2a2a2c; } .sw-noir .sw-btn { background: linear-gradient(90deg, #d9b46a, #f2d898); }
.look-media { display: grid; gap: var(--space-xs); }
.look-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs) var(--space-sm); }
.look-row .lr-thumb { flex: none; width: 72px; height: 44px; border-radius: 12px; overflow: hidden; background: var(--color-paper-3); box-shadow: var(--shadow-inset); display: grid; place-items: center; color: var(--color-ink-3); }
.look-row .lr-thumb.round { width: 44px; border-radius: 14px; }
.look-row .lr-text { flex: 1 1 150px; min-width: 0; display: grid; }
.look-row .lr-text small { color: var(--color-ink-3); font-size: var(--text-xs); }
.look-row .btn-soft { min-height: 38px; padding: 0 var(--space-sm); }
.look-row .icon-btn { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; color: var(--color-ink-3); }
.busy { opacity: 0.6; pointer-events: none; }

/* کارت استوری */
.story-preview { display: block; width: min(56vw, 240px); aspect-ratio: 9 / 16; margin: 0 auto; border-radius: 18px; box-shadow: var(--shadow-float); object-fit: cover; background: var(--color-paper-3); }
.story-steps { margin: 0; padding-inline-start: 1.2em; color: var(--color-ink-2); font-size: var(--text-sm); line-height: 1.9; }

/* چک‌لیست شروع فروشنده (خانه) */
.start-card { padding: var(--space-md); }
.start-head { display: flex; align-items: center; gap: var(--space-sm); }
.start-head h2 { flex: 1; font-size: var(--text-lg); }
.start-head .icon-btn { width: 32px; height: 32px; display: grid; place-items: center; color: var(--color-ink-3); border-radius: 10px; }
.start-bar { height: 6px; border-radius: var(--radius-pill); background: var(--color-paper-3); box-shadow: var(--shadow-inset); overflow: hidden; margin-top: var(--space-xs); }
.start-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--color-accent), var(--color-accent-2)); transition: width var(--dur-long) var(--ease-out); }
.start-list { margin-top: var(--space-sm); display: grid; gap: 2px; }
.start-step { display: flex; align-items: center; gap: var(--space-sm); min-height: 48px; padding: var(--space-2xs) var(--space-3xs); border-radius: var(--radius-control); text-align: start; }
.start-step .ck { flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--color-paper-3); box-shadow: var(--shadow-inset); color: var(--color-ink-3); font-size: var(--text-xs); font-weight: 700; }
.start-step.done .ck { background: var(--color-success); color: #ffffff; box-shadow: none; }
.start-step .ck svg { width: 14px; height: 14px; }
.start-step .st { flex: 1; min-width: 0; display: grid; }
.start-step .st b { font-size: var(--text-sm); font-weight: 600; }
.start-step .st small { color: var(--color-ink-3); font-size: var(--text-xs); line-height: 1.5; }
.start-step.done .st b { color: var(--color-ink-3); text-decoration: line-through; text-decoration-color: var(--color-rule); font-weight: 500; }
.start-step.done .st small, .start-step.done .chev { display: none; }
.start-step.next { background: var(--color-accent-soft); }
.start-step:not(.done):active { transform: scale(0.98); }

/* ---------- استایل ویترین: فقط گزینه‌های آماده (design.md § Showcase looks) ---------- */
/* رنگ اصلی: هر رنگ یک نسخه برای زمینه‌ی روشن و یکی برای تیره، با رنگ نوشته‌ی خوانا روی دکمه */
:root[data-accent="violet"] { --color-accent: #5b4fe0; --color-accent-2: #8f7cff; --color-accent-ink: #ffffff; }
:root[data-accent="rose"]   { --color-accent: #d6335a; --color-accent-2: #ff7a93; --color-accent-ink: #ffffff; }
:root[data-accent="orange"] { --color-accent: #c9560a; --color-accent-2: #ff9a3d; --color-accent-ink: #ffffff; }
:root[data-accent="green"]  { --color-accent: #11804f; --color-accent-2: #2fc58a; --color-accent-ink: #ffffff; }
:root[data-accent="blue"]   { --color-accent: #2563eb; --color-accent-2: #38bdf8; --color-accent-ink: #ffffff; }
:root[data-accent="gold"]   { --color-accent: #b98a2a; --color-accent-2: #f0cf7a; --color-accent-ink: #1f1606; }
:root[data-dark][data-accent="violet"] { --color-accent: #9a90ff; --color-accent-2: #c0b8ff; --color-accent-ink: #14112e; }
:root[data-dark][data-accent="rose"]   { --color-accent: #ff7896; --color-accent-2: #ffa9bb; --color-accent-ink: #2a0812; }
:root[data-dark][data-accent="orange"] { --color-accent: #ffa04a; --color-accent-2: #ffc77a; --color-accent-ink: #2a1400; }
:root[data-dark][data-accent="green"]  { --color-accent: #45d993; --color-accent-2: #8aeabc; --color-accent-ink: #062618; }
:root[data-dark][data-accent="blue"]   { --color-accent: #6aa6ff; --color-accent-2: #8edaff; --color-accent-ink: #061a33; }
:root[data-dark][data-accent="gold"]   { --color-accent: #d9b46a; --color-accent-2: #f2d898; --color-accent-ink: #1a1408; }
:root[data-accent]:not([data-accent="auto"]) { --color-accent-soft: color-mix(in oklab, var(--color-accent) 16%, transparent); }

/* شکل کارت‌ها (محصولات، کارت پروفایل، ردیف‌های لیست) */
:root[data-card="sharp"] #page-store :is(.profile-card, .post, .p-card, .lk-row, .join-card) { border-radius: 4px; }
:root[data-card="sharp"] #store-items .thumb { border-radius: 0; }
:root[data-card="pill"] #page-store :is(.profile-card, .post) { border-radius: 34px; }
:root[data-card="pill"] #store-items :is(.p-card, .lk-row) { border-radius: 28px; }
:root[data-card="pill"] #store-items.links .lk-row { border-radius: var(--radius-pill); }
:root[data-card="pill"] #store-items.links .lk-row .lk-thumb { border-radius: 50%; }
:root[data-card="polaroid"] #store-items :is(.post, .p-card) { border-radius: 6px; padding: 8px 8px 0; }
:root[data-card="polaroid"] #store-items .post .thumb, :root[data-card="polaroid"] #store-items .p-card .thumb { border-radius: 3px; }
:root[data-card="polaroid"] #store-items .post-head { padding-inline: 4px; }
:root[data-card="polaroid"] #store-items .lk-row { border-radius: 6px; }
:root[data-card="polaroid"] #page-store .profile-card { border-radius: 8px; }

/* سبک دکمه‌ها */
:root[data-btn="solid"] #page-store .btn-accent { background: var(--color-accent); box-shadow: none; }
:root[data-btn="outline"] #page-store .btn-accent { background: transparent; color: var(--color-accent); box-shadow: inset 0 0 0 2px var(--color-accent); }
:root[data-btn="outline"] #store-items .post-cta.buy { background: var(--color-paper-2); color: var(--color-ink); box-shadow: inset 0 0 0 2px var(--color-star), var(--shadow-float); }

/* چیدمان اینستاگرامی ۳ تایی: فقط تصویر، قیمت کوچک روی آن */
#store-items.grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3px; margin-inline: calc(var(--space-md) * -1); }
#store-items.grid3 .p-card { border-radius: 0; box-shadow: none; border: 0; }
:root[data-card="pill"] #store-items.grid3 .p-card, :root[data-card="round"] #store-items.grid3 .p-card { border-radius: 10px; }
#store-items.grid3 { gap: 4px; }
#store-items.grid3 .thumb { aspect-ratio: 1; }
#store-items.grid3 .card-info { display: none; }
#store-items.grid3 :is(.price-chip, .member-chip) { font-size: 0.6875rem; padding: 1px 6px; }

/* چیدمان لیست (مثل Linktree): ردیف‌های بزرگ قابل‌لمس */
#store-items.links { display: flex; flex-direction: column; gap: var(--space-xs); }
.lk-row { position: relative; display: flex; align-items: center; gap: var(--space-sm); min-height: 68px; padding: var(--space-2xs); padding-inline-end: var(--space-sm); border-radius: var(--radius-tile); background: var(--color-paper-2); box-shadow: var(--shadow-raised); border: var(--card-border); text-align: start; animation: rise var(--dur-med) var(--ease-out) both; }
.lk-row .lk-thumb { flex: none; width: 52px; height: 52px; border-radius: 14px; overflow: hidden; }
.lk-row .lk-thumb .thumb { width: 100%; height: 100%; }
.lk-row .lk-text { flex: 1; min-width: 0; display: grid; }
.lk-row .lk-text b { font-size: var(--text-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lk-row .lk-text small { font-size: var(--text-xs); color: var(--color-ink-3); }
.lk-row .lk-tag { flex: none; font-size: var(--text-xs); font-weight: 700; padding: 3px var(--space-2xs); border-radius: var(--radius-pill); background: var(--color-accent-soft); color: var(--color-accent); white-space: nowrap; }
.lk-row .lk-tag.lock { background: var(--color-paper-3); color: var(--color-ink-2); }
.lk-row .lk-tag.own { background: var(--color-success-soft); color: var(--color-success); }
.lk-row:active { transform: scale(0.98); }

/* پست سنجاق‌شده */
.pin-badge { position: absolute; top: var(--space-2xs); inset-inline-start: var(--space-2xs); z-index: 2; display: inline-flex; align-items: center; gap: 3px; padding: 2px var(--space-2xs); border-radius: var(--radius-pill); background: var(--color-accent); color: var(--color-accent-ink); font-size: 0.6875rem; font-weight: 700; }
.pin-badge svg { width: 12px; height: 12px; }
.post.pinned, .p-card.pinned, .lk-row.pinned { box-shadow: 0 0 0 2px var(--color-accent), var(--shadow-raised); }
.post { position: relative; }

/* لینک شبکه‌های اجتماعی زیر توضیح ویترین */
.social-row { display: flex; flex-wrap: wrap; gap: var(--space-2xs); margin-top: var(--space-xs); }
.social-btn { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: var(--color-paper-3); color: var(--color-accent); box-shadow: var(--shadow-soft); border: var(--card-border); transition: transform var(--dur-short) var(--ease-out); }
.social-btn:active { transform: scale(0.92); }
.social-btn svg { width: 20px; height: 20px; }

/* برگه‌ی استایل: تب‌ها و گزینه‌های تصویری */
#look-sheet .tabs { margin-bottom: var(--space-sm); }
.look-panel { display: none; }
.look-panel.on { display: grid; gap: var(--space-sm); animation: page-in var(--dur-short) var(--ease-out); }
.look-label { font-size: var(--text-sm); font-weight: 600; color: var(--color-ink-2); }
.opt-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-xs); }
.opt-grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.opt { display: grid; gap: var(--space-3xs); justify-items: center; font-size: var(--text-xs); color: var(--color-ink-2); text-align: center; }
.opt .opt-pic { width: 100%; aspect-ratio: 1; border-radius: var(--radius-thumb); background: var(--color-paper-2); box-shadow: var(--shadow-soft); border: var(--card-border); padding: 7px; display: grid; gap: 4px; align-content: center; transition: transform var(--dur-short) var(--ease-out); }
.opt.active { color: var(--color-ink); font-weight: 700; }
.opt.active .opt-pic { box-shadow: 0 0 0 2px var(--color-paper), 0 0 0 4px var(--color-accent); }
.opt:active .opt-pic { transform: scale(0.95); }
.opt-pic i { display: block; background: color-mix(in oklab, var(--color-accent) 45%, var(--color-paper-2)); }
.opt-grid.three .opt-pic { aspect-ratio: 2 / 1; padding-inline: 14px; }
.op-round i, .op-sharp i, .op-pill i, .op-polaroid i { height: 46px; }
.op-round i { border-radius: 10px; } .op-sharp i { border-radius: 1px; } .op-pill i { border-radius: 23px; }
.op-polaroid i { height: 38px; border-radius: 1px; outline: 5px solid #ffffff; outline-offset: 0; margin: 0 5px 8px; box-shadow: 0 9px 0 5px #ffffff, 0 4px 12px 5px oklch(0% 0 0 / 0.16); }
.ol-feed i { height: 22px; border-radius: 4px; }
.ol-grid2 { grid-template-columns: 1fr 1fr; } .ol-grid2 i { aspect-ratio: 1; border-radius: 4px; }
.ol-grid3 { grid-template-columns: repeat(3, 1fr); gap: 2px !important; } .ol-grid3 i { aspect-ratio: 1; }
.ol-list i { height: 9px; border-radius: 5px; }
.ob-fill i, .ob-solid i, .ob-outline i { height: 18px; border-radius: 9px; }
.ob-fill i { background: linear-gradient(90deg, var(--color-accent), var(--color-accent-2)); }
.ob-solid i { background: var(--color-accent); }
.ob-outline i { background: transparent; box-shadow: inset 0 0 0 2px var(--color-accent); }
.accent-row { display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.accent-sw { width: 36px; height: 36px; border-radius: 50%; box-shadow: var(--shadow-soft); display: grid; place-items: center; color: #fff; }
.accent-sw.active { box-shadow: 0 0 0 2px var(--color-paper), 0 0 0 4px var(--color-ink-2); }
.accent-sw svg { width: 16px; height: 16px; }
.accent-sw.auto { background: conic-gradient(#5b4fe0, #d6335a, #c9560a, #11804f, #2563eb, #b98a2a, #5b4fe0); }
.preset-row { display: flex; gap: var(--space-xs); overflow-x: auto; scrollbar-width: none; margin-inline: calc(var(--space-md) * -1); padding: var(--space-3xs) var(--space-md) var(--space-2xs); }
.preset-row::-webkit-scrollbar { display: none; }
.preset { flex: none; display: grid; gap: var(--space-3xs); justify-items: center; width: 84px; font-size: var(--text-xs); color: var(--color-ink-2); }
.preset .theme-sw { aspect-ratio: 3 / 4; }
.pin-pick { display: flex; gap: var(--space-2xs); overflow-x: auto; scrollbar-width: none; margin-inline: calc(var(--space-md) * -1); padding: var(--space-3xs) var(--space-md) var(--space-2xs); }
.pin-pick::-webkit-scrollbar { display: none; }
.pin-pick .chip { max-width: 160px; overflow: hidden; text-overflow: ellipsis; }
.social-edit { display: grid; gap: var(--space-2xs); }
.social-field { display: flex; align-items: center; gap: var(--space-2xs); padding: 0 var(--space-sm); min-height: 46px; border-radius: var(--radius-control); background: var(--color-paper-3); box-shadow: var(--shadow-inset); }
.social-field svg { color: var(--color-ink-3); }
.social-field input { flex: 1; min-width: 0; border: 0; background: none; font: inherit; font-size: var(--text-sm); color: var(--color-ink); direction: ltr; text-align: left; outline: none; }
.social-field.bad { box-shadow: inset 0 0 0 1.5px var(--color-danger); }
.p-card .pin-badge { top: auto; bottom: var(--space-2xs); }
#store-items.grid3 .p-card .pin-badge { bottom: 4px; inset-inline-start: 4px; padding: 2px 5px; }
#store-items.grid3 .p-card .pin-badge { font-size: 0; gap: 0; }
.look-switches { padding: var(--space-3xs) var(--space-md); }
.look-switches .switch-row { margin: 0; padding: var(--space-xs) 0; background: none; box-shadow: none; border: 0; border-radius: 0; }
.look-switches .switch-row + .switch-row { border-top: 1px solid var(--color-rule); }
.look-switches .switch-row b { font-size: var(--text-sm); }

/* «استارز ندارم؟» و راهنمای نقد کردن */
.stars-help { display: inline-flex; align-items: center; gap: 6px; align-self: center; margin-inline: auto; min-height: 40px; padding: 0 var(--space-sm); border-radius: var(--radius-pill); font-size: var(--text-sm); font-weight: 600; color: var(--color-star); background: var(--color-star-soft); }
.stars-help svg { width: 16px; height: 16px; }
.join-card .stars-help { display: flex; margin-top: var(--space-2xs); }
#buy-stars-help { display: flex; width: max-content; margin-top: var(--space-sm); }
#buy-stars-help.hidden { display: none; }
.stars-guide, .cashout-body { font-size: var(--text-sm); line-height: 1.9; color: var(--color-ink-2); }
.stars-guide b, .cashout-body b { color: var(--color-ink); }
.stars-guide ol, .cashout-body ol { margin: var(--space-2xs) 0; padding-inline-start: 1.3em; }
.stars-guide .warn, .cashout-body .warn { display: block; margin-top: var(--space-xs); padding: var(--space-xs) var(--space-sm); border-radius: var(--radius-control); background: var(--color-danger-soft); color: var(--color-ink); }
.stars-user { display: flex; align-items: center; gap: var(--space-sm); padding: var(--space-sm) var(--space-md); }
.stars-user > span { flex: 1; min-width: 0; display: grid; }
.stars-user small { font-size: var(--text-xs); color: var(--color-ink-3); }
.stars-user b { font-size: var(--text-lg); direction: ltr; text-align: start; overflow: hidden; text-overflow: ellipsis; }
.stars-user .btn-soft { min-height: 40px; padding: 0 var(--space-sm); }
.warn-text { color: var(--color-danger); font-size: var(--text-sm); line-height: 1.8; }
.cashout { padding: 0; overflow: hidden; }
.cashout summary { display: flex; align-items: center; gap: var(--space-sm); padding: var(--space-sm) var(--space-md); cursor: pointer; list-style: none; }
.cashout summary::-webkit-details-marker { display: none; }
.cashout summary b { flex: 1; }
.cashout summary .chev { width: 16px; height: 16px; color: var(--color-ink-3); transition: transform var(--dur-short) var(--ease-out); }
.cashout[open] summary .chev { transform: rotate(90deg); }
.cashout-body { padding: 0 var(--space-md) var(--space-md); }

/* سربرگ بدون بنر (مثل Linktree): لوگوی بزرگ وسط، متن وسط‌چین */
:root[data-header="center"] #store-cover { display: none; }
:root[data-header="center"] #page-store .profile-body { align-items: center; text-align: center; padding-top: var(--space-lg); }
:root[data-header="center"] #store-avatar { margin-top: 0; width: 104px; height: 104px; border-radius: 50%; font-size: 2.4rem; }
:root[data-header="center"] #page-store .profile-stats, :root[data-header="center"] #store-social { justify-content: center; }
:root[data-header="center"] #store-desc { margin-inline: auto; }

/* فونت عنوان‌ها (فقط فونت‌های روی سرور خودمان) */
:root[data-font="bold"] #page-store :is(#store-name, .post-text b, .lk-text b, .card-name, .section-title) { font-weight: 900; letter-spacing: -0.01em; }
:root[data-font="bold"]:lang(en) #store-name, :root[data-font="bold"]:lang(ru) #store-name { font-family: "Unbounded", var(--font-display); font-weight: 700; }
:root[data-font="light"] #page-store :is(#store-name, .post-text b, .lk-text b, .card-name, .section-title) { font-weight: 300; letter-spacing: 0.02em; }
:root[data-font="plex"] #page-store :is(#store-name, .post-text b, .lk-text b, .card-name, .section-title) { font-family: "IBM Plex Sans Arabic", var(--font-display); font-weight: 600; }
.opt-pic[class*="of-"] { place-items: center; }
.opt-pic[class*="of-"] b { font-size: 1.35rem; color: var(--color-ink); }
.of-bold b { font-weight: 900; } .of-light b { font-weight: 300; } .of-plex b { font-family: "IBM Plex Sans Arabic", var(--font-display); font-weight: 600; }

/* عکس پس‌زمینه: پوشیده با رنگ زمینه‌ی تم تا متن‌ها خوانا بمانند */
:root[data-bgimg] body { background: linear-gradient(color-mix(in srgb, var(--color-paper) 58%, transparent), color-mix(in srgb, var(--color-paper) 72%, transparent)), var(--bg-img) center / cover no-repeat, var(--color-paper); }

/* پیش‌نمایش سربرگ در برگه‌ی استایل */
.opt-grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.opt-grid.two .opt-pic { aspect-ratio: 2 / 1.2; }
.oh-cover, .oh-center { align-content: start !important; justify-items: center; gap: 5px !important; }
.oh-cover i:first-child { width: 100%; height: 22px; border-radius: 6px; }
.oh-cover em { display: block; width: 24px; height: 24px; border-radius: 50%; margin-top: -16px; background: var(--color-accent); border: 3px solid var(--color-paper-2); }
.oh-cover i:last-child, .oh-center i:last-child { width: 50%; height: 7px; border-radius: 4px; }
.oh-center i:first-child { display: none; }
.oh-center em { display: block; width: 34px; height: 34px; border-radius: 50%; margin-top: 6px; background: var(--color-accent); }
.look-row .lr-thumb.tall { width: 44px; height: 64px; }

/* ---------- پشتیبانی: سؤالات متداول (همان سبک .faq) + راه تماس ---------- */
.help-list summary { font-size: var(--text-sm); }
.help-list details p { user-select: text; }
.small-btn { min-height: 38px; padding: 0 var(--space-sm); font-size: var(--text-sm); }
.contact-card { display: grid; gap: var(--space-sm); padding: var(--space-md); }
.contact-head { display: flex; gap: var(--space-sm); align-items: center; }
.contact-head div { display: grid; gap: 2px; }
.contact-head small { color: var(--color-ink-3); font-size: var(--text-xs); line-height: 1.7; }
.contact-id { display: flex; align-items: center; gap: var(--space-sm); padding-top: var(--space-xs); border-top: 1px solid var(--color-rule); }
.contact-id > span { flex: 1; display: grid; }
.contact-id small { color: var(--color-ink-3); font-size: var(--text-xs); }
.contact-id b { direction: ltr; text-align: start; }
.danger-text { color: var(--color-danger) !important; }
.contact-card .btn-row > * { flex: 1 1 100%; }

/* ---------- صفحه‌ی سازنده (design.md § Creator tools) ---------- */
.row-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; text-align: start; }
.row-text b { font-weight: 600; }
.row-text small { font-size: var(--text-xs); color: var(--color-ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.form-card { display: flex; flex-direction: column; gap: var(--space-xs); }
.form-card .ed-label { margin: 0; }
.form-card .switch-row { margin: 0; }
.seg.wide-seg { margin: 0; }
.seg.wide-seg button.active { background: var(--color-paper-2); color: var(--color-ink); box-shadow: var(--shadow-soft); }
.explore-card { width: 100%; display: flex; align-items: center; gap: var(--space-sm); text-align: start; }
.explore-card .chev { width: 16px; height: 16px; color: var(--color-ink-3); flex: none; }
.earn-card { display: flex; flex-direction: column; padding: var(--space-3xs) 0; }
.earn-row { display: grid; grid-template-columns: auto 1fr auto; grid-template-rows: auto auto; align-items: center; column-gap: var(--space-sm); padding: var(--space-xs) var(--space-md); }
.earn-row + .earn-row { border-top: 1px solid var(--color-rule); }
.earn-row .kicon { grid-row: span 2; }
.earn-row b { color: var(--color-star); font-family: var(--font-num); }
.earn-row small { grid-column: 2 / 4; font-size: var(--text-xs); }
.invite-card { display: flex; flex-direction: column; gap: var(--space-xs); align-items: stretch; }
.fans-counts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-xs); margin-bottom: var(--space-sm); }
.fans-counts div { padding: var(--space-sm); border-radius: var(--radius-tile); background: var(--color-paper-2); box-shadow: var(--shadow-soft); border: var(--card-border); display: flex; flex-direction: column; gap: 2px; }
.fans-counts b { font-family: var(--font-num); font-size: var(--text-xl); color: var(--color-ink); }
.fans-counts span { font-size: var(--text-xs); color: var(--color-ink-3); }
#fans-broadcast { margin-bottom: var(--space-sm); }
.fan-amount { font-family: var(--font-num); color: var(--color-star); font-weight: 600; white-space: nowrap; }
.tag.sub { background: var(--color-accent-soft); color: var(--color-accent); }
.tag.expired { background: var(--color-paper-3); color: var(--color-ink-3); }
.ex-list { display: flex; flex-direction: column; gap: var(--space-sm); }
.ex-card { display: flex; flex-direction: column; overflow: hidden; padding: 0; text-align: start; width: 100%; }
.ex-cover { height: 84px; background: linear-gradient(135deg, var(--hero-from), var(--color-accent)); background-size: cover; background-position: center; }
.ex-body { display: flex; gap: var(--space-sm); padding: 0 var(--space-md) var(--space-md); align-items: flex-end; margin-top: -26px; }
.ex-body .avatar { width: 56px; height: 56px; flex: none; border: 3px solid var(--color-paper-2); }
.ex-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; padding-top: 30px; }
.ex-text b { font-size: var(--text-md); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ex-text small { font-size: var(--text-xs); color: var(--color-ink-3); }
.ex-text p { margin: 2px 0 0; font-size: var(--text-sm); color: var(--color-ink-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.store-actions { display: flex; gap: var(--space-2xs); margin-top: var(--space-xs); justify-content: center; flex-wrap: wrap; }
.store-actions .star { width: 16px; height: 16px; color: var(--color-star); }
.store-actions svg { width: 18px; height: 18px; }
.bundles { display: flex; flex-direction: column; gap: var(--space-3xs); }
.bundle-opt { display: flex; align-items: center; justify-content: space-between; gap: var(--space-xs); min-height: 44px; padding: 0 var(--space-sm); border-radius: var(--radius-control); background: var(--color-paper-2); box-shadow: var(--shadow-soft); font-size: var(--text-sm); }
.bundle-opt b { font-family: var(--font-num); color: var(--color-star); }
.bundle-opt .off { font-size: var(--text-xs); color: var(--color-success); font-weight: 700; }
.bundle-inputs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2xs); }
.bundle-inputs label { display: flex; flex-direction: column; gap: 4px; font-size: var(--text-xs); color: var(--color-ink-3); }
.bundle-inputs input { width: 100%; min-height: 44px; border-radius: var(--radius-control); background: var(--color-paper-3); box-shadow: var(--shadow-inset); text-align: center; font-family: var(--font-num); color: var(--color-ink); border: 0; }
.buy-social { display: flex; align-items: center; gap: var(--space-sm); margin: var(--space-3xs) 0; }
.like-btn { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 var(--space-sm); border-radius: var(--radius-pill); background: var(--color-paper-3); color: var(--color-ink-2); font-size: var(--text-sm); transition: transform var(--dur-short) var(--ease-out); }
.like-btn svg { width: 18px; height: 18px; }
.like-btn.on { color: var(--k-video); background: var(--k-video-soft); }
.like-btn.on svg path { fill: currentColor; }
.like-btn:active { transform: scale(0.92); }
.post-foot .like-btn { min-height: 28px; padding: 0 var(--space-2xs); background: none; font-size: var(--text-xs); }
.post-foot .like-btn svg { width: 15px; height: 15px; }
#tip-chips { margin: var(--space-xs) 0; }
#tip-send { margin-top: var(--space-sm); }
#ed-notify { margin-top: var(--space-sm); }
#store-subscribe { margin-top: var(--space-2xs); min-height: 40px; }
@media (prefers-reduced-motion: reduce) { .like-btn { transition: none; } }
.row > span.avatar:not(.kicon) { flex: none; }

/* ---------- بنرهای خانه (design.md § Home banners) ---------- */
.banners { display: flex; flex-direction: column; gap: var(--space-2xs); }
.banner-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; border-radius: var(--radius-card); box-shadow: var(--shadow-raised); }
.banner-track::-webkit-scrollbar { display: none; }
.banner-track:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
.banner { --b-ink: var(--color-ink); --b-ink-2: var(--color-ink-2); --b-k: var(--color-accent); --b-k-soft: var(--color-accent-soft);
  flex: 0 0 100%; scroll-snap-align: start; scroll-snap-stop: always; min-height: 156px; display: grid; grid-template-columns: minmax(0, 1fr) 96px;
  align-items: center; gap: var(--space-sm); padding: var(--space-md); position: relative; overflow: hidden; color: var(--b-ink); background: var(--color-paper-2); }
.banner.tone-navy { --b-ink: var(--hero-ink); --b-ink-2: var(--hero-ink-2); --b-k: var(--hero-ink); --b-k-soft: var(--hero-track);
  background: radial-gradient(120% 90% at 0% 0%, var(--color-accent-soft), transparent 60%), linear-gradient(160deg, var(--hero-from), var(--hero-to)); }
.banner.tone-warm { --b-k: var(--k-photo); --b-k-soft: var(--k-photo-soft);
  background: radial-gradient(90% 120% at 0% 100%, var(--color-star-soft), transparent 65%), linear-gradient(135deg, var(--color-paper-2), var(--k-photo-soft)); }
.banner.tone-rose { --b-k: var(--k-animation); --b-k-soft: var(--k-animation-soft);
  background: radial-gradient(90% 120% at 0% 100%, var(--k-document-soft), transparent 65%), linear-gradient(135deg, var(--color-paper-2), var(--k-animation-soft)); }
.banner.tone-mint { --b-k: var(--k-text); --b-k-soft: var(--k-text-soft);
  background: radial-gradient(90% 120% at 0% 100%, var(--k-audio-soft), transparent 65%), linear-gradient(135deg, var(--color-paper-2), var(--k-text-soft)); }
.banner-text { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3xs); min-width: 0; }
.banner-text b { font-family: var(--font-display); font-weight: var(--display-weight); font-size: var(--text-lg); line-height: 1.35; }
.banner-text p { margin: 0; font-size: var(--text-sm); line-height: 1.6; color: var(--b-ink-2); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.banner-cta { margin-top: var(--space-2xs); display: inline-flex; align-items: center; gap: 4px; min-height: 36px; padding: 0 var(--space-sm);
  border-radius: var(--radius-pill); font-size: var(--text-sm); font-weight: 700; white-space: nowrap;
  background: linear-gradient(135deg, var(--color-accent), var(--color-accent-2)); color: var(--color-accent-ink); box-shadow: 0 6px 16px var(--color-accent-soft);
  transition: transform var(--dur-short) var(--ease-out); }
.banner-cta svg { width: 14px; height: 14px; }
[dir="rtl"] .banner-cta svg { transform: scaleX(-1); }
.banner.tone-navy .banner-cta { background: var(--hero-ink); color: var(--hero-to); box-shadow: none; }
.banner-cta:active { transform: scale(0.96); }
.banner-art { position: relative; width: 96px; height: 96px; color: var(--b-k); }
.ba-ring { position: absolute; inset: 6px; border-radius: 50%; border: 2px dashed currentColor; opacity: 0.28; }
.ba-dot { position: absolute; border-radius: 50%; background: currentColor; }
.ba-dot.d1 { width: 10px; height: 10px; top: 4px; inset-inline-start: 18px; opacity: 0.55; }
.ba-dot.d2 { width: 7px; height: 7px; bottom: 22px; inset-inline-end: 0; opacity: 0.4; }
.ba-icon { position: absolute; inset: 20px; display: grid; place-items: center; border-radius: 20px; background: var(--b-k-soft);
  box-shadow: var(--shadow-soft); transform: rotate(-7deg); backdrop-filter: blur(2px); }
.banner.tone-navy .ba-icon { box-shadow: none; }
.ba-icon svg { width: 30px; height: 30px; }
.ba-chip { position: absolute; bottom: 0; inset-inline-start: 50%; transform: translateX(-50%); white-space: nowrap; font-size: var(--text-xs); font-weight: 700;
  padding: 3px var(--space-2xs); border-radius: var(--radius-pill); background: var(--color-paper-2); color: var(--color-ink); box-shadow: var(--shadow-soft); font-family: var(--font-num); }
[dir="rtl"] .ba-chip { transform: translateX(50%); }
.banner.tone-navy .ba-chip { background: var(--hero-track); color: var(--hero-ink); box-shadow: none; }
.banner-dots { display: flex; justify-content: center; gap: 6px; }
.banner-dots i { width: 7px; height: 7px; border-radius: var(--radius-pill); background: var(--color-paper-3); box-shadow: var(--shadow-inset); cursor: pointer;
  transition: width var(--dur-med) var(--ease-out), background var(--dur-med) var(--ease-out); }
.banner-dots i.on { width: 20px; background: var(--color-accent); box-shadow: none; }
@media (prefers-reduced-motion: reduce) { .banner-dots i, .banner-cta { transition: none; } }
#creator-box .row-text small { white-space: normal; line-height: 1.5; }