/* Valabi CRM — design system (Phase 6, owner pick 2026-10-04: «ویترین», soft «ملایم» panels, deep blue, Yekan Bakh, light right rail, no dark mode).
   Every older class name is kept and restyled here, so all pages share one look. */
@font-face { font-family: "Yekan Bakh"; font-weight: 400; font-display: swap; src: url(fonts/YekanBakhFaNum-Regular.woff2) format("woff2"); }
@font-face { font-family: "Yekan Bakh"; font-weight: 600; font-display: swap; src: url(fonts/YekanBakhFaNum-SemiBold.woff2) format("woff2"); }
@font-face { font-family: "Yekan Bakh"; font-weight: 700; font-display: swap; src: url(fonts/YekanBakhFaNum-Bold.woff2) format("woff2"); }
@font-face { font-family: "Yekan Bakh"; font-weight: 800; font-display: swap; src: url(fonts/YekanBakhFaNum-ExtraBold.woff2) format("woff2"); }

:root {
  --bg: #f3f6fa; --surface: #ffffff; --surface-2: #f5f7fb; --ink: #15233a; --muted: #6b7a8f; --line: #e2e8f0;
  --p: #1d5fd1; --p-2: #5aa0ff; --p-dark: #164ba8; --p-soft: #e8f0fd; --p-ink: #ffffff;
  --gold: #d79b16; --ok: #12805c; --ok-soft: #e0f4ec; --warn: #a96300; --warn-soft: #fbefd9; --bad: #c2362b; --bad-soft: #fbe4e1;
  --r: 20px; --r-sm: 12px; --shadow: 0 1px 0 var(--line); --shadow-hi: 0 1px 0 var(--line), 0 16px 30px -22px rgba(29, 95, 209, .55);
  --f: "Yekan Bakh", Tahoma, "Segoe UI", sans-serif;
  --rail-w: 244px;
  color-scheme: light;
  /* legacy names used inline by older templates */
  --brand: var(--p); --brand-2: var(--p-dark); --card: var(--surface); --soft: var(--surface-2);

  /* journal pages («کار تیم», staff profile, «دفتر یادداشت‌ها») — warm paper + one terracotta accent */
  --j-paper: #fbf8f3; --j-paper-2: #f4efe6; --j-ink: #2b2620; --j-muted: #8a7f72; --j-line: #e8dfd2; --j-accent: #c4643f; --j-accent-soft: #f6e5dc;
}
* { box-sizing: border-box; }
html { background: var(--bg); }
body { margin: 0; font-family: var(--f); background: var(--bg); color: var(--ink); font-size: 14px; line-height: 1.8; -webkit-font-smoothing: antialiased; }
a { color: var(--p); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 3px solid color-mix(in srgb, var(--p) 40%, transparent); outline-offset: 2px; border-radius: 8px; }
h1 { font-size: clamp(20px, 2.6vw, 26px); font-weight: 800; margin: 0 0 4px; line-height: 1.4; text-wrap: balance; }
h1 small, h2 small { color: var(--muted); font-weight: 400; font-size: 13px; }
h2 { font-size: 15.5px; font-weight: 700; margin: 0 0 12px; line-height: 1.5; text-wrap: balance; }
h3 { font-size: 14px; font-weight: 700; }
code { background: var(--surface-2); padding: 1px 6px; border-radius: 6px; font-size: 13px; word-break: break-all; }
pre { white-space: pre-wrap; overflow-wrap: anywhere; }
.num, td, .stats b, .tile b, .kpi .val { font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- shell */
.shell { display: grid; grid-template-columns: var(--rail-w) minmax(0, 1fr); min-height: 100vh; }
.rail { background: var(--surface); border-inline-start: 1px solid var(--line); padding: 16px 12px; display: flex; flex-direction: column; gap: 1px; position: sticky; top: 0; height: 100vh; overflow-y: auto; scrollbar-width: thin; z-index: 30; }
.rail .logo { display: flex; align-items: center; gap: 10px; font-weight: 800; padding: 2px 8px 14px; font-size: 16px; color: var(--ink); }
.rail .logo:hover { text-decoration: none; }
.logo img { width: 36px; height: 36px; border-radius: 10px; flex: none; }
.logo small { display: block; font-size: 11px; font-weight: 400; color: var(--muted); line-height: 1.3; }
.rail .grp { font-size: 11px; color: var(--muted); padding: 14px 12px 4px; }
.rail a.nav { color: var(--muted); padding: 7px 12px; border-radius: 12px; display: flex; gap: 11px; align-items: center; font-size: 14px; position: relative; transition: background .2s, color .2s; }
.rail a.nav svg { flex: none; }
.rail a.nav:hover { background: var(--surface-2); color: var(--ink); text-decoration: none; }
.rail a.nav.on { background: var(--p-soft); color: var(--p); font-weight: 700; }
.rail a.nav.on::before { content: ""; position: absolute; right: -12px; top: 8px; bottom: 8px; width: 3px; border-radius: 3px 0 0 3px; background: var(--p); }
.rail .count { margin-inline-start: auto; background: var(--p); color: var(--p-ink); font-size: 11px; border-radius: 999px; padding: 0 7px; line-height: 1.75; font-weight: 600; }
.rail .count.soft { background: var(--surface-2); color: var(--muted); }
.rail .count.warn { background: var(--warn-soft); color: var(--warn); }
.rail .count.new { background: var(--ok); color: #fff; animation: pulseok 1.8s infinite; }
.rail .me { margin-top: auto; display: flex; gap: 10px; align-items: center; padding: 14px 8px 4px; border-top: 1px solid var(--line); font-size: 13px; }
.rail .me a { color: var(--ink); } .rail .me small { color: var(--muted); display: block; line-height: 1.3; }
.rail .out { margin: 0 auto 0 0; } .rail .out button { border: 0; background: none; color: var(--muted); padding: 4px 6px; border-radius: 8px; font-size: 12px; }
.rail .out button:hover { background: var(--bad-soft); color: var(--bad); }
.wrap { min-width: 0; display: flex; flex-direction: column; background: linear-gradient(180deg, color-mix(in srgb, var(--p-soft) 70%, var(--bg)) 0, var(--bg) 380px); }
.topline { display: flex; align-items: center; gap: 10px; padding: 16px 28px 0; }
.topline .search { display: flex; align-items: center; gap: 8px; background: var(--surface); border-radius: 14px; padding: 0 12px; height: 44px; color: var(--muted); flex: 1; max-width: 480px; min-width: 0; box-shadow: var(--shadow); }
.topline .search input { border: 0; outline: 0; background: none; width: 100%; min-width: 0; padding: 0; box-shadow: none; }
.topline .gap { margin-inline-start: auto; }
.topline .mlogo { display: none; align-items: center; gap: 8px; font-weight: 800; color: var(--ink); }
.icon-btn { width: 44px; height: 44px; border-radius: 14px; border: 0; background: var(--surface); display: grid; place-items: center; position: relative; color: var(--ink); flex: none; box-shadow: var(--shadow); transition: transform .2s; }
.icon-btn:hover { transform: translateY(-1px); text-decoration: none; }
.icon-btn b { position: absolute; top: 4px; left: 4px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px; background: var(--bad); color: #fff; font-size: 11px; line-height: 18px; text-align: center; box-shadow: 0 0 0 2px var(--surface); }
.menu-btn { display: none; }
main { padding: 18px 28px 30px; display: flex; flex-direction: column; gap: 16px; max-width: 1480px; width: 100%; min-width: 0; }
main > * { min-width: 0; }
.foot { text-align: center; color: var(--muted); font-size: 12px; padding: 10px 0 20px; }
.bottombar { display: none; }
.scrim { display: none; }

/* entrance: every block in main rises in, staggered */
main > * { animation: rise .5s cubic-bezier(.2, .8, .2, 1) both; }
main > :nth-child(2) { animation-delay: .04s; } main > :nth-child(3) { animation-delay: .08s; } main > :nth-child(4) { animation-delay: .12s; }
main > :nth-child(5) { animation-delay: .16s; } main > :nth-child(6) { animation-delay: .2s; } main > :nth-child(n+7) { animation-delay: .24s; }
@keyframes rise { from { transform: translateY(10px); opacity: .001; } }

/* ---------------------------------------------------------------- panels (soft) */
.card, details.card { background: var(--surface); border-radius: var(--r); box-shadow: var(--shadow); padding: 18px 20px; min-width: 0; position: relative; transition: transform .3s cubic-bezier(.2, .8, .2, 1), box-shadow .3s; }
.card.hov:hover, a.card:hover { transform: translateY(-2px); box-shadow: var(--shadow-hi); text-decoration: none; }
.card > h2:first-child, .card > summary h2 { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.card h2 .hi { width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; background: var(--p-soft); color: var(--p); flex: none; }
.card h2 .more, .card h2 small a { margin-inline-start: auto; font-size: 12.5px; font-weight: 600; }
details.card summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
details.card summary::-webkit-details-marker { display: none; }
details.card summary::after { content: "⌄"; margin-inline-start: auto; color: var(--muted); transition: transform .2s; }
details.card[open] summary::after { transform: rotate(180deg); }
details.card[open] summary { margin-bottom: 12px; }
.card.ok { background: var(--ok-soft); color: var(--ok); box-shadow: none; }
.card.err { background: var(--bad-soft); color: var(--bad); box-shadow: none; }
.help { background: color-mix(in srgb, var(--p-soft) 60%, var(--surface)); box-shadow: none; color: color-mix(in srgb, var(--ink) 85%, var(--p)); }
.help p { margin: 0; }
.warnbox { background: var(--warn-soft); color: #6d4300; box-shadow: none; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.narrow { max-width: 480px; margin-inline: auto; width: 100%; }
.grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
.grid2 > * { min-width: 0; }
.scroll { overflow-x: auto; max-width: 100%; -webkit-overflow-scrolling: touch; }
.tbl-wrap { margin-inline: -2px; padding-inline: 2px; }
.muted { color: var(--muted); }
.small { font-size: 12.5px; color: var(--muted); }
.err { color: var(--bad); } .ok { color: var(--ok); } .warn { color: var(--warn); }
.eyebrow { font-size: 12px; color: var(--muted); }

/* page head */
.hello { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 12px; }
.hello h1 em, .hello h2 em { font-style: normal; color: var(--p); }
.hello p { margin: 2px 0 0; color: var(--muted); }

/* ---------------------------------------------------------------- forms */
label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--muted); min-width: 0; }
input, select, textarea { color: var(--ink); padding: 8px 11px; border: 1px solid var(--line); border-radius: 11px; background: var(--surface); min-width: 0; max-width: 100%; transition: border-color .2s, box-shadow .2s; }
input:focus, select:focus, textarea:focus { outline: 0; border-color: var(--p); box-shadow: 0 0 0 4px var(--p-soft); }
input[type=checkbox], input[type=radio] { accent-color: var(--p); width: 16px; height: 16px; padding: 0; }
input[type=file] { padding: 6px; }
fieldset { border: 1px solid var(--line); border-radius: 14px; margin: 0 0 12px; padding: 10px 14px; min-width: 0; }
legend { font-size: 13px; color: var(--muted); padding: 0 6px; }
form.card > label, fieldset > label { margin-bottom: 10px; }
.stack { display: flex; flex-direction: column; gap: 12px; }
.stack.compact { gap: 6px; }
.row { flex-direction: row !important; align-items: center; gap: 8px; color: var(--ink) !important; margin: 2px 0; }
.row-btns { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.inline { display: inline-flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 4px 0; max-width: 100%; }
.filters { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: flex-end; }
.filters label { flex: 0 1 auto; }
.filters .wide { flex: 1 1 260px; }
.filters .checks { display: flex; gap: 12px; flex-wrap: wrap; }
.filters .checks label { flex-direction: row; align-items: center; color: var(--ink); }
.filters .actions { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; width: 100%; }
.edit-form small { color: var(--muted); font-size: 11.5px; }

/* buttons */
.btn, .primary { border: 0; border-radius: 12px; padding: 9px 16px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; gap: 8px; position: relative; overflow: hidden; transition: transform .15s, background .2s, box-shadow .25s; white-space: nowrap; background: var(--p); color: var(--p-ink); text-decoration: none; line-height: 1.6; }
.btn:hover, .primary:hover { background: var(--p-dark); text-decoration: none; }
.btn:active, .primary:active { transform: scale(.97); }
.primary { box-shadow: 0 8px 18px -12px var(--p); }
.btn.ghost { background: var(--surface); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); }
.btn.ghost:hover { background: var(--surface-2); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--p) 40%, var(--line)); }
.big { font-size: 15px; padding: 11px 22px; }
.small-btn, .btn.sm { padding: 5px 12px; font-size: 13px; border-radius: 10px; }
.link { background: none; border: 0; color: var(--muted); padding: 0; font-size: 12.5px; }
.link:hover { color: var(--p); }
.primary:disabled, .btn:disabled { opacity: .45; cursor: not-allowed; }
.ripple { position: absolute; border-radius: 50%; transform: scale(0); background: currentColor; opacity: .2; animation: rip .6s ease-out; pointer-events: none; }
@keyframes rip { to { transform: scale(2.6); opacity: 0; } }

/* chips / tags / segmented */
.tag, .chip { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; padding: 0 10px; border-radius: 999px; line-height: 1.95; white-space: nowrap; border: 0; }
.tag { --c: var(--p); background: color-mix(in srgb, var(--c) 11%, var(--surface)); color: var(--c); margin-inline-end: 4px; }
.tag.plain { --c: #5b6b80; }
.tag.vip { font-weight: 700; }
.tag .x { display: inline; margin: 0; } .tag .x button { border: 0; background: none; color: inherit; padding: 0 2px; font-size: 14px; line-height: 1; }
.tag-add { display: inline; } .tag-add input { padding: 1px 10px; border-radius: 999px; font-size: 12px; width: 110px; }
.tags { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 8px 0 0; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.chip { background: var(--surface); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); padding: 3px 12px; transition: background .2s, box-shadow .2s, color .2s; }
.chip:hover { text-decoration: none; box-shadow: inset 0 0 0 1px var(--p); }
.chip.on { background: var(--p); color: var(--p-ink); box-shadow: none; font-weight: 700; }
.chip.on b { color: inherit; }
.chips.big .chip { font-size: 13.5px; padding: 6px 14px; } .chips.big .chip b { color: var(--p); margin-inline-start: 2px; } .chips.big .chip.on b { color: var(--p-ink); }
.segs { display: flex; flex-wrap: wrap; gap: 6px; }
.seg { border: 0; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); border-radius: 999px; padding: 5px 14px; font-size: 13px; color: var(--ink); transition: background .2s, color .2s; text-decoration: none; }
.seg:hover { text-decoration: none; box-shadow: inset 0 0 0 1px var(--p); }
.seg.on { background: var(--p); color: var(--p-ink); box-shadow: none; }
.tabs { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; } .tabs .sep { width: 12px; }
.stars { color: var(--gold); font-size: 12px; letter-spacing: -1px; }
.star { font-style: normal; } .star.v1 { color: #a0522d; } .star.v2 { color: #6b7d92; } .star.v3 { color: var(--gold); }

/* tables */
table { border-collapse: separate; border-spacing: 0; width: 100%; }
th, td { text-align: right; padding: 9px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { background: var(--surface-2); color: var(--muted); font-weight: 600; font-size: 12.5px; white-space: nowrap; }
th:first-child { border-start-start-radius: 10px; border-end-start-radius: 10px; } th:last-child { border-start-end-radius: 10px; border-end-end-radius: 10px; }
tr:last-child td { border-bottom: 0; }
table.list tr:hover td { background: color-mix(in srgb, var(--p-soft) 45%, transparent); }
tr.first td { border-top: 2px solid var(--line); }
tr.ret td { color: var(--bad); }
dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px 16px; margin: 0; }
dt { color: var(--muted); } dd { margin: 0; overflow-wrap: anywhere; min-width: 0; }
dd[dir=ltr], td[dir=ltr] { text-align: right; unicode-bidi: plaintext; }
.plain { list-style: none; padding: 0; margin: 0; } .plain li { padding: 6px 0; border-bottom: 1px solid var(--line); overflow-wrap: anywhere; } .plain li:last-child { border-bottom: 0; }
.pager { display: flex; gap: 16px; justify-content: center; align-items: center; }
.log { margin-top: 12px; font-size: 13px; white-space: pre-line; color: var(--muted); }
.steps { padding-inline-start: 20px; } .steps li { margin-bottom: 6px; }

/* KPI tiles (old .tiles + new .kpis) */
.tiles, .kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 14px; }
.kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.tile, .kpi { background: var(--surface); border-radius: var(--r); box-shadow: var(--shadow); padding: 16px 18px; display: flex; flex-direction: column; min-width: 0; position: relative; overflow: hidden; color: var(--ink); transition: transform .3s cubic-bezier(.2, .8, .2, 1), box-shadow .3s; }
a.tile:hover, .kpi:hover { transform: translateY(-2px); box-shadow: var(--shadow-hi); text-decoration: none; }
.tile b { font-size: 24px; font-weight: 800; color: var(--ink); line-height: 1.3; } .tile span { color: var(--muted); font-size: 13px; }
.kpi .lbl { font-size: 12.5px; color: var(--muted); }
.kpi .val { font-size: clamp(22px, 2.4vw, 30px); font-weight: 800; line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kpi .unit { font-size: 12px; color: var(--muted); }
.kpi .delta { font-size: 12px; margin-top: 4px; display: inline-flex; gap: 4px; align-items: center; }
.kpi .mini { position: absolute; left: 14px; bottom: 14px; width: 64px; height: 26px; }
.kpi.lead { background: linear-gradient(150deg, var(--p), color-mix(in srgb, var(--p) 55%, var(--p-2))); color: var(--p-ink); }
.kpi.lead .lbl, .kpi.lead .unit, .kpi.lead .delta { color: color-mix(in srgb, var(--p-ink) 82%, transparent); }
.delta.up { color: var(--ok); } .delta.down { color: var(--bad); }
.stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 8px; align-content: start; }
.stats div { background: var(--surface-2); border-radius: 14px; padding: 10px 12px; display: flex; flex-direction: column; min-width: 0; }
.stats b { font-size: 17px; font-weight: 800; overflow-wrap: anywhere; } .stats span { color: var(--muted); font-size: 12px; }
.big-num { font-size: 22px; font-weight: 800; color: var(--p); margin: 0 0 4px; } .big-num small { font-size: 12px; color: var(--muted); font-weight: 400; }
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); display: inline-block; animation: pulseok 1.8s infinite; flex: none; }
@keyframes pulseok { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--ok) 55%, transparent); } 70% { box-shadow: 0 0 0 9px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }

/* bento layout */
.bento { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }

/* signal icons */
.sig { width: 36px; height: 36px; border-radius: 12px; display: grid; place-items: center; flex: none; background: var(--p-soft); color: var(--p); }
.sig.cart, .sig.cart_add, .sig.cart_abandoned { background: #fff0e3; color: #b45309; } .sig.size_back, .sig.stock_in, .sig.order { background: var(--ok-soft); color: var(--ok); }
.sig.replacement, .sig.overdue { background: #f4ecd9; color: #8a6514; } .sig.birthday { background: #fbe7f0; color: #a3285b; } .sig.review, .sig.review_low { background: var(--bad-soft); color: var(--bad); }
.sig.login, .sig.session_start, .sig.register { background: #e7f1ff; color: #2563c7; } .sig.wishlist_add, .sig.wishlist_in, .sig.wishlist_remove { background: #fde8ec; color: #c2364f; }
.sig.wallet_credit { background: #e7f5f2; color: #0f766e; } .sig.form { background: #f1ebfb; color: #6d3fb0; } .sig.sms, .sig.auto { background: #eef2f7; color: #475569; }
.sig.staff, .sig.contact, .sig.note { background: #fff6dd; color: #946200; } .sig.notifyme { background: #eef2ff; color: #4f46e5; } .sig.winback_valuable, .sig.new_welcome { background: #efe6fb; color: #6d3fb0; }
.sig.browsing_hot, .sig.view { background: var(--p-soft); color: var(--p); }

/* opportunity rows */
.opps { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.opp { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 9px 10px; border-radius: 14px; color: var(--ink); transition: background .2s, transform .25s; }
.opp:hover { background: var(--surface-2); transform: translateX(-3px); text-decoration: none; }
.opp .who { min-width: 0; display: grid; } .opp .who b { font-size: 14px; display: flex; gap: 6px; align-items: center; min-width: 0; }
.opp .who b span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.opp .why { font-size: 12.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.call { width: 36px; height: 36px; border-radius: 50%; background: var(--p); color: var(--p-ink); display: grid; place-items: center; transition: transform .2s; flex: none; }
.call:hover { transform: scale(1.08); text-decoration: none; }

/* now on site + feeds */
.now { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; }
.now a { flex: 0 0 auto; display: grid; justify-items: center; gap: 2px; width: 76px; text-align: center; font-size: 12px; color: var(--ink); }
.now a:hover { text-decoration: none; }
.now small { color: var(--muted); font-size: 11px; line-height: 1.35; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.avatar { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; color: var(--p); background: var(--p-soft); flex: none; position: relative; }
.now .avatar { width: 50px; height: 50px; font-size: 18px; }
.now .avatar::after { content: ""; position: absolute; bottom: 1px; left: 2px; width: 12px; height: 12px; border-radius: 50%; background: var(--ok); border: 2px solid var(--surface); }
.feed { list-style: none; padding: 0; margin: 0; display: grid; }
.feed li { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 2px; border-bottom: 1px solid var(--line); font-size: 13px; }
.feed li:last-child { border-bottom: 0; }
.feed li > span:nth-child(2) { min-width: 0; overflow-wrap: anywhere; }
.feed .sig, .feed .ico { width: 32px; height: 32px; border-radius: 10px; font-size: 15px; }
.feed time, .feed li > .small:last-child { color: var(--muted); font-size: 11.5px; white-space: nowrap; }
.feed li.unread { background: color-mix(in srgb, var(--p-soft) 60%, transparent); border-radius: 10px; }
.feed li.new { animation: slideIn .6s cubic-bezier(.2, .9, .3, 1.15); }
@keyframes slideIn { from { transform: translateY(-10px); opacity: .2; } }
.people-now { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 10px; }
.now-card { background: var(--surface-2); border-radius: 16px; padding: 12px 14px; display: flex; flex-direction: column; gap: 3px; color: var(--ink); transition: background .2s, transform .25s; min-width: 0; }
.now-card:hover { background: var(--p-soft); transform: translateY(-2px); text-decoration: none; }
.now-card .small { overflow-wrap: anywhere; }

/* tasks */
.tasklist { list-style: none; padding: 0; margin: 0 0 10px; display: grid; gap: 6px; }
.tasklist li { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px; background: var(--surface-2); border-inline-start: 4px solid #c3cddb; flex-wrap: wrap; }
.tasklist li > div { display: flex; flex-direction: column; min-width: 0; flex: 1 1 200px; }
.tasklist li.late { border-inline-start-color: var(--bad); background: var(--bad-soft); } .tasklist li.today { border-inline-start-color: var(--gold); }
.today-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.today-grid h3 { margin: 0 0 6px; font-size: 14px; }

/* timeline */
.timeline { list-style: none; padding: 0; margin: 0; position: relative; }
.timeline li { padding: 6px 30px 10px 0; position: relative; font-size: 13px; overflow-wrap: anywhere; }
.timeline li::before { content: ""; position: absolute; right: 6px; top: 13px; width: 10px; height: 10px; border-radius: 50%; background: var(--p); box-shadow: 0 0 0 4px var(--surface); z-index: 1; }
.timeline li::after { content: ""; position: absolute; right: 10px; top: 20px; bottom: -6px; width: 2px; background: var(--line); }
.timeline li:last-child::after { display: none; }
.timeline li .small { display: block; } .timeline .ico { margin-inline-end: 6px; }
.timeline li.tl-buy::before { background: var(--ok); } .timeline li.tl-note::before { background: var(--gold); } .timeline li.tl-site::before { background: var(--p-2); }

/* ---------------------------------------------------------------- profile */
.profile { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 18px; }
.profile .prefs { grid-column: 1 / -1; }
.prof-top { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.prof-top .avatar { width: 64px; height: 64px; font-size: 24px; }
.prof-top h1 { margin: 0; }
.predict { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; }
.predict > div { background: var(--surface-2); border-radius: 16px; padding: 12px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.predict b { font-size: 17px; font-weight: 800; overflow-wrap: anywhere; } .predict span { font-size: 12px; color: var(--muted); }
.ring { position: relative; width: 74px; height: 74px; display: block; flex: none; }
.ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ring circle { fill: none; stroke-width: 9; } .ring .bg { stroke: var(--line); }
.ring .fg { stroke: var(--p); stroke-linecap: round; transition: stroke-dashoffset 1.2s cubic-bezier(.2, .8, .2, 1); }
.ring b { position: absolute; inset: 0; display: grid; place-items: center; font-size: 18px; }
.churn-1 { color: var(--ok); } .churn-2 { color: var(--warn); } .churn-3 { color: var(--bad); }
.site-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.site-box { background: var(--surface-2); border-radius: 16px; padding: 12px 14px; min-width: 0; overflow-wrap: anywhere; } .site-box h3 { margin: 0 0 6px; font-size: 14px; }
.note-form { display: flex; gap: 8px; align-items: flex-end; margin-bottom: 12px; } .note-form textarea { flex: 1; }
.note:not(.sig) { border-top: 1px solid var(--line); padding: 10px 0; display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap; }
.note p { margin: 0; flex: 1 1 100%; overflow-wrap: anywhere; } .note small { color: var(--muted); }
.auto:not(.sig) { margin: 0 0 12px; padding-inline-start: 18px; color: var(--muted); }
.family-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; margin-top: 10px; } .family-form .wide { flex: 1 1 200px; }
.complete { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; flex-wrap: wrap; }
.complete .meter, .meter { flex: 0 0 160px; height: 10px; background: var(--surface-2); border-radius: 10px; overflow: hidden; }
.meter i { display: block; height: 100%; background: linear-gradient(90deg, var(--p), var(--p-2)); border-radius: 10px; }
.ai-box .ai-text { line-height: 2; } .ai-out { white-space: pre-wrap; font: inherit; margin: 0; }
.perms { background: var(--surface-2); }

/* ---------------------------------------------------------------- counter (کانتر) */
.counter { max-width: 760px; margin: 0 auto; width: 100%; display: grid; gap: 14px; }
#cq { width: 100%; font-size: 22px; font-weight: 700; padding: 14px 18px; border-radius: 18px; border: 2px solid var(--p); box-shadow: 0 0 0 5px var(--p-soft); }
.ccard { background: var(--surface); border-radius: var(--r); box-shadow: var(--shadow); padding: 16px 18px; display: grid; gap: 10px; animation: rise .4s cubic-bezier(.2, .8, .2, 1); }
.ccard header { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.ccard header > div { min-width: 0; }
.ccard h2 { font-size: 17px; margin: 0; } .ccard p { margin: 0; overflow-wrap: anywhere; }
.csize { text-align: center; background: var(--p); color: var(--p-ink); border-radius: 16px; padding: 6px 14px; min-width: 76px; flex: none; }
.csize b { display: block; font-size: 26px; line-height: 1.25; font-weight: 800; } .csize span { font-size: 11px; opacity: .85; }
.cstats { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 8px; margin: 0; }
.cstats div { background: var(--surface-2); border-radius: 12px; padding: 8px 10px; display: flex; flex-direction: column; } .cstats dt { font-size: 11px; } .cstats dd { font-weight: 700; }
.cnote { display: flex; gap: 6px; } .cnote input { flex: 1; }
.callmode .ccard { box-shadow: none; padding: 0; } .outcomes { display: flex; flex-wrap: wrap; gap: 6px; }
.outcomes .btn.ghost { flex: 1 1 140px; }
.product-box { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; } .product-box img { border-radius: 12px; object-fit: cover; }

/* ---------------------------------------------------------------- size curve (assets/crm.js renders it) */
.szc { position: relative; }
.szc svg { width: 100%; height: auto; display: block; overflow: visible; }
.szc .ax { fill: var(--muted); font-size: 12px; font-family: var(--f); }
.szc .gl { stroke: var(--line); stroke-width: 1; stroke-dasharray: 3 4; }
.szc .colbg { fill: transparent; transition: fill .2s; } .szc .colbg.on { fill: var(--p-soft); }
.szc .bar { fill: color-mix(in srgb, var(--p) 20%, transparent); transform-box: fill-box; transform-origin: bottom; animation: grow .9s cubic-bezier(.2, .8, .2, 1) both; }
.szc .bar.peak { fill: color-mix(in srgb, var(--p) 38%, transparent); }
.szc .curve { fill: none; stroke: var(--p); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 2000; stroke-dashoffset: 2000; animation: draw 1.4s .15s cubic-bezier(.3, .7, .2, 1) forwards; }
.szc .area { opacity: 0; animation: fadeIn .8s .6s forwards; }
.szc .pt { fill: var(--surface); stroke: var(--p); stroke-width: 2.5; }
.szc .pt.on { stroke-width: 4; }
.szc .flag rect { fill: var(--p); } .szc .flag text { fill: var(--p-ink); font-size: 11px; font-weight: 700; font-family: var(--f); }
.sz-tip { position: absolute; pointer-events: none; background: var(--ink); color: #fff; font-size: 12px; padding: 6px 10px; border-radius: 10px; white-space: nowrap; opacity: 0; transition: opacity .15s; line-height: 1.6; transform: translate(50%, -100%); z-index: 2; }
.sz-tip.on { opacity: 1; }
.sz-tabs { display: inline-flex; gap: 2px; background: var(--surface-2); border-radius: 10px; padding: 3px; margin-inline-start: auto; }
.sz-tabs button { border: 0; background: none; padding: 2px 10px; border-radius: 8px; font-size: 12px; color: var(--muted); font-weight: 600; }
.sz-tabs button[aria-pressed="true"] { background: var(--surface); color: var(--p); box-shadow: 0 1px 2px rgba(15, 35, 70, .12); }
.sz-foot { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 12px; color: var(--muted); margin-top: 6px; } .sz-foot b { color: var(--ink); }
@keyframes draw { to { stroke-dashoffset: 0; } } @keyframes fadeIn { to { opacity: 1; } } @keyframes grow { from { transform: scaleY(.04); } }

/* ---------------------------------------------------------------- «فعالیت امروز» */
.day-strip { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
.ds { background: var(--surface); border-radius: 18px; box-shadow: var(--shadow); padding: 12px 14px; display: flex; flex-direction: column; color: var(--ink); transition: transform .25s, background .2s, box-shadow .25s; min-width: 0; }
.ds:hover { transform: translateY(-2px); box-shadow: var(--shadow-hi); text-decoration: none; }
.ds.on { background: var(--p-soft); box-shadow: inset 0 0 0 2px var(--p); }
.ds .sig { width: 30px; height: 30px; border-radius: 9px; margin-bottom: 6px; }
.ds b { font-size: 22px; font-weight: 800; line-height: 1.25; } .ds span { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hours svg { width: 100%; height: auto; display: block; overflow: visible; }
.hours .hb { transform-box: fill-box; transform-origin: bottom; animation: grow .8s cubic-bezier(.2, .8, .2, 1) both; }
.hours .ax { fill: var(--muted); font-size: 11px; font-family: var(--f); }
.hours .nowl { stroke: var(--bad); stroke-width: 1.5; stroke-dasharray: 4 3; }
.legend { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12px; color: var(--muted); }
.legend i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; margin-inline-end: 4px; vertical-align: -1px; }
.daylog { list-style: none; margin: 0; padding: 0; display: grid; }
.daylog .hr { font-size: 12px; font-weight: 700; color: var(--muted); padding: 12px 0 4px; display: flex; align-items: center; gap: 8px; }
.daylog .hr::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.daylog .ev { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 7px 4px; border-radius: 12px; font-size: 13px; transition: background .2s; }
.daylog .ev:hover { background: var(--surface-2); }
.daylog .ev > span:nth-child(2) { min-width: 0; overflow-wrap: anywhere; }
.daylog .ev .sig { width: 32px; height: 32px; border-radius: 10px; }
.daylog .ev small { color: var(--muted); display: block; font-size: 12px; }
.daylog time { color: var(--muted); font-size: 12px; }
.rank { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; counter-reset: r; }
.rank li { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 4px 10px; align-items: center; font-size: 13px; counter-increment: r; }
.rank li::before { content: counter(r); width: 22px; height: 22px; border-radius: 7px; background: var(--surface-2); display: grid; place-items: center; font-size: 11px; color: var(--muted); font-weight: 700; }
.rank li > span:first-of-type { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rank .bar { grid-column: 2 / -1; height: 5px; border-radius: 4px; background: var(--surface-2); overflow: hidden; }
.rank .bar i { display: block; height: 100%; background: var(--p); border-radius: 4px; transform-origin: right; animation: growX 1s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes growX { from { transform: scaleX(0); } }
.staff:not(.sig) { display: grid; gap: 10px; }
.staff .s { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; font-size: 13px; }
.staff .s small { display: block; color: var(--muted); font-size: 12px; overflow-wrap: anywhere; }

/* ---------------------------------------------------------------- wizard / upload / sms */
.wizard { display: grid; gap: 16px; }
.step { display: flex; gap: 16px; }
.step-n { flex: none; width: 36px; height: 36px; border-radius: 12px; background: var(--p); color: var(--p-ink); display: grid; place-items: center; font-weight: 800; }
.step > div:last-child { flex: 1; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.drop { border: 2px dashed color-mix(in srgb, var(--p) 30%, var(--line)); border-radius: 18px; padding: 28px; text-align: center; cursor: pointer; position: relative; color: var(--ink); background: var(--surface-2); transition: background .2s, border-color .2s; }
.drop input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.drop.over, .drop:hover { border-color: var(--p); background: var(--p-soft); }
.drop.has { border-style: solid; border-color: var(--ok); background: var(--ok-soft); }
.drop em { display: block; font-style: normal; color: var(--ok); margin-top: 6px; font-size: 13px; }
.checks-list { list-style: none; padding: 0; } .checks-list li { padding: 5px 0; }
.progress { height: 12px; background: var(--surface-2); border-radius: 8px; overflow: hidden; margin-bottom: 10px; }
.progress i { display: block; height: 100%; background: linear-gradient(90deg, var(--p), var(--p-2)); transition: width .3s; border-radius: 8px; }
.composer textarea { font-size: 15px; }
.preview .bubble { background: var(--p-soft); border-radius: 18px 18px 4px 18px; padding: 10px 14px; margin: 12px 0 4px; max-width: 320px; white-space: normal; overflow-wrap: anywhere; }
.ask { display: flex; gap: 8px; } .ask input { flex: 1; font-size: 16px; }
.pattern-help { background: var(--surface-2); border-radius: 14px; padding: 8px 12px; margin: 8px 0; }
.pattern-help pre { white-space: pre-wrap; font: inherit; color: var(--ink); background: var(--surface); border: 1px dashed var(--line); padding: 6px 8px; border-radius: 10px; margin: 6px 0; }
.auto-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; }
.auto-grid .card { margin: 0; } .auto.on { box-shadow: inset 0 3px 0 var(--ok), var(--shadow); }
.notify-rules td { vertical-align: top; } .notify-rules select { min-width: 140px; }

/* ---------------------------------------------------------------- step filter */
.sf-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
.sf-head h1 { margin: 0; }
.sf-hero { background: linear-gradient(150deg, var(--p), color-mix(in srgb, var(--p) 55%, var(--p-2))); color: var(--p-ink); border-radius: var(--r); padding: 18px 20px; display: grid; gap: 8px; margin: 14px 0; }
.sf-hero .small { color: color-mix(in srgb, var(--p-ink) 85%, transparent); }
.sf-n strong { font-size: 36px; font-weight: 800; margin-left: 8px; } .sf-n span { opacity: .85; }
.funnel { display: grid; gap: 4px; margin-top: 4px; } .funnel i { height: 7px; background: rgba(255, 255, 255, .75); border-radius: 4px; transition: width .4s cubic-bezier(.2, .8, .2, 1); }
.sf-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.sf-step { margin: 0; }
.sf-step-h { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.sf-step-h b { width: 30px; height: 30px; border-radius: 10px; background: var(--p); color: var(--p-ink); display: grid; place-items: center; flex: none; }
.sf-step-h h3 { margin: 0; flex: 1; font-size: 15px; }
.sf-badge { background: var(--p-soft); color: var(--p); border-radius: 999px; padding: 1px 10px; font-size: 12.5px; white-space: nowrap; font-weight: 600; }
.sf-num { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin: 8px 0; color: var(--muted); font-size: 13px; flex-wrap: wrap; }
.stepper { display: flex; align-items: center; gap: 6px; }
.stepper button { width: 34px; height: 34px; border-radius: 10px; border: 0; background: var(--surface-2); font-size: 18px; line-height: 1; color: var(--p); transition: background .2s; }
.stepper button:hover { background: var(--p-soft); }
.stepper b { min-width: 74px; text-align: center; color: var(--ink); }
.sf-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 8px 0; }
.sf-money { margin-top: 8px; }
.sf-people { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 8px; }
.sf-person { display: flex; flex-direction: column; gap: 2px; background: var(--surface-2); border-radius: 14px; padding: 9px 12px; color: var(--ink); transition: background .2s, transform .2s; min-width: 0; }
.sf-person:hover { background: var(--p-soft); transform: translateY(-1px); text-decoration: none; }
.sf-person span:first-child { display: flex; justify-content: space-between; gap: 8px; } .sf-person i { font-style: normal; color: var(--muted); font-size: 12px; }
.sf-save { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; } .sf-save label { flex: 1; min-width: 200px; }
.sf-bar { position: sticky; bottom: 0; background: color-mix(in srgb, var(--surface) 92%, transparent); backdrop-filter: blur(10px); padding: 12px 16px; display: flex; gap: 10px; align-items: center; border-radius: 18px; box-shadow: 0 -10px 30px -24px rgba(15, 35, 70, .6); margin-top: 8px; z-index: 5; flex-wrap: wrap; }

/* ---------------------------------------------------------------- health / insights / reports */
.health-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding: 18px 20px; border-radius: var(--r); color: #fff; }
.health-head h1 { margin: 0 0 4px; } .health-head p { margin: 0; opacity: .92; }
.health-head .small { color: rgba(255, 255, 255, .85); }
.health-head.status-ok { background: linear-gradient(135deg, #0f7a57, #23a173); } .health-head.status-warn { background: linear-gradient(135deg, #a15c00, #d28a12); }
.health-head.status-bad { background: linear-gradient(135deg, #a3241c, #d0443a); } .health-head.status-off { background: linear-gradient(135deg, #52627a, #7a889c); }
.health-head .btn.ghost { background: rgba(255, 255, 255, .15); color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .5); }
.health-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.health-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
.hcard { background: var(--surface); border-radius: 18px; box-shadow: var(--shadow); padding: 14px 16px; display: flex; flex-direction: column; gap: 4px; position: relative; overflow: hidden; min-width: 0; }
.hcard::before { content: ""; position: absolute; inset-block: 0; right: 0; width: 4px; background: #c3cddb; }
.hcard-top { display: flex; align-items: center; gap: 8px; } .hcard h3 { margin: 0; font-size: 13.5px; color: var(--muted); font-weight: 600; }
.hcard b { font-size: 19px; overflow-wrap: anywhere; } .hcard p { margin: 0; font-size: 12px; color: var(--muted); overflow-wrap: anywhere; }
.hcard .dot { width: 10px; height: 10px; border-radius: 50%; background: #aab4c3; flex: none; }
.hcard.st-ok::before { background: var(--ok); } .hcard.st-ok .dot { background: var(--ok); box-shadow: 0 0 0 4px var(--ok-soft); }
.hcard.st-warn::before { background: var(--gold); } .hcard.st-warn .dot { background: var(--gold); box-shadow: 0 0 0 4px var(--warn-soft); }
.hcard.st-bad::before { background: var(--bad); } .hcard.st-bad .dot { background: var(--bad); animation: pulsebad 1.6s infinite; }
.hcard.st-off b { color: var(--muted); }
@keyframes pulsebad { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--bad) 50%, transparent); } 70% { box-shadow: 0 0 0 9px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
.segment-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.seg-card { --c: var(--p); background: var(--surface-2); border-radius: 16px; padding: 12px 14px; display: flex; flex-direction: column; gap: 2px; color: var(--ink); position: relative; overflow: hidden; transition: transform .25s, background .2s; min-width: 0; }
.seg-card::before { content: ""; position: absolute; inset-block: 0; right: 0; width: 4px; background: var(--c); }
.seg-card:hover { transform: translateY(-2px); background: color-mix(in srgb, var(--c) 8%, var(--surface)); text-decoration: none; }
.seg-card b { color: var(--c); } .seg-card strong { font-size: 24px; font-weight: 800; }
.vip-rules { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; } .vip-rules fieldset { flex: 1 1 220px; }
.rt h2 a { font-weight: 400; margin-inline-start: 8px; font-size: 12.5px; }
.rtab td, .rtab th { white-space: nowrap; }
.barcell { position: relative; min-width: 140px; }
.barcell i { position: absolute; inset-block: 5px; inset-inline-start: 4px; background: color-mix(in srgb, var(--p) 18%, transparent); border-radius: 6px; transform-origin: right; animation: growX .9s cubic-bezier(.2, .8, .2, 1) both; }
.barcell span { position: relative; }
.rtab.heat td[style] { background: rgba(29, 95, 209, var(--a)); color: var(--ink); text-align: center; border-radius: 6px; }
.thanks { background: var(--ok-soft); border-radius: 16px; padding: 12px 16px; }

/* ---------------------------------------------------------------- toast + sheet */
.toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); background: var(--ink); color: #fff; padding: 10px 18px; border-radius: 999px; font-size: 13px; z-index: 100; animation: toastIn .35s cubic-bezier(.2, .9, .3, 1.3); max-width: calc(100vw - 32px); }
@keyframes toastIn { from { transform: translate(-50%, 20px); opacity: 0; } }

/* ---------------------------------------------------------------- login */
.login-page { min-height: 100vh; display: grid; place-items: center; padding: 24px 16px; background: radial-gradient(900px 520px at 85% -10%, var(--j-accent-soft), transparent), radial-gradient(700px 500px at 0% 110%, color-mix(in srgb, var(--p-soft) 70%, transparent), transparent), var(--j-paper); }
.login-page > main, .login-page main { width: 100%; display: grid; place-items: center; }
.login-page .login { width: min(420px, 100%); background: var(--surface); border-radius: 26px; box-shadow: 0 30px 60px -40px rgba(15, 35, 70, .45); padding: 28px; display: grid; gap: 14px; animation: rise .6s cubic-bezier(.2, .8, .2, 1); }
.login-logo { display: block; width: 100%; max-width: 260px; height: auto; margin: 0 auto 4px; }
.login-page .login h1 { text-align: center; font-size: 18px; margin: 0; }
.login-page .login .primary { width: 100%; padding: 12px; font-size: 15px; }

/* ---------------------------------------------------------------- «الان در سایت» presence card (v1.10) */
.presence .pr-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.presence .pr-head h2 { margin: 0; }
.presence .pr-head small { color: var(--muted); font-size: 12px; display: block; line-height: 1.5; }
.presence .pr-head .more { margin-inline-start: auto; font-size: 12.5px; font-weight: 600; align-self: flex-start; }
.pr-count { position: relative; width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; flex: none;
  background: radial-gradient(circle at 30% 25%, color-mix(in srgb, var(--ok) 22%, var(--surface)), var(--ok-soft)); color: var(--ok); }
.pr-count b { font-size: 22px; font-weight: 800; line-height: 1; }
.pr-count .live-dot { position: absolute; top: 6px; left: 6px; width: 7px; height: 7px; }
.is-quiet .pr-count { background: var(--surface-2); color: var(--muted); } .is-quiet .pr-count .live-dot { background: #b7c2d0; animation: none; }
.pr-sub { margin: 0 0 8px; font-size: 12px; color: var(--muted); }
.pr-bubbles { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 12px 8px; }
.pr-bubbles.wide { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
.pr { display: grid; justify-items: center; text-align: center; gap: 1px; color: var(--ink); opacity: var(--fade, 1); transition: opacity .2s, transform .25s; min-width: 0; }
.pr:hover { opacity: 1; transform: translateY(-3px); text-decoration: none; }
.pr .avatar { width: 52px; height: 52px; font-size: 19px; box-shadow: 0 0 0 3px var(--surface), 0 0 0 5px var(--p-soft); margin-bottom: 6px; }
.pr.fresh .avatar { background: var(--surface); color: var(--muted); box-shadow: 0 0 0 3px var(--surface), 0 0 0 5px var(--line); outline: 2px dashed #c3cddb; outline-offset: -2px; }
.pr.vip1 .avatar { box-shadow: 0 0 0 3px var(--surface), 0 0 0 5px #d9a77a; } .pr.vip2 .avatar { box-shadow: 0 0 0 3px var(--surface), 0 0 0 5px #a9b4c4; }
.pr.vip3 .avatar { box-shadow: 0 0 0 3px var(--surface), 0 0 0 5px var(--gold); background: #fdf3dc; color: #8a6514; }
.pr.hot .avatar::before { content: ""; position: absolute; inset: -7px; border-radius: 50%; border: 2px solid var(--ok); animation: prping 2s cubic-bezier(.2, .8, .2, 1) infinite; }
@keyframes prping { 0% { transform: scale(.85); opacity: .9; } 80%, 100% { transform: scale(1.25); opacity: 0; } }
.pr .avatar .sig { position: absolute; bottom: -4px; left: -4px; width: 22px; height: 22px; border-radius: 8px; box-shadow: 0 0 0 2px var(--surface); }
.pr b { font-size: 12.5px; font-weight: 700; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pr small { color: var(--muted); font-size: 11px; line-height: 1.4; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; max-width: 100%; }
.pr time { font-size: 10.5px; color: var(--ok); font-weight: 600; } .is-quiet .pr time { color: var(--muted); }
.pr .pr-extra { color: var(--ink); opacity: .75; -webkit-line-clamp: 3; }

/* ---------------------------------------------------------------- card styles (Settings → «ظاهر»; body.cs-nail / body.cs-pin) */
/* «میخ نقره‌ای»: paper-flat cards, two silver nails at the top corners, deep hanging shadow, faint plaster wall. */
body.cs-nail, body.cs-pin { background-image: radial-gradient(rgba(21, 35, 58, .045) 1px, transparent 1.2px); background-size: 15px 15px; }
body.cs-nail { --r: 7px; }
body.cs-nail :is(.card, .kpi, .tile) {
  --nail: radial-gradient(circle at 42% 38%, #ffffff 0 1.4px, #e6eaef 2.3px, #aab3bf 5px, #6b7481 6.4px, rgba(20, 30, 45, .45) 7px, transparent 7.6px);
  --nail-sh: radial-gradient(circle at 60% 66%, rgba(20, 30, 45, .3) 0 5.5px, transparent 9px);
  background-image: var(--nail), var(--nail-sh), var(--nail), var(--nail-sh); background-repeat: no-repeat; background-size: 20px 20px;
  background-position: right 8px top 5px, right 8px top 5px, left 8px top 5px, left 8px top 5px;
  box-shadow: 0 1px 0 rgba(20, 35, 60, .06), 0 18px 22px -18px rgba(20, 35, 60, .6), 0 2px 5px -3px rgba(20, 35, 60, .2); }
body.cs-nail .kpi.lead { background-image: var(--nail), var(--nail-sh), var(--nail), var(--nail-sh), linear-gradient(150deg, var(--p), color-mix(in srgb, var(--p) 55%, var(--p-2)));
  background-size: 20px 20px, 20px 20px, 20px 20px, 20px 20px, auto; background-position: right 8px top 5px, right 8px top 5px, left 8px top 5px, left 8px top 5px, 0 0; }
body.cs-nail :is(.card, .kpi, .tile):hover { box-shadow: 0 1px 0 rgba(20, 35, 60, .06), 0 24px 28px -18px rgba(20, 35, 60, .62), 0 2px 5px -3px rgba(20, 35, 60, .22); }
body.cs-nail :is(.card, .kpi, .tile) { padding-top: 24px; }
/* «پونز آبی»: one blue push-pin at the top centre, slight alternate tilt on dashboard cards, lifted-paper shadow. */
body.cs-pin { --r: 12px; }
body.cs-pin :is(.card, .kpi, .tile) {
  --pin: radial-gradient(circle at 40% 34%, #ffffff 0 1.8px, var(--p-2) 3.2px, var(--p) 7px, var(--p-dark) 8.6px, rgba(10, 30, 70, .4) 9.2px, transparent 9.8px);
  --pin-sh: radial-gradient(circle at 62% 72%, rgba(10, 30, 70, .32) 0 6.5px, transparent 11px);
  background-image: var(--pin), var(--pin-sh); background-repeat: no-repeat; background-size: 28px 28px; background-position: center top 1px;
  padding-top: 30px; box-shadow: 0 1px 0 rgba(20, 35, 60, .05), 0 14px 16px -12px rgba(20, 35, 60, .5); }
body.cs-pin .kpi.lead { --pin: radial-gradient(circle at 40% 34%, #ffffff 0 1.8px, #ffd98a 3.2px, var(--gold) 7px, #a8740a 8.6px, rgba(0, 0, 0, .4) 9.2px, transparent 9.8px);
  background-image: var(--pin), var(--pin-sh), linear-gradient(150deg, var(--p), color-mix(in srgb, var(--p) 55%, var(--p-2))); background-size: 28px 28px, 28px 28px, auto; background-position: center top 1px, center top 1px, 0 0; }
body.cs-pin :is(.kpis > .kpi, .bento .col > .card, .tiles > .tile):nth-child(odd) { rotate: -.9deg; }
body.cs-pin :is(.kpis > .kpi, .bento .col > .card, .tiles > .tile):nth-child(even) { rotate: .7deg; }
body.cs-pin :is(.kpis > .kpi, .bento .col > .card, .tiles > .tile) { transition: rotate .3s, transform .3s, box-shadow .3s; }
body.cs-pin :is(.kpis > .kpi, .bento .col > .card, .tiles > .tile):hover { rotate: 0deg; }
/* Settings picker: three little previews. */
.cs-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }
.cs-opt { position: relative; cursor: pointer; } .cs-opt input { position: absolute; opacity: 0; }
.cs-demo { display: grid; gap: 2px; padding: 22px 14px 14px; background: var(--surface); border-radius: 14px; box-shadow: 0 0 0 1.5px var(--line); transition: box-shadow .2s; min-height: 96px; }
.cs-opt input:checked + .cs-demo { box-shadow: 0 0 0 2.5px var(--p); }
.cs-opt input:focus-visible + .cs-demo { outline: 2px solid var(--p-2); outline-offset: 3px; }
.cs-demo small { color: var(--muted); font-size: 12px; }
.cs-opt.cs-nail .cs-demo { border-radius: 6px; background-image: radial-gradient(circle at 40% 35%, #fff 0 1px, #dfe4ea 1.6px, #a7b0bc 3.6px, #6e7784 4.6px, transparent 5.6px), radial-gradient(circle at 40% 35%, #fff 0 1px, #dfe4ea 1.6px, #a7b0bc 3.6px, #6e7784 4.6px, transparent 5.6px);
  background-repeat: no-repeat; background-size: 13px 13px; background-position: right 8px top 6px, left 8px top 6px; box-shadow: 0 0 0 1.5px var(--line), 0 14px 16px -14px rgba(20, 35, 60, .5); }
.cs-opt.cs-pin .cs-demo { rotate: -1deg; background-image: radial-gradient(circle at 38% 32%, #fff 0 1.2px, var(--p-2) 2.2px, var(--p) 5.2px, var(--p-dark) 6.6px, transparent 7.6px); background-repeat: no-repeat; background-size: 18px 18px; background-position: center top 3px; }
.cs-opt.cs-nail input:checked + .cs-demo, .cs-opt.cs-pin input:checked + .cs-demo { box-shadow: 0 0 0 2.5px var(--p), 0 14px 16px -14px rgba(20, 35, 60, .5); }

/* ---------------------------------------------------------------- call popup: show the number big first, tap it to dial (counter screen) */
dialog.call-pop { border: 0; padding: 0; border-radius: 26px; width: min(440px, calc(100vw - 32px)); background: var(--surface); color: var(--ink);
  box-shadow: 0 40px 80px -30px rgba(10, 25, 50, .55); animation: popIn .28s cubic-bezier(.2, .9, .3, 1.2); }
dialog.call-pop::backdrop { background: rgba(15, 30, 55, .45); backdrop-filter: blur(3px); }
@keyframes popIn { from { transform: translateY(14px) scale(.96); opacity: 0; } }
.call-pop .cp-in { padding: 24px 22px 20px; display: grid; gap: 14px; text-align: center; }
.call-pop .cp-who { display: grid; justify-items: center; gap: 6px; }
.call-pop .cp-who .avatar { width: 64px; height: 64px; font-size: 24px; }
.call-pop .cp-who b { font-size: 18px; } .call-pop .cp-who small { color: var(--muted); font-size: 12.5px; }
.call-pop .cp-num { display: block; direction: ltr; font-size: clamp(30px, 8vw, 42px); font-weight: 800; letter-spacing: 1.5px; font-variant-numeric: tabular-nums;
  padding: 16px 10px; border-radius: 18px; background: var(--p-soft); color: var(--p-dark); text-decoration: none; transition: background .2s, transform .15s; }
.call-pop .cp-num:hover { background: color-mix(in srgb, var(--p-soft) 70%, var(--p-2)); text-decoration: none; }
.call-pop .cp-num:active { transform: scale(.98); }
.call-pop .cp-hint { margin: -6px 0 0; font-size: 12px; color: var(--muted); }
.call-pop .cp-btns { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.call-pop .cp-btns .btn { flex: 1 1 120px; }
.call-pop .cp-x, .out-pop .cp-x { position: absolute; top: 12px; left: 12px; width: 34px; height: 34px; border-radius: 50%; border: 0; background: var(--surface-2); color: var(--muted); font-size: 18px; cursor: pointer; }

/* ---------------------------------------------------------------- update from the hub (به‌روزرسانی CRM) */
.upd-hub.has-new { box-shadow: inset 0 0 0 2px var(--ok), var(--shadow); }
.upd-new { display: grid; gap: 6px; background: var(--ok-soft); border-radius: 16px; padding: 14px 16px; margin-bottom: 10px; }
.upd-new b { font-size: 16px; color: var(--ok); } .upd-new span { font-size: 12.5px; color: var(--muted); } .upd-new p { margin: 0; font-size: 13px; }
.upd-new form { margin-top: 4px; }
.upd-hub details { margin-top: 10px; } .upd-hub summary { cursor: pointer; color: var(--muted); }
.upd-banner { display: flex; align-items: center; gap: 10px; color: var(--ink); background: var(--ok-soft); }
.upd-banner:hover { text-decoration: none; } .upd-banner svg { color: var(--ok); flex: none; }

/* ---------------------------------------------------------------- customer page (v1.12): hero, figures, tabs, panels */
.c-back { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; color: var(--muted); align-self: flex-start; }
.c-back svg { transform: scaleX(-1); }
.card.c-hero { padding: 0; overflow: hidden; display: grid; }
.c-hero .c-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; padding: 22px 22px 8px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--p-soft) 75%, var(--surface)), var(--surface)); }
.c-id { display: flex; align-items: center; gap: 16px; min-width: 0; }
.c-av { width: 76px; height: 76px; font-size: 30px; background: var(--surface); box-shadow: 0 0 0 4px var(--surface), 0 0 0 7px var(--p-soft), 0 12px 24px -14px rgba(29, 95, 209, .6); }
.c-av.vip1 { box-shadow: 0 0 0 4px var(--surface), 0 0 0 7px #d9a77a, 0 12px 24px -14px rgba(150, 90, 40, .6); }
.c-av.vip2 { box-shadow: 0 0 0 4px var(--surface), 0 0 0 7px #a9b4c4, 0 12px 24px -14px rgba(60, 70, 90, .5); }
.c-av.vip3 { background: #fdf3dc; color: #8a6514; box-shadow: 0 0 0 4px var(--surface), 0 0 0 7px var(--gold), 0 12px 24px -14px rgba(160, 110, 10, .7); }
.c-who { min-width: 0; display: grid; gap: 4px; }
.c-who h1 { margin: 0; font-size: clamp(21px, 2.6vw, 27px); }
.c-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; font-size: 13px; color: var(--muted); }
.c-code { font-variant-numeric: tabular-nums; background: var(--surface-2); border-radius: 8px; padding: 0 8px; font-size: 12px; }
.c-phone { border: 0; background: none; padding: 0; color: var(--p); font-weight: 700; display: inline-flex; align-items: center; gap: 5px; font-size: 14px; cursor: pointer; }
.c-phone:hover { text-decoration: underline; }
.c-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.c-more { position: relative; }
.c-more > summary { list-style: none; min-width: 42px; font-size: 18px; line-height: 1; } .c-more > summary::-webkit-details-marker { display: none; }
.c-more:not([open]) .c-menu { display: none; }
.c-menu { position: absolute; left: 0; top: calc(100% + 6px); z-index: 15; background: var(--surface); border-radius: 14px; box-shadow: 0 0 0 1px var(--line), 0 20px 40px -20px rgba(15, 35, 70, .45); padding: 6px; min-width: 200px; display: grid; }
.c-menu a { padding: 8px 12px; border-radius: 10px; color: var(--ink); font-size: 13.5px; } .c-menu a:hover { background: var(--surface-2); text-decoration: none; }
.c-badges { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 6px 22px 16px; }
.c-badges .tag-add input { border-radius: 999px; padding: 3px 12px; font-size: 12.5px; }
.c-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.c-metrics.n4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.c-metrics > div:nth-child(n+4) { border-top: 1px solid var(--line); } .c-metrics > div:nth-child(4) { border-inline-start: 0; }
.c-metrics.n4 > div { border-top: 0; } .c-metrics.n4 > div:nth-child(4) { border-inline-start: 1px solid var(--line); }
@media (min-width: 1480px) { .c-metrics.n6 { grid-template-columns: repeat(6, minmax(0, 1fr)); } .c-metrics.n6 > div { border-top: 0; } .c-metrics.n6 > div:nth-child(4) { border-inline-start: 1px solid var(--line); } }
.c-metrics > div { padding: 14px 18px; display: grid; gap: 2px; min-width: 0; border-inline-start: 1px solid var(--line); }
.c-metrics > div:first-child { border-inline-start: 0; }
.c-metrics span { font-size: 12px; color: var(--muted); }
.c-metrics b { font-size: clamp(16px, 1.6vw, 20px); font-weight: 800; white-space: nowrap; font-variant-numeric: tabular-nums; line-height: 1.5; }
.c-metrics b i { font-style: normal; color: var(--muted); font-weight: 400; }
.c-metrics small { font-size: 11.5px; color: var(--muted); }
.c-metrics .m-lead b { color: var(--p); }
/* tabs */
.c-tabs { position: sticky; top: 0; z-index: 12; display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; padding: 6px; margin-block: -2px;
  background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(10px); border-radius: 16px; }
.c-tabs::-webkit-scrollbar { display: none; }
.c-tabs a { flex: none; display: inline-flex; align-items: center; gap: 7px; padding: 9px 14px; border-radius: 12px; color: var(--muted); font-weight: 600; font-size: 13.5px; transition: background .2s, color .2s; }
.c-tabs a:hover { background: var(--surface); color: var(--ink); text-decoration: none; }
.c-tabs a.on { background: var(--surface); color: var(--p); box-shadow: 0 1px 0 var(--line), 0 8px 16px -12px rgba(29, 95, 209, .5); }
.c-tabs a b { font-size: 11px; background: var(--surface-2); color: var(--muted); border-radius: 999px; padding: 0 7px; line-height: 1.7; font-weight: 700; }
.c-tabs a.on b { background: var(--p-soft); color: var(--p); } .c-tabs a b.hot { background: var(--ok-soft); color: var(--ok); }
.c-panel { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
body.c-tabbed .c-panel:not(.on) { display: none; }
body.c-tabbed .c-panel.on { animation: rise .35s cubic-bezier(.2, .8, .2, 1); }
.c-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
.c-grid > * { min-width: 0; margin: 0; }
.c-grid:empty { display: none; }
/* key/value lists: one clean row each, label on the start side */
dl.kv { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; margin: 0; }
dl.kv > div { display: grid; grid-template-columns: 128px minmax(0, 1fr); gap: 12px; padding: 9px 0; border-top: 1px solid var(--line); align-items: baseline; }
dl.kv > div:first-child { border-top: 0; padding-top: 2px; }
dl.kv dt { color: var(--muted); font-size: 12.5px; margin: 0; } dl.kv dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
dl.kv dd[dir="ltr"] { text-align: right; }
.chips-s { display: flex; flex-wrap: wrap; gap: 5px; }
.chip-s { background: var(--surface-2); border-radius: 8px; padding: 1px 9px; font-size: 12.5px; font-weight: 600; }
/* sizes + family */
.size-chips { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 10px; margin-bottom: 12px; }
.size-chips > div { background: var(--surface-2); border-radius: 14px; padding: 10px 12px; display: grid; gap: 1px; text-align: center; }
.size-chips b { font-size: 22px; font-weight: 800; color: var(--p); line-height: 1.3; } .size-chips span { font-size: 12.5px; font-weight: 600; } .size-chips small { font-size: 11px; color: var(--muted); }
.fam { display: grid; gap: 10px; margin-bottom: 10px; }
.fam-p { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; background: var(--surface-2); border-radius: 14px; padding: 10px 12px; }
.fam-p .avatar { width: 38px; height: 38px; } .fam-p small { display: block; color: var(--muted); font-size: 12px; }
/* purchases: invoices in bands */
table.buys tr.odd td { background: color-mix(in srgb, var(--surface-2) 70%, transparent); }
table.buys tr.first td { border-top: 2px solid var(--line); }
/* side menu accordion («مدیریت») */
.grp-acc > summary.grp { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 6px; border-radius: 10px; transition: color .2s; }
.grp-acc > summary.grp::-webkit-details-marker { display: none; }
.grp-acc > summary.grp:hover { color: var(--ink); }
.grp-acc > summary svg { margin-inline-start: auto; transform: rotate(-90deg); transition: transform .25s; }
.grp-acc[open] > summary svg { transform: rotate(90deg); }
.grp-acc > summary .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); animation: pulseok 1.8s infinite; }
.grp-acc[open] > summary .dot { display: none; }
.grp-acc[open] > a.nav { animation: slideIn .25s ease; }

/* ---------------------------------------------------------------- AI connection pill (live; v1.13) */
.ai-live { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px 6px 12px; border-radius: 999px; background: var(--surface); box-shadow: 0 0 0 1px var(--line); font-size: 13px; flex-wrap: wrap; max-width: 100%; }
.ai-live i { width: 10px; height: 10px; border-radius: 50%; background: #b7c2d0; flex: none; }
.ai-live b { font-weight: 700; } .ai-live small { color: var(--muted); font-size: 12px; flex-basis: 100%; padding-inline-start: 18px; line-height: 1.6; }
.ai-live.big { border-radius: 18px; padding: 10px 16px 10px 14px; align-items: center; max-width: 520px; }
.ai-live.s-ok i { background: var(--ok); animation: pulseok 1.6s infinite; } .ai-live.s-ok { background: var(--ok-soft); box-shadow: none; } .ai-live.s-ok b { color: var(--ok); }
.ai-live.s-warn i { background: var(--warn); } .ai-live.s-warn { background: var(--warn-soft); box-shadow: none; } .ai-live.s-warn b { color: var(--warn); }
.ai-live.s-bad i { background: var(--bad); animation: pulsebad 1.6s infinite; } .ai-live.s-bad { background: var(--bad-soft); box-shadow: none; } .ai-live.s-bad b { color: var(--bad); }
.ai-live.s-busy i { background: var(--p); animation: aispin 1s linear infinite; border-radius: 3px; }
@keyframes aispin { to { transform: rotate(360deg); } }
.ai-check { margin-inline-start: auto; font-weight: 400; }
.ai-job h2 .ai-job-state { margin-inline-start: auto; font-weight: 400; } .ai-job h2 .ai-live { padding: 3px 10px; font-size: 12px; }
.ai-job .ai-out { max-height: 420px; overflow: auto; background: var(--surface-2); border-radius: 12px; padding: 12px 14px; margin: 8px 0 4px; }
.ai-job.s-running .ai-job-hint { color: var(--p); }
.rail .count.ai-dot { background: none; padding: 0; font-size: 12px; line-height: 1; } .rail .count.ai-dot.s-ok { color: var(--ok); animation: pulseok 1.8s infinite; border-radius: 50%; }
.rail .count.ai-dot.s-bad { color: var(--bad); } .rail .count.ai-dot.s-warn { color: var(--warn); }

/* ---------------------------------------------------------------- «امروز ← تابلو»: sticky-note board (design run 1, v1.13) */
.view-switch .seg { display: inline-flex; align-items: center; gap: 6px; }
.board-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12.5px; color: var(--muted); }
.board-legend .lg { display: inline-flex; align-items: center; gap: 6px; } .board-legend i { width: 14px; height: 14px; border-radius: 4px; background: var(--n); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .06); }
.lg-yellow, .n-yellow { --n: #fff3b8; --n-edge: #f2d45c; --n-ink: #6b5200; }
.lg-green, .n-green { --n: #daf5de; --n-edge: #8fd69b; --n-ink: #1d6b33; }
.lg-pink, .n-pink { --n: #ffdfe3; --n-edge: #f2a3ad; --n-ink: #9c2433; }
.lg-purple, .n-purple { --n: #ebe4ff; --n-edge: #b9a6f5; --n-ink: #4b33a3; }
.lg-blue, .n-blue { --n: #dcecff; --n-edge: #9cc4f5; --n-ink: #1d4f9c; }
.board { display: grid; grid-template-columns: minmax(0, 1fr) 270px; gap: 18px; align-items: start; }
.board-wall { position: relative; border-radius: 18px; padding: 26px 20px 30px; min-height: 260px;
  background-color: #fbfcfd; background-image: linear-gradient(rgba(29, 95, 209, .045) 1px, transparent 1px), linear-gradient(90deg, rgba(29, 95, 209, .045) 1px, transparent 1px); background-size: 28px 28px;
  box-shadow: inset 0 0 0 7px #e6eaf0, inset 0 0 0 8px #cfd6e0, 0 18px 30px -24px rgba(20, 35, 60, .5);
  display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: 22px 18px; align-items: start; }
.snote { position: relative; background: var(--n); border-radius: 4px 4px 12px 4px; padding: 22px 15px 13px; color: #2a2a2a; rotate: var(--tilt, 0deg);
  box-shadow: 0 1px 1px rgba(0, 0, 0, .06), 0 10px 14px -10px rgba(40, 30, 10, .45); border-top: 3px solid var(--n-edge);
  display: grid; gap: 7px; min-width: 0; transition: rotate .25s ease, translate .25s ease, box-shadow .25s ease; }
.snote:hover, .snote:focus-within { rotate: 0deg; translate: 0 -3px; box-shadow: 0 2px 2px rgba(0, 0, 0, .06), 0 16px 22px -12px rgba(40, 30, 10, .5); z-index: 2; }
.snote .tack, .mini-note .tack { position: absolute; top: -7px; left: 50%; margin-left: -9px; width: 18px; height: 18px; border-radius: 50%;
  background: radial-gradient(circle at 38% 32%, #fff 0 1.5px, #f87171 2.6px, #dc2626 6px, #991b1b 8px); box-shadow: 2px 3px 4px rgba(60, 20, 20, .35); }
.snote.n-green .tack { background: radial-gradient(circle at 38% 32%, #fff 0 1.5px, #6ee7a0 2.6px, #16a34a 6px, #14532d 8px); }
.snote.n-blue .tack, .snote.n-purple .tack { background: radial-gradient(circle at 38% 32%, #fff 0 1.5px, var(--p-2) 2.6px, var(--p) 6px, var(--p-dark) 8px); }
.snote header { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; font-weight: 800; font-size: 15px; }
.snote header a { color: #1f1f1f; } .snote header a:hover { color: var(--p); }
.snote .why { margin: 0; display: grid; gap: 2px; font-size: 13px; line-height: 1.7; } .snote .why b { color: var(--n-ink); }
.snote .why span { color: #4a4a4a; overflow-wrap: anywhere; }
.snote .meta { margin: 0; font-size: 11.5px; color: #6b6b6b; }
.snote footer { display: flex; gap: 6px; align-items: flex-start; flex-wrap: wrap; margin-top: 2px; }
.snote footer .btn { padding: 6px 12px; font-size: 13px; }
.snote-done { flex: 1 1 auto; } .snote-done > summary { list-style: none; } .snote-done > summary::-webkit-details-marker { display: none; }
.snote-done[open] > summary { background: rgba(255, 255, 255, .7); }
.snote-out { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; } .snote-out .btn { padding: 4px 10px; font-size: 12px; background: rgba(255, 255, 255, .75); }
.board-side { display: grid; gap: 18px; position: sticky; top: 70px; }
.receipt { position: relative; background: #fff; border-radius: 3px; padding: 20px 16px 22px; font-size: 13px; box-shadow: 0 10px 18px -12px rgba(20, 35, 60, .45), 0 0 0 1px var(--line);
  --zz: radial-gradient(circle at 6px 0, transparent 5px, #fff 5.5px); background-image: none; }
.receipt::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 7px; background: radial-gradient(circle at 5px -1px, transparent 5px, #fff 5.5px) 0 0 / 10px 7px repeat-x; }
.receipt .tape { position: absolute; top: -9px; left: 50%; width: 76px; height: 20px; margin-left: -38px; rotate: -3deg; background: rgba(250, 220, 130, .75); box-shadow: 0 1px 2px rgba(0, 0, 0, .08); }
.receipt h3 { margin: 0; font-size: 14px; text-align: center; letter-spacing: .3px; } .receipt .r-meta { margin: 2px 0 8px; text-align: center; color: var(--muted); font-size: 11.5px; }
.receipt .r-who { margin: 0 0 6px; text-align: center; font-weight: 700; }
.receipt ul { list-style: none; margin: 0; padding: 8px 0; border-block: 1px dashed #c9d1dc; display: grid; gap: 5px; }
.receipt li { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; } .receipt li span { overflow-wrap: anywhere; min-width: 0; } .receipt li b { flex: none; }
.receipt .r-total { display: flex; justify-content: space-between; margin: 8px 0 0; font-weight: 800; }
.mini-note { position: relative; background: #fff3b8; border-top: 3px solid #f2d45c; border-radius: 3px 3px 10px 3px; padding: 16px 12px 10px; rotate: .8deg; font-size: 12.5px; display: grid; gap: 2px;
  box-shadow: 0 8px 12px -9px rgba(40, 30, 10, .45); }
.mini-note:nth-child(even) { rotate: -.8deg; } .mini-note small { color: #6b6b6b; }

/* ---------------------------------------------------------------- card style «وایت‌برد و استیکر» (cs-board; design run 2 — Antigravity patch, fixed) */
/* Fixes vs the original patch: one paper colour (status colours stay meaningful), no hover zoom, tilt only on small tiles, customer header kept flush, warmer board. */
body.cs-board { --r: 8px; background-color: #ede3d0;
  background-image: radial-gradient(rgba(140, 100, 50, .16) 1.2px, transparent 1.4px), radial-gradient(rgba(110, 75, 35, .10) 1px, transparent 1.2px), radial-gradient(rgba(255, 255, 255, .35) 1px, transparent 1.3px);
  background-size: 17px 17px, 11px 11px, 23px 23px; background-position: 0 0, 6px 4px, 3px 9px; }
body.cs-board :is(.card, .kpi, .tile) {
  --pin: radial-gradient(circle at 38% 32%, #ffffff 0 1.6px, #f87171 3.4px, #dc2626 7.2px, #991b1b 8.8px, rgba(50, 15, 15, .42) 9.4px, transparent 10px);
  --pin-sh: radial-gradient(circle at 62% 72%, rgba(45, 25, 15, .3) 0 6.5px, transparent 11px);
  background-color: #fffdf3; background-image: var(--pin), var(--pin-sh); background-repeat: no-repeat; background-size: 26px 26px; background-position: center top 2px;
  padding-top: 30px; box-shadow: 0 2px 3px rgba(60, 45, 20, .1), 0 14px 18px -12px rgba(60, 45, 20, .38); }
body.cs-board :is(.kpis > .kpi, .tiles > .tile):nth-child(odd) { rotate: -.8deg; }
body.cs-board :is(.kpis > .kpi, .tiles > .tile):nth-child(even) { rotate: .7deg; }
body.cs-board :is(.kpis > .kpi, .tiles > .tile) { transition: rotate .25s ease, translate .25s ease; }
body.cs-board :is(.kpis > .kpi, .tiles > .tile):hover { rotate: 0deg; translate: 0 -2px; }
body.cs-board .kpi.lead { --pin: radial-gradient(circle at 40% 34%, #ffffff 0 1.6px, #ffd98a 3.2px, var(--gold) 7px, #a8740a 8.6px, rgba(0, 0, 0, .45) 9.2px, transparent 9.8px);
  background-image: var(--pin), var(--pin-sh), linear-gradient(150deg, var(--p), color-mix(in srgb, var(--p) 55%, var(--p-2))); background-size: 26px 26px, 26px 26px, auto; background-position: center top 2px, center top 2px, 0 0; }
body.cs-board :is(.card.err, .warnbox) { background-color: #ffe9ec; } body.cs-board .card.ok { background-color: #e8f8ec; }
body.cs-board .c-tabs { background: color-mix(in srgb, #ede3d0 88%, transparent); }
.cs-opt.cs-board .cs-demo { rotate: -1deg; background-color: #fffdf3; background-image: radial-gradient(circle at 38% 32%, #fff 0 1.2px, #f87171 2.2px, #dc2626 5.2px, #991b1b 6.6px, transparent 7.6px);
  background-repeat: no-repeat; background-size: 18px 18px; background-position: center top 3px; border-radius: 8px; box-shadow: 0 0 0 1.5px #e6d9bd, 0 12px 14px -10px rgba(60, 45, 20, .35); }
.cs-opt.cs-board input:checked + .cs-demo { box-shadow: 0 0 0 2.5px var(--p), 0 14px 16px -12px rgba(60, 45, 20, .45); }
/* every pinned style: the customer header stays flush (pins/nails add top padding to cards) */
body[class] .card.c-hero { padding: 0; }

/* ---------------------------------------------------------------- «امروز» top card (v1.15): title + view switch, filter strip, mine switch */
.today-head { display: grid; gap: 14px; }
.today-head .th-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.today-head .th-top h2 { margin: 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.view-switch { display: inline-flex; gap: 2px; padding: 4px; background: var(--surface-2); border-radius: 14px; box-shadow: inset 0 0 0 1px var(--line); }
.view-switch .vs { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 10px; color: var(--muted); font-weight: 600; font-size: 13.5px; transition: background .2s, color .2s, box-shadow .2s; }
.view-switch .vs:hover { color: var(--ink); text-decoration: none; }
.view-switch .vs.on { background: var(--surface); color: var(--p); box-shadow: 0 1px 0 var(--line), 0 6px 14px -10px rgba(29, 95, 209, .6); }
.th-filters { display: flex; flex-wrap: wrap; gap: 8px; }
.fchip { display: inline-flex; align-items: center; gap: 7px; padding: 6px 8px 6px 12px; border-radius: 999px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); color: var(--ink); font-size: 13px; font-weight: 600; white-space: nowrap; transition: box-shadow .2s, background .2s; }
.fchip:hover { box-shadow: inset 0 0 0 1px var(--p-2); text-decoration: none; }
.fchip i { width: 9px; height: 9px; border-radius: 50%; background: var(--n-edge, var(--muted)); flex: none; }
.fchip b { font-size: 11.5px; font-weight: 700; min-width: 22px; text-align: center; padding: 1px 7px; border-radius: 999px; background: var(--surface-2); color: var(--muted); }
.fchip.on { background: var(--p); color: var(--p-ink); box-shadow: none; } .fchip.on b { background: rgba(255, 255, 255, .22); color: #fff; } .fchip.on i { box-shadow: 0 0 0 2px rgba(255, 255, 255, .7); }
.f-yellow { --n-edge: #e3b92c; } .f-green { --n-edge: #3fb560; } .f-pink { --n-edge: #e46b7d; } .f-purple { --n-edge: #8b6ff0; } .f-blue { --n-edge: #4d8ff0; }
.th-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px 16px; flex-wrap: wrap; padding-top: 12px; border-top: 1px solid var(--line); }
.switch { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); font-size: 13.5px; font-weight: 600; }
.switch:hover { text-decoration: none; }
.switch .knob { position: relative; width: 38px; height: 22px; border-radius: 999px; background: #cdd5e0; transition: background .2s; flex: none; }
.switch .knob::after { content: ""; position: absolute; top: 3px; right: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .25); transition: right .2s; }
.switch.on .knob { background: var(--p); } .switch.on .knob::after { right: 19px; }
.th-hint { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); cursor: help; }
.saved-flash { display: flex; align-items: center; gap: 10px; animation: rise .4s cubic-bezier(.2, .8, .2, 1); }
/* outcome popup */
dialog.out-pop { border: 0; padding: 0; border-radius: 24px; width: min(480px, calc(100vw - 24px)); background: var(--surface); color: var(--ink);
  box-shadow: 0 40px 80px -30px rgba(10, 25, 50, .55); animation: popIn .28s cubic-bezier(.2, .9, .3, 1.2); }
dialog.out-pop::backdrop { background: rgba(15, 30, 55, .45); backdrop-filter: blur(3px); }
.out-pop .op-in { position: relative; padding: 22px 20px 18px; display: grid; gap: 14px; }
.out-pop .op-head { display: grid; gap: 4px; padding-inline-end: 34px; }
.out-pop .op-badge { justify-self: start; background: var(--ok-soft); color: var(--ok); font-weight: 700; font-size: 12px; padding: 2px 10px; border-radius: 999px; }
.out-pop .op-head b { font-size: 17px; } .out-pop .op-head small { color: var(--muted); font-size: 12.5px; }
.out-pop .op-chips { display: flex; flex-wrap: wrap; gap: 6px; } .out-pop .op-chips .chip { font-size: 12.5px; cursor: pointer; border: 0; }
.out-pop textarea { width: 100%; min-height: 84px; resize: vertical; border-radius: 14px; padding: 10px 12px; font-size: 15px; line-height: 1.8; }
.out-pop .op-fu { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.out-pop .op-fu legend { font-size: 12.5px; color: var(--muted); margin-bottom: 6px; padding: 0; width: 100%; }
.out-pop .op-fu label { cursor: pointer; } .out-pop .op-fu input { position: absolute; opacity: 0; }
.out-pop .op-fu span { display: inline-block; padding: 6px 12px; border-radius: 999px; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); font-size: 13px; font-weight: 600; }
.out-pop .op-fu input:checked + span { background: var(--p-soft); color: var(--p); box-shadow: inset 0 0 0 1.5px var(--p); }
.out-pop .op-fu input:focus-visible + span { outline: 2px solid var(--p-2); outline-offset: 2px; }
.out-pop .op-btns { display: flex; gap: 8px; } .out-pop .op-btns .primary { flex: 1; padding: 11px; font-size: 15px; }

/* ---------------------------------------------------------------- «مشتریان» filter card (v1.16) */
.cfilter { display: grid; gap: 14px; }
.cf-search { display: flex; gap: 10px; align-items: stretch; flex-wrap: wrap; }
.cf-q { flex: 1 1 320px; display: flex; align-items: center; gap: 8px; background: var(--surface-2); border-radius: 14px; padding: 0 14px; box-shadow: inset 0 0 0 1px var(--line); color: var(--muted); min-width: 0; }
.cf-q:focus-within { box-shadow: inset 0 0 0 2px var(--p-2); background: var(--surface); }
.cf-q input { flex: 1; border: 0; background: transparent; box-shadow: none; padding: 12px 0; font-size: 15px; min-width: 0; outline: none; }
.cf-sort { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--muted); white-space: nowrap; }
.cf-sort select { min-width: 150px; }
.cfilter .cf-q, .cfilter .cf-sort { flex-direction: row; }
.cf-search .primary { padding-inline: 20px; }
.cf-chips { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.cchip { position: relative; cursor: pointer; }
.cchip input { position: absolute; opacity: 0; pointer-events: none; }
.cchip span { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: 999px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); font-size: 13px; font-weight: 600; color: var(--ink); transition: background .2s, box-shadow .2s, color .2s; }
.cchip span::before { content: ""; width: 14px; height: 14px; border-radius: 5px; box-shadow: inset 0 0 0 1.5px #b9c3d1; background: var(--surface); flex: none; }
.cchip input:checked + span, .cchip.on span { background: var(--p-soft); color: var(--p); box-shadow: inset 0 0 0 1.5px var(--p); }
.cchip input:checked + span::before, .cchip.on span::before { background: var(--p) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px no-repeat; box-shadow: none; }
.cchip input:focus-visible + span { outline: 2px solid var(--p-2); outline-offset: 2px; }
.cchip.link:hover { text-decoration: none; } .cchip.danger.on span { background: var(--bad-soft); color: var(--bad); box-shadow: inset 0 0 0 1.5px var(--bad); }
.cchip.danger.on span::before { background-color: var(--bad); }
.cf-sep { width: 1px; height: 22px; background: var(--line); margin-inline: 4px; }
.cf-more { border-radius: 14px; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); }
.cf-more > summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 8px; padding: 10px 14px; font-weight: 700; font-size: 13.5px; color: var(--ink); }
.cf-more > summary::-webkit-details-marker { display: none; }
.cf-more > summary::after { content: "▾"; margin-inline-start: auto; color: var(--muted); transition: transform .2s; } .cf-more[open] > summary::after { transform: rotate(180deg); }
.cf-more > summary b { background: var(--p); color: #fff; font-size: 11px; border-radius: 999px; padding: 0 8px; }
.cf-groups { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; padding: 0 14px 4px; }
.cf-groups .cf-group { grid-template-columns: minmax(0, 1fr); padding: 12px; border-radius: 12px; background: var(--surface); box-shadow: 0 1px 0 var(--line); display: grid; gap: 10px; align-content: start; min-width: 0; }
.cf-groups .cf-gt { font-size: 12px; font-weight: 700; color: var(--p); }
.cf-groups label { display: grid; gap: 4px; font-size: 12.5px; color: var(--muted); min-width: 0; } .cf-groups label select, .cf-groups label input { width: 100%; }
.cf-range { display: grid; gap: 4px; font-size: 12.5px; color: var(--muted); } .cf-range div { display: flex; align-items: center; gap: 8px; } .cf-range { min-width: 0; } .cf-range input { flex: 1 1 0; width: 0; min-width: 0; } .cf-range i { font-style: normal; font-size: 12px; }
.cf-more-foot { display: flex; justify-content: flex-end; padding: 10px 14px 14px; }
.cf-active { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.achip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 6px 3px 12px; border-radius: 999px; background: var(--p-soft); color: var(--p); font-size: 12.5px; font-weight: 600; }
.achip b { width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; background: rgba(29, 95, 209, .15); font-size: 13px; line-height: 1; }
.achip:hover { text-decoration: none; background: color-mix(in srgb, var(--p-soft) 70%, var(--p-2)); }
.cf-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; padding-top: 12px; border-top: 1px solid var(--line); }
.cf-count { font-size: 13px; color: var(--muted); } .cf-count b { font-size: 18px; color: var(--ink); font-weight: 800; }
/* results: profile-text hits are paler, blocked rows red-tinted */
tr.deep-hit td { color: var(--muted); } tr.deep-hit td a { color: color-mix(in srgb, var(--p) 70%, var(--muted)); }
.hit-in { display: block; font-size: 11.5px; color: var(--muted); margin-top: 2px; } .hit-in::before { content: "↳ "; }
tr.is-blocked td { background: color-mix(in srgb, var(--bad-soft) 55%, transparent); }
/* ---------------------------------------------------------------- blocked customers + admin actions (v1.16) */
.tag.blocked-tag { background: var(--bad); color: #fff; font-weight: 700; } .tag.optout-tag { background: var(--warn-soft); color: var(--warn); }
.blocked-banner { display: flex; align-items: center; gap: 14px; background: var(--bad-soft); color: var(--bad); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--bad) 45%, transparent); flex-wrap: wrap; }
.blocked-banner > div { flex: 1 1 260px; display: grid; gap: 2px; } .blocked-banner b { font-size: 16px; } .blocked-banner span { color: var(--ink); font-size: 13px; } .blocked-banner small { color: var(--muted); font-size: 12px; }
.c-hero.is-blocked .c-av { filter: grayscale(1); opacity: .7; }
.admin-actions .aa-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.aa-item { display: grid; gap: 10px; align-content: space-between; padding: 14px; border-radius: 14px; background: var(--surface-2); min-width: 0; }
.aa-item > div { display: grid; gap: 4px; } .aa-item b { font-size: 14px; } .aa-item span { font-size: 12.5px; color: var(--muted); line-height: 1.8; }
.aa-item.on { background: var(--bad-soft); }
.aa-confirm > summary { list-style: none; display: inline-flex; } .aa-confirm > summary::-webkit-details-marker { display: none; }
.aa-confirm[open] > summary { display: none; }
.btn.warn-btn { background: var(--warn-soft); color: var(--warn); } .btn.danger-btn { background: var(--bad); color: #fff; } .btn.danger-btn:hover { background: color-mix(in srgb, var(--bad) 85%, #000); }
.pr.blocked .avatar { box-shadow: 0 0 0 3px var(--surface), 0 0 0 5px var(--bad) !important; background: var(--bad-soft); color: var(--bad); }
.pr.blocked .tag.blocked-tag { font-size: 10.5px; padding: 0 6px; }
.feed li.is-blocked { background: color-mix(in srgb, var(--bad-soft) 60%, transparent); border-radius: 10px; }
.blocked-strip { margin: 0 0 8px; padding: 8px 14px; border-radius: 12px; background: var(--bad); color: #fff; font-weight: 700; }
.ccard.is-blocked { box-shadow: inset 0 0 0 2px var(--bad); }

/* «امروز» → «فعلاً لازم نیست» (rested people: a reason to call, but not now) */
.quiet-list { opacity: .92; }
.quiet-list > summary { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; cursor: pointer; list-style: none; }
.quiet-list > summary::-webkit-details-marker { display: none; }
.quiet-list > summary::after { content: "▾"; margin-inline-start: auto; color: var(--muted); transition: transform .2s; }
.quiet-list[open] > summary::after { transform: rotate(180deg); }
.quiet-list > summary small { color: var(--muted); font-weight: 400; min-width: 0; }
.quiet-list[open] > summary { margin-bottom: 12px; }
.quiet-list .quiet-why { color: var(--muted); }
/* v1.17 day plan + «چرا نه؟» + reminder page + reason quality (nudge.php) */
.plan-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 10px 12px; border-radius: 14px; background: var(--p-soft); color: var(--p-dark); }
.plan-bar .pb-label { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; min-width: 0; }
.plan-bar .pb-track { flex: 1 1 120px; height: 8px; border-radius: 999px; background: color-mix(in srgb, var(--p) 18%, var(--surface)); overflow: hidden; }
.plan-bar .pb-track i { display: block; height: 100%; border-radius: inherit; background: var(--p); transition: width .4s; }
.plan-bar.full { background: var(--ok-soft); color: var(--ok); } .plan-bar.full .pb-track i { background: var(--ok); }
tr.in-plan td:first-child { font-weight: 600; } .plan-pin { font-size: 12px; }
.skip-why { margin-top: 8px; } .skip-why > summary { cursor: pointer; color: var(--muted); font-size: 13px; width: max-content; }
.skip-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.chip-btn { border: 1px solid var(--line); background: var(--surface); color: var(--ink); border-radius: 999px; padding: 7px 14px; font: inherit; font-size: 13px; cursor: pointer; }
.chip-btn:hover { border-color: var(--p); color: var(--p); }
.nudge-card { max-width: 560px; margin-inline: auto; display: flex; flex-direction: column; gap: 14px; }
.nudge-card .nudge-name { margin: 0; font-size: 26px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.nudge-card .nudge-why { margin: 0; padding: 12px 14px; border-radius: 14px; background: var(--warn-soft); color: #6d4300; line-height: 1.8; }
.nudge-acts { display: flex; flex-wrap: wrap; gap: 10px; } .nudge-acts form { display: contents; }
.nudge-acts .btn.big { flex: 1 1 180px; justify-content: center; }
.nudge-skip { border-top: 1px dashed var(--line); padding-top: 12px; display: flex; flex-direction: column; gap: 10px; }
.quality > summary { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; cursor: pointer; list-style: none; }
.quality > summary::-webkit-details-marker { display: none; } .quality > summary small { color: var(--muted); font-weight: 400; }
.quality[open] > summary { margin-bottom: 12px; } .tag.warn { --c: var(--warn); }
/* v1.18 «چرا الان» facts + «چی بگم؟» call opener (nudge.php) */
.why3 { display: inline-flex; flex-wrap: wrap; gap: 4px 6px; margin-top: 4px; }
.why3 i { font-style: normal; font-size: 12px; line-height: 1.8; padding: 0 8px; border-radius: 999px; background: var(--surface-2); color: var(--muted); white-space: nowrap; }
.why3 i:first-child { background: var(--p-soft); color: var(--p-dark); }
.snote .meta .why3 i { background: rgba(255, 255, 255, .55); }
.opener { border: 1px solid var(--line); border-radius: 18px; padding: 14px 16px; background: linear-gradient(180deg, var(--surface), var(--surface-2)); display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.opener h3 { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 15px; } .opener h3 small { color: var(--muted); font-weight: 400; font-size: 12px; }
.opener .op-open { margin: 0; font-size: 16px; line-height: 1.9; color: var(--ink); font-weight: 600; }
.opener .op-h { margin: 0; font-size: 12px; color: var(--muted); }
.opener .op-asks { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
.opener .op-asks li { display: flex; gap: 8px; align-items: baseline; line-height: 1.8; min-width: 0; }
.opener .op-step { flex: none; font-size: 11px; padding: 0 8px; border-radius: 999px; background: var(--p-soft); color: var(--p); line-height: 1.9; }
.opener.is-ai { border-color: color-mix(in srgb, var(--p) 35%, var(--line)); }
.opener .op-tip { margin: 0; } .opener .op-ai { align-self: flex-start; }
/* v1.19 journal pages: «کار تیم» (owner only) · staff profile · «دفتر یادداشت‌ها» — calm, warm, sentence-first */
.j-page { display: flex; flex-direction: column; gap: 18px; max-width: 980px; width: 100%; margin-inline: auto; color: var(--j-ink); }
.j-head, .j-hero { background: var(--j-paper); border: 1px solid var(--j-line); border-radius: 24px; padding: 24px 26px; }
.j-head h1, .j-hero h1 { margin: 2px 0 6px; font-size: clamp(24px, 3.4vw, 32px); font-weight: 800; letter-spacing: -.01em; text-wrap: balance; }
.j-kicker { margin: 0; display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--j-accent); font-weight: 700; }
.j-sub { margin: 0; color: var(--j-muted); line-height: 1.9; max-width: 68ch; }
.j-hero { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; } .j-hero > div { min-width: 0; flex: 1 1 260px; }
.j-back { margin: 0; } .j-back a { display: inline-flex; align-items: center; gap: 6px; color: var(--j-muted); font-size: 13px; }
.j-av { --h: 20; width: 34px; height: 34px; flex: none; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 14px;
  background: hsl(var(--h) 55% 90%); color: hsl(var(--h) 45% 32%); box-shadow: inset 0 0 0 1px hsl(var(--h) 40% 80%); }
.j-av.big { width: 64px; height: 64px; font-size: 26px; }
.j-people { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr)); gap: 12px; }
.j-person { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "av name" "av role" "nums nums" "week week"; gap: 2px 12px; align-items: center;
  padding: 16px; border-radius: 20px; background: var(--surface); border: 1px solid var(--j-line); color: var(--j-ink); text-decoration: none; transition: transform .15s, box-shadow .15s, border-color .15s; }
.j-person:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--j-accent) 40%, var(--j-line)); box-shadow: 0 14px 30px -22px rgba(80, 50, 20, .45); }
.j-person .j-av { grid-area: av; width: 46px; height: 46px; font-size: 18px; }
.jp-name { grid-area: name; font-weight: 800; min-width: 0; } .jp-role { grid-area: role; font-size: 12px; color: var(--j-muted); }
.jp-nums { grid-area: nums; margin-top: 10px; font-size: 13px; color: var(--j-muted); line-height: 1.9; } .jp-nums b { color: var(--j-ink); }
.jp-week { grid-area: week; font-size: 11px; color: color-mix(in srgb, var(--j-muted) 75%, transparent); }
.j-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.j-seg { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 4px; border-radius: 999px; background: var(--j-paper-2); }
.j-seg a { padding: 6px 14px; border-radius: 999px; font-size: 13px; color: var(--j-muted); text-decoration: none; }
.j-seg a.on { background: var(--surface); color: var(--j-ink); font-weight: 700; box-shadow: 0 1px 3px rgba(60, 40, 20, .12); }
.j-count { font-size: 13px; color: var(--j-muted); }
.j-toggle { font-size: 13px; color: var(--j-muted); padding: 5px 12px; border-radius: 999px; border: 1px dashed var(--j-line); text-decoration: none; }
.j-toggle.on { color: var(--j-accent); border-color: var(--j-accent); border-style: solid; }
.journal { display: flex; flex-direction: column; gap: 4px; }
.j-day { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 2; margin: 14px 0 4px; font-size: 13px; font-weight: 700; color: var(--j-muted); }
.j-day span { display: inline-block; padding: 4px 14px; border-radius: 999px; background: var(--j-paper-2); border: 1px solid var(--j-line); }
.j-list { list-style: none; margin: 0; padding: 0; position: relative; }
.j-list::before { content: ""; position: absolute; top: 8px; bottom: 8px; inset-inline-start: 16px; width: 2px; background: var(--j-line); border-radius: 2px; }
.j-ev { position: relative; display: flex; gap: 14px; padding: 10px 0; }
.j-ev > .j-av, .j-ev > .j-ico { position: relative; z-index: 1; }
.j-ico { width: 34px; height: 34px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--j-paper); border: 1px solid var(--j-line); color: var(--j-muted); }
.j-body { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 6px; padding-top: 5px; }
.j-line { margin: 0; line-height: 1.95; font-size: 15px; } .j-line a { color: var(--j-ink); font-weight: 700; text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--j-accent) 35%, transparent); }
.j-line a.j-who, .j-line b.j-who { color: var(--j-accent); border: 0; }
.j-star { color: #c99211; font-size: 11px; letter-spacing: 1px; }
.j-tag { display: inline-block; font-size: 12px; padding: 0 10px; border-radius: 999px; line-height: 1.95; background: var(--j-paper-2); color: var(--j-muted); vertical-align: 1px; }
.j-tag.t-good { background: var(--ok-soft); color: var(--ok); } .j-tag.t-warn { background: var(--warn-soft); color: var(--warn); } .j-tag.t-mute { background: var(--surface-2); color: var(--muted); }
.j-quote { margin: 0; padding: 10px 14px; border-radius: 14px; background: var(--j-paper); border-inline-start: 3px solid var(--j-accent); color: color-mix(in srgb, var(--j-ink) 85%, var(--j-muted)); line-height: 1.95; font-size: 14px; overflow-wrap: anywhere; }
.j-ev.k-call .j-quote { border-inline-start-color: var(--p); } .j-ev.k-task .j-quote { border-inline-start-color: var(--ok); } .j-ev.k-change .j-quote { border-inline-start-color: var(--j-line); }
.j-meta { font-size: 12px; color: var(--j-muted); }
.j-empty { padding: 30px; text-align: center; color: var(--j-muted); background: var(--j-paper); border-radius: 20px; border: 1px dashed var(--j-line); }
.j-stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr)); gap: 12px; }
.j-stats > div { display: flex; flex-direction: column; gap: 2px; padding: 16px; border-radius: 20px; background: var(--surface); border: 1px solid var(--j-line); }
.j-stats span { font-size: 12px; color: var(--j-muted); } .j-stats b { font-size: 28px; font-weight: 800; line-height: 1.3; } .j-stats b em { font-style: normal; font-size: 16px; color: var(--j-muted); }
.j-stats small { font-size: 11px; color: var(--j-muted); }
.j-delta { font-size: 11px; font-weight: 700; } .j-delta.up { color: var(--ok); } .j-delta.down { color: var(--j-accent); }
.j-streak { color: var(--j-accent); font-weight: 700; }
.j-card { background: var(--surface); border: 1px solid var(--j-line); border-radius: 24px; padding: 20px 22px; min-width: 0; }
.j-card h2 { margin: 0 0 14px; font-size: 17px; } .j-card h2 small { color: var(--j-muted); font-weight: 400; font-size: 12px; }
.j-bars { display: grid; grid-template-columns: repeat(14, minmax(0, 1fr)); gap: 6px; align-items: end; height: 150px; }
.j-bar { display: flex; flex-direction: column; align-items: center; gap: 6px; height: 100%; justify-content: flex-end; }
.j-bar .b-all { width: 100%; max-width: 26px; min-height: 3px; border-radius: 8px 8px 4px 4px; background: color-mix(in srgb, var(--j-accent) 22%, var(--j-paper-2)); display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; }
.j-bar .b-good { display: block; width: 100%; background: var(--j-accent); }
.j-bar i { font-style: normal; font-size: 10px; color: var(--j-muted); }
.j-legend { margin: 12px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; font-size: 12px; color: var(--j-muted); }
.j-legend span { width: 12px; height: 12px; border-radius: 4px; display: inline-block; } .j-legend .lg-all { background: color-mix(in srgb, var(--j-accent) 22%, var(--j-paper-2)); } .j-legend .lg-good { background: var(--j-accent); }
.j-reasons { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 180px), 1fr)); gap: 10px; }
.j-reasons li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 8px; padding: 12px 14px; border-radius: 16px; background: var(--j-paper); }
.j-reasons b { font-size: 18px; } .j-reasons small { grid-column: 1 / -1; color: var(--j-muted); font-size: 11px; }
.j-search { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.j-search .j-q { flex: 1 1 260px; display: flex; flex-direction: row; align-items: center; gap: 8px; padding: 0 14px; border-radius: 999px; background: var(--surface); border: 1px solid var(--j-line); color: var(--j-muted); min-width: 0; }
.j-search .j-q input { border: 0; background: transparent; padding: 11px 0; flex: 1; min-width: 0; box-shadow: none; }
.j-search select { border-radius: 999px; }
.j-dossiers { columns: 2 320px; column-gap: 14px; }
.j-dossier { break-inside: avoid; margin-bottom: 14px; padding: 16px 18px; border-radius: 22px; background: var(--j-paper); border: 1px solid var(--j-line); display: flex; flex-direction: column; gap: 10px; }
.j-dossier header { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; font-weight: 800; font-size: 16px; } .j-dossier header a { color: var(--j-ink); text-decoration: none; }
.jd-count { margin-inline-start: auto; font-size: 12px; font-weight: 400; color: var(--j-accent); background: var(--j-accent-soft); padding: 0 10px; border-radius: 999px; line-height: 1.9; }
.jd-facts { margin: -4px 0 0; font-size: 12px; color: var(--j-muted); }
.j-dossier ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.j-dossier li { padding: 10px 12px; border-radius: 14px; background: var(--surface); border: 1px solid color-mix(in srgb, var(--j-line) 70%, transparent); }
.j-dossier li p { margin: 0 0 4px; line-height: 1.9; font-size: 14px; overflow-wrap: anywhere; } .j-dossier li span { font-size: 11px; color: var(--j-muted); }
.jd-more { font-size: 12px; color: var(--j-accent); }
/* «امروز»: private streak + the store's weekly goal */
.pb-streak { font-size: 12px; font-weight: 700; color: var(--j-accent); background: var(--j-accent-soft); padding: 2px 10px; border-radius: 999px; }
.team-goal { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; padding: 8px 12px; border-radius: 14px; background: var(--j-paper); color: var(--j-ink); font-size: 13px; }
.team-goal > span:first-child { display: inline-flex; align-items: center; gap: 6px; }
.team-goal .pb-track { flex: 1 1 120px; height: 6px; border-radius: 999px; background: var(--j-paper-2); overflow: hidden; }
.team-goal .pb-track i { display: block; height: 100%; background: var(--j-accent); border-radius: inherit; }
.team-goal.full { background: var(--ok-soft); color: var(--ok); } .team-goal.full .pb-track i { background: var(--ok); }
/* v1.20 «اثر تماس‌ها» (owner only): the verdict + the two groups side by side */
.imp-verdict { border-radius: 24px; padding: 20px 24px; background: var(--j-paper); border: 1px solid var(--j-line); }
.imp-verdict h2 { margin: 0 0 6px; font-size: 22px; } .imp-verdict p { margin: 0; line-height: 2; max-width: 70ch; color: color-mix(in srgb, var(--j-ink) 85%, var(--j-muted)); }
.imp-verdict.good { background: var(--ok-soft); border-color: color-mix(in srgb, var(--ok) 30%, transparent); } .imp-verdict.good h2 { color: var(--ok); }
.imp-verdict.bad { background: var(--warn-soft); border-color: color-mix(in srgb, var(--warn) 30%, transparent); } .imp-verdict.bad h2 { color: var(--warn); }
.imp-verdict.wait h2, .imp-verdict.unsure h2 { color: var(--j-accent); }
.imp-compare { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 12px; align-items: stretch; }
.imp-col { display: flex; flex-direction: column; gap: 4px; padding: 20px; border-radius: 22px; background: var(--surface); border: 1px solid var(--j-line); min-width: 0; }
.imp-col.hold { background: var(--j-paper); border-style: dashed; }
.imp-k { font-size: 13px; color: var(--j-muted); } .imp-col b { font-size: 40px; font-weight: 800; line-height: 1.2; } .imp-col small { color: var(--j-muted); font-size: 12px; }
.imp-vs { align-self: center; font-size: 12px; color: var(--j-muted); }
@media (max-width: 640px) { .imp-compare { grid-template-columns: minmax(0, 1fr); } .imp-vs { justify-self: center; } }
/* v1.21 sign-in with a code · «پیامک به همه» audiences · patterns */
.sms-aud .aud-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 180px), 1fr)); gap: 10px; }
.sms-aud .aud { display: flex; flex-direction: column; gap: 2px; padding: 14px 16px; border-radius: 18px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); text-decoration: none; transition: border-color .15s, transform .15s; }
.sms-aud .aud:hover { border-color: var(--p); transform: translateY(-1px); }
.sms-aud .aud span { font-size: 12px; color: var(--muted); } .sms-aud .aud em { font-style: normal; font-weight: 800; color: var(--p); margin-top: 6px; }
.pat-send .pat-one { border-top: 1px solid var(--line); padding: 10px 0; } .pat-send .pat-one:first-of-type { border-top: 0; }
.pat-send summary { cursor: pointer; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.pat-preview { margin: 0; padding: 12px 14px; border-radius: 16px 16px 4px 16px; background: var(--p-soft); color: var(--ink); line-height: 1.9; white-space: normal; overflow-wrap: anywhere; max-width: 46ch; }
.pat-import { border-top: 1px solid var(--line); padding: 12px 0; } .pat-import:first-of-type { border-top: 0; }
/* v1.22 «ایمیل و پیامک»: shared tab bar, active-panel strip, pattern cards, the new-pattern steps, panel picker */
.msg-tabs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: -4px 0 4px; }
.msg-tabs .mt-panel { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: var(--p-dark); background: var(--p-soft); padding: 5px 12px; border-radius: 999px; }
.msg-tabs .mt-list { display: flex; gap: 2px; padding: 4px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); max-width: 100%; }
.msg-tabs .mt-list a { white-space: nowrap; padding: 7px 14px; border-radius: 999px; font-size: 13px; color: var(--muted); text-decoration: none; }
.msg-tabs .mt-list a.on { background: var(--p); color: #fff; font-weight: 700; }
.msg-panel { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 16px 18px; border-radius: 20px; background: var(--p-soft); color: var(--p-dark); }
.msg-panel .mp-icon { width: 42px; height: 42px; border-radius: 14px; display: grid; place-items: center; background: var(--surface); color: var(--p); flex: none; }
.msg-panel > div { flex: 1 1 260px; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .msg-panel > div span { font-size: 13px; line-height: 1.9; color: color-mix(in srgb, var(--p-dark) 80%, var(--muted)); }
mark.var { background: color-mix(in srgb, var(--p) 14%, var(--surface)); color: var(--p-dark); border-radius: 6px; padding: 0 6px; font-weight: 700; font-size: .92em; white-space: nowrap; }
mark.var.raw { background: var(--warn-soft); color: var(--warn); }
.msg-h { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; } .msg-h h2 { margin: 0; }
.msg-none { padding: 18px; border-radius: 16px; background: var(--surface-2); color: var(--muted); text-align: center; }
.pat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 12px; margin-top: 12px; }
.pat-card { display: flex; flex-direction: column; gap: 10px; padding: 16px; border-radius: 20px; border: 1px solid var(--line); background: var(--surface); min-width: 0; }
.pat-card.off { opacity: .6; } .pat-card header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px; }
.pat-card footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px; margin-top: auto; }
.pst { font-size: 11px; font-weight: 700; padding: 2px 10px; border-radius: 999px; background: var(--surface-2); color: var(--muted); white-space: nowrap; }
.pst.s-approved { background: var(--ok-soft); color: var(--ok); } .pst.s-pending { background: var(--warn-soft); color: var(--warn); } .pst.s-rejected { background: var(--bad-soft); color: var(--bad); }
.msg-bubble { padding: 12px 14px; border-radius: 18px 18px 4px 18px; background: var(--surface-2); line-height: 2; font-size: 14px; overflow-wrap: anywhere; }
.pat-uses { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; font-size: 12px; }
.pat-uses li { padding-inline-start: 14px; position: relative; color: var(--ink); } .pat-uses li::before { content: ""; position: absolute; inset-inline-start: 0; top: .7em; width: 6px; height: 6px; border-radius: 50%; background: var(--p); }
.pat-uses li.on::before { background: var(--ok); } .pat-uses li.off { color: var(--muted); } .pat-uses li.off::before { background: var(--line); }
.pat-new { display: flex; flex-direction: column; gap: 16px; }
.pn-step { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; }
.pn-step > div { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.pn-n { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--p); color: #fff; font-weight: 800; font-size: 13px; }
.pn-kinds { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 10px; }
.pn-kind { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 16px; border: 1px solid var(--line); cursor: pointer; }
.pn-kind:has(input:checked) { border-color: var(--p); background: var(--p-soft); } .pn-kind span { display: flex; flex-direction: column; gap: 2px; } .pn-kind small { color: var(--muted); }
.pn-vars { display: flex; flex-wrap: wrap; gap: 6px; } .pn-vars[hidden] { display: none; }
.pn-preview { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 12px; } .pn-preview small { color: var(--muted); display: block; margin-bottom: 4px; }
.pn-raw { margin: 0; padding: 12px 14px; border-radius: 14px; background: #1b2638; color: #e6edf7; font-family: inherit; font-size: 13px; line-height: 2; white-space: pre-wrap; overflow-wrap: anywhere; }
.pn-checks { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; font-size: 12px; }
.pn-checks li { padding: 3px 10px; border-radius: 999px; } .pn-checks li.ok { background: var(--ok-soft); color: var(--ok); } .pn-checks li.no { background: var(--bad-soft); color: var(--bad); } .pn-checks li.warn { background: var(--warn-soft); color: var(--warn); }
.pat-in .pi-map { display: flex; flex-direction: column; gap: 6px; } .pat-in .pi-map small { color: var(--muted); }
.pat-in .pi-map label { display: flex; flex-direction: row; align-items: center; gap: 8px; } .pi-tok { font-family: ui-monospace, monospace; font-size: 12px; background: var(--warn-soft); color: var(--warn); padding: 1px 8px; border-radius: 6px; }
.panel-pick { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 10px; }
.panel-pick .pp { display: flex; gap: 10px; align-items: flex-start; padding: 14px 16px; border-radius: 18px; border: 1px solid var(--line); cursor: pointer; }
.panel-pick .pp:has(input:checked) { border-color: var(--p); background: var(--p-soft); } .panel-pick .pp span { display: flex; flex-direction: column; gap: 2px; } .panel-pick .pp small { color: var(--muted); }
.panel-pick .pp em { font-style: normal; font-size: 11px; font-weight: 700; color: var(--ok); }
.msg-empty { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; } .msg-empty h2 { margin: 0; }
.msg-steps { margin: 0; padding-inline-start: 22px; display: flex; flex-direction: column; gap: 10px; line-height: 1.9; }
.feed .n-ico { display: grid; place-items: center; background: var(--p-soft); color: var(--p); }   /* «اعلان‌های من»: the icon column the feed grid expects (the text was squeezed into it) */
/* v1.23 sign-in card («ورود») — one centred card, method switch, warm paper (journal tokens) */
.auth { width: 100%; display: grid; place-items: center; }
.auth-card { width: min(440px, 100%); margin-inline: auto; display: flex; flex-direction: column; gap: 16px; padding: 30px 28px 24px; border-radius: 28px; background: var(--surface);
  border: 1px solid var(--j-line); box-shadow: 0 40px 80px -48px rgba(70, 45, 20, .45); animation: rise .6s cubic-bezier(.2, .8, .2, 1); color: var(--j-ink); }
.auth-card .login-logo { max-width: 220px; margin: 0 auto; }
.auth-card h1 { margin: 0; text-align: center; font-size: 21px; font-weight: 800; letter-spacing: -.01em; }
.auth-sub { margin: -8px 0 0; text-align: center; font-size: 13px; line-height: 1.9; color: var(--j-muted); text-wrap: balance; }
.auth-switch { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border-radius: 16px; background: var(--j-paper-2); }
.auth-switch a { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 8px; border-radius: 12px; font-size: 14px; font-weight: 600; color: var(--j-muted); text-decoration: none; transition: background .15s, color .15s, box-shadow .15s; }
.auth-switch a[aria-selected="true"] { background: var(--surface); color: var(--j-ink); box-shadow: 0 1px 3px rgba(60, 40, 20, .14), inset 0 -2px 0 var(--j-accent); }
.auth-pane { display: flex; flex-direction: column; gap: 12px; } .auth-pane[hidden] { display: none; }
.auth-pane label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--j-muted); }
.auth-pane input { border-radius: 14px; padding: 12px 14px; border: 1px solid var(--j-line); background: var(--j-paper); font-size: 15px; color: var(--j-ink); }
.auth-pane input:focus { outline: none; border-color: var(--j-accent); box-shadow: 0 0 0 4px var(--j-accent-soft); background: var(--surface); }
.auth-code { text-align: center; letter-spacing: .5em; font-size: 22px !important; font-weight: 800; }
.auth-go, .lw .btn.primary { width: 100%; padding: 13px; border: 0; border-radius: 14px; background: var(--j-ink); color: #fff; font: inherit; font-size: 15px; font-weight: 700; cursor: pointer; transition: transform .1s, background .15s; }
.auth-go:hover, .lw .btn.primary:hover { background: color-mix(in srgb, var(--j-ink) 85%, var(--j-accent)); } .auth-go:active { transform: translateY(1px); }
.auth-row { display: flex; justify-content: space-between; gap: 8px; }
.auth-link { background: none; border: 0; padding: 0; font: inherit; font-size: 13px; color: var(--j-accent); cursor: pointer; text-decoration: none; }
.auth-msg { margin: 0; padding: 10px 14px; border-radius: 12px; font-size: 13px; line-height: 1.8; } .auth-msg.err { background: var(--bad-soft); color: var(--bad); } .auth-msg.ok { background: var(--ok-soft); color: var(--ok); }
.auth-hint, .auth-foot { margin: 0; font-size: 12px; line-height: 1.9; color: var(--j-muted); text-align: center; }
.auth-foot { border-top: 1px dashed var(--j-line); padding-top: 12px; }
/* «حساب من» → «نوع ورود من»: one step at a time */
.lw { display: flex; flex-direction: column; gap: 14px; }
.lw h2 { margin: 0; } .lw-now { margin: 0; font-size: 13px; color: var(--j-muted); } .lw-now b { color: var(--j-ink); }
.lw-q { margin: 0; line-height: 1.9; }
.lw-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; counter-reset: s; }
.lw-steps li { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 11px; color: var(--j-muted); text-align: center; position: relative; }
.lw-steps li span { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 12px; background: var(--j-paper-2); color: var(--j-muted); }
.lw-steps li.now span { background: var(--j-ink); color: #fff; } .lw-steps li.now { color: var(--j-ink); font-weight: 700; }
.lw-steps li.done span { background: var(--ok-soft); color: var(--ok); } .lw-steps li.skip { opacity: .45; }
.lw-modes { display: flex; flex-direction: column; gap: 8px; }
.lw-mode { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: 16px; border: 1px solid var(--j-line); cursor: pointer; transition: border-color .15s, background .15s; }
.lw-mode:has(input:checked) { border-color: var(--j-ink); background: var(--j-paper); } .lw-mode.off { opacity: .5; cursor: not-allowed; }
.lw-mode span { display: flex; flex-direction: column; gap: 2px; } .lw-mode small { color: var(--j-muted); line-height: 1.8; }
.lw-mode em { font-style: normal; font-size: 11px; color: var(--j-accent); background: var(--j-accent-soft); padding: 0 8px; border-radius: 999px; margin-inline-start: 4px; }
.lw-modes.compact .lw-mode { padding: 10px 12px; }
.lw-row { display: flex; justify-content: space-between; gap: 8px; } .lw-cancel { text-align: center; }
.lw-done { display: flex; gap: 12px; align-items: flex-start; padding: 14px; border-radius: 16px; background: var(--ok-soft); color: var(--ok); }
.lw-done > span { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--ok); color: #fff; font-weight: 800; flex: none; } .lw-done p { margin: 2px 0 0; color: var(--j-ink); line-height: 1.8; }
.lw-help { margin: 0; }
.owner-login { display: flex; flex-direction: column; gap: 10px; border: 1px solid var(--j-line); border-radius: 16px; padding: 12px 14px; background: var(--j-paper); }
.owner-login legend small { color: var(--j-muted); font-weight: 400; }
/* ---------------------------------------------------------------- phone / tablet */
@media (max-width: 1100px) {
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bento { grid-template-columns: minmax(0, 1fr); }
  .day-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .c-grid { grid-template-columns: minmax(0, 1fr); }
  .cf-groups { grid-template-columns: minmax(0, 1fr); padding: 0 10px 4px; } .admin-actions .aa-grid { grid-template-columns: minmax(0, 1fr); }
  .cf-sort { flex: 1 1 100%; } .cf-sort select { flex: 1; } .cf-search .primary { flex: 1 1 100%; } .cf-sep { display: none; }
  .th-filters { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: -4px; padding: 2px 4px 4px; } .th-filters::-webkit-scrollbar { display: none; }
  .view-switch { width: 100%; } .view-switch .vs { flex: 1; justify-content: center; }
  .board { grid-template-columns: minmax(0, 1fr); } .board-side { position: static; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
  .board-wall { grid-template-columns: minmax(0, 1fr); padding: 22px 14px 24px; }
  .shell { grid-template-columns: minmax(0, 1fr); }
  .rail { position: fixed; top: 0; right: 0; bottom: 0; width: min(300px, 86vw); height: 100%; transform: translateX(105%); box-shadow: none; visibility: hidden; transition: transform .3s cubic-bezier(.2, .8, .2, 1), visibility 0s .3s; padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)); }
  body.menu-open .rail { transform: none; visibility: visible; transition: transform .3s cubic-bezier(.2, .8, .2, 1); box-shadow: -30px 0 60px -30px rgba(15, 35, 70, .4); }
  body.menu-open .scrim { display: block; position: fixed; inset: 0; background: rgba(15, 30, 55, .3); z-index: 25; animation: fadeIn .2s forwards; opacity: 0; }
  .topline { padding: calc(10px + env(safe-area-inset-top, 0px)) 16px 0; }
  .topline .search { display: none; }
  .topline .mlogo { display: flex; }
  .menu-btn { display: grid; }
  main { padding: 12px 16px calc(96px + env(safe-area-inset-bottom, 0px)); gap: 14px; }
  .card, details.card { padding: 14px 16px; }
  .grid2, .profile, .sf-steps { grid-template-columns: minmax(0, 1fr); }
  .filters label { flex: 1 1 140px; }
  .note-form { flex-direction: column; align-items: stretch; }
  .bottombar { display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; inset-inline: 0; bottom: 0; z-index: 20; padding: 6px 8px calc(8px + env(safe-area-inset-bottom, 0px)); background: color-mix(in srgb, var(--surface) 94%, transparent); backdrop-filter: blur(14px); box-shadow: 0 -1px 0 var(--line); }
  .bottombar a, .bottombar button { border: 0; background: none; display: grid; justify-items: center; gap: 0; font-size: 10.5px; color: var(--muted); padding: 6px 0; text-decoration: none; }
  .bottombar .on { color: var(--p); font-weight: 700; }
  .bottombar .fab { width: 52px; height: 52px; margin: -24px auto 0; border-radius: 18px; background: var(--p); color: var(--p-ink); display: grid; place-items: center; box-shadow: 0 12px 22px -10px var(--p); }
  .toast { bottom: calc(90px + env(safe-area-inset-bottom, 0px)); }
}
@media (max-width: 520px) {
  .kpis { gap: 10px; } .kpi { padding: 14px; } .kpi .mini { display: none; }
  .day-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sf-grid { grid-template-columns: minmax(0, 1fr); }
  dl { grid-template-columns: minmax(0, 1fr); gap: 0; } dl dt { margin-top: 6px; }
  .stepper b { min-width: 56px; }
  .hello .btn { width: 100%; }
  .c-hero .c-top { padding: 18px 16px 6px; } .c-badges { padding: 6px 16px 14px; }
  .c-av { width: 60px; height: 60px; font-size: 24px; }
  .c-actions { width: 100%; } .c-actions > .btn { flex: 1 1 auto; }
  .c-metrics, .c-metrics.n4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .c-metrics > div, .c-metrics.n4 > div { border-inline-start: 1px solid var(--line); border-top: 1px solid var(--line); }
  .c-metrics > div:nth-child(odd), .c-metrics.n4 > div:nth-child(odd) { border-inline-start: 0; } .c-metrics > div:nth-child(-n+2), .c-metrics.n4 > div:nth-child(-n+2) { border-top: 0; }
  .c-metrics b { font-size: 16px; }
  dl.kv > div { grid-template-columns: 96px minmax(0, 1fr); }
}
/* «پرفروش‌ترین دسته‌ها» (home, shops without the size module — industry.php category_card_html) */
.cat-bars { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.cat-bars li { display: grid; grid-template-columns: minmax(0, 9em) minmax(0, 1fr) auto auto; align-items: center; gap: 10px; font-size: 13px; }
.cat-bars span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cat-bars i { display: block; height: 10px; border-radius: 6px; background: var(--p-soft); position: relative; overflow: hidden; }
.cat-bars i::after { content: ""; position: absolute; inset-block: 0; inset-inline-start: 0; width: var(--w); background: var(--p); border-radius: 6px; }
.cat-bars b { font-size: 13px; min-width: 3ch; text-align: end; }
.cat-bars small { color: var(--muted); font-size: 11.5px; min-width: 5ch; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-delay: 0ms !important; transition-duration: .001ms !important; } }

/* ── Setup wizard («راه‌اندازی CRM والابی», app/setup.php, v1.26) — warm paper + one card, like the sign-in page ── */
.wz-page { background: #f6f2ea; color: var(--ink); font-family: var(--f); margin: 0; }
.wz { min-height: 100vh; box-sizing: border-box; padding: 40px 16px 48px; display: flex; flex-direction: column; align-items: center; gap: 24px; }
.wz-head, .wz-steps, .wz-card { width: 100%; max-width: 760px; box-sizing: border-box; }
.wz-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.wz-brand { display: flex; align-items: center; gap: 12px; }
.wz-brand img { width: 44px; height: 44px; border-radius: 14px; background: #fff; border: 1px solid #e8dfd2; object-fit: contain; padding: 4px; box-sizing: border-box; }
.wz-brand div { display: flex; flex-direction: column; gap: 2px; }
.wz-brand b { font-size: 17px; font-weight: 800; }
.wz-brand span { font-size: 13px; color: #6b5f52; }
.wz-count { font-size: 13px; color: #6b5f52; background: #fbf8f3; border: 1px solid #e8dfd2; border-radius: 999px; padding: 6px 12px; }
.wz-steps ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.wz-steps li { display: flex; flex-direction: column; gap: 8px; font-size: 13px; color: #8a7f72; }
.wz-steps li i { display: block; height: 6px; border-radius: 4px; background: #e5ddd1; }
.wz-steps li.done { color: var(--ok); } .wz-steps li.done i { background: var(--ok); }
.wz-steps li.now { color: var(--ink); font-weight: 700; } .wz-steps li.now i { background: var(--p); }
.wz-steps a { color: inherit; text-decoration: none; } .wz-steps a:hover { text-decoration: underline; }
.wz-card { background: #fff; border: 1px solid #e8dfd2; border-radius: 28px; box-shadow: 0 30px 60px -40px rgba(43, 38, 32, .45); padding: 40px 44px; display: flex; flex-direction: column; gap: 20px; }
.wz-form { display: flex; flex-direction: column; gap: 20px; margin: 0; }
.wz-form h1 { margin: 0; font-size: 28px; font-weight: 800; line-height: 1.4; }
.wz-lead { margin: -8px 0 0; font-size: 16px; line-height: 1.9; color: #4a5568; }
.wz-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.wz-form label { display: flex; flex-direction: column; gap: 6px; font-size: 14px; font-weight: 500; }
.wz-form label small { font-weight: 400; color: #6b5f52; font-size: 12.5px; }
.wz-form input:not([type=radio]):not([type=file]) { height: 48px; border: 1px solid #d9d2c7; border-radius: 12px; padding: 0 14px; font: inherit; font-size: 15px; background: #fff; color: var(--ink); box-sizing: border-box; width: 100%; }
.wz-form input:focus, .wz button:focus-visible, .wz a:focus-visible { outline: 3px solid rgba(29, 95, 209, .3); outline-offset: 2px; border-color: var(--p); }
.wz-note { margin: 0; font-size: 13px; color: #6b5f52; line-height: 1.8; }
.wz-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 12px; border-top: 1px solid #f0e9df; flex-wrap: wrap; }
.wz-right { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.wz-primary { height: 52px; min-width: 200px; padding: 0 26px; border: 0; border-radius: 14px; background: var(--p); color: #fff; font: inherit; font-size: 16px; font-weight: 700; cursor: pointer; box-shadow: 0 10px 22px -12px rgba(29, 95, 209, .8); display: inline-flex; align-items: center; justify-content: center; text-decoration: none; box-sizing: border-box; }
.wz-primary:hover { background: var(--p-dark); color: #fff; }
.wz-primary:disabled { background: #b9c7de; box-shadow: none; cursor: not-allowed; }
.wz-primary.busy { background: var(--p-dark); cursor: progress; }
.wz-back, .wz-link { height: 48px; padding: 0 14px; border: 0; background: transparent; color: #6b5f52; font: inherit; font-size: 15px; cursor: pointer; display: inline-flex; align-items: center; text-decoration: none; }
.wz-link { text-decoration: underline; font-size: 14px; }
.wz-ghost { height: 44px; display: inline-flex; align-items: center; gap: 8px; padding: 0 18px; border-radius: 12px; background: #fff; border: 1px solid #c9c0b3; color: var(--ink); text-decoration: none; font-weight: 700; font-size: 14px; white-space: nowrap; cursor: pointer; }
.wz-ghost svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.wz-err { display: flex; gap: 12px; align-items: flex-start; background: #fdf0ee; border: 1px solid #f2c7c1; border-radius: 16px; padding: 14px 16px; color: #7a1f17; }
.wz-err svg { width: 22px; height: 22px; flex: none; fill: none; stroke: var(--bad); stroke-width: 2.2; stroke-linecap: round; }
.wz-err div { display: flex; flex-direction: column; gap: 4px; font-size: 14px; line-height: 1.8; }
.wz-err b { font-size: 15px; }
.wz-checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.wz-checks.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.wz-checks li { display: flex; align-items: center; gap: 12px; border-radius: 14px; padding: 12px 14px; border: 1px solid #e2e8f0; background: #f8fafc; }
.wz-checks li i { width: 28px; height: 28px; flex: none; border-radius: 50%; background: #cbd5e1 center / 15px no-repeat; }
.wz-checks li span { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.wz-checks li b { font-size: 14px; } .wz-checks li small { font-size: 12.5px; color: #5a6578; line-height: 1.7; }
.wz-checks li.ok { background: #f3faf6; border-color: #cfe9dc; }
.wz-checks li.ok i { background-color: var(--ok); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E"); }
.wz-checks li.warn, .wz-checks li.wait { background: #fdf7ea; border-color: #f0dfb4; }
.wz-checks li.warn i, .wz-checks li.wait i { background-color: #d79b16; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M12 7v6M12 17h.01'/%3E%3C/svg%3E"); }
.wz-checks li.wait i { animation: wzpulse 1.6s ease-in-out infinite; }
.wz-checks li.bad { background: #fdf0ee; border-color: #f2c7c1; }
.wz-checks li.bad i { background-color: var(--bad); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M7 7l10 10M17 7L7 17'/%3E%3C/svg%3E"); }
@keyframes wzpulse { 50% { opacity: .45; } }
.wz-help { background: #f3f6fa; border-radius: 14px; padding: 12px 16px; font-size: 14px; line-height: 1.9; }
.wz-help summary { cursor: pointer; font-weight: 700; color: var(--p); }
.wz-help ol { margin: 8px 0 0; padding-inline-start: 20px; }
.wz-help code, .wz-box code { font-size: 13px; }
.wz-ok-line { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--ok); font-weight: 500; }
.wz-ok-line i { width: 18px; height: 18px; border-radius: 50%; background: var(--ok) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") center / 11px no-repeat; }
.wz-choice { border: 0; margin: 0; padding: 0; }
.wz-choice legend { font-size: 14px; font-weight: 500; margin-bottom: 10px; }
.wz-choice > div { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.wz-opt { position: relative; cursor: pointer; }
.wz-opt input { position: absolute; opacity: 0; inset: 0; }
.wz-opt span { display: flex; flex-direction: column; gap: 6px; padding: 18px; border-radius: 18px; border: 1px solid #e2e8f0; background: #fff; min-height: 110px; box-sizing: border-box; transition: border-color .15s, background .15s; }
.wz-opt b { font-size: 16px; } .wz-opt small { font-size: 13px; color: #5a6578; line-height: 1.8; font-weight: 400; }
.wz-opt input:checked + span { border: 2px solid var(--p); background: #eef4fe; padding: 17px; }
.wz-opt input:focus-visible + span { outline: 3px solid rgba(29, 95, 209, .3); outline-offset: 2px; }
.wz-tasks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.wz-tasks li { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; border: 1px solid #e8dfd2; border-radius: 18px; padding: 16px 18px; background: #fbf8f3; }
.wz-tasks em { width: 32px; height: 32px; flex: none; border-radius: 50%; background: var(--ink); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-style: normal; }
.wz-tasks li > div:not(.wz-code) { flex: 1; min-width: 200px; display: flex; flex-direction: column; gap: 2px; }
.wz-tasks li > .wz-code { flex: 1 1 100%; }
.wz-tasks b { font-size: 15px; } .wz-tasks small { font-size: 13px; color: #6b5f52; line-height: 1.8; }
/* technical values (hosts, codes, paths) in a plain font: the CRM's FaNum font would turn their digits Persian */
.wz input[dir=ltr], .wz code, .wz-code code, #connect code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.wz input[dir=ltr] { font-size: 14px; }
.wz-code { display: flex; gap: 10px; align-items: stretch; width: 100%; }
.wz-code code { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; background: #fff; border: 1px dashed #c9c0b3; border-radius: 12px; padding: 12px 14px; font-size: 13px; color: #2b2620; user-select: all; }
.wz-copy { height: 46px; padding: 0 18px; border-radius: 12px; border: 0; background: var(--p); color: #fff; font: inherit; font-weight: 700; font-size: 14px; cursor: pointer; white-space: nowrap; }
.wz-drop { position: relative; align-items: center; justify-content: center; text-align: center; min-height: 210px; border: 2px dashed #d9d2c7; border-radius: 20px; background: #fbf8f3; cursor: pointer; padding: 18px; box-sizing: border-box; }
.wz-drop:hover, .wz-drop.has { border-color: var(--p); background: #f5f8fe; }
.wz-drop input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.wz-drop img { max-width: 100%; height: 72px; object-fit: contain; }
.wz-drop img.icon { width: 64px; height: 64px; border-radius: 16px; }
.wz-drop b { font-size: 15px; } .wz-drop small { font-size: 13px; color: #6b5f52; font-weight: 400; line-height: 1.7; }
.wz-meter { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; margin-top: 2px; }
.wz-meter i { height: 5px; border-radius: 3px; background: #e2e8f0; }
.wz-meter small { grid-column: 1 / -1; font-size: 12.5px; }
.wz-meter[data-s="1"] i:nth-child(-n+1) { background: var(--bad); } .wz-meter[data-s="1"] small { color: var(--bad); }
.wz-meter[data-s="2"] i:nth-child(-n+2) { background: #d79b16; } .wz-meter[data-s="2"] small { color: var(--warn); }
.wz-meter[data-s="3"] i:nth-child(-n+3), .wz-meter[data-s="4"] i { background: var(--ok); } .wz-meter[data-s="3"] small, .wz-meter[data-s="4"] small { color: var(--ok); }
.wz-done .wz-hero { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }
.wz-done .wz-hero span { width: 76px; height: 76px; border-radius: 50%; background: var(--ok-soft); display: flex; align-items: center; justify-content: center; }
.wz-done .wz-hero svg { width: 40px; height: 40px; fill: none; stroke: var(--ok); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.wz-done .wz-lead { margin: 0; }
.wz-box { display: flex; flex-direction: column; gap: 10px; border: 1px solid #e8dfd2; border-radius: 18px; padding: 18px; background: #fbf8f3; font-size: 15px; }
.wz-box small { font-size: 13px; color: #6b5f52; line-height: 1.9; }
.wz-box.warn { background: #fdf7ea; border-color: #f0dfb4; }
.wz-by { margin: 0; font-size: 12.5px; color: #8a7f72; }
@media (max-width: 640px) {
  .wz { padding: 20px 12px 32px; gap: 16px; }
  .wz-card { padding: 22px 18px; border-radius: 22px; }
  .wz-grid, .wz-checks.two, .wz-choice > div { grid-template-columns: minmax(0, 1fr); }
  .wz-steps li { font-size: 0; } .wz-steps li.now { font-size: 12px; }
  .wz-form h1 { font-size: 23px; } .wz-lead { font-size: 15px; }
  .wz-primary { width: 100%; min-width: 0; }
  .wz-foot { flex-direction: column-reverse; align-items: stretch; }
  .wz-right { flex-direction: column-reverse; align-items: stretch; }
  .wz-code { flex-direction: column; }
}

/* «ورود سفارش‌های سایت» progress card on «وضعیت داده» (health.php import_progress, v1.27) */
.import-card { display: flex; flex-direction: column; gap: 12px; margin-bottom: 18px; }
.import-card .ic-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.import-card h2 { margin: 0; }
.import-card .ic-pct { font-size: 22px; font-weight: 800; color: var(--p); }
.import-card.st-done .ic-pct { color: var(--ok); }
.import-card .ic-bar { height: 14px; border-radius: 8px; background: var(--p-soft); overflow: hidden; }
.import-card .ic-bar i { display: block; height: 100%; border-radius: 8px; background: var(--p); transition: width .6s ease; }
.import-card.st-running .ic-bar i { background-image: linear-gradient(90deg, rgba(255,255,255,.25) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.25) 50%, rgba(255,255,255,.25) 75%, transparent 75%); background-size: 28px 28px; animation: icmove 1s linear infinite; }
.import-card.st-done .ic-bar i { background: var(--ok); }
@keyframes icmove { to { background-position: 28px 0; } }
.import-card .ic-line { margin: 0; font-size: 15px; }
.import-card .ic-stats { display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: 14px; color: var(--muted); }
.import-card .ic-stats b { color: var(--ink); font-size: 16px; }
@media (prefers-reduced-motion: reduce) { .import-card.st-running .ic-bar i { animation: none; } }
/* v1.28 SMS settings found on the shop's website */
.sms-site{border-color:#9ed8b0;background:#f3faf6}
.sms-site h2{display:flex;align-items:center;gap:8px}
.sms-site ul{margin:4px 0 10px;padding-inline-start:20px;display:flex;flex-direction:column;gap:6px;line-height:1.9}

/* v1.29 «فرصت‌های جامانده» (missed.php) — journal paper, one honest number, reasons as bars */
.mi-head { display: flex; flex-direction: column; gap: 14px; }
.mi-hero { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
.mi-big { display: flex; flex-direction: column; gap: 2px; padding: 14px 16px; border-radius: 18px; background: var(--surface); border: 1px solid var(--j-line); min-width: 0; }
.mi-big b { font-size: clamp(24px, 3.6vw, 34px); font-weight: 800; line-height: 1.2; font-variant-numeric: tabular-nums; }
.mi-big span { font-size: 13px; color: var(--j-muted); }
.mi-big.accent { background: var(--j-accent-soft); border-color: transparent; } .mi-big.accent b { color: var(--j-accent); }
.mi-big.soft b { color: var(--j-muted); font-size: clamp(20px, 2.8vw, 26px); }
.mi-cover { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; font-size: 13px; color: var(--j-muted); }
.mi-cover .pb-track { flex: 1 1 140px; height: 8px; border-radius: 999px; background: var(--j-paper-2); overflow: hidden; }
.mi-cover .pb-track i { display: block; height: 100%; border-radius: inherit; background: var(--ok); }
.mi-nav { justify-content: space-between; }
.mi-kinds { display: flex; flex-direction: column; gap: 10px; }
.mi-kind { background: var(--surface); border: 1px solid var(--j-line); border-radius: 20px; padding: 0; min-width: 0; }
.mi-kind summary { list-style: none; cursor: pointer; display: grid; gap: 8px; padding: 16px 20px; }
.mi-kind summary::-webkit-details-marker { display: none; }
.mi-k-top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.mi-n { font-weight: 800; color: var(--j-accent); font-variant-numeric: tabular-nums; }
.mi-bar { height: 8px; border-radius: 999px; background: var(--j-paper-2); overflow: hidden; }
.mi-bar i { display: block; height: 100%; border-radius: inherit; background: var(--j-accent); opacity: .75; }
.mi-k-money { font-size: 13px; color: var(--j-muted); } .mi-k-money b { color: var(--j-ink); }
.mi-kind[open] summary { border-bottom: 1px dashed var(--j-line); }
.mi-people { list-style: none; margin: 0; padding: 12px 20px; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px 18px; }
.mi-people li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 6px; min-width: 0; }
.mi-people small { flex-basis: 100%; color: var(--j-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mi-act { margin: 0; padding: 0 20px 16px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.mi-kind > p.small { padding: 0 20px 14px; margin: 10px 0 0; }
.mi-how ul { margin: 0; padding-inline-start: 18px; display: flex; flex-direction: column; gap: 6px; line-height: 1.9; color: var(--j-muted); }
.missed-strip { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--j-ink); background: var(--j-paper); border-color: var(--j-line); line-height: 1.9; }
.missed-strip .ms-ico { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 12px; background: var(--j-accent-soft); color: var(--j-accent); }
.missed-strip > span:nth-child(2) { flex: 1; min-width: 0; }
.missed-strip .ms-go { flex: none; color: var(--j-accent); font-weight: 700; font-size: 13px; }
@media (max-width: 600px) { .missed-strip { flex-wrap: wrap; } .missed-strip .ms-go { margin-inline-start: auto; } }
.mi-pool-h { margin: 6px 4px 0; font-size: 16px; color: var(--j-ink); } .mi-pool-h small { display: block; font-weight: 400; font-size: 12px; color: var(--j-muted); margin-top: 2px; }
.mi-kinds.pool .mi-bar i { background: var(--j-muted); opacity: .35; }
.mi-big b small { font-size: 14px; font-weight: 700; }
/* v1.29 board: «نیازی به تماس نیست» */
.snote-skip { display: contents; }
.snote footer .no-need, .callmode .no-need { background: rgba(255, 255, 255, .6); color: #4a4a4a; display: inline-flex; align-items: center; gap: 4px; }
.callmode .no-need { background: var(--surface); color: var(--muted); padding: 6px 12px; font-size: 13px; }
.snote.leaving { opacity: .35; translate: 0 6px; transition: opacity .25s, translate .25s; }
.no-need-pop .op-err { color: var(--err, #b42318); margin: 0; }

/* v1.30 «پیام» sheet (messenger.php + crm.js .msg-btn) */
.msg-pop .ms-step1:not([hidden]), .msg-pop .ms-step2:not([hidden]) { display: grid; gap: 12px; }
.msg-pop [hidden] { display: none !important; }
.msg-pop .ms-text { min-height: 120px; }
.msg-pop .ms-ai-row { margin: -4px 0 0; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.msg-pop .ms-ch { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; }
.msg-pop .ms-c { display: grid; gap: 2px; text-align: start; padding: 10px 12px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); cursor: pointer; font: inherit; min-width: 0; }
.msg-pop .ms-c b { font-size: 14px; } .msg-pop .ms-c small { font-size: 11.5px; color: var(--muted); line-height: 1.6; }
.msg-pop .ms-c em { font-style: normal; font-size: 10.5px; font-weight: 700; color: var(--ok); background: var(--ok-soft); padding: 0 6px; border-radius: 999px; margin-inline-start: 4px; }
.msg-pop .ms-c:hover, .msg-pop .ms-c:focus-visible { border-color: var(--p); }
.msg-pop .ms-whatsapp { border-color: #25d36655; background: #effbf3; } .msg-pop .ms-whatsapp b { color: #128c4b; }
.msg-pop .ms-telegram b { color: #1f7fbf; }
.msg-pop .ms-c.is-no { opacity: .55; }
.msg-pop .ms-pat { margin: 0; }
.msg-pop .ms-q { margin: 0; font-size: 20px; font-weight: 800; }
.msg-pop .ms-hint { margin: -6px 0 0; line-height: 1.9; }
.msg-pop .ms-ans { flex-wrap: wrap; }
.msg-btn { display: inline-flex; align-items: center; gap: 5px; }
.snote footer .msg-btn { padding: 6px 12px; font-size: 13px; }
.snote footer .msg-btn.ghost { background: rgba(255, 255, 255, .6); }
.msg-first-f { display: inline-flex; } .msg-first-f .switch { border: 0; background: none; font-family: inherit; cursor: pointer; padding: 0; }
td.nowrap { white-space: nowrap; }

/* v1.31 «رادار زنده» (radar.php) */
.rd-page { display: flex; flex-direction: column; gap: 16px; }
.rd-head { display: flex; gap: 18px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.rd-head > div { flex: 1 1 340px; min-width: 0; } .rd-head h1 { margin: 4px 0 6px; font-size: clamp(20px, 2.6vw, 26px); text-wrap: balance; } .rd-head p { margin: 0; line-height: 1.9; }
.rd-head .eyebrow { display: inline-flex; align-items: center; gap: 6px; margin: 0; color: var(--muted); font-size: 12.5px; font-weight: 700; }
.rd-head:not(.is-on) .live-dot { background: var(--muted); animation: none; box-shadow: none; }
.rd-big { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 12px; align-items: center; text-align: start; padding: 12px 18px; border-radius: 18px; border: 1px solid var(--line); background: var(--surface-2); cursor: pointer; font-family: inherit; color: var(--ink); min-width: 210px; }
.rd-big .knob { grid-row: 1 / 3; width: 46px; height: 26px; border-radius: 999px; background: #c9d1dc; position: relative; transition: background .2s; }
.rd-big .knob::after { content: ""; position: absolute; top: 3px; right: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.2); transition: right .2s; }
.rd-big.on { background: var(--ok-soft); border-color: transparent; } .rd-big.on .knob { background: var(--ok); } .rd-big.on .knob::after { right: 23px; }
.rd-big b { font-size: 15px; } .rd-big small { color: var(--muted); font-size: 12px; }
.rd-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 16px; align-items: start; }
@media (max-width: 900px) { .rd-grid { grid-template-columns: 1fr; } }
.rd-side { display: grid; gap: 16px; }
.rd-live h2, .rd-today h2, .rd-set h2 { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 16px; margin: 0 0 12px; } .rd-live h2 small, .rd-today h2 small { color: var(--muted); font-weight: 400; font-size: 12px; }
.rd-set summary { list-style: none; cursor: pointer; } .rd-set summary::-webkit-details-marker { display: none; } .rd-set summary h2 { margin: 0; } .rd-set[open] summary h2 { margin-bottom: 12px; }
.rd-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.rd-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface); }
.rd-row.hot { border-color: color-mix(in srgb, var(--ok) 45%, var(--line)); background: color-mix(in srgb, var(--ok-soft) 55%, var(--surface)); }
.rd-row.blocked { opacity: .55; }
.rd-row .avatar { flex: none; width: 36px; height: 36px; font-size: 14px; }
.rd-who { flex: 1; min-width: 0; display: grid; gap: 2px; } .rd-who a { font-weight: 700; } .rd-who small { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rd-why { justify-self: start; display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 700; color: var(--ok); background: var(--ok-soft); padding: 1px 8px; border-radius: 999px; }
.rd-act { flex: none; }
.rd-empty { display: flex; align-items: center; gap: 8px; color: var(--muted); margin: 0; }
.rd-kinds { border: 0; margin: 0; padding: 0; display: grid; gap: 8px; }
.rd-kind { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 14px; border: 1px solid var(--line); cursor: pointer; }
.rd-kind:has(input:checked) { border-color: var(--p); background: color-mix(in srgb, var(--p-soft) 50%, var(--surface)); }
.rd-kind input { margin-top: 4px; } .rd-kind span { display: grid; gap: 2px; } .rd-kind b { font-size: 13.5px; } .rd-kind small { color: var(--muted); font-size: 12px; }
.rd-hours { display: flex; align-items: center; gap: 6px; } .rd-hours select { flex: 1; }
.rd-alerts { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; } .rd-alerts li { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; } .rd-alerts time { color: var(--muted); flex: none; }
@media (max-width: 520px) { .rd-row { flex-wrap: wrap; } .rd-act { width: 100%; } .rd-act .btn { width: 100%; justify-content: center; } }

/* v1.33 «افزونه‌ها و فرصت‌ها» (sources.php) */
.src-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.src { display: flex; flex-direction: column; gap: 10px; padding: 16px 18px; border-radius: 20px; background: var(--surface); border: 1px solid var(--j-line); min-width: 0; }
.src header { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; flex-wrap: wrap; } .src header b { font-size: 15px; }
.src.off { background: var(--j-paper); border-style: dashed; } .src.off header b { color: var(--j-muted); }
.src-gives { margin: 0; font-size: 13px; color: var(--j-muted); line-height: 1.9; flex: 1; }
.src-sigs { margin: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.src footer { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }

/* v1.34 toasts — one stack, bottom centre (above the phone bar) */
.toasts { position: fixed; inset-inline: 0; bottom: calc(22px + env(safe-area-inset-bottom, 0px)); z-index: 300; display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none; padding-inline: 16px; }
.toasts .toast { position: static; transform: none; left: auto; display: flex; align-items: center; gap: 10px; pointer-events: auto; max-width: min(560px, 100%); padding: 11px 14px 11px 18px; border-radius: 16px;
  font-size: 13.5px; line-height: 1.8; background: var(--ink); color: #fff; box-shadow: 0 14px 30px -12px rgba(15, 30, 55, .45); animation: toastUp .35s cubic-bezier(.2, .9, .3, 1.2); transition: opacity .3s, transform .3s; }
.toasts .toast.t-ok { background: #17633f; } .toasts .toast.t-warn { background: #8a5300; } .toasts .toast.t-err { background: #a3241b; }
.toasts .toast.out { opacity: 0; transform: translateY(8px); }
.toast-x { flex: none; border: 0; background: rgba(255, 255, 255, .16); color: inherit; width: 24px; height: 24px; border-radius: 50%; cursor: pointer; font-size: 15px; line-height: 1; }
@keyframes toastUp { from { opacity: 0; transform: translateY(14px); } }
@media (max-width: 760px) { .toasts { bottom: calc(92px + env(safe-area-inset-bottom, 0px)); } }
@media (prefers-reduced-motion: reduce) { .toasts .toast { animation: none; } }

/* v1.34 «کیف پول» card — journal paper, balance first, credits as bars, history as a ledger */
.wallet-card { display: grid; gap: 12px; align-content: start; background: var(--j-paper); border-color: var(--j-line); color: var(--j-ink); }
.wc-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; flex-wrap: wrap; } .wc-head h2 { margin: 0; display: flex; align-items: center; gap: 8px; }
.wc-live { font-size: 11.5px; color: var(--j-muted); } .wc-live.ok { color: var(--ok); } .wc-live.ok::before { content: "● "; } .wc-live.warn { color: var(--warn, #9a6200); }
.wc-bal { margin: 0; } .wc-bal b { font-size: 34px; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -.01em; } .wc-bal small { color: var(--j-muted); font-size: 13px; }
.wc-body p { margin: 2px 0; } .wc-sum .pos, .wc-tx .pos { color: var(--ok); } .wc-sum .neg, .wc-tx .neg { color: #b42318; }
.wc-h { margin: 6px 0 6px; font-size: 12.5px; font-weight: 700; color: var(--j-muted); display: flex; align-items: center; gap: 8px; }
.wc-lots { display: grid; gap: 8px; }
.wc-lot { display: grid; gap: 4px; padding: 10px 12px; border-radius: 14px; background: var(--surface); border: 1px solid var(--j-line); }
.wc-lot-top { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; } .wc-lot-top b { font-variant-numeric: tabular-nums; } .wc-lot-top small { color: var(--j-muted); } .wc-lot-top span { margin-inline-start: auto; font-size: 12px; color: var(--j-muted); }
.wc-lot-bar { height: 6px; border-radius: 9px; background: var(--j-paper-2); overflow: hidden; } .wc-lot-bar i { display: block; height: 100%; border-radius: inherit; background: var(--ok); }
.wc-lot.soon .wc-lot-bar i { background: var(--j-accent); } .wc-lot-exp { font-size: 11.5px; color: var(--j-muted); } .wc-lot.soon .wc-lot-exp { color: var(--j-accent); font-weight: 700; }
.wc-hist > summary { list-style: none; cursor: pointer; } .wc-hist > summary::-webkit-details-marker { display: none; } .wc-hist > summary::after { content: "▾"; font-size: 11px; } .wc-hist[open] > summary::after { content: "▴"; }
.wc-tx-head, .wc-tx li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: baseline; }
.wc-tx .pos, .wc-tx .neg { min-width: 64px; } .wc-after { text-align: end; display: grid; } .wc-after time { font-size: 11px; }
.wc-tx-head { padding: 0 2px 4px; font-size: 11px; } .wc-tx { list-style: none; margin: 0; padding: 0; max-height: 360px; overflow: auto; font-size: 12.5px; }
.wc-tx li { padding: 7px 2px; border-top: 1px dashed var(--j-line); } .wc-tx .pos, .wc-tx .neg { font-weight: 800; font-variant-numeric: tabular-nums; }
.wc-what { min-width: 0; } .wc-what small { display: block; color: var(--j-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wc-after { color: var(--j-muted); font-variant-numeric: tabular-nums; } .wc-tx time { color: var(--j-muted); font-size: 11.5px; }
.wc-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.wc-err { margin: 0; padding: 10px 14px; border-radius: 14px; background: #fdecea; color: #a3241b; font-size: 13px; }
.wc-done { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 12px 14px; border-radius: 14px; background: var(--ok-soft); color: var(--ink); }
/* the form: amounts and days as pills, the SMS part as a framed panel like wp-admin's */
.wc-form { display: grid; gap: 14px; padding: 16px; border-radius: 18px; background: var(--surface); border: 1px solid var(--j-line); }
.wc-form.is-revoke { border-color: #f0c4bf; }
.wc-form-title { margin: 0; display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 15px; }
.wc-f { border: 0; margin: 0; padding: 0; display: grid; gap: 6px; } .wc-f legend { padding: 0; font-size: 12.5px; font-weight: 700; color: var(--j-muted); margin-bottom: 6px; }
.wc-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.wc-chips label { position: relative; } .wc-chips label input { position: absolute; opacity: 0; pointer-events: none; }
.wc-chips label span { display: inline-block; padding: 7px 14px; border-radius: 999px; border: 1px solid var(--j-line); background: var(--j-paper); cursor: pointer; font-weight: 700; font-size: 13px; }
.wc-chips label input:checked + span { background: var(--j-ink); border-color: var(--j-ink); color: var(--j-paper); }
.wc-chips label input:focus-visible + span { outline: 2px solid var(--p); outline-offset: 2px; }
.wc-other { width: 130px; border-radius: 999px; padding: 7px 14px; } .wc-days-other { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--j-muted); } .wc-days-other .wc-other { width: 90px; }
.wc-sms { border: 1px solid #e3c9d3; border-radius: 16px; background: #fffafc; overflow: hidden; } .wc-sms.none { background: var(--j-paper); border-color: var(--j-line); }
.wc-sms-on { display: flex; flex-direction: row; align-items: center; justify-content: flex-start; text-align: start; gap: 10px; padding: 12px 14px; cursor: pointer; flex-wrap: wrap; }
.wc-sms-on .wc-phone { margin-inline-start: auto; font-size: 12px; background: var(--j-paper-2); padding: 2px 10px; border-radius: 999px; color: var(--j-muted); }
.wc-sms-body { display: grid; gap: 10px; padding: 12px 14px 14px; border-top: 1px dashed #ecd7df; }
.wc-bubble { margin: 0; padding: 12px 14px; border-radius: 16px 16px 4px 16px; background: #eaf0f8; line-height: 2; font-size: 14px; white-space: pre-wrap; min-height: 48px; transition: opacity .2s; }
.wc-bubble.loading { opacity: .55; } .wc-bubble.bad { background: #fdecea; color: #a3241b; }
.wc-pv-meta { margin: -4px 0 0; display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; } .wc-pv-kind { margin-inline-start: auto; }
.wc-warn { margin: 0; padding: 8px 12px; border-radius: 12px; background: var(--warn-soft, #fff4e0); color: #8a5300; }
.wc-submit { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .wc-form.is-revoke .wc-go { background: #a3241b; border-color: #a3241b; }
/* shared on/off switch */
.sw { position: relative; display: inline-block; width: 42px; height: 24px; flex: none; } .sw input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; z-index: 1; }
.sw i { position: absolute; inset: 0; border-radius: 999px; background: #cfd6df; transition: background .2s; } .sw i::after { content: ""; position: absolute; top: 3px; right: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .25); transition: right .2s; }
.sw input:checked + i { background: #7a1d3e; } .sw input:checked + i::after { right: 21px; } .sw input:focus-visible + i { outline: 2px solid var(--p); outline-offset: 2px; }
.sw input:disabled + i { opacity: .45; }


/* v1.34 «کیف پول» section pages (nav group; journal tokens) */
.wl-page .msg-tabs { margin-top: 14px; }
.wl-flow { display: flex; flex-wrap: wrap; gap: 8px 22px; align-items: baseline; margin-top: 12px; font-size: 13.5px; color: var(--j-muted); }
.wl-flow i { font-style: normal; font-weight: 800; color: var(--j-ink); margin-inline-end: 4px; } .wl-flow i.pos { color: var(--ok); } .wl-flow i.neg { color: var(--j-accent); } .wl-flow small { margin-inline-start: auto; }
a.mi-big { text-decoration: none; color: inherit; } a.mi-big:hover { box-shadow: 0 6px 18px -10px rgba(60, 40, 20, .35); }
.wl-buckets { display: grid; gap: 8px; }
.wl-b { display: grid; grid-template-columns: 120px minmax(0, 1fr) auto; gap: 12px; align-items: center; font-size: 13.5px; } .wl-b b { font-variant-numeric: tabular-nums; white-space: nowrap; }
.wl-bar { height: 10px; border-radius: 9px; background: var(--j-paper-2); overflow: hidden; } .wl-bar i { display: block; height: 100%; border-radius: inherit; background: var(--j-accent); opacity: .8; }
.wl-recent td.pos { color: var(--ok); font-weight: 800; } .wl-recent td.neg { color: var(--j-accent); font-weight: 800; }
.wl-group { margin: 10px 4px -4px; font-size: 15px; color: var(--j-muted); }
.wl-feature > header { display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap; align-items: flex-start; } .wl-feature > header h2 { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; }
.wl-feature > header p { margin: 0; max-width: 60ch; } .wl-feature.off { background: var(--j-paper); }
.wl-stats { margin: 0; display: flex; gap: 10px; flex-wrap: wrap; } .wl-stats div { padding: 6px 12px; border-radius: 12px; background: var(--j-paper-2); } .wl-stats dt { font-size: 11px; color: var(--j-muted); } .wl-stats dd { margin: 0; font-weight: 800; font-size: 13.5px; }
.wl-fields { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px 18px; margin-top: 14px; align-items: start; }
.wl-field { display: grid; gap: 5px; font-size: 13.5px; min-width: 0; } .wl-field > span:first-child { font-weight: 600; } .wl-field small { line-height: 1.7; }
.wl-field[hidden] { display: none !important; }
.wl-bool { grid-template-columns: auto 1fr; align-items: start; gap: 10px; } .wl-bool > span:last-child { display: grid; gap: 2px; font-weight: 600; }
.wl-num { display: flex; align-items: center; gap: 6px; } .wl-num input { flex: 1; min-width: 0; } .wl-num em { font-style: normal; color: var(--j-muted); font-size: 12.5px; }
.wl-multi { border: 0; padding: 0; margin: 0; grid-column: 1 / -1; } .wl-multi legend { font-weight: 600; padding: 0; margin-bottom: 6px; }
.wl-chks { display: flex; flex-wrap: wrap; gap: 6px 14px; } .wl-chk { display: inline-flex; flex-direction: row; align-items: center; gap: 6px; font-size: 13px; color: var(--j-ink); }
.wl-tiers { display: grid; gap: 6px; } .wl-tr { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 6px; } .wl-th { font-size: 11.5px; color: var(--j-muted); }
.wl-field:has(.wl-tiers) { grid-column: 1 / -1; }
.wl-save { grid-column: 1 / -1; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 4px 0 0; }
.wl-checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.wl-checks li { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: 14px; background: var(--surface); border: 1px solid var(--j-line); }
.wl-checks li div { display: grid; gap: 2px; } .wl-checks small { color: var(--j-muted); }
.wl-ck { flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 13px; }
.wl-checks li.ok .wl-ck { background: var(--ok-soft); color: var(--ok); } .wl-checks li.no .wl-ck { background: var(--j-accent-soft); color: var(--j-accent); } .wl-checks li.no { border-color: #f0d2c5; }
@media (max-width: 520px) { .wl-b { grid-template-columns: 90px minmax(0, 1fr); } .wl-b b { grid-column: 1 / -1; } }
.c-grid > .wallet-card { grid-column: 1 / -1; }
.wallet-card [hidden] { display: none !important; }
.wc-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 18px 24px; align-items: start; }
.wc-left, .wc-right { display: grid; gap: 12px; min-width: 0; align-content: start; }
@media (max-width: 900px) { .wc-cols { grid-template-columns: 1fr; } }

/* v1.35 hosted portal (crm.valabi.ir/, portal.php) — journal paper, the same sign-in card as a shop's */
body.portal { margin: 0; min-height: 100vh; background: radial-gradient(900px 520px at 85% -10%, var(--j-accent-soft), transparent), var(--j-paper); color: var(--j-ink); }
.pt-main { max-width: 760px; margin-inline: auto; padding: 28px 16px 60px; display: grid; gap: 16px; }
.pt-wide .pt-main { max-width: 1120px; }
body.portal .auth { min-height: calc(100vh - 120px); display: grid; place-items: center; }
.pt-top { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 5; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; padding: 10px 20px; background: color-mix(in srgb, var(--j-paper) 88%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--j-line); }
.pt-brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 800; color: var(--j-ink); text-decoration: none; } .pt-brand img { border-radius: 9px; } .pt-brand small { font-weight: 400; color: var(--j-muted); margin-inline-start: 4px; }
.pt-top nav { display: flex; gap: 4px; flex: 1; } .pt-top nav a { padding: 6px 12px; border-radius: 999px; text-decoration: none; color: var(--j-muted); font-size: 14px; } .pt-top nav a[aria-current] { background: var(--surface); color: var(--j-ink); font-weight: 700; box-shadow: 0 1px 3px rgba(60, 40, 20, .1); }
.pt-top form button { color: var(--j-muted); font-size: 13px; }
.pt-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 14px; flex-wrap: wrap; } .pt-head h1 { margin: 2px 0 6px; font-size: clamp(24px, 3.4vw, 32px); }
.pt-sub { margin: 0; color: var(--j-muted); line-height: 1.9; max-width: 66ch; }
.pt-card { background: var(--surface); border: 1px solid var(--j-line); border-radius: 22px; padding: 20px 22px; display: grid; gap: 12px; min-width: 0; } .pt-card h2 { margin: 0; font-size: 17px; }
.pt-empty { text-align: center; justify-items: center; padding: 40px 22px; }
.pt-err { margin: 0; padding: 10px 14px; border-radius: 14px; background: #fdecea; color: #a3241b; font-size: 14px; } .pt-ok { margin: 0; padding: 10px 14px; border-radius: 14px; background: var(--ok-soft); color: var(--ok); }
.pt-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; }
.pt-shop { background: var(--surface); border: 1px solid var(--j-line); border-radius: 22px; padding: 18px 20px; display: grid; gap: 10px; align-content: start; min-width: 0; }
.pt-shop.paused { background: var(--j-paper-2); } .pt-shop.bad { border-color: #f0c4bf; }
.pt-shop header { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; } .pt-shop header b { font-size: 17px; }
.pt-meta { margin: 0; font-size: 12.5px; color: var(--j-muted); }
.pt-stats { margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.pt-stats div { padding: 8px 10px; border-radius: 12px; background: var(--j-paper); min-width: 0; } .pt-stats dt { font-size: 11px; color: var(--j-muted); } .pt-stats dd { margin: 0; font-weight: 800; font-size: 13.5px; } .pt-stats .warn, .pt-stats dd.warn { color: var(--j-accent); }
.pt-shop footer { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 2px; }
.pt-form { display: grid; gap: 14px; }
.pt-fields { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px 16px; } .pt-fields label small { color: var(--j-muted); font-weight: 400; }
.pt-slug { display: flex; align-items: center; gap: 6px; direction: ltr; } .pt-slug input { flex: 1; min-width: 0; } .pt-slug bdi { color: var(--j-muted); }
.pt-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.pt-copy, .pt-code { margin: 0; padding: 12px 14px; border-radius: 14px; background: var(--j-paper-2); font-size: 14px; line-height: 2; white-space: pre-wrap; overflow-wrap: anywhere; }
.pt-code { font: 12.5px/1.7 ui-monospace, Menlo, monospace; }
.pt-new { border-color: #9ed8b0; background: #f3faf6; }
.pt-steps { margin: 0; padding-inline-start: 20px; display: grid; gap: 6px; line-height: 1.9; }
.pt-inline { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.pt-log { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 13px; } .pt-log time { color: var(--j-muted); margin-inline-end: 6px; }
.pt-switch { position: relative; }
.pt-switch > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: var(--j-accent-soft); color: var(--j-accent); font-size: 13px; font-weight: 700; }
.pt-switch > summary::-webkit-details-marker { display: none; }
.pt-menu { position: absolute; inset-inline-end: 0; top: calc(100% + 6px); z-index: 60; width: min(300px, 86vw); background: var(--surface); border: 1px solid var(--j-line); border-radius: 16px; box-shadow: 0 18px 40px -16px rgba(20, 30, 50, .4); padding: 8px; display: grid; gap: 2px; }
.pt-menu p { margin: 4px 8px 6px; font-size: 11.5px; color: var(--j-muted); font-weight: 700; }
.pt-menu a { display: grid; grid-template-columns: 1fr auto; gap: 0 8px; padding: 8px 10px; border-radius: 10px; text-decoration: none; color: var(--ink); }
.pt-menu a:hover, .pt-menu a[aria-current] { background: var(--j-paper-2); } .pt-menu a[aria-current] span::after { content: " ✓"; color: var(--ok); }
.pt-menu a small { grid-column: 1; color: var(--j-muted); font-size: 11px; text-align: start; } .pt-menu a em { grid-row: 1; grid-column: 2; font-style: normal; font-size: 11px; color: var(--j-accent); }
.pt-menu .pt-menu-all { display: block; border-top: 1px solid var(--j-line); border-radius: 0 0 10px 10px; margin-top: 4px; padding-top: 10px; color: var(--p); font-size: 13px; }
.pt-switch small { font-weight: 400; opacity: .8; } @media (max-width: 600px) { .pt-switch small { display: none; } }
@media (max-width: 520px) { .pt-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pt-cred { margin: 0; display: grid; gap: 6px; } .pt-cred div { display: flex; justify-content: space-between; gap: 12px; padding: 10px 14px; border-radius: 12px; background: var(--surface); flex-wrap: wrap; }
.pt-cred dt { color: var(--j-muted); font-size: 13px; } .pt-cred dd { margin: 0; font-weight: 800; font-size: 15px; font-family: ui-monospace, Menlo, monospace; }
.pt-card .pt-copy-btn { justify-self: start; } .pt-copy { font-family: inherit; }

/* v1.36 demo shop */
.demo-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin: 0 0 14px; padding: 10px 16px; border-radius: 14px; background: #fff4d6; border: 1px solid #f1d58a; color: #6b4b00; font-size: 13px; line-height: 1.8; }
.demo-strip b { color: #4d3500; } .demo-strip a { margin-inline-start: auto; font-weight: 700; color: #8a5300; }
.demo-login { margin: 0; padding: 10px 14px; border-radius: 12px; background: #fff4d6; color: #6b4b00; text-align: center; font-size: 14px; }
.pt-db-own { opacity: .9; }

/* ---------------------------------------------------------------- v1.37 «عمده و همکاران» + «فعلاً کنار بگذار» */
.partner-banner { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; background: var(--surface-2); box-shadow: inset 0 0 0 1.5px var(--line); color: var(--muted); }
.partner-banner > svg { flex: none; color: var(--p); }
.partner-banner > div { flex: 1 1 260px; display: grid; gap: 2px; min-width: 0; } .partner-banner b { font-size: 15.5px; color: var(--ink); } .partner-banner span { font-size: 13px; }
.partner-banner.pk-b2b { background: var(--p-soft); } .partner-banner.pk-park > svg { color: var(--muted); }
.partner-banner form { margin: 0; }
.pt-tabs .mt-list a b { font-weight: 700; margin-inline-start: 4px; opacity: .7; }
.partners-intro { display: grid; gap: 12px; } .partners-intro p { margin: 0; }
.pt-add { display: flex; gap: 8px; align-items: flex-end; flex-wrap: wrap; margin: 0; }
.pt-add label { flex: 1 1 240px; min-width: 0; } .pt-add .btn { flex: none; }
.out-pop .op-park { display: grid; gap: 2px; width: 100%; text-align: center; padding: 9px 12px; border: 1px dashed var(--line); border-radius: 12px; background: transparent; color: var(--ink); cursor: pointer; font: inherit; }
.out-pop .op-park b { font-size: 13.5px; } .out-pop .op-park small { font-size: 12px; color: var(--muted); }
.out-pop .op-park:hover { background: var(--surface-2); border-color: var(--muted); }
.out-pop .op-partner { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding-top: 8px; border-top: 1px solid var(--line); }
.out-pop .op-partner > span { font-size: 12.5px; color: var(--muted); }
.out-pop .op-partner .chip { font-size: 12.5px; cursor: pointer; border: 0; }
.out-pop .op-partner .chip.on, .out-pop .op-chips .chip.on { background: var(--p-soft); color: var(--p); box-shadow: inset 0 0 0 1.5px var(--p); }

/* ---------------------------------------------------------------- v1.40 «فروش بعد از تماس» */
.wins-card { display: grid; gap: 10px; background: var(--ok-soft); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--ok) 35%, transparent); }
.wins-card .wc-head { display: flex; gap: 12px; align-items: center; }
.wins-card .wc-badge { font-size: 26px; line-height: 1; }
.wins-card .wc-head > div { display: grid; gap: 2px; min-width: 0; } .wins-card .wc-head b { font-size: 16px; color: var(--ok); } .wins-card .wc-head small { color: var(--muted); font-size: 12.5px; }
.wins-card .wc-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 13px; }
.wins-card .wc-list li { display: flex; gap: 6px; } .wins-card .wc-list span { color: var(--muted); }
.jp-win { color: var(--ok); }

/* ---------------------------------------------------------------- v1.41 console: «به‌روزرسانی کد مشترک» */
.pt-update { display: grid; gap: 10px; margin-bottom: 18px; }
.pt-update .pu-head { display: flex; gap: 12px; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; }
.pt-update .pu-head h2 { margin: 0 0 2px; font-size: 16px; } .pt-update .pu-head form { margin: 0; }
.pt-update.has-new { box-shadow: inset 0 0 0 1.5px var(--p); }
.pt-update .pu-notes { margin: 0; font-size: 13.5px; line-height: 1.9; background: var(--surface-2); border-radius: 12px; padding: 10px 12px; }
.pt-update .pu-go { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin: 0; } .pt-update .pu-go .small { flex: 1 1 260px; min-width: 0; }
.pt-update .pu-keyform { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; } .pt-update .pu-keyform input { flex: 1 1 260px; min-width: 0; }
.pt-update .pu-key summary { cursor: pointer; font-size: 13px; color: var(--muted); }