/* =====================================================================
   Merchant panel.

   Separate from the storefront theme on purpose: a merchant changing their
   shop's colours must not be able to change the panel, and a theme release
   must never be able to break the screen that explains why the shop is
   broken.

   Mobile first, because the merchant is standing in their shop with a
   phone. Logical properties only.
   ===================================================================== */

/* The panel is served on shop subdomains (…/admin) and the platform host,
   so it points at the theme's font library with absolute URLs rather than
   its own copy. Same faces as the storefront; the panel is not themeable,
   so it is pinned to IRANYekanX rather than driven by a per-shop token. */
@font-face {
  font-family: 'iranyekanx';
  src: url('/themes/aria/fonts/iranyekanx-regular.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'iranyekanx';
  src: url('/themes/aria/fonts/iranyekanx-medium.woff2') format('woff2');
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: 'iranyekanx';
  src: url('/themes/aria/fonts/iranyekanx-demibold.woff2') format('woff2');
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: 'iranyekanx';
  src: url('/themes/aria/fonts/iranyekanx-bold.woff2') format('woff2');
  font-weight: 700;
  font-display: swap;
}

*, *::before, *::after { box-sizing: border-box; }

:root {
  --ink: #111827;
  --muted: #6b7280;
  --line: #e5e7eb;
  --bg: #f6f7f9;
  --card: #ffffff;
  --primary: #173F8A;
  --on-primary: #ffffff;
  --danger: #dc2626;
  --warn: #b45309;
  --warn-bg: #fffbeb;
  --ok: #16a34a;
  --radius: 10px;
  /* the tint behind the active sidebar item -- a pale wash of --primary */
  --active-bg: #e9f3f1;
}

/* Form controls do not inherit the page font by default: a <button> kept
   the system font and looked foreign next to everything around it.
   Family only — each component still sets its own size. */
button, input, select, textarea { font-family: inherit; }

body {
  margin: 0;
  font-family: 'iranyekanx', 'vazirmatn', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size: 15px;
  line-height: 1.8;
  color: var(--ink);
  background: var(--bg);
  /* room for the bottom bar on a phone */
  padding-block-end: 72px;
}
@media (min-width: 900px) { body { padding-block-end: 0; } }

a { color: inherit; text-decoration: none; }
h1 { font-size: 1.2rem; margin-block: 0 1rem; }
h2 { font-size: 1rem; margin-block: 0 .75rem; }
.muted { color: var(--muted); }
.hint  { color: #5b6675; font-size: .85rem; margin-block: .35rem 0; }  /* AA (~5:1), was --muted #6d7a8c 4.3:1 */
.empty { color: var(--muted); text-align: center; padding-block: 2.5rem; }
code   { font-family: ui-monospace, monospace; font-size: .85em; direction: ltr; }

/* ---- shell: right sidebar (desktop), drawer + bottom bar (mobile) --- */

/* Off-screen, but focusable and toggleable by its labels. Never display:none
   -- that would drop it from the tab order and some engines stop toggling. */
.nav-toggle { position: fixed; inset-block-start: -100px; inset-inline-start: -100px; width: 1px; height: 1px; }

.panel__shell { min-height: 100dvh; }

.panel__side {
  background: var(--card);
  display: flex;
  flex-direction: column;
}

.panel__brand {
  display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  padding: 1rem; border-block-end: 1px solid var(--line);
}
.panel__shop { font-weight: 700; font-size: 1.05rem; }
.panel__close { display: none; font-size: 1.7rem; line-height: 1; color: var(--muted); cursor: pointer; padding: 0 .2rem; }

.panel__nav { flex: 1 1 auto; overflow-y: auto; padding: .5rem; }
.panel__nav ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .12rem; }
.panel__nav a {
  display: flex; align-items: center; gap: .7rem;
  padding: .7rem .8rem; border-radius: var(--radius);
  color: var(--ink); font-weight: 600;
}
.panel__nav a:hover { background: var(--bg); }
.panel__nav a.is-active { background: var(--active-bg); color: var(--primary); }

/* grouped, collapsible nav sections (no JS: native <details>) */
.nav-link { }
.nav-group > details > summary {
  display: flex; align-items: center; gap: .7rem;
  padding: .7rem .8rem; border-radius: var(--radius);
  color: var(--ink); font-weight: 600; cursor: pointer; list-style: none;
}
.nav-group > details > summary::-webkit-details-marker { display: none; }
.nav-group > details > summary:hover { background: var(--bg); }
.nav-group > details > summary.is-active { color: var(--primary); }
.nav-group__chev { margin-inline-start: auto; display: inline-flex; transition: transform .18s ease; }
.nav-group__chev svg { width: 18px; height: 18px; }
/* chevron points into the row (RTL: leftward) and rotates down when open */
.nav-group__chev { transform: rotate(180deg); }
.nav-group > details[open] > summary .nav-group__chev { transform: rotate(90deg); }
.nav-group__items { list-style: none; margin: .1rem 0 .3rem; padding: 0; display: grid; gap: .05rem; }
.nav-group__items a {
  display: flex; align-items: center; gap: .5rem;
  padding: .5rem .8rem .5rem 2.9rem;
  border-radius: var(--radius); color: var(--muted); font-size: .92rem;
  /* indent children under the parent icon (start = right in RTL) */
  padding-inline-start: 2.9rem;
}
/* a child badge (e.g. pending reviews) is smaller than a top-level one */
.nav-group__items a .nav-badge{ min-inline-size:1.15rem; height:1.15rem; font-size:.68rem; }
.nav-group__items a:hover { background: var(--bg); color: var(--ink); }
.nav-group__items a.is-active { background: var(--active-bg); color: var(--primary); font-weight: 600; }
.panel__icon { display: inline-flex; flex: none; }
.panel__icon svg { width: 22px; height: 22px; display: block; }

.panel__side-foot {
  padding: .8rem 1rem; border-block-start: 1px solid var(--line);
  display: flex; align-items: center; justify-content: space-between; gap: .5rem;
}
.panel__visit { color: var(--primary); font-size: .9rem; font-weight: 600; }
.panel__logout button {
  background: none; border: 0; color: var(--muted); font: inherit; cursor: pointer; padding: 0;
}

.panel__top {
  display: flex; align-items: center; gap: .6rem;
  padding: .55rem .7rem; background: var(--card);
  border-block-end: 1px solid var(--line);
  position: sticky; inset-block-start: 0; z-index: 15;
}
.panel__burger { display: inline-flex; cursor: pointer; color: var(--ink); padding: .15rem; }
.panel__burger svg { width: 26px; height: 26px; }
.panel__shop-m  { font-weight: 700; }
.panel__visit-m { margin-inline-start: auto; color: var(--primary); font-size: .85rem; }

.panel__main { max-width: 1000px; margin-inline: auto; padding: 1rem; width: 100%; }

.panel__backdrop { display: none; }

/* ---- bottom bar (phone only) ---------------------------------------- */
.panel__bottom {
  position: fixed; inset-inline: 0; inset-block-end: 0;
  /* As many columns as there are children, rather than a hard five. The
     merchant bar gained جست‌وجو and became six; a hard five silently stacked
     «بیشتر» on top of «خانه» instead of making room, which is the failure
     mode of every fixed column count. The ops console still has three. */
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; align-items: center;
  background: var(--card); border-block-start: 1px solid var(--line);
  padding-block: .35rem; padding-block-end: max(.35rem, env(safe-area-inset-bottom));
  z-index: 20;
}
.panel__bottom a,
.panel__bottom-more {
  display: flex; flex-direction: column; align-items: center; gap: .1rem;
  font-size: .68rem; color: var(--muted); cursor: pointer; padding-block: .2rem;
  /* Six labels on a 360px phone: a long one must shrink rather than push
     its neighbour off the bar. */
  min-inline-size: 0;
  max-inline-size: 100%;
  text-align: center;
}
.panel__bottom a > span:last-child,
.panel__bottom-more > span:last-child {
  inline-size: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.panel__bottom .panel__icon svg { width: 22px; height: 22px; }
.panel__bottom a.is-active { color: var(--primary); font-weight: 700; }
.panel__bottom-add {
  background: var(--primary); color: var(--on-primary);
  border-radius: 50%; width: 44px; height: 44px;
  align-self: center; justify-self: center;
  display: inline-flex; align-items: center; justify-content: center;
}
.panel__bottom-add svg { width: 26px; height: 26px; }

/* ---- phone: sidebar becomes an off-canvas drawer from the right ----- */
@media (max-width: 899.98px) {
  .panel__side {
    position: fixed; inset-block: 0; inset-inline-end: 0; z-index: 40;
    width: min(82vw, 300px);
    transform: translateX(100%);            /* right-anchored: slide off to the right */
    transition: transform .22s ease;
    box-shadow: -10px 0 30px rgba(0, 0, 0, .14);
    overflow-y: auto;
  }
  .nav-toggle:checked ~ .panel__shell .panel__side { transform: translateX(0); }
  .nav-toggle:checked ~ .panel__shell .panel__backdrop {
    display: block; position: fixed; inset: 0; z-index: 35;
    background: rgba(0, 0, 0, .45);
  }
  .panel__close { display: block; }
}

/* ---- desktop: static sidebar pinned to the right ------------------- */
@media (min-width: 900px) {
  /* minmax(0,1fr), not 1fr: a plain 1fr column grows to fit its widest
     child, so one long row (the device list on «ورود و امنیت») pushed the
     whole page sideways. Now a wide child scrolls or wraps inside. */
  .panel__shell { display: grid; grid-template-columns: 260px minmax(0, 1fr); }
  .panel__side {
    grid-column: 1;                          /* first column = RIGHT in RTL */
    border-inline-end: 1px solid var(--line);
    position: sticky; inset-block-start: 0; block-size: 100dvh;
  }
  .panel__top    { display: none; }
  .panel__bottom { display: none; }
  .panel__main   { padding: 1.5rem; }
}

/* Legacy narrow cap kept only for the OLD bare pages (login); the redesigned
   onboarding uses .panel__main--bare, which owns its own width via .onb. */
.panel--bare .panel__main:not(.panel__main--bare) { max-width: 380px; margin-block-start: 3rem; }
.panel--bare .panel__main--bare { max-inline-size: none; margin-block-start: 0; }

/* ---- banners and alerts --------------------------------------------- */

.banner { padding: .6rem 1rem; font-size: .85rem; text-align: center; }
.banner--impersonate { background: #7c2d12; color: #fff; }
.banner--readonly    { background: var(--warn-bg); color: var(--warn); }
.banner a { text-decoration: underline; }

.alert { padding: .7rem 1rem; border-radius: var(--radius); font-size: .9rem; margin-block: .75rem; }
.alert--ok  { background: #ecfdf5; color: #065f46; }
.alert--bad { background: #fef2f2; color: #991b1b; }
/* Between the two: something needs doing, nothing is broken. */
.alert--warn { background: var(--warn-bg); color: var(--warn); }
.alert--warn a { color: inherit; text-decoration: underline; }

/* ---- cards ----------------------------------------------------------- */

.card {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 1rem; margin-block-end: 1rem;
}
.card--warn    { border-color: #fcd34d; background: var(--warn-bg); }
.card--next    { border-inline-start: 3px solid var(--primary); }
.card--next__label { font-size: .8rem; color: var(--muted); margin: 0; }
.card--actions { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }

/* ---- buttons and forms ----------------------------------------------- */

.btn {
  display: inline-block; padding: .6rem 1.2rem; border: 1px solid transparent;
  border-radius: var(--radius); font: inherit; font-weight: 600; cursor: pointer;
}
.btn--primary { background: var(--primary); color: var(--on-primary); }
.btn--ghost   { background: transparent; border-color: var(--line); }
.btn--danger  { background: transparent; border-color: var(--danger); color: var(--danger); }
.btn--small   { padding: .3rem .8rem; font-size: .85rem; font-weight: 500; }

label { display: block; margin-block-end: .75rem; }
label > span { display: block; font-size: .85rem; color: var(--muted); margin-block-end: .25rem; }
input, select, textarea {
  width: 100%; padding: .6rem .75rem; font: inherit;
  border: 1px solid var(--line); border-radius: var(--radius); background: #fff;
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--primary); outline-offset: 1px; }

form.inline { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; margin: 0; }
form.inline input { width: auto; flex: 1 1 8rem; }

/* ---- dashboard tiles -------------------------------------------------- */

.tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: .75rem; margin-block-end: 1rem; }
@media (min-width: 700px) { .tiles { grid-template-columns: repeat(4, 1fr); } }
.tile {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: .9rem; text-align: center;
}
.tile--strong { border-color: var(--primary); }
.tile--warn   { border-color: #fcd34d; background: var(--warn-bg); }
.tile__n { display: block; font-size: 1.3rem; font-weight: 700; }
.tile__l { display: block; font-size: .78rem; color: var(--muted); }

.checklist summary { cursor: pointer; font-size: .85rem; color: var(--muted); margin-block-start: .75rem; }
.checklist ul { list-style: none; padding: 0; margin-block-start: .5rem; }
.checklist li { padding-block: .3rem; font-size: .9rem; }
.checklist li.is-done { color: var(--muted); text-decoration: line-through; }

/* ---- lists ------------------------------------------------------------ */

.order-list { list-style: none; padding: 0; margin: 0; }
.order-list li { border-block-end: 1px solid var(--line); }
.order-list li:last-child { border-block-end: 0; }
.order-list a {
  display: grid; gap: .35rem .75rem; padding-block: .8rem; align-items: center;
  grid-template-columns: auto 1fr auto;
}
@media (min-width: 700px) {
  .order-list--full a { grid-template-columns: 6rem 9rem 1fr auto auto auto; }
}
.order-list__code   { font-weight: 700; }
.order-list__total  { font-weight: 600; }
.order-list__mobile,
.order-list__items  { color: var(--muted); font-size: .85rem; }
.order-list time    { color: var(--muted); font-size: .8rem; }

.chip {
  display: inline-block; padding: .1rem .55rem; border-radius: 999px;
  font-size: .75rem; background: #eef2ff; color: #3730a3; white-space: nowrap;
}
.chip--paid       { background: #ecfdf5; color: #065f46; }
.chip--preparing  { background: #eff6ff; color: #1e40af; }
.chip--shipped    { background: #f5f3ff; color: #5b21b6; }
.chip--delivered  { background: #f0fdf4; color: #14532d; }
.chip--cancelled,
.chip--failed     { background: #fef2f2; color: #991b1b; }
.chip--awaiting_manual_review,
.chip--pending_payment { background: var(--warn-bg); color: var(--warn); }

.tabs { display: flex; gap: .25rem; overflow-x: auto; margin-block-end: .75rem; }
.tabs a {
  padding: .45rem .9rem; border-radius: 999px; white-space: nowrap;
  font-size: .85rem; background: var(--card); border: 1px solid var(--line);
}
.tabs a.is-active { background: var(--primary); color: var(--on-primary); border-color: var(--primary); }

.search { display: flex; gap: .5rem; margin-block-end: 1rem; }

.pager { display: flex; gap: 1rem; justify-content: center; align-items: center;
         margin-block: 1.5rem; font-size: .9rem; }

/* ---- order detail ------------------------------------------------------ */

.order-detail__head { display: flex; gap: .75rem; align-items: center; flex-wrap: wrap; margin-block-end: 1rem; }
.order-detail__head h1 { margin: 0; }
.order-detail__head time { color: var(--muted); font-size: .85rem; margin-inline-start: auto; }

.table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.table th, .table td { text-align: start; padding: .5rem .4rem; border-block-end: 1px solid var(--line); }
.table th { color: var(--muted); font-weight: 500; }
.table small { display: block; color: var(--muted); font-size: .8rem; }

.totals { display: grid; grid-template-columns: 1fr auto; gap: .3rem 1rem;
          margin-block-start: 1rem; font-size: .9rem; }
.totals dt { color: var(--muted); margin: 0; }
.totals dd { margin: 0; text-align: end; }
.totals .grand { font-weight: 700; font-size: 1rem; color: var(--ink); padding-block-start: .4rem;
                 border-block-start: 1px solid var(--line); }

.receipt { display: grid; gap: 1rem; margin-block-start: 1rem; }
@media (min-width: 700px) { .receipt { grid-template-columns: 260px 1fr; } }
.receipt__image img { width: 100%; border: 1px solid var(--line); border-radius: var(--radius); }

.sms-log { list-style: none; padding: 0; margin: 0; font-size: .85rem; }
.sms-log li { display: flex; gap: .6rem; flex-wrap: wrap; align-items: baseline;
              padding-block: .4rem; border-block-end: 1px dashed var(--line); }
.sms-log__when { color: var(--muted); }
.sms-log__status--delivered { color: var(--ok); }
.sms-log__status--failed    { color: var(--danger); }
.sms-log__status--queued    { color: var(--muted); }

.adjust summary { cursor: pointer; font-size: .85rem; color: var(--muted); margin-block-start: .75rem; }

/* ---- status («چرا؟») panel --------------------------------------------- */

.status-list { list-style: none; padding: 0; margin: 0; display: grid; gap: .75rem; }
.status-item { background: var(--card); border: 1px solid var(--line);
               border-radius: var(--radius); padding: 1rem; }
.status-item__head { display: flex; align-items: center; gap: .6rem; }
.status-item__title { font-size: 1rem; margin: 0; }
.status-item__value { margin-inline-start: auto; font-size: .85rem; color: var(--muted); }
.status-item__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--muted); flex: none; }
.status-item--ok   .status-item__dot { background: var(--ok); }
.status-item--todo .status-item__dot { background: #f59e0b; }
.status-item__why { margin: .5rem 0 0; font-size: .9rem; }
.status-item__detail { margin: .35rem 0 .75rem; font-size: .85rem; color: var(--muted); }

.login__code { margin-block-start: 1.5rem; padding-block-start: 1.5rem; border-block-start: 1px solid var(--line); }

/* ---- billing and the renewal notice ------------------------------------ */

.card--renew { border-inline-start: 3px solid var(--warn); background: var(--warn-bg); }
.billing__message { font-size: 1rem; margin-block: .5rem 1rem; }
.billing__amount  { font-size: 1.5rem; font-weight: 700; margin-block: .5rem; }
.billing__later   { margin-block-start: .75rem; }
.btn--wide        { display: block; width: 100%; text-align: center; }

.plans { display: grid; gap: .75rem; list-style: none; padding: 0; margin: 0;
         grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.plan  { border: 1px solid var(--line); border-radius: var(--radius); padding: .9rem; background: #fff; }
.plan--current { border-color: var(--primary); box-shadow: inset 0 0 0 1px var(--primary); }
.plan h3 { margin: 0 0 .25rem; font-size: .95rem; }
.plan__price { font-weight: 700; margin: 0 0 .5rem; }
.plan__price span { font-weight: 400; font-size: .8rem; color: var(--muted); }
.plan__limits { list-style: none; padding: 0; margin: 0; font-size: .82rem; color: var(--muted); }
.plan__limits li { padding-block: .1rem; }

.chip--open  { background: var(--warn-bg); color: var(--warn); }
.chip--void  { background: #f3f4f6; color: var(--muted); }
.chip--draft { background: #f3f4f6; color: var(--muted); }
.chip--out   { background: #fef2f2; color: #991b1b; }

/* ---- products ---------------------------------------------------------- */

.products__head { display: flex; align-items: center; gap: 1rem; margin-block-end: 1rem; }
.products__head h1 { margin: 0; }
.products__head .btn { margin-inline-start: auto; }

.product-list { list-style: none; padding: 0; margin: 0; }
.product-row {
  display: grid; align-items: center; gap: .5rem .75rem;
  padding-block: .7rem; border-block-end: 1px solid var(--line);
  grid-template-columns: 60px 1fr auto;
  grid-template-areas: 'img main actions' 'img price stock';
}
@media (min-width: 700px) {
  .product-row {
    grid-template-columns: 60px 1fr 9rem 7rem auto;
    grid-template-areas: 'img main price stock actions';
  }
}
.product-row.is-deleted { opacity: .55; }
.product-row__img     { grid-area: img; }
.product-row__img img { width: 60px; height: 60px; object-fit: contain;
                        background: var(--bg); border-radius: 6px; }
.product-row__main    { grid-area: main; display: flex; gap: .4rem; flex-wrap: wrap; align-items: center; }
.product-row__main a  { font-weight: 500; }
.product-row__price   { grid-area: price; }
.product-row__stock   { grid-area: stock; }
.product-row__actions { grid-area: actions; }

/* Inline edit: the two fields a shopkeeper changes daily. */
.product-row input[data-inline] {
  width: 100%; padding: .35rem .5rem; font-size: .9rem;
  border: 1px solid transparent; background: var(--bg); border-radius: 6px;
}
.product-row input[data-inline]:hover,
.product-row input[data-inline]:focus { border-color: var(--line); background: #fff; }
.product-row input.is-saving { opacity: .5; }
.product-row input.is-saved  { border-color: var(--ok); background: #ecfdf5; }
.product-row input.is-error  { border-color: var(--danger); background: #fef2f2; }

/* ---- quick add --------------------------------------------------------- */

/* Width now lives with the rest of the quick-add block at the end of this
   file; 460px was a phone column stretched down a desktop screen. */
.quick-add { margin-inline: auto; }
.row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }

.photo-field input[type="file"] {
  padding: 1.5rem .75rem; border: 2px dashed var(--line);
  background: var(--card); text-align: center; cursor: pointer;
}
.photo-field input[type="file"]:hover { border-color: var(--primary); }

.check { display: flex; gap: .5rem; align-items: flex-start; }
.check input { width: auto; margin-block-start: .35rem; }
.check span  { display: inline; font-size: .9rem; color: var(--ink); }

.more summary { cursor: pointer; font-size: .85rem; color: var(--muted); margin-block: .75rem; }

.empty .btn { margin-block-start: 1rem; }

/* ---- product form ------------------------------------------------------ */

.product-form details.card > summary { cursor: pointer; list-style: none; }
.product-form details.card > summary::-webkit-details-marker { display: none; }
.product-form details.card > summary h2 { display: inline; }
.product-form details.card > summary::before { content: '+ '; color: var(--muted); }
.product-form details.card[open] > summary::before { content: '– '; }

.image-strip { display: flex; gap: .5rem; flex-wrap: wrap; list-style: none; padding: 0; margin-block: .5rem 0; }
.image-strip li { position: relative; }
.image-strip img { width: 90px; height: 90px; object-fit: contain;
                   background: var(--bg); border-radius: 6px; }
.image-strip__badge {
  position: absolute; inset-block-end: 0; inset-inline: 0;
  font-size: .65rem; text-align: center; padding: .1rem;
  background: rgba(17, 24, 39, .75); color: #fff; border-radius: 0 0 6px 6px;
}
.image-strip__badge--warn { background: var(--warn); }

.form-actions {
  display: flex; gap: 1rem; align-items: center; flex-wrap: wrap;
  position: sticky; inset-block-end: 72px; background: var(--card);
  border: 1px solid var(--line); border-radius: var(--radius); padding: .75rem 1rem;
}
@media (min-width: 900px) { .form-actions { inset-block-end: 0; } }
.form-actions .btn { margin-inline-start: auto; }
.inline-label { display: flex; gap: .5rem; align-items: center; margin: 0; }
.inline-label > span { margin: 0; }
.inline-label select { width: auto; }

/* ---- variants ---------------------------------------------------------- */

.axis { border: 0; padding: 0; margin-block-end: 1rem; }
.axis legend { font-size: .85rem; color: var(--muted); padding: 0; margin-block-end: .35rem; }
.axis__values { display: flex; gap: .5rem; flex-wrap: wrap; }

.swatch {
  display: inline-flex; align-items: center; gap: .35rem; margin: 0;
  padding: .35rem .75rem; border: 1px solid var(--line);
  border-radius: 999px; cursor: pointer; font-size: .85rem; background: #fff;
}
.swatch input { width: auto; margin: 0; }
.swatch:has(input:checked) { border-color: var(--primary); background: #f0fdfa; }
.swatch__dot { width: 14px; height: 14px; border-radius: 50%; border: 1px solid var(--line); }

.table--variants input { padding: .35rem .5rem; font-size: .85rem; }
.table--variants td:first-child { font-weight: 500; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---- settings ---------------------------------------------------------- */

.settings-groups { list-style: none; padding: 0; margin: 0; display: grid; gap: .6rem; }
.settings-group a {
  display: block; background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 1rem;
}
.settings-group a:hover { border-color: var(--primary); text-decoration: none; }
.settings-group--todo a { border-inline-start: 3px solid #f59e0b; }
.settings-group__title { display: block; font-weight: 600; }
.settings-group__note  { display: block; font-size: .82rem; color: var(--muted); margin-block-start: .15rem; }

.settings-page { max-width: 680px; }
.settings-page .card--new { border-style: dashed; }

.notice-box {
  background: var(--bg); border-radius: var(--radius);
  padding: .75rem 1rem; margin-block: .75rem; font-size: .88rem;
}
.notice-box p { margin: 0 0 .4rem; }
.notice-box p:last-child { margin-block-end: 0; }
.notice-box code {
  background: #fff; padding: .1rem .4rem; border-radius: 4px;
  border: 1px solid var(--line);
}

.checklist-inline { list-style: none; padding: 0; margin-block: 0 1rem; font-size: .9rem; }
.checklist-inline li { padding-block: .25rem; }
.checklist-inline li.is-done { color: var(--muted); }
.checklist-inline small { display: block; margin-inline-start: 1.2rem; }

.plain-list { padding-inline-start: 1.2rem; margin-block: .5rem 1rem; font-size: .9rem; }
.plain-list li { padding-block: .15rem; list-style: disc; }

.ok { color: var(--ok); }

input[readonly] { background: var(--bg); cursor: pointer; }

/* ---- signup ------------------------------------------------------------ */

.signup, .welcome { max-width: 460px; margin-inline: auto; }
.welcome { max-width: 620px; }
.signup h1 { font-size: 1.35rem; line-height: 1.6; }
.signup__lead { color: var(--muted); margin-block: 0 1.25rem; }
.signup__points { list-style: none; padding: 0; margin-block-start: 1.5rem;
                  font-size: .88rem; color: var(--muted); }
.signup__points li { padding-block: .3rem; }
.signup__points li::before { content: '✓ '; color: var(--ok); }

.slug-field { display: flex; align-items: stretch; }
.slug-field input { border-start-end-radius: 0; border-end-end-radius: 0; min-inline-size: 0; }
.slug-field__suffix {
  display: flex; align-items: center; padding-inline: .6rem;
  background: var(--bg); border: 1px solid var(--line); border-inline-start: 0;
  border-start-start-radius: 0; border-end-start-radius: 0;
  border-start-end-radius: var(--radius); border-end-end-radius: var(--radius);
  font-size: .85rem; color: var(--muted);
}

.pack-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: .5rem; }
@media (min-width: 560px) { .pack-grid { grid-template-columns: repeat(3, 1fr); } }
.pack {
  display: block; margin: 0; padding: .7rem; cursor: pointer;
  border: 1px solid var(--line); border-radius: var(--radius); background: #fff;
}
.pack:has(input:checked) { border-color: var(--primary); background: #f0fdfa; }
.pack input { width: auto; margin: 0 0 .3rem; }
.pack__name { display: block; font-weight: 600; font-size: .9rem; }
.pack__note { display: block; font-size: .75rem; color: var(--muted); }

.share-buttons { display: flex; gap: .5rem; flex-wrap: wrap; margin-block: .75rem; }

/* A preset tile is a submit button, so it needs the pack styling reset. */
.pack--button { width: 100%; text-align: start; font: inherit; cursor: pointer; }
.pack--button:hover:not(:disabled) { border-color: var(--primary); }
.pack--button:disabled { opacity: .5; cursor: default; }

/* ---- platform admin ---------------------------------------------------- */

.platform .tabs .muted { font-size: .75rem; }
.platform .table code { font-size: .8rem; }
.platform details summary { cursor: pointer; margin-block: .6rem; color: var(--muted); font-size: .9rem; }

/* ---- theme editor ------------------------------------------------------ */

.palette { display: flex; gap: .4rem; flex-wrap: wrap; }
.palette__swatch { margin: 0; cursor: pointer; }
.palette__swatch input { position: absolute; opacity: 0; width: 0; height: 0; }
.palette__swatch span {
  display: block; width: 34px; height: 34px; border-radius: 50%;
  border: 2px solid transparent; box-shadow: 0 0 0 1px var(--line);
}
.palette__swatch:has(input:checked) span {
  border-color: #fff; box-shadow: 0 0 0 2px var(--ink);
}

.section-list { list-style: none; counter-reset: s; padding: 0; margin: 0; }
.section-item {
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: .6rem .8rem; margin-block-end: .5rem; background: #fff;
}
.section-item__head { display: flex; align-items: center; gap: .5rem; }
.section-item__name { font-weight: 600; }
.section-item__name::before { counter-increment: s; content: counter(s) '. '; color: var(--muted); }
.section-item__actions { margin-inline-start: auto; display: flex; gap: .25rem; }
.section-item details summary { cursor: pointer; font-size: .85rem; color: var(--muted);
                                margin-block-start: .5rem; }
.add-section { margin-block-start: 1rem; }
.add-section select { flex: 1; }

/* ---- discounts --------------------------------------------------------- */

.discounts .table code { font-weight: 700; font-size: .95em; }
.discounts .table small { display: block; color: var(--muted); font-size: .78rem; }
.is-muted { opacity: .55; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

.export-run { display: grid; gap: .25rem; padding-block: .8rem; }
.export-run__files { display: flex; gap: .75rem; flex-wrap: wrap; font-size: .85rem; }
.export-run__files a { color: var(--primary); }

/* ---- متن خودکار -------------------------------------------------------- */

/* Side by side on a desktop, stacked on a phone. The comparison IS the
   screen, so when it stacks the live text has to come first -- a merchant
   who scrolls straight to the suggestion is approving blind. Source order
   already gives that, which is why this is a grid and not a flex with
   `order`. */
.ai__cols { display: grid; gap: 1rem; margin-block: .75rem; }
@media (min-width: 48rem) {
  .ai__cols { grid-template-columns: 1fr 1.4fr; }
}
.ai__col h3 { font-size: .8rem; color: var(--muted); font-weight: 600;
              margin-block-end: .35rem; }
.ai__col h4 { font-size: .8rem; margin-block: .6rem .2rem; }
.ai__long { line-height: 1.85; }
.ai__faq dt { font-weight: 600; margin-block-start: .4rem; }
.ai__faq dd { margin-inline-start: 0; color: var(--muted); }
.ai__actions { display: flex; gap: .5rem; flex-wrap: wrap;
               border-block-start: 1px solid var(--line); padding-block-start: .75rem; }
.ai__rejects { list-style: none; padding: 0; margin: 0; font-size: .85rem; }
.ai__rejects li { display: flex; gap: .5rem; flex-wrap: wrap; align-items: baseline;
                  padding-block: .35rem; border-block-end: 1px solid var(--line); }
.ai__rejects time { margin-inline-start: auto; color: var(--muted); font-size: .78rem; }
.muted { color: var(--muted); }

/* ---- ورود از فایل ------------------------------------------------------ */

.import__map { display: grid; gap: .75rem; }
@media (min-width: 40rem) {
  .import__map { grid-template-columns: repeat(2, 1fr); }
}
.import__map .req { color: var(--danger); font-style: normal; font-size: .75rem; }
.import__report { list-style: none; padding: 0; margin: 0 0 .75rem; }
.import__report li { padding-block: .3rem; border-block-end: 1px solid var(--line); }
.import__report .bad, .table .bad { color: var(--danger); }

/* The sample table is the merchant's own file and can be forty columns
   wide. It scrolls inside its own box; the page never scrolls sideways,
   because a panel that does on a phone feels broken. */
.import__sample { overflow-x: auto; }
.import__sample .table { min-width: 100%; white-space: nowrap; font-size: .8rem; }

/* ---- public pages on the platform host --------------------------------- */
/* status, pricing and terms. They render in the `bare` shell, so they get
   no nav and have to carry their own width. */

.status-public, .pricing, .terms { max-width: 46rem; margin-inline: auto; }

.status-public__head { font-size: 1.15rem; font-weight: 600; margin-block: 1rem .5rem; }
.status-public__head--ok  { color: var(--ok); }
.status-public__head--bad { color: var(--warn); }

.status-public__signals { list-style: none; padding: 0; margin: 0; }
.status-public__signals li { display: flex; align-items: baseline; gap: .5rem;
                             flex-wrap: wrap; padding-block: .5rem;
                             border-block-end: 1px solid var(--line); }
.status-public__dot { inline-size: .6rem; block-size: .6rem; border-radius: 50%;
                      background: var(--ok); flex: none; }
.status-public__signals .is-bad .status-public__dot { background: var(--warn); }

.incident { border-inline-start: 3px solid var(--warn); padding-inline-start: .75rem;
            margin-block-end: 1rem; }
.incident__meta { color: var(--muted); font-size: .85rem; }
.incident-list { list-style: none; padding: 0; margin: 0; }
.incident-list li { display: flex; gap: .6rem; flex-wrap: wrap; align-items: baseline;
                    padding-block: .4rem; border-block-end: 1px solid var(--line); }
.incident-list__date { color: var(--muted); font-size: .85rem; min-inline-size: 8rem; }
.incident-list__title { flex: 1; }

.pricing__grid { display: grid; gap: 1rem; margin-block: 1rem; }
@media (min-width: 44rem) {
  .pricing__grid { grid-template-columns: repeat(3, 1fr); }
}
.pricing__plan { display: flex; flex-direction: column; }
.pricing__price strong { font-size: 1.3rem; }
.pricing__limits, .pricing__common { list-style: none; padding: 0; margin: .75rem 0; }
.pricing__limits li, .pricing__common li { padding-block: .3rem; font-size: .9rem; }
/* A feature the plan does not include is struck through rather than hidden:
   the merchant is choosing between plans and needs to see what moving up
   would buy them. */
.pricing__limits .is-off { color: var(--muted); text-decoration: line-through; }
.pricing__plan .btn { margin-block-start: auto; }

.terms__steps { padding-inline-start: 1.2rem; }
.terms__steps li { padding-block: .4rem; }

/* ---- صفحه های فروشگاه --------------------------------------------------- */

.badge { display: inline-block; padding: .1rem .45rem; border-radius: 999px;
         font-size: .75rem; font-weight: 600; }
.badge--warn { background: var(--warn-bg); color: var(--warn); }

.pages-admin .table td small { display: block; color: var(--muted); font-size: .75rem; }
/* Monospace-ish for the URL so /p/about does not read as prose. */
.pages-admin .table td small[dir="ltr"] { font-variant-numeric: tabular-nums; }
.pages-admin textarea { font-family: ui-monospace, monospace; font-size: .85rem;
                        line-height: 1.7; }

/* ---- بازپرداخت ---------------------------------------------------------- */

.refunds { margin-block-start: 1rem; }
.refund { padding: .75rem; border-radius: var(--radius); background: var(--bg);
          margin-block-end: .5rem; }
/* Money still owed reads differently from money already returned. */
.refund--owed { background: var(--warn-bg); border-inline-start: 3px solid var(--warn); }
.refund form { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center;
               margin-block-start: .5rem; }
.refund form input[type="text"] { flex: 1; min-inline-size: 8rem; }

/* ---- sample products (seeded demo data) ------------------------------ */
.alert--info { background: #eff6ff; color: #1e40af; }
.sample-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  flex-wrap: wrap;
}
.chip--sample { background: #eef2ff; color: #3730a3; }

/* ---- category manager ----------------------------------------------- */
.cat-add { display: flex; gap: .6rem; align-items: flex-end; flex-wrap: wrap; }
.cat-add label { display: grid; gap: .25rem; font-size: .85rem; color: var(--muted); }
.cat-add__name  { flex: 1 1 12rem; }
.cat-add__parent { flex: 0 1 12rem; }
.cat-add input, .cat-add select { width: 100%; }

.cat-tree { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
.cat-row {
  display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: .55rem .7rem;
  /* nest visually by depth; capped so deep trees never march off the edge */
  margin-inline-start: calc(min(var(--depth, 0), 4) * 1.4rem);
}
.cat-row__main { display: flex; align-items: center; gap: .6rem; flex: 1 1 auto; min-width: 0; }
.cat-row__name { font-weight: 600; }
.cat-row__count { color: var(--muted); font-size: .8rem; white-space: nowrap; }
.cat-row__actions { display: flex; align-items: center; gap: .3rem; flex-wrap: wrap; }

.btn--icon {
  padding: .3rem .5rem; font-size: .8rem; line-height: 1;
  background: transparent; border-color: var(--line); color: var(--muted);
}

/* The rename form hangs under its toggle without pushing the row around. */
.cat-rename { position: relative; }
.cat-rename > summary { list-style: none; cursor: pointer; }
.cat-rename > summary::-webkit-details-marker { display: none; }
.cat-rename__form {
  position: absolute; inset-inline-end: 0; inset-block-start: calc(100% + .3rem);
  z-index: 10; background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: .5rem; box-shadow: 0 6px 20px rgba(0,0,0,.12);
  flex-wrap: nowrap;
}
@media (max-width: 560px) {
  .cat-rename__form { position: static; box-shadow: none; border: 0; padding: .4rem 0 0; }
}

/* ---- custom pages: row actions + link-style button ------------------ */
.pages-admin__actions { display: flex; gap: .75rem; align-items: center; flex-wrap: wrap; }
.pages-admin__actions a { color: var(--primary); }
.linklike {
  background: none; border: 0; padding: 0; font: inherit; cursor: pointer;
  color: var(--primary); text-decoration: underline;
}
.linklike--danger { color: var(--danger); }

/* ---- menu quick-add suggestions ------------------------------------- */
.menu-suggest { list-style: none; margin: .5rem 0 0; padding: 0; display: grid; gap: .4rem; }
.menu-suggest__item {
  display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
  padding: .5rem .6rem; border: 1px solid var(--line); border-radius: var(--radius);
}
.menu-suggest__label { font-weight: 600; }
.menu-suggest__url { color: var(--muted); font-size: .78rem; }
.menu-suggest__item .inline { margin-inline-start: auto; }

/* ---- setup progress (dashboard) ------------------------------------- */
.setup__head { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; }
.setup__label { font-weight: 700; }
.setup__count { color: var(--muted); font-size: .85rem; font-variant-numeric: tabular-nums; }
.setup__bar {
  block-size: 8px; border-radius: 999px; background: var(--bg);
  overflow: hidden; margin-block: .6rem 1rem;
}
.setup__bar > span {
  display: block; block-size: 100%; background: var(--primary);
  border-radius: 999px; transition: inline-size .4s ease; min-inline-size: 8px;
}
.setup__next {
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
  background: var(--active-bg); border-radius: var(--radius); padding: .8rem 1rem;
}
.setup__next-text { display: grid; gap: .15rem; flex: 1 1 12rem; }
.setup__next-kicker { font-size: .72rem; color: var(--primary); font-weight: 700; }
.setup__next-title { font-size: 1.05rem; }
.setup__next .btn { flex: none; }

.setup--done { display: flex; align-items: center; gap: .8rem; }
.setup__check {
  flex: none; inline-size: 40px; block-size: 40px; border-radius: 50%;
  background: var(--ok); color: #fff; display: inline-flex;
  align-items: center; justify-content: center; font-size: 1.3rem;
}

/* the full-steps list: real check circles instead of a bare glyph */
.checklist li { display: flex; align-items: center; gap: .5rem; }
.checklist__mark {
  flex: none; inline-size: 20px; block-size: 20px; border-radius: 50%;
  border: 1.5px solid var(--line); color: var(--ok);
  display: inline-flex; align-items: center; justify-content: center; font-size: .75rem;
}
.checklist li.is-done .checklist__mark { border-color: var(--ok); background: var(--ok); color: #fff; }

/* ---- insights (analytics) ------------------------------------------- */
.stat-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: .6rem; margin-block-end: 1rem; }
@media (min-width: 700px) { .stat-row { grid-template-columns: repeat(5, 1fr); } }
.stat { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: .8rem; }
.stat__n { display: block; font-weight: 700; font-size: 1.1rem; }
.stat__l { color: var(--muted); font-size: .8rem; }

.bars { list-style: none; margin: .5rem 0 0; padding: 0; display: flex; align-items: flex-end; gap: .4rem; block-size: 140px; }
.bars__col { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; block-size: 100%; gap: .3rem; }
.bars__bar { inline-size: 100%; max-inline-size: 34px; background: var(--primary); border-radius: 4px 4px 0 0; min-block-size: 2px; }
.bars__x { font-size: .7rem; color: var(--muted); }

.insights__cols { display: grid; gap: 1rem; }
@media (min-width: 700px) { .insights__cols { grid-template-columns: 1fr 1fr; } }
.rank { margin: 0; padding-inline-start: 1.2rem; display: grid; gap: .4rem; }
.rank li { display: flex; justify-content: space-between; gap: .5rem; }
.rank__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rank__v { color: var(--muted); font-variant-numeric: tabular-nums; }
.open-work { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
.open-work a { color: var(--primary); }

/* ---- inventory ------------------------------------------------------ */
.inv-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
.inv-row {
  display: flex; align-items: center; gap: .75rem; flex-wrap: wrap;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: .5rem .7rem;
}
.inv-row.is-out { border-color: var(--danger); }
.inv-row__name { font-weight: 600; flex: 1 1 12rem; min-width: 0; }
.inv-row__price { color: var(--muted); font-size: .85rem; }
.inv-row__variable { color: var(--muted); font-size: .8rem; }
.inv-row__stock input { inline-size: 6rem; text-align: center; }

/* ---- messages ------------------------------------------------------- */
.tab-badge {
  display: inline-block; min-inline-size: 1.3rem; padding: 0 .35rem; margin-inline-start: .25rem;
  background: var(--danger); color: #fff; border-radius: 999px; font-size: .72rem; text-align: center;
}
.tabs a.is-active .tab-badge { background: #fff; color: var(--primary); }
.msg-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.msg-row { display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem; flex-wrap: wrap;
  padding-block: .6rem; border-block-end: 1px solid var(--line); }
.msg-row:last-child { border-block-end: 0; }
.msg-row__main { display: grid; gap: .2rem; min-width: 0; flex: 1 1 14rem; }
.msg-row__who { font-weight: 600; }
.msg-row__mobile { color: var(--primary); font-variant-numeric: tabular-nums; }
.msg-row__ctx { color: var(--muted); font-size: .82rem; }
.msg-row__note { font-size: .88rem; }
.msg-row__side { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.msg-row__side time { color: var(--muted); font-size: .8rem; }

/* ---- related-products / product-row link ---------------------------- */
.cat-row__link-rel { color: var(--primary); font-size: .78rem; margin-inline-start: .4rem; }
.crumb { margin-block-end: .5rem; }
.crumb a { color: var(--muted); }

/* ---- reviews moderation --------------------------------------------- */
.stars { color: #f5a623; letter-spacing: 1px; }
.rv-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.rv-item { border: 1px solid var(--line); border-radius: var(--radius); padding: .7rem .9rem; }
.rv-item__head { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin-block-end: .3rem; }
.rv-item__who { font-weight: 700; }
.rv-item__prod { color: var(--muted); font-size: .85rem; }
.rv-item__head time { color: var(--muted); font-size: .8rem; margin-inline-start: auto; }
.rv-item__body { margin: 0 0 .5rem; }
.rv-item__actions { display: flex; gap: .4rem; flex-wrap: wrap; }

/* ---- bulk moderation ------------------------------------------------
   A spam wave is forty rows with one verdict. The checkbox column is the
   only reason this screen can answer it in a single decision. */
.rv-item__pick { inline-size: 18px; block-size: 18px; flex: none; margin: 0; cursor: pointer; }
.rv-item.is-picked { background: var(--primary-050, #e9effa); }
.rv-all {
  display: inline-flex; align-items: center; gap: .5rem;
  min-block-size: 44px; margin-block-end: .3rem;
  font-size: .88rem; color: var(--ink-soft, #3d4a5f); cursor: pointer;
}
.rv-all input { inline-size: 18px; block-size: 18px; margin: 0; cursor: pointer; }

/* ---- attribute value manager ---------------------------------------- */
.attr__name { margin-block-end: .6rem; }
.attr-vals { list-style: none; margin: 0 0 .8rem; padding: 0; display: grid; gap: .35rem; }
.attr-val {
  display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
  padding: .4rem .5rem; border: 1px solid var(--line); border-radius: var(--radius);
}
.attr-val__sw { inline-size: 18px; block-size: 18px; border-radius: 50%; border: 1px solid var(--line); flex: none; }
.attr-val__name { font-weight: 600; }
.attr-val__used { color: var(--muted); font-size: .78rem; }
.attr-val .cat-rename, .attr-val form { margin-inline-start: auto; }
.attr-add { margin-block-start: .3rem; }
.attr-add input[type="color"] { inline-size: 2.4rem; block-size: 2.2rem; padding: 0; border: 1px solid var(--line); border-radius: var(--radius); }

/* ---- customer wallet + abandoned carts ------------------------------ */
.wallet-balance { font-size: 1.05rem; }
.wallet-adjust { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; margin-block: .5rem; }
.wallet-adjust input[name="amount"] { inline-size: 9rem; }
.wallet-log { list-style: none; margin: .5rem 0 0; padding: 0; display: grid; gap: .3rem; }
.wallet-log li { display: flex; gap: .6rem; align-items: baseline; border-block-end: 1px solid var(--line); padding-block: .3rem; }
.wallet-log__amt { font-weight: 700; font-variant-numeric: tabular-nums; }
.wallet-log li.is-credit .wallet-log__amt { color: var(--ok); }
.wallet-log li.is-debit  .wallet-log__amt { color: var(--danger); }
.wallet-log__note { color: var(--muted); flex: 1; }
.wallet-log time { color: var(--muted); font-size: .78rem; }

.ab-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.ab-item__head { display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem; flex-wrap: wrap; }
.ab-item__who { font-weight: 700; margin-inline-end: .5rem; }
.ab-item__mobile { color: var(--primary); }
.ab-item__meta { text-align: end; }
.ab-item__total { font-weight: 700; display: block; }
.ab-item__meta time { color: var(--muted); font-size: .78rem; }
.ab-item__lines { list-style: none; margin: .5rem 0; padding: 0; color: var(--ink); font-size: .9rem; display: grid; gap: .2rem; }
.ab-item .btn { margin-block-start: .3rem; }

/* ---- tax + bundles -------------------------------------------------- */
.tax-input { display: inline-flex; align-items: center; gap: .3rem; }
.tax-input input { inline-size: 6rem; text-align: center; }
.tax-input__pct { color: var(--muted); }
.bundle-add .row-2 { margin-block: .5rem; }
.bundle-item-add { align-items: flex-end; }
.bundle-qty { flex: 0 0 5rem; }
.bundle-qty input { width: 100%; }

/* ---- staff / roles -------------------------------------------------- */
.staff-invite { display: grid; gap: .6rem; max-width: 460px; }
.staff-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
.staff-row { display: flex; align-items: center; justify-content: space-between; gap: .6rem; flex-wrap: wrap;
  border: 1px solid var(--line); border-radius: var(--radius); padding: .55rem .7rem; }
.staff-row__main { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.staff-row__who { font-weight: 600; }
.staff-row__mobile { color: var(--muted); font-size: .82rem; font-variant-numeric: tabular-nums; }
.staff-row__actions { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.chip--role { background: #eef2ff; color: #3730a3; }

/* =====================================================================
   VIRASHO BRAND LAYER  (2026-09) - official palette + dark navy sidebar.

   Primary  #173F8A (Virasho Blue) . Accent #21B79C (Fresh Teal)
   Navy     #12233F (sidebar / headers) . Ground #F7F5F0 (warm white)
   Appended last so it wins the cascade; every class name is unchanged.
   ===================================================================== */

:root{
  --primary:#173F8A; --primary-600:#123472; --primary-700:#0f2a5e; --primary-050:#e9effa;
  --admin-primary:#173F8A;   /* alias some older views reference */
  --accent:#21B79C;  --accent-600:#1a9c85;  --accent-050:#e4f6f2;
  --navy:#12233F;
  --on-primary:#ffffff;
  --ink:#14233c; --ink-soft:#3d4a5f; --muted:#6d7a8c;
  --line:#e8e4db; --line-soft:#f0ede6;
  --bg:#f7f5f0; --card:#ffffff;
  --ok:#12876f;    --ok-bg:#e3f5f0;
  --warn:#b5730a;  --warn-bg:#fbf1df;
  --danger:#cf3b3b;--danger-bg:#fbeaea;
  --info:#173F8A;  --info-bg:#e9effa;
  --active-bg:#e9effa;
  --radius:16px; --radius-sm:12px;
  --shadow-xs:0 1px 2px rgba(18,35,63,.05);
  --shadow-sm:0 4px 20px rgba(18,35,63,.06);
  --shadow-md:0 10px 30px rgba(18,35,63,.09);
  --shadow-lg:0 18px 44px rgba(18,35,63,.16);
  /* 2026-09 revision: a mostly-WHITE panel. The sidebar is white with dark
     ink; contrast (the blue active wash + teal edge) appears only where it
     helps orientation, not as a slab of navy. */
  --side-bg:#ffffff; --side-ink:#26364e; --side-ink-soft:#5f6b7c;
  --side-active:#e9effa; --side-line:#ececec;
}

body{ background:var(--bg); color:var(--ink); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
h1{ font-weight:800; letter-spacing:-.01em; color:var(--navy); }
h2{ font-weight:700; color:var(--navy); }

a,.btn,.nav-link,.tile,.card,input,select,textarea,.nav-group>details>summary,.tabs a,.chip{
  transition:background-color .15s ease,border-color .15s ease,color .15s ease,box-shadow .15s ease,transform .15s ease;
}
.btn:focus-visible,a:focus-visible,summary:focus-visible{ outline:2px solid var(--primary); outline-offset:2px; border-radius:8px; }

/* ---- LIGHT SIDEBAR (2026-09 revision) ------------------------------ */
.panel__side{ background:var(--side-bg); color:var(--side-ink); border-inline-end:1px solid var(--side-line); overflow-x:hidden; }
.panel__nav{ overflow-x:hidden; }
.panel__brand{ border-block-end:1px solid var(--side-line); }
.panel__brandlink{ display:flex; align-items:center; gap:.55rem; min-width:0; }
.panel__shop{ color:var(--navy); font-weight:800; letter-spacing:-.01em; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.panel__shop small{ color:var(--side-ink-soft); }
.brand__mark{ background:linear-gradient(135deg,#2b62c7,var(--accent)); color:#fff; box-shadow:0 4px 12px rgba(33,183,156,.28); }
.panel__close{ color:var(--side-ink); }

.panel__nav a,.nav-group>details>summary{ color:var(--side-ink); font-weight:600; padding:.62rem .8rem; position:relative; }
.panel__icon{ color:var(--side-ink-soft); }
.panel__nav a:hover,.nav-group>details>summary:hover{ background:var(--line-soft); color:var(--navy); }
.panel__nav a:hover .panel__icon{ color:var(--ink-soft); }
.panel__nav a.is-active{ background:var(--side-active); color:var(--primary); font-weight:700; }
.panel__nav a.is-active .panel__icon{ color:var(--primary); }
.panel__nav a.is-active::before{ content:""; position:absolute; inset-block:22%; inset-inline-start:0; width:3px; border-radius:3px; background:var(--accent); }
.nav-group>details[open]>summary{ color:var(--navy); }
.nav-group__chev{ color:var(--side-ink-soft); }
.nav-group__items a{ color:var(--side-ink-soft); font-weight:500; }
.nav-group__items a:hover{ background:var(--line-soft); color:var(--navy); }
.nav-group__items a.is-active{ background:var(--side-active); color:var(--primary); font-weight:700; }
.panel__side-foot{ border-block-start:1px solid var(--side-line); }
.panel__visit{ color:var(--primary); font-weight:700; }
.panel__logout button{ color:var(--side-ink-soft); font-weight:600; }
.panel__logout button:hover{ color:var(--navy); }

/* ---- mobile bars (light, on brand ground) -------------------------- */
.panel__top{ background:var(--card); box-shadow:var(--shadow-sm); padding:.6rem .8rem; }
.panel__shop-m{ color:var(--navy); font-weight:800; }
.panel__burger{ color:var(--navy); }
.panel__bottom{ background:var(--card); box-shadow:0 -1px 2px rgba(18,35,63,.05),0 -6px 18px rgba(18,35,63,.07); }
.panel__bottom a.is-active{ color:var(--primary); }
.panel__bottom-add{ background:var(--primary); box-shadow:0 6px 16px rgba(23,63,138,.4); }

/* ---- cards & surfaces ---------------------------------------------- */
.card{ border-color:var(--line-soft); box-shadow:var(--shadow-sm); padding:1.4rem; }
.tiles{ gap:1.5rem; }
/* form action buttons: grouped together, not pushed to opposite edges */
.form-actions{ justify-content:flex-start; gap:.6rem; }
.form-actions .btn{ margin-inline-start:0; }
.card__head .card__link,.card__link{ color:var(--primary); font-weight:700; }
.status-item,.settings-group a,.plan,.staff-row,.tile,.pack,.swatch,.ab-item{ box-shadow:var(--shadow-xs); }
.settings-group a:hover{ border-color:var(--primary); box-shadow:var(--shadow-sm); transform:translateY(-1px); }

/* ---- buttons ------------------------------------------------------- */
.btn{ display:inline-flex; align-items:center; justify-content:center; min-height:44px; padding:.5rem 1.35rem; border-radius:var(--radius-sm); font-weight:700; }
.btn--small{ min-height:34px; padding:.3rem .85rem; }
.btn--primary{ background:var(--primary); color:#fff; box-shadow:0 2px 8px rgba(23,63,138,.28); }
.btn--primary:hover{ background:var(--primary-600); box-shadow:0 4px 14px rgba(23,63,138,.34); transform:translateY(-1px); }
.btn--primary:active{ transform:translateY(0); }
.btn--ghost{ background:var(--card); border-color:var(--line); color:var(--ink-soft); box-shadow:var(--shadow-xs); }
.btn--ghost:hover{ border-color:#cbd3dd; color:var(--navy); }
.btn:disabled{ opacity:.55; cursor:default; box-shadow:none; transform:none; }

/* ---- inputs -------------------------------------------------------- */
input,select,textarea{ min-height:44px; padding:.65rem .9rem; border-radius:var(--radius-sm); background:#fdfdfb; }
textarea{ min-height:120px; }
input:hover,select:hover,textarea:hover{ border-color:#cbd3dd; }
input:focus,select:focus,textarea:focus{ outline:none; border-color:var(--primary); background:#fff; box-shadow:0 0 0 3px rgba(23,63,138,.15); }
label{ margin-block-end:1.25rem; }
label>span{ color:var(--ink-soft); font-weight:600; font-size:.875rem; margin-block-end:.5rem; }

/* ---- tables -------------------------------------------------------- */
.table thead th,.table th{ background:#f4f2ec; color:var(--muted); font-weight:700; font-size:.78rem; letter-spacing:.02em; padding:.7rem .6rem; border-block-end:1px solid var(--line); }
.table td{ padding:.7rem .6rem; border-block-end:1px solid var(--line-soft); }
.table tbody tr{ transition:background-color .12s ease; }
.table tbody tr:hover{ background:#faf9f5; }

/* ---- KPI tiles ----------------------------------------------------- */
.tiles{ gap:1rem; }
.tile{ border-color:var(--line-soft); border-radius:var(--radius); padding:1.05rem 1.1rem; text-align:start; display:flex; flex-direction:column; gap:.35rem; }
.tile__n{ font-size:1.65rem; font-weight:800; letter-spacing:-.02em; font-variant-numeric:tabular-nums; color:var(--navy); }
.tile__l{ font-size:.8rem; color:var(--muted); font-weight:500; }
.tile--strong{ border-color:var(--line-soft); border-inline-start:3px solid var(--primary); }
.tile__ic{ width:42px; height:42px; border-radius:12px; display:grid; place-items:center; margin-block-end:.15rem; }
.tile__ic svg{ width:22px; height:22px; }
.tile__ic--blue{ background:var(--primary-050); color:var(--primary); }
.tile__ic--teal{ background:var(--accent-050); color:var(--accent-600); }
.tile__ic--amber{ background:var(--warn-bg); color:var(--warn); }
a.tile:hover{ box-shadow:var(--shadow-md); transform:translateY(-1px); }

/* ---- chips / tabs -------------------------------------------------- */
.chip{ font-weight:700; padding:.16rem .6rem; background:var(--line-soft); color:var(--ink-soft); }
.chip--paid,.chip--delivered{ background:var(--accent-050); color:var(--accent-600); }
.chip--preparing{ background:var(--info-bg); color:var(--info); }
.chip--sample,.chip--role{ background:var(--primary-050); color:var(--primary); }
.chip--shipped{ background:var(--primary-050); color:var(--primary); }
/* label helpers some views reference but the base sheet never defined */
.head-links{ display:flex; gap:.5rem; margin-inline-start:auto; flex-wrap:wrap; }
.stat__t{ font-size:.8rem; color:var(--muted); font-weight:500; }
.tabs a{ font-weight:600; border-color:var(--line); color:var(--ink-soft); background:var(--card); }
.tabs a:hover{ border-color:#cbd3dd; }
.tabs a.is-active{ background:var(--primary); color:#fff; border-color:var(--primary); box-shadow:0 2px 8px rgba(23,63,138,.26); }

/* ---- list rows ----------------------------------------------------- */
.order-list a,.product-row,.cat-row,.inv-row,.msg-row,.ab-item{ border-radius:10px; }
.order-list a:hover{ background:#faf9f5; }
.order-list__code,.order-list__total{ font-weight:800; color:var(--navy); }

/* ---- login card + logo --------------------------------------------- */
.login{ background:var(--card); border:1px solid var(--line-soft); border-radius:var(--radius); box-shadow:var(--shadow-md); padding:1.7rem 1.5rem; margin-block-start:1rem; }
.login h1{ font-size:1.3rem; text-align:center; margin-block-end:.25rem; }
.login__lead{ color:var(--muted); text-align:center; margin-block:0 1.2rem; font-size:.92rem; }
.login__sentto{ font-size:.88rem; color:var(--ink-soft); margin-block:0 .75rem; }
.login__code{ margin-block-start:1.1rem; padding-block-start:1.1rem; border-block-start:1px solid var(--line-soft); }
.login__code input[name="code"]{ font-size:1.4rem; text-align:center; letter-spacing:.5em; font-variant-numeric:tabular-nums; padding-inline:.5rem; }
.btn--wide{ display:block; width:100%; text-align:center; }

/* ---- alerts -------------------------------------------------------- */
.alert{ border-radius:var(--radius-sm); font-weight:500; border:1px solid transparent; }
.alert--ok{ background:var(--ok-bg); color:#0b6b57; border-color:#b7e6da; }
.alert--bad{ background:var(--danger-bg); color:#a53030; border-color:#f2caca; }
.alert--warn{ background:var(--warn-bg); color:var(--warn); border-color:#f2d9a6; }

/* ---- content width + responsive shell ------------------------------ */
.panel__main{ max-width:1320px; }
@media (min-width:900px){
  .panel__shell{ grid-template-columns:256px 1fr; }
  .panel__side{ box-shadow:2px 0 16px rgba(18,35,63,.14); }
  .panel__main{ padding:2rem; }
}
@media (max-width:899.98px){
  /* Physical right-anchoring so translateX(100%) fully hides the closed drawer
     off the right edge. The logical inset-inline-end resolved so that the
     closed drawer left a navy strip peeking at the edge (invisible on the old
     light sidebar, glaring on the navy one). */
  .panel__side{ right:0; left:auto; width:min(86vw,320px); }
  .panel__main{ padding:1rem; }
}
/* two-up field rows stack on a phone; wide tables scroll inside their card */
.table-wrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
@media (max-width:600px){ .row-2{ grid-template-columns:1fr; } }
@media (max-width:720px){
  .card:has(.table){ overflow-x:auto; -webkit-overflow-scrolling:touch; }
}
@media (prefers-reduced-motion:reduce){ *{ transition:none !important; } }

/* ====================================================================
   FORM CONTROLS + LOGIN CODE — appended last so they win the cascade.
   ==================================================================== */

/* Select: one consistent chevron for every browser, on the RTL-left side. */
select:not([multiple]):not([size]){
  appearance:none; -webkit-appearance:none; -moz-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' stroke='%236d7a8c' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:left .9rem center;
  padding-left:2.4rem;
  cursor:pointer;
}
select:not([multiple]):not([size]):focus{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' stroke='%23173F8A' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* Checkbox: a brand-filled custom box, bigger tap target, crisp tick. */
input[type="checkbox"]{
  appearance:none; -webkit-appearance:none;
  inline-size:1.2rem; block-size:1.2rem; min-height:0; padding:0; margin:0;
  border:1.6px solid var(--line); border-radius:.4rem; background:#fff;
  vertical-align:middle; cursor:pointer; flex:none;
  transition:background-color .12s, border-color .12s, box-shadow .12s;
}
input[type="checkbox"]:hover{ border-color:var(--primary); }
input[type="checkbox"]:checked{
  border-color:var(--primary);
  background:var(--primary) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='10' viewBox='0 0 12 10' fill='none'%3E%3Cpath d='M1 5 4.4 8.4 11 1.6' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/.72rem no-repeat;
}
input[type="checkbox"]:focus-visible{ outline:none; box-shadow:0 0 0 3px rgba(23,63,138,.2); }
.check input{ margin-block-start:.12rem; }
/* The toggle-switch keeps its own hidden native checkbox — never draw a box. */
.switch input[type="checkbox"]{ inline-size:0; block-size:0; border:0; background:none; box-shadow:none; }

/* Login code: five segmented cells (JS enhancement of one <input>). */
.otp{ display:flex; gap:.5rem; direction:ltr; justify-content:center; margin-block:.15rem 1rem; }
.otp__cell{
  inline-size:clamp(2.5rem,14vw,3.1rem); block-size:3.4rem; min-height:0; padding:0;
  text-align:center; font-size:1.5rem; font-weight:700; font-variant-numeric:tabular-nums;
  border:1.6px solid var(--line); border-radius:var(--radius-sm); background:#fff; color:var(--ink);
}
.otp__cell:focus{ outline:none; border-color:var(--primary); box-shadow:0 0 0 3px rgba(23,63,138,.18); }
.otp--bad .otp__cell{ border-color:var(--danger); }
.otp--bad{ animation:otp-shake .42s cubic-bezier(.36,.07,.19,.97); }
@keyframes otp-shake{
  10%,90%{ transform:translateX(-1px); }
  20%,80%{ transform:translateX(2px); }
  30%,50%,70%{ transform:translateX(-6px); }
  40%,60%{ transform:translateX(6px); }
}
@media (prefers-reduced-motion:reduce){ .otp--bad{ animation:none; } }

/* Form-level shake for a code form WITHOUT the segmented OTP (the reset
   screen): the segmented enhancement owns the shake when it is present. */
.is-shake{ animation:otp-shake .42s cubic-bezier(.36,.07,.19,.97); }
@media (prefers-reduced-motion:reduce){ .is-shake{ animation:none; } }

/* Password field with an inline show/hide toggle. */
.pw{ position:relative; display:block; }
.pw input{ padding-inline-end:3.6rem; }
.pw__toggle{
  position:absolute; inset-inline-end:.4rem; inset-block-start:50%; transform:translateY(-50%);
  min-height:0; height:44px; padding:0 .6rem; border:0; border-radius:8px;
  background:none; color:var(--primary); font:inherit; font-size:.82rem; font-weight:600; cursor:pointer;
}
.pw__toggle:hover{ background:var(--primary-050); }

/* Login: the phone number is the hero of the first screen — big, centred,
   16px+ so iOS never zooms on focus, with a live "valid" tick. */
.login__mobile .field__wrap{ position:relative; display:block; }
.login__mobile input[name="mobile"]{
  font-size:1.2rem; block-size:3.3rem; text-align:center; font-weight:600;
  letter-spacing:.06em; font-variant-numeric:tabular-nums;
}
.login__mobile input[name="mobile"]::placeholder{ font-weight:400; letter-spacing:.04em; color:#aeb7c2; }
.login__mobile input[name="mobile"].is-valid{ border-color:var(--accent); }
.field__ok{
  position:absolute; inset-block-start:50%; right:.9rem; transform:translateY(-50%) scale(.5);
  inline-size:1.35rem; block-size:1.35rem; color:var(--accent);
  opacity:0; transition:opacity .16s ease, transform .16s ease; pointer-events:none;
}
.login__mobile input[name="mobile"].is-valid ~ .field__ok{ opacity:1; transform:translateY(-50%) scale(1); }
.login__mobile .field{ margin-block-end:0; }
.field__hint{ display:block; margin-block:.55rem 1.15rem; color:var(--muted); font-size:.85rem; text-align:center; line-height:1.6; }
/* inside a form field (not the login's own centred line): under its input, start-aligned */
.field .field__hint{ margin-block:.35rem 0; text-align:start; font-size:.8rem; }
.login__alt{ text-align:center; margin-block-start:1.15rem; }
.login__alt a{ color:var(--primary); font-weight:600; font-size:.92rem; }
.login__alt a:hover{ text-decoration:underline; }
.login__sep{ color:var(--muted); margin-inline:.4rem; }

/* «مرا به خاطر بسپار» sits between the last field and the button, so it
   keeps the same rhythm a field has: nothing added above (the field above
   already supplies 18px) and a field's worth below. The negative top
   margin this used to have pulled it up into the field and left 13px above
   against 6px below — which is exactly the unevenness it was meant to
   remove. */
/* Spaced and centred, but NOT enlarged: a bigger font here made the row
   five pixels taller than the two above it, which is the whole thing this
   round set out to fix. */
.login__cap input{ letter-spacing:.14em; text-align:center; }

/* Who to ask when locked out. Quiet, and below the recovery links, because
   it answers the question those links did not. */
.login__help{
  margin-block-start:1rem; text-align:center;
  font-size:.88rem; color:var(--muted);
}
.login__help a{
  display:inline-block; padding-block:.4rem;
  color:var(--primary); font-weight:700;
}
.login__help a:hover{ text-decoration:underline; }
/* «هنوز فروشگاه ندارید؟» — the way IN. Set apart from the recovery links
   above it by a rule, because it answers a different question: those are
   for somebody who HAS an account. */
.login__new{
  margin-block-start:1.6rem; padding-block-start:1.2rem;
  border-block-start:1px solid var(--line);
  text-align:center; font-size:.9rem; color:var(--ink-soft,#3d4a5f);
}
.login__new a{ color:var(--primary); font-weight:700; }
.login__new a:hover{ text-decoration:underline; }

/* ==========================================================================
   AUTH — full-screen branded login. Desktop = split (brand panel + form);
   mobile = compact brand band on top, form below. Fixed so it escapes the
   380px bare container; only the login views use .auth.
   ========================================================================== */
.auth{
  position:fixed; inset:0; z-index:20;
  display:grid; grid-template-columns:1.05fr .95fr;
  background:var(--card); overflow:hidden;
}

/* ---- brand panel (inline-start → right in RTL) ---- */
.auth__brand{
  position:relative; overflow:hidden; color:#fff;
  padding:clamp(2rem,4vw,3.75rem);
  display:flex; flex-direction:column; gap:1.75rem;
  background:linear-gradient(150deg,#12233F 0%,#173F8A 60%,#1a58b4 100%);
}
.auth__brand::before{ content:""; position:absolute; inline-size:30rem; block-size:30rem;
  inset-block-start:-10rem; inset-inline-end:-9rem; border-radius:50%;
  background:radial-gradient(circle,rgba(33,183,156,.42),transparent 68%); pointer-events:none; }
.auth__brand::after{ content:""; position:absolute; inline-size:24rem; block-size:24rem;
  inset-block-end:-10rem; inset-inline-start:-7rem; border-radius:50%;
  background:radial-gradient(circle,rgba(33,183,156,.16),transparent 70%); pointer-events:none; }
.auth__brand > *{ position:relative; z-index:1; }
.auth__logo-badge{ display:inline-flex; align-self:flex-start; background:#fff; border-radius:16px;
  padding:.6rem .9rem; box-shadow:0 10px 30px rgba(0,0,0,.18); }
.auth__logo{ height:64px; width:auto; display:block; }
/* A shop that never uploaded a logo still gets an identity on its own login
   page — its own initial, set in type. Never a borrowed mark. */
.auth__logo-badge--text{ inline-size:64px; block-size:64px; align-items:center; justify-content:center; padding:0; }
.auth__logo-letter{ font-size:2rem; font-weight:800; color:var(--primary,#173F8A); line-height:1; }
.auth__brand-body{ margin-block:auto; }
.auth__headline{ font-size:clamp(1.55rem,2.4vw,2.15rem); font-weight:800; line-height:1.4; margin:0 0 1rem; letter-spacing:-.01em; }
.auth__tagline{ font-size:1.02rem; line-height:2; color:rgba(255,255,255,.82); margin:0 0 1.75rem; max-inline-size:36ch; }
.auth__points{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:.9rem; }
.auth__points li{ display:flex; align-items:center; gap:.65rem; font-size:1rem; color:rgba(255,255,255,.93); }
.auth__points svg{ inline-size:1.4rem; block-size:1.4rem; flex:none; color:#2fd0b3; }
.auth__brand-foot{ font-size:.82rem; color:rgba(255,255,255,.78); margin:0; }

/* ---- the same panel, wearing the SHOP's brand -----------------------
   On a merchant's own domain this page is part of their business, so it
   takes their colour. The two overlays are white and black rather than our
   teal, because they have to sit on ANY hue a merchant might have picked;
   and the text colour arrives already decided by Theme::tokens(), which
   contrast-checks it — so a yellow shop gets dark text instead of white on
   white, by the same rule the storefront uses. */
.auth__brand--shop{
  background:var(--auth-bg,#173F8A);
  color:var(--auth-ink,#fff);
  justify-content:flex-start;
}
.auth__brand--shop::before{ background:radial-gradient(circle,rgba(255,255,255,.20),transparent 68%); }
.auth__brand--shop::after { background:radial-gradient(circle,rgba(0,0,0,.16),transparent 70%); }

.auth__shopname{
  font-size:clamp(1.6rem,2.6vw,2.3rem); font-weight:800; line-height:1.45;
  letter-spacing:-.01em; margin:0;
}
/* Opacity, not a hard rgba: the ink is white on a dark shop and near-black
   on a light one, and a fixed rgba(255,255,255,…) would vanish on the
   second. */
/* .92, not .82. Measured: at .82 white-on-teal composites to 4.24:1, which
   is under the 4.5 AA floor for 16px text — close enough to look fine and
   still be wrong. Softening text with opacity is a contrast decision, so it
   gets measured like one. */
.auth__shopdesc{ font-size:1rem; line-height:2; margin:.7rem 0 0; max-inline-size:38ch; opacity:.92; }
.auth__visit{
  align-self:flex-start; margin-block-start:auto;
  display:inline-flex; align-items:center; min-block-size:44px;
  padding:.55rem 1.1rem; border-radius:999px;
  border:1px solid currentColor; color:inherit; text-decoration:none;
  font-size:.9rem; font-weight:700;
}
/* The border carries the "quiet" here instead of the text opacity, so the
   label itself stays at full contrast. */
.auth__visit{ border-color:currentColor; }
.auth__visit:hover{ background:rgba(255,255,255,.12); }
/* The shop's own logo goes on its own colour, so the white plate that keeps
   OUR logo legible on OUR gradient is just a box around theirs. */
.auth__brand--shop .auth__logo-badge{ background:rgba(255,255,255,.92); }
.auth__brand--shop .auth__logo{ height:56px; }

/* The one warning the login page keeps, next to the code box and nowhere
   else. Quiet: it is a caution, not an alarm, and an alarm on a screen
   somebody uses every morning stops being read by Thursday. */
.login__warn{
  margin:.9rem 0 0; font-size:.82rem; line-height:1.9;
  color:var(--ink-soft,#3d4a5f); text-align:start;
}

/* ---- form panel (inline-end → left in RTL) ---- */
.auth__form{ display:flex; flex-direction:column; min-block-size:0; overflow-y:auto; padding:clamp(1.5rem,4vw,3rem); }
.auth .login{ background:none; border:0; box-shadow:none; padding:0; margin:auto; inline-size:100%; max-inline-size:360px; }
.auth .login h1{ text-align:start; font-size:1.55rem; margin-block-end:.3rem; }
.auth .login__lead{ text-align:start; margin-block:0 1.85rem; }

/* ---- mobile: stack; brand becomes a compact top band ---- */
@media (max-width:860px){
  .auth{ display:block; overflow-y:auto; -webkit-overflow-scrolling:touch; }
  /* No brand band on mobile — just the logo, centred, at the very top. */
  .auth__brand{ background:none; flex-direction:column; align-items:center; gap:0; padding:1.9rem 1.4rem .25rem; }
  .auth__brand::before, .auth__brand::after{ display:none; }
  .auth__brand-body, .auth__brand-foot, .auth__visit{ display:none; }
  /* The shop panel loses its colour here too: on a phone the brand band is
     just the logo above the form, and a full-bleed colour block would push
     the fields below the fold. */
  .auth__brand--shop{ background:none; color:inherit; }
  .auth__brand--shop .auth__logo-badge{ background:none; }
  .auth__logo-badge{ align-self:center; background:none; box-shadow:none; padding:0; }
  .auth__logo{ height:50px; }
  .auth__form{ padding:1rem 1.4rem; padding-block-end:max(2.75rem, env(safe-area-inset-bottom) + 1rem); }
  .auth .login{ max-inline-size:420px; margin-block:0; margin-inline:auto; }
  .auth .login h1{ text-align:center; }
  .auth .login__lead{ text-align:center; }
}

/* ==========================================================================
   SUPPORT — tickets list + chat thread (merchant and ops share this).
   ========================================================================== */
.support__head{ display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; }
.support__head h1{ margin:0; }
.support--form, .support--thread{ max-inline-size:760px; }

.tk-count{ display:inline-flex; align-items:center; justify-content:center; min-inline-size:1.6rem; height:1.6rem;
  padding:0 .45rem; border-radius:999px; background:var(--warn); color:#fff; font-size:.9rem; font-weight:700;
  vertical-align:middle; margin-inline-start:.4rem; }

/* ---- empty state ---- */
.support__empty{ text-align:center; padding:2.75rem 1.5rem; }
.support__empty-ic{ color:var(--accent); }
.support__empty-ic svg{ inline-size:2.8rem; block-size:2.8rem; }
.support__empty p{ color:var(--muted); margin-block:.8rem 1.25rem; }

/* ---- ticket list ---- */
.tk-list{ list-style:none; padding:0; margin:1rem 0 0; display:flex; flex-direction:column; gap:.6rem; }
.tk-row{ display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.9rem 1.1rem;
  background:var(--card); border:1px solid var(--line-soft); border-radius:var(--radius-sm);
  text-decoration:none; color:inherit; transition:border-color .12s, box-shadow .12s, transform .12s; }
.tk-row:hover{ border-color:#cbd3dd; box-shadow:var(--shadow-sm); transform:translateY(-1px); }
.tk-row__main{ min-inline-size:0; display:flex; flex-direction:column; gap:.25rem; }
.tk-row__subject{ font-weight:700; color:var(--ink); }
.tk-row__shop{ display:inline-block; font-size:.78rem; color:var(--primary); font-weight:700; margin-inline-end:.45rem; }
.tk-row__preview{ font-size:.85rem; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tk-row__meta{ display:flex; flex-direction:column; align-items:flex-end; gap:.4rem; flex:none; }
.tk-row__meta time{ font-size:.75rem; color:var(--muted); }

/* ---- status chips ---- */
.tk-chip{ font-size:.72rem; font-weight:700; padding:.16rem .6rem; border-radius:999px; white-space:nowrap; }
.tk-chip--open{ background:var(--warn-bg); color:var(--warn); }
.tk-chip--answered{ background:var(--accent-050); color:var(--accent-600); }
.tk-chip--waiting{ background:var(--line-soft); color:var(--ink-soft); }
.tk-chip--closed{ background:var(--line-soft); color:var(--muted); }

/* ---- thread header ---- */
.thread__head{ display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; margin-block:.4rem 1rem; }
.thread__head h1{ margin:0; font-size:1.3rem; }
.thread__shop{ margin:.3rem 0 0; font-size:.85rem; }
.thread__shop a{ color:var(--primary); font-weight:600; }
.thread__foot{ margin-block-start:1rem; }

/* ---- chat bubbles ---- */
.chat{ display:flex; flex-direction:column; gap:.85rem; margin-block:1rem; }
.chat__msg{ display:flex; flex-direction:column; gap:.25rem; max-inline-size:82%; }
.chat__msg--me{ align-self:flex-start; align-items:flex-start; }     /* current reader, RTL-start (right) */
.chat__msg--them{ align-self:flex-end; align-items:flex-end; }        /* the other party, left */
.chat__bubble{ padding:.7rem .95rem; line-height:1.85; font-size:.95rem; }
.chat__msg--me .chat__bubble{ background:var(--primary); color:#fff; border-radius:16px 16px 4px 16px; }
.chat__msg--them .chat__bubble{ background:var(--line-soft); color:var(--ink); border-radius:16px 16px 16px 4px; }
.chat__who{ display:block; font-size:.72rem; font-weight:700; color:var(--primary); margin-block-end:.2rem; }
.chat__body{ display:block; white-space:pre-wrap; word-break:break-word; }
.chat__time{ font-size:.7rem; color:var(--muted); }

/* ---- reply box ---- */
.chat__reply{ display:flex; gap:.6rem; align-items:flex-end; margin-block-start:1.25rem; }
.chat__reply textarea{ flex:1 1 auto; min-height:0; min-block-size:2.9rem; resize:vertical; }
.chat__reply .btn{ flex:none; }

/* ---- nav unread badge (sidebar) ---- */
/* dark amber (not --warn #b5730a, which is only 3.87:1 on white): #8a5600 gives
   white-on-amber ~4.6:1 AA — shared by the support and pending-review badges. */
.nav-badge{ margin-inline-start:auto; min-inline-size:1.3rem; height:1.3rem; padding:0 .4rem; border-radius:999px;
  background:#8a5600; color:#fff; font-size:.72rem; font-weight:700; display:inline-flex; align-items:center;
  justify-content:center; line-height:1; }

@media (max-width:600px){
  .chat__msg{ max-inline-size:92%; }
  .chat__reply{ flex-direction:column; align-items:stretch; }
  .chat__reply .btn{ inline-size:100%; }
  .tk-row{ align-items:flex-start; }
}

/* ==========================================================================
   SMS CREDIT — operator master pool + per-shop wallet.
   ========================================================================== */
.sms-master{ display:flex; flex-direction:column; gap:1rem; }
.sms-master__top{ display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; }
.sms-master__label{ display:block; font-size:.85rem; color:var(--muted); }
.sms-master__n{ font-size:1.7rem; font-weight:800; color:var(--primary); }
.sms-master__n small{ font-size:.8rem; font-weight:500; color:var(--muted); }
.sms-master__buy{ display:flex; gap:.5rem; align-items:center; flex-wrap:wrap; margin:0; }
.sms-master__buy input[name="amount"]{ inline-size:7rem; }
.sms-master__billing{ display:flex; align-items:center; justify-content:space-between; gap:1rem;
  flex-wrap:wrap; border-block-start:1px solid var(--line-soft); padding-block-start:.9rem; }
.sms-master__billing b.ok{ color:var(--ok); } .sms-master__billing b.muted{ color:var(--muted); }
.sms-master__low{ display:flex; gap:.5rem; align-items:center; flex-wrap:wrap; }
.sms-master__low-t{ font-size:.85rem; color:var(--muted); }
.sms-low-chip{ font-size:.8rem; padding:.22rem .6rem; border-radius:999px; background:var(--warn-bg);
  color:var(--warn); text-decoration:none; font-weight:600; }

.sms-shop{ display:flex; flex-direction:column; gap:1rem; }
.sms-shop__bal{ display:flex; align-items:baseline; justify-content:space-between; gap:1rem; flex-wrap:wrap; }
.sms-shop__label{ font-size:.9rem; color:var(--ink-soft); font-weight:600; }
.sms-shop__n{ font-size:1.6rem; font-weight:800; color:var(--primary); }
.sms-shop__n.is-low{ color:var(--warn); }
.sms-shop__n small{ font-size:.8rem; font-weight:500; color:var(--muted); }
.sms-shop__ledger td.is-debit{ color:var(--warn); font-weight:700; }
.sms-shop__ledger td.is-credit{ color:var(--ok); font-weight:700; }

/* ---- merchant SMS-credit chip + banner (B4) ---- */
.sms-chip{ display:inline-flex; align-items:center; gap:.35rem; font-size:.82rem; font-weight:600;
  padding:.25rem .6rem; border-radius:999px; background:var(--primary-050); color:var(--primary); text-decoration:none; }
.sms-chip--low{ background:var(--warn-bg); color:var(--warn); }
.sms-chip--empty{ background:#fdecec; color:var(--danger); }
.sms-banner{ margin:.75rem 1rem 0; padding:.7rem 1rem; border-radius:var(--radius-sm); font-size:.9rem;
  background:var(--warn-bg); color:var(--warn); border:1px solid var(--warn); }
.sms-banner--empty{ background:#fdecec; color:var(--danger); border-color:var(--danger); }
.sms-banner a{ color:inherit; font-weight:700; text-decoration:underline; }

/* ---- Identity / KYC (batch 6) --------------------------------------- */
/* Merchant side: the verification card on the shop-info page. */
.kyc .req{ color:var(--danger); font-style:normal; font-size:.72rem; font-weight:600; }
.kyc__intro{ color:var(--ink-soft); line-height:1.9; margin-block:0 1rem; }
.kyc__state{ border-radius:var(--radius-sm,8px); padding:.7rem 1rem; margin-block:0 1rem; line-height:1.85; font-weight:600; }
.kyc__state--ok{   background:var(--ok-bg);     color:#0b6b57; border:1px solid #b7e6da; }
/* explicit dark amber, not --warn (#b5730a) which is only 3.46:1 on --warn-bg */
.kyc__state--wait{ background:var(--warn-bg);   color:#8a5600; border:1px solid #f0dca6; }
.kyc__state--bad{  background:var(--danger-bg); color:#a53030; border:1px solid #f2caca; }

/* Identity status chips — dedicated pairs so each state is distinct AND AA
   (the shared .chip--paid/.chip--draft only gave two colours and ~3:1). */
.chip--id-verified{ background:var(--ok-bg);     color:#0b6b57; }
.chip--id-pending{  background:var(--warn-bg);   color:#8a5600; }
.chip--id-rejected{ background:var(--danger-bg); color:#a53030; }
.chip--id-none{     background:var(--line-soft); color:var(--ink-soft); }
.kyc__summary{ display:flex; flex-wrap:wrap; gap:.4rem 1.6rem; margin:0 0 .8rem; }
.kyc__summary div{ display:flex; gap:.4rem; }
.kyc__summary dt{ color:var(--muted); font-weight:600; }
.kyc__summary dd{ margin:0; font-weight:700; color:var(--ink); }
.kyc__docs{ font-size:.9rem; color:var(--ink-soft); }
.kyc__docs a{ color:var(--primary); font-weight:700; }
.kyc__kind{ display:flex; gap:.6rem; flex-wrap:wrap; margin-block:0 1rem; }
.chooser{ flex:1 1 10rem; display:flex; align-items:center; gap:.5rem; cursor:pointer;
  padding:.7rem .9rem; border:1px solid var(--line); border-radius:var(--radius-sm,8px);
  background:var(--card); color:var(--ink-soft); font-weight:600; margin:0; min-height:44px; }
.chooser input{ inline-size:1.05rem; block-size:1.05rem; accent-color:var(--primary); margin:0; }
.chooser:has(input:checked){ border-color:var(--primary); background:var(--primary-050); color:var(--primary); }
.chooser span{ margin:0; font-weight:inherit; }

/* Operator side: the review panel under each owner on the shop page. */
.kyc-review{ margin:.5rem 0 1.1rem; padding:.85rem 1rem; border:1px solid var(--line);
  border-radius:var(--radius-sm,8px); background:var(--bg); }
.kyc-review__fields{ display:flex; flex-wrap:wrap; gap:.4rem 1.5rem; margin:0 0 .8rem; }
.kyc-review__fields div{ display:flex; gap:.4rem; font-size:.92rem; }
.kyc-review__fields dt{ color:var(--muted); font-weight:600; }
.kyc-review__fields dd{ margin:0; font-weight:700; color:var(--ink); }
.kyc-review__docs{ display:flex; gap:.5rem; flex-wrap:wrap; margin:0 0 .8rem; }
.kyc-review__actions{ display:flex; gap:.6rem; align-items:flex-start; flex-wrap:wrap;
  border-block-start:1px solid var(--line); padding-block-start:.8rem; }
.kyc-review__reject{ display:flex; gap:.4rem; align-items:center; flex-wrap:wrap; flex:1 1 16rem; margin:0; }
.kyc-review__reject input[name="note"]{ flex:1 1 9rem; min-inline-size:8rem; }

/* ---- Form builder (فرم‌ساز) ---- */
.fb-new{ display:flex; gap:.8rem; align-items:flex-end; flex-wrap:wrap; }
.fb-new label{ flex:1 1 16rem; margin:0; }
.fb-list{ display:flex; flex-direction:column; }
.fb-row{ display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap;
  padding:.75rem 0; border-block-end:1px solid var(--line-soft); }
.fb-row:last-child{ border-block-end:0; }
.fb-row__main{ display:flex; flex-direction:column; gap:.3rem; min-inline-size:0; }
.fb-row__title{ font-weight:700; color:var(--primary); }
.fb-row__meta{ display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; font-size:.85rem; color:var(--muted); }
.fb-row__actions{ display:flex; gap:.5rem; flex-wrap:wrap; }
.fb-embed{ margin-block-start:.9rem; }
.fb-embed code{ background:var(--line-soft); padding:.15rem .45rem; border-radius:6px; font-family:monospace; overflow-wrap:anywhere; }
.fb-slug{ display:flex; flex-direction:column; gap:.35rem; margin-block-end:1rem; }
.fb-slug__lbl{ color:var(--ink-soft); font-weight:600; font-size:.875rem; }
.fb-slug__val{ font-family:monospace; color:var(--primary); overflow-wrap:anywhere; }
.fb-slug .hint,.fb-embed .hint{ overflow-wrap:anywhere; }

.fb-fields{ display:flex; flex-direction:column; margin-block-end:1rem; }
.fb-field{ display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap;
  padding:.7rem 0; border-block-end:1px solid var(--line-soft); }
.fb-field:last-child{ border-block-end:0; }
.fb-field__info{ display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; min-inline-size:0; }
.fb-field__label{ font-weight:600; }
.fb-field__req{ color:var(--danger); }
/* dark teal, not --accent-600 (#1a9c85 = only 3.06:1 on accent-050): #0f6f5e ≈ 5.4:1 AA */
.fb-field__type{ font-size:.78rem; color:#0f6f5e; background:var(--accent-050); padding:.1rem .55rem; border-radius:999px; }
.fb-field__opts{ font-size:.82rem; color:var(--muted); }
.fb-field__actions{ display:flex; gap:.4rem; flex-wrap:wrap; }
.fb-addfield{ border-block-start:1px solid var(--line); padding-block-start:1rem; }
.fb-addfield h3{ margin:0 0 .8rem; font-size:1rem; }
.fb-req{ display:flex; align-items:center; gap:.5rem; margin-block:.4rem 0; }
.fb-req input{ inline-size:1.05rem; block-size:1.05rem; accent-color:var(--primary); }
.fb-danger{ border:1px solid var(--danger-bg); }

.fb-subs__head{ display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; margin-block-end:1rem; }
.fb-sub{ margin-block-end:1rem; }
.fb-sub__top{ display:flex; align-items:center; justify-content:space-between; gap:1rem;
  margin-block-end:.6rem; padding-block-end:.5rem; border-block-end:1px solid var(--line-soft);
  color:var(--muted); font-size:.85rem; }
.fb-sub__data{ display:flex; flex-direction:column; gap:.5rem; margin:0; }
.fb-sub__data div{ display:flex; gap:.6rem; flex-wrap:wrap; }
.fb-sub__data dt{ color:var(--muted); font-weight:600; min-inline-size:8rem; }
.fb-sub__data dd{ margin:0; font-weight:600; color:var(--ink); }

/* ===================================================================
   Onboarding + portal (bare pages: signup, create-shop, «سایت‌های من»)
   A branded, spacious, mobile-first shell — signup step 1 is a split
   (value on one side, form on the other) on desktop, stacked on mobile.
   =================================================================== */
.panel--bare{ background:#f6f4ef; min-block-size:100vh; display:flex; flex-direction:column; }
.onb-top{ padding:1.05rem clamp(1rem,4vw,2.5rem); }
.onb-brand{ display:inline-flex; align-items:center; gap:.45rem; font-weight:800; font-size:1.18rem;
  color:var(--primary); text-decoration:none; letter-spacing:-.01em; }
.onb-brand__dot{ inline-size:.6rem; block-size:.6rem; border-radius:50%; background:var(--accent); }
.panel__main--bare{ flex:1 1 auto; display:flex; flex-direction:column; }

.onb{ inline-size:100%; max-inline-size:1080px; margin-inline:auto;
  padding:clamp(.75rem,3vw,1.75rem) clamp(1rem,4vw,2rem) 3rem; }
.onb--single{ max-inline-size:600px; }
.onb--wide{ max-inline-size:820px; }
.onb h1{ margin-block:0 1rem; color:var(--navy); }

/* the generous form card these pages share */
.onb .card{ padding:clamp(1.35rem,3.2vw,2rem); border-radius:16px; border:1px solid var(--line);
  box-shadow:0 12px 40px rgba(18,35,63,.07); }
.onb .btn--wide{ margin-block-start:.4rem; }

/* split auth layout (signup step 1) */
.onb--auth{ display:grid; gap:2rem; align-content:center; }
@media (min-width:900px){
  .onb--auth{ grid-template-columns:1.05fr .95fr; gap:clamp(2.5rem,6vw,5rem);
    align-items:center; min-block-size:calc(100vh - 12rem); }
}
.onb__aside h1{ font-size:clamp(1.55rem,3.4vw,2.15rem); line-height:1.5; margin:0 0 .9rem; }
.onb__lead{ color:var(--ink-soft,#3d4a5f); font-size:1.02rem; line-height:1.95; margin:0 0 1.6rem; max-inline-size:36ch; }
.onb__points{ list-style:none; margin:0; padding:0; display:grid; gap:.7rem; }
.onb__points li{ display:flex; gap:.6rem; align-items:flex-start; color:var(--ink-soft,#3d4a5f); line-height:1.75; }
.onb__points li::before{ content:"✓"; flex:none; inline-size:1.5rem; block-size:1.5rem; display:grid; place-items:center;
  border-radius:50%; background:var(--accent-050); color:#0f6f5e; font-weight:800; font-size:.82rem; margin-block-start:.12rem; }

/* nicer "what do you sell?" pack cards */
.pack-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:.6rem; }
@media (min-width:560px){ .pack-grid{ grid-template-columns:repeat(3,1fr); } }
.pack{ position:relative; display:flex; flex-direction:column; gap:.15rem; justify-content:center; text-align:center;
  min-block-size:4.6rem; padding:.9rem .7rem; border:1.5px solid var(--line); border-radius:13px; background:var(--card);
  cursor:pointer; transition:border-color .15s, background .15s, box-shadow .15s; }
.pack input{ position:absolute; opacity:0; pointer-events:none; }
.pack:hover{ border-color:var(--primary); }
.pack:has(input:checked){ border-color:var(--primary); background:var(--primary-050); box-shadow:0 0 0 3px rgba(23,63,138,.08); }
.pack:has(input:focus-visible){ outline:2px solid var(--primary); outline-offset:2px; }
.pack__name{ display:block; font-weight:700; font-size:.95rem; color:var(--navy); }
.pack__note{ display:block; font-size:.78rem; color:var(--ink-soft,#3d4a5f); line-height:1.5; }

/* ---- FAQ management ---- */
.faq-list{ display:flex; flex-direction:column; gap:1rem; margin-block-start:1rem; }
.faq-item__q{ font-weight:700; margin:0 0 .3rem; }
.faq-item__a{ margin:0; color:var(--ink-soft); line-height:1.85; }
.faq-item__actions{ display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; margin-block-start:.7rem; }
.faq-item__reorder{ display:inline-flex; gap:.3rem; }


/* bulk product actions + row checkbox */
.bulk-bar{ display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; margin-block:.6rem 1rem; padding:.6rem .8rem; background:var(--bg-soft,#f9fafb); border:1px solid var(--line,#e5e7eb); border-radius:10px; }
.bulk-bar select, .bulk-bar input[type=number]{ padding:.35rem .5rem; }
.bulk-bar input[type=number]{ inline-size:5rem; }
.product-row__check{ align-self:center; inline-size:1.1rem; block-size:1.1rem; margin-inline-end:.2rem; }
/* per-page SEO disclosure on the pages editor */
.page-seo{ margin-block:.6rem 1rem; }
.page-seo>summary{ cursor:pointer; font-weight:600; padding:.4rem 0; }

/* discount category restriction */
.discount-cats{ margin-block:.6rem; }
.discount-cats>summary{ cursor:pointer; font-weight:600; padding:.4rem 0; }
.discount-cats__box{ max-block-size:220px; overflow:auto; display:grid; gap:.3rem; padding:.5rem; border:1px solid var(--line,#e5e7eb); border-radius:8px; }

/* theme slider editor */
.section-slider>summary{ cursor:pointer; font-weight:600; padding:.4rem 0; }
.slide-list{ display:grid; gap:.5rem; margin:.5rem 0; padding:0; list-style:none; }
.slide-list__item{ display:flex; align-items:center; gap:.6rem; padding:.4rem; border:1px solid var(--line,#e5e7eb); border-radius:8px; }
.slide-list__thumb{ inline-size:72px; block-size:40px; object-fit:cover; border-radius:6px; }
.slide-add{ display:grid; gap:.5rem; margin-block-start:.6rem; padding-block-start:.6rem; border-block-start:1px dashed var(--line,#e5e7eb); }

/* product custom-fields editor */
.cf-editor{ display:grid; gap:.7rem; }
.cf-row{ display:grid; grid-template-columns:1.5fr .8fr 1.5fr .9fr auto; gap:.5rem; align-items:end; padding:.5rem; border:1px solid var(--line,#e5e7eb); border-radius:8px; }
@media (max-width:720px){ .cf-row{ grid-template-columns:1fr 1fr; } }

/* ---- منوی سایت: the visual menu builder ----------------------------- */
.menu-builder__head{ display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; flex-wrap:wrap; }
.menu-builder__head h1{ margin-block-end:.2rem; }
.menu-builder__acts{ display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; }

/* The list only SHOWS the menu: a title, where it goes, and the moves.
   Changing an item is «ویرایش» (a drawer); adding one is another drawer. */
.mb-list{ list-style:none; margin:1rem 0 0; padding:0; display:grid; gap:.6rem; }
.mb-item{
  background:#fff; border:1px solid var(--line,#e5e7eb); border-radius:12px;
  padding:.6rem .75rem; box-shadow:0 1px 2px rgba(16,24,40,.05);
}
.mb-line{ display:flex; align-items:center; gap:.65rem; min-inline-size:0; }
.mb-item__grip{
  flex:0 0 auto; inline-size:1.9rem; block-size:1.9rem;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:50%; background:var(--bg-soft,#f3f4f6);
  font-size:.8rem; font-weight:700; color:var(--muted,#6b7280);
}
.mb-line__text{ flex:1 1 auto; min-inline-size:0; display:grid; gap:.15rem; }
.mb-line__text strong{ font-size:.95rem; overflow-wrap:anywhere; }
.mb-line__to{ display:flex; align-items:center; gap:.35rem; min-inline-size:0; font-size:.8rem; color:var(--muted,#6b7280); }
.mb-dest-tag{
  flex:0 0 auto; padding:.05rem .45rem; border-radius:999px;
  background:rgba(23,63,138,.08); color:var(--primary,#173f8a); font-size:.72rem; font-weight:700;
}
.mb-dest-name{ min-inline-size:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

.mb-item__ops{ flex:0 0 auto; display:flex; gap:.3rem; align-items:center; }
.mb-op{
  min-inline-size:2.4rem; min-block-size:2.4rem; padding:0 .55rem; cursor:pointer;
  border:1px solid var(--line,#e5e7eb); border-radius:8px; background:#fff;
  font:inherit; font-size:.82rem; color:var(--muted,#6b7280); line-height:1;
}
.mb-op:hover{ border-color:var(--primary,#173f8a); color:var(--primary,#173f8a); }
.mb-op[disabled]{ opacity:.3; cursor:default; }
.mb-op--edit{ color:var(--primary,#173f8a); font-weight:700; padding-inline:.8rem; }

.mb-subs{ list-style:none; margin:.55rem 0 0; padding:0 2.55rem 0 0; display:grid; gap:.4rem; }
.mb-sub{
  display:flex; align-items:center; gap:.55rem;
  padding:.4rem .55rem; border-radius:10px; background:var(--bg-soft,#f7f8fa);
}
.mb-sub__arrow{ flex:0 0 auto; color:var(--muted,#9aa1ab); }
.mb-addsub{
  margin:.45rem 2.55rem 0 0; padding:.3rem .1rem; min-block-size:2.2rem;
  border:0; background:none; cursor:pointer; font:inherit; font-size:.82rem;
  font-weight:600; color:var(--primary,#173f8a);
}
.mb-addsub:hover{ text-decoration:underline; }

.mb-empty{
  margin-block-start:1rem; padding:2rem 1rem; text-align:center;
  border:1px dashed var(--line,#e5e7eb); border-radius:12px; background:#fff;
}
.mb-empty p{ margin:0 0 .8rem; color:var(--muted,#6b7280); }
.mb-foot{ margin-block-start:1rem; }

.mb-drawer{ display:grid; gap:.9rem; align-content:start; }
.mb-field{ display:grid; gap:.25rem; min-inline-size:0; }
.mb-field > span{ font-size:.78rem; font-weight:700; color:var(--muted,#6b7280); }
.mb-field > span small{ font-weight:400; }
.mb-field input, .mb-field select{ inline-size:100%; min-block-size:42px; }
.mb-danger{
  display:grid; gap:.35rem; justify-items:start;
  margin-block-start:.6rem; padding-block-start:.9rem; border-block-start:1px solid var(--line,#e5e7eb);
}
.btn--danger-ghost{ background:transparent; border-color:#f3c4c0; color:#b42318; }
.btn--danger-ghost:hover{ background:#fef3f2; border-color:#b42318; color:#b42318; }

@media (max-width:720px){
  .mb-line, .mb-sub{ flex-wrap:wrap; }
  .mb-line__text{ flex-basis:calc(100% - 2.6rem); }
  .mb-sub .mb-line__text{ flex-basis:calc(100% - 1.6rem); }
  .mb-item__ops{ inline-size:100%; justify-content:flex-end; }
  .mb-op{ min-inline-size:2.75rem; min-block-size:2.75rem; }
  .mb-subs{ padding-inline-end:.9rem; }
  .mb-addsub{ margin-inline-end:.9rem; }
  .menu-builder__acts{ inline-size:100%; }
  .menu-builder__acts .btn--primary{ flex:1 1 auto; }
}

/* ---- «اطلاعات بیشتر (اختیاری)» on the add-brand / add-category forms -- */
/* The add form is a flex row, so the disclosure has to claim its own line
   or it squeezes the name field down to nothing. */
.add-more{
  flex:1 1 100%; inline-size:100%; margin-block-start:.4rem;
  border:1px solid var(--line,#e4e9ee); border-radius:10px; padding:.5rem .75rem;
}
.add-more summary{ cursor:pointer; font-size:.86rem; font-weight:700; color:var(--primary,#173F8A); padding:.2rem 0; }
.add-more[open] summary{ margin-block-end:.6rem; }
.add-more label{ display:block; margin-block-end:.6rem; }
.add-more label > span{ display:block; font-size:.8rem; font-weight:600; color:var(--muted,#667889); margin-block-end:.25rem; }
.add-more label > span small{ font-weight:400; }
.add-more label.check{ display:flex; align-items:center; gap:.5rem; }
.add-more label.check > span{ margin:0; font-weight:500; color:inherit; }

/* ---- RTL placeholders + money alignment ------------------------------ */
/* An EMPTY input with dir="auto" resolves to LTR, which parks a Persian
   placeholder against the left edge of an otherwise right-aligned form. While
   the box is empty force RTL; the moment something is typed
   :placeholder-shown stops matching and dir="auto" takes over again.
   [dir="ltr"] boxes are excluded on purpose — their placeholders are paths,
   codes and URLs that must keep reading left-to-right. */
input:not([dir="ltr"]):placeholder-shown,
textarea:not([dir="ltr"]):placeholder-shown{ direction:rtl; text-align:right; }

/* Money reads right-to-left as a block even though its digits are LTR: keep
   the number against the start edge of the field like every Iranian invoice. */
input[data-money]{ direction:ltr; text-align:right; font-variant-numeric:tabular-nums; letter-spacing:.02em; }
input[data-money]:placeholder-shown{ direction:rtl; text-align:right; }

/* ---- upload progress overlay ---------------------------------------- */
.up-progress{
  position:fixed; inset:0; z-index:9999; display:flex; align-items:center; justify-content:center;
  background:rgba(18,35,63,.55); backdrop-filter:blur(2px);
}
.up-progress__card{
  inline-size:min(88vw,22rem); background:#fff; border-radius:16px; padding:1.4rem 1.5rem;
  box-shadow:0 18px 50px rgba(16,24,40,.25); text-align:center;
}
.up-progress__label{ margin:0 0 .8rem; font-weight:800; }
.up-progress__track{
  block-size:.65rem; background:var(--line,#e4e9ee); border-radius:999px; overflow:hidden;
}
.up-progress__fill{
  display:block; block-size:100%; inline-size:0; border-radius:999px;
  background:var(--primary,#173F8A); transition:inline-size .2s ease;
}
.up-progress__fill.is-indeterminate{
  background:linear-gradient(90deg,var(--line,#e4e9ee) 25%,var(--primary,#173F8A) 50%,var(--line,#e4e9ee) 75%);
  background-size:200% 100%; animation:up-slide 1.1s linear infinite;
}
@keyframes up-slide{ from{background-position:200% 0} to{background-position:-200% 0} }
.up-progress__pct{ margin:.7rem 0 .2rem; font-weight:800; font-variant-numeric:tabular-nums; }
.up-progress__note{ margin:0; font-size:.82rem; color:var(--muted,#667889); }
@media (prefers-reduced-motion: reduce){ .up-progress__fill.is-indeterminate{ animation:none; } }

/* ---- toast (a save that announces itself) ---------------------------- */
.toast{
  position:fixed; inset-block-start:1rem; inset-inline:1rem auto; z-index:10000;
  display:flex; align-items:center; gap:.7rem; max-inline-size:min(92vw,28rem);
  padding:.85rem 1rem; border-radius:14px; background:#fff;
  box-shadow:0 14px 40px rgba(16,24,40,.22); border-inline-start:5px solid var(--ok,#16a34a);
  transform:translateY(-1rem); opacity:0; transition:transform .25s ease, opacity .25s ease;
}
.toast.is-in{ transform:none; opacity:1; }
.toast--bad{ border-inline-start-color:#b42318; }
.toast__icon{
  flex:none; inline-size:1.7rem; block-size:1.7rem; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--ok,#16a34a); color:#fff; font-weight:800; font-size:.95rem;
}
.toast--bad .toast__icon{ background:#b42318; }
.toast__text{ flex:1 1 auto; font-weight:700; font-size:.92rem; line-height:1.7; }
.toast__link{ display:inline-block; margin-inline-start:.5rem; font-weight:600; color:var(--primary,#173F8A); }
.toast__x{ flex:none; display:grid; place-items:center; min-inline-size:2.25rem; min-block-size:2.25rem; margin-inline-end:-.4rem; border:0; border-radius:8px; background:none; font-size:1.3rem; line-height:1; cursor:pointer; color:var(--muted,#667889); }
@media (max-width:720px){ .toast{ inset-inline:.6rem .6rem; max-inline-size:none; } }
@media (prefers-reduced-motion: reduce){ .toast{ transition:none; } }

/* ---- ask dialog (replaces confirm()) -------------------------------- */
.ask{
  position:fixed; inset:0; z-index:10001; display:none;
  align-items:center; justify-content:center; padding:1rem;
  background:rgba(18,35,63,.5); backdrop-filter:blur(2px);
}
.ask.is-open{ display:flex; }
.ask__card{
  inline-size:min(92vw,25rem); background:#fff; border-radius:16px; padding:1.5rem;
  box-shadow:0 22px 60px rgba(16,24,40,.3); text-align:center;
}
.ask__title{ margin:0 0 1.2rem; font-weight:700; font-size:1rem; line-height:1.9; }
.ask__row{ display:flex; gap:.6rem; }
.ask__row .btn{ flex:1 1 0; }
.btn--danger{ background:#b42318; border-color:#b42318; color:#fff; }
.btn--danger:hover{ background:#912018; border-color:#912018; }

/* ---- product image manager ------------------------------------------ */
.img-manage{ list-style:none; margin:.6rem 0 0; padding:0;
  display:grid; grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); gap:.7rem; }
.img-manage__item{
  position:relative; border:2px solid var(--line,#e4e9ee); border-radius:12px;
  overflow:hidden; background:#fff; aspect-ratio:1/1;
}
.img-manage__item img{ position:absolute; inset:0; inline-size:100%; block-size:100%; object-fit:cover; }
.img-manage__main-badge{
  position:absolute; inset-block-start:0; inset-inline:0; text-align:center;
  background:var(--primary,#173F8A); color:#fff; font-size:.7rem; font-weight:800;
  line-height:1.5rem; block-size:1.5rem; opacity:0;
}
.img-manage__item.is-main{ border-color:var(--primary,#173F8A); }
.img-manage__item.is-main .img-manage__main-badge{ opacity:1; }
.img-manage__ops{
  position:absolute; inset-block-end:0; inset-inline:0; display:flex;
  background:rgba(17,24,39,.72); backdrop-filter:blur(1px);
}
.img-manage__btn{
  flex:1 1 0; border:0; background:none; color:#fff; cursor:pointer;
  font:inherit; font-size:.72rem; font-weight:700; padding:.4rem .1rem; min-block-size:2rem;
}
.img-manage__btn:hover{ background:rgba(255,255,255,.18); }
.img-manage__btn--danger:hover{ background:#b42318; }
@media (max-width:720px){
  .img-manage{ grid-template-columns:repeat(auto-fill,minmax(100px,1fr)); }
  .img-manage__btn{ min-block-size:2.4rem; }
}

/* ---- Jalali date picker --------------------------------------------- */
.jdp{
  position:absolute; z-index:60; inline-size:17rem; margin-block-start:.3rem;
  background:#fff; border:1px solid var(--line,#e4e9ee); border-radius:14px;
  box-shadow:0 16px 40px rgba(16,24,40,.18); padding:.6rem; user-select:none;
}
.jdp__head{ display:flex; align-items:center; justify-content:space-between; gap:.4rem; margin-block-end:.5rem; }
.jdp__title{ font-weight:800; font-size:.92rem; }
.jdp__nav{
  inline-size:2rem; block-size:2rem; border:1px solid var(--line,#e4e9ee); border-radius:8px;
  background:#fff; cursor:pointer; font-size:1.1rem; line-height:1; color:var(--muted,#667889);
}
.jdp__nav:hover{ border-color:var(--primary,#173F8A); color:var(--primary,#173F8A); }
.jdp__grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:.15rem; }
.jdp__dow{ text-align:center; font-size:.72rem; font-weight:700; color:var(--muted,#667889); padding-block:.25rem; }
.jdp__day{
  border:0; background:none; border-radius:8px; cursor:pointer;
  font:inherit; font-size:.85rem; min-block-size:2.1rem; padding:0;
}
.jdp__day:hover{ background:var(--line-soft,#eef2f6); }
.jdp__day.is-today{ box-shadow:inset 0 0 0 1px var(--primary,#173F8A); }
.jdp__day.is-picked{ background:var(--primary,#173F8A); color:#fff; font-weight:800; }
.jdp__foot{ display:flex; gap:.5rem; justify-content:space-between; margin-block-start:.5rem;
  border-block-start:1px solid var(--line,#e4e9ee); padding-block-start:.5rem; }
.jdp__link{ border:0; background:none; cursor:pointer; font:inherit; font-size:.8rem;
  font-weight:700; color:var(--primary,#173F8A); padding:.2rem .3rem; }
/* The field's own label is the positioning context for the popup. */
label:has(> input[data-jalali]){ position:relative; }

/* ---- product list row actions ---------------------------------------- */
.product-row__actions{ display:flex; align-items:center; gap:.35rem; flex-wrap:wrap; }
.row-act{ display:inline-flex; align-items:center; gap:.3rem; min-block-size:2.2rem; }
.row-act svg{ inline-size:1rem; block-size:1rem; flex:none; }
.row-act--danger{ color:#b42318; }
.row-act--danger:hover{ border-color:#b42318; background:#fef3f2; }
@media (max-width:720px){
  .product-row__actions{ inline-size:100%; justify-content:flex-end; }
  .row-act{ min-block-size:2.5rem; }
}

/* =====================================================================
   PRODUCT FORM
   A simple seller sees a simple form; a professional one still finds
   everything. Almost all of that is decided by what is visible, so most of
   what follows is about weight and hierarchy rather than decoration.
   ===================================================================== */

/* ---- help text: readable, not decorative ---------------------------- */
/* Four states that must be told apart at a glance on a cheap laptop:
   label (strong ink), help (quieter but legible), placeholder (faint),
   disabled (obviously inert). The old help text was 11px at 40% contrast. */
.pform .hint,
.pform small.hint{ color:#5b6676; font-size:.82rem; line-height:1.85; }
.pform label > span{ font-weight:700; color:var(--ink,#12233f); font-size:.9rem; }
.pform label > span small{ font-weight:400; color:#6b7684; }
.pform input::placeholder, .pform textarea::placeholder{ color:#9aa3b0; }
.pform input:disabled, .pform select:disabled, .pform textarea:disabled{
  background:#f1f3f6; color:#9aa3b0; cursor:not-allowed;
}
.req{
  display:inline-block; font-size:.68rem; font-weight:800; vertical-align:.15em;
  padding:.1rem .4rem; border-radius:999px; margin-inline-start:.35rem;
  background:#fdecea; color:#b42318;
}
.tip{
  display:inline-flex; align-items:center; justify-content:center; cursor:help;
  inline-size:1.1rem; block-size:1.1rem; border-radius:50%;
  background:var(--line,#e4e9ee); color:#5b6676; font-size:.7rem; font-weight:800;
}
.field-err{ display:block; margin-block-start:.3rem; color:#b42318; font-size:.82rem; font-weight:600; }
[aria-invalid=true]{ border-color:#b42318 !important; }

/* ---- the sticky action bar ------------------------------------------ */
.pform__bar{
  position:sticky; inset-block-start:0; z-index:40;
  display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap;
  padding:.7rem 1rem; margin-block-end:1rem;
  background:#fff; border:1px solid var(--line,#e4e9ee); border-radius:14px;
  box-shadow:0 6px 18px rgba(16,24,40,.07);
}
.pform__bar-title{ min-inline-size:0; }
.pform__bar-title h1{ margin:0; font-size:1.05rem; line-height:1.7; }
.pform__bar-title a{ font-size:.82rem; font-weight:600; color:var(--primary,#173F8A); }
.pform__bar-actions{ display:flex; align-items:center; gap:.5rem; flex:0 0 auto; }
.pform__status select{ min-block-size:42px; min-inline-size:9rem; }

/* ---- cards ----------------------------------------------------------- */
.pcard{ margin-block-end:1rem; }
.pcard__title{ margin:0 0 .9rem; font-size:1rem; }
.pcard__lead{ margin:0 0 .6rem; color:#5b6676; font-size:.85rem; }
.pcard__sub{ margin:1.4rem 0 .5rem; font-size:.92rem; color:var(--ink,#12233f); }
.pcard--fold > summary{
  cursor:pointer; list-style:none; display:flex; align-items:center;
  gap:.6rem; flex-wrap:wrap; padding:.2rem 0;
}
.pcard--fold > summary::-webkit-details-marker{ display:none; }
.pcard--fold > summary::before{
  content:"+"; flex:none; inline-size:1.5rem; block-size:1.5rem; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--bg-soft,#f3f4f6); color:#5b6676; font-weight:800;
}
.pcard--fold[open] > summary::before{ content:"−"; }
.pcard--fold > summary .pcard__title{ margin:0; }
/* A closed card that says only its own name tells the seller nothing. */
.pcard__sum{
  margin-inline-start:auto; font-size:.8rem; font-weight:600; color:#6b7684;
  background:var(--bg-soft,#f3f4f6); padding:.2rem .6rem; border-radius:999px;
}
.pcard__sum.is-warn{ background:#fdecea; color:#b42318; }
.pcard--fold[open] > summary .pcard__sum{ opacity:.55; }
.subfold{ margin-block-start:1rem; border-block-start:1px solid var(--line,#e4e9ee); padding-block-start:.8rem; }
.subfold > summary{ cursor:pointer; font-weight:700; font-size:.86rem; color:var(--primary,#173F8A); }

/* ---- «what are you selling?» ----------------------------------------- */
.ptype{ border:0; padding:0; margin:0 0 1.1rem; }
.ptype > legend{ font-weight:700; font-size:.9rem; padding:0; margin-block-end:.5rem; }
.ptype__row{ display:grid; grid-template-columns:repeat(3,1fr); gap:.6rem; }
.ptype__card{
  position:relative; display:flex; flex-direction:column; align-items:center; gap:.2rem;
  padding:.9rem .5rem; cursor:pointer; text-align:center;
  border:2px solid var(--line,#e4e9ee); border-radius:12px; background:#fff;
  transition:border-color .15s ease, background .15s ease;
}
.ptype__card input{ position:absolute; opacity:0; inline-size:1px; block-size:1px; min-block-size:0; }
.ptype__icon{ font-size:1.5rem; line-height:1; }
.ptype__name{ font-weight:700; font-size:.9rem; }
.ptype__card small{ color:#6b7684; font-size:.76rem; }
.ptype__card:hover{ border-color:#c3ccd8; }
.ptype__card.is-picked{ border-color:var(--primary,#173F8A); background:#f5f8ff; }

/* ---- radio pills (stock mode, price mode) ---------------------------- */
.pick-row{ display:flex; gap:.5rem; flex-wrap:wrap; margin-block:.3rem .9rem; }
.pick{
  position:relative; display:inline-flex; align-items:center; gap:.4rem;
  padding:.5rem 1rem; min-block-size:42px; cursor:pointer;
  border:2px solid var(--line,#e4e9ee); border-radius:999px; background:#fff; font-weight:600;
}
.pick input{ position:absolute; opacity:0; inline-size:1px; block-size:1px; min-block-size:0; }
.pick.is-picked{ border-color:var(--primary,#173F8A); background:#f5f8ff; color:var(--primary,#173F8A); }
.pform__stock{ border:0; padding:0; margin:0; }
.pform__stock > legend{ font-weight:700; font-size:.9rem; padding:0; }

/* ---- reveal buttons («+ افزودن تخفیف») ------------------------------- */
.reveal{
  border:1px dashed var(--line,#c9d2dd); background:none; cursor:pointer;
  font:inherit; font-weight:700; font-size:.88rem; color:var(--primary,#173F8A);
  padding:.55rem 1rem; border-radius:10px; min-block-size:42px; margin-block:.6rem;
}
.reveal:hover{ border-color:var(--primary,#173F8A); background:#f5f8ff; }
.reveal.is-open{ border-style:solid; }
.reveal__body{ border-inline-start:3px solid var(--line,#e4e9ee); padding-inline-start:.9rem; margin-block-end:.8rem; }
.pform__price input{ font-size:1.05rem; font-weight:700; }
.pform__auto{ margin-block-start:.6rem; }

/* ---- a positive switch ------------------------------------------------ */
.switch-row{ display:flex; align-items:flex-start; gap:.6rem; margin-block:.8rem; }
.switch-row > span{ font-weight:700; font-size:.9rem; }
.switch-row > span small{ display:block; font-weight:400; color:#5b6676; font-size:.8rem; }

/* ---- Persian file control -------------------------------------------- */
.drop{ display:block; margin-block:.8rem; cursor:pointer; }
.drop input[type=file]{
  position:absolute; opacity:0; inline-size:1px; block-size:1px; min-block-size:0; padding:0; border:0;
}
.drop__box{
  display:flex; flex-direction:column; align-items:center; gap:.25rem; text-align:center;
  padding:1.3rem 1rem; border:2px dashed var(--line,#c9d2dd); border-radius:14px;
  background:var(--bg-soft,#f9fafb); transition:border-color .15s ease, background .15s ease;
}
.drop:hover .drop__box, .drop.is-over .drop__box{ border-color:var(--primary,#173F8A); background:#f5f8ff; }
.drop--sm .drop__box{ padding:.9rem 1rem; }
.drop__icon{ font-size:1.5rem; line-height:1; }
.drop__main{ font-weight:800; font-size:.92rem; }
.drop__sub{ color:#5b6676; font-size:.8rem; }
.drop__picked{ font-size:.82rem; font-weight:700; color:var(--primary,#173F8A); }
.drop.has-file .drop__box{ border-style:solid; border-color:var(--primary,#173F8A); }

/* ---- gallery: one main slot, then the rest --------------------------- */
.gal__list{
  list-style:none; margin:.6rem 0 .4rem; padding:0;
  display:grid; grid-template-columns:repeat(auto-fill,minmax(110px,1fr)); gap:.7rem;
}
/* The main photo is a slot of its own, twice the size, so «which one shows
   in the shop» is answered by looking rather than by reading a rule. */
.gal__item:first-child{ grid-column:span 2; grid-row:span 2; }
.gal__item{
  position:relative; aspect-ratio:1/1; border-radius:12px; overflow:hidden;
  border:2px solid var(--line,#e4e9ee); background:#fff; cursor:grab;
}
.gal__item img{ position:absolute; inset:0; inline-size:100%; block-size:100%; object-fit:cover; }
.gal__item.is-dragging{ opacity:.45; }
.gal__item.is-main{ border-color:var(--primary,#173F8A); }
.gal__badge{
  position:absolute; inset-block-start:0; inset-inline:0; text-align:center; opacity:0;
  background:var(--primary,#173F8A); color:#fff; font-size:.72rem; font-weight:800; line-height:1.6rem;
}
.gal__item.is-main .gal__badge{ opacity:1; }
.gal__note{
  position:absolute; inset-block-end:0; inset-inline:0; text-align:center;
  background:rgba(17,24,39,.72); color:#fff; font-size:.7rem; padding:.15rem;
}
.gal__note--warn{ background:#b42318; }
.gal__menu{ position:absolute; inset-block-start:.3rem; inset-inline-end:.3rem; }

/* ---- the «⋯» menu, shared by the bar and each photo ------------------ */
.rowmenu{ position:relative; }
.rowmenu > summary{
  list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:center;
  inline-size:2.2rem; block-size:2.2rem; border-radius:8px;
  background:rgba(255,255,255,.92); border:1px solid var(--line,#e4e9ee);
  font-weight:800; color:#5b6676; line-height:1;
}
.rowmenu > summary::-webkit-details-marker{ display:none; }
.rowmenu[open] > summary{ border-color:var(--primary,#173F8A); color:var(--primary,#173F8A); }
.rowmenu__pop{
  position:absolute; inset-block-start:calc(100% + .3rem); inset-inline-end:0; z-index:50;
  min-inline-size:13rem; padding:.3rem; background:#fff;
  border:1px solid var(--line,#e4e9ee); border-radius:12px;
  box-shadow:0 14px 34px rgba(16,24,40,.18);
}
.rowmenu__item{
  display:block; inline-size:100%; text-align:start; border:0; background:none; cursor:pointer;
  font:inherit; font-size:.86rem; font-weight:600; padding:.55rem .7rem; border-radius:8px; color:var(--ink,#12233f);
}
.rowmenu__item:hover{ background:var(--bg-soft,#f3f4f6); }
.rowmenu__item--danger{ color:#b42318; }
.rowmenu__item--danger:hover{ background:#fdecea; }
.rowmenu__item[disabled]{ opacity:.45; cursor:not-allowed; }

/* ---- product options ------------------------------------------------- */
.opt-list{ display:grid; gap:.6rem; margin-block:.6rem; }
.opt-row{
  position:relative; display:grid; gap:.5rem;
  grid-template-columns:1.4fr .8fr 1.4fr .9fr auto;
  align-items:end; padding:.7rem .8rem 0 .8rem;
  border:1px solid var(--line,#e4e9ee); border-radius:12px; background:var(--bg-soft,#f9fafb);
}
.opt-row__x{
  border:0; background:none; cursor:pointer; color:#b42318;
  font-size:1.3rem; line-height:1; padding:.3rem .5rem; margin-block-end:.6rem;
}
@media (max-width:860px){ .opt-row{ grid-template-columns:1fr 1fr; } }

/* ---- group prices ----------------------------------------------------- */
.grp-prices{ display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:.75rem; }

/* ---- category --------------------------------------------------------- */
.cat-suggest{ display:flex; align-items:center; gap:.4rem; flex-wrap:wrap; margin-block-end:.5rem; }
.cat-suggest__label{ font-size:.82rem; font-weight:700; color:#5b6676; }
.cat-suggest__pick{
  border:1px dashed var(--primary,#173F8A); background:#f5f8ff; color:var(--primary,#173F8A);
  cursor:pointer; font:inherit; font-size:.82rem; font-weight:700;
  padding:.3rem .8rem; border-radius:999px; min-block-size:34px;
}
.cat-suggest__pick:hover{ border-style:solid; }
.cat-primary{ margin-block-start:.7rem; }

/* ---- the Google preview ----------------------------------------------- */
.serp{
  display:block; padding:.9rem 1rem; margin-block-end:1rem;
  border:1px solid var(--line,#e4e9ee); border-radius:12px; background:#fff;
}
.serp__url{ display:block; color:#5b6676; font-size:.78rem; }
.serp__title{ display:block; color:#1a0dab; font-size:1.05rem; font-weight:600; line-height:1.8; }
.serp__desc{ display:block; color:#4d5156; font-size:.85rem; line-height:1.9; }

/* ---- mobile ----------------------------------------------------------- */
.pform__mobile-save{ display:none; }
@media (max-width:720px){
  .ptype__row{ grid-template-columns:1fr; }
  .pform__bar{ flex-direction:column; align-items:stretch; gap:.6rem; }
  .pform__bar-actions{ inline-size:100%; }
  .pform__status{ flex:1 1 auto; }
  .pform__status select{ inline-size:100%; }
  .gal__item:first-child{ grid-column:span 2; grid-row:span 2; }
  .gal__list{ grid-template-columns:repeat(auto-fill,minmax(92px,1fr)); }
  /* The bar scrolls away on a phone, so the button comes back at the bottom. */
  .pform__mobile-save{
    display:block; position:sticky; inset-block-end:0; z-index:35;
    padding:.6rem 0 .3rem; background:linear-gradient(to top, var(--bg,#f7f5f0) 70%, transparent);
  }
  /* A table of group prices is unreadable on a phone; stack it. */
  .grp-prices{ grid-template-columns:1fr; }
}

/* =====================================================================
   ALIGNMENT PASS
   Controls that sit on one line must share one height and one baseline.
   A 44px input beside a 38px button reads as a broken page even when
   nobody can say why.
   ===================================================================== */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.4rem;
  min-block-size:44px; line-height:1.2; vertical-align:middle;
}
.btn--small{ min-block-size:36px; padding-block:0; }
form.inline{ align-items:center; }
form.inline select, form.inline input, form.inline .btn{ min-block-size:44px; margin:0; }
/* A select + button pair («افزودن محصول مرتبط») is the commonest row in
   this panel and was the most visibly uneven. */
.card form.inline{ gap:.5rem; }
.card form.inline > label{ flex:1 1 14rem; margin:0; }

/* ---- product form: bar, options row, video, mobile ------------------- */
.pform__bar-actions .btn,
.pform__bar-actions select,
.pform__bar-actions .rowmenu > summary{ min-block-size:44px; block-size:44px; }
.pform__bar-actions .rowmenu > summary{ inline-size:44px; border-radius:10px; }
.pform__status select{ border-radius:10px; }

.opt-row{ padding:.7rem .8rem; align-items:center; }
.opt-row > label{ margin:0; }
.opt-row__end{ display:flex; align-items:center; justify-content:center; }
.opt-row__x{
  inline-size:2.2rem; block-size:2.2rem; border-radius:50%; margin:0; padding:0;
  display:flex; align-items:center; justify-content:center; background:#fdecea;
}
.opt-row__x:hover{ background:#f8d4cf; }

.vid-now{
  display:flex; align-items:center; gap:.7rem; flex-wrap:wrap;
  padding:.7rem .9rem; margin-block:.7rem;
  border:1px solid var(--line,#e4e9ee); border-radius:12px; background:var(--bg-soft,#f9fafb);
}
.vid-now__icon{ font-size:1.3rem; line-height:1; }
.vid-now__text b{ display:block; font-size:.9rem; }
.vid-now__text small{ color:#5b6676; font-size:.8rem; }
.vid-now__rm{ margin-inline-start:auto; margin-block:0; }

.ent-pick{ display:grid; gap:.5rem; }

@media (max-width:720px){
  /* Sticky at the top of a phone screen, the bar sat on the card under it
     and the page scrolled behind both. It scrolls away instead; the save
     button lives at the bottom on a phone. */
  .pform__bar{ position:static; box-shadow:none; }
  /* The panel has its own bottom navigation — the save bar has to sit ABOVE
     it, not on top of it. */
  /* The bottom nav is fixed with its own safe-area padding, so the save bar
     is offset by the same amount plus its height rather than a guess. */
  .pform__mobile-save{
    inset-block-end:calc(3.6rem + env(safe-area-inset-bottom));
    padding-inline:.2rem; z-index:19;
  }
  .pform__mobile-save .btn{ box-shadow:0 6px 20px rgba(16,24,40,.22); }
  .opt-row{ grid-template-columns:1fr 1fr; }
  .opt-row__end{ grid-column:1 / -1; justify-content:flex-start; }
  .vid-now__rm{ margin-inline-start:0; inline-size:100%; }
}

/* ---- [hidden] must actually hide ------------------------------------- */
/* `label { display: block }` further up beats the UA stylesheet's
   `[hidden] { display: none }`, because an author rule of equal specificity
   wins. Every hidden <label> in the panel was therefore visible — which is
   why «نام برند تازه» sat under a brand that was already chosen, and why an
   option's «گزینه‌ها» box showed for a text option. Same bug class as the
   header badge that rendered as an orange dot. */
[hidden]{ display: none !important; }

/* ---- the top bar: one row, one height -------------------------------- */
.pform__bar-actions{ align-items:center; }
/* `label` carries a bottom margin globally; inside a toolbar that pushes the
   control up by three pixels against the button beside it. */
.pform__bar-actions label,
.pform__bar-actions .pform__status{ margin:0; display:flex; align-items:center; }
.pform__bar-actions select,
.pform__bar-actions .btn,
.pform__bar-actions .rowmenu > summary{
  block-size:44px; min-block-size:44px; box-sizing:border-box; margin:0;
}
.pform__bar-actions select{ padding-block:0; }

/* ---- one-step variant axis ------------------------------------------ */
.vaxis__form{ display:grid; grid-template-columns:1fr 1.6fr auto; gap:.7rem; align-items:end; }
.vaxis__form label{ margin:0; }
.vaxis__form .btn{ min-block-size:44px; }
@media (max-width:720px){ .vaxis__form{ grid-template-columns:1fr; } }

/* ---- technical specs editor ------------------------------------------ */
.specs-field{ margin-block-end:1.25rem; }
.specs-field__label{ display:block; font-weight:700; color:var(--ink,#12233f); font-size:.9rem; }
.spec-list{ display:grid; gap:.5rem; margin-block:.6rem; }
.spec-row{
  display:grid; grid-template-columns:1fr 1.6fr auto; gap:.5rem; align-items:end;
  padding:.6rem .7rem 0; border:1px solid var(--line,#e4e9ee);
  border-radius:12px; background:var(--bg-soft,#f9fafb);
}
.spec-row label{ margin:0 0 .6rem; }
.spec-row .opt-row__x{ margin-block-end:.6rem; }
@media (max-width:720px){ .spec-row{ grid-template-columns:1fr 1fr; } }

/* ---- readability: help text is for a 50-year-old shopkeeper too ------ */
.pform .hint, .pform small.hint{ color:#4a5666; font-size:.875rem; line-height:1.9; }
.pform label > span{ font-size:.92rem; }

/* ---- tighter cards: white space with no job is just scrolling -------- */
.pform .card{ padding:1rem 1.1rem; }
.pform label{ margin-block-end:.85rem; }
.pform .row-2{ gap:.7rem; }
.cat-pick__box{ max-height:210px; }

/* ---- feature chips --------------------------------------------------- */
.tagbox{ margin-block-end:1.1rem; }
.tagbox__list{ display:flex; flex-wrap:wrap; gap:.4rem; margin-block:.5rem; }
.tagbox__list:empty{ display:none; }
.tag{
  display:inline-flex; align-items:center; gap:.3rem; max-inline-size:100%;
  padding:.3rem .35rem .3rem .8rem; border-radius:999px;
  background:var(--brand-soft,#eaf1fb); border:1px solid var(--line,#d7e1ee);
  font-size:.86rem; font-weight:600;
}
.tag__text{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tag__x{
  border:0; background:none; cursor:pointer; font-size:1.1rem; line-height:1;
  padding:.1rem .3rem; border-radius:999px; color:inherit;
}
.tag__x:hover{ background:rgba(0,0,0,.12); }
.tagbox__input{ inline-size:100%; }

/* ---- product health -------------------------------------------------- */
.pform__health{
  display:flex; align-items:center; gap:.4rem; flex-wrap:wrap;
  margin-block-start:.35rem; font-size:.82rem; font-weight:700;
}
.pform__health.is-ok{ color:#0f7b3f; }
.pform__health.is-warn{ color:#b42318; }
.pform__health-jump{
  border:1px solid currentColor; background:none; cursor:pointer; color:inherit;
  font:inherit; font-size:.78rem; font-weight:700; padding:.12rem .55rem; border-radius:999px;
}
.pform__health-jump:hover{ background:rgba(180,35,24,.08); }

/* ---- save: inert until there is something to save -------------------- */
.pform__bar-actions .btn.is-clean,
.pform__mobile-save .btn.is-clean{ opacity:.5; cursor:default; }

/* ---- sticky header, for real ---------------------------------------- */
/* A sticky child only sticks inside a scrolling ancestor that does not clip
   it, so the wrapper must not create one. */
.pform{ overflow:visible; }
.pform__bar{ position:sticky; inset-block-start:0; z-index:40; }

@media (max-width:720px){
  /* On a phone the top bar scrolls away and the bottom bar carries BOTH the
     status and the save, because reaching the top of a long form to change
     one and the bottom to press the other is the worst of both. */
  .pform__bar{ position:static; }
  .pform__bar-actions .pform__status{ display:none; }
  .pform__mobile-save{ display:flex; gap:.5rem; align-items:center; }
  .pform__mobile-save .pform__status-m{ flex:0 0 9rem; }
  .pform__mobile-save .pform__status-m select{ inline-size:100%; min-block-size:46px; }
  .pform__mobile-save .btn{ flex:1 1 auto; }
}

/* =====================================================================
   PRODUCT LIST  (/admin/products)

   Three jobs, in the order a shop owner does them: find one product,
   change its price or stock, act on a handful at once. The layout says
   which is which — tabs for state, a toolbar for filters, a table with a
   header for the products themselves, and a bar for bulk work that is not
   on the screen until there is something to bulk.
   ===================================================================== */

.products__head{ display:flex; align-items:flex-start; gap:1rem; flex-wrap:wrap; }
.products__title{ margin-inline-end:auto; }
.products__sub{ margin:.15rem 0 0; font-size:.83rem; color:var(--muted); }
.products__acts{ display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; }
/* The old rule pushed the FIRST button to the far edge; the buttons now
   live in their own group, so that auto margin has to go. */
.products__acts .btn{ margin-inline-start:0; }
/* The menu and the button sit on one line, so they are one height. */
.products__acts .btn,
.products__acts .rowmenu > summary{ min-block-size:2.6rem; }

/* The «⋯» menu, widened into a labelled one for the page header. */
.rowmenu--wide > summary{
  inline-size:auto; block-size:auto; min-block-size:2.4rem; gap:.3rem;
  padding-inline:.9rem; font-size:.86rem; font-weight:700; color:var(--ink-soft,#3d4a5f);
}
.rowmenu--wide > summary::after{ content:'▾'; font-size:.72em; }

/* ---- axis 1: publish state ------------------------------------------ */
.plist-tabs{ gap:.3rem; margin-block-end:.55rem; }
.plist-tabs a{ display:inline-flex; align-items:center; white-space:nowrap; }
.plist-tabs .tab-badge{ background:var(--line-soft,#f0ede6); color:var(--ink-soft,#3d4a5f); font-weight:700; }
.plist-tabs a.is-active .tab-badge{ background:rgba(255,255,255,.22); color:#fff; }

/* ---- axis 2: which products ----------------------------------------- */
.plist-bar{ display:flex; gap:.5rem; flex-wrap:wrap; align-items:center; margin-block-end:.55rem; }
.plist-find{ position:relative; flex:1 1 18rem; min-inline-size:11rem; }
.plist-find input{ inline-size:100%; padding-inline-end:2.5rem; }
/* 2.2rem, not 1.9rem: at 1.9 this measured 30.4px, under the 32px floor
   and a long way under the 44px the panel promises for a touch target. It
   sits inside a 44px field, so it can grow without moving anything. */
.plist-find__go{
  position:absolute; inset-block-start:50%; inset-inline-end:.4rem; transform:translateY(-50%);
  display:flex; align-items:center; justify-content:center;
  inline-size:2.2rem; block-size:2.2rem; padding:0;
  border:0; background:none; cursor:pointer; color:var(--muted); border-radius:8px;
}
.plist-find__go:hover{ color:var(--primary); background:var(--line-soft,#f0ede6); }
.plist-find__go svg{ inline-size:1.1rem; block-size:1.1rem; }
.plist-bar select{ min-block-size:40px; font-size:.85rem; inline-size:auto; }
.plist-bar select.is-error{ border-color:var(--danger); }

.plist-meta{
  display:flex; align-items:center; gap:.4rem; flex-wrap:wrap;
  margin-block-end:.5rem; font-size:.82rem; color:var(--muted);
}
.plist-meta__n{ font-weight:700; color:var(--ink-soft,#3d4a5f); }
.plist-meta__clear{ color:var(--danger); text-decoration:none; font-weight:600; }
.plist-meta__clear:hover{ text-decoration:underline; }
.chip--filter{
  display:inline-flex; align-items:center; gap:.3rem; text-decoration:none;
  background:var(--primary-050,#e9effa); color:var(--primary);
}
.chip--filter:hover{ background:#dbe5f7; }
.chip--star{ background:var(--warn-bg,#fbf1df); color:var(--warn,#b5730a); }

/* ---- the table ------------------------------------------------------- */
.plist{
  margin-block:0 1rem; background:var(--card,#fff);
  border:1px solid var(--line-soft,#f0ede6); border-radius:14px;
  box-shadow:var(--shadow-sm,0 1px 2px rgba(16,24,40,.06));
}
.plist__head,
.plist__row{
  display:grid; align-items:center; gap:.4rem .7rem;
  grid-template-columns:1.6rem 56px minmax(0,1fr) 6.6rem 9.6rem 8.6rem 7rem auto;
  grid-template-areas:'check img main status price stock date act';
  padding:.55rem .85rem;
}
.plist__head{
  background:var(--line-soft,#f0ede6); color:var(--ink-soft,#3d4a5f);
  font-size:.77rem; font-weight:700;
  border-radius:13px 13px 0 0;
}
.plist__sort{ color:inherit; text-decoration:none; }
.plist__sort:hover{ color:var(--primary); }
.plist__rows{ list-style:none; margin:0; padding:0; }
.plist__row{ border-block-start:1px solid var(--line-soft,#f0ede6); }
.plist__row:hover{ background:#fbfaf7; }
.plist__row.is-picked{ background:var(--primary-050,#e9effa); }
.plist__row.is-deleted{ opacity:.62; }

.pl-check{ grid-area:check; }
.pl-check input{ inline-size:1.15rem; block-size:1.15rem; cursor:pointer; }
.pl-img{ grid-area:img; }
.pl-img img{
  inline-size:56px; block-size:56px; object-fit:contain; display:block;
  background:var(--bg,#f7f5f0); border:1px solid var(--line-soft,#f0ede6); border-radius:9px;
}
.pl-main{ grid-area:main; min-inline-size:0; display:grid; gap:.22rem; }
.pl-main__title{
  font-weight:600; font-size:.9rem; color:var(--ink,#14233c); text-decoration:none;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.pl-main__title:hover{ color:var(--primary); }
.pl-main__tags{ display:flex; gap:.3rem; flex-wrap:wrap; }
.pl-main__tags:empty{ display:none; }
.pl-status{ grid-area:status; }
.pl-price{ grid-area:price; }
.pl-stock{ grid-area:stock; }
.pl-date{ grid-area:date; }
.pl-act{ grid-area:act; display:flex; align-items:center; justify-content:flex-end; gap:.35rem; }

.pill{
  display:inline-block; padding:.2rem .6rem; border-radius:999px;
  font-size:.73rem; font-weight:700; white-space:nowrap;
}
.pill--ok{ background:var(--ok-bg,#e3f5f0); color:var(--ok,#12876f); }
.pill--draft{ background:var(--line-soft,#f0ede6); color:var(--muted); }
.pill--void{ background:#eef1f6; color:#5b6676; }
.pill--out{ background:var(--danger-bg,#fbeaea); color:var(--danger,#cf3b3b); }

.pl-k{ display:none; font-size:.72rem; color:var(--muted); flex:0 0 auto; }
.pl-v{ font-size:.86rem; font-weight:600; }
.pl-v--muted{ font-weight:500; color:var(--muted); }
.pl-v--bad{ color:var(--danger); font-weight:700; }

/* Edit in place: a field that looks like text until it is touched. */
.pl-edit{
  display:flex; align-items:center; gap:.25rem;
  padding:.15rem .35rem; border:1px solid transparent; border-radius:9px;
  background:var(--bg,#f7f5f0);
}
.pl-edit:hover,
.pl-edit:focus-within{ border-color:var(--line); background:#fff; }
.pl-edit.is-bad{ background:var(--danger-bg,#fbeaea); }
.pl-edit input{
  inline-size:100%; min-inline-size:2.5rem; padding:.22rem .1rem;
  border:0; background:none; font:inherit; font-size:.86rem; font-weight:600;
}
.pl-edit input:focus{ outline:none; }
.pl-edit__unit{ font-size:.7rem; color:var(--muted); flex:0 0 auto; }
.pl-edit input.is-saving{ opacity:.45; }
.pl-edit input.is-saved{ color:var(--ok,#12876f); }
.pl-edit input.is-error{ color:var(--danger,#cf3b3b); }
.pl-edit:has(input.is-saved){ border-color:var(--ok,#12876f); background:var(--ok-bg,#e3f5f0); }
.pl-edit:has(input.is-error){ border-color:var(--danger,#cf3b3b); background:var(--danger-bg,#fbeaea); }

/* ---- bulk actions, present only when something is selected ----------- */
.bulkbar{
  position:sticky; inset-block-end:.7rem; z-index:40;
  display:flex; align-items:center; gap:.55rem; flex-wrap:wrap;
  margin-block:.8rem 0; padding:.6rem .75rem;
  background:var(--navy,#12233F); color:#fff; border-radius:14px;
  box-shadow:0 14px 34px rgba(16,24,40,.3);
}
.bulkbar__n{ font-size:.86rem; font-weight:600; margin-inline-end:.2rem; }
.bulkbar__n b{ font-size:1.02rem; font-weight:800; }
.bulkbar select,
.bulkbar__pct input{
  min-block-size:38px; border:0; border-radius:9px; padding:.3rem .55rem;
  font:inherit; font-size:.85rem; color:var(--ink,#14233c); background:#fff;
}
.bulkbar select.is-error{ box-shadow:0 0 0 2px #cf3b3b; }
.bulkbar__pct{ display:flex; align-items:center; gap:.35rem; font-size:.82rem; }
.bulkbar__pct input{ inline-size:4.6rem; }
.bulkbar .btn--ghost{ background:transparent; color:#d5dde9; border:1px solid rgba(255,255,255,.34); }
.bulkbar .btn--ghost:hover{ background:rgba(255,255,255,.14); color:#fff; }
/* Delete is not «one of the options»: it is apart, and it is red. */
.bulkbar__del{
  margin-inline-start:auto; border:0; background:#cf3b3b; color:#fff; font-weight:700;
}
.bulkbar__del:hover{ background:#b32f2f; }

/* ---- narrower: the date column is the first thing to go -------------- */
@media (max-width:1100px){
  .plist__head,
  .plist__row{
    grid-template-columns:1.6rem 56px minmax(0,1fr) 6.4rem 9rem 8rem auto;
    grid-template-areas:'check img main status price stock act';
  }
  .pl-date{ display:none; }
}

/* ---- phone: every row becomes a card -------------------------------- */
@media (max-width:820px){
  .plist__head{ display:none; }
  .plist{ border-radius:12px; }
  .plist__row{
    grid-template-columns:1.5rem 56px minmax(0,1fr) auto;
    grid-template-areas:
      'check img   main   act'
      'check img   status status'
      'price price stock  stock'
      'date  date  date   date';
    gap:.4rem .6rem; padding:.7rem;
  }
  .pl-date{ display:flex; align-items:center; gap:.35rem; }
  .pl-k{ display:inline; }
  .pl-price,
  .pl-stock{ display:flex; align-items:center; gap:.4rem; }
  .pl-edit{ flex:1 1 auto; border-color:var(--line); background:#fff; }
  .pl-main__title{ font-size:.92rem; }
  .pl-act .btn{ min-block-size:2.4rem; }
  .bulkbar{ inset-block-end:.4rem; padding:.55rem .6rem; gap:.4rem; }
  .bulkbar__n{ inline-size:100%; }
  .bulkbar select{ flex:1 1 9rem; }
  .bulkbar__del{ margin-inline-start:0; }
  .plist-bar select{ flex:1 1 8rem; }
}

/* ---- product form: the discount that will not save -------------------- */
.field-bad{
  margin:.35rem 0 0; font-size:.8rem; font-weight:600; color:var(--danger,#cf3b3b);
}
.field-bad[hidden]{ display:none!important; }
input.is-bad{ border-color:var(--danger,#cf3b3b); background:var(--danger-bg,#fbeaea); }
/* «✓ ذخیره شد» lives on the button that did it, not in a banner. */
.pform__bar-actions .btn.is-saved,
.pform__mobile-save .btn.is-saved{ background:var(--ok,#12876f); border-color:var(--ok,#12876f); opacity:1; }

/* =====================================================================
   QUICK ADD  (/admin/products/new)

   The front door, not a second product form. Eight questions, and the
   ninth — everything else — is the full editor on a product that already
   exists. The styles the old screen carried inline (photo thumbnails, the
   category picker) live here now, because the markup that used them is no
   longer duplicated in two places.
   ===================================================================== */

/* 460px was a phone column stretched down a desktop screen; the form read
   as twice as long as it is. */
.qadd{ max-inline-size:680px; margin-inline:auto; }
.qadd__head{ display:flex; align-items:baseline; gap:.8rem; flex-wrap:wrap; margin-block-end:1rem; }
.qadd__head h1{ margin:0; }
.qadd__back{ margin-inline-start:auto; font-size:.86rem; font-weight:600; text-decoration:none; color:var(--muted); }
.qadd__back:hover{ color:var(--primary); }

.qadd > form > label,
.qadd-field{ display:block; margin-block-end:1rem; }
.qadd-field__label{
  display:block; font-size:.88rem; font-weight:600; color:var(--ink,#14233c); margin-block-end:.35rem;
}

/* ---- what did I just make ------------------------------------------- */
.qadd-done{
  display:flex; align-items:center; gap:.8rem; flex-wrap:wrap;
  padding:.85rem 1rem; margin-block-end:1.1rem;
  background:var(--ok-bg,#e3f5f0); border:1px solid rgba(18,135,111,.35); border-radius:14px;
}
.qadd-done__tick{
  display:flex; align-items:center; justify-content:center; flex:0 0 auto;
  inline-size:2.1rem; block-size:2.1rem; border-radius:50%;
  background:var(--ok,#12876f); color:#fff; font-weight:800;
}
.qadd-done__text{ display:grid; gap:.1rem; min-inline-size:0; }
.qadd-done__text strong{ font-size:.95rem; }
.qadd-done__text span{ font-size:.84rem; color:var(--ink-soft,#3d4a5f); }
.qadd-done__acts{ display:flex; gap:.4rem; margin-inline-start:auto; flex-wrap:wrap; }

/* ---- the type question ---------------------------------------------- */
.qadd-type,
.qadd-stock{ border:0; padding:0; margin:0 0 1rem; }
.qadd-type > legend,
.qadd-stock > legend{
  padding:0; font-size:.88rem; font-weight:600; color:var(--ink,#14233c); margin-block-end:.1rem;
}
.qadd-stock[hidden]{ display:none!important; }

/* ---- the upload box that speaks Persian ------------------------------ */
.qadd-drop{
  position:relative; display:grid; justify-items:center; gap:.2rem;
  padding:1.3rem 1rem; text-align:center;
  border:2px dashed var(--line,#d7dde6); border-radius:14px; background:var(--card,#fff);
  transition:border-color .15s, background .15s;
}
.qadd-drop:hover,
.qadd-drop:focus-within{ border-color:var(--primary,#173F8A); background:#f7f9ff; }
.qadd-drop.has-files{ border-style:solid; border-color:var(--ok,#12876f); background:var(--ok-bg,#e3f5f0); }
/* A real file input, sized over the whole box: click, drop and keyboard
   focus all keep working, and the browser's own English control never
   appears. `opacity:0` rather than display:none — a hidden required input
   is one the browser refuses to focus, and the form then fails to submit
   with no message at all. */
.qadd-drop__input{
  position:absolute; inset:0; inline-size:100%; block-size:100%;
  min-block-size:0; padding:0; margin:0; border:0; opacity:0; cursor:pointer;
}
.qadd-drop__ico{ color:var(--primary,#173F8A); }
.qadd-drop__ico svg{ inline-size:1.9rem; block-size:1.9rem; }
.qadd-drop strong{ font-size:.95rem; }
.qadd-drop__sub{ font-size:.82rem; color:var(--muted); }

.photo-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(92px,1fr)); gap:.6rem; margin-block-start:.75rem; }
.photo-grid[hidden],
.photo-grid__note[hidden]{ display:none!important; }
.photo-thumb{
  position:relative; display:block; cursor:pointer; border-radius:10px; overflow:hidden;
  border:2px solid var(--line,#e4e9ee); background:#fff; aspect-ratio:1/1;
}
/* Pinned to all four sides, NOT block-size:100%. A percentage height against
   a box whose own height comes from aspect-ratio resolves to auto in several
   engines, which left the bottom of every square empty. */
.photo-thumb img{ position:absolute; inset:0; inline-size:100%; block-size:100%; object-fit:cover; display:block; }
.photo-thumb input{
  position:absolute; inset-block-start:0; inset-inline-start:0;
  inline-size:1px; block-size:1px; min-block-size:0; padding:0; margin:0; border:0; opacity:0; pointer-events:none;
}
.photo-thumb__badge{
  position:absolute; inset-block-end:0; inset-inline:0; background:rgba(17,24,39,.72);
  color:#fff; font-size:.72rem; font-weight:700; text-align:center; line-height:1.7rem; block-size:1.7rem; opacity:0;
}
.photo-thumb.is-primary{ border-color:var(--primary,#173F8A); }
.photo-thumb.is-primary .photo-thumb__badge{ opacity:1; background:var(--primary,#173F8A); }
.photo-thumb__bad{
  position:absolute; inset:0; background:rgba(180,35,24,.82); color:#fff; font-size:.72rem;
  display:flex; align-items:center; justify-content:center; text-align:center; padding:.3rem;
}

/* ---- category: closed, and it says what is inside -------------------- */
.qadd-cat{
  border:1px solid var(--line,#e4e9ee); border-radius:12px; padding:.6rem .8rem; margin-block-end:.5rem;
  background:var(--card,#fff);
}
.qadd-cat > summary{
  display:flex; align-items:center; gap:.5rem; cursor:pointer; list-style:none;
  min-block-size:42px; font-size:.88rem; font-weight:600;
}
.qadd-cat > summary::-webkit-details-marker{ display:none; }
.qadd-cat > summary::after{ content:'▾'; margin-inline-start:auto; color:var(--muted); }
.qadd-cat[open] > summary::after{ content:'▴'; }
.qadd-cat__state{ font-weight:500; color:var(--muted); }
.qadd-cat__state.is-set{ color:var(--primary,#173F8A); font-weight:700; }
.qadd-cat__search{ margin-block:.4rem .5rem; }

.cat-pick__box{
  max-block-size:230px; overflow-y:auto;
  border:1px solid var(--line,#e4e9ee); border-radius:10px; padding:.35rem;
}
.cat-pick__opt{
  display:flex; align-items:center; gap:.6rem; min-block-size:42px;
  padding:.35rem .5rem; border-radius:8px; margin:0; cursor:pointer;
}
.cat-pick__opt:hover{ background:var(--line-soft,#eef2f6); }
.cat-pick__opt.is-checked{ background:var(--primary-050,#eaf1fb); }
/* inline-size, NEVER width: the panel draws the checkbox itself with
   appearance:none and sizes it with inline-size. A physical `width:auto`
   declared later wins over that logical property, which collapsed every box
   in this list to a 2px vertical sliver. */
.cat-pick__opt input{ inline-size:1.2rem; block-size:1.2rem; flex:none; margin:0; }
.cat-pick__opt span{ font-weight:500; }
.cat-pick__chips{ display:flex; flex-wrap:wrap; gap:.4rem; margin-block-end:1rem; }
.cat-pick__chips:empty{ display:none; }
.cat-chip{
  display:inline-flex; align-items:center; gap:.15rem; max-inline-size:100%;
  background:var(--primary-050,#eaf1fb); border:1px solid var(--line,#d7e1ee); border-radius:999px;
  padding:.15rem .2rem .15rem .7rem; font-size:.84rem; font-weight:600;
}
.cat-chip__label{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cat-chip__x{
  border:0; background:none; cursor:pointer; font-size:1.15rem; line-height:1;
  padding:.15rem .35rem; color:inherit; border-radius:999px;
}
.cat-chip__x:hover{ background:rgba(0,0,0,.12); }

/* ---- the way out ----------------------------------------------------- */
.qadd-acts{
  display:flex; align-items:center; gap:.5rem; flex-wrap:wrap;
  margin-block:1.2rem .6rem; padding-block-start:1rem; border-block-start:1px solid var(--line-soft,#f0ede6);
}
.qadd-acts .btn--wide{ flex:1 1 14rem; }
.qadd-again{ margin-block-end:.8rem; }
.qadd-rest{ border-block-start:1px dashed var(--line,#e4e9ee); padding-block-start:.8rem; }

.caption-box{
  border:1px solid var(--line,#e4e9ee); border-radius:12px; padding:.55rem .8rem; margin-block-end:1rem;
  background:var(--card,#fff);
}
.caption-box > summary{ cursor:pointer; font-size:.86rem; font-weight:600; color:var(--primary,#173F8A); }
.caption-box[open] > summary{ margin-block-end:.6rem; }

@media (max-width:640px){
  .qadd-acts .btn{ flex:1 1 100%; }
  .qadd-done__acts{ inline-size:100%; margin-inline-start:0; }
}

/* =====================================================================
   DASHBOARD  (/admin)

   Action, then performance, then activity — and each of the three looks
   different, so a merchant never has to read a number to find out whether
   it is asking them for something.
   ===================================================================== */

.dash__head{ display:flex; align-items:flex-start; gap:1rem; flex-wrap:wrap; margin-block-end:1rem; }
.dash__head h1{ margin:0; }
.dash__day{ margin:.15rem 0 0; font-size:.83rem; color:var(--muted); }
.dash__acts{ display:flex; align-items:center; gap:.5rem; margin-inline-start:auto; flex-wrap:wrap; }
.dash__acts .btn,
.dash__acts .rowmenu > summary{ min-block-size:2.6rem; }

/* ---- «نیازمند توجه» -------------------------------------------------- */
.attn{
  margin-block-end:1rem; padding:.75rem .9rem;
  background:var(--card,#fff); border:1px solid var(--line-soft,#f0ede6);
  border-inline-start:4px solid var(--warn,#b5730a); border-radius:14px;
  box-shadow:var(--shadow-sm,0 1px 2px rgba(16,24,40,.06));
}
.attn__h{ margin:0 0 .5rem; font-size:.88rem; font-weight:800; color:var(--ink,#14233c); }
.attn ul{ list-style:none; margin:0; padding:0; display:grid; gap:.1rem; }
.attn__row{ display:flex; align-items:center; gap:.55rem; flex-wrap:wrap; padding:.45rem 0; }
.attn__row + .attn__row{ border-block-start:1px solid var(--line-soft,#f0ede6); }
.attn__dot{ inline-size:.5rem; block-size:.5rem; border-radius:50%; flex:0 0 auto; background:var(--muted); }
.attn__row--go .attn__dot{ background:var(--primary,#173F8A); }
.attn__row--warn .attn__dot{ background:var(--warn,#b5730a); }
.attn__row--bad .attn__dot{ background:var(--danger,#cf3b3b); }
.attn__text{ font-size:.88rem; font-weight:600; color:var(--ink,#14233c); }
.attn__cta{
  margin-inline-start:auto; font-size:.83rem; font-weight:700;
  color:var(--primary,#173F8A); text-decoration:none; white-space:nowrap;
}
.attn__cta:hover{ text-decoration:underline; }

/* ---- setup, once it is nearly finished ------------------------------- */
.setup-mini{
  position:relative; display:flex; align-items:center; gap:.7rem; flex-wrap:wrap;
  margin-block-end:1rem; padding:.6rem .85rem .7rem;
  background:var(--card,#fff); border:1px solid var(--line-soft,#f0ede6); border-radius:12px;
}
.setup-mini__bar{
  position:absolute; inset-block-end:0; inset-inline:0; block-size:3px;
  background:var(--line-soft,#f0ede6); border-radius:0 0 12px 12px; overflow:hidden;
}
.setup-mini__bar > span{ display:block; block-size:100%; background:var(--primary,#173F8A); }
.setup-mini__text{ font-size:.86rem; color:var(--ink-soft,#3d4a5f); }
.setup-mini .btn{ margin-inline-start:auto; }
.dash__setup-done{ font-size:.82rem; color:var(--muted); text-align:center; margin-block:.5rem 1rem; }

/* ---- the three numbers ----------------------------------------------- */
.kpis{ display:grid; grid-template-columns:repeat(2,1fr); gap:.6rem; margin-block-end:1rem; }
@media (min-width:760px){ .kpis{ grid-template-columns:1fr 1fr 1.35fr; } }
.kpi{
  display:grid; gap:.25rem; align-content:start; text-decoration:none;
  padding:.9rem 1rem; background:var(--card,#fff);
  border:1px solid var(--line-soft,#f0ede6); border-radius:14px;
  box-shadow:var(--shadow-xs,0 1px 2px rgba(16,24,40,.05));
}
.kpi:hover{ box-shadow:var(--shadow-md,0 6px 18px rgba(16,24,40,.1)); transform:translateY(-1px); }
.kpi__l{ font-size:.8rem; color:var(--muted); }
.kpi__l small{ display:block; font-size:.72rem; opacity:.85; }
.kpi__n{ font-size:1.35rem; font-weight:800; color:var(--ink,#14233c); font-variant-numeric:tabular-nums; }
.kpi--wide .kpi__n{ font-size:1.25rem; }
.kpi__d{ font-size:.76rem; font-weight:700; }
.kpi__d.is-up{ color:var(--ok,#12876f); }
.kpi__d.is-down{ color:var(--danger,#cf3b3b); }

/* ---- card headers with a second action ------------------------------- */
.card__head{ display:flex; align-items:center; gap:.7rem; flex-wrap:wrap; margin-block-end:.4rem; }
.card__head h2{ margin:0; }
.card__more{
  margin-inline-start:auto; font-size:.83rem; font-weight:700;
  color:var(--primary,#173F8A); text-decoration:none;
}
.card__more:hover{ text-decoration:underline; }
.tabs--mini{ margin:0 0 0 auto; gap:.25rem; }
.tabs--mini a{ padding:.2rem .6rem; font-size:.78rem; min-block-size:0; }

/* ---- the last few orders --------------------------------------------- */
.olist{ list-style:none; margin:.3rem 0 0; padding:0; }
.olist__row + .olist__row{ border-block-start:1px solid var(--line-soft,#f0ede6); }
.olist__row > a{
  display:grid; align-items:center; gap:.3rem .7rem; text-decoration:none; color:inherit;
  grid-template-columns:auto minmax(0,1fr) auto;
  grid-template-areas:'code who total' 'code status time';
  padding:.6rem .35rem; border-radius:10px;
}
.olist__row > a:hover{ background:#fbfaf7; }
.olist__code{ grid-area:code; font-weight:700; font-size:.86rem; color:var(--primary,#173F8A); }
.olist__who{ grid-area:who; font-size:.88rem; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.olist__total{ grid-area:total; font-size:.88rem; font-weight:700; white-space:nowrap; }
.olist__status{ grid-area:status; }
.olist__row time{ grid-area:time; font-size:.76rem; color:var(--muted); white-space:nowrap; }
@media (min-width:760px){
  .olist__row > a{
    grid-template-columns:5.5rem minmax(0,1fr) 9rem 8rem 7.5rem;
    grid-template-areas:'code who total status time';
  }
}
.empty--tight{ padding-block:.9rem; text-align:start; font-size:.86rem; }

/* ---- suggestions, folded away ---------------------------------------- */
.grow-card{ padding:.6rem .9rem; }
.grow-card > summary{
  display:flex; align-items:center; gap:.5rem; cursor:pointer; list-style:none;
  font-size:.88rem; font-weight:700; min-block-size:2.4rem;
}
.grow-card > summary::-webkit-details-marker{ display:none; }
.grow-card > summary::after{ content:'▾'; margin-inline-start:auto; color:var(--muted); }
.grow-card[open] > summary::after{ content:'▴'; }
.grow-card__n{
  min-inline-size:1.4rem; padding:0 .4rem; border-radius:999px; text-align:center;
  background:var(--primary-050,#e9effa); color:var(--primary,#173F8A); font-size:.75rem;
}
.grow-list{ list-style:none; margin:.4rem 0 0; padding:0; display:grid; gap:.5rem; }
.grow-list li{ display:grid; gap:.1rem; padding-block:.4rem; border-block-start:1px solid var(--line-soft,#f0ede6); }
.grow-list a{ font-weight:600; font-size:.88rem; }
.grow-list .hint{ margin:0; }

/* ---- sidebar foot: one daily action, the rest in an account menu ------ */
.panel__acct{ margin-block-start:.5rem; }
.panel__acct > summary{
  cursor:pointer; list-style:none; display:flex; align-items:center; gap:.4rem;
  font-size:.84rem; font-weight:600; color:var(--side-ink-soft,#5b6676);
  min-block-size:2.2rem;
}
.panel__acct > summary::-webkit-details-marker{ display:none; }
.panel__acct > summary::after{ content:'▾'; font-size:.7em; margin-inline-start:auto; }
.panel__acct[open] > summary::after{ content:'▴'; }
.panel__acct-pop{ display:grid; gap:.1rem; padding-block:.2rem; }
.panel__acct-pop a,
.panel__acct-pop button{
  display:block; text-align:start; padding:.4rem .5rem; border-radius:8px;
  font-size:.83rem; font-weight:600; color:var(--side-ink-soft,#5b6676);
  background:none; border:0; cursor:pointer; font-family:inherit;
}
.panel__acct-pop a:hover,
.panel__acct-pop button:hover{ background:var(--line-soft,#f0ede6); color:var(--navy,#12233F); }

/* =====================================================================
   ANALYTICS  (/admin/insights)

   One window, five numbers, two curves, a funnel and three lists — in the
   order a shopkeeper asks: how much did I sell, how many came, where did I
   lose them, where did they come from, and which product did the work.
   ===================================================================== */

.ins__head{ display:flex; align-items:flex-start; gap:1rem; flex-wrap:wrap; margin-block-end:.7rem; }
.ins__head h1{ margin:0; }
.ins__head > .btn{ margin-inline-start:auto; }
.ins__sub{ margin:.15rem 0 0; font-size:.83rem; color:var(--muted); }

.ins__range{ margin-block-end:1rem; }
.ins__custom{
  display:flex; align-items:flex-end; gap:.5rem; flex-wrap:wrap;
  margin-block-start:.6rem; padding:.7rem .8rem;
  background:var(--card,#fff); border:1px solid var(--line-soft,#f0ede6); border-radius:12px;
}
.ins__custom[hidden]{ display:none!important; }
.ins__custom label{ display:grid; gap:.2rem; margin:0; }
.ins__custom label span{ font-size:.78rem; color:var(--muted); }
.ins__custom input{ inline-size:9rem; }

/* ---- five numbers ----------------------------------------------------- */
.kpi-row{ display:grid; grid-template-columns:repeat(2,1fr); gap:.6rem; margin-block-end:1rem; }
@media (min-width:700px){ .kpi-row{ grid-template-columns:repeat(5,1fr); } }
.kpi--flat:hover{ transform:none; box-shadow:var(--shadow-xs,0 1px 2px rgba(16,24,40,.05)); }
.kpi--flat .kpi__n{ font-size:1.15rem; }
.kpi__d--none{ color:var(--muted); font-weight:500; }

.card__note{ margin-inline-start:auto; font-size:.8rem; color:var(--muted); }

/* A second colour for «بازدید», so a glance never mistakes visitors for
   money. Green stays reserved for «better than before». */
.bars__bar--alt{ background:#7c8ba1; }

/* ---- funnel ----------------------------------------------------------- */
.funnel{ display:flex; flex-direction:column; gap:.6rem; margin-block-start:.8rem; }
.funnel__row{ display:grid; grid-template-columns:6.5rem 1fr auto; align-items:center; gap:.7rem; }
.funnel__label{ font-size:.88rem; color:var(--ink-soft,#3d4a5f); }
.funnel__bar{ background:var(--line-soft,#f0ede6); border-radius:8px; block-size:1.5rem; overflow:hidden; }
.funnel__bar i{
  display:block; block-size:100%; background:var(--primary,#173F8A);
  border-radius:8px; min-inline-size:2px; transition:inline-size .4s;
}
.funnel__val{ font-weight:700; font-variant-numeric:tabular-nums; white-space:nowrap; text-align:end; }
.funnel__val small{ display:block; color:var(--muted); font-weight:500; font-size:.74rem; }
.funnel__note{
  margin-block-start:.9rem; padding:.55rem .75rem; font-size:.85rem; font-weight:600;
  background:var(--warn-bg,#fbf1df); color:var(--warn,#b5730a); border-radius:10px;
}
@media (max-width:560px){
  .funnel__row{ grid-template-columns:5rem 1fr; }
  .funnel__val{ grid-column:2; text-align:start; }
}

/* ---- entry sources ---------------------------------------------------- */
.src-list{ list-style:none; margin:.3rem 0 0; padding:0; display:grid; gap:.45rem; }
.src-list li{ display:grid; grid-template-columns:7rem 1fr auto; align-items:center; gap:.6rem; }
.src-list__n{ font-size:.85rem; font-weight:600; }
.src-list__bar{ background:var(--line-soft,#f0ede6); border-radius:6px; block-size:.55rem; overflow:hidden; }
.src-list__bar i{ display:block; block-size:100%; background:var(--accent,#21B79C); border-radius:6px; min-inline-size:2px; }
.src-list b{ font-variant-numeric:tabular-nums; font-size:.85rem; }

/* ---- the three lists -------------------------------------------------- */
@media (min-width:1100px){ .insights__cols{ grid-template-columns:repeat(3,1fr); } }
.rank__v{ text-align:end; white-space:nowrap; font-weight:700; font-size:.86rem; }
.rank__v small{ display:block; font-weight:500; font-size:.74rem; color:var(--muted); }
.rank__name{ overflow:hidden; text-overflow:ellipsis; }

/* =====================================================================
   DRAWER — the panel's one pattern for creating a small thing.

   List page manages and searches; a drawer creates or edits something with
   two or three fields; only something as big as a product gets a page. A
   permanent form standing open at the top of a list is a form the merchant
   scrolls past every single day after the first week.
   ===================================================================== */
.drawer{ position:fixed; inset:0; z-index:120; }
.drawer[hidden]{ display:none!important; }
.drawer__back{
  position:absolute; inset:0; background:rgba(16,24,40,.42);
  opacity:0; transition:opacity .2s;
}
.drawer.is-open .drawer__back{ opacity:1; }
.drawer__panel{
  position:absolute; inset-block:0; inset-inline-start:0;
  display:flex; flex-direction:column; inline-size:min(28rem, 100%);
  background:var(--card,#fff); box-shadow:0 0 44px rgba(16,24,40,.28);
  transform:translateX(-100%); transition:transform .22s ease;
}
/* The panel sits on the INLINE-START edge, which in this RTL panel is the
   RIGHT one — so it has to slide out to the right. `transform` is physical
   and has no logical twin, so the direction is flipped by hand here. */
[dir="rtl"] .drawer__panel{ transform:translateX(100%); }
.drawer.is-open .drawer__panel{ transform:translateX(0); }
.drawer__head{
  display:flex; align-items:center; gap:.7rem;
  padding:1rem 1.1rem; border-block-end:1px solid var(--line-soft,#f0ede6);
}
.drawer__head h2{ margin:0; font-size:1.02rem; }
.drawer__x{
  margin-inline-start:auto; border:0; background:none; cursor:pointer;
  font-size:1.5rem; line-height:1; color:var(--muted); padding:0; border-radius:8px;
  min-inline-size:2.75rem; min-block-size:2.75rem; display:inline-flex; align-items:center; justify-content:center;
}
.drawer__x:hover{ background:var(--line-soft,#f0ede6); color:var(--ink,#14233c); }
.drawer__body{ flex:1 1 auto; overflow-y:auto; padding:1.1rem; }
.drawer__foot{
  display:flex; gap:.5rem; padding:.9rem 1.1rem;
  border-block-start:1px solid var(--line-soft,#f0ede6); background:var(--bg,#f7f5f0);
}
.drawer__foot .btn{ flex:1 1 auto; }
body.has-drawer{ overflow:hidden; }
.add-more{ margin-block-start:.4rem; }
.add-more > summary{
  cursor:pointer; font-size:.85rem; font-weight:700; color:var(--primary,#173F8A);
  padding-block:.4rem; min-block-size:2.2rem;
}
.qadd-drop--sm{ padding:.9rem .8rem; }

/* =====================================================================
   CATEGORY TREE  (/admin/categories)
   ===================================================================== */
.cats__head{ display:flex; align-items:flex-start; gap:1rem; flex-wrap:wrap; margin-block-end:1rem; }
.cats__head h1{ margin:0; }
/* Pushes a header's BUTTON to the far side. `:not(:first-child)`, because
   on a header with only a title the title is also the last child — and was
   being pushed to the left edge of every such page. Long subtitles filled
   the row and hid it; the settings chooser's short one did not. */
.cats__head > :last-child:not(:first-child){ margin-inline-start:auto; }
.cats__sub{ margin:.15rem 0 0; font-size:.83rem; color:var(--muted); }
.cats__bar{ display:flex; align-items:center; gap:.7rem; flex-wrap:wrap; margin-block-end:.7rem; }
.cats__bar .plist-find{ flex:1 1 16rem; }
.cats__tip{ font-size:.78rem; color:var(--muted); }

.ctree{
  list-style:none; margin:0; padding:.25rem; background:var(--card,#fff);
  border:1px solid var(--line-soft,#f0ede6); border-radius:14px;
  box-shadow:var(--shadow-sm,0 1px 2px rgba(16,24,40,.06));
}
.ctree.is-saving{ opacity:.6; }
.ctree__row{
  display:flex; align-items:center; gap:.6rem;
  padding:.5rem .6rem; border-radius:10px;
  /* The indent IS the hierarchy: without it «چسب» and «چسب ۱۲۳» read as
     two unrelated categories that happen to be next to each other. */
  margin-inline-start:calc(var(--depth, 0) * 1.6rem);
  border-block-start:1px solid var(--line-soft,#f0ede6);
}
.ctree__row:first-child{ border-block-start:0; }
.ctree__row:hover{ background:#fbfaf7; }
.ctree__row.is-dragging{ opacity:.45; }
.ctree__row.is-over{ box-shadow:inset 0 2px 0 var(--primary,#173F8A); }
.ctree__row[style*="--depth: 0"]{ font-weight:700; }
.ctree__grip{
  cursor:grab; color:#b9c2cf; font-size:1rem; line-height:1; flex:0 0 auto;
  inline-size:1rem; text-align:center;
}
.ctree__grip:active{ cursor:grabbing; }
.ctree__name{
  font-size:.9rem; font-weight:600; color:var(--ink,#14233c); text-decoration:none;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.ctree__name::before{
  /* The «↳» only on children, so the eye gets the shape even at a glance. */
  content:'↳ '; color:#b9c2cf; font-weight:400;
}
.ctree__row[style*="--depth: 0"] .ctree__name::before{ content:''; }
.ctree__name:hover{ color:var(--primary,#173F8A); }
.ctree__count{ margin-inline-start:auto; font-size:.78rem; color:var(--muted); white-space:nowrap; }
.ctree__acts{ display:flex; align-items:center; gap:.35rem; flex:0 0 auto; }

@media (max-width:640px){
  .ctree__row{ margin-inline-start:calc(var(--depth, 0) * .9rem); gap:.4rem; padding:.55rem .35rem; }
  .ctree__count{ display:none; }
}

/* =====================================================================
   BRANDS  (/admin/brands)
   ===================================================================== */
.blist{
  list-style:none; margin:0; padding:.25rem; background:var(--card,#fff);
  border:1px solid var(--line-soft,#f0ede6); border-radius:14px;
  box-shadow:var(--shadow-sm,0 1px 2px rgba(16,24,40,.06));
}
.blist__row{
  display:flex; align-items:center; gap:.7rem; padding:.55rem .6rem; border-radius:10px;
  border-block-start:1px solid var(--line-soft,#f0ede6);
}
.blist__row:first-child{ border-block-start:0; }
.blist__row:hover{ background:#fbfaf7; }
.blist__logo{ flex:0 0 auto; }
.blist__logo img{
  inline-size:44px; block-size:44px; object-fit:contain; display:block;
  background:var(--bg,#f7f5f0); border:1px solid var(--line-soft,#f0ede6); border-radius:9px;
}
.blist__initial{
  display:flex; align-items:center; justify-content:center;
  inline-size:44px; block-size:44px; border-radius:9px;
  background:var(--primary-050,#e9effa); color:var(--primary,#173F8A); font-weight:800;
}
.blist__name{ font-size:.92rem; font-weight:600; color:var(--ink,#14233c); text-decoration:none; }
.blist__name:hover{ color:var(--primary,#173F8A); }
.blist__count{
  margin-inline-start:auto; display:flex; align-items:center; gap:.4rem;
  font-size:.78rem; color:var(--muted); white-space:nowrap;
}
.blist__acts{ display:flex; align-items:center; gap:.35rem; flex:0 0 auto; }

.blogo{ display:flex; align-items:center; gap:.8rem; margin-block-end:.6rem; flex-wrap:wrap; }
.blogo img{
  inline-size:96px; block-size:96px; object-fit:contain;
  background:var(--bg,#f7f5f0); border:1px solid var(--line-soft,#f0ede6); border-radius:12px;
}
.blogo__x{ font-size:.83rem; }

.danger-zone{
  border-color:#f0d7d7; background:#fffafa;
}
.danger-zone > summary{
  cursor:pointer; font-size:.88rem; font-weight:700; color:var(--danger,#cf3b3b);
  min-block-size:2.4rem; display:flex; align-items:center;
}
.danger-zone form{ margin-block-start:.7rem; display:grid; gap:.6rem; justify-items:start; }

@media (max-width:640px){
  .blist__count{ inline-size:100%; margin-inline-start:0; order:5; }
}

/* =====================================================================
   INVENTORY  (/admin/inventory)
   ===================================================================== */
.invt{
  margin-block:.2rem 1rem; background:var(--card,#fff);
  border:1px solid var(--line-soft,#f0ede6); border-radius:14px;
  box-shadow:var(--shadow-sm,0 1px 2px rgba(16,24,40,.06));
}
.invt__head,
.invt__row{
  display:grid; align-items:center; gap:.4rem .7rem;
  grid-template-columns:1.6rem 44px minmax(0,1fr) 9rem 11rem;
  grid-template-areas:'check img main price stock';
  padding:.5rem .8rem;
}
.invt__head{
  background:var(--line-soft,#f0ede6); color:var(--ink-soft,#3d4a5f);
  font-size:.77rem; font-weight:700; border-radius:13px 13px 0 0;
}
.invt__rows{ list-style:none; margin:0; padding:0; }
.invt__row{ border-block-start:1px solid var(--line-soft,#f0ede6); }
.invt__row:hover{ background:#fbfaf7; }
.invt__row.is-picked{ background:var(--primary-050,#e9effa); }
/* Colour is never the only signal: the row carries a «ناموجود» pill too. */
.invt__row.is-out{ background:#fef7f7; box-shadow:inset 3px 0 0 var(--danger,#cf3b3b); }
.invt__row.is-low{ box-shadow:inset 3px 0 0 var(--warn,#b5730a); }
.invt__row--var{ background:#fcfcfa; }
.invt__row--var .iv-main{ padding-inline-start:.4rem; }

.iv-check{ grid-area:check; }
.iv-check input{ inline-size:1.15rem; block-size:1.15rem; cursor:pointer; }
.iv-img{ grid-area:img; }
.iv-img img{
  inline-size:44px; block-size:44px; object-fit:contain; display:block;
  background:var(--bg,#f7f5f0); border:1px solid var(--line-soft,#f0ede6); border-radius:8px;
}
.iv-main{ grid-area:main; min-inline-size:0; display:grid; gap:.15rem; }
.iv-main__title{
  font-size:.88rem; font-weight:600; color:var(--ink,#14233c); text-decoration:none;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.iv-main__title:hover{ color:var(--primary,#173F8A); }
.iv-main__meta{ display:flex; align-items:center; gap:.35rem; flex-wrap:wrap; }
.iv-sku{
  font-size:.72rem; color:var(--muted); background:var(--bg,#f7f5f0);
  padding:.05rem .4rem; border-radius:6px; font-variant-numeric:tabular-nums;
}
.iv-var{ font-size:.85rem; font-weight:600; color:var(--ink-soft,#3d4a5f); }
.iv-price{ grid-area:price; font-size:.84rem; }
.iv-stock{ grid-area:stock; display:flex; align-items:center; gap:.45rem; justify-content:flex-end; }
.iv-stock__sum{ font-size:.88rem; font-weight:700; }
.iv-stock__sum small{ font-weight:500; color:var(--muted); }
.iv-stock .pl-edit{ flex:1 1 auto; max-inline-size:8rem; }

.inv-thr{
  display:flex; align-items:flex-end; gap:.5rem; flex-wrap:wrap;
  margin-block-end:.7rem; padding:.6rem .8rem;
  background:var(--card,#fff); border:1px solid var(--line-soft,#f0ede6); border-radius:12px;
}
.inv-thr label{ display:grid; gap:.2rem; margin:0; }
.inv-thr label span{ font-size:.8rem; color:var(--ink-soft,#3d4a5f); }
.inv-thr input{ inline-size:6rem; }

@media (max-width:820px){
  .invt__head{ display:none; }
  .invt__row{
    grid-template-columns:1.5rem 44px minmax(0,1fr);
    grid-template-areas:
      'check img main'
      'check img price'
      'stock stock stock';
    gap:.35rem .6rem; padding:.65rem .6rem;
  }
  .iv-stock{ justify-content:flex-start; }
  .iv-stock .pl-edit{ max-inline-size:none; }
}

/* =====================================================================
   ATTRIBUTES  (/admin/attributes)

   The list has to answer «این ویژگی برای چیست؟» before anything else, so
   the roles are chips on the row itself: سیستمی, تنوع‌ساز, فیلتر. Values
   live inside the row, folded away, because forty attributes with every
   value on screen is a page nobody can manage.
   ===================================================================== */
.alist{
  list-style:none; margin:0; padding:.25rem; background:var(--card,#fff);
  border:1px solid var(--line-soft,#f0ede6); border-radius:14px;
  box-shadow:var(--shadow-sm,0 1px 2px rgba(16,24,40,.06));
}
.alist__item{ border-block-start:1px solid var(--line-soft,#f0ede6); }
.alist__item:first-child{ border-block-start:0; }
.alist__item.is-dragging{ opacity:.45; }
.alist__item.is-over{ box-shadow:inset 0 2px 0 var(--primary,#173F8A); }
.alist__item > details > summary{
  list-style:none; cursor:pointer;
}
.alist__item > details > summary::-webkit-details-marker{ display:none; }
.alist__row{
  display:flex; align-items:center; gap:.55rem; flex-wrap:wrap;
  padding:.6rem .6rem; border-radius:10px; min-block-size:3rem;
}
.alist__row:hover{ background:#fbfaf7; }
.alist__row::after{ content:'▾'; color:var(--muted); margin-inline-start:.2rem; }
.alist__item > details[open] > summary .alist__row::after{ content:'▴'; }
.alist__grip{ cursor:grab; color:#b9c2cf; inline-size:1rem; text-align:center; flex:0 0 auto; }
.alist__name{ font-size:.95rem; font-weight:700; }
.alist__roles{ display:flex; align-items:center; gap:.3rem; flex-wrap:wrap; }
.alist__count{ margin-inline-start:auto; font-size:.78rem; color:var(--muted); white-space:nowrap; }
.alist__body{ padding:.2rem .7rem .8rem; }
.alist__tools{ display:flex; align-items:center; gap:.4rem; flex-wrap:wrap; margin-block-end:.5rem; }
.alist__deep{ font-size:.8rem; font-weight:600; }
.alist__where{ margin-block:0 .6rem; }

/* The roles, in three colours that mean three different things. */
.chip--sys{ background:#eef1f6; color:#41506b; }
.chip--var{ background:var(--primary-050,#e9effa); color:var(--primary,#173F8A); }
.chip--filt{ background:var(--ok-bg,#e3f5f0); color:var(--ok,#12876f); }

.avals{ list-style:none; margin:0 0 .6rem; padding:0; display:grid; gap:.25rem; }
.avals__row{
  display:flex; align-items:center; gap:.5rem;
  padding:.4rem .5rem; border-radius:9px; background:var(--bg,#f7f5f0);
}
.avals__row.is-dragging{ opacity:.45; }
.avals__row.is-over{ box-shadow:inset 0 2px 0 var(--primary,#173F8A); }
.avals__grip{ cursor:grab; color:#b9c2cf; font-size:.9rem; flex:0 0 auto; }
.avals__sw{
  inline-size:18px; block-size:18px; border-radius:50%;
  border:1px solid rgba(0,0,0,.18); flex:0 0 auto;
}
.avals__name{ font-weight:600; font-size:.88rem; }
.avals__used{ margin-inline-start:auto; font-size:.75rem; color:var(--muted); white-space:nowrap; }
.avals__pop{ min-inline-size:17rem; padding:.6rem; }
.avals__form{ display:grid; gap:.4rem; margin-block-end:.5rem; }
.avals__form + .avals__form{ border-block-start:1px solid var(--line-soft,#f0ede6); padding-block-start:.6rem; }
.avals__form label{ display:grid; gap:.2rem; margin:0; }
.avals__form label span{ font-size:.76rem; color:var(--muted); }
.avals__form input[type=color]{ inline-size:100%; min-block-size:2.2rem; padding:.1rem; }
.avals__locked{ margin:.2rem 0 0; font-size:.76rem; }
.avals__add{ display:flex; gap:.4rem; align-items:center; flex-wrap:wrap; }
.avals__add input[type=text]{ flex:1 1 10rem; }
.avals__add input[type=color]{ inline-size:2.6rem; min-block-size:2.4rem; padding:.1rem; }

.attr-sets{ display:flex; flex-wrap:wrap; gap:.3rem .9rem; margin-block-start:.2rem; }
.attr-sets__one{ margin:0; }

/* =====================================================================
   BUNDLES  (/admin/bundles)
   ===================================================================== */
.blist__price{ font-size:.86rem; font-weight:700; white-space:nowrap; }

.bitems{ list-style:none; margin:.3rem 0 .8rem; padding:0; }
.bitems__row{
  display:flex; align-items:center; gap:.6rem; flex-wrap:wrap;
  padding:.55rem .3rem; border-block-start:1px solid var(--line-soft,#f0ede6);
}
.bitems__row:first-child{ border-block-start:0; }
.bitems__row.is-out{ background:#fef7f7; border-radius:8px; }
.bitems__name{ font-size:.9rem; font-weight:600; text-decoration:none; color:var(--ink,#14233c); }
.bitems__name:hover{ color:var(--primary,#173F8A); }
.bitems__stock{ font-size:.78rem; color:var(--muted); }
.bitems__stock small{ color:var(--primary,#173F8A); font-weight:700; }
.bitems__price{ margin-inline-start:auto; font-size:.84rem; font-weight:600; white-space:nowrap; }
.bitems__qty{ display:flex; align-items:center; gap:.3rem; }
.bitems__qty input{ inline-size:4.2rem; text-align:center; }
.bitems__qty-ro{ font-size:.85rem; color:var(--muted); }
.bitems__add{
  display:flex; gap:.5rem; flex-wrap:wrap; align-items:center;
  padding-block-start:.7rem; border-block-start:1px dashed var(--line,#e4e9ee);
}
.bitems__add-pick{ flex:1 1 16rem; margin:0; }
.bitems__add-qty{ flex:0 0 5rem; margin:0; }

.bsum{ display:grid; gap:.1rem; }
.bsum__row{
  display:flex; align-items:baseline; justify-content:space-between; gap:1rem;
  padding-block:.4rem; font-size:.88rem;
}
.bsum__row + .bsum__row{ border-block-start:1px solid var(--line-soft,#f0ede6); }
.bsum__row--good b{ color:var(--ok,#12876f); }
.bsum__row--good small{ font-weight:600; }
.bsum__row--big{ font-size:1rem; }
.bsum__row--big b{ font-size:1.1rem; }
.bsum__warn{
  margin:.4rem 0 0; padding:.5rem .7rem; font-size:.83rem; font-weight:600;
  background:var(--warn-bg,#fbf1df); color:var(--warn,#b5730a); border-radius:9px;
}

/* =====================================================================
   REVIEWS  (/admin/reviews)
   ===================================================================== */
.rv-list{ gap:.5rem; }
.rv-item{
  border-color:var(--line-soft,#f0ede6); background:var(--card,#fff);
  border-radius:12px; padding:.7rem .85rem;
}
/* A low rating is not «wrong» — it is only worth noticing sooner. */
.rv-item.is-low{ box-shadow:inset 3px 0 0 var(--warn,#b5730a); }
.rv-item__head{ margin-block-end:.2rem; }
.rv-item__prod{ margin:0 0 .35rem; font-size:.82rem; }
.rv-item__prod a{ font-weight:600; text-decoration:none; }
.rv-item__prod a:hover{ text-decoration:underline; }
.rv-item__see{ color:var(--muted); margin-inline-start:.2rem; }
.rv-item__body{ font-size:.9rem; line-height:1.8; }
.chip--verified{ background:var(--ok-bg,#e3f5f0); color:var(--ok,#12876f); font-weight:700; }
.rv-item__reply{
  margin-block:.5rem 0; padding:.55rem .75rem; font-size:.88rem;
  border-inline-start:3px solid var(--accent,#21B79C);
  background:var(--accent-050,#e4f6f2); border-radius:8px;
}
.rv-item__reply b{ display:block; font-size:.8rem; margin-block-end:.15rem; }
.rv-item__actions{ margin-block-start:.6rem; align-items:center; }
.rv-item__mod{ margin-inline-start:auto; font-size:.74rem; color:var(--muted); }
.rv-item__reply-form{ margin-block-start:.6rem; display:grid; gap:.4rem; }
.rv-item__reply-form[hidden]{ display:none!important; }
.rv-item__reply-form label{ margin:0; }
.rv-item__reply-form textarea{ inline-size:100%; }
.rv-item__reply-acts{ display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; }
.rv-item__reply-acts .hint{ margin:0; }
.rv-quick{ display:flex; gap:.5rem; flex-wrap:wrap; margin-block:0 .7rem; }
.rv-quick a{
  font-size:.8rem; font-weight:600; text-decoration:none;
  padding:.25rem .7rem; border-radius:999px;
  background:var(--line-soft,#f0ede6); color:var(--ink-soft,#3d4a5f);
}
.rv-quick a:hover{ background:var(--primary-050,#e9effa); color:var(--primary,#173F8A); }

@media (max-width:640px){
  .alist__count{ inline-size:100%; margin-inline-start:0; }
  .bitems__price{ margin-inline-start:0; }
  .avals__pop{ min-inline-size:14rem; }
}

/* =====================================================================
   CUSTOMERS  (/admin/customers)

   The row answers «چه کسی، چند خرید، چقدر، کِی» without opening anything,
   because at a thousand customers opening each one is not a workflow.
   ===================================================================== */
.clist{
  margin-block:.2rem 1rem; background:var(--card,#fff);
  border:1px solid var(--line-soft,#f0ede6); border-radius:14px;
  box-shadow:var(--shadow-sm,0 1px 2px rgba(16,24,40,.06));
}
.clist__head,
.clist__row{
  display:grid; align-items:center; gap:.4rem .7rem;
  grid-template-columns:1.6rem minmax(0,1.6fr) 5rem 10rem 9rem 8rem;
  grid-template-areas:'check main orders spent last group';
  padding:.55rem .85rem;
}
.clist__head{
  background:var(--line-soft,#f0ede6); color:var(--ink-soft,#3d4a5f);
  font-size:.77rem; font-weight:700; border-radius:13px 13px 0 0;
}
.clist__rows{ list-style:none; margin:0; padding:0; }
.clist__row{ border-block-start:1px solid var(--line-soft,#f0ede6); }
.clist__row:hover{ background:#fbfaf7; }
.clist__row.is-picked{ background:var(--primary-050,#e9effa); }

.cl-check{ grid-area:check; }
.cl-check input{ inline-size:1.15rem; block-size:1.15rem; cursor:pointer; }
.cl-main{ grid-area:main; display:grid; gap:.1rem; min-inline-size:0; text-decoration:none; }
.cl-main__name{ font-size:.9rem; font-weight:600; color:var(--ink,#14233c); }
.cl-main:hover .cl-main__name{ color:var(--primary,#173F8A); }
.cl-main__mobile{ font-size:.78rem; color:var(--muted); }
.cl-orders{ grid-area:orders; font-size:.86rem; }
.cl-spent{ grid-area:spent; font-size:.86rem; display:grid; gap:.05rem; }
.cl-wallet{ font-size:.72rem; color:var(--ok,#12876f); font-weight:600; }
.cl-last{ grid-area:last; font-size:.82rem; color:var(--muted); }
.cl-group{ grid-area:group; display:flex; gap:.3rem; flex-wrap:wrap; }
.cl-k{ display:none; font-size:.72rem; color:var(--muted); }

@media (max-width:900px){
  .clist__head{ display:none; }
  .clist__row{
    grid-template-columns:1.5rem minmax(0,1fr) auto;
    grid-template-areas:
      'check main  group'
      'check orders spent'
      '.     last  last';
    gap:.3rem .6rem; padding:.7rem;
  }
  .cl-k{ display:inline; margin-inline-end:.2rem; }
  .cl-orders,.cl-spent{ display:flex; align-items:baseline; gap:.3rem; }
}

/* =====================================================================
   LOYALTY  (/admin/customers/loyalty)
   ===================================================================== */
.loyalty-liab{
  margin-block:0 1rem; padding:.6rem .85rem; font-size:.86rem;
  background:var(--warn-bg,#fbf1df); color:var(--warn,#b5730a); border-radius:10px;
}
.loyalty-toggle{ font-weight:600; }
.loyalty-percent{ display:block; margin-block:1rem .2rem; }
.loyalty-percent > span:first-child{ display:block; font-size:.88rem; margin-block-end:.35rem; }
.loyalty-percent__field{ display:inline-flex; align-items:center; gap:.4rem; }
.loyalty-percent__field input{ inline-size:6rem; text-align:center; }
.loyalty-demo{
  margin-block:.2rem 1rem; padding:.55rem .8rem; font-size:.86rem;
  background:var(--primary-050,#e9effa); color:var(--ink,#14233c); border-radius:10px;
}
.loyalty-demo.is-zero{ background:var(--line-soft,#f0ede6); color:var(--muted); }
.loyalty-rules{ list-style:none; margin:0 0 1rem; padding:0; display:grid; gap:.4rem; }
.loyalty-rules li{
  font-size:.84rem; color:var(--ink-soft,#3d4a5f); padding-inline-start:1.1rem; position:relative;
}
.loyalty-rules li::before{
  content:'•'; position:absolute; inset-inline-start:0; color:var(--primary,#173F8A); font-weight:800;
}

/* =====================================================================
   PAYMENT METHODS  (/admin/settings/payment)

   A short list of ways money arrives. Keys, secrets and card numbers live
   inside the method they belong to and are not on screen until asked for.
   ===================================================================== */
.pmeths{
  list-style:none; margin:0 0 1rem; padding:.25rem; background:var(--card,#fff);
  border:1px solid var(--line-soft,#f0ede6); border-radius:14px;
  box-shadow:var(--shadow-sm,0 1px 2px rgba(16,24,40,.06));
}
.pmeth{
  display:flex; align-items:center; gap:.7rem; flex-wrap:wrap;
  padding:.7rem .75rem; border-radius:10px;
  border-block-start:1px solid var(--line-soft,#f0ede6);
}
.pmeth:first-child{ border-block-start:0; }
.pmeth.is-on{ background:#fbfdfc; }
.pmeth__main{ display:grid; gap:.15rem; min-inline-size:0; flex:1 1 16rem; }
.pmeth__name{ font-size:.94rem; font-weight:700; }
.pmeth__desc{ font-size:.8rem; color:var(--muted); }
.pmeth__state{
  font-size:.76rem; font-weight:700; padding:.2rem .65rem; border-radius:999px; white-space:nowrap;
}
.pmeth__state--on{ background:var(--ok-bg,#e3f5f0); color:var(--ok,#12876f); }
.pmeth__state--off{ background:var(--line-soft,#f0ede6); color:var(--muted); }
.pmeth__state--warn{ background:var(--warn-bg,#fbf1df); color:var(--warn,#b5730a); }

.gw{
  border:1px solid var(--line,#e4e9ee); border-radius:12px;
  padding:.85rem 1rem; margin-block:.6rem;
}
.gw[hidden]{ display:none!important; }
.gw__tags{ display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; margin-block-end:.6rem; }
.gw__name{ font-weight:700; }
.gw__test{ margin-block-start:.5rem; }
.gw-tag{
  font-size:.72rem; font-weight:700; border-radius:999px; padding:.05rem .5rem;
  background:var(--line-soft,#f0ede6); color:var(--muted);
}
.gw-tag--ok{ background:#e3f6f1; color:#0f766e; }
.gw-tag--warn{ background:#fef3c7; color:#92600a; }
.gw-test{
  display:flex; align-items:center; justify-content:space-between; gap:.75rem; flex-wrap:wrap;
  padding-block:.5rem; border-block-start:1px solid var(--line-soft,#eef2f6);
}
.gw-test:first-of-type{ border-block-start:0; }
.gw-test__name{ font-weight:600; }
.gw-test .ok{ display:block; font-weight:400; font-size:.8rem; }
.gw-test form{ margin:0; }
.mono-hint{ font-weight:400; color:var(--muted,#667889); direction:ltr; unicode-bidi:isolate; }

/* The address that must be pasted into the gateway's own panel. */
.copyfield{ margin-block:.8rem; }
.copyfield__label{ display:block; font-size:.85rem; font-weight:600; margin-block-end:.3rem; }
.copyfield__row{ display:flex; gap:.4rem; align-items:center; }
.copyfield__row input{ flex:1 1 auto; font-size:.82rem; background:var(--bg,#f7f5f0); }
.copyfield__row .btn{ flex:0 0 auto; }

/* =====================================================================
   TAX  (/admin/settings/tax)
   ===================================================================== */
.tax-on{ font-weight:600; }
.tax-field{ display:block; margin-block:1rem .2rem; }
.tax-field > span:first-child{ display:block; font-size:.88rem; margin-block-end:.35rem; }
.tax-input{ display:inline-flex; align-items:center; gap:.4rem; }
.tax-input input{ inline-size:6rem; text-align:center; }
.tax-demo{
  margin-block:.8rem; padding:.7rem .85rem; font-size:.87rem; line-height:1.9;
  background:var(--primary-050,#e9effa); border-radius:10px;
}

/* =====================================================================
   DAILY RATES  (/admin/settings/rates)

   The most dangerous number in the panel: one mistyped zero reprices a
   whole catalogue. Nothing here saves directly.
   ===================================================================== */
.rate-grid{ display:grid; gap:1rem; }
@media (min-width:700px){ .rate-grid{ grid-template-columns:1fr 1fr; } }
.rate-box{ padding:.9rem 1rem; background:var(--bg,#f7f5f0); border-radius:12px; }
.rate-box label{ margin:0; }
.rate-box input{ font-size:1.05rem; font-weight:700; }
.rate-box__use{ margin:.5rem 0 0; font-size:.82rem; color:var(--ink-soft,#3d4a5f); }
.rate-box__prev{ margin:.2rem 0 0; font-size:.78rem; color:var(--muted); }

.rate-hist{ list-style:none; margin:.3rem 0 .6rem; padding:0; display:grid; gap:.3rem; }
.rate-hist li{
  display:flex; align-items:baseline; gap:.6rem; flex-wrap:wrap;
  padding-block:.4rem; border-block-start:1px solid var(--line-soft,#f0ede6); font-size:.84rem;
}
.rate-hist li:first-child{ border-block-start:0; }
.rate-hist__kind{
  font-weight:700; font-size:.75rem; padding:.1rem .55rem; border-radius:999px;
  background:var(--line-soft,#f0ede6); color:var(--ink-soft,#3d4a5f);
}
.rate-hist__rate{ font-weight:700; }
.rate-hist__from{ color:var(--muted); }
.rate-hist__n{ color:var(--muted); font-size:.78rem; }
.rate-hist time{ margin-inline-start:auto; color:var(--muted); font-size:.78rem; }

.rate-warn{
  margin-block-end:1rem; padding:.9rem 1.1rem;
  background:var(--danger-bg,#fbeaea); border:1px solid rgba(207,59,59,.35);
  border-radius:14px;
}
.rate-warn h2{ margin:0 0 .5rem; font-size:1rem; color:var(--danger,#cf3b3b); }
.rate-warn p{ margin:0 0 .3rem; font-size:.88rem; }

.rate-diff{ list-style:none; margin:0; padding:0; display:grid; gap:.3rem; }
.rate-diff li{
  display:flex; align-items:baseline; gap:.6rem; flex-wrap:wrap;
  padding-block:.45rem; border-block-start:1px solid var(--line-soft,#f0ede6);
}
.rate-diff li:first-child{ border-block-start:0; }
.rate-diff li > span:first-child{ inline-size:9rem; color:var(--muted); font-size:.85rem; }
.rate-diff__arrow{ color:var(--muted); }
.rate-diff .is-new{ color:var(--primary,#173F8A); }

.rate-effect{ margin:0 0 .6rem; font-size:.9rem; line-height:2; }
.rate-effect .is-up{ color:var(--danger,#cf3b3b); font-weight:600; }
.rate-effect .is-down{ color:var(--ok,#12876f); font-weight:600; }

.rate-sample{ list-style:none; margin:0; padding:0; display:grid; gap:.3rem; }
.rate-sample li{
  display:flex; align-items:baseline; gap:.6rem; flex-wrap:wrap;
  padding-block:.4rem; border-block-start:1px solid var(--line-soft,#f0ede6); font-size:.85rem;
}
.rate-sample a{ font-weight:600; text-decoration:none; flex:1 1 10rem; }
.rate-sample__from{ color:var(--muted); text-decoration:line-through; }
.rate-sample__arrow{ color:var(--muted); }
.rate-sample__to.is-up{ color:var(--danger,#cf3b3b); font-weight:700; }
.rate-sample__to.is-down{ color:var(--ok,#12876f); font-weight:700; }

.rate-apply{
  display:flex; gap:.6rem; align-items:center; flex-wrap:wrap;
  margin-block-start:1rem; padding:1rem; background:var(--card,#fff);
  border:1px solid var(--line-soft,#f0ede6); border-radius:14px;
}
.rate-apply .btn--wide{ flex:1 1 18rem; }

/* =====================================================================
   GROWTH  (/admin/growth)

   Three groups in the order a shopkeeper thinks: bring people in, make the
   basket bigger, bring them back. Every row says whether its thing is ON.
   ===================================================================== */
.gsec{ margin-block-end:1.3rem; }
.gsec__h{
  margin:0 0 .5rem; font-size:.92rem; font-weight:800; color:var(--ink-soft,#3d4a5f);
}
.gcards{
  list-style:none; margin:0; padding:.25rem; background:var(--card,#fff);
  border:1px solid var(--line-soft,#f0ede6); border-radius:14px;
  box-shadow:var(--shadow-sm,0 1px 2px rgba(16,24,40,.06));
}
.gcard{
  display:flex; align-items:center; gap:.7rem; flex-wrap:wrap;
  padding:.75rem .7rem; border-radius:10px;
  border-block-start:1px solid var(--line-soft,#f0ede6);
}
.gcard:first-child{ border-block-start:0; }
.gcard__dot{
  inline-size:.55rem; block-size:.55rem; border-radius:50%; flex:0 0 auto;
  background:var(--line,#e4e9ee);
}
.gcard.is-on .gcard__dot{ background:var(--ok,#12876f); }
.gcard__main{ display:grid; gap:.15rem; min-inline-size:0; flex:1 1 18rem; }
.gcard__title{ font-size:.93rem; font-weight:700; }
.gcard__desc{ font-size:.8rem; color:var(--muted); line-height:1.8; }
.gcard__state{
  font-size:.76rem; font-weight:700; padding:.2rem .65rem; border-radius:999px; white-space:nowrap;
  background:var(--line-soft,#f0ede6); color:var(--muted);
}
.gcard.is-on .gcard__state{ background:var(--ok-bg,#e3f5f0); color:var(--ok,#12876f); }

.gshare{ display:flex; gap:.5rem; flex-wrap:wrap; margin-block:.7rem; }
.gshare__one{
  display:inline-flex; align-items:center; gap:.3rem; text-decoration:none;
  padding:.45rem 1rem; border-radius:999px; font-size:.85rem; font-weight:700;
  background:var(--line-soft,#f0ede6); color:var(--ink-soft,#3d4a5f);
}
.gshare__one:hover{ background:var(--primary-050,#e9effa); color:var(--primary,#173F8A); }
.gshare__one--wa{ background:#e7f7ec; color:#137a3a; }
.gshare__one--tg{ background:#e7f1fb; color:#1c6fb8; }
.feed-scope{ margin-block-start:1rem; }

/* =====================================================================
   DISCOUNTS  (/admin/discounts)

   The drawer starts from the CAMPAIGN, not from «نوع تخفیف؟».
   ===================================================================== */
.goals{ display:grid; gap:.5rem; margin-block:.6rem 1rem; }
@media (min-width:480px){ .goals{ grid-template-columns:1fr 1fr; } }
.goal{
  display:grid; gap:.15rem; text-align:start; cursor:pointer; font:inherit;
  padding:.8rem .9rem; border:1px solid var(--line,#e4e9ee); border-radius:12px;
  background:var(--card,#fff);
}
.goal:hover{ border-color:var(--primary,#173F8A); background:#f7f9ff; }
.goal__ic{ font-size:1.2rem; }
.goal b{ font-size:.9rem; }
.goal small{ font-size:.76rem; color:var(--muted); line-height:1.7; }

.dcode{ display:flex; gap:.4rem; align-items:center; }
.dcode input{ flex:1 1 auto; }
.dprev{
  margin-block:.2rem 1rem; padding:.6rem .8rem; font-size:.85rem; line-height:1.9;
  background:var(--primary-050,#e9effa); border-radius:10px;
}
.dprev[hidden]{ display:none!important; }

.dlist{
  margin-block:.2rem 1rem; background:var(--card,#fff);
  border:1px solid var(--line-soft,#f0ede6); border-radius:14px;
  box-shadow:var(--shadow-sm,0 1px 2px rgba(16,24,40,.06));
}
.dlist__head,
.dlist__row{
  display:grid; align-items:center; gap:.4rem .7rem;
  grid-template-columns:minmax(0,1.2fr) minmax(0,1fr) 8rem 9rem 7rem auto;
  grid-template-areas:'code value used when state act';
  padding:.6rem .85rem;
}
.dlist__head{
  background:var(--line-soft,#f0ede6); color:var(--ink-soft,#3d4a5f);
  font-size:.77rem; font-weight:700; border-radius:13px 13px 0 0;
}
.dlist__rows{ list-style:none; margin:0; padding:0; }
.dlist__row{ border-block-start:1px solid var(--line-soft,#f0ede6); }
.dlist__row:hover{ background:#fbfaf7; }
.dc-code{ grid-area:code; display:grid; gap:.15rem; min-inline-size:0; }
.dc-code code{
  font-size:.86rem; font-weight:700; background:var(--bg,#f7f5f0);
  padding:.1rem .45rem; border-radius:6px; justify-self:start;
}
.dc-code small{ font-size:.76rem; color:var(--muted); }
.dc-value{ grid-area:value; display:grid; gap:.1rem; font-size:.86rem; }
.dc-value small{ font-size:.74rem; color:var(--muted); }
.dc-used{ grid-area:used; font-size:.82rem; display:grid; gap:.1rem; }
.dc-used small{ font-size:.74rem; color:var(--muted); }
.dc-when{ grid-area:when; font-size:.82rem; color:var(--ink-soft,#3d4a5f); }
.dc-state{ grid-area:state; }
.dc-act{ grid-area:act; display:flex; align-items:center; gap:.35rem; justify-content:flex-end; }
.pill--open{ background:var(--warn-bg,#fbf1df); color:var(--warn,#b5730a); }

@media (max-width:900px){
  .dlist__head{ display:none; }
  .dlist__row{
    grid-template-columns:minmax(0,1fr) auto;
    grid-template-areas:
      'code  state'
      'value value'
      'used  when'
      'act   act';
    gap:.35rem .6rem; padding:.7rem;
  }
  .dc-act{ justify-content:flex-start; }
}

/* =====================================================================
   AUTOMATED MESSAGES  (/admin/settings/messages)
   ===================================================================== */
.msgs-form{ display:flex; flex-direction:column; gap:1rem; margin-block:1rem; }
.msg{ display:flex; flex-direction:column; gap:.8rem; }
.msg__head{ display:flex; align-items:flex-start; gap:.9rem; }
.msg__title h2{ margin:0 0 .2rem; font-size:1.05rem; }
.msg__title p{ margin:0; color:var(--muted); font-size:.88rem; line-height:1.7; }
.msg__opt{
  display:flex; align-items:center; gap:.7rem; flex-wrap:wrap; font-size:.9rem;
  background:var(--bg,#f7f5f0); border:1px solid var(--line-soft,#f0ede6);
  border-radius:10px; padding:.6rem .8rem; margin:0;
}
.msg__opt input{ inline-size:6rem; text-align:center; }
.msg__opt .hint{ margin:0; }
/* What turning it on actually does, in words. */
.msg__effect{
  margin:0; padding:.5rem .75rem; font-size:.85rem; font-weight:600;
  background:var(--ok-bg,#e3f5f0); color:var(--ok,#12876f); border-radius:9px;
}
.msg__preview{
  margin:0; color:var(--ink-soft,#3d4a5f); font-size:.86rem; line-height:1.9;
  background:var(--primary-050,#e9effa); border-radius:9px; padding:.5rem .75rem;
}
.msg-note{ margin-block-start:1rem; line-height:1.9; }
.sms-state{
  margin-block:0 1rem; padding:.6rem .85rem; font-size:.86rem; border-radius:10px;
  background:var(--line-soft,#f0ede6); color:var(--ink-soft,#3d4a5f);
}
.sms-state.is-empty{ background:var(--danger-bg,#fbeaea); color:var(--danger,#cf3b3b); font-weight:600; }
.sms-state a{ margin-inline-start:.4rem; font-weight:700; }

/* the toggle switch, shared by the message cards */
.switch{ flex:none; position:relative; display:inline-block; inline-size:3rem; block-size:1.7rem; cursor:pointer; }
.switch input{ position:absolute; opacity:0; inline-size:0; block-size:0; }
.switch__track{ position:absolute; inset:0; background:#d1d5db; border-radius:99px; transition:.15s; }
.switch__track::before{
  content:""; position:absolute; inset-block:.2rem; inset-inline-start:.2rem;
  inline-size:1.3rem; block-size:1.3rem; background:#fff; border-radius:50%;
  transition:.15s; box-shadow:0 1px 3px rgba(0,0,0,.2);
}
.switch input:checked + .switch__track{ background:var(--primary,#173F8A); }
.switch input:checked + .switch__track::before{ inset-inline-start:calc(100% - 1.5rem); }
.switch input:focus-visible + .switch__track{ outline:2px solid var(--primary,#173F8A); outline-offset:2px; }

/* =====================================================================
   ANNOUNCEMENT + NEWSLETTER  (/admin/settings/engage)

   Both are one line of text a visitor reads, so both get a preview of the
   real thing rather than a description of it.
   ===================================================================== */
.ann-presets{ display:flex; gap:.4rem; flex-wrap:wrap; margin-block:.6rem; }
.ann-preset{
  cursor:pointer; font:inherit; font-size:.82rem; font-weight:600;
  padding:.4rem .8rem; border-radius:999px;
  border:1px solid var(--line,#e4e9ee); background:var(--card,#fff); color:var(--ink-soft,#3d4a5f);
}
.ann-preset:hover{ border-color:var(--primary,#173F8A); color:var(--primary,#173F8A); background:#f7f9ff; }
.prev-label{ display:block; font-size:.78rem; color:var(--muted); margin-block:.8rem .3rem; }
.ann-prev{
  padding:.55rem .9rem; text-align:center; font-size:.85rem; font-weight:600;
  background:var(--navy,#12233F); color:#fff; border-radius:10px;
}
.ann-prev.is-empty{ background:var(--line-soft,#f0ede6); color:var(--muted); font-weight:400; }
.nl-prev{
  display:flex; align-items:center; gap:1rem; flex-wrap:wrap;
  padding:1rem; border-radius:12px; background:var(--bg,#f7f5f0);
  border:1px solid var(--line-soft,#f0ede6);
}
.nl-prev__copy{ display:grid; gap:.2rem; flex:1 1 14rem; }
.nl-prev__copy b{ font-size:.95rem; }
.nl-prev__copy span{ font-size:.82rem; color:var(--muted); }
.nl-prev__form{ display:flex; gap:.4rem; align-items:center; }
.nl-prev__input{
  padding:.45rem .8rem; border-radius:9px; background:#fff;
  border:1px solid var(--line,#e4e9ee); color:var(--muted); font-size:.82rem;
}
.nl-prev__btn{
  padding:.45rem 1rem; border-radius:9px; font-size:.82rem; font-weight:700;
  background:var(--primary,#173F8A); color:#fff;
}

/* =======================================================================
   اطلاعات فروشگاه · ورود و امنیت · ارسال · دامنه            (2026-09-21)
   Four settings screens rebuilt around the same idea: the state first, the
   fields second, and the technical half folded away.
   ===================================================================== */

/* ---- two fields side by side, one under the other on a phone --------- */
.grid2{ display:grid; grid-template-columns:1fr 1fr; gap:0 1rem; }
@media (max-width:640px){ .grid2{ grid-template-columns:1fr; } }

/* A long form needs its save button reachable without scrolling back. */
.form-actions--sticky{
  position:sticky; inset-block-end:0; z-index:5;
  margin-block-start:1rem; padding:.7rem 0;
  background:linear-gradient(to top, var(--bg,#F7F5F0) 72%, rgba(247,245,240,0));
}

/* =====================================================  اطلاعات فروشگاه */
.idprog{ display:grid; gap:.6rem; }
.idprog__bar{
  block-size:9px; border-radius:999px; background:var(--line-soft,#eceff3); overflow:hidden;
}
.idprog__bar > span{
  display:block; block-size:100%; border-radius:999px;
  background:linear-gradient(90deg,var(--primary,#173F8A),var(--accent,#21B79C));
  transition:inline-size .4s ease;
}
.idprog__txt{ display:flex; gap:.5rem; flex-wrap:wrap; align-items:baseline; font-size:.88rem; }
.idprog__txt b{ font-size:1rem; }
.idprog__txt span{ color:#5b6676; }
.idprog__txt a{ color:var(--primary,#173F8A); font-weight:700; }
.idprog__list{
  list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:.35rem .8rem;
  font-size:.8rem; color:#6b7684;
}
.idprog__list .is-done{ color:var(--ok,#12876f); font-weight:600; }

/* The one-line answer to «این متن کجا نشان داده می‌شود؟». */
.gprev{
  display:grid; gap:.15rem; margin-block-start:.4rem; padding:.8rem .9rem;
  border:1px solid var(--line,#e4e9ee); border-radius:12px; background:#fff;
}
.gprev__cap{ font-size:.72rem; color:#8a93a0; }
.gprev__url{ font-size:.78rem; color:#3b7a3b; }
.gprev__title{
  font-size:1.05rem; color:#1a0dab; font-weight:600;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.gprev__desc{
  font-size:.83rem; color:#4d5156; line-height:1.7;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}

/* Social: the merchant types a username, we show the address around it. */
.soclist{ list-style:none; margin:0; padding:0; display:grid; gap:.6rem; }
.socrow{ display:grid; grid-template-columns:6.5rem 1fr; align-items:center; gap:.6rem; }
.socrow__name{ font-size:.88rem; font-weight:700; }
/* The box reads as ONE address — instagram.com/yourshop — so it runs
   left-to-right inside an otherwise RTL page; otherwise the host lands to
   the right of the username and the whole thing reads backwards. */
.socrow__field{
  direction:ltr;
  display:flex; align-items:stretch; border:1px solid var(--line,#c9d2dd);
  border-radius:10px; overflow:hidden; background:#fff;
}
.socrow__pre{
  display:flex; align-items:center; padding:0 .55rem; font-size:.8rem;
  color:#6b7684; background:var(--bg-soft,#f3f4f6); border-inline-end:1px solid var(--line,#e4e9ee);
}
.socrow__field input{
  border:0 !important; border-radius:0 !important; min-inline-size:0; flex:1;
  text-align:left;
}
.socrow__field input:focus{ outline:none; box-shadow:none; }
.socrow__field:focus-within{ border-color:var(--primary,#173F8A); }
@media (max-width:520px){
  .socrow{ grid-template-columns:1fr; gap:.25rem; }
}

.checklist-inline__fix{
  display:inline-block; margin-inline-start:.4rem; font-size:.78rem; font-weight:700;
  color:var(--primary,#173F8A);
}

/* KYC as three numbered steps instead of one long form. */
.kyc__why{
  border:1px solid var(--line,#e4e9ee); border-radius:12px;
  background:var(--bg-soft,#f9fafb); padding:.8rem .9rem; margin-block:.6rem 1rem;
}
.kyc__why b{ font-size:.9rem; }
.kstep{ display:flex; gap:.75rem; padding-block:.9rem; border-block-start:1px solid var(--line-soft,#eceff3); }
.kstep:first-of-type{ border-block-start:0; padding-block-start:.2rem; }
.kstep__n{
  flex:none; inline-size:1.9rem; block-size:1.9rem; border-radius:50%;
  display:flex; align-items:center; justify-content:center; font-weight:800; font-size:.85rem;
  background:var(--primary,#173F8A); color:#fff;
}
.kstep__body{ flex:1; min-inline-size:0; }
.kstep__body > b{ display:block; font-size:.95rem; margin-block-end:.5rem; }
.kyc__kind{ display:flex; gap:.6rem; flex-wrap:wrap; }
.kyc__kind .chooser span small{ display:block; font-weight:400; font-size:.76rem; color:#6b7684; }

/* =======================================================  ورود و امنیت */
.pw{ position:relative; display:block; }
.pw input{ padding-inline-end:2.6rem !important; }
.pw__eye{
  position:absolute; inset-inline-end:.35rem; inset-block-start:50%; transform:translateY(-50%);
  inline-size:2rem; block-size:2rem; padding:0; border:0; border-radius:8px; cursor:pointer;
  background:transparent; color:#7b8492;
  display:flex; align-items:center; justify-content:center;
}
.pw__eye svg{ inline-size:1.15rem; block-size:1.15rem; }
.pw__eye:hover{ background:var(--bg-soft,#f3f4f6); color:var(--ink,#12233F); }
.pw__eye.is-on{ color:var(--primary,#173F8A); }

.pwmeter{ display:flex; align-items:center; gap:.5rem; margin-block-start:.4rem; }
.pwmeter__bar{
  flex:1; block-size:6px; border-radius:999px; background:var(--line-soft,#eceff3); overflow:hidden;
}
.pwmeter__bar i{ display:block; block-size:100%; inline-size:0; transition:inline-size .2s ease, background .2s ease; }
.pwmeter__label{ font-size:.78rem; font-weight:700; }
.pwmeter.is-weak   .pwmeter__bar i{ background:var(--danger,#cf3b3b); }
.pwmeter.is-weak   .pwmeter__label{ color:var(--danger,#cf3b3b); }
.pwmeter.is-fair   .pwmeter__bar i{ background:var(--warn,#b5730a); }
.pwmeter.is-fair   .pwmeter__label{ color:var(--warn,#b5730a); }
.pwmeter.is-strong .pwmeter__bar i{ background:var(--ok,#12876f); }
.pwmeter.is-strong .pwmeter__label{ color:var(--ok,#12876f); }

.sec-target{ font-size:.88rem; margin-block:.4rem; }
.sec-target .hint{ display:inline; }
.sec-toggle{
  display:flex; align-items:center; gap:.8rem; flex-wrap:wrap;
  margin-block-start:.8rem; padding-block-start:.8rem; border-block-start:1px solid var(--line-soft,#eceff3);
}
.sec-toggle__state{ font-size:.88rem; }
.sec-toggle__state .ok{ color:var(--ok,#12876f); }
.sec-toggle__state .muted{ color:#6b7684; }

.devlist{ list-style:none; margin:.4rem 0 .8rem; padding:0; display:grid; gap:.5rem; }
.devlist__row{
  display:grid; grid-template-columns:1fr auto auto; gap:.3rem .8rem; align-items:center;
  padding:.65rem .8rem; border:1px solid var(--line,#e4e9ee); border-radius:12px; background:#fff;
}
.devlist__row.is-me{ border-color:var(--accent,#21B79C); background:#f4fbf9; }
.devlist__name{ font-weight:700; font-size:.9rem; display:flex; align-items:center; gap:.4rem; flex-wrap:wrap; }
.devlist__when, .devlist__since{ font-size:.78rem; color:#6b7684; white-space:nowrap; }
@media (max-width:600px){
  .devlist__row{ grid-template-columns:1fr; }
  .devlist__when, .devlist__since{ white-space:normal; }
}

/* ============================================================== ارسال */
.shiplist{ list-style:none; margin:0 0 .9rem; padding:0; display:grid; gap:.55rem; }
.shiprow{
  display:grid; grid-template-columns:auto 1fr auto auto auto; align-items:center; gap:.6rem;
  padding:.7rem .85rem; border:1px solid var(--line,#e4e9ee); border-radius:12px; background:#fff;
}
.shiprow__dot{
  flex:none; inline-size:.6rem; block-size:.6rem; border-radius:50%;
  background:var(--line,#c9d2dd);
}
.shiprow.is-on .shiprow__dot{ background:var(--ok,#12876f); }
.shiprow__main{ min-inline-size:0; }
.shiprow__name{ display:block; font-weight:700; font-size:.92rem; }
.shiprow__where{
  display:block; font-size:.78rem; color:#6b7684;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.shiprow__kind{
  font-size:.74rem; font-weight:700; padding:.16rem .5rem; border-radius:999px; white-space:nowrap;
  background:var(--bg-soft,#f3f4f6); color:#5b6676;
}
.shiprow__kind--free{ background:var(--ok-bg,#e3f5f0); color:var(--ok,#12876f); }
.shiprow__kind--flat{ background:#e8eefb; color:var(--primary,#173F8A); }
.shiprow__kind--weight{ background:var(--warn-bg,#fbf1df); color:var(--warn,#b5730a); }
.shiprow__kind--pickup{ background:#efe9fb; color:#5b3fb0; }
.shiprow__fee{ font-size:.85rem; font-weight:700; white-space:nowrap; }
.shiprow:not(.is-on){ opacity:.62; }
@media (max-width:640px){
  .shiprow{ grid-template-columns:auto 1fr auto; row-gap:.35rem; }
  .shiprow__kind, .shiprow__fee{ grid-column:2 / -1; justify-self:start; }
}

/* Thirty-one provinces is a list you search, not one you scroll. */
.provpick{ margin-block:.5rem; }
.provpick__find{ margin-block-end:.4rem; }
.provpick__acts{ display:flex; gap:.5rem; flex-wrap:wrap; margin-block-end:.5rem; }
.provpick__box{
  max-block-size:14rem; overflow:auto; padding:.5rem .6rem;
  border:1px solid var(--line,#e4e9ee); border-radius:12px; background:var(--bg-soft,#f9fafb);
  display:grid; grid-template-columns:repeat(auto-fill,minmax(8.5rem,1fr)); gap:.2rem .6rem;
}
.provpick__count{ display:block; margin-block-start:.4rem; font-size:.8rem; font-weight:700; color:var(--primary,#173F8A); }

/* ============================================================== دامنه */
.dom-card{ display:grid; gap:.7rem; }
.dom-card__head{ display:flex; align-items:center; justify-content:space-between; gap:.8rem; flex-wrap:wrap; }
.dom-card__kind{ display:block; font-size:.78rem; color:#6b7684; }
.dom-card__host{ display:block; font-size:1.08rem; font-weight:800; }
.dom-card__host--none{ color:#8a93a0; font-weight:600; }

.dom-block{
  border:1px solid var(--warn,#e2b765); border-inline-start-width:4px; border-radius:12px;
  background:var(--warn-bg,#fbf1df); padding:.85rem .95rem; display:grid; gap:.45rem; justify-items:start;
}
.dom-block b{ font-size:.92rem; }
.dom-block p{ margin:0; font-size:.84rem; color:#6b5a33; line-height:1.9; }

.dom-add{ display:grid; gap:.6rem; justify-items:start; }
.dom-add label{ inline-size:min(22rem,100%); }

.dom-steps{ list-style:none; margin:0; padding:0; display:grid; gap:.2rem; counter-reset:none; }
.dom-step{ display:flex; gap:.75rem; padding-block:.85rem; border-block-start:1px solid var(--line-soft,#eceff3); }
.dom-step:first-child{ border-block-start:0; }
.dom-step__n{
  flex:none; inline-size:1.9rem; block-size:1.9rem; border-radius:50%;
  display:flex; align-items:center; justify-content:center; font-weight:800; font-size:.85rem;
  background:var(--bg-soft,#f3f4f6); color:#6b7684;
}
.dom-step.is-now  .dom-step__n{ background:var(--primary,#173F8A); color:#fff; }
.dom-step.is-done .dom-step__n{ background:var(--ok-bg,#e3f5f0); color:var(--ok,#12876f); }
.dom-step > div{ flex:1; min-inline-size:0; }
.dom-step b{ display:block; font-size:.92rem; margin-block-end:.3rem; }
.dom-dns code{ font-size:.82rem; }
.dom-help{ margin-block-start:.5rem; }
.dom-help > summary{ cursor:pointer; font-weight:700; font-size:.84rem; color:var(--primary,#173F8A); }

.dom-result{
  border-radius:12px; padding:.85rem .95rem; display:grid; gap:.35rem;
  border:1px solid var(--line,#e4e9ee); background:var(--bg-soft,#f9fafb);
}
.dom-result.is-ok{ border-color:var(--ok,#12876f); background:var(--ok-bg,#e3f5f0); }
.dom-result.is-bad{ border-color:var(--danger,#cf3b3b); background:var(--danger-bg,#fbeaea); }
.dom-result p{ margin:0; font-size:.85rem; line-height:1.9; }
.dom-records{ list-style:none; margin:.3rem 0 0; padding:0; display:grid; gap:.25rem; font-size:.8rem; }
.dom-records li{ display:flex; gap:.6rem; align-items:baseline; }
.dom-records li > span:first-child{ inline-size:3.5rem; flex:none; font-weight:700; }

/* =======================================================================
   محتوا: صفحه‌ها، مطالب، فرم‌ساز، پرسش‌ها، آدرس‌های قدیمی   (2026-09-21)
   ===================================================================== */

/* ---- «از کدام قالب شروع کنیم؟» --------------------------------------- */
.tplgrid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(11rem,1fr));
  gap:.6rem; margin-block:.3rem 1rem;
}
.tpl{ margin:0; cursor:pointer; }
.tpl input{ position:absolute; opacity:0; inline-size:1px; block-size:1px; }
.tpl__box{
  display:block; block-size:100%; padding:.8rem .9rem; border:1px solid var(--line,#e4e9ee);
  border-radius:12px; background:var(--card,#fff); transition:border-color .15s ease, background .15s ease;
}
.tpl__box b{ display:block; font-size:.92rem; }
.tpl__box small{ display:block; margin-block-start:.2rem; font-size:.78rem; color:#6b7684; line-height:1.7; }
.tpl:hover .tpl__box{ border-color:var(--primary,#173F8A); }
.tpl input:focus-visible + .tpl__box{ outline:2px solid var(--primary,#173F8A); outline-offset:2px; }
.tpl:has(input:checked) .tpl__box{
  border-color:var(--primary,#173F8A); background:var(--primary-050,#eef3fc);
  box-shadow:inset 0 0 0 1px var(--primary,#173F8A);
}

/* A chooser row whose label carries an explanation needs to top-align. */
.chooser:has(small){ align-items:flex-start; }
.chooser span small{ display:block; font-weight:400; font-size:.78rem; color:#6b7684; line-height:1.8; }

/* A standalone image preview (logo, cover, banner). */
.logo-box{
  display:inline-flex; align-items:center; justify-content:center; padding:.7rem 1rem;
  background:#fff; border:1px solid var(--line,#e4e9ee); border-radius:12px; margin-block-end:1rem;
}

/* ---- فرم‌ساز ---------------------------------------------------------- */
.fb-cols{ display:grid; grid-template-columns:1fr 20rem; gap:1rem; align-items:start; }
@media (max-width:900px){ .fb-cols{ grid-template-columns:1fr; } }

.fb-field__ic{
  flex:none; inline-size:2rem; block-size:2rem; border-radius:8px;
  display:flex; align-items:center; justify-content:center; font-size:.85rem; font-weight:700;
  background:var(--bg-soft,#f3f4f6); color:#5b6676;
}
.fb-field__type{ font-size:.78rem; color:#6b7684; display:block; }
.fb-field__info{ flex:1; }

.fbtypes{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(6.5rem,1fr));
  gap:.4rem; margin-block-end:.9rem;
}
.fbtype{ margin:0; cursor:pointer; }
.fbtype input{ position:absolute; opacity:0; inline-size:1px; block-size:1px; }
.fbtype__box{
  display:flex; align-items:center; gap:.4rem; padding:.5rem .6rem; font-size:.82rem;
  border:1px solid var(--line,#e4e9ee); border-radius:10px; background:var(--card,#fff);
}
.fbtype__ic{
  flex:none; inline-size:1.5rem; block-size:1.5rem; border-radius:6px; font-size:.75rem; font-weight:700;
  display:flex; align-items:center; justify-content:center; background:var(--bg-soft,#f3f4f6); color:#5b6676;
}
.fbtype:hover .fbtype__box{ border-color:var(--primary,#173F8A); }
.fbtype:has(input:checked) .fbtype__box{
  border-color:var(--primary,#173F8A); background:var(--primary-050,#eef3fc); color:var(--primary,#173F8A);
}
.fbtype:has(input:checked) .fbtype__ic{ background:var(--primary,#173F8A); color:#fff; }

/* ---- پرسش‌های متداول -------------------------------------------------- */
.faq-item__bar{ display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; }
.faq-item__num{
  flex:none; inline-size:1.7rem; block-size:1.7rem; border-radius:50%; font-size:.78rem; font-weight:800;
  display:flex; align-items:center; justify-content:center; background:var(--bg-soft,#f3f4f6); color:#5b6676;
}
.faq-item__head{ flex:1; min-inline-size:0; }
.faq-item__head b{ display:block; font-size:.92rem; }
.faq-item__head small{
  display:block; font-size:.79rem; color:#6b7684; margin-block-start:.15rem;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.faq-item__ops{ display:flex; gap:.3rem; flex-wrap:wrap; }
.faq-item__edit{ margin-block-start:.6rem; border-block-start:1px solid var(--line-soft,#eceff3); padding-block-start:.6rem; }
.faq-item__edit > summary{ cursor:pointer; font-size:.85rem; font-weight:700; color:var(--primary,#173F8A); }
.faq-item.is-off{ opacity:.6; }

/* ---- آدرس‌های قدیمی ---------------------------------------------------- */
.rd-sum{ display:flex; gap:1.4rem; flex-wrap:wrap; font-size:.88rem; color:#5b6676; }
.rd-sum b{ font-size:1.05rem; color:var(--ink,#12233F); }
.rd-kind{ border:0; padding:0; margin:0 0 .9rem; }
.rd-kind > legend{ font-weight:700; font-size:.9rem; padding:0; margin-block-end:.5rem; }
.rd-kind .chooser{ margin-block-end:.4rem; }

/* ---- شمارندهٔ طول عنوان و توضیح سئو ------------------------------------ */
.seocount{ display:block; margin-block-start:.3rem; font-size:.78rem; color:#6b7684; }
.seocount.is-near{ color:var(--warn,#b5730a); }
.seocount.is-over{ color:var(--danger,#cf3b3b); font-weight:700; }

/* ---- منو: مقصد به‌جای مسیر --------------------------------------------- */
.mb-dest{ inline-size:100%; }
.mb-sub__dest{ display:block; flex:1; min-inline-size:0; }

/* A card heading that is also a step in a sequence. */
.stepno{
  display:inline-flex; align-items:center; justify-content:center;
  inline-size:1.5rem; block-size:1.5rem; margin-inline-end:.35rem; border-radius:50%;
  font-size:.78rem; font-weight:800; background:var(--primary,#173F8A); color:#fff;
}
.dom-step.is-todo .dom-step__n{ background:var(--bg-soft,#f3f4f6); color:#9aa3af; }

/* =======================================================================
   دفترچه فعالیت · تنظیمات · پشتیبانی                        (2026-09-21)
   ===================================================================== */

/* ---- دفترچه فعالیت ---------------------------------------------------- */
.audit__filters{ display:grid; gap:.7rem; }
.audit__kinds{ display:flex; flex-wrap:wrap; gap:.4rem; }
.kindchip{ margin:0; cursor:pointer; }
.kindchip input{ position:absolute; opacity:0; inline-size:1px; block-size:1px; }
.kindchip span{
  display:block; padding:.34rem .8rem; border:1px solid var(--line,#e4e9ee); border-radius:999px;
  font-size:.83rem; background:var(--card,#fff); color:#5b6676;
}
.kindchip:hover span{ border-color:var(--primary,#173F8A); }
.kindchip:has(input:checked) span{
  background:var(--primary,#173F8A); border-color:var(--primary,#173F8A); color:#fff; font-weight:700;
}
.audit__search{ display:flex; gap:.5rem; flex-wrap:wrap; }
.audit__search input{ flex:1 1 16rem; min-inline-size:0; }

.audit-list{ list-style:none; margin:.9rem 0 .8rem; padding:0; display:grid; gap:.45rem; }
.audit-row{
  border:1px solid var(--line,#e4e9ee); border-radius:12px; background:var(--card,#fff);
  padding:.6rem .8rem;
}
.audit-row__bar{ display:grid; grid-template-columns:9rem 1fr auto; gap:.3rem .9rem; align-items:center; }
.audit-row__when{ font-size:.79rem; color:#6b7684; white-space:nowrap; }
.audit-row__main{ min-inline-size:0; }
.audit-row__main b{ display:block; font-size:.9rem; }
.audit-row__main small{
  display:block; font-size:.78rem; color:#6b7684;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.audit-row__who{ font-size:.82rem; color:#5b6676; white-space:nowrap; }
@media (max-width:760px){
  .audit-row__bar{ grid-template-columns:1fr; }
  .audit-row__when, .audit-row__who{ white-space:normal; }
}
.audit-row__tech{ margin-block-start:.5rem; }
.audit-row__tech > summary{ cursor:pointer; font-size:.79rem; font-weight:700; color:var(--primary,#173F8A); }
.audit-tech{ margin:.5rem 0 0; display:grid; gap:.25rem; font-size:.82rem; }
.audit-tech > div{ display:flex; gap:.6rem; align-items:baseline; }
.audit-tech dt{ inline-size:7rem; flex:none; color:#6b7684; margin:0; }
.audit-tech dd{ margin:0; min-inline-size:0; word-break:break-word; }

/* ---- تنظیمات: وضعیت روی هر کارت --------------------------------------- */
.settings-group__state{ display:block; margin-block-start:.35rem; font-size:.78rem; font-weight:700; }
.settings-group__state.is-ok{ color:var(--ok,#12876f); }
.settings-group__state.is-todo{ color:var(--warn,#b5730a); }
.setuplist{
  list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:.35rem .9rem;
  font-size:.82rem; color:#6b7684;
}
.setuplist .is-done{ color:var(--ok,#12876f); font-weight:600; }
.setuplist a{ color:var(--primary,#173F8A); font-weight:700; }

/* ---- پشتیبانی ---------------------------------------------------------- */
.tk-kind{ border:0; padding:0; margin:0 0 1rem; }
.tk-kind > legend{ font-weight:700; font-size:.9rem; padding:0; margin-block-end:.5rem; }
.tk-row__tags{ display:flex; gap:.3rem; flex-wrap:wrap; margin-block-start:.3rem; }
.thread__tags{ display:flex; gap:.4rem; align-items:center; flex-wrap:wrap; margin:.3rem 0 .9rem; font-size:.82rem; }
.tk-env{ border-inline-start:3px solid var(--line,#e4e9ee); padding-inline-start:.7rem; }

.chat__file{ display:inline-block; margin-block-start:.4rem; font-weight:600; }
.chat__img{ display:block; margin-block-start:.4rem; }
.chat__img img{ max-inline-size:220px; max-block-size:220px; border-radius:10px; display:block; }

.tk-rate{ margin-block:1rem; }
.tk-rate b{ font-size:.95rem; }
.tk-rate__row{ display:flex; gap:.4rem; flex-wrap:wrap; margin-block-start:.6rem; }

/* =======================================================================
   مشخصات دسته و گزینه‌های تنوع محصول                        (2026-09-21)
   Roles moved off the attribute: a category says what it wants, a product
   says what it varies on.
   ===================================================================== */

/* ---- مشخصات محصولات این دسته ------------------------------------------ */
.cspec__table th:nth-child(3), .cspec__table th:nth-child(4),
.cspec__flag{ text-align:center; }
.cspec__table td{ vertical-align:middle; }
.cspec__table select{ min-inline-size:11rem; }
.cspec__flag .check{ justify-content:center; margin:0; }
.cspec__acts{ white-space:nowrap; }
.cspec__acts .btn{ margin-inline-start:.3rem; }
.cspec__add{
  display:grid; gap:.7rem; margin-block-start:1rem; padding-block-start:1rem;
  border-block-start:1px solid var(--line-soft,#eceff3);
  grid-template-columns:repeat(auto-fit,minmax(13rem,1fr)); align-items:end;
}
.cspec__add .check{ align-self:center; }
.cspec__add .btn{ min-block-size:44px; }
@media (max-width:760px){
  .cspec__add{ grid-template-columns:1fr; }
  .cspec__table select{ min-inline-size:0; inline-size:100%; }
}

/* ---- گزینه‌های تنوع یک محصول ------------------------------------------- */
.vaxis__list{ list-style:none; margin:.2rem 0 1rem; padding:0; display:grid; gap:.5rem; }
.vaxis__row{
  display:flex; align-items:center; gap:.7rem; flex-wrap:wrap;
  padding:.65rem .8rem; border:1px solid var(--line,#e4e9ee); border-radius:12px;
  background:var(--card,#fff);
}
.vaxis__name{ font-weight:700; font-size:.92rem; min-inline-size:5rem; }
.vaxis__vals{ display:flex; gap:.3rem; flex-wrap:wrap; flex:1; min-inline-size:0; }
.vaxis__vals .chip{ display:inline-flex; align-items:center; gap:.3rem; }

.vaxis__pick{
  display:grid; gap:.8rem; padding-block-start:.9rem;
  border-block-start:1px solid var(--line-soft,#eceff3);
}
.vaxis__pick label{ margin:0; }
.vaxis__values{
  display:flex; flex-wrap:wrap; gap:.4rem; align-items:center;
  padding:.7rem .8rem; border:1px solid var(--line,#e4e9ee); border-radius:12px;
  background:var(--bg-soft,#f9fafb);
}
.vaxis__vlabel{ inline-size:100%; font-size:.85rem; font-weight:700; }
.vaxis__attach{
  border:1px solid var(--warn,#e2b765); border-radius:12px;
  background:var(--warn-bg,#fbf1df); padding:.7rem .8rem; align-items:flex-start;
}
.vaxis__attach span small{ display:block; font-weight:400; font-size:.79rem; color:#6b5a33; line-height:1.8; }
.shiprow__free{ display:block; font-size:.74rem; font-weight:600; color:var(--ok,#12876f); }

/* A category that takes its rules from an ancestor says so, and lists them. */
.cspec__inherit{
  border:1px solid var(--line,#e4e9ee); border-inline-start-width:4px;
  border-inline-start-color:var(--primary,#173F8A);
  border-radius:12px; background:var(--bg-soft,#f9fafb); padding:.85rem .95rem;
  display:grid; gap:.5rem; justify-items:start;
}
.cspec__inherit b{ font-size:.92rem; }
.cspec__inherit p{ margin:0; }
.cspec__inheritlist{
  list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:.35rem .9rem;
}
.cspec__inheritlist li{ font-size:.84rem; }
.cspec__inheritlist small{ display:block; font-size:.76rem; color:#6b7684; }

/* --- the beginner fold -------------------------------------------------
   A new shop meets six professional tools before it has sold anything.
   They are folded, not removed, and the fold is a checkbox so it works with
   no JavaScript at all -- the script only remembers which way it was left. */
.nav-adv:not(:checked) ~ ul .is-adv { display: none; }

.nav-adv__toggle {
  display: block;
  margin: .35rem .55rem .2rem;
  padding: .45rem .6rem;
  border-radius: .5rem;
  font-size: .82rem;
  color: #6b7684;
  cursor: pointer;
  user-select: none;
  border: 1px dashed #d9dee6;
  text-align: center;
  /* A real tap target on a phone, where this is most likely to be tried. */
  min-block-size: 2.1rem;
}
.nav-adv__toggle:hover { background: var(--bg); color: var(--ink); }
.nav-adv:not(:checked) ~ .nav-adv__toggle .nav-adv__less { display: none; }
.nav-adv:checked ~ .nav-adv__toggle .nav-adv__more { display: none; }

/* Off-screen rather than `hidden`: a display:none checkbox cannot be reached
   by keyboard, and a menu a keyboard user cannot unfold is a menu that does
   not exist for them. The focus ring is drawn on the visible label instead. */
.nav-adv {
  position: absolute;
  inline-size: 1px; block-size: 1px;
  opacity: 0; pointer-events: none;
}
.nav-adv:focus-visible ~ .nav-adv__toggle {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* =====================================================================
   Connection state, and the second tap
   ===================================================================== */
.netbar {
  position: fixed;
  inset-inline: 0;
  inset-block-start: 0;
  z-index: 200;
  padding: .55rem .9rem;
  text-align: center;
  font-size: .88rem;
  font-weight: 600;
  color: #fff;
  background: #b4321f;
  box-shadow: 0 2px 12px rgb(0 0 0 / .18);
}

/* A form mid-flight looks like one. The pointer lock is belt to the
   guard's braces -- the submit handler is what actually refuses the
   second submission, because a disabled button would not be serialised. */
form.is-sending { opacity: .65; }
form.is-sending .btn { pointer-events: none; }
form.is-sending .btn--primary::after {
  content: " …";
  letter-spacing: .1em;
}

/* Offline, nothing that writes should look inviting. */
body.is-offline .form-actions .btn--primary,
body.is-offline .btn--danger { filter: grayscale(.7); }

/* =====================================================================
   Touch targets in the panel
   =====================================================================
   «تمام کنترل‌های لمسی حداقل 44px». At the coarse-pointer level so that a
   control added next month inherits the floor rather than missing it. */
@media (pointer: coarse) {
  .btn,
  .panel__bottom a,
  .panel__bottom-more,
  .nav-group__head,
  .nav-link,
  input:not([type="checkbox"]):not([type="radio"]),
  select,
  textarea {
    min-block-size: 2.75rem;   /* 44px */
  }

  /* An icon-only control is the one most likely to be under-sized, and the
     hardest to hit: it has no label padding to grow into. */
  .iconbtn,
  .drawer__close,
  .panel__close,
  .table .btn--small { min-inline-size: 2.75rem; min-block-size: 2.75rem; }

  /* A tick box you have to aim at is a tick box people get wrong. The box
     keeps its size; the LABEL grows around it. */
  label.check,
  .inline-label { min-block-size: 2.75rem; align-items: center; }
}

/* =====================================================================
   Domain — choosing how to connect
   =====================================================================
   Two ways in, and the difference between them is who does the work. The
   simpler one is first and preselected, because it is the one most
   merchants should take; the other is there for the merchant who runs
   their own mail and has a reason to keep the zone. */
.dom-mode {
  border: 0;
  margin: 1rem 0 .25rem;
  padding: 0;
  display: grid;
  gap: .6rem;
}
.dom-mode > legend {
  padding: 0;
  margin-block-end: .5rem;
  font-size: .9rem;
  color: var(--muted);
}

.dom-mode__opt {
  display: flex;
  gap: .7rem;
  align-items: flex-start;
  padding: .85rem 1rem;
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
  cursor: pointer;
}
.dom-mode__opt:hover { border-color: var(--primary); }
.dom-mode__opt input { margin-block-start: .2rem; flex: 0 0 auto; }
.dom-mode__opt b { display: block; margin-block-end: .2rem; }
.dom-mode__opt small {
  display: block;
  color: var(--muted);
  font-size: .85rem;
  line-height: 1.8;
}
.dom-mode__opt:has(input:checked) {
  border-color: var(--primary);
  background: rgb(23 63 138 / .04);
}

/* =====================================================================
   «خوشحالیم که برگشتید» — the number already has a shop
   =====================================================================
   Telling them is not a formality. They typed their number expecting to
   get back in, and a page headed «ساخت فروشگاه» is the wrong door — so
   the card says what it found, and offers the password first, which also
   means no SMS is spent on someone who does not need one. */
.onb__welcome {
  margin: 0 0 .35rem;
  font-size: 1.15rem;
}
.onb__welcome-note {
  margin: 0 0 1.1rem;
  color: var(--muted);
  line-height: 1.9;
  font-size: .92rem;
}
.onb__card form + form { margin-block-start: .9rem; }
.onb__other {
  margin: 1rem 0 0;
  padding-block-start: .9rem;
  border-block-start: 1px solid var(--line);
  text-align: center;
  font-size: .88rem;
}
.onb__other a { color: var(--muted); }
.onb__other a:hover { color: var(--primary); }

/* The theme currently in use, in the theme picker. */
.pack--on {
  border-color: var(--primary);
  background: rgb(23 63 138 / .04);
  cursor: default;
}
/* The active theme's button is disabled (nothing to switch to), and the
   generic disabled rule faded it to half opacity — the one card that should
   read loudest looked switched off. */
.pack--on:disabled { opacity: 1; }
.pack--on .pack__note { color: var(--ink-soft, #3d4a5f); }
.pack__badge {
  display: inline-block;
  margin-inline-start: .45rem;
  padding: .05rem .5rem;
  border-radius: 999px;
  background: var(--primary);
  color: #fff;
  font-size: .68rem;
  font-weight: 700;
  vertical-align: middle;
}

/* =====================================================================
   Radio buttons
   =====================================================================
   The blanket `input, select, textarea` rules above give every input
   `width: 100%`, `min-height: 44px` and a padding — which is right for a
   text field and absurd for a radio. The checkbox was given its own
   override long ago; the radio never was, so every radio in the panel was
   a full-width 44px circle with the label squeezed into whatever was
   left. It looked like a broken layout on a dozen screens at once.

   Same shape as the checkbox rule, round instead of square. */
input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  inline-size: 1.25rem;
  block-size: 1.25rem;
  min-inline-size: 1.25rem;   /* so a flex parent cannot shrink it away */
  min-height: 0;
  width: auto;
  padding: 0;
  margin: 0;
  flex: 0 0 auto;
  border: 1.5px solid var(--line);
  border-radius: 50%;
  background: #fff;
  cursor: pointer;
  transition: border-color .15s ease, box-shadow .15s ease;
}
input[type="radio"]:hover { border-color: var(--primary); }
input[type="radio"]:checked {
  border-color: var(--primary);
  /* The dot is the border, drawn inward — no pseudo-element, so it works
     on an <input> in every engine. */
  border-width: .4rem;
}
input[type="radio"]:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgb(23 63 138 / .2);
}
input[type="radio"]:disabled {
  opacity: .5;
  cursor: not-allowed;
}

/* A label wrapping a radio is a row, and its text gets the room. */
.dom-mode__opt > span,
label > input[type="radio"] + span { min-inline-size: 0; }

/* The way out of a connected domain.
   Quiet, because it is a correction and not a threat — but always present,
   because without it the only escape from a mistyped domain was a support
   ticket. */
.dom-detach { margin-block: .9rem 0; }
.dom-detach__btn {
  inline-size: auto;
  width: auto;
  min-height: 0;
  min-block-size: 2.4rem;
  padding: .4rem .8rem;
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: .85rem;
  cursor: pointer;
}
.dom-detach__btn:hover {
  border-color: #b4321f;
  border-style: solid;
  color: #b4321f;
  background: rgb(180 50 31 / .05);
}
.dom-detach__btn:disabled { opacity: .5; cursor: not-allowed; }


/* ---------------------------------------------------------------
   /admin/status -- the folded technical note.

   Quiet by default: it is an answer waiting for a question, not a
   warning. The marker points RIGHT-to-LEFT when closed, because the
   panel is RTL and a chevron that points the wrong way reads as a
   back button.
   --------------------------------------------------------------- */
.status-item__note { margin-block-start: .5rem; }

.status-item__note > summary {
  display: flex;
  align-items: center;
  gap: .45rem;
  min-block-size: 2.75rem;
  cursor: pointer;
  font-size: .82rem;
  color: var(--muted);
  list-style: none;
}
.status-item__note > summary::-webkit-details-marker { display: none; }

.status-item__note > summary::before {
  content: "\25C2";
  font-size: .9em;
  line-height: 1;
}
.status-item__note[open] > summary::before { content: "\25BE"; }
.status-item__note > summary:hover { color: var(--ink); }
.status-item__note > summary:focus-visible {
  outline: 2px solid var(--info);
  outline-offset: 2px;
  border-radius: 6px;
}

.status-item__note > p {
  margin: 0 0 .25rem;
  padding: .7rem .85rem;
  border-radius: var(--radius-sm);
  background: var(--line-soft);
  color: var(--ink-soft);
  font-size: .82rem;
  line-height: 2;
}


/* =====================================================================
   BREATHING ROOM, LAYOUT FIXES, AND A REAL ACCOUNT MENU   (2026-09-22)

   Everything below is a correction to something already defined above,
   so it must stay last in the file.
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. Spacing.

   The panel was laid out tight and read as cramped once the cards got
   real content in them: a heading sitting on its paragraph, cards almost
   touching, fields with no gutter between the label and the box above.
   These are not new components -- only the gaps between the existing
   ones, opened up across every screen at once so the rhythm stays the
   same from page to page.
   --------------------------------------------------------------------- */
.panel__main   { padding-block: 1.5rem; }
@media (min-width: 900px) { .panel__main { padding: 2.5rem 2.25rem; } }

.card          { padding: 1.75rem; margin-block-end: 1.5rem; }
.card > h2,
.card__head    { margin-block-end: 1.1rem; }
.card__head + .hint,
.card > h2 + .hint { margin-block-start: -.5rem; }
.card > .hint:first-of-type { margin-block-end: 1.25rem; }
.card > :last-child { margin-block-end: 0; }

@media (max-width: 599.98px) {
  .card { padding: 1.25rem 1.1rem; margin-block-end: 1.15rem; }
}

/* The page title and its one-line explanation, on every settings screen. */
.cats__head    { margin-block-end: 1.75rem; }
.cats__head h1 { margin-block-end: .4rem; }
.cats__sub     { margin: 0; line-height: 1.9; }

/* Fields: the label needs to sit closer to ITS box than to the one above. */
label          { margin-block-end: 1.5rem; }
label > span   { margin-block-end: .55rem; line-height: 1.7; }
label > .hint,
label > small.hint { display: block; margin-block-start: .5rem; line-height: 1.9; }


fieldset       { margin-block-end: 1.5rem; }
legend         { margin-block-end: .7rem; }

.alert         { padding: .9rem 1.1rem; margin-block-end: 1.25rem; line-height: 1.9; }
.hint          { line-height: 1.95; }
.form-actions  { margin-block-start: 1.5rem; gap: .75rem; }

/* A checkbox/radio row is a target, not a line of text. */
.check         { display: flex; align-items: flex-start; gap: .6rem; margin-block-end: 1rem; }
.check > span  { line-height: 1.85; }
.check > span > small { display: block; color: var(--muted); font-weight: 400; line-height: 1.85; }

/* ---------------------------------------------------------------------
   2. Upload cards: save and remove on one baseline.

   Two separate POSTs (one carries the file, the other a remove flag) so
   two forms is correct -- two stacked ROWS was not. The submit button is
   detached from its form with form="" and rejoins its sibling here.
   --------------------------------------------------------------------- */
.fileact {
  display: flex;
  align-items: center;
  gap: .75rem;
  flex-wrap: wrap;
  margin-block-start: 1.25rem;
}
.fileact form { margin: 0; }
.fileact .btn { margin: 0; }

.logo-upload input[type="file"] { max-inline-size: 100%; }

/* ---------------------------------------------------------------------
   3. فرم‌ساز: the card was being flexed into a column.

   `.fb-new` was written for an older markup where the section WAS the
   form -- one row, name box and button side by side. The card now holds
   a heading plus a template grid, and `display:flex` on the section was
   putting the heading beside the form and squeezing the templates into a
   ~200px column. It is a card; it lays out like one.
   --------------------------------------------------------------------- */
.fb-new        { display: block; }
.fb-new label  { flex: none; margin-block-end: 1.5rem; }
.fb-new .form-actions { justify-content: flex-start; }

.tplgrid {
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: .85rem;
  margin-block: .5rem 1.5rem;
}
.tpl__box { padding: 1rem 1.1rem; min-block-size: 100%; }
.tpl__box b { font-size: .95rem; line-height: 1.8; }
.tpl__box small { margin-block-start: .35rem; }

.fb-row { padding-block: 1.1rem; gap: 1rem; }
.fb-row__meta { gap: .6rem; }

/* ---------------------------------------------------------------------
   4. Wide screens: stop wasting the right half.

   `.settings-page` is capped at 680px, which is right for a column of
   text inputs and wrong for a page that is mostly a checklist beside a
   form. Only the pages that genuinely have a second thing to show get
   the extra width, and they get it as a SECOND COLUMN -- a 1200px-wide
   text input is not an improvement.
   --------------------------------------------------------------------- */
@media (min-width: 1180px) {
  .settings-page.identity {
    max-width: 1180px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 22rem;
    grid-template-areas:
      "head head"
      "main rail";
    gap: 0 2rem;
    align-items: start;
  }
  /* Exactly three children, one area each -- no auto-placement to reason
     about, and an optional alert cannot push the rail down a row. */
  .identity__head { grid-area: head; }
  .identity__main { grid-area: main; min-width: 0; }
  .settings-page.identity > .idprog {
    grid-area: rail;
    position: sticky;
    top: 1.5rem;
    margin-block-end: 0;
  }

  /* The progress card becomes a rail, so its list has to read like one. */
  .settings-page.identity .idprog__list li { padding-block: .5rem; }
  .settings-page.identity .idprog__list { margin-block-start: .75rem; }
}

/* Identity's own cards can hold two fields per row once there is room. */
@media (min-width: 760px) {
  .identity .row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.25rem; }
}

/* ---------------------------------------------------------------------
   5. کارمندان.

   A single 460px column on a 1300px screen, with the invite form and the
   people list stacked a page apart. Side by side they answer each other:
   you add someone, and the list they joined is right there.
   --------------------------------------------------------------------- */
.staff { max-width: 1180px; }
.staff > h1 { margin-block-end: .4rem; }
.staff > .hint { margin-block-end: 1.75rem; max-width: 60ch; }

@media (min-width: 1000px) {
  .staff__cols {
    display: grid;
    grid-template-columns: 24rem 1fr;
    gap: 1.5rem;
    align-items: start;
  }
  .staff__cols > .card { margin-block-end: 0; }
  .staff__cols > .card:first-child { position: sticky; top: 1.5rem; }
}

.staff-invite { display: grid; gap: 0; max-width: none; }

.staff-list { gap: 0; }
.staff-row {
  padding: 1.1rem 1.15rem;
  border-radius: 12px;
  border: 1px solid var(--line-soft);
  margin-block-end: .7rem;
  align-items: flex-start;
}
.staff-row:last-child { margin-block-end: 0; }
.staff-row__main { flex: 1 1 14rem; gap: .5rem .7rem; }
.staff-row__who { font-size: .95rem; }
.staff-row__actions { gap: .5rem; }
.staff-row select { min-height: 38px; padding-block: .3rem; }

/* The permission grid is the widest thing on the page; let it use the row. */
.staff-perms { flex-basis: 100%; margin-block-start: .7rem; }
.staff-perms > summary { display: inline-flex; }

/* ---------------------------------------------------------------------
   6. «حساب من».

   It was three unstyled links in the sidebar foot -- the same weight as
   the nav above it, with no sense that a menu had opened. It is the only
   place a person changes their own account or leaves, so it is worth
   looking like a menu: an avatar and the person's name as the trigger, a
   card that lifts off the sidebar, and «خروج» set apart in red at the
   bottom where a destructive action belongs.
   --------------------------------------------------------------------- */
.panel__acct {
  margin-block-start: .75rem;
  padding-block-start: .75rem;
  border-block-start: 1px solid var(--line-soft, #f0ede6);
  position: relative;
}

.panel__acct > summary {
  gap: .6rem;
  min-block-size: 2.9rem;
  padding: .35rem .5rem;
  border-radius: 10px;
  font-size: .88rem;
  color: var(--ink, #12233f);
  transition: background-color .12s ease;
}
.panel__acct > summary:hover { background: var(--line-soft, #f0ede6); }
.panel__acct[open] > summary { background: var(--line-soft, #f0ede6); }
.panel__acct > summary:focus-visible {
  outline: 2px solid var(--primary, #173F8A);
  outline-offset: 1px;
}

/* The avatar: the person's initial, same shape language as .brand__mark. */
.acct__mark {
  inline-size: 2rem;
  block-size: 2rem;
  flex: 0 0 auto;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--primary-050, #e9effa);
  color: var(--primary, #173F8A);
  font-weight: 800;
  font-size: .9rem;
}
.acct__who {
  display: flex;
  flex-direction: column;
  min-inline-size: 0;
  line-height: 1.35;
}
.acct__name {
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.acct__role { font-size: .74rem; font-weight: 500; color: var(--muted); }

/* The menu itself lifts off the sidebar rather than continuing it. */
.panel__acct-pop {
  gap: .15rem;
  margin-block-start: .4rem;
  padding: .45rem;
  border: 1px solid var(--line-soft, #f0ede6);
  border-radius: 12px;
  background: var(--card, #fff);
  box-shadow: var(--shadow-md, 0 10px 30px rgba(18,35,63,.09));
}
.panel__acct-pop a,
.panel__acct-pop button {
  display: flex;
  align-items: center;
  gap: .55rem;
  min-block-size: 2.6rem;
  padding: .45rem .6rem;
  inline-size: 100%;
  font-size: .86rem;
  color: var(--ink-soft, #3d4a5f);
}
.panel__acct-pop a small {
  display: block;
  font-size: .72rem;
  font-weight: 500;
  color: var(--muted);
  line-height: 1.6;
}
.panel__acct-pop a span { min-inline-size: 0; }
.panel__acct-pop svg { inline-size: 1.05rem; block-size: 1.05rem; flex: 0 0 auto; opacity: .7; }

/* Leaving is set apart, and reads as the exit it is. */
.panel__logout {
  margin: .3rem 0 0;
  padding-block-start: .35rem;
  border-block-start: 1px solid var(--line-soft, #f0ede6);
}
.panel__acct-pop .panel__logout button { color: var(--danger, #cf3b3b); }
.panel__acct-pop .panel__logout button:hover {
  background: var(--danger-bg, #fbeaea);
  color: var(--danger, #cf3b3b);
}

/* ---------------------------------------------------------------------
   7. Payment: several gateways live at once.
   --------------------------------------------------------------------- */
.gw {
  border: 1px solid var(--line-soft, #f0ede6);
  border-radius: 12px;
  padding: 1.15rem 1.15rem .4rem;
  margin-block-end: 1rem;
  background: var(--card, #fff);
  transition: border-color .15s ease, background-color .15s ease;
}
.gw--on { border-color: var(--primary, #173F8A); background: var(--primary-050, #eef3fc); }
.gw__switch { margin-block: .1rem 1.15rem; }
.gw-default { margin-block-start: .5rem; }

.shiprow__kind--def {
  background: var(--primary-050, #e9effa);
  color: var(--primary, #173F8A);
}

/* The announcement banner preview in the panel. */
.ann-img {
  border: 1px solid var(--line, #e8e4db);
  border-radius: 12px;
  overflow: hidden;
  margin-block-end: .9rem;
  background: #fff;
}
.ann-img img { display: block; inline-size: 100%; block-size: auto; max-block-size: 8rem; object-fit: cover; }
.ann-mode .pick span small { display: block; font-weight: 500; color: var(--muted); margin-block-start: .2rem; }

/* =====================================================================
   A <label> IS NOT ALWAYS A FIELD                        (2026-09-23)

   Measured, not guessed. In a `.pick-row` the first pill carried a 24px
   bottom margin and the last carried 0, so two pills side by side had
   different heights and sat on a visible stagger. The pill text was also
   rendered at a field caption's 14px muted grey with an 8.8px bottom
   margin, which `align-items:center` then centred -- so the words sat
   above the middle of their own pill. The same margin was tilting the
   menu builder's rows against their up/down/delete buttons.

   None of that is any component's doing. It is `label { margin-block-end }`
   and `label > span { font-size/color/margin }` reaching into every
   <label> that is a pill, a card, a switch or an option row rather than a
   caption sitting above an input.

   The contract, in one rule: a BARE <label> is a field and gets field
   spacing; a CLASSED <label> is a component and owns its own. Nothing to
   keep in sync, and a component added next month is right by default
   instead of right only if somebody remembered to add it to a list.
   ===================================================================== */
label[class]        { margin-block-end: 0; }
label[class] > span { margin-block-end: 0; font-size: inherit; color: inherit; }

/* The three that ARE stacked field wrappers and do want the caption look
   back. Each already owns its own gap, so only the type is restored. */
.mb-field > span,
.field > span,
.tax-field > span { font-size: .78rem; font-weight: 700; color: var(--muted); }

/* …except `.field` did NOT own its own gap, which is the whole reason the
   login form looked uneven.
   `label[class]` zeroes both the label's bottom margin and its span's, on
   the rule that a classed label is a component and a component brings its
   own spacing. `.mb-field` and `.tax-field` do. `.field` never did, so the
   only space left between a caption and its input was line-height, and the
   only space between two fields was whatever the input's own box happened
   to add — different for a bare <input> than for one wrapped in `.pw`.
   Measured on the live login page: 50px for one row, 48px for the next,
   with no margin between either.
   So the component is given its spacing, once, here. */
/* Written as `label.field`, not `.field`: the contract above is
   `label[class]`, which is one attribute plus one type — specificity
   (0,1,1). A bare `.field` is (0,1,0) and loses no matter where it sits in
   the file. Matching the shape is what makes source order decide, and
   source order is the thing a reader can actually see. */
label.field { margin-block-end: 1.15rem; }
label.field > span { margin-block-end: .45rem; }
/* An <input> is inline-block by default, so inside a block label it sits on
   a text baseline and collects a few stray pixels underneath — which is the
   other half of «۵۰ در برابر ۴۸». Not `>`: the password field's input is a
   grandchild, wrapped in `.pw` for its show/hide button. */
label.field input,
label.field select,
label.field textarea { display: block; inline-size: 100%; }
/* An explicit line-height, because the inherited one was not the same for
   every control: 27px in one row, 25.5px in the next, 30.2px in a third —
   same font, same size, same padding, three different row heights. A form
   row's height has to be a property of the control, not of whatever
   typography it happened to inherit. */
label.field input:not([type="checkbox"]):not([type="radio"]),
label.field select,
label.field textarea { line-height: 1.7; }
label.field:last-child { margin-block-end: 0; }

/* «مرا به خاطر بسپار», and every future classed label that needs its
   spacing back, belongs HERE — after the contract, not merely at the same
   specificity as it. Written higher up the file this exact rule matched,
   computed, and lost on source order: the margin was in the stylesheet and
   the row still sat against the button. */
label.login__remember {
  margin-block: 0 1.15rem;   /* the rhythm a field has */
  align-items: center;       /* one line of text beside one box */
}
label.login__remember input { margin-block-start: 0; }
/* On a phone the whole label is the tap target, and 28px is not one. */
@media (pointer: coarse) {
  label.login__remember { min-block-size: 44px; }
}
label.field > .hint { display: block; margin-block-start: .4rem; }

/* ---- radio pills ------------------------------------------------------ */
.pick-row {
  align-items: stretch;      /* one band, not a staircase */
  gap: .6rem;
  margin-block: .5rem 1.25rem;
}
.pick { align-items: center; padding-block: .6rem; }
.pick > span {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .1rem;
  font-size: .9rem;
  font-weight: 600;
  line-height: 1.7;
}
.pick > span small,
.dom-mode__opt > span small,
.msg__opt > span small,
.mo-opt > span small {
  font-weight: 500;
  font-size: .78rem;
  color: var(--muted);
  line-height: 1.65;
}
.pick.is-picked > span small { color: var(--primary); opacity: .75; }

/* ---- checkbox rows ---------------------------------------------------- */
.check              { margin-block-end: 1rem; }
.check:last-child   { margin-block-end: 0; }
.check > span       { font-size: .9rem; color: var(--ink); }
.check > span small { display: block; font-weight: 400; color: var(--muted); line-height: 1.85; }

/* ---- the upload rows that lost their gap ------------------------------ */
.logo-upload { margin-block-end: .75rem; }
.chooser     { margin-block-end: 1rem; }

/* A <summary> is a button. 23px of text is not something a thumb finds. */
.audit-row__tech > summary,
.status-item__note > summary,
.pcard--fold > summary,
details.card > summary {
  min-block-size: 2.75rem;
  display: flex;
  align-items: center;
}

/* =====================================================================
   «حساب من» as a real menu                              (2026-09-23)

   It was a <details> that pushed the sidebar's own content around when it
   opened, at the same weight as the navigation above it. A menu should
   float over what is behind it and land on top of its trigger, and it
   should close when you look away — the script in the layout does that
   half.
   ===================================================================== */
.panel__acct > summary::after {
  content: '';
  inline-size: .55rem;
  block-size: .55rem;
  margin-inline-start: auto;
  border-inline-end: 2px solid currentColor;
  border-block-end: 2px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
  opacity: .5;
  transition: transform .15s ease;
}
.panel__acct[open] > summary::after {
  transform: rotate(-135deg) translate(-2px, -2px);
}

@media (min-width: 900px) {
  /* Above the trigger, because the trigger already sits at the bottom of
     the sidebar and a menu opening downwards would leave the screen. */
  .panel__acct-pop {
    position: absolute;
    inset-block-end: calc(100% + .5rem);
    inset-inline: 0;
    z-index: 40;
    box-shadow: var(--shadow-lg);
    animation: acct-in .12s ease-out;
  }
}

@keyframes acct-in {
  from { opacity: 0; transform: translateY(.35rem); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .panel__acct-pop { animation: none; }
}

/* On a phone the sidebar IS the drawer, so the menu stays in the flow --
   floating it would put it over the nav the person just scrolled past. */
@media (max-width: 899.98px) {
  .panel__acct-pop { position: static; box-shadow: none; }
  .panel__acct-pop a,
  .panel__acct-pop button { min-block-size: 2.9rem; }
}

/* =====================================================================
   «ورود و امنیت»: the device list and the sign-in log    (2026-09-23)
   ===================================================================== */
.devlist { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: .6rem; }

/* Six columns of wildly different natural width — a browser name, an IP,
   two dates, a hostname and a button — do not belong in one equal grid.
   `chasb.virasho.com` was breaking across two lines inside a 6.5rem
   column while the date columns sat half empty. Named areas instead, each
   sized for what it holds, and the action pinned to the end. */
.devlist__row {
  display: grid;
  grid-template-columns:
    minmax(7.5rem, 1.1fr)  /* browser + «همین دستگاه» */
    minmax(6.5rem, .9fr)   /* ip                       */
    minmax(5.5rem, .7fr)   /* last seen                */
    minmax(5.5rem, .7fr)   /* first seen               */
    minmax(7rem, 1fr)      /* host                     */
    max-content;           /* the button, never wrapped */
  align-items: center;
  gap: .4rem 1.1rem;
  padding: .9rem 1.05rem;
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  background: var(--card);
  font-size: .86rem;
}
.devlist__row > * { min-inline-size: 0; }
.devlist__act .btn { white-space: nowrap; }
.devlist__host code {
  display: inline-block;
  max-inline-size: 100%;
  overflow-wrap: anywhere;
  line-height: 1.7;
}
.devlist__row.is-me { border-color: var(--accent); background: var(--ok-bg); }
.devlist__name { font-weight: 700; display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.devlist__lbl  { display: block; font-size: .72rem; color: var(--muted); font-weight: 500; }
/* An IPv4 is 15 characters that must not be hyphenated and must not push
   the row sideways on a 320px phone — which is still a real phone. It wraps
   at the dots instead. */
.devlist__ip code {
  font-size: .8rem;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

.devlist__host code { font-size: .78rem; overflow-wrap: anywhere; }
.devlist__act form { margin: 0; }

@media (max-width: 1100px) {
  .devlist__row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .devlist__name { grid-column: 1 / -1; }
  .devlist__act  { grid-column: 1 / -1; }
}
@media (max-width: 620px) {
  .devlist__row { grid-template-columns: 1fr 1fr; }
  .devlist__name { grid-column: 1 / -1; }
  .devlist__act  { grid-column: 1 / -1; }
}

/* ---- sign-in log ------------------------------------------------------ */
.loginlog { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: .2rem; }
.loginlog__row {
  display: grid;
  grid-template-columns: .6rem minmax(7rem, auto) 1fr auto;
  align-items: center;
  gap: .75rem;
  padding: .65rem .5rem;
  border-block-end: 1px solid var(--line-soft);
  font-size: .85rem;
}
.loginlog__row:last-child { border-block-end: 0; }
.loginlog__dot {
  inline-size: .55rem; block-size: .55rem; border-radius: 50%;
  background: var(--ok);
}
.loginlog__row--bad .loginlog__dot { background: var(--danger); }
.loginlog__what { font-weight: 700; }
.loginlog__row--bad .loginlog__what { color: var(--danger); }
.loginlog__when { color: var(--muted); font-variant-numeric: tabular-nums; }
.loginlog__ip code { font-size: .8rem; color: var(--ink-soft); }

.card__note--warn {
  background: var(--warn-bg); color: var(--warn);
  padding: .2rem .6rem; border-radius: 999px; font-size: .78rem; font-weight: 700;
}

@media (max-width: 600px) {
  .loginlog__row { grid-template-columns: .6rem 1fr; }
  .loginlog__when, .loginlog__ip { grid-column: 2; }
}

/* =====================================================================
   Staff grants: groups that open into pages            (2026-09-23)
   ===================================================================== */
.grant { display: grid; gap: .5rem; grid-column: 1 / -1; }

.grant__g {
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  background: var(--card);
  overflow: hidden;
}
.grant__g[open] { border-color: var(--line); }

.grant__g > summary {
  display: flex;
  align-items: center;
  gap: .6rem;
  min-block-size: 3rem;
  padding: .3rem .9rem;
  cursor: pointer;
  list-style: none;
  font-size: .9rem;
}
.grant__g > summary::-webkit-details-marker { display: none; }
.grant__g > summary::after {
  content: '';
  inline-size: .5rem; block-size: .5rem;
  margin-inline-start: .2rem;
  border-inline-end: 2px solid var(--muted);
  border-block-end: 2px solid var(--muted);
  transform: rotate(45deg);
  transition: transform .15s ease;
}
.grant__g[open] > summary::after { transform: rotate(-135deg); }
.grant__g > summary:hover { background: var(--line-soft); }

.grant__all { margin: 0; font-weight: 700; }
.grant__n {
  margin-inline-start: auto;
  font-size: .76rem;
  color: var(--muted);
  font-weight: 600;
}

.grant__pages {
  display: grid;
  /* min() rather than a flat 11rem: below ~320px a fixed minimum is wider
     than the column it is supposed to fit into, and auto-fit cannot shrink
     past it — so the grid, not the content, was what stuck out. */
  grid-template-columns: repeat(auto-fit, minmax(min(11rem, 100%), 1fr));
  gap: .55rem 1rem;
  padding: .3rem 1.1rem 1rem;
  border-block-start: 1px solid var(--line-soft);
  background: #fbfaf7;
}
.grant__pages .check { margin: 0; font-size: .87rem; }
.grant__pages input:disabled + span { color: var(--muted); }

/* =====================================================================
   Card-to-card: several accounts                       (2026-09-23)
   ===================================================================== */
.c2clist { display: grid; gap: .85rem; margin-block: .5rem 1rem; }

.c2c {
  position: relative;
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  padding: .9rem 1.1rem 0;
  margin: 0;
}
.c2c > legend {
  padding: 0 .4rem;
  font-size: .82rem;
  font-weight: 700;
  color: var(--muted);
}
.c2c__x {
  position: absolute;
  inset-block-start: .5rem;
  inset-inline-start: .5rem;
  inline-size: 2rem; block-size: 2rem;
  min-block-size: 0;
  border: 0; border-radius: 8px;
  background: none; cursor: pointer;
  color: var(--muted); font-size: 1.2rem; line-height: 1;
  padding: 0;
}
.c2c__x:hover { background: var(--danger-bg); color: var(--danger); }

.c2c__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }
@media (max-width: 620px) { .c2c__grid { grid-template-columns: 1fr; } }

/* The receipt page, when the shop offers a choice of accounts. */
.receipt-page__pick { margin-block: 1rem .5rem; font-weight: 700; }
.receipt-page__bank { margin-block-end: .35rem; color: var(--muted); font-size: .85rem; }

/* =====================================================================
   اسلایدهای صفحهٔ اصلی — now a screen of its own    (2026-09-23)
   ===================================================================== */
.slides-page { max-width: 980px; }
.slides-page .cats__head { display: flex; align-items: flex-start; gap: 1rem; flex-wrap: wrap; }
.slides-page .cats__head > div { flex: 1 1 18rem; }

.slide-row__edit > summary {
  min-block-size: 2.75rem;
  display: flex;
  align-items: center;
  gap: .4rem;
  font-size: .85rem;
  color: var(--primary);
  font-weight: 600;
  cursor: pointer;
}

/* The pointer back to the slide editor, on the theme screen. */
.section-item__note { margin: .6rem 0 0; }

/* =====================================================================
   مطالب — the list, not the settings                    (2026-09-23)
   ===================================================================== */
.posts-admin { max-width: 1100px; }

.posts-bar {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin-block-end: 1.25rem;
}
.posts-bar .tabs { margin: 0; flex: 1 1 auto; }

/* The tabs here are anchors with a count inside, so they reuse `.tabs a`
   and only need the count pill. */
.tabs__n {
  margin-inline-start: .4rem;
  padding: .05rem .4rem;
  border-radius: 999px;
  background: var(--line-soft);
  font-size: .75rem;
  font-variant-numeric: tabular-nums;
}
.tabs a.is-active .tabs__n { background: rgba(255, 255, 255, .22); color: #fff; }

.posts-search { display: flex; gap: .4rem; align-items: center; flex-wrap: wrap; }
.posts-search input[type="search"] { min-inline-size: 15rem; }

/* ---- rows ------------------------------------------------------------ */
.postlist { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }

.postrow {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  padding: .85rem 1rem;
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  background: var(--card);
}
.postrow:hover { border-color: var(--line); }

.postrow__thumb {
  inline-size: 3.5rem;
  block-size: 3.5rem;
  flex: 0 0 auto;
  border-radius: 10px;
  overflow: hidden;
  background: var(--line-soft);
  display: grid;
  place-items: center;
}
.postrow__thumb img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.postrow__thumb--none { color: var(--muted); font-size: 1.1rem; }

.postrow__main { flex: 1 1 16rem; min-inline-size: 0; display: grid; gap: .35rem; }
.postrow__title { font-weight: 700; color: var(--ink); font-size: .98rem; }
.postrow__title:hover { color: var(--primary); }

.postrow__meta {
  display: flex;
  align-items: center;
  gap: .6rem;
  flex-wrap: wrap;
  font-size: .8rem;
  color: var(--muted);
}
.postrow__cat {
  padding: .05rem .5rem;
  border-radius: 999px;
  background: var(--accent-050);
  color: var(--accent-600);
  font-weight: 600;
}
.postrow__url { font-size: .76rem; overflow-wrap: anywhere; }

.postrow__actions { display: flex; gap: .4rem; flex-wrap: wrap; }
.postrow__actions form { margin: 0; }

@media (max-width: 680px) {
  .postrow__actions { flex-basis: 100%; }
  .posts-search input[type="search"] { min-inline-size: 0; flex: 1 1 10rem; }
}

/* ---- the empty state, which has a job ------------------------------- */
.posts-empty { max-width: 46rem; }
.posts-empty h2 { margin-block-end: .6rem; }
.posts-empty p { color: var(--ink-soft); line-height: 2; margin-block-end: 1rem; }
.posts-empty__ideas {
  margin: 0 0 1.5rem;
  padding-inline-start: 1.2rem;
  color: var(--ink-soft);
  display: grid;
  gap: .4rem;
  line-height: 1.9;
}

.posts-settings { margin-block-start: 1.5rem; }

/* ---- the editor's block picker -------------------------------------- */
.rte-group {
  margin: 0 0 .6rem;
  font-size: .8rem;
  font-weight: 700;
  color: #6b7280;
}
.rte-group + .rte-blocks { margin-block-end: 1.25rem; }

/* =====================================================================
   اسلایدها — the rows                                   (2026-09-23)

   The stylesheet had `.slide-list__item` / `.slide-list__thumb` while the
   view has said `.slide-row` / `.slide-row__thumb` for some time. Nothing
   matched, so the thumbnail rendered at its natural size — a 1600px banner
   inside a card, which is the horizontal scrollbar in the screenshot. It
   was survivable while the slider was folded three levels deep inside the
   theme editor; on a screen of its own it is the first thing you see.
   ===================================================================== */
.slide-list { display: grid; gap: .6rem; margin: .75rem 0 1.25rem; padding: 0; list-style: none; }

.slide-row {
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  background: var(--card);
  overflow: hidden;                 /* nothing escapes the card again */
}

.slide-row__bar {
  display: flex;
  align-items: center;
  gap: .75rem;
  flex-wrap: wrap;
  padding: .7rem .85rem;
}

/* A fixed box, and the image fills it. The banner is wide and the row is
   a list item; letting the image set the height turns the list into a
   stack of posters. */
.slide-row__thumb {
  inline-size: 6.5rem;
  block-size: 3.5rem;
  flex: 0 0 auto;
  border-radius: 8px;
  object-fit: cover;
  background: var(--line-soft);
  display: block;
}
.slide-row__thumb--none {
  display: grid;
  place-items: center;
  color: var(--muted);
  font-size: 1.1rem;
}

.slide-row__main { flex: 1 1 12rem; min-inline-size: 0; display: grid; gap: .25rem; }
.slide-row__main b { font-size: .92rem; }
.slide-row__main small { color: var(--muted); font-size: .78rem; }

.slide-row__ops { display: flex; gap: .35rem; flex-wrap: wrap; }
.slide-row__ops form { margin: 0; }

.slide-row__edit { border-block-start: 1px solid var(--line-soft); }
.slide-row__edit > summary { padding-inline: .85rem; }
.slide-row__edit form,
.slide-row__edit > div { padding: 0 .85rem .85rem; }

/* Any image inside this screen is a preview, never a layout driver. */
.slides-page img { max-inline-size: 100%; block-size: auto; }

.slide-add { border-block-start: 1px solid var(--line-soft); padding-block-start: 1.25rem; }

@media (max-width: 620px) {
  .slide-row__ops { flex-basis: 100%; }
}

/* =====================================================================
   Time charts read left to right                        (2026-09-23)

   `.bars` is a flex row inside a dir="rtl" document, so the first item —
   the OLDEST day — was placed on the right and the newest on the left.
   The labels then counted down as the eye moved right: ۱، ۳۱، ۳۰، ۲۹…
   which is not a sequence anybody reads as time passing.
   `direction: ltr` on the strip alone puts the oldest on the left and
   today on the right, the way every chart does, and changes nothing
   about the Persian text around it.
   ===================================================================== */
.bars { direction: ltr; }
.bars__x { direction: rtl; }        /* the label itself stays Persian */

/* =====================================================================
   FILE INPUTS, EVERYWHERE                               (2026-09-23)

   The browser's stock control is a grey «Choose File» button with
   «No file chosen» in English beside it, in the middle of a Persian
   RTL panel. It also cannot be styled directly — only
   `::file-selector-button` can — so this restyles the button and lets
   the label after it carry the state.

   Deliberately NOT a JavaScript dropzone here: the panel has three of
   those already (`.drop`, `.qadd-drop`, the editor's) for the places
   where dragging a file in is the main event. This is the baseline for
   the twenty places where picking one file is a detail on a form, and a
   baseline that only needs CSS never breaks.
   ===================================================================== */
input[type="file"] {
  inline-size: 100%;
  max-inline-size: 100%;
  min-block-size: 44px;
  padding: .45rem .6rem;
  border: 1px dashed var(--line);
  border-radius: var(--radius-sm);
  background: #fbfaf7;
  color: var(--muted);
  font: inherit;
  font-size: .85rem;
  cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease;
}
input[type="file"]:hover { border-color: var(--primary); background: var(--primary-050); }
input[type="file"]:focus-visible {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(23, 63, 138, .15);
}
input[type="file"]:disabled { opacity: .55; cursor: default; }

input[type="file"]::file-selector-button {
  margin-inline-end: .75rem;
  padding: .45rem 1rem;
  border: 0;
  border-radius: 8px;
  background: var(--primary);
  color: #fff;
  font: inherit;
  font-size: .85rem;
  font-weight: 700;
  cursor: pointer;
}
input[type="file"]::file-selector-button:hover { background: var(--primary-600); }
input[type="file"]:disabled::file-selector-button { background: var(--muted); cursor: default; }

/* =====================================================================
   DATES ARE PICKED, NOT TYPED                           (2026-09-23)

   `jalali-picker.js` now makes every bound field readonly. A field you
   cannot type into has to look like a button, or it reads as broken.
   ===================================================================== */
.jdp-wrap { position: relative; display: block; }

.jdp-input {
  cursor: pointer;
  padding-inline-end: 4.5rem;          /* room for the two buttons */
  background: var(--card);
  font-variant-numeric: tabular-nums;
  letter-spacing: .02em;
}
.jdp-input:hover { border-color: var(--primary); }

.jdp-open,
.jdp-clear {
  position: absolute;
  inset-block-start: 50%;
  transform: translateY(-50%);
  inline-size: 2rem;
  block-size: 2rem;
  min-block-size: 0;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--muted);
  cursor: pointer;
  display: grid;
  place-items: center;
}
.jdp-open { inset-inline-start: .45rem; }
.jdp-clear { inset-inline-start: 2.6rem; font-size: 1.2rem; line-height: 1; }

.jdp-open svg { inline-size: 1.15rem; block-size: 1.15rem; }
.jdp-open:hover, .jdp-clear:hover { background: var(--line-soft); color: var(--primary); }
.jdp-clear:hover { color: var(--danger); }
.jdp-open:focus-visible, .jdp-clear:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 1px;
}

/* «ورود و امنیت» outgrew the 680px settings column.
   The device list is six columns wide now — browser, address, two dates,
   which panel, and a button — and squeezing that into a text column is
   what broke it. Only this screen widens; the rest of settings stays a
   readable column, because a 1000px-wide text input is not an upgrade. */
@media (min-width: 1100px) {
  .settings-page.security { max-width: 1060px; }
}
@media (max-width: 1099.98px) {
  /* Below that, the row stacks instead of overflowing. */
  .devlist__row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .devlist__name, .devlist__act { grid-column: 1 / -1; }
}

/* =====================================================================
   TRAFFIC ON THE DASHBOARD                              (2026-09-23)

   Two series on one axis: views, with the people who made them drawn
   INSIDE the same bar. Side by side they read as two unrelated numbers;
   nested, the gap between them is the story — a tall bar with a short
   fill is one person reloading, and that is worth seeing.
   ===================================================================== */
.bars--two .bars__bar { position: relative; overflow: hidden; }
.bars--two .bars__bar i {
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  display: block;
  background: var(--primary);
  border-radius: 4px 4px 0 0;
}

.bars__key {
  display: flex;
  align-items: center;
  gap: .4rem;
  flex-wrap: wrap;
  margin-block-start: .9rem;
  font-size: .8rem;
  color: var(--muted);
}
.bars__k {
  inline-size: .75rem;
  block-size: .75rem;
  border-radius: 3px;
  display: inline-block;
}
.bars__k--views  { background: #7c8ba1; }
.bars__k--people { background: var(--primary); }
.bars__key .card__more { margin-inline-start: auto; }

/* ---- «صفحه‌های پربازدید» --------------------------------------------- */
.toplist { list-style: none; margin: 0; padding: 0; display: grid; gap: .1rem; }

.toprow {
  display: grid;
  grid-template-columns: minmax(8rem, 1.4fr) minmax(4rem, 1fr) auto;
  align-items: center;
  gap: .75rem;
  padding: .55rem .4rem;
  border-block-end: 1px solid var(--line-soft);
  font-size: .86rem;
}
.toprow:last-child { border-block-end: 0; }

.toprow__n {
  color: var(--primary);
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.toprow__bar {
  block-size: .5rem;
  border-radius: 999px;
  background: var(--line-soft);
  overflow: hidden;
}
.toprow__bar i { display: block; block-size: 100%; background: var(--accent); border-radius: 999px; }
.toprow__v { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--ink-soft); }

@media (max-width: 560px) {
  .toprow { grid-template-columns: 1fr auto; }
  .toprow__bar { grid-column: 1 / -1; }
}

/* =====================================================================
   جست‌وجو در پنل، سطل زباله، «حالا چه؟»، و آدرس فروشگاه.
   Four components that exist for one reason: a person who does not know
   our words for things should still be able to get where they are going
   and undo what they did.
   ===================================================================== */

/* ---- the box in the top bar ---------------------------------------- */
.panel__find {
  position: relative;
  margin: .2rem .9rem .7rem;
}
.panel__find input {
  inline-size: 100%;
  block-size: 38px;
  padding-inline: 2.2rem .8rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  font: inherit;
  font-size: .85rem;
  color: var(--ink);
}
.panel__find input::placeholder { color: #93a1b5; }
.panel__find input:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 1px;
  border-color: var(--primary);
}
.panel__find-ic {
  position: absolute;
  inset-inline-start: .6rem;
  inset-block-start: 50%;
  transform: translateY(-50%);
  inline-size: 17px;
  block-size: 17px;
  color: #93a1b5;
  pointer-events: none;
}
.panel__find-ic svg { inline-size: 100%; block-size: 100%; }

/* The sidebar is white, so the box needs a tint to read as a control at
   all — a white field on a white panel is an outline and nothing else. */
.panel__find input {
  background: #f4f6fa;
  border-color: var(--side-line, #ececec);
  color: var(--side-ink, #26364e);
}
.panel__find input::placeholder { color: var(--side-ink-soft, #5f6b7c); opacity: .75; }
.panel__find-ic { color: var(--side-ink-soft, #5f6b7c); }
.panel__find input:focus-visible { background: #fff; }

/* ---- the results --------------------------------------------------- */
.psearch__box label {
  display: block;
  margin-block-end: .5rem;
  font-weight: 700;
  color: var(--ink);
}
.psearch__row { display: flex; gap: .5rem; }
.psearch__row input {
  flex: 1 1 auto;
  min-inline-size: 0;
  block-size: 44px;
  padding-inline: .9rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  font: inherit;
  color: var(--ink);
}
.psearch__row input:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 1px;
}
.psearch__row .btn { flex: 0 0 auto; }
.psearch__else { margin-block-start: .8rem; }

.sres { list-style: none; margin: 0; padding: 0; }
.sres__row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: .6rem;
  padding: .7rem .2rem;
  border-block-end: 1px solid var(--line-soft, #eef1f6);
  color: var(--ink);
  text-decoration: none;
  min-block-size: 44px;
}
.sres li:last-child .sres__row { border-block-end: 0; }
.sres__row:hover { background: #f6f8fc; }
.sres__name { font-weight: 700; overflow-wrap: anywhere; }
.sres__meta { color: var(--ink-soft); font-size: .82rem; }
.sres__go { color: #9aa7ba; font-size: 1.1rem; line-height: 1; }

@media (max-width: 560px) {
  .sres__row { grid-template-columns: 1fr auto; }
  .sres__meta { grid-column: 1 / -1; }
}

/* ---- «حذف شد — بازگرداندن» ----------------------------------------- */
.undobar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .7rem;
  margin: 0 0 1rem;
  padding: .75rem 1rem;
  border-radius: 12px;
  background: var(--navy, #12233F);
  color: #fff;
}
.undobar__t { flex: 1 1 auto; font-size: .9rem; overflow-wrap: anywhere; }
.undobar form { margin: 0; }
.undobar__btn {
  min-block-size: 36px;
  padding: .4rem 1rem;
  border: 0;
  border-radius: 9px;
  background: var(--accent, #21B79C);
  color: #06281f;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.undobar__btn:hover { filter: brightness(1.06); }
.undobar__all {
  color: #c7d3e6;
  font-size: .82rem;
  text-decoration: underline;
}

/* ---- «ذخیره شد… و حالا چه؟» ---------------------------------------- */
.done {
  margin: 0 0 1rem;
  padding: .9rem 1.1rem;
  border: 1px solid #b9e6d9;
  border-inline-start: 4px solid var(--accent, #21B79C);
  border-radius: 12px;
  background: #f1fbf8;
}
.done__t { margin: 0 0 .7rem; font-weight: 700; color: #0d3f34; }
.done__row { display: flex; flex-wrap: wrap; gap: .5rem; }

/* ---- «فروشگاه شما باز است» ------------------------------------------ */
.live {
  display: flex;
  align-items: center;
  gap: .8rem;
  margin-block-end: 1rem;
  padding: .85rem 1.1rem;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
}
.live__dot {
  flex: 0 0 auto;
  inline-size: 10px;
  block-size: 10px;
  border-radius: 999px;
  background: var(--accent, #21B79C);
  /* A ring rather than a blink: a pulsing dot on a page somebody reads
     every morning is a distraction, not information. */
  box-shadow: 0 0 0 4px rgba(33, 183, 156, .18);
}
.live__body { flex: 1 1 auto; min-inline-size: 0; }
.live__t { margin: 0 0 .2rem; font-size: .85rem; color: var(--ink-soft); }
.live__state { color: var(--ok, #12876f); }
.live__why { margin-inline-start: .4rem; font-size: .8rem; }
/* The dot and the word follow the shop's state. */
.live--warn .live__dot { background: var(--warn, #b5730a); box-shadow: 0 0 0 4px rgba(181, 115, 10, .18); }
.live--warn .live__state { color: var(--warn, #b5730a); }
.live--bad  .live__dot { background: var(--danger, #cf3b3b); box-shadow: 0 0 0 4px rgba(207, 59, 59, .18); }
.live--bad  .live__state { color: var(--danger, #cf3b3b); }
.live__url {
  display: inline-block;
  font-weight: 700;
  color: var(--primary);
  text-decoration: none;
  overflow-wrap: anywhere;
}
.live__url:hover { text-decoration: underline; }
.live__acts { flex: 0 0 auto; display: flex; gap: .45rem; }

@media (max-width: 560px) {
  .live { flex-wrap: wrap; }
  .live__acts { inline-size: 100%; }
  .live__acts .btn { flex: 1 1 0; text-align: center; }
}

/* ---- سطل زباله ------------------------------------------------------ */
.trash__list { list-style: none; margin: 0; padding: 0; }
.trash__row {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: center;
  gap: .7rem;
  padding: .65rem .2rem;
  border-block-end: 1px solid var(--line-soft, #eef1f6);
  min-block-size: 44px;
}
.trash__row:last-child { border-block-end: 0; }
.trash__row form { margin: 0; }
.trash__kind {
  padding: .18rem .55rem;
  border-radius: 999px;
  background: #eef2f8;
  color: var(--ink-soft);
  font-size: .75rem;
  white-space: nowrap;
}
.trash__name { font-weight: 700; overflow-wrap: anywhere; }
.trash__when { color: var(--ink-soft); font-size: .8rem; white-space: nowrap; }
.trash__ro { color: var(--ink-soft); font-size: .8rem; }
.trash__note { margin-block-start: .9rem; }

@media (max-width: 620px) {
  .trash__row { grid-template-columns: 1fr auto; }
  .trash__kind { grid-row: 1; grid-column: 1; justify-self: start; }
  .trash__name { grid-row: 2; grid-column: 1 / -1; }
  .trash__when { grid-row: 3; grid-column: 1; }
  .trash__row form,
  .trash__ro   { grid-row: 3; grid-column: 2; }
}

/* ---- the box on «همهٔ تنظیمات» -------------------------------------- */
.setfind label {
  display: block;
  margin-block-end: .5rem;
  font-weight: 700;
  color: var(--ink);
}
.setfind__row { display: flex; gap: .5rem; }
.setfind__row input {
  flex: 1 1 auto;
  min-inline-size: 0;
  block-size: 44px;
  padding-inline: .9rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  font: inherit;
  color: var(--ink);
}
.setfind__row input:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }

/* ---- chart tooltips -------------------------------------------------
   The native title= attribute is a plain string with no direction of its
   own, so a Persian label with Persian digits in it comes out reordered —
   «۳۰ شهریور: ۶۴ بازدید از ۲۹ نفر» rendered as nonsense. This is a real
   element, explicitly RTL, with one fact per line so there is nothing
   adjacent for the bidi algorithm to swap.                              */
.bars__col { position: relative; }
/* PHYSICAL left/right here, not the logical properties used everywhere else
   in this file. The chart itself is deliberately LTR (days run old → new,
   left → right) while the tooltip text is deliberately RTL — and an
   inset-inline-* on the tooltip resolves against the TOOLTIP's direction,
   not the column's, so the logical version put every tip on the wrong side
   of its own bar. Across a direction boundary, physical is the honest
   spelling. */
.bars__tip {
  position: absolute;
  bottom: calc(100% - 1.1rem);
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  display: grid;
  gap: .1rem;
  padding: .45rem .7rem;
  border-radius: 9px;
  background: var(--navy, #12233F);
  color: #fff;
  font-size: .76rem;
  line-height: 1.7;
  white-space: nowrap;
  text-align: center;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .12s ease;
}
.bars__tip b { font-size: .8rem; }
.bars__col:hover  .bars__tip,
.bars__col:focus  .bars__tip,
.bars__col:focus-visible .bars__tip { opacity: 1; visibility: visible; }
.bars__col:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 6px; }

/* The first and last column would push their tooltip off the edge of the
   card, so those two anchor to their own side instead of centring. */
.bars__col:first-child .bars__tip { left: 0; transform: none; }
.bars__col:last-child  .bars__tip { left: auto; right: 0; transform: none; }

/* =====================================================================
   تایید مالکیت سایت — the code a trust seal wants to find in <head>.
   ===================================================================== */
.verify-out {
  margin-block: .9rem 0;
  padding: .85rem 1rem;
  border: 1px solid var(--line);
  border-inline-start: 4px solid var(--accent, #21B79C);
  border-radius: 12px;
  background: #f7faf9;
}
.verify-out__t { margin: 0 0 .5rem; font-weight: 700; color: var(--ink); font-size: .88rem; }
.verify-out__code {
  margin: 0 0 .6rem;
  padding: .6rem .8rem;
  border-radius: 9px;
  background: var(--navy, #12233F);
  color: #e6edf7;
  font-size: .78rem;
  line-height: 1.9;
  /* The tag is long and must never widen the card; it scrolls in its own
     box rather than pushing the page sideways on a phone. */
  overflow-x: auto;
  white-space: pre;
}
.verify-out__code code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }

.verify-more { margin-block-start: 1rem; }
.verify-more > summary {
  cursor: pointer;
  padding-block: .5rem;
  min-block-size: 44px;
  display: flex;
  align-items: center;
  font-weight: 700;
  color: var(--primary);
}
.verify-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: .6rem;
  margin-block-end: .5rem;
}
@media (max-width: 560px) {
  .verify-row { grid-template-columns: 1fr; }
}

/* =====================================================================
   کد سفارشی — the most dangerous field in the panel, styled to say so
   without shouting. The warning sits ABOVE the boxes on purpose: a rule
   read after the fact is a bug report.
   ===================================================================== */
.codewarn{
  margin-block-end:1.1rem; padding:.9rem 1.1rem;
  border:1px solid #f0d9a8; border-inline-start:4px solid #d99b1c;
  border-radius:12px; background:#fffaf0;
}
.codewarn__t{ margin:0 0 .5rem; font-weight:700; color:#6b4c07; }
.codewarn ul{ margin:0; padding-inline-start:1.1rem; display:grid; gap:.45rem; }
.codewarn li{ line-height:1.9; color:var(--ink-soft,#3d4a5f); font-size:.9rem; }

.codebox{
  font-family:ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size:.82rem; line-height:1.8;
  /* No wrapping and its own scrollbar: a pasted snippet that reflows is a
     snippet nobody can read back to check. */
  white-space:pre; overflow-x:auto;
  background:#f7f8fb;
}

/* =====================================================================
   پنجرهٔ اعلان — the editor, with the preview beside it rather than
   behind a button. A colour pair chosen blind is the pair a shop's
   customers read as white-on-yellow.
   ===================================================================== */
.popup-page__cols { display: grid; gap: 1rem; }
@media (min-width: 1000px) {
  .popup-page__cols { grid-template-columns: minmax(0, 1fr) 20rem; align-items: start; }
  /* Follows the merchant down the form; the colours are chosen near the
     bottom and the preview is what tells them whether it worked. */
  .popup-page__side { position: sticky; inset-block-start: 1rem; }
}
.popup-page__thumb { display: block; margin-block-start: .6rem; }
.popup-page__thumb img {
  display: block; max-inline-size: 160px; block-size: auto;
  border: 1px solid var(--line); border-radius: 10px; margin-block-end: .5rem;
}
label.field input[type="color"] {
  /* A colour input with the panel's usual padding renders as a thin line
     on most browsers; it needs to be a swatch. */
  inline-size: 100%; block-size: 48px; padding: .2rem; cursor: pointer;
}

.popprev {
  border-radius: 14px; padding: 1.1rem 1rem 1.3rem;
  text-align: center; position: relative;
  box-shadow: 0 8px 26px rgba(18, 35, 63, .16);
}
.popprev__x { position: absolute; inset-block-start: .3rem; inset-inline-end: .5rem; opacity: .5; font-size: 1.2rem; }
.popprev__img { display: block; inline-size: 100%; border-radius: 10px; margin-block-end: .8rem; }
.popprev__t { margin: 0 0 .4rem; font-weight: 800; font-size: 1.05rem; line-height: 1.6; }
.popprev__p { margin: 0; font-size: .88rem; line-height: 1.9; opacity: .9; white-space: pre-line; }
.popprev__cta {
  display: inline-block; margin-block-start: .9rem; padding: .45rem 1.1rem;
  border: 2px solid currentColor; border-radius: 999px; font-weight: 700; font-size: .85rem;
}
.hint--warn { color: #b42318; font-weight: 600; }

/* ---- نمادها ------------------------------------------------------------ */
.badges__two { display: grid; gap: 0 1rem; grid-template-columns: 1fr; }
@media (min-width: 900px) { .badges__two { grid-template-columns: 1fr 1fr; } }

/* The live seal, fetched from the service itself. A merchant who can see
   their own badge here never asks whether the code worked. */
.badges__live { margin-block: .4rem 1.15rem; padding: .85rem 1rem;
  background: var(--surface-2, #f7f8fa); border: 1px solid var(--line, #e6e9ef);
  border-radius: 12px; }
.badges__live-t { margin: 0 0 .6rem; font-size: .85rem; font-weight: 600;
  color: var(--ink, #12233F); }
.badges__seal { display: inline-flex; padding: .4rem; background: #fff;
  border: 1px solid var(--line, #e6e9ef); border-radius: 10px; }
.badges__seal img { display: block; max-block-size: 110px; inline-size: auto; }

.badges__facts { margin: .6rem 0 0; padding: 0; list-style: none;
  display: flex; flex-wrap: wrap; gap: .35rem 1.2rem; font-size: .85rem;
  color: var(--muted, #667889); }
.badges__facts .is-warn { color: var(--warn-ink, #8a5a00); }

/* ---- پنل پیامکی -------------------------------------------------------- */
/* Two pill tones the component did not have. The status map in SmsPanel names
   its tones ok/open/warn/bad, and a page that has to translate its own
   vocabulary into `pill--out` at every call site gets it wrong once. */
.pill--bad  { background: var(--danger-bg, #fbeaea); color: var(--danger, #cf3b3b); }
.pill--warn { background: var(--warn-bg, #fbf1df);   color: var(--warn, #b5730a); }

/* A chip that carries a note rather than a state. */
.chip--quiet { background: var(--line-soft, #f0ede6); color: var(--muted); }
.chip--x     { text-decoration: none; }

.sms .nowrap { white-space: nowrap; }
/* `start`, like every other cell: a numeric column that aligns opposite to
   its own header is harder to read, not easier. */
.sms .num { text-align: start; font-variant-numeric: tabular-nums; }
.sms .is-bad  { color: var(--danger, #cf3b3b); }
.sms .is-warn { color: var(--warn, #b5730a); }

/* The balance. One number, large, because it is the only thing on this page
   a merchant looks up without reading anything else. */
.sms-wallet__row { display: flex; flex-wrap: wrap; gap: 1rem 2rem;
  align-items: center; justify-content: space-between; }
.sms-big { display: flex; align-items: baseline; gap: .5rem; }
.sms-big__n { font-size: 2.4rem; font-weight: 800; line-height: 1;
  color: var(--ink, #12233F); font-variant-numeric: tabular-nums; }
.sms-big__u { color: var(--muted); font-size: .9rem; }
.sms-wallet__act { display: flex; flex-direction: column; gap: .35rem;
  align-items: flex-start; }
.sms-wallet__act .hint { margin: 0; }

/* The threshold fold sits inside the balance card, so it needs the card's
   own padding back rather than the standalone .pcard treatment. */
.sms-thr { margin-block-start: 1rem; border: 1px solid var(--line, #e6e9ef);
  border-radius: 12px; padding: .7rem .9rem; }
.sms-thr > summary { cursor: pointer; }
.sms-thr__form { margin-block-start: .8rem; max-inline-size: 22rem; }

.sms-facts { display: flex; flex-wrap: wrap; gap: .4rem 1.4rem;
  margin: 0 0 1rem; padding: 0; list-style: none; font-size: .9rem;
  color: var(--muted); }
.sms-facts b { color: var(--ink, #12233F); font-variant-numeric: tabular-nums; }
.sms-facts a { margin-inline-start: .3rem; font-size: .8rem; }

/* Decoration under a number that is already readable, so it gets no label
   and no aria: removing it loses nothing. In normal flow on purpose — an
   absolutely positioned bar paints ABOVE the cell's own text. */
.sms-bar { display: block; block-size: 4px; inline-size: var(--w, 0%);
  min-inline-size: 2px; margin-block-start: .3rem; border-radius: 2px;
  background: var(--primary, #173F8A); opacity: .45; }

.sms-filters { display: flex; flex-wrap: wrap; gap: .4rem; margin-block-end: 1rem; }
.sms-filters .chip { text-decoration: none; }
.sms-filters .chip.is-on { background: var(--primary, #173F8A); color: #fff; }

.sms-log__order { font-size: .78rem; margin-inline-start: .4rem; }
.sms-log__why { display: block; margin-block-start: .2rem; }

/* On a phone the log's four columns do not fit, and a horizontally scrolling
   table is the honest answer — .table-wrap already scrolls. What does not
   work is a 2.4rem number pushing the card wider than the screen. */
@media (max-width: 520px) {
  .sms-big__n { font-size: 1.9rem; }
  .sms-wallet__act { inline-size: 100%; }
  .sms-wallet__act .btn { inline-size: 100%; text-align: center; }
}

.sms-auto { margin: .8rem 0 1rem; padding: 0; list-style: none; }
.sms-auto li { display: flex; align-items: center; justify-content: space-between;
  gap: .8rem; padding-block: .6rem; border-block-end: 1px solid var(--line, #e6e9ef); }
.sms-auto li:last-child { border-block-end: 0; }

/* ======================================================================
   Tabs — [data-ptabs]. One component for every long screen.
   The markup is complete without JavaScript (every panel shown, every tab
   an in-page link); with it, only the chosen panel is shown.
   ====================================================================== */
.ptabs { display: flex; gap: .2rem; overflow-x: auto; scrollbar-width: none;
  margin-block: 0 1.25rem; border-block-end: 1px solid var(--line);
  -webkit-overflow-scrolling: touch; }
.ptabs::-webkit-scrollbar { display: none; }
.ptab { flex: 0 0 auto; display: inline-flex; align-items: center; gap: .45rem;
  min-block-size: 46px; padding: .55rem 1rem; margin-block-end: -1px;
  color: var(--muted); font-weight: 600; font-size: .92rem; text-decoration: none;
  white-space: nowrap; border-block-end: 3px solid transparent;
  border-start-start-radius: 10px; border-start-end-radius: 10px;
  transition: color .15s ease, background-color .15s ease, border-color .15s ease; }
.ptab:hover { color: var(--ink); background: var(--line-soft, #f0ede6); }
.ptab:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
.ptab.is-on, .ptab[aria-selected="true"] { color: var(--primary); border-block-end-color: var(--primary); }
/* A count or state on a tab: «۵ از ۷», «نیاز به تنظیم». */
.ptab__n { font-size: .72rem; font-weight: 700; padding: .1rem .5rem; border-radius: 999px;
  background: var(--line-soft, #f0ede6); color: var(--muted); }
.ptab__n--todo { background: var(--warn-bg); color: var(--warn); }
.ptab__n--ok   { background: var(--ok-bg, #e3f5f0); color: var(--ok); }
/* Desktop: the tab row stays reachable while a long panel scrolls. On a
   phone the mobile top bar is already sticky, and two stuck bars eat the
   screen, so it scrolls away there. */
@media (min-width: 900px) {
  .ptabs { position: sticky; inset-block-start: 0; z-index: 20; background: var(--bg); }
}
/* Before the script runs, hide every panel but the first — no flash of the
   whole long page. `.js` is set as the first thing in <body>. */
.js [data-ptabs]:not(.is-ready) [data-ptab-panel]:not([data-ptab-first]) { display: none; }
.js [data-ptabs]:not(.is-ready) [data-ptab-show] { display: none; }

/* The way back to the settings chooser, on every screen it leads to. */
.crumb { display: inline-flex; align-items: center; gap: .3rem; min-block-size: 36px;
  margin-block-end: .4rem; color: var(--muted); font-size: .88rem; font-weight: 600;
  text-decoration: none; }
.crumb:hover { color: var(--primary); }

/* ======================================================================
   تنظیمات — the chooser
   ====================================================================== */
.settings .setfind { margin-block-end: 1.6rem; }
.hub { margin-block-end: 1.8rem; }
.hub__title { margin: 0 0 .7rem; font-size: .95rem; font-weight: 700; color: var(--ink-soft, #3d4a5f); }
.hub__grid { display: grid; gap: .75rem; margin: 0; padding: 0; list-style: none;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); }
.hub-card { position: relative; display: flex; flex-direction: column; gap: .3rem;
  block-size: 100%; min-block-size: 92px; padding-block: 1rem; padding-inline: 1.1rem 2.4rem;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-sm, 12px);
  color: var(--ink); text-decoration: none; box-shadow: var(--shadow-xs);
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease; }
.hub-card:hover { border-color: var(--primary); box-shadow: var(--shadow-sm); }
.hub-card:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.hub-card__title { font-weight: 700; font-size: .98rem; }
.hub-card__note { color: var(--muted); font-size: .85rem; line-height: 1.7; }
.hub-card__state { align-self: flex-start; margin-block-start: .25rem; padding: .12rem .55rem;
  border-radius: 999px; font-size: .75rem; font-weight: 700;
  background: var(--warn-bg); color: var(--warn); }
.hub-card--todo { border-color: #efd9b0; }
/* The arrow sits at the END (left in RTL) so every card reads «go this way». */
/* An SVG, not «‹»: in the panel font that glyph reads as a parenthesis. */
.hub-card__go { position: absolute; inset-inline-end: .85rem; inset-block-start: 50%;
  transform: translateY(-50%); display: inline-flex; color: var(--muted); }
.hub-card__go svg { inline-size: 18px; block-size: 18px; }
.hub-card:hover .hub-card__go { color: var(--primary); }
@media (prefers-reduced-motion: reduce) { .hub-card, .ptab { transition: none; } }

/* ---- «نسخه‌های قبلی» — the theme history timeline ------------------------ */
.thist { margin: 1rem 0 0; padding: 0; list-style: none; }
.thist__row { display: grid; grid-template-columns: auto 1fr auto; gap: .4rem 1rem;
  align-items: center; padding-block: .9rem; border-block-end: 1px solid var(--line); }
.thist__row:last-child { border-block-end: 0; }
.thist__row--now { background: var(--ok-bg, #e3f5f0); border-radius: 12px;
  padding-inline: .9rem; border-block-end: 0; margin-block-end: .3rem; }
/* Rows 4+ fold away until asked for. */
.card:not(.thist--all) .thist__row--old { display: none; }
.thist__sw { display: inline-flex; }
.thist__sw i { inline-size: 22px; block-size: 22px; border-radius: 50%;
  border: 2px solid var(--card); box-shadow: 0 0 0 1px var(--line); }
.thist__sw i + i { margin-inline-start: -8px; }
.thist__main { display: flex; flex-direction: column; gap: .2rem; min-inline-size: 0; }
.thist__when { font-weight: 700; color: var(--ink); font-size: .93rem; }
.thist__sub { color: var(--muted); font-size: .82rem; }
.thist__diff { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; margin-block-start: .2rem; }
.thist__diffl { color: var(--ink-soft, #3d4a5f); font-size: .8rem; }
.thist__diff--same { color: var(--muted); font-size: .8rem; font-style: normal; }
.thist__act { margin: 0; }
.thist__more { margin-block-start: .8rem; }
@media (max-width: 560px) {
  .thist__row { grid-template-columns: auto 1fr; }
  .thist__act, .thist__row--now > .pill { grid-column: 1 / -1; justify-self: start; }
  .thist__act .btn { inline-size: 100%; }
  .thist__act { justify-self: stretch; }
}

/* The two folds inside each home-page section («تنظیمات این بخش», «تصویر
   بنر») were 24px tall — a text line, not a control — and the first thing
   a merchant taps on a phone after reordering. Measured the first time the
   theme screen went through the auditor. */
#tk-sections details > summary { display: flex; align-items: center; gap: .4rem;
  min-block-size: 40px; padding-inline: .2rem; cursor: pointer;
  font-weight: 600; color: var(--primary); }

/* ---- «پرکاربردهای شما» on the dashboard --------------------------------- */
.usage { margin-block: 0 1.2rem; }
.usage__t { display: block; margin-block-end: .5rem; font-size: .85rem; font-weight: 700;
  color: var(--ink-soft, #3d4a5f); }
.usage__list { display: grid; gap: .6rem; margin: 0; padding: 0; list-style: none;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 170px), 1fr)); }
.usage__item { display: flex; flex-direction: column; justify-content: center; gap: .15rem;
  min-block-size: 58px; padding: .6rem .9rem; background: var(--card);
  border: 1px solid var(--line); border-radius: var(--radius-sm, 12px);
  color: var(--ink); text-decoration: none; box-shadow: var(--shadow-xs);
  transition: border-color .15s ease, box-shadow .15s ease; }
.usage__item:hover { border-color: var(--primary); box-shadow: var(--shadow-sm); }
.usage__item:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.usage__l { font-weight: 700; font-size: .92rem; }
.usage__g { color: var(--muted); font-size: .75rem; }
@media (max-width: 520px) {
  .usage__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---- خرید اعتبار پیامک ---------------------------------------------------- */
/* 140px, not wider: four packages must sit in ONE row in the panel's 680px
   column (3 + an orphan read as «the fourth is different»), and two by two
   on a phone. */
.smspk { display: grid; gap: .8rem; margin: 1rem 0; padding: 0; list-style: none;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 140px), 1fr)); }
@media (max-width: 520px) { .smspk { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.smspk__item { position: relative; display: flex; flex-direction: column; align-items: center;
  gap: .15rem; padding: 1.3rem 1rem 1rem; text-align: center; background: var(--card);
  border: 1px solid var(--line); border-radius: var(--radius-sm, 12px); }
.smspk__item--best { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary) inset; }
.smspk__badge { position: absolute; inset-block-start: -.7rem; padding: .15rem .7rem;
  border-radius: 999px; background: var(--primary); color: #fff; font-size: .72rem; font-weight: 700; }
.smspk__n { font-size: 1.7rem; font-weight: 800; color: var(--ink); line-height: 1.2;
  font-variant-numeric: tabular-nums; }
.smspk__u { color: var(--muted); font-size: .85rem; }
.smspk__price { margin-block-start: .5rem; font-weight: 700; color: var(--ink); }
.smspk__per { color: var(--muted); font-size: .78rem; }
.smspk__form { inline-size: 100%; margin: .8rem 0 0; }
.smspk__hist { margin-block: .6rem 1rem; padding: .8rem 1rem; border-radius: 12px;
  background: var(--line-soft, #f0ede6); }
.smspk__hist-t { margin: 0 0 .4rem; font-weight: 700; font-size: .85rem; }
.smspk__hist ul { margin: 0; padding: 0; list-style: none; }
.smspk__hist li { display: flex; flex-wrap: wrap; gap: .3rem 1rem; padding-block: .3rem; font-size: .85rem; }

/* ---- ops: پیامک و تعرفه‌ها ----------------------------------------------- */
.opsms__sum { display: flex; flex-wrap: wrap; gap: 1.2rem 3rem; }
.opsms__kpi { display: flex; flex-direction: column; gap: .2rem; }
.opsms__kpi-l { color: var(--muted); font-size: .85rem; }
.opsms__kpi-n { font-size: 1.5rem; font-weight: 800; color: var(--ink); }
.opsms__kpi-n small { font-size: .8rem; font-weight: 600; color: var(--muted); }
.opsms .is-bad { color: var(--danger, #cf3b3b); }
.opsms__tbl input[type="number"] { inline-size: 9rem; min-block-size: 40px; padding-inline: .6rem;
  border: 1px solid var(--line); border-radius: 8px; font: inherit; }
.opsms__tbl input.opsms__sort { inline-size: 5rem; }
.opsms__tbl tr.is-off td { opacity: .55; }
.opsms__on { display: inline-flex; min-block-size: 40px; align-items: center; }
.opsms__new { margin-block-start: 1.4rem; padding-block-start: 1.2rem; border-block-start: 1px solid var(--line); }
.opsms__new-t { margin: 0 0 .7rem; font-weight: 700; }
.opsms__new-row { display: grid; gap: 0 1rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 180px), 1fr)); }

/* ---- فضای استفاده‌شده ------------------------------------------------------ */
.stor__n { margin: .2rem 0 .7rem; font-size: 1rem; }
.stor__n b { font-size: 1.35rem; color: var(--ink); }
.stor__bar { block-size: 8px; border-radius: 999px; background: var(--line-soft, #f0ede6);
  overflow: hidden; margin-block-end: .9rem; }
.stor__bar > span { display: block; block-size: 100%; border-radius: inherit;
  background: var(--primary); }
.stor__bar--full > span { background: var(--danger, #cf3b3b); }
.stor__parts { margin: 0 0 .6rem; padding: 0; list-style: none; }
.stor__parts li { display: flex; justify-content: space-between; gap: 1rem;
  padding-block: .5rem; border-block-end: 1px solid var(--line); font-size: .9rem; }
.stor__parts li:last-child { border-block-end: 0; }
.stor__parts small { color: var(--muted); }

/* ======================================================================
   اسلایدهای صفحهٔ اصلی — rebuilt screen
   Appended after the label contract on purpose: several of these are
   CLASSED labels (label.sld-drop) that own their own spacing.
   ====================================================================== */
.slides-page { max-inline-size: 980px; }

/* ---- no slider yet ---- */
.sld-empty { text-align: center; padding-block: 2.2rem; }
.sld-empty h2 { margin: 1rem 0 .4rem; }
.sld-empty .hint { max-inline-size: 34rem; margin-inline: auto; }
.sld-empty form { margin-block-start: 1.2rem; }
.sld-empty__art { display: inline-flex; gap: .4rem; align-items: center; }
.sld-empty__art span { inline-size: 64px; block-size: 36px; border-radius: 8px;
  background: linear-gradient(135deg, var(--primary-050, #e9effa), #fff); border: 1px solid var(--line); }
.sld-empty__art span:nth-child(2) { inline-size: 96px; block-size: 44px;
  background: linear-gradient(135deg, var(--primary, #173F8A), var(--accent, #21B79C)); border: 0; }

/* ---- the list ---- */
.sld-list { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: .75rem; }
.sld { border: 1px solid var(--line); border-radius: var(--radius-sm, 12px); background: var(--card); }
.sld__row { display: grid; grid-template-columns: auto 220px 1fr auto; align-items: center;
  gap: .9rem; padding: .7rem .8rem; }
.sld__n { inline-size: 28px; block-size: 28px; border-radius: 50%; display: grid; place-items: center;
  background: var(--line-soft, #f0ede6); color: var(--ink-soft, #3d4a5f); font-weight: 800; font-size: .85rem; }
.sld__media { position: relative; display: block; inline-size: 220px; aspect-ratio: 16 / 6;
  border-radius: 10px; overflow: hidden; background: var(--line-soft, #f0ede6); }
/* Thumbnails MAY crop: they are a way to recognise a slide, not a preview
   of the storefront (which never crops). */
.sld__media > img:first-child { inline-size: 100%; block-size: 100%; object-fit: cover; display: block; }
.sld__mob { position: absolute; inset-block-end: 6px; inset-inline-end: 6px; inline-size: 30px;
  block-size: 42px; object-fit: cover; border-radius: 5px; border: 2px solid #fff;
  box-shadow: 0 2px 8px rgba(18, 35, 63, .25); }
.sld__none { display: grid; place-items: center; block-size: 100%; color: var(--muted); font-size: .8rem; }
.sld__body { display: flex; flex-direction: column; gap: .35rem; min-inline-size: 0; }
.sld__h { font-size: .95rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sld__meta { display: flex; flex-wrap: wrap; gap: .3rem; }
.sld__ops { display: flex; align-items: center; gap: .35rem; }
.sld__ops form { margin: 0; }
.sld__mv { min-inline-size: 40px; }
.sld__mv:disabled { opacity: .35; }

/* The editor: its summary is the no-JS way in; with JS the row's
   «ویرایش» opens it, so the summary is only a quiet bar. */
.sld__edit { border-block-start: 1px solid var(--line); }
.sld__edit > summary { cursor: pointer; padding: .55rem .9rem; font-size: .85rem; color: var(--muted);
  min-block-size: 40px; display: flex; align-items: center; }
.sld__edit[open] > summary { color: var(--primary); font-weight: 700; }
.sld-form { padding: .4rem 1rem 1rem; }

/* ---- the form, shared by add and edit ---- */
.sld-f { border: 0; margin: 0 0 1rem; padding: 0; min-inline-size: 0; }
.sld-f > legend { font-weight: 700; font-size: .92rem; margin-block-end: .6rem; padding: 0; }
.sld-f__imgs { display: grid; grid-template-columns: 2fr 1fr; gap: 1rem; }
label.sld-drop { display: flex; flex-direction: column; gap: .4rem; margin-block-end: 0; }
label.sld-drop > span.sld-drop__t { font-size: .85rem; font-weight: 600; margin-block-end: 0; }
.sld-drop__frame { position: relative; display: grid; place-items: center; aspect-ratio: 16 / 6;
  border: 2px dashed var(--line); border-radius: 12px; background: var(--line-soft, #f0ede6);
  overflow: hidden; cursor: pointer; }
.sld-drop--mob .sld-drop__frame { aspect-ratio: 4 / 5; max-block-size: 150px; }
.sld-drop__frame img { inline-size: 100%; block-size: 100%; object-fit: contain; background: #fff; }
.sld-drop__hint { color: var(--muted); font-size: .85rem; }
label.sld-drop:hover .sld-drop__frame { border-color: var(--primary); }
label.sld-drop input[type="file"] { font-size: .8rem; max-inline-size: 100%; }
.req { display: inline-block; margin-inline-start: .3rem; padding: 0 .4rem; border-radius: 999px;
  background: var(--warn-bg); color: var(--warn); font-size: .7rem; }
label.sld-f__drop { margin-block: .6rem 0; }
label.sld-f__toggle { margin-block-end: .9rem; }
.sld-f__text.is-off { opacity: .45; }
.sld-f__row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }
.sld-f__align { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.sld-f__align-l { font-size: .85rem; color: var(--ink-soft, #3d4a5f); }
.sld-form__acts { display: flex; gap: .6rem; padding-block-start: .4rem; }

/* ---- add ---- */
.sld-add { margin-block-start: 1rem; border: 2px dashed var(--line); border-radius: var(--radius-sm, 12px); }
.sld-add > summary { cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: center;
  gap: .4rem; min-block-size: 54px; font-weight: 700; color: var(--primary); }
.sld-add > summary::-webkit-details-marker { display: none; }
.sld-add[open] { border-style: solid; }
.sld-add[open] > summary { border-block-end: 1px solid var(--line); }

/* ---- whole-slider settings ---- */
.sld-set__row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; margin-block: 1rem .4rem; }
.sld-w > span { display: flex; flex-direction: column; align-items: center; gap: .35rem; text-align: center; }
.sld-w__art { display: block; inline-size: 88px; block-size: 34px; border-radius: 6px;
  background: var(--line-soft, #f0ede6); position: relative; }
.sld-w__art::after { content: ""; position: absolute; inset-block: 7px;
  background: linear-gradient(135deg, var(--primary, #173F8A), var(--accent, #21B79C)); border-radius: 3px; }
.sld-w__art--in::after { inset-inline: 14px; }
.sld-w__art--full::after { inset-inline: 0; border-radius: 0; }

@media (max-width: 720px) {
  .sld__row { grid-template-columns: auto 1fr; }
  .sld__media { grid-column: 1 / -1; grid-row: 1; inline-size: 100%; }
  .sld__n { grid-row: 2; }
  .sld__ops { grid-column: 1 / -1; flex-wrap: wrap; }
  .sld__ops > .btn--primary { flex: 1 1 auto; }
  .sld-f__imgs, .sld-f__row, .sld-set__row { grid-template-columns: 1fr; }
  .sld-drop--mob .sld-drop__frame { max-block-size: none; max-inline-size: 180px; }
}

/* The two width choices are cards with a picture of what they do, not
   text pills: a 999px radius turned them into ovals around the diagram. */
.pick-row label.pick.sld-w { border-radius: 12px; padding: .8rem 1.1rem; flex: 1 1 200px; justify-content: center; }
.pick-row label.pick.sld-w > span { align-items: center; }
/* With JavaScript the row's «ویرایش» opens the editor, so the bar that
   duplicated it goes; without JavaScript it stays, as the way in. */
.js .sld__edit > summary { display: none; }
.js .sld__edit[open] { border-block-start: 1px solid var(--line); }
/* The frame IS the button (it sits inside the label), so the browser's own
   file control — «Choose File / No file chosen», in English — is hidden but
   stays focusable; the frame shows the focus ring instead. */
label.sld-drop input[type="file"] { position: absolute; inline-size: 1px; block-size: 1px;
  opacity: 0; overflow: hidden; }
label.sld-drop { position: relative; }
label.sld-drop:focus-within .sld-drop__frame { outline: 2px solid var(--primary); outline-offset: 2px; }
.sld-drop__btn { position: absolute; inset-block-end: 8px; inset-inline-start: 8px; padding: .2rem .6rem;
  border-radius: 999px; background: rgba(18, 35, 63, .78); color: #fff; font-size: .75rem; font-weight: 600; }
.sld-drop__frame:has(img[hidden]) .sld-drop__btn { display: none; }

/* ======================================================================
   فوتر سایت (admin)
   ====================================================================== */
.footer-admin { max-inline-size: 900px; }

/* The footer drawn small: a map, and each part a way into its tab. */
.fmap { display: grid; gap: .5rem; margin-block-end: 1.3rem; padding: .8rem;
  border-radius: var(--radius-sm, 12px); background: var(--navy, #12233F); }
.fmap--light { background: #eef1f5; }
.fmap--brand { background: var(--primary, #173F8A); }
.fmap__cols { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: .5rem; }
.fmap__box { position: relative; display: flex; flex-direction: column; gap: .35rem; min-block-size: 44px;
  padding: .6rem .7rem; border-radius: 8px; border: 1px dashed rgba(255,255,255,.28);
  color: #fff; text-decoration: none; font-size: .8rem; }
.fmap--light .fmap__box { color: var(--ink); border-color: #c9d1dc; }
.fmap__box:hover { border-style: solid; border-color: #fff; background: rgba(255,255,255,.07); }
.fmap--light .fmap__box:hover { border-color: var(--primary); background: #fff; }
.fmap__box.is-off { opacity: .35; }
.fmap__box b { font-size: .8rem; }
.fmap__box i { display: block; block-size: 5px; border-radius: 3px; background: currentColor; opacity: .3; }
.fmap__box i.short { inline-size: 60%; }
.fmap__n { position: absolute; inset-block-start: -.45rem; inset-inline-start: -.45rem; inline-size: 20px;
  block-size: 20px; border-radius: 50%; display: grid; place-items: center; background: var(--accent, #21B79C);
  color: #fff; font-size: .7rem; font-weight: 800; }
.fmap__bottom { flex-direction: row; align-items: center; }

/* Link rows */
.flk__t { margin: 1rem 0 .5rem; font-weight: 700; font-size: .92rem; }
.flk__list { list-style: none; margin: 0 0 .6rem; padding: 0; display: grid; gap: .5rem; }
.flk__row { display: grid; grid-template-columns: 1fr 1.2fr auto; gap: .5rem; align-items: center;
  padding: .5rem; border: 1px solid var(--line); border-radius: 10px; background: var(--card); }
.flk__row > input, .flk__row > select { min-block-size: 42px; inline-size: 100%; min-inline-size: 0;
  padding-inline: .6rem; border: 1px solid var(--line); border-radius: 8px; font: inherit; background: #fff; }
.flk__row > .flk__url { grid-column: 1 / 3; }
.flk__ops { display: flex; gap: .25rem; }
.flk__ops .btn { min-inline-size: 38px; }
.flk__add { margin-block-end: .4rem; }

/* Tone swatches */
.ftone__sw { display: inline-block; inline-size: 18px; block-size: 18px; border-radius: 50%;
  margin-inline-end: .35rem; vertical-align: -4px; border: 1px solid var(--line); }
.ftone__sw--dark { background: var(--navy, #12233F); }
.ftone__sw--light { background: #eef1f5; }
.ftone__sw--brand { background: var(--primary, #173F8A); }
.pick-row label.pick.ftone > span { flex-direction: row; align-items: center; }

@media (max-width: 640px) {
  .fmap__cols { grid-template-columns: 1fr; }
  .flk__row { grid-template-columns: 1fr; }
  .flk__row > .flk__url { grid-column: auto; }
  .flk__ops { justify-content: flex-end; }
}

/* ---- ops: خطاها ---------------------------------------------------------- */
.errs { max-inline-size: 1000px; }
.errs__tabs { display: flex; gap: .4rem; margin-block-end: 1rem; }
.errs__tabs .chip { text-decoration: none; min-block-size: 36px; display: inline-flex; align-items: center; }
.errs__tabs .chip.is-on { background: var(--primary); color: #fff; }
.errs__list { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; }
.errs__row { display: grid; gap: .35rem; }
.errs__head { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .7rem; }
.errs__code { font-weight: 800; font-family: ui-monospace, monospace; }
.errs__when { font-size: .8rem; }
.errs__msg { margin: 0; font-family: ui-monospace, monospace; font-size: .82rem; text-align: left;
  overflow-wrap: anywhere; }
.errs__where { margin: 0; font-family: ui-monospace, monospace; font-size: .78rem; color: var(--muted); text-align: left;
  overflow-wrap: anywhere; }
.errs__ctx { margin: 0; font-size: .85rem; overflow-wrap: anywhere; }
.errs__act { margin: 0; justify-self: start; }

/* ---- popup: «تنظیمات پیشرفته» (admin) ---------------------------------- */
.popadv { display: grid; gap: 0 1rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr));
  margin-block-start: 1rem; }

/* ---- امکانات فروشگاه ------------------------------------------------------ */
.feat { list-style: none; margin: 0; padding: 0; }
.feat__row { display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding-block: .9rem; border-block-end: 1px solid var(--line); }
.feat__row:last-child { border-block-end: 0; }
label.feat__sw > span { display: flex; flex-direction: column; gap: .2rem; }
label.feat__sw small { color: var(--muted); font-size: .82rem; line-height: 1.7; }

/* =====================================================================
   لوگو و فاویکون — each card built round a preview of where it lands.
   ===================================================================== */
.logo-box{display:inline-flex;align-items:center;justify-content:center;padding:.7rem 1rem;
  background:#fff;border:1px solid #e5e7eb;border-radius:12px;margin-block-end:1rem}
.logo-box__img{max-height:56px;max-width:240px;width:auto;height:auto;display:block}
label.logo-upload{display:block;margin-block-end:.4rem}
.logo-upload>span{display:block;font-size:.9rem;color:#374151;margin-block-end:.35rem}

.brandgrid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; align-items:start; }
.brandgrid > .card{ margin:0; }
.brandcard{ display:grid; gap:.8rem; }
.brandcard h2{ margin:0; }
.brandcard h2 small{ font-weight:400; font-size:.8rem; color:var(--muted); }
.brandcard > .hint{ margin:0; }
.brandcard__head{ display:flex; align-items:center; justify-content:space-between; gap:.6rem; flex-wrap:wrap; }
.brandcard__note{ margin:0; font-size:.78rem; }

.brandstage{
  display:grid; gap:.5rem; padding:.8rem; border-radius:12px;
  /* A checkerboard: a transparent PNG shows as transparent, not as white. */
  background:
    conic-gradient(#eef0f3 25%, #fff 0 50%, #eef0f3 0 75%, #fff 0) 0 0 / 16px 16px;
  border:1px solid var(--line,#e5e7eb);
}
.brandstage__bar{
  display:flex; align-items:center; gap:.8rem; min-block-size:3.4rem; padding:.5rem .8rem;
  background:#fff; border-radius:10px; box-shadow:0 1px 3px rgba(16,24,40,.08);
}
.brandstage__bar--dark{ background:#12233f; color:#c9d3e3; }
.brandstage__bar--dark small{ margin-inline-start:auto; font-size:.72rem; opacity:.7; }
.brandstage__logo{ display:flex; align-items:center; min-inline-size:0; }
.brandstage__logo img{ max-block-size:40px; max-inline-size:160px; inline-size:auto; block-size:auto; display:block; }
.brandstage__logo b{ font-size:1rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.brandstage__bar--dark .brandstage__logo b{ color:#fff; }
.brandstage__nav{ display:flex; gap:.4rem; margin-inline-start:auto; }
.brandstage__nav i{ display:block; inline-size:2.2rem; block-size:.45rem; border-radius:99px; background:#e6e9ef; }
.brandstage__cart{ font-size:1rem; opacity:.6; }

.brandstage--fav{ grid-template-columns:1fr auto; align-items:center; }
.brandtab{
  display:flex; align-items:center; gap:.5rem; min-inline-size:0; max-inline-size:15rem;
  padding:.55rem .75rem; background:#fff; border-radius:10px 10px 0 0;
  box-shadow:0 1px 3px rgba(16,24,40,.08); border-block-end:2px solid var(--primary,#173f8a);
}
.brandtab__icon{ flex:0 0 auto; inline-size:16px; block-size:16px; display:inline-flex; align-items:center; justify-content:center; }
.brandtab__icon img{ inline-size:16px; block-size:16px; object-fit:contain; }
.brandtab__icon i{ font-style:normal; font-size:.8rem; }
.brandtab__title{ flex:1 1 auto; min-inline-size:0; font-size:.8rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.brandtab__x{ color:var(--muted); font-size:.85rem; }
.brandhome{ display:grid; justify-items:center; gap:.25rem; }
.brandhome__icon{
  inline-size:3.4rem; block-size:3.4rem; border-radius:.9rem; overflow:hidden; background:#fff;
  display:flex; align-items:center; justify-content:center; box-shadow:0 2px 6px rgba(16,24,40,.15);
}
.brandhome__icon img{ inline-size:100%; block-size:100%; object-fit:contain; }
.brandhome__icon i{ font-style:normal; font-weight:800; font-size:1.3rem; color:var(--primary,#173f8a); }
.brandhome small{ font-size:.7rem; color:var(--muted); }

label.dropzone{
  position:relative; display:grid; justify-items:center; gap:.2rem; text-align:center;
  padding:1.1rem 1rem; border:2px dashed #c9d1de; border-radius:12px; background:#fafbfc;
  cursor:pointer; transition:border-color .15s, background .15s;
}
.dropzone:hover, .dropzone.is-over{ border-color:var(--primary,#173f8a); background:rgba(23,63,138,.04); }
.dropzone.is-picked{ border-style:solid; border-color:var(--accent,#21b79c); background:rgba(33,183,156,.06); }
.dropzone__input{ position:absolute; inset:0; inline-size:100%; block-size:100%; opacity:0; cursor:pointer; }
.dropzone__icon{
  inline-size:2.2rem; block-size:2.2rem; border-radius:50%; display:inline-flex; align-items:center; justify-content:center;
  background:rgba(23,63,138,.08); color:var(--primary,#173f8a); font-size:1rem;
}
.dropzone b{ font-size:.92rem; overflow-wrap:anywhere; }
.dropzone small{ font-size:.78rem; color:var(--muted); }
.dropzone:focus-within{ outline:2px solid var(--primary,#173f8a); outline-offset:2px; }
.dropzone__err{ margin:.5rem 0 0; padding:.55rem .7rem; border-radius:8px; background:#fef3f2; color:#b42318; font-size:.84rem; }

@media (max-width:900px){
  .brandgrid{ grid-template-columns:1fr; }
}
@media (max-width:420px){
  .brandstage__nav{ display:none; }
  .brandstage__cart{ margin-inline-start:auto; }
}

/* =====================================================================
   آدرس فروشگاه — three states.
   ===================================================================== */
.dom-live{
  display:flex; align-items:center; gap:1rem; flex-wrap:wrap;
  border:1px solid rgba(33,183,156,.35);
  background:linear-gradient(135deg, rgba(33,183,156,.10), rgba(23,63,138,.04));
}
.dom-live__badge{
  flex:0 0 auto; inline-size:3.2rem; block-size:3.2rem; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--accent,#21b79c); color:#fff; font-size:1.5rem; font-weight:800;
  box-shadow:0 6px 16px rgba(33,183,156,.35);
}
.dom-live__main{ flex:1 1 14rem; min-inline-size:0; display:grid; gap:.3rem; }
.dom-live__host{ display:block; font-size:1.35rem; font-weight:800; color:var(--ink,#12233f); overflow-wrap:anywhere; }
.dom-live__chips{ display:flex; gap:.4rem; flex-wrap:wrap; }

.dom-auto{ list-style:none; margin:0; padding:0; display:grid; gap:.1rem; }
.dom-auto li{
  display:grid; gap:.15rem; padding:.7rem 2rem .7rem 0; position:relative;
  border-block-start:1px solid var(--line-soft,#eceff3);
}
.dom-auto li:first-child{ border-block-start:0; padding-block-start:.2rem; }
.dom-auto li::before{
  content:"✓"; position:absolute; inset-inline-start:0; inset-block-start:.7rem;
  inline-size:1.4rem; block-size:1.4rem; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--ok-bg,#e3f5f0); color:var(--ok,#12876f); font-size:.75rem; font-weight:800;
}
.dom-auto li:first-child::before{ inset-block-start:.2rem; }
.dom-auto b{ font-size:.92rem; }
.dom-auto span{ font-size:.84rem; color:var(--muted,#6b7280); line-height:1.9; }

.dom-next{ display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; }
.dom-next p{ margin:.2rem 0 0; }
.dom-renew{ display:grid; gap:.2rem; }
.dom-renew.is-soon{ border-color:var(--warn,#b5730a); background:var(--warn-bg,#fbf1df); }

details.dom-more > summary{ cursor:pointer; font-weight:700; min-block-size:2.75rem; display:flex; align-items:center; }
.dom-more__body{ display:grid; gap:.8rem; padding-block-start:.6rem; }
.dom-more__body form{ display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; }

.dom-now{ display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; }
.dom-now bdi{ overflow-wrap:anywhere; }

.dom-flow{
  list-style:none; margin:.2rem 0 .4rem; padding:0;
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.4rem;
}
.dom-flow li{
  display:flex; align-items:center; gap:.45rem; min-inline-size:0;
  padding:.5rem .6rem; border-radius:10px; background:var(--bg-soft,#f3f4f6);
  font-size:.8rem; color:var(--muted,#6b7280); font-weight:600;
}
.dom-flow li span{
  flex:0 0 auto; inline-size:1.5rem; block-size:1.5rem; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  background:#fff; font-size:.75rem; font-weight:800;
}
.dom-flow li.is-now{ background:rgba(23,63,138,.08); color:var(--primary,#173f8a); }
.dom-flow li.is-now span{ background:var(--primary,#173f8a); color:#fff; }
.dom-flow li.is-done{ background:var(--ok-bg,#e3f5f0); color:var(--ok,#12876f); }
.dom-flow li.is-done span{ background:var(--ok,#12876f); color:#fff; }

.dom-todo{ display:grid; gap:.6rem; }
.dom-todo > b{ font-size:.95rem; }
.dom-todo .hint{ margin:0; }
.dom-vals{ list-style:none; margin:0; padding:0; display:grid; gap:.4rem; }
.dom-val{ display:inline-flex; align-items:center; gap:.4rem; max-inline-size:100%; }
.dom-val code{
  padding:.35rem .6rem; border-radius:8px; background:var(--bg-soft,#f3f4f6);
  font-size:.86rem; overflow-wrap:anywhere;
}
.dom-copy{
  flex:0 0 auto; min-block-size:2.5rem; min-inline-size:3.2rem; padding:0 .6rem;
  border:1px solid var(--line,#e5e7eb); border-radius:8px; background:#fff; cursor:pointer;
  font:inherit; font-size:.78rem; font-weight:700; color:var(--primary,#173f8a);
}
.dom-copy:hover{ border-color:var(--primary,#173f8a); }
.dom-wait{
  display:grid; gap:.4rem; justify-items:start; padding:.8rem .9rem; border-radius:12px;
  background:rgba(33,183,156,.07); border:1px solid rgba(33,183,156,.25);
}
.dom-wait p{ margin:0; font-size:.85rem; line-height:1.9; }
.dom-block--bad{ background:var(--danger-bg,#fbeaea); border-color:var(--danger,#cf3b3b); }
.dom-block--bad p{ color:#7a2626; }
.dom-result details > summary{ cursor:pointer; font-size:.8rem; margin-block-start:.3rem; }

@media (max-width:600px){
  .dom-flow{ grid-template-columns:1fr; }
  .dom-live .btn{ inline-size:100%; }
}
.dom-help > summary,
.dom-result details > summary{ min-block-size:2.5rem; display:flex; align-items:center; }
.dom-val code{ white-space:nowrap; }
@media (max-width:600px){
  /* Records as stacked rows: «A · @» over the value and its copy button,
     instead of a three-column table that broke an IP across two lines. */
  .dom-dns thead{ display:none; }
  .dom-dns, .dom-dns tbody{ display:block; }
  .dom-dns tr{
    display:grid; grid-template-columns:auto 1fr; gap:.3rem .6rem; align-items:center;
    padding:.6rem 0; border-block-end:1px solid var(--line-soft,#eceff3);
  }
  .dom-dns td{ padding:0; border:0; }
  .dom-dns td:nth-child(1){ font-weight:800; }
  .dom-dns td:nth-child(2)::before{ content:"نام: "; color:var(--muted,#6b7280); font-size:.8rem; }
  .dom-dns td:nth-child(3){ grid-column:1 / -1; }
}

/* =====================================================================
   بخش‌های صفحهٔ اصلی — the home page as a page.
   ===================================================================== */
.sechead{ display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; flex-wrap:wrap; margin-block-end:.8rem; }
.sechead h2{ margin:0 0 .2rem; }
.sechead .hint{ margin:0; }

.secpage{
  border:1px solid var(--line,#e5e7eb); border-radius:14px; background:#f8f9fb;
  padding:.6rem; display:grid; gap:.5rem; margin-block-end:.8rem;
}
.secpage__chrome{
  display:flex; align-items:center; gap:.3rem; padding:.45rem .7rem; border-radius:9px;
  background:#e9edf3; color:#7a8594; font-size:.72rem;
}
.secpage__chrome span{ inline-size:.45rem; block-size:.45rem; border-radius:50%; background:#c6cdd8; }
.secpage__chrome b{ margin-inline-start:auto; font-weight:600; }
.secpage__chrome--foot{ background:#12233f; color:#b9c4d6; justify-content:center; }
.secpage__chrome--foot b{ margin:0; }

.seclist{ list-style:none; margin:0; padding:0; display:grid; gap:.5rem; }
.secitem{
  display:flex; align-items:center; gap:.8rem; min-inline-size:0;
  padding:.6rem .7rem; border-radius:12px; background:#fff;
  border:1px solid var(--line,#e5e7eb); box-shadow:0 1px 2px rgba(16,24,40,.05);
}
.secitem__text{ flex:1 1 auto; min-inline-size:0; display:grid; gap:.15rem; }
.secitem__text strong{ font-size:.94rem; }
.secitem__text span{ font-size:.8rem; color:var(--muted,#6b7280); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mb-op--del{ color:#b42318; }
.mb-op--del:hover{ border-color:#b42318; background:#fef3f2; color:#b42318; }
a.mb-op{ display:inline-flex; align-items:center; text-decoration:none; }

/* The wireframes. Four <i> per thumb, arranged per type. */
.secthumb{
  flex:0 0 auto; inline-size:4.6rem; block-size:3.1rem; border-radius:8px; padding:.3rem;
  background:#eef2f8; border:1px solid #dde3ec; display:grid; gap:.18rem; overflow:hidden;
}
.secthumb i{ display:block; border-radius:3px; background:#c3cedf; min-block-size:.3rem; }
.secthumb--hero{ grid-template-columns:1.2fr 1fr; grid-template-rows:1fr .45fr .45fr; }
.secthumb--hero i:nth-child(1){ grid-row:1 / 4; grid-column:2; background:#8fa7cf; }
.secthumb--hero i:nth-child(2){ background:#5b77a8; }
.secthumb--hero i:nth-child(4){ background:var(--accent,#21b79c); inline-size:70%; }
.secthumb--slider{ grid-template-columns:1fr; grid-template-rows:1fr .25rem; }
.secthumb--slider i:nth-child(1){ background:#8fa7cf; }
.secthumb--slider i:nth-child(2){ inline-size:40%; justify-self:center; background:#5b77a8; }
.secthumb--slider i:nth-child(n+3){ display:none; }
.secthumb--product-grid, .secthumb--blog-grid{ grid-template-columns:repeat(4,1fr); grid-template-rows:.3rem 1fr; }
.secthumb--product-grid i, .secthumb--blog-grid i{ grid-row:2; background:#fff; border:1px solid #c3cedf; }
.secthumb--product-grid::before, .secthumb--blog-grid::before{ content:""; grid-column:1 / 3; grid-row:1; border-radius:3px; background:#5b77a8; }
.secthumb--blog-grid i:nth-child(4){ display:none; }
.secthumb--blog-grid{ grid-template-columns:repeat(3,1fr); }
.secthumb--category-tiles{ grid-template-columns:repeat(2,1fr); grid-template-rows:repeat(2,1fr); }
.secthumb--category-tiles i{ background:#a9b9d6; border-radius:5px; }
.secthumb--brand-strip{ grid-template-columns:repeat(4,1fr); align-items:center; }
.secthumb--brand-strip i{ block-size:1.1rem; border-radius:50%; background:#b7c3d9; }
.secthumb--trust-badges{ grid-template-columns:repeat(4,1fr); align-items:center; }
.secthumb--trust-badges i{ block-size:1rem; inline-size:1rem; justify-self:center; border-radius:50%; background:var(--accent,#21b79c); opacity:.75; }
.secthumb--text-block{ grid-template-rows:.45rem repeat(3,.25rem); align-content:center; }
.secthumb--text-block i:nth-child(1){ inline-size:55%; background:#5b77a8; }
.secthumb--text-block i:nth-child(4){ inline-size:70%; }
.secthumb--faq{ grid-template-rows:repeat(4,1fr); }
.secthumb--faq i{ background:#fff; border:1px solid #c3cedf; }
.secthumb--chips-bar{ grid-template-columns:repeat(4,1fr); align-items:center; }
.secthumb--chips-bar i{ block-size:.7rem; border-radius:99px; background:#b7c3d9; }

/* Picker: the types as pictures. */
.secpick{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.55rem; }
label.secpick__opt{ position:relative; display:block; cursor:pointer; }
.secpick__opt input{ position:absolute; opacity:0; inset:0; }
.secpick__box{
  display:grid; justify-items:center; gap:.3rem; text-align:center; block-size:100%;
  padding:.75rem .5rem; border:2px solid var(--line,#e5e7eb); border-radius:12px; background:#fff;
}
.secpick__box b{ font-size:.86rem; }
.secpick__box small{ font-size:.72rem; color:var(--muted,#6b7280); line-height:1.6; }
.secpick__opt:hover .secpick__box{ border-color:#aab8d4; }
.secpick__opt input:checked + .secpick__box{ border-color:var(--primary,#173f8a); background:rgba(23,63,138,.05); box-shadow:0 0 0 3px rgba(23,63,138,.12); }
.secpick__opt input:focus-visible + .secpick__box{ outline:2px solid var(--primary,#173f8a); outline-offset:2px; }

.secedit{ display:grid; gap:1rem; align-content:start; }
.secedit__form{ display:grid; gap:.8rem; }
.secedit__form textarea{ inline-size:100%; }
.secedit__img{ display:grid; gap:.5rem; justify-items:start; padding-block-start:.8rem; border-block-start:1px solid var(--line,#e5e7eb); }
.secedit__preview{ max-inline-size:100%; max-block-size:9rem; border-radius:10px; border:1px solid var(--line,#e5e7eb); }
.secedit__up{ display:grid; gap:.5rem; justify-items:start; }

@media (max-width:720px){
  .secitem{ flex-wrap:wrap; }
  .secitem__text{ flex-basis:calc(100% - 5.6rem); }
  .secitem .mb-item__ops{ inline-size:100%; justify-content:flex-end; flex-wrap:wrap; }
  .sechead .btn--primary{ inline-size:100%; }
}
@media (max-width:420px){
  .secpick{ grid-template-columns:1fr; }
}

/* =====================================================================
   دستیار پشتیبان — the chat drawer (every panel page, tenant only).
   ===================================================================== */
/* The floating launcher: the support person herself, with an «online» dot.
   Bottom-left = the content side of this RTL panel, clear of the sidebar.
   --fab-lift raises it over whatever else lives at the bottom of the page. */
.asst-fab{
  --fab-lift: 0px;
  position:fixed; z-index:60;
  inset-inline-end:1.5rem; inset-block-end:calc(1.5rem + var(--fab-lift));
  display:inline-flex; align-items:center; gap:.65rem;
  padding-block:.35rem; padding-inline:.35rem 1.2rem; border:0; border-radius:999px; cursor:pointer;
  background:linear-gradient(135deg, var(--primary,#173f8a), #1f4fae);
  color:#fff; font:inherit; text-align:start;
  box-shadow:0 10px 26px rgba(23,63,138,.34), 0 2px 6px rgba(16,24,40,.12);
  transition:transform .18s ease, box-shadow .18s ease, inset-block-end .2s ease, opacity .15s ease;
}
.asst-fab:hover{ transform:translateY(-2px); box-shadow:0 14px 32px rgba(23,63,138,.4), 0 2px 6px rgba(16,24,40,.12); }
.asst-fab:active{ transform:translateY(0); }
.asst-fab:focus-visible{ outline:3px solid var(--accent,#21b79c); outline-offset:3px; }
.asst-fab__av{ position:relative; flex:none; inline-size:2.9rem; block-size:2.9rem; }
.asst-fab__av img{ display:block; inline-size:100%; block-size:100%; border-radius:50%; object-fit:cover;
  background:#e9f8f3; box-shadow:0 0 0 2px #fff; }
/* «online»: green, with a soft ring that breathes */
.asst-fab__dot{ position:absolute; inset-block-end:1px; inset-inline-start:1px; inline-size:.8rem; block-size:.8rem;
  border-radius:50%; background:#22c55e; box-shadow:0 0 0 2px #fff; }
.asst-fab__dot::after{ content:""; position:absolute; inset:0; border-radius:50%; background:#22c55e;
  animation:asst-online 2.4s ease-out infinite; }
@keyframes asst-online{ 0%{ transform:scale(1); opacity:.55; } 70%,100%{ transform:scale(2.4); opacity:0; } }
.asst-fab__text{ display:grid; line-height:1.45; }
.asst-fab__text b{ font-size:.92rem; font-weight:800; }
.asst-fab__text small{ font-size:.76rem; opacity:.85; }
/* A page with a sticky «ذخیره» bar: stand above it, never on its button. */
body:has(.form-actions, .form-actions--sticky) .asst-fab{ --fab-lift: 4.5rem; }
/* Out of the way while the chat (or any drawer) is open. */
body.has-drawer .asst-fab{ opacity:0; pointer-events:none; transform:scale(.9); }

@media (max-width: 899px){
  /* Phone: just her face, above the bottom navigation bar. */
  .asst-fab{
    inset-inline-end:1rem;
    inset-block-end:calc(4.6rem + env(safe-area-inset-bottom, 0px) + var(--fab-lift));
    padding:.2rem;
  }
  .asst-fab__av{ inline-size:3.2rem; block-size:3.2rem; }
  .asst-fab__dot{ inline-size:.85rem; block-size:.85rem; }
  .asst-fab__text{ position:absolute; inline-size:1px; block-size:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
  body:has(.form-actions, .form-actions--sticky) .asst-fab{ --fab-lift: 5.25rem; }
}
@media (prefers-reduced-motion: reduce){ .asst-fab{ transition:none; } .asst-fab__dot::after{ animation:none; } }

.asst__panel{ inline-size:min(26rem, 100%); }
.asst .drawer__head{ gap:.5rem; }
.asst__clear{
  margin-inline-start:auto; border:0; background:none; cursor:pointer; font:inherit;
  font-size:.78rem; color:var(--muted,#6b7280); padding:.4rem .5rem; border-radius:8px; min-block-size:2.5rem;
}
.asst__clear:hover{ background:var(--bg-soft,#f3f4f6); color:var(--ink,#12233f); }
.asst .drawer__x{ margin-inline-start:0; }

.asst__log{
  flex:1 1 auto; overflow-y:auto; padding:1rem; display:flex; flex-direction:column; gap:.6rem;
  background:var(--bg,#f7f5f0);
}
.asst__msg{
  max-inline-size:88%; padding:.6rem .8rem; border-radius:14px; line-height:1.9; font-size:.9rem;
  white-space:pre-line; overflow-wrap:anywhere;
}
.asst__msg--bot{ align-self:flex-start; background:var(--card,#fff); border:1px solid var(--line,#e5e7eb); border-start-start-radius:4px; }
.asst__msg--me{ align-self:flex-end; background:var(--primary,#173f8a); color:#fff; border-start-end-radius:4px; }
.asst__msg--wait{ color:var(--muted,#6b7280); font-style:italic; }
.asst__msg--err{ align-self:flex-start; background:#fef3f2; color:#b42318; border:1px solid #f3c4c0; }
.asst__links{ display:flex; flex-wrap:wrap; gap:.35rem; margin-block-start:.5rem; white-space:normal; }
.asst__link{
  display:inline-flex; align-items:center; min-block-size:2.25rem; padding:.2rem .7rem; border-radius:999px;
  background:rgba(23,63,138,.08); color:var(--primary,#173f8a); font-weight:700; font-size:.8rem; text-decoration:none;
}
.asst__link:hover{ background:rgba(23,63,138,.16); }
.asst__fb{ display:flex; gap:.35rem; margin-block-start:.45rem; font-size:.78rem; color:var(--muted,#6b7280); white-space:normal; }
.asst__fbbtn{
  border:1px solid var(--line,#e5e7eb); background:none; border-radius:999px; cursor:pointer;
  font:inherit; font-size:.75rem; color:var(--muted,#6b7280); padding:.15rem .6rem; min-block-size:2rem;
}
.asst__fbbtn:hover{ border-color:var(--primary,#173f8a); color:var(--primary,#173f8a); }
.asst__chips{ display:flex; flex-wrap:wrap; gap:.4rem; }
.asst__chip{
  border:1px solid rgba(23,63,138,.25); background:var(--card,#fff); color:var(--primary,#173f8a);
  border-radius:999px; padding:.35rem .8rem; cursor:pointer; font:inherit; font-size:.8rem; min-block-size:2.5rem;
}
.asst__chip:hover{ background:rgba(23,63,138,.06); }
.asst__ticket{
  align-self:stretch; display:grid; gap:.5rem; padding:.8rem; border-radius:12px;
  background:var(--card,#fff); border:1px dashed var(--accent,#21b79c);
}
.asst__ticket b{ font-size:.85rem; }
.asst__tsubj, .asst__tbody{ inline-size:100%; font:inherit; font-size:.88rem; }
.asst__trow{ display:flex; gap:.5rem; flex-wrap:wrap; }
.asst__form{
  display:flex; gap:.5rem; align-items:flex-end; padding:.7rem .8rem;
  border-block-start:1px solid var(--line,#e5e7eb); background:var(--card,#fff);
}
.asst__form textarea{ flex:1 1 auto; min-inline-size:0; resize:none; font:inherit; font-size:.9rem; min-block-size:2.75rem; }
.asst__send{ flex:0 0 auto; min-block-size:2.75rem; }
.asst__foot{
  margin:0; padding:.2rem .8rem .7rem; padding-block-end:max(.7rem, env(safe-area-inset-bottom));
  font-size:.75rem; color:var(--muted,#6b7280); background:var(--card,#fff);
}
.asst__foot a{ color:var(--primary,#173f8a); font-weight:700; }
@media (prefers-reduced-motion: reduce){ .asst .drawer__panel{ transition:none; } }

/* ---- console: دستیار پشتیبان (/kb) ---------------------------------- */
.kbp__acts{ display:flex; gap:.5rem; flex-wrap:wrap; }
.kbp__editor{ display:grid; gap:.8rem; border:1px solid rgba(23,63,138,.25); }
.kbp__editor h2{ margin:0; }
.kbp__form{ display:grid; gap:.8rem; }
.kbp__form textarea{ inline-size:100%; }
.kbp__row{ display:flex; gap:.5rem; flex-wrap:wrap; align-items:center; }
.kbp__log, .kbp__entries{ list-style:none; margin:.8rem 0 0; padding:0; display:grid; gap:.6rem; }
.kbp__q, .kbp__entry{ display:grid; gap:.5rem; margin:0; }
.kbp__qhead{ display:flex; gap:.4rem .6rem; flex-wrap:wrap; align-items:center; }
.kbp__when{ font-size:.8rem; margin-inline-start:auto; }
.kbp__question{ margin:0; font-weight:700; line-height:1.9; overflow-wrap:anywhere; }
.kbp__answer{ margin:0; font-size:.88rem; color:var(--muted,#5a6577); line-height:1.9; }
.kbp__ans > summary{ cursor:pointer; font-size:.82rem; color:var(--primary,#173f8a); min-block-size:2.25rem; display:flex; align-items:center; }
.kbp__ans p{ margin:.3rem 0 0; font-size:.86rem; line-height:1.9; white-space:pre-line; }
.kbp__entry--off{ opacity:.7; }
.kbp__h{ margin:1.2rem 0 0; font-size:1rem; }

/* Console — assistant usage («مصرف») */
.kbu__sum{ display:grid; grid-template-columns:repeat(auto-fit, minmax(9rem, 1fr)); gap:.6rem; margin:.8rem 0; }
.kbu__stat{ display:grid; gap:.2rem; padding:.75rem .9rem; border-radius:12px; background:var(--surface,#fff);
  border:1px solid var(--line,#e6e8ee); }
.kbu__stat span{ font-size:.8rem; color:var(--muted,#5a6577); }
.kbu__stat b{ font-size:1.15rem; color:var(--ink,#12233f); }
.kbu__tbl td, .kbu__tbl th{ white-space:nowrap; }
.kbu__tbl td:nth-child(-n+2){ white-space:normal; min-inline-size:6.5rem; overflow-wrap:anywhere; }
/* Phone: one card per person — a label beside every number, no sideways scroll. */
@media (max-width: 699px){
  .kbu__tbl, .kbu__tbl tbody, .kbu__tbl tr, .kbu__tbl td{ display:block; inline-size:100%; }
  .kbu__tbl thead{ display:none; }
  .kbu__tbl tr{ padding:.7rem .85rem; margin-block-end:.6rem; border:1px solid var(--line,#e6e8ee); border-radius:12px; background:var(--surface,#fff); }
  .kbu__tbl td{ display:flex; justify-content:space-between; gap:1rem; padding:.3rem 0; border:0; white-space:normal; }
  .kbu__tbl td::before{ content:attr(data-label); color:var(--muted,#5a6577); font-size:.82rem; font-weight:400; flex:none; }
  .kbu__tbl td:first-child{ display:block; padding-block-end:.45rem; margin-block-end:.2rem; border-block-end:1px solid var(--line,#e6e8ee); }
  .kbu__tbl td:first-child::before{ content:none; }
  .kbu__tbl td:nth-child(2){ min-inline-size:0; }
  .kbu__mob{ display:inline; margin-inline-start:.4rem; }
  .kbu__sum{ grid-template-columns:repeat(2, 1fr); }
}
.kbu__mob{ display:block; font-size:.76rem; text-align:end; }
.kbu__usd{ font-variant-numeric:tabular-nums; font-weight:700; }

/* Assistant — who you are talking to, and the quick replies */
.asst__who{ display:flex; align-items:center; gap:.65rem; min-inline-size:0; margin-inline-end:auto; }
.asst__avatar{ position:relative; flex:none; inline-size:2.6rem; block-size:2.6rem; }
.asst__avatar img{ display:block; inline-size:100%; block-size:100%; border-radius:50%; object-fit:cover; background:#e9f8f3;
  box-shadow:0 0 0 2px rgba(33,183,156,.25); }
.asst__on{ display:inline-block; inline-size:.5rem; block-size:.5rem; border-radius:50%; background:#22c55e;
  margin-inline-end:.3rem; vertical-align:.05em; }
.asst__id{ display:grid; min-inline-size:0; }
.asst__id h2{ margin:0; font-size:1rem; line-height:1.5; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.asst__role{ font-size:.76rem; color:var(--muted,#5a6577); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.asst__replies{ display:flex; flex-wrap:wrap; gap:.45rem; margin-block:-.1rem .2rem; }
.asst__reply{ min-block-size:2.5rem; padding:.35rem .95rem; border-radius:999px; cursor:pointer; font:inherit; font-size:.86rem; font-weight:700;
  border:1.5px solid var(--primary,#173f8a); background:#fff; color:var(--primary,#173f8a); }
.asst__reply:first-child{ background:var(--primary,#173f8a); color:#fff; }
.asst__reply:hover{ box-shadow:0 2px 8px rgba(23,63,138,.2); }
.asst__reply:focus-visible{ outline:3px solid var(--accent,#21b79c); outline-offset:2px; }
.asst__clear{ white-space:nowrap; flex:none; }
@media (max-width: 479px){ .asst__ai{ display:none; } }

.kbp .hint + .errs__tabs{ margin-block-start:.6rem; }

/* Console — the persona's picture */
.kbav{ display:flex; gap:1.2rem; align-items:flex-start; flex-wrap:wrap; }
.kbav__img{ inline-size:112px; block-size:112px; border-radius:50%; object-fit:cover; background:#e9f8f3;
  box-shadow:0 0 0 4px rgba(33,183,156,.18); flex:none; }
.kbav__body{ display:grid; gap:.7rem; flex:1 1 18rem; min-inline-size:0; }
.kbav__body h2{ margin:0; font-size:1.05rem; }
.kbav__file{ flex:1 1 16rem; margin:0; }

/* Assistant — the time in each bubble's corner, Telegram-style */
.asst__meta{ display:flex; justify-content:flex-end; align-items:center; gap:.25rem;
  margin-block-start:.3rem; font-size:.7rem; line-height:1; color:var(--muted,#5a6577); user-select:none; }
.asst__meta time{ font-variant-numeric:tabular-nums; }
.asst__msg--me .asst__meta{ color:rgba(255,255,255,.72); }
.asst__tick{ font-size:.72rem; letter-spacing:-.18em; }
.asst__tick.is-read{ color:#8ff0d8; }

/* =====================================================================
   «لینک بایو» — the editor (admin/views/instagram/bio.php)
   Desktop: the editor beside a sticky phone that shows the page live.
   Under 1100px the phone moves behind «پیش‌نمایش» (a full drawer).
   ===================================================================== */
.bioed{ padding-block-end:1rem; }
.bioed svg{ display:block; }
.bioed__svg{ display:inline-flex; inline-size:1.2rem; block-size:1.2rem; }
.bioed__svg svg{ inline-size:100%; block-size:100%; }
.bioed__first{ margin-block-end:1rem; }

/* the link card */
.bioed__link{ display:grid; gap:.4rem; margin-block-end:1.1rem; }
.bioed__linkrow{ display:flex; flex-wrap:wrap; align-items:center; gap:.6rem .75rem; }
.bioed__url{
  flex:1 1 15rem; min-inline-size:0; display:flex; align-items:baseline; gap:0;
  padding:.6rem .9rem; border-radius:12px; background:var(--primary-050,#e9effa);
  font-size:1rem; overflow:hidden; white-space:nowrap; text-overflow:ellipsis;
}
.bioed__url-p{ color:var(--muted); font-size:.85rem; }
.bioed__url b{ color:var(--primary); overflow:hidden; text-overflow:ellipsis; }
.bioed__acts{ display:flex; flex-wrap:wrap; gap:.45rem; }
.bioed__acts .btn{ display:inline-flex; align-items:center; gap:.4rem; min-block-size:2.75rem; }
.bioed__acts .btn svg{ inline-size:1.05rem; block-size:1.05rem; }
.bioed__enable{ margin-block:.35rem 0; }
.bioed__how{ font-size:.88rem; }
.bioed__how > summary{ cursor:pointer; color:var(--primary); font-weight:700; min-block-size:2.5rem; display:flex; align-items:center; }
.bioed__how ol{ margin:.2rem 0 .4rem; padding-inline-start:1.3rem; line-height:2.1; color:var(--ink-soft,#3d4a5f); }

/* layout */
.bioed__grid{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:1.6rem; align-items:start; }
.bioed__main{ min-inline-size:0; }
.bioed__side{ position:sticky; inset-block-start:1rem; display:grid; justify-items:center; gap:.7rem; }
/* The frame is as big as the window allows; the page inside is always laid
   out at a real phone's width (375px) and scaled to fit (bio-editor.js sets
   the scale), so a short laptop screen shows a small phone, not a squeezed
   page. */
.bioed__phone{
  position:relative; box-sizing:border-box;
  inline-size:clamp(280px, calc((100vh - 8rem) * .4615), 340px); aspect-ratio:9/19.5;
  border:10px solid var(--navy,#12233f); border-radius:44px; overflow:hidden; background:#fff;
  box-shadow:0 24px 60px rgba(18,35,63,.22), inset 0 0 0 1px rgba(255,255,255,.08);
}
.bioed__phone iframe{
  position:absolute; inset-block-start:0; right:0; display:block;
  inline-size:375px; block-size:812px; border:0; transform-origin:top right;
}
.bioed__live{ margin:0; max-inline-size:20rem; text-align:center; font-size:.78rem; color:var(--muted); display:flex; gap:.4rem; align-items:center; }
.bioed__live i{ flex:none; inline-size:.5rem; block-size:.5rem; border-radius:50%; background:var(--accent,#21b79c); box-shadow:0 0 0 3px rgba(33,183,156,.2); }
.bioed__pvbtn{ display:none; }
@media (max-width:1099px){
  .bioed__grid{ grid-template-columns:minmax(0,1fr); }
  .bioed__side{ display:none; }
  .bioed__pvbtn{ display:inline-flex; }
}

/* sections */
.bioed__sec{ margin-block-end:1rem; }
.bioed__sec > h2{ margin:0 0 .8rem; font-size:1rem; }
.bioed__sec > h2 small{ font-weight:400; font-size:.8rem; }
.bioed__count{ display:block; text-align:end; font-size:.74rem; color:var(--muted); margin-block-start:.2rem; font-variant-numeric:tabular-nums; }

/* the block list */
.bioed__list{ list-style:none; margin:0; padding:0; display:grid; gap:.55rem; }
.bioed__row{
  position:relative; display:flex; align-items:center; gap:.45rem;
  padding:.4rem .5rem .4rem .55rem; border:1px solid var(--line); border-radius:14px; background:var(--card,#fff);
  box-shadow:0 1px 2px rgba(18,35,63,.04); transition:box-shadow .15s ease, border-color .15s ease;
}
.bioed__row:hover{ border-color:#d6d0c3; box-shadow:0 4px 14px rgba(18,35,63,.07); }
.bioed__row.is-off .bioed__ic, .bioed__row.is-off .bioed__rowmain{ opacity:.55; }
.bioed__row.is-dragging{ z-index:3; box-shadow:0 16px 36px rgba(18,35,63,.22); border-color:var(--primary); cursor:grabbing; }
.bioed__list.is-sorting{ user-select:none; }
.bioed__drag{
  flex:none; inline-size:2rem; block-size:2.75rem; display:grid; place-items:center; padding:0;
  border:0; border-radius:8px; background:none; color:#a39e92; cursor:grab; touch-action:none;
}
.bioed__drag svg{ inline-size:1.1rem; block-size:1.1rem; fill:currentColor; }
.bioed__drag:hover, .bioed__drag:focus-visible{ color:var(--primary); background:var(--primary-050,#e9effa); }
.bioed__ic{
  flex:none; inline-size:2.5rem; block-size:2.5rem; display:grid; place-items:center; border-radius:50%;
  background:var(--primary-050,#e9effa); color:var(--primary);
}
.bioed__ic .bioed__svg{ inline-size:1.25rem; block-size:1.25rem; }
.bioed__rowmain{
  flex:1 1 auto; min-inline-size:0; display:grid; gap:.05rem; padding:.35rem .25rem; border:0; background:none;
  text-align:start; font:inherit; color:inherit; cursor:pointer; min-block-size:2.75rem; align-content:center;
}
.bioed__rowmain b, .bioed__rowmain small{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.bioed__rowmain b{ font-size:.93rem; }
.bioed__rowmain small{ font-size:.78rem; color:var(--muted); }
.bioed__rowtype{ font-weight:700; color:var(--ink-soft,#3d4a5f); }
.bioed__pills{ flex:none; display:flex; gap:.25rem; }
.bioed__onoff{ flex:none; }
.bioed__menu > summary{ inline-size:2.5rem; block-size:2.5rem; display:grid; place-items:center; }
@media (max-width:560px){
  .bioed__pills .pill:not(.pill--warn){ display:none; }
  .bioed__ic{ display:none; }
}
.bioed__empty{ margin-block:.3rem .6rem; }
.bioed__add{
  inline-size:100%; margin-block-start:.75rem; min-block-size:3.3rem;
  display:flex; align-items:center; justify-content:center; gap:.5rem;
  border:2px dashed #cfc8b8; border-radius:14px; background:transparent; cursor:pointer;
  color:var(--primary); font:inherit; font-weight:800; font-size:.95rem;
  transition:background .15s ease, border-color .15s ease;
}
.bioed__add:hover{ background:var(--primary-050,#e9effa); border-color:var(--primary); }
.bioed__add svg{ inline-size:1.2rem; block-size:1.2rem; }
.bioed__tip{ margin-block-start:.7rem; }

/* pictures */
.bioed__avatar-row, .bioed__bgrow{ display:flex; flex-wrap:wrap; align-items:center; gap:1rem; margin-block-end:.9rem; }
.bioed__media{
  position:relative; flex:none; overflow:hidden; display:grid; place-items:center;
  background:var(--line-soft,#f0ede6); border:1px solid var(--line); color:var(--muted);
}
.bioed__media img{ inline-size:100%; block-size:100%; object-fit:cover; display:block; }
.bioed__media[hidden], .bioed__media img[hidden], .bioed__media-empty[hidden]{ display:none; }
.bioed__media--round{ inline-size:5.5rem; block-size:5.5rem; border-radius:50%; }
.bioed__media--sq{ inline-size:4.5rem; block-size:4.5rem; border-radius:14px; }
.bioed__media--wide{ inline-size:10rem; block-size:6.5rem; border-radius:14px; }
.bioed__media-empty{ font-size:2rem; font-weight:800; }
.bioed__media-empty svg, .bioed__media-empty .bioed__svg{ inline-size:1.8rem; block-size:1.8rem; }
.bioed__media.is-busy{ opacity:.5; }
.bioed__media-acts{ display:flex; flex-wrap:wrap; align-items:center; gap:.45rem; }
.bioed__media-acts .hint{ flex-basis:100%; margin:0; }
.bioed__file{ position:relative; overflow:hidden; cursor:pointer; min-block-size:2.75rem; display:inline-flex; align-items:center; }
.bioed__file input[type=file]{ position:absolute; inset:0; opacity:0; cursor:pointer; inline-size:100%; font-size:0; }
.bioed__file:focus-within{ box-shadow:0 0 0 3px rgba(23,63,138,.25); }

/* contact channels */
.bioed__socials{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:.7rem 1rem; }
@media (max-width:640px){ .bioed__socials{ grid-template-columns:minmax(0,1fr); } }
.bioed__soc{ display:grid; gap:.3rem; margin:0; }
.bioed__soc-l{ font-size:.84rem; font-weight:700; }
.bioed__soc-row{ display:flex; align-items:center; gap:.55rem; }
.bioed__soc-ic{
  flex:none; inline-size:2.5rem; block-size:2.5rem; display:grid; place-items:center;
  border-radius:50%; background:var(--line-soft,#f0ede6); color:var(--navy,#12233f);
}
.bioed__soc-ic svg{ inline-size:1.2rem; block-size:1.2rem; }
.bioed__soc-row input{ flex:1 1 auto; min-inline-size:0; inline-size:100%; }

/* look */
.bioed__presets{ display:grid; grid-template-columns:repeat(auto-fill, minmax(6.4rem, 1fr)); gap:.8rem; }
.bioed__preset{ display:grid; gap:.35rem; margin:0; cursor:pointer; text-align:center; }
.bioed__preset input{ position:absolute; opacity:0; inline-size:1px; block-size:1px; }
.bioed__preset-card{
  display:grid; justify-items:center; align-content:start; gap:5px; aspect-ratio:3/4; padding:.7rem .55rem;
  border-radius:14px; box-shadow:inset 0 0 0 1px rgba(0,0,0,.08); transition:transform .15s ease, box-shadow .15s ease;
}
.bioed__preset:hover .bioed__preset-card{ transform:translateY(-2px); }
.bioed__preset input:checked + .bioed__preset-card{ box-shadow:0 0 0 3px var(--primary), 0 8px 18px rgba(18,35,63,.18); }
.bioed__preset input:focus-visible + .bioed__preset-card{ box-shadow:0 0 0 3px var(--accent,#21b79c); }
.bioed__preset-card i{ display:block; }
.bioed__preset-av{ inline-size:1.35rem; block-size:1.35rem; border-radius:50%; box-shadow:0 0 0 2px rgba(255,255,255,.7); }
.bioed__preset-ln{ inline-size:55%; block-size:3px; border-radius:3px; opacity:.55; margin-block-end:3px; }
.bioed__preset-btn{ inline-size:88%; block-size:.62rem; border-radius:999px; }
.bioed__preset-card2{ inline-size:88%; block-size:1.1rem; border-radius:5px; margin-block-start:2px; box-shadow:0 1px 3px rgba(0,0,0,.08); }
.bioed__preset-l{ font-size:.8rem; font-weight:700; }
.bioed__preset input:checked ~ .bioed__preset-l{ color:var(--primary); }
.bioed__opts{ display:flex; flex-wrap:wrap; align-items:center; gap:.5rem 1rem; margin-block:.75rem; }
.bioed__opts-l{ min-inline-size:5.5rem; font-weight:700; font-size:.88rem; }
.bioed__seg{ display:flex; flex-wrap:wrap; gap:.4rem; }
.bioed__segopt{ margin:0; cursor:pointer; }
.bioed__segopt input{ position:absolute; opacity:0; inline-size:1px; block-size:1px; }
.bioed__segopt > span{
  display:inline-flex; align-items:center; gap:.45rem; min-block-size:2.6rem; padding:.35rem .85rem;
  border:1.5px solid var(--line); border-radius:10px; background:#fff; font-size:.86rem; transition:border-color .12s, background .12s;
}
.bioed__segopt input:checked + span{ border-color:var(--primary); background:var(--primary-050,#e9effa); color:var(--primary); font-weight:700; }
.bioed__segopt input:focus-visible + span{ box-shadow:0 0 0 3px rgba(23,63,138,.25); }
.bioed__shape, .bioed__style{ display:inline-block; inline-size:1.7rem; block-size:.85rem; }
.bioed__shape{ border:2px solid currentColor; }
.bioed__shape--pill{ border-radius:999px; }
.bioed__shape--round{ border-radius:5px; }
.bioed__shape--square{ border-radius:0; }
.bioed__style{ border-radius:999px; }
.bioed__style--solid{ background:currentColor; }
.bioed__style--outline{ border:2px solid currentColor; }
.bioed__style--soft{ background:currentColor; opacity:.28; }
.bioed__color{ display:flex; align-items:center; gap:.5rem; }
.bioed__color input[type=color]{ inline-size:3.2rem; block-size:2.6rem; padding:3px; border:1px solid var(--line); border-radius:10px; background:#fff; cursor:pointer; }

/* stats */
.bioed__kpis{ display:grid; grid-template-columns:repeat(auto-fit, minmax(9.5rem, 1fr)); gap:.65rem; margin-block:.8rem 1rem; }
.bioed__kpi{ display:grid; gap:.15rem; padding:.85rem 1rem; border-radius:14px; background:#fff; border:1px solid var(--line); }
.bioed__kpi span{ font-size:.8rem; color:var(--muted); }
.bioed__kpi b{ font-size:1.35rem; color:var(--navy,#12233f); font-variant-numeric:tabular-nums; }
.bioed__kpi small{ font-size:.74rem; color:var(--muted); }
.bioed__chart{ inline-size:100%; block-size:8.5rem; }
.bioed__chart rect{ fill:var(--primary); }
.bioed__chart rect.is-zero{ fill:var(--line); }
.bioed__chart rect:hover{ fill:var(--accent,#21b79c); }
.bioed__chart-x{ display:flex; justify-content:space-between; font-size:.75rem; color:var(--muted); margin-block-start:.3rem; }
.bioed__clicks{ list-style:none; margin:0; padding:0; display:grid; gap:.6rem; }
.bioed__clicks li{ display:grid; grid-template-columns:2.3rem minmax(0,1fr) auto; align-items:center; gap:.65rem; }
.bioed__clicks-ic{ inline-size:2.3rem; block-size:2.3rem; display:grid; place-items:center; border-radius:50%; background:var(--primary-050,#e9effa); color:var(--primary); }
.bioed__clicks-ic svg{ inline-size:1.1rem; block-size:1.1rem; }
.bioed__clicks-l{ display:grid; gap:.3rem; min-inline-size:0; }
.bioed__clicks-l b{ font-size:.88rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.bioed__clicks-l i{ display:block; block-size:.4rem; min-inline-size:.3rem; border-radius:999px; background:linear-gradient(90deg, var(--accent,#21b79c), var(--primary)); }
.bioed__clicks-n{ font-weight:800; font-variant-numeric:tabular-nums; }

/* the save bar */
.bioed__bar{ display:flex; align-items:center; gap:.6rem; }
.bioed__state{ flex:1 1 auto; min-inline-size:0; font-size:.85rem; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.bioed__state.is-dirty{ color:var(--warn,#b5730a); font-weight:700; }
.bioed__state.is-dirty::before{ content:""; display:inline-block; inline-size:.5rem; block-size:.5rem; margin-inline-end:.4rem; border-radius:50%; background:currentColor; vertical-align:.1em; }

/* drawers */
.bioed__types{ display:grid; gap:.6rem; }
.bioed__type{
  display:flex; align-items:center; gap:.85rem; padding:.8rem .9rem; text-align:start; cursor:pointer;
  border:1px solid var(--line); border-radius:14px; background:#fff; font:inherit; color:inherit;
  transition:border-color .12s, background .12s;
}
.bioed__type:hover, .bioed__type:focus-visible{ border-color:var(--primary); background:var(--primary-050,#e9effa); }
.bioed__type-ic{ flex:none; inline-size:2.7rem; block-size:2.7rem; display:grid; place-items:center; border-radius:12px; background:var(--primary-050,#e9effa); color:var(--primary); }
.bioed__type-ic svg{ inline-size:1.3rem; block-size:1.3rem; }
.bioed__type-t{ display:grid; gap:.1rem; }
.bioed__type-t b{ font-size:.94rem; }
.bioed__type-t small{ font-size:.8rem; color:var(--muted); line-height:1.7; }
.bioed__linkf{ display:grid; gap:.45rem; margin-block-end:.6rem; }
.bioed__linkf .field{ margin-block-end:0; }
.bioed__linkhint{ color:var(--ok,#12876f); }
.bioed__pick{ inline-size:100%; }
.bioed__quick{ display:flex; flex-wrap:wrap; gap:.4rem; }
.bioed__quick .chip{ display:inline-flex; align-items:center; gap:.35rem; min-block-size:2.4rem; cursor:pointer; }
.bioed__quick .bioed__svg{ inline-size:1rem; block-size:1rem; }
.bioed__mf{ display:grid; gap:.45rem; margin-block:.3rem .8rem; }
.bioed__mf-l{ font-size:.88rem; font-weight:700; }
.bioed__mf .bioed__avatar-row, .bioed__mf .bioed__bgrow{ margin:0; }
.bioed__sched{ margin-block-start:1rem; padding-block-start:.8rem; border-block-start:1px solid var(--line); }
.bioed__sched > summary{ cursor:pointer; color:var(--primary); font-weight:700; min-block-size:2.5rem; display:flex; align-items:center; }
.bioed__schedgrid{ display:grid; gap:.6rem; }
.bioed__schedrow{ display:grid; grid-template-columns:minmax(1.6rem, max-content) minmax(0,1fr) 7.5rem; align-items:center; gap:.5rem; }
.bioed__schedl{ font-weight:700; font-size:.86rem; }
.bioed__bad{ color:var(--danger,#cf3b3b) !important; }
.bioed__side-link{ display:inline-block; margin-block-start:.3rem; font-weight:700; font-size:.88rem; }
.bioed__qr{ display:grid; justify-items:center; align-content:start; gap:.7rem; text-align:center; }
.bioed__qrimg{ inline-size:min(17rem, 78vw); padding:.6rem; background:#fff; border-radius:16px; box-shadow:0 10px 30px rgba(18,35,63,.14); }
.bioed__qrimg svg{ display:block; inline-size:100%; block-size:auto; aspect-ratio:1; }
.bioed__qrurl{ margin:0; font-weight:800; color:var(--navy,#12233f); }
.bioed__pvbody{ padding:0; display:flex; }
.bioed__pvbody iframe{ flex:1 1 auto; inline-size:100%; min-block-size:calc(100vh - 4.5rem); border:0; display:block; }
.bioed__pvdrawer .drawer__panel{ inline-size:min(100vw, 30rem); }
.toast .bioed__toastact{ border:0; background:none; padding:0; cursor:pointer; font:inherit; font-weight:800; }

/* =====================================================================
   «ابزارهای اینستاگرام» — hub, links, QR, writer, studio, campaign pages
   ===================================================================== */
.ihub__group{ margin-block-end:1.4rem; }
.ihub__h{ margin:0 0 .6rem; font-size:.95rem; color:var(--muted); font-weight:700; }
.ihub__grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(19rem, 1fr)); gap:.8rem; }
.ihub__card{
  display:flex; align-items:center; gap:.9rem; padding:1rem 1.05rem; border-radius:16px; background:#fff;
  border:1px solid var(--line); text-decoration:none; color:inherit; transition:border-color .15s, box-shadow .15s, transform .15s;
}
.ihub__card:hover{ border-color:var(--primary); box-shadow:0 8px 22px rgba(18,35,63,.08); transform:translateY(-1px); }
.ihub__ic{ flex:none; inline-size:3rem; block-size:3rem; display:grid; place-items:center; border-radius:14px; background:var(--primary-050,#e9effa); color:var(--primary); }
.ihub__ic svg{ inline-size:1.45rem; block-size:1.45rem; }
.ihub__body{ flex:1 1 auto; min-inline-size:0; display:grid; gap:.2rem; }
.ihub__body b{ font-size:1rem; }
.ihub__desc{ font-size:.84rem; color:var(--ink-soft,#3d4a5f); line-height:1.8; }
.ihub__stat{ justify-self:start; margin-block-start:.25rem; padding:.1rem .6rem; border-radius:999px; font-size:.76rem; background:var(--line-soft,#f0ede6); color:var(--muted); }
.ihub__stat.is-live{ background:var(--ok-bg,#e3f5f0); color:var(--ok,#12876f); font-weight:700; }
.ihub__go{ flex:none; color:var(--muted); }
.ihub__go svg{ inline-size:1.1rem; block-size:1.1rem; }
.ihub__tip h2{ margin:0 0 .5rem; font-size:1rem; }
.ihub__tip ol{ margin:0; padding-inline-start:1.3rem; line-height:2.1; font-size:.9rem; }

/* shared: product picker, destination field, back link */
.kit-pp{ display:grid; gap:.5rem; }
.kit-pp__q{ inline-size:100%; }
.kit-pp__status{ margin:0; font-size:.78rem; }
.kit-pp__res{ display:grid; gap:.35rem; max-block-size:18rem; overflow:auto; padding:.15rem; }
.kit-pp__chosen{ display:grid; gap:.35rem; }
.kit-pp__item{
  display:flex; align-items:center; gap:.6rem; inline-size:100%; padding:.4rem .5rem; min-block-size:3.2rem; text-align:start;
  border:1px solid var(--line); border-radius:12px; background:#fff; font:inherit; color:inherit; cursor:pointer;
}
button.kit-pp__item:hover{ border-color:var(--primary); background:var(--primary-050,#e9effa); }
.kit-pp__item.is-on{ border-color:var(--primary); background:var(--primary-050,#e9effa); }
.kit-pp__item--on{ cursor:default; border-color:var(--primary); }
.kit-pp__img{ flex:none; inline-size:2.6rem; block-size:2.6rem; border-radius:8px; overflow:hidden; background:var(--line-soft,#f0ede6); }
.kit-pp__img img{ inline-size:100%; block-size:100%; object-fit:cover; display:block; }
.kit-pp__t{ flex:1 1 auto; min-inline-size:0; display:grid; }
.kit-pp__t b{ font-size:.86rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.kit-pp__t small{ font-size:.76rem; color:var(--muted); }
.kit-pp__add{ flex:none; inline-size:1.8rem; block-size:1.8rem; display:grid; place-items:center; border-radius:50%; background:var(--line-soft,#f0ede6); font-weight:800; color:var(--primary); }
.kit-pp__item.is-on .kit-pp__add{ background:var(--primary); color:#fff; }
.kit-pp__x, .kit-pp__mv{ flex:none; min-block-size:2.4rem; min-inline-size:2.4rem; padding:0 .6rem; border:0; border-radius:8px; background:var(--line-soft,#f0ede6); cursor:pointer; font:inherit; font-size:.82rem; font-weight:700; color:var(--ink-soft,#3d4a5f); }
.kit-pp__x:hover{ background:var(--danger-bg,#fbeaea); color:var(--danger,#cf3b3b); }
.kit-pp__mv:disabled{ opacity:.35; cursor:default; }
.kit-dest{ display:grid; gap:.45rem; margin-block-end:.7rem; }
.kit-dest .field{ margin-block-end:0; }
.kit-dest__hint{ color:var(--ok,#12876f); }
.kit-dest__row{ display:flex; flex-wrap:wrap; gap:.45rem; }
.kit-dest__sel{ flex:1 1 12rem; min-inline-size:0; }
.kit-dest__pp{ padding:.6rem; border:1px dashed var(--line); border-radius:12px; }
.bioed__back{ display:inline-flex; align-items:center; min-block-size:2.2rem; font-size:.84rem; font-weight:700; color:var(--primary); text-decoration:none; }

/* short links */
.ilinks__list{ list-style:none; margin:0; padding:0; display:grid; gap:.6rem; }
.ilinks__row{ display:flex; flex-wrap:wrap; align-items:center; gap:.6rem 1rem; margin:0; }
.ilinks__row.is-off{ opacity:.65; }
.ilinks__main{ flex:1 1 16rem; min-inline-size:0; display:grid; gap:.15rem; }
.ilinks__url{ font-weight:800; font-size:.98rem; color:var(--primary); text-decoration:none; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; text-align:end; }
.ilinks__sub{ font-size:.8rem; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ilinks__tag{ justify-self:start; font-size:.72rem; padding:.05rem .5rem; border-radius:999px; background:var(--accent-050,#e4f6f2); color:var(--accent-600,#1a9c85); }
.ilinks__stat{ flex:none; display:grid; justify-items:center; min-inline-size:5.5rem; }
.ilinks__stat b{ font-size:1.25rem; color:var(--navy,#12233f); font-variant-numeric:tabular-nums; }
.ilinks__stat small{ font-size:.72rem; }
.ilinks__acts{ flex:none; display:flex; align-items:center; gap:.5rem; }
.ilinks__utm h2{ margin:0 0 .3rem; font-size:1rem; }
.ilinks__presets{ display:flex; flex-wrap:wrap; gap:.4rem; align-items:center; margin-block:.3rem .8rem; }
.ilinks__presets .chip{ min-block-size:2.4rem; cursor:pointer; }
.ilinks__presets .chip.is-on{ background:var(--primary); color:#fff; border-color:var(--primary); }
.ilinks__presets-l{ font-size:.82rem; font-weight:700; }
.ilinks__out{ display:grid; gap:.35rem; margin-block:.4rem .7rem; padding:.8rem .9rem; border-radius:12px; background:var(--primary-050,#e9effa); }
.ilinks__out-l{ font-size:.8rem; font-weight:700; color:var(--muted); }
.ilinks__out code{ font-size:.86rem; word-break:break-all; color:var(--navy,#12233f); background:none; }
.ilinks__outacts{ display:flex; flex-wrap:wrap; gap:.5rem; }
.ilinks__outacts a[aria-disabled="true"]{ opacity:.45; pointer-events:none; }
.ilinks__slug{ display:flex; align-items:stretch; border:1.5px solid var(--line); border-radius:var(--radius,10px); background:#fff; overflow:hidden; }
.ilinks__slug:focus-within{ border-color:var(--primary); box-shadow:0 0 0 3px rgba(23,63,138,.14); }
.ilinks__slug-h{ display:flex; align-items:center; padding:0 .7rem; background:var(--line-soft,#f0ede6); color:var(--muted); font-size:.86rem; white-space:nowrap; }
.ilinks__slug input{ flex:1 1 auto; min-inline-size:0; border:0 !important; box-shadow:none !important; border-radius:0; }
.ilinks__ok{ color:var(--ok,#12876f) !important; font-weight:700; }
.ilinks__track{ margin-block:.5rem; }
.ilinks__src{ display:grid; gap:.05rem; }
.ilinks__src small{ font-size:.76rem; }
.ilinks__track > summary{ cursor:pointer; font-weight:700; color:var(--primary); min-block-size:2.5rem; display:flex; align-items:center; }
@media (max-width:700px){
  .ilinks__rep thead{ display:none; }
  .ilinks__rep, .ilinks__rep tbody, .ilinks__rep tr, .ilinks__rep td{ display:block; inline-size:100%; }
  .ilinks__rep tr{ padding:.7rem .85rem; margin-block-end:.6rem; border:1px solid var(--line); border-radius:12px; background:#fff; }
  .ilinks__rep td{ display:flex; justify-content:space-between; gap:1rem; padding:.25rem 0; border:0; }
  .ilinks__rep td::before{ content:attr(data-label); color:var(--muted); font-size:.82rem; }
  .ilinks__rep .ilinks__src{ justify-items:end; text-align:end; }
  .ilinks__stat{ justify-items:start; }
}

/* QR maker, writer, studio: controls beside a sticky result */
.iqr__grid, .iwr__grid, .ist__grid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(18rem, 26rem); gap:1.4rem; align-items:start; }
.iqr__out, .ist__out{ position:sticky; inset-block-start:1rem; display:grid; gap:.7rem; justify-items:center; }
@media (max-width:1000px){
  .iqr__grid, .iwr__grid, .ist__grid{ grid-template-columns:minmax(0,1fr); }
  .iqr__out, .ist__out{ position:static; order:-1; }
}
.iqr__kinds{ margin-block-end:.9rem; }
.iqr__fixed{ margin:0 0 .3rem; font-weight:800; color:var(--navy,#12233f); }
.iqr__dyn{ margin-block-start:1rem; padding-block-start:.9rem; border-block-start:1px solid var(--line); }
.iqr__dyn .pill{ margin-inline-start:.3rem; font-size:.7rem; }
.iqr__colors{ display:flex; flex-wrap:wrap; gap:.5rem; align-items:center; }
.iqr__sw{ position:relative; cursor:pointer; }
.iqr__sw input[type=radio]{ position:absolute; opacity:0; inline-size:1px; block-size:1px; }
.iqr__sw span{ display:block; inline-size:2.4rem; block-size:2.4rem; border-radius:50%; box-shadow:inset 0 0 0 1px rgba(0,0,0,.12); }
.iqr__sw input:checked + span{ box-shadow:0 0 0 3px #fff, 0 0 0 5px var(--primary); }
.iqr__sw input:focus-visible + span{ box-shadow:0 0 0 3px #fff, 0 0 0 5px var(--accent,#21b79c); }
.iqr__sw--custom input{ -webkit-appearance:none; appearance:none; inline-size:2.4rem; block-size:2.4rem; padding:0; border-radius:50%; border:0; box-shadow:inset 0 0 0 1px rgba(0,0,0,.12); cursor:pointer; overflow:hidden; background:none; }
.iqr__sw--custom input::-webkit-color-swatch-wrapper{ padding:0; }
.iqr__sw--custom input::-webkit-color-swatch{ border:0; border-radius:50%; }
.iqr__sw--custom input::-moz-color-swatch{ border:0; border-radius:50%; }
.iqr__sw--custom input:focus-visible{ outline:2px solid var(--accent,#21b79c); outline-offset:3px; }
.iqr__sw--custom.is-on input{ box-shadow:0 0 0 3px #fff, 0 0 0 5px var(--primary); }
.iqr__stage{ inline-size:min(100%, 22rem); padding:.8rem; border-radius:20px; background:#fff; border:1px solid var(--line); box-shadow:0 12px 30px rgba(18,35,63,.1); }
.iqr__stage canvas{ display:block; inline-size:100%; block-size:auto; }
.iqr__target{ margin:0; max-inline-size:22rem; font-size:.8rem; color:var(--muted); word-break:break-all; text-align:center; }
.iqr__note, .iqr__tip{ margin:0; max-inline-size:22rem; text-align:center; }
.iqr__dl{ display:flex; flex-wrap:wrap; gap:.5rem; justify-content:center; }

/* writer */
.iwr__kinds{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:.5rem; margin-block-end:.8rem; }
.iwr__kind{ cursor:pointer; margin:0; }
.iwr__kind input{ position:absolute; opacity:0; inline-size:1px; block-size:1px; }
.iwr__kind > span{ display:grid; gap:.1rem; padding:.7rem .75rem; min-block-size:3.6rem; border:1.5px solid var(--line); border-radius:12px; background:#fff; text-align:center; }
.iwr__kind b{ font-size:.9rem; }
.iwr__kind small{ font-size:.74rem; color:var(--muted); }
.iwr__kind input:checked + span{ border-color:var(--primary); background:var(--primary-050,#e9effa); }
.iwr__kind input:checked + span b{ color:var(--primary); }
.iwr__kind input:focus-visible + span{ box-shadow:0 0 0 3px rgba(23,63,138,.25); }
.iwr__switches{ display:flex; flex-wrap:wrap; gap:0 1.2rem; }
.iwr__switches .switch-row{ margin-block:.4rem; }
.iwr__go{ inline-size:100%; min-block-size:3.1rem; font-size:1rem; margin-block-start:.4rem; }
.iwr__ai{ margin:.6rem 0 0; font-size:.8rem; color:var(--muted); line-height:1.9; }
.iwr__ai.is-on b{ color:var(--ok,#12876f); }
.iwr__out{ display:grid; gap:.7rem; position:sticky; inset-block-start:1rem; }
@media (max-width:1000px){ .iwr__out{ position:static; } }
.iwr__results{ display:grid; gap:.7rem; }
.iwr__card{ display:grid; gap:.5rem; transition:box-shadow .2s; }
.iwr__card.is-copied{ box-shadow:0 0 0 2px var(--ok,#12876f); }
.iwr__cardh{ display:flex; justify-content:space-between; align-items:baseline; gap:.5rem; }
.iwr__count{ font-size:.74rem; color:var(--muted); }
.iwr__text{ inline-size:100%; font-size:.92rem; line-height:1.95; resize:vertical; }
.iwr__acts{ display:flex; justify-content:flex-end; }
.iwr__mode{ margin:0; }
.iwr__after{ display:flex; flex-wrap:wrap; gap:.5rem; }
.iwr__card.is-loading{ gap:.6rem; }
.iwr__sk{ display:block; block-size:.9rem; border-radius:6px; background:linear-gradient(90deg, var(--line-soft,#f0ede6), #fff, var(--line-soft,#f0ede6)); background-size:200% 100%; animation:iwr-sk 1.2s linear infinite; }
.iwr__sk--short{ inline-size:55%; }
@keyframes iwr-sk{ from{ background-position:200% 0; } to{ background-position:-200% 0; } }
@media (prefers-reduced-motion: reduce){ .iwr__sk{ animation:none; } }

/* studio */
.ist__modes{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:.5rem; margin-block-end:1rem; }
.ist__mode{ display:grid; gap:.1rem; padding:.7rem .6rem; min-block-size:3.6rem; border:1.5px solid var(--line); border-radius:12px; background:#fff; cursor:pointer; font:inherit; color:inherit; }
.ist__mode b{ font-size:.9rem; }
.ist__mode small{ font-size:.72rem; color:var(--muted); }
.ist__mode.is-on{ border-color:var(--primary); background:var(--primary-050,#e9effa); }
.ist__mode.is-on b{ color:var(--primary); }
@media (max-width:640px){ .ist__modes{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
.ist__chips{ display:flex; flex-wrap:wrap; gap:.35rem; margin-block:-.2rem .8rem; }
.ist__chips .chip{ cursor:pointer; min-block-size:2.3rem; }
.ist__subh{ font-weight:700; font-size:.86rem; margin-block:.6rem .4rem; }
.ist__layouts{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:.5rem; margin-block-end:.8rem; }
.ist__layout{ margin:0; cursor:pointer; }
.ist__layout input{ position:absolute; opacity:0; inline-size:1px; block-size:1px; }
.ist__layout > span{ display:grid; justify-items:center; gap:.35rem; padding:.55rem; border:1.5px solid var(--line); border-radius:12px; background:#fff; font-size:.82rem; font-weight:700; }
.ist__layout input:checked + span{ border-color:var(--primary); background:var(--primary-050,#e9effa); color:var(--primary); }
.ist__layout input:focus-visible + span{ box-shadow:0 0 0 3px rgba(23,63,138,.25); }
.ist__lay{ display:block; inline-size:2.4rem; block-size:3.6rem; border-radius:6px; background:var(--line-soft,#f0ede6); position:relative; overflow:hidden; }
.ist__lay::before{ content:""; position:absolute; background:#b8c2d3; }
.ist__lay--card::before{ inset:18% 12% 38% 12%; border-radius:3px; }
.ist__lay--full::before{ inset:0; }
.ist__lay--full::after{ content:""; position:absolute; inset:55% 0 0 0; background:linear-gradient(180deg, transparent, rgba(0,0,0,.5)); }
.ist__lay--frame{ background:#dfe6f3; }
.ist__lay--frame::before{ inset:22% 18% 40% 18%; border:2px solid #fff; border-radius:4px; }
.ist__themes{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:.5rem; margin-block:.3rem .6rem; }
.ist__theme{ display:grid; justify-items:center; gap:.25rem; margin:0; cursor:pointer; text-align:center; }
.ist__theme input{ position:absolute; opacity:0; inline-size:1px; block-size:1px; }
.ist__theme small{ font-size:.72rem; }
.ist__theme-sw{ display:block; inline-size:100%; aspect-ratio:1.6; border-radius:10px; box-shadow:inset 0 0 0 1px rgba(0,0,0,.08); }
.ist__theme input:checked + .ist__theme-sw{ box-shadow:0 0 0 3px #fff, 0 0 0 5px var(--primary); }
.ist__theme input:focus-visible + .ist__theme-sw{ box-shadow:0 0 0 3px #fff, 0 0 0 5px var(--accent,#21b79c); }
.ist__theme-sw--navygold{ background:linear-gradient(135deg,#12233f,#1f3a66 70%,#d4af37); }
.ist__theme-sw--white{ background:linear-gradient(135deg,#ffffff,#eef1f5); }
.ist__theme-sw--black{ background:linear-gradient(135deg,#0d0d0d,#2a2a2a 70%,#f5c542); }
.ist__theme-sw--rose{ background:linear-gradient(135deg,#fff1f6,#ffd3e2 70%,#c2336a); }
.ist__theme-sw--mint{ background:linear-gradient(135deg,#e8fbf5,#c4f0e0 70%,#0f7d69); }
.ist__theme-sw--festival{ background:linear-gradient(135deg,#ff8a00,#e52e71); }
.ist__theme-sw--yalda{ background:linear-gradient(135deg,#7a0f1e,#b31b2c 70%,#ffd166); }
.ist__stage{ inline-size:min(100%, 22rem); aspect-ratio:9/16; border-radius:18px; overflow:hidden; background:#e9ecf1; box-shadow:0 18px 44px rgba(18,35,63,.18); }
.ist__stage canvas{ display:block; inline-size:100%; block-size:100%; }
.ist__dl{ display:flex; flex-wrap:wrap; gap:.5rem; justify-content:center; }
.ist__tip{ margin:0; max-inline-size:22rem; text-align:center; }
.ist__covers{ list-style:none; margin:0 0 .6rem; padding:0; display:grid; gap:.45rem; }
.ist__covli{ display:flex; align-items:center; gap:.55rem; }
.ist__covli.is-off > input[type=text], .ist__covli.is-off .ist__icsv{ opacity:.45; }
.ist__covli > input[type=text]{ flex:1 1 auto; min-inline-size:0; }
.ist__icpick{ position:relative; }
.ist__icpick > summary{ list-style:none; cursor:pointer; inline-size:2.75rem; block-size:2.75rem; display:grid; place-items:center; border:1.5px solid var(--line); border-radius:10px; background:#fff; color:var(--primary); }
.ist__icpick > summary::-webkit-details-marker{ display:none; }
.ist__icsv svg{ inline-size:1.3rem; block-size:1.3rem; display:block; }
.ist__icgrid{ position:absolute; z-index:20; inset-block-start:calc(100% + .3rem); inset-inline-start:0; inline-size:15.5rem; display:grid; grid-template-columns:repeat(5, 1fr); gap:.3rem; padding:.5rem; background:#fff; border:1px solid var(--line); border-radius:12px; box-shadow:0 14px 30px rgba(18,35,63,.16); }
.ist__icbtn{ aspect-ratio:1; display:grid; place-items:center; border:1px solid transparent; border-radius:8px; background:none; cursor:pointer; color:var(--navy,#12233f); min-block-size:2.6rem; }
.ist__icbtn svg{ inline-size:1.35rem; block-size:1.35rem; }
.ist__icbtn:hover, .ist__icbtn.is-on{ border-color:var(--primary); background:var(--primary-050,#e9effa); color:var(--primary); }
.ist__coverrow{ display:flex; flex-wrap:wrap; gap:.6rem; justify-content:center; max-inline-size:24rem; }
.ist__cov{ display:grid; justify-items:center; gap:.2rem; padding:0; border:0; background:none; cursor:pointer; font:inherit; }
.ist__cov canvas{ inline-size:3.6rem; block-size:3.6rem; border-radius:50%; box-shadow:0 0 0 2px #fff, 0 0 0 3.5px #d0d5dd; }
.ist__cov.is-on canvas{ box-shadow:0 0 0 2px #fff, 0 0 0 3.5px var(--primary); }
.ist__cov small{ font-size:.7rem; color:var(--ink-soft,#3d4a5f); max-inline-size:4.5rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* campaign pages */
.ipages__start h2{ margin:0 0 .8rem; font-size:1.05rem; }
.ipages__tpls{ display:grid; grid-template-columns:repeat(auto-fill, minmax(15rem, 1fr)); gap:.8rem; }
.ipages__tpl{ display:grid; justify-items:start; gap:.35rem; padding:1rem; text-align:start; border:1px solid var(--line); border-radius:16px; background:#fff; cursor:pointer; font:inherit; color:inherit; transition:border-color .15s, box-shadow .15s, transform .15s; }
.ipages__tpl:hover{ border-color:var(--primary); box-shadow:0 8px 22px rgba(18,35,63,.08); transform:translateY(-1px); }
.ipages__tpl small{ font-size:.82rem; color:var(--ink-soft,#3d4a5f); line-height:1.8; }
.ipages__tpl-ic, .ipages__ic, .ipages__opt-ic{ display:grid; place-items:center; inline-size:2.8rem; block-size:2.8rem; border-radius:12px; background:var(--primary-050,#e9effa); color:var(--primary); flex:none; }
.ipages__tpl-ic svg, .ipages__ic svg, .ipages__opt-ic svg{ inline-size:1.35rem; block-size:1.35rem; }
.ipages__tpl-url{ font-size:.76rem; color:var(--muted); }
.ipages__list{ list-style:none; margin:0; padding:0; display:grid; gap:.6rem; }
.ipages__row{ display:flex; flex-wrap:wrap; align-items:center; gap:.6rem 1rem; margin:0; }
.ipages__main{ flex:1 1 15rem; min-inline-size:0; display:grid; gap:.1rem; }
.ipages__title{ font-weight:800; font-size:1rem; color:var(--navy,#12233f); text-decoration:none; }
.ipages__title:hover{ color:var(--primary); }
.ipages__url{ font-size:.82rem; color:var(--primary); text-decoration:none; justify-self:start; }
.ipages__views{ display:grid; justify-items:center; min-inline-size:4.5rem; }
.ipages__views b{ font-size:1.15rem; }
.ipages__views small{ font-size:.72rem; color:var(--muted); }
.ipages__acts{ display:flex; align-items:center; gap:.45rem; }
.ipages__pick, .ipages__heads{ display:grid; gap:.5rem; margin-block-end:1rem; }
.ipages__opt{ margin:0; cursor:pointer; }
.ipages__opt input{ position:absolute; opacity:0; inline-size:1px; block-size:1px; }
.ipages__opt > span{ display:grid; grid-template-columns:auto 1fr; column-gap:.75rem; align-items:center; padding:.7rem .8rem; border:1.5px solid var(--line); border-radius:14px; background:#fff; }
.ipages__heads .ipages__opt > span{ grid-template-columns:1fr; }
.ipages__opt-ic{ grid-row:span 2; }
.ipages__opt b{ font-size:.92rem; }
.ipages__opt small{ font-size:.78rem; color:var(--muted); line-height:1.7; }
.ipages__opt input:checked + span{ border-color:var(--primary); background:var(--primary-050,#e9effa); }
.ipages__opt input:focus-visible + span{ box-shadow:0 0 0 3px rgba(23,63,138,.25); }
.ipages__prod{ margin-block:-.3rem .9rem; display:grid; gap:.4rem; }
.ipages__when{ margin-block-start:.4rem; }

/* =====================================================================
   «اعتبار پیامک و هوش مصنوعی» (merchant) + «اعتبار و هزینه» (ops)
   ===================================================================== */
.cred__cards{ display:grid; grid-template-columns:repeat(auto-fit, minmax(20rem, 1fr)); gap:1rem; margin-block-end:1rem; }
.cred__card{ display:flex; flex-direction:column; gap:.55rem; margin:0; }
.cred__card-top{ display:flex; align-items:center; gap:.65rem; }
.cred__card-top h2{ margin:0; font-size:1.05rem; }
.cred__ic{ flex:none; inline-size:2.6rem; block-size:2.6rem; display:grid; place-items:center; border-radius:12px; }
.cred__ic svg{ inline-size:1.35rem; block-size:1.35rem; }
.cred__ic--sms{ background:var(--primary-050,#e9effa); color:var(--primary); }
.cred__ic--ai{ background:var(--accent-050,#e4f6f2); color:var(--accent-600,#1a9c85); }
.cred__big{ margin:0; font-size:2rem; font-weight:800; color:var(--navy,#12233f); font-variant-numeric:tabular-nums; line-height:1.3; }
.cred__big small{ font-size:.9rem; font-weight:600; color:var(--muted); }
.cred__big.is-low{ color:var(--warn,#b5730a); }
.cred__big.is-bad{ color:var(--danger,#cf3b3b); }
.cred__warn{ margin:0; padding:.6rem .75rem; border-radius:10px; background:var(--danger-bg,#fbeaea); color:var(--danger,#b42318); font-size:.84rem; line-height:1.8; }
.cred__meter{ block-size:.5rem; border-radius:999px; background:var(--line-soft,#f0ede6); overflow:hidden; }
.cred__meter span{ display:block; block-size:100%; border-radius:inherit; background:linear-gradient(90deg, var(--accent,#21b79c), var(--primary,#173f8a)); }
.cred__facts{ margin:0; display:grid; gap:.35rem; }
.cred__facts > div{ display:flex; justify-content:space-between; align-items:baseline; gap:1rem; padding-block:.3rem; border-block-end:1px dashed var(--line); }
.cred__facts > div:last-child{ border-block-end:0; }
.cred__facts dt{ color:var(--muted); font-size:.86rem; }
.cred__facts dd{ margin:0; font-weight:800; font-variant-numeric:tabular-nums; text-align:end; }
.cred__facts dd small{ display:block; font-size:.72rem; font-weight:500; color:var(--muted); }
.cred__note{ margin:0; }
.cred__card-acts{ display:flex; flex-wrap:wrap; gap:.5rem; margin-block-start:auto; padding-block-start:.3rem; }

.cred__buy h2{ margin:0 0 .8rem; font-size:1.1rem; }
.cred__form{ display:grid; gap:.9rem; }
.cred__kinds{ justify-self:start; }
.cred__rate{ margin:0; font-size:.88rem; color:var(--ink-soft,#3d4a5f); }
.cred__presets{ display:grid; grid-template-columns:repeat(auto-fill, minmax(9.5rem, 1fr)); gap:.55rem; margin-block-start:.6rem; }
.cred__preset{
  position:relative; display:grid; gap:.1rem; justify-items:center; padding:.8rem .6rem; min-block-size:4.4rem;
  border:1.5px solid var(--line); border-radius:14px; background:#fff; cursor:pointer; font:inherit; color:inherit;
  transition:border-color .15s, background .15s, box-shadow .15s;
}
.cred__preset:hover{ border-color:var(--primary); }
.cred__preset.is-on{ border-color:var(--primary); background:var(--primary-050,#e9effa); box-shadow:0 0 0 3px rgba(23,63,138,.12); }
.cred__preset b{ font-size:.98rem; font-variant-numeric:tabular-nums; }
.cred__preset small{ font-size:.76rem; color:var(--muted); }
.cred__preset .cred__gift{ position:absolute; inset-block-start:-.55rem; inset-inline-end:.5rem; }
.cred__gift{ display:inline-block; padding:.05rem .5rem; border-radius:999px; background:var(--accent,#21b79c); color:#fff; font-size:.72rem; font-weight:800; white-space:nowrap; }
.cred__tiers{ margin:.7rem 0 0; padding:0; list-style:none; display:flex; flex-wrap:wrap; gap:.35rem; }
.cred__tiers li{ padding:.2rem .65rem; border-radius:999px; background:var(--accent-050,#e4f6f2); color:var(--accent-700,#127a68); font-size:.78rem; }
.cred__amount{ display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); gap:.4rem 1.2rem; align-items:start; }
.cred__amount .field{ margin:0; }
.cred__amount input[data-cred-input]{ font-size:1.15rem; font-weight:700; letter-spacing:.02em; text-align:left; }
.cred__quote{ min-block-size:4.2rem; padding:.75rem .9rem; border-radius:12px; background:var(--bg-soft,#f7f5f0); border:1px solid var(--line); display:grid; gap:.2rem; align-content:center; }
.cred__quote p{ margin:0; }
.cred__qmain{ font-size:1rem; }
.cred__qgift{ color:var(--accent-600,#1a9c85); }
.cred__qtotal{ font-size:.86rem; color:var(--ink-soft,#3d4a5f); }
.cred__qpay{ font-weight:800; color:var(--navy,#12233f); }
.cred__qnext{ font-size:.8rem; color:var(--accent-700,#127a68); }
.cred__qerr{ color:var(--danger,#cf3b3b); font-size:.88rem; }
.cred__pay{ grid-column:1 / -1; justify-self:start; min-block-size:3rem; padding-inline:1.6rem; font-size:1rem; }
.cred__safe{ grid-column:1 / -1; margin:0; }
.cred__hist h2{ margin:0 0 .6rem; font-size:1rem; }
.cred__rows{ list-style:none; margin:0; padding:0; }
.cred__row{ display:flex; flex-wrap:wrap; align-items:center; gap:.4rem 1rem; padding-block:.6rem; border-block-end:1px solid var(--line); }
.cred__row:last-child{ border-block-end:0; }
.cred__row-what{ flex:1 1 14rem; display:flex; flex-wrap:wrap; align-items:center; gap:.3rem .5rem; }
.cred__row-what small{ flex-basis:100%; }
.cred__row-amt{ font-weight:700; font-variant-numeric:tabular-nums; }
@media (max-width:700px){
  .cred__amount{ grid-template-columns:minmax(0, 1fr); }
  .cred__pay{ inline-size:100%; justify-self:stretch; }
  .cred__big{ font-size:1.7rem; }
  .cred__presets{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
}

/* ops */
.opcred__kpis{ display:grid; grid-template-columns:repeat(auto-fit, minmax(15rem, 1fr)); gap:.8rem; margin-block-end:1rem; }
.opcred__kpi{ display:grid; gap:.25rem; margin:0; align-content:start; }
.opcred__kpi-l{ color:var(--muted); font-size:.84rem; }
.opcred__kpi-n{ font-size:1.35rem; font-weight:800; color:var(--navy,#12233f); font-variant-numeric:tabular-nums; }
.opcred__kpi-n small{ font-size:.8rem; color:var(--muted); font-weight:600; }
.opcred__kpi .is-bad, .opcred__kpi-n.is-bad{ color:var(--danger,#cf3b3b); }
.opcred__kpi > small{ font-size:.76rem; line-height:1.8; }
.opcred__gauge{ block-size:.7rem; border-radius:999px; background:var(--line-soft,#f0ede6); overflow:hidden; margin-block:.3rem .5rem; }
.opcred__gauge span{ display:block; block-size:100%; border-radius:inherit; background:var(--accent,#21b79c); }
.opcred__gauge span.is-hot{ background:var(--danger,#cf3b3b); }
.opcred__h3{ margin:1rem 0 .4rem; font-size:.92rem; }
.opcred__rows{ list-style:none; margin:0; padding:0; display:grid; gap:.1rem; }
.opcred__row{ display:flex; flex-wrap:wrap; align-items:center; gap:.3rem .8rem; padding-block:.45rem; border-block-end:1px solid var(--line); }
.opcred__row a{ font-weight:700; }
.opcred__row .muted{ font-size:.8rem; }
.opcred__two{ display:grid; grid-template-columns:repeat(auto-fit, minmax(22rem, 1fr)); gap:1rem; }
.opcred__two .pcard{ margin:0; }
.opcred__table td, .opcred__table th{ white-space:nowrap; }
.opcred__table input[type=number]{ max-inline-size:9rem; }
.opcred__grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(16rem, 1fr)); gap:.2rem 1.2rem; }
.opcred__form > .btn, .opcred__plans > .btn{ margin-block-start:.6rem; }
.opcred__tiers{ list-style:none; margin:0 0 .8rem; padding:0; display:grid; gap:.5rem; }
.opcred__tier{ display:flex; flex-wrap:wrap; align-items:flex-end; gap:.5rem; padding:.6rem .7rem; border:1px solid var(--line); border-radius:12px; background:#fff; }
.opcred__tier.is-off{ opacity:.6; }
.opcred__tierform{ display:flex; flex-wrap:wrap; align-items:flex-end; gap:.5rem .7rem; flex:1 1 auto; }
.opcred__tierform .field{ margin:0; flex:1 1 7.5rem; min-inline-size:6.5rem; }
.opcred__active{ display:inline-flex; align-items:center; gap:.35rem; min-block-size:2.75rem; font-size:.86rem; }
.opcred__del{ color:var(--danger,#cf3b3b); }
.opcred__add > summary{ list-style:none; display:inline-flex; cursor:pointer; }
.opcred__add > summary::-webkit-details-marker{ display:none; }
.opcred__add[open] > summary{ margin-block-end:.6rem; }
@media (max-width:700px){
  .opcred__table thead{ display:none; }
  .opcred__table, .opcred__table tbody, .opcred__table tr, .opcred__table td{ display:block; inline-size:100%; }
  .opcred__table tr{ padding:.6rem .8rem; margin-block-end:.5rem; border:1px solid var(--line); border-radius:12px; background:#fff; }
  .opcred__table td{ display:flex; justify-content:space-between; align-items:center; gap:1rem; padding:.25rem 0; border:0; white-space:normal; }
  .opcred__table td::before{ content:attr(data-label); color:var(--muted); font-size:.8rem; }
  .opcred__two{ grid-template-columns:minmax(0, 1fr); }
}

/* A chip that is a BUTTON (suggestions, presets): the chip look, not the
   browser's grey button with its thick border. */
button.chip{
  font-family:inherit; font-size:.8rem; font-weight:600; line-height:1.5;
  display:inline-flex; align-items:center; gap:.3rem; min-block-size:2.25rem; padding:.3rem .8rem;
  border:1px solid var(--line); border-radius:999px; background:#fff; color:var(--ink-soft,#3d4a5f);
  cursor:pointer; transition:border-color .15s, background .15s, color .15s;
}
button.chip:hover{ border-color:var(--primary); color:var(--primary); background:var(--primary-050,#e9effa); }
button.chip:focus-visible{ outline:2px solid var(--primary); outline-offset:2px; }
button.chip.is-on{ background:var(--primary); border-color:var(--primary); color:#fff; }


/* ---------------------------------------------------------------------
   Sidebar foot: «وضعیت حساب» + دیدن فروشگاه + the account menu, stacked.
   It used to be one flex ROW squeezing the link beside the account block.
   --------------------------------------------------------------------- */
.panel__side-foot{ display:flex; flex-direction:column; align-items:stretch; justify-content:flex-start; gap:.5rem; padding:.75rem .8rem; }
.panel__side-foot > .panel__acct{ margin-block-start:0; padding-block-start:.5rem; }
.panel__visit{
  display:flex; align-items:center; justify-content:space-between; gap:.5rem;
  min-block-size:2.6rem; padding:.4rem .7rem; border-radius:10px;
  background:var(--primary-050,#e9effa); color:var(--primary,#173F8A); font-size:.88rem; font-weight:700; text-decoration:none;
}
.panel__visit:hover{ background:#dbe5f7; }
.acctst{ display:grid; gap:.1rem; padding:.3rem; border:1px solid var(--line); border-radius:12px; background:var(--card,#fff); }
.acctst__row{
  display:flex; align-items:center; justify-content:space-between; gap:.6rem;
  min-block-size:2.5rem; padding:.3rem .55rem; border-radius:8px; color:var(--ink,#12233f); text-decoration:none;
}
a.acctst__row:hover{ background:var(--line-soft,#f0ede6); }
.acctst__l{ font-size:.8rem; color:var(--muted); min-inline-size:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.acctst__v{ display:grid; justify-items:end; font-size:.9rem; font-weight:800; font-variant-numeric:tabular-nums; white-space:nowrap; line-height:1.35; }
.acctst__v small{ font-size:.68rem; font-weight:500; color:var(--muted); }
.acctst__row.is-warn .acctst__v{ color:var(--warn,#b5730a); }
.acctst__row.is-bad{ background:var(--danger-bg,#fbeaea); }
.acctst__row.is-bad .acctst__v, .acctst__row.is-bad .acctst__v small{ color:var(--danger,#b42318); }

/* =====================================================================
   اشتراک و صورتحساب — status hero, usage, plan cards, checkout
   ===================================================================== */
.bill{ display:grid; gap:1rem; }
.bill > .cats__head{ margin-block-end:0; }
.bill__hero{ display:flex; flex-wrap:wrap; align-items:center; gap:1.2rem 1.6rem; margin:0; padding:1.3rem 1.4rem; border-inline-start:4px solid var(--accent,#21b79c); }
.bill__hero--trial{ border-inline-start-color:var(--primary,#173f8a); }
.bill__hero--warn{ border-inline-start-color:var(--warn,#b5730a); background:linear-gradient(90deg, #fff 60%, var(--warn-bg,#fbf1df)); }
.bill__hero--bad{ border-inline-start-color:var(--danger,#cf3b3b); background:linear-gradient(90deg, #fff 55%, var(--danger-bg,#fbeaea)); }
.bill__ring{ position:relative; flex:none; inline-size:7.5rem; block-size:7.5rem; }
.bill__ring svg{ inline-size:100%; block-size:100%; transform:rotate(-90deg); }
.bill__ring-bg{ fill:none; stroke:var(--line-soft,#f0ede6); stroke-width:8; }
.bill__ring-fg{ fill:none; stroke:var(--accent,#21b79c); stroke-width:8; stroke-linecap:round; transition:stroke-dashoffset .6s ease; }
.bill__hero--trial .bill__ring-fg{ stroke:var(--primary,#173f8a); }
.bill__hero--warn .bill__ring-fg{ stroke:var(--warn,#b5730a); }
.bill__hero--bad .bill__ring-fg{ stroke:var(--danger,#cf3b3b); }
.bill__ring-n{ position:absolute; inset:0; display:grid; place-content:center; justify-items:center; line-height:1.15; }
.bill__ring-n b{ font-size:1.9rem; font-weight:800; color:var(--navy,#12233f); font-variant-numeric:tabular-nums; }
.bill__hero--bad .bill__ring-n b{ color:var(--danger,#cf3b3b); }
.bill__ring-n small{ font-size:.74rem; color:var(--muted); }
.bill__state{ flex:1 1 18rem; min-inline-size:0; display:grid; gap:.35rem; justify-items:start; }
.bill__pill{ background:var(--line-soft,#f0ede6); color:var(--ink-soft,#3d4a5f); font-weight:700; }
.bill__hero--ok .bill__pill{ background:var(--ok-bg,#e3f5f0); color:var(--ok,#12876f); }
.bill__hero--trial .bill__pill{ background:var(--primary-050,#e9effa); color:var(--primary,#173f8a); }
.bill__hero--warn .bill__pill{ background:var(--warn-bg,#fbf1df); color:var(--warn,#b5730a); }
.bill__hero--bad .bill__pill{ background:var(--danger-bg,#fbeaea); color:var(--danger,#b42318); }
.bill__plan{ margin:0; font-size:1.35rem; color:var(--navy,#12233f); }
.bill__until{ margin:0; color:var(--ink-soft,#3d4a5f); font-size:.92rem; }
.bill__msg{ margin:0; max-inline-size:40rem; font-size:.9rem; line-height:1.9; color:var(--ink-soft,#3d4a5f); }
.bill__acts{ display:flex; flex-wrap:wrap; align-items:center; gap:.5rem .6rem; margin-block-start:.45rem; }
.bill__acts form{ margin:0; }
.bill__cta{ min-block-size:2.9rem; padding-inline:1.4rem; font-size:.98rem; }
.bill__hint{ flex-basis:100%; color:var(--muted); font-size:.78rem; }

.bill__usage{ display:grid; grid-template-columns:repeat(auto-fit, minmax(12.5rem, 1fr)); gap:.8rem; }
.bill__use{ margin:0; display:grid; gap:.3rem; align-content:start; padding:.9rem 1rem; }
.bill__use--link{ text-decoration:none; color:inherit; transition:border-color .15s, box-shadow .15s; }
.bill__use--link:hover{ border-color:var(--primary); box-shadow:0 6px 18px rgba(18,35,63,.08); }
.bill__use-l{ font-size:.82rem; color:var(--muted); }
.bill__use-n{ font-size:1.3rem; font-weight:800; color:var(--navy,#12233f); font-variant-numeric:tabular-nums; }
.bill__use-n small{ font-size:.8rem; font-weight:600; color:var(--muted); white-space:nowrap; }
.bill__use-n.is-bad{ color:var(--danger,#cf3b3b); }
.bill__use-n--wait{ font-size:.95rem; color:var(--muted); font-weight:600; }
.bill__use-go{ font-size:.76rem; color:var(--primary); font-weight:700; }
.bill__bar{ display:block; block-size:.45rem; border-radius:999px; background:var(--line-soft,#f0ede6); overflow:hidden; }
.bill__bar > span{ display:block; block-size:100%; border-radius:inherit; background:var(--primary,#173f8a); }
.bill__bar.is-full > span{ background:var(--danger,#cf3b3b); }
.bill__more > summary{ cursor:pointer; font-size:.78rem; color:var(--primary); font-weight:700; min-block-size:2rem; display:flex; align-items:center; }
.bill__more .stor__parts{ margin-block:.3rem; font-size:.8rem; }

.bill__h2{ margin:0 0 .3rem; font-size:1.08rem; }
.bill__plans .hint{ margin-block:0 .8rem; }
.bill__grid{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fit, minmax(15rem, 1fr)); gap:.9rem; }
.bill__card{ position:relative; display:flex; flex-direction:column; gap:.35rem; padding:1.2rem 1.1rem 1.1rem; border:1px solid var(--line); border-radius:16px; background:#fff; transition:border-color .15s, box-shadow .15s; }
.bill__card:hover{ box-shadow:0 10px 26px rgba(18,35,63,.08); }
.bill__card.is-current{ border-color:var(--primary); box-shadow:0 0 0 1px var(--primary); }
.bill__badge{ position:absolute; inset-block-start:-.7rem; inset-inline-start:1rem; padding:.1rem .65rem; border-radius:999px; background:var(--primary); color:#fff; font-size:.72rem; font-weight:800; }
.bill__card-name{ margin:0; font-size:1.05rem; }
.bill__price{ margin:.2rem 0 0; }
.bill__price b{ font-size:1.55rem; color:var(--navy,#12233f); font-variant-numeric:tabular-nums; }
.bill__price span{ font-size:.8rem; color:var(--muted); }
.bill__permonth{ margin:0; font-size:.78rem; color:var(--muted); }
.bill__feat{ list-style:none; margin:.5rem 0 .8rem; padding:0; display:grid; gap:.35rem; font-size:.86rem; }
.bill__feat li{ display:flex; gap:.45rem; align-items:baseline; }
.bill__feat li::before{ content:"✓"; color:var(--accent,#21b79c); font-weight:800; flex:none; }
.bill__pick{ margin-block-start:auto; min-block-size:2.75rem; justify-content:center; }

.bill__inv{ margin:0; }
.bill__rows{ list-style:none; margin:0; padding:0; }
.bill__row{ display:flex; flex-wrap:wrap; align-items:center; gap:.4rem 1rem; padding-block:.65rem; border-block-end:1px solid var(--line); }
.bill__row:last-child{ border-block-end:0; }
.bill__row-what{ flex:1 1 14rem; display:grid; gap:.1rem; min-inline-size:0; }
.bill__row-what b{ font-size:.92rem; }
.bill__row-what small{ font-size:.76rem; }
.bill__row-amt{ font-weight:700; font-variant-numeric:tabular-nums; }
.bill__export{ margin:0; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:.6rem 1rem; }
.bill__export .hint{ margin:0; max-inline-size:40rem; }

.bill--checkout{ max-inline-size:40rem; }
.bill__quote{ margin:0; display:grid; gap:.8rem; }
.bill__lines{ margin:0; display:grid; }
.bill__lines > div{ display:flex; justify-content:space-between; align-items:baseline; gap:1rem; padding-block:.6rem; border-block-end:1px dashed var(--line); }
.bill__lines dt{ color:var(--ink-soft,#3d4a5f); font-size:.9rem; }
.bill__lines dd{ margin:0; font-weight:700; font-variant-numeric:tabular-nums; white-space:nowrap; }
.bill__lines .is-credit dd{ color:var(--accent-600,#1a9c85); }
.bill__lines .is-total{ border-block-end:2px solid var(--line); }
.bill__lines .is-total dt{ font-weight:800; color:var(--navy,#12233f); }
.bill__lines .is-total dd{ font-size:1.35rem; color:var(--navy,#12233f); }
.bill__note{ margin:0; padding:.7rem .85rem; border-radius:10px; background:var(--primary-050,#e9effa); color:var(--primary,#173f8a); font-size:.86rem; line-height:1.9; }
.bill__payform{ margin:0; }
@media (max-width:640px){
  .bill__hero{ padding:1.1rem; }
  .bill__ring{ inline-size:6rem; block-size:6rem; }
  .bill__ring-n b{ font-size:1.55rem; }
  .bill__cta{ inline-size:100%; justify-content:center; }
  .bill__acts, .bill__acts form{ inline-size:100%; }
  .bill__export .btn{ inline-size:100%; justify-content:center; }
}


/* ---- sidebar show/hide (desktop) ----------------------------------- */
.panel__collapse, .panel__reopen{ display:none; }
@media (min-width: 900px){
  .panel__collapse{
    display:inline-grid; place-items:center; flex:none; inline-size:2.25rem; block-size:2.25rem; margin-inline-start:auto;
    border:0; border-radius:8px; background:none; color:var(--side-ink-soft,#5f6b7c); cursor:pointer;
  }
  .panel__collapse svg{ inline-size:1.25rem; block-size:1.25rem; }
  .panel__collapse:hover{ background:var(--line-soft,#f0ede6); color:var(--primary,#173F8A); }
  .panel__collapse:focus-visible, .panel__reopen:focus-visible{ outline:2px solid var(--primary,#173F8A); outline-offset:2px; }
  html.side-closed .panel__shell{ grid-template-columns:1fr; }
  html.side-closed .panel__side{ display:none; }
  html.side-closed .panel__reopen{
    display:inline-flex; align-items:center; gap:.4rem; position:fixed; z-index:40;
    inset-block-start:.8rem; inset-inline-start:.8rem; min-block-size:2.5rem; padding:.35rem .8rem;
    border:1px solid var(--line); border-radius:10px; background:var(--card,#fff); color:var(--ink,#12233f);
    font-family:inherit; font-size:.86rem; font-weight:700; cursor:pointer; box-shadow:0 6px 18px rgba(18,35,63,.12);
  }
  html.side-closed .panel__reopen svg{ inline-size:1.15rem; block-size:1.15rem; }
  html.side-closed .panel__reopen:hover{ border-color:var(--primary); color:var(--primary); }
  html.side-closed .panel__main{ padding-block-start:3.6rem; }
}

/* ---- in-form AI buttons (ai-assist.js) ------------------------------ */
.aiax{ margin-block:.2rem .9rem; }
.aiax__open{
  display:inline-flex; align-items:center; gap:.45rem; min-block-size:2.5rem; padding:.35rem .9rem;
  border:1px dashed var(--accent,#21b79c); border-radius:999px; background:var(--accent-050,#e4f6f2);
  color:var(--accent-700,#127a68); font-family:inherit; font-size:.86rem; font-weight:700; cursor:pointer;
  transition:background .15s, border-color .15s;
}
.aiax__open svg{ inline-size:1.1rem; block-size:1.1rem; }
.aiax__open:hover, .aiax__open[aria-expanded="true"]{ background:#d3f0e9; border-style:solid; }
.aiax__open:focus-visible{ outline:2px solid var(--accent,#21b79c); outline-offset:2px; }
.aiax__panel{ margin-block-start:.6rem; padding:.9rem; border:1px solid var(--line); border-radius:14px; background:var(--bg-soft,#f7f5f0); display:grid; gap:.7rem; }
.aiax__opt{ display:flex; flex-wrap:wrap; align-items:center; gap:.4rem .8rem; }
.aiax__opt-l{ font-size:.84rem; font-weight:700; min-inline-size:3.5rem; }
.aiax__bar{ display:flex; flex-wrap:wrap; gap:.5rem; }
.aiax__note{ margin:0; font-size:.78rem; color:var(--muted); line-height:1.9; }
.aiax__out{ display:grid; gap:.6rem; }
.aiax__out:empty{ display:none; }
.aiax__card{ display:grid; gap:.45rem; justify-items:start; padding:.8rem .9rem; border:1px solid var(--line); border-radius:12px; background:#fff; }
.aiax__card.is-loading{ justify-items:stretch; }
.aiax__n{ font-size:.72rem; font-weight:800; color:var(--accent-700,#127a68); }
.aiax__text{ font-size:.9rem; line-height:2; white-space:pre-line; max-block-size:14rem; overflow:auto; }
.aiax__card--serp{ gap:.2rem; }
.aiax__serp-t{ color:#1a0dab; font-size:1rem; line-height:1.6; }
.aiax__serp-d{ color:#4d5156; font-size:.84rem; line-height:1.8; margin-block-end:.3rem; }
.aiax__err{ margin:0; color:var(--danger,#cf3b3b); font-size:.86rem; }
.aiax__buy{ font-size:.84rem; font-weight:700; }
.aiax__left{ margin:0; font-size:.76rem; color:var(--muted); }
.aiax__done{ margin:0; padding:.55rem .75rem; border-radius:10px; background:var(--ok-bg,#e3f5f0); color:var(--ok,#12876f); font-size:.84rem; font-weight:700; }
.aiax__undo{ border:0; background:none; padding:0 .4rem; min-block-size:2.25rem; color:var(--primary,#173f8a); font-family:inherit; font-weight:800; text-decoration:underline; cursor:pointer; }

/* «از روی کپشن اینستاگرام پر کن»: a real tap target on a phone. */
.caption-box > summary{ min-block-size:2.75rem; display:flex; align-items:center; cursor:pointer; }

/* Bar charts with many days (the 30-day chart on «آمار فروشگاه»): a column
   used to be at least as wide as its date label, so thirty of them spilled
   out of the card on a phone. Columns may shrink; with 15+ columns on a
   narrow screen every other date is left out. */
.bars__col{ min-inline-size:0; }
.bars__x{ max-inline-size:100%; overflow:hidden; white-space:nowrap; }
@media (max-width: 700px){
  .bars__col:first-child:nth-last-child(n+15), .bars__col:first-child:nth-last-child(n+15) ~ .bars__col{ gap:.2rem; }
  .bars:has(> .bars__col:nth-child(15)){ gap:.15rem; }
  .bars:has(> .bars__col:nth-child(15)) > .bars__col:nth-child(even) .bars__x{ visibility:hidden; }
}

/* Touch height for the small controls the live audit found under 32px:
   link-style buttons («حذف» on pages) and plain <summary> toggles
   («ویرایش» on FAQs, the folds on the API page). */
button.linklike{ min-block-size:2.25rem; padding-inline:.3rem; }
.panel__main details > summary:not([class]){ padding-block:.45rem; cursor:pointer; }


/* Phone: smaller, and out of the way while scrolling down (see _layout.php). */
@media (max-width: 899px){
  .asst-fab__av{ inline-size:2.8rem; block-size:2.8rem; }
  html.fab-away .asst-fab{ opacity:0; pointer-events:none; transform:scale(.6); }
}

.cred__big--ok{ color:var(--ok,#12876f); font-size:1.5rem; }
.cred__buy--closed{ display:grid; gap:.5rem; justify-items:start; }
.cred__buy--closed h2{ margin:0; }
.cred__buy--closed .hint{ margin:0; }

.idn-namewarn{ display:block; margin-block-start:.4rem; padding:.5rem .7rem; border-radius:10px; background:var(--warn-bg,#fbf1df); color:var(--warn,#8a5600); font-size:.82rem; line-height:1.9; }
.idn-namewarn .linklike{ color:var(--primary,#173f8a); font-weight:700; }

/* ---- «پرداخت با» — the platform gateway chooser (_gwpick.php) ---------- */
.gwpick{ border:0; margin:0 0 .75rem; padding:0; min-inline-size:0; }
.gwpick__t{ padding:0; margin:0 0 .4rem; font-size:.86rem; font-weight:700; color:var(--ink-soft,#3d4a5f); }
.gwpick__opts{ display:flex; flex-wrap:wrap; gap:.5rem; }
.gwpick__opt{ margin:0; cursor:pointer; position:relative; }
.gwpick__opt input{ position:absolute; opacity:0; inline-size:1px; block-size:1px; }
.gwpick__opt > span{
  display:inline-flex; align-items:center; min-block-size:44px; padding:0 1rem;
  border:1.5px solid var(--line); border-radius:var(--radius-sm,12px); background:var(--card);
  font:inherit; font-size:.92rem; color:var(--ink); transition:border-color .15s, background .15s;
}
.gwpick__opt:hover > span{ border-color:var(--primary-600,#123472); }
.gwpick__opt input:checked + span{ border-color:var(--primary); background:var(--primary-050,#e9effa); color:var(--primary); font-weight:700; }
.gwpick__opt input:focus-visible + span{ box-shadow:0 0 0 3px rgba(23,63,138,.25); }
.cred__amount .gwpick{ grid-column:1 / -1; }
@media (max-width:560px){
  .gwpick__opts{ display:grid; grid-template-columns:1fr 1fr; }
  .gwpick__opt > span{ inline-size:100%; justify-content:center; text-align:center; }
  /* Two options in a row are one height, even when one label wraps. */
  .gwpick__opt{ display:flex; }
  .gwpick__opt > span{ block-size:100%; padding-block:.35rem; }
}

/* ---- ops «فعال‌سازی یا تمدید دستی» (platform/shop.php #activate) -------- */
.opact__form{ display:grid; gap:1rem; }
.opact__plans, .opact__methods{ border:0; margin:0; padding:0; min-inline-size:0; display:grid; gap:.5rem; }
.opact__plans legend, .opact__methods legend{ padding:0; margin:0 0 .4rem; font-size:.86rem; font-weight:700; color:var(--ink-soft,#3d4a5f); }
.opact__plan{ display:flex; gap:.75rem; align-items:flex-start; margin:0; padding:.75rem .9rem; cursor:pointer;
  border:1.5px solid var(--line); border-radius:var(--radius-sm,12px); background:var(--card); }
.opact__plan:has(input:checked){ border-color:var(--primary); background:var(--primary-050,#e9effa); }
.opact__plan.is-off{ cursor:not-allowed; opacity:.65; }
.opact__plan input{ margin-block-start:.3rem; flex:0 0 auto; }
.opact__plan-b{ display:grid; gap:.15rem; min-inline-size:0; }
.opact__plan-m{ font-weight:700; color:var(--primary); }
.opact__form > .btn{ justify-self:start; min-block-size:44px; }
@media (max-width:560px){ .opact__form > .btn{ justify-self:stretch; } }

/* ---- «ریز مصرف این ماه» (credits AI card) ---------------------------- */
.cred__uses{ border:1px solid var(--line); border-radius:var(--radius-sm,12px); background:var(--bg); }
.cred__uses > summary{ min-block-size:44px; display:flex; align-items:center; padding:0 .9rem; cursor:pointer;
  font-weight:700; font-size:.9rem; color:var(--primary); list-style:none; }
.cred__uses > summary::-webkit-details-marker{ display:none; }
.cred__uses > summary::after{ content:""; margin-inline-start:auto; inline-size:.5rem; block-size:.5rem;
  border-inline-end:2px solid currentColor; border-block-end:2px solid currentColor; transform:rotate(45deg); transition:transform .15s; }
.cred__uses[open] > summary::after{ transform:rotate(-135deg); }
.cred__tally{ display:flex; flex-wrap:wrap; gap:.4rem; margin:0; padding:0 .9rem .6rem; list-style:none; }
.cred__tally li{ padding:.2rem .6rem; border-radius:999px; background:var(--card); border:1px solid var(--line); font-size:.8rem; color:var(--ink-soft,#3d4a5f); }
.cred__tally b{ color:var(--primary); }
.cred__uselist{ margin:0; padding:0 .9rem; list-style:none; max-block-size:18rem; overflow-y:auto; }
.cred__uselist li{ display:grid; gap:.1rem; padding:.5rem 0; border-block-start:1px dashed var(--line); }
.cred__use-what{ font-size:.86rem; color:var(--ink); overflow-wrap:anywhere; }
.cred__use-meta{ font-size:.75rem; color:var(--muted); }
.cred__use-gap{ margin:.5rem .9rem .8rem; font-size:.75rem; }

/* ---- «خروجی اطلاعات» (export/index.php) -------------------------------- */
.exp{ display:grid; gap:1rem; max-inline-size:60rem; }
.exp__head h1{ margin:0; }
.exp__head p{ margin:.3rem 0 0; color:var(--muted); }
.exp .card{ margin:0; }
.exp h2{ margin:0 0 .8rem; font-size:1.05rem; }
.exp__what{ list-style:none; margin:0 0 1.1rem; padding:0; display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 10.5rem), 1fr)); gap:.6rem; }
.exp__item{ display:flex; flex-direction:column; gap:.55rem; align-items:flex-start; padding:.85rem; border:1px solid var(--line); border-radius:var(--radius-sm,12px); background:var(--bg); }
.exp__ic{ flex:0 0 auto; display:grid; place-items:center; inline-size:2.4rem; block-size:2.4rem; border-radius:.75rem; background:var(--primary-050,#e9effa); color:var(--primary); }
.exp__ic svg{ inline-size:1.25rem; block-size:1.25rem; }
.exp__ic--sm{ inline-size:2rem; block-size:2rem; border-radius:.6rem; }
.exp__ic--sm svg{ inline-size:1.05rem; block-size:1.05rem; }
.exp__item-b{ display:grid; gap:.1rem; min-inline-size:0; }
.exp__item-b b{ font-size:.92rem; }
.exp__n{ font-weight:800; color:var(--primary); font-size:.9rem; }
.exp__item-b small{ color:var(--muted); font-size:.76rem; line-height:1.6; }
.exp__go{ display:flex; flex-wrap:wrap; align-items:center; gap:.5rem 1rem; }
.exp__go .hint{ margin:0; }
.exp__cta{ min-block-size:48px; padding-inline:1.4rem; gap:.5rem; }
.exp__cta svg, .exp__dl svg{ inline-size:1.1rem; block-size:1.1rem; }
.exp__state{ display:flex; align-items:center; gap:.9rem; padding:.9rem 1rem; border-radius:var(--radius-sm,12px); }
.exp__state--busy{ background:var(--primary-050,#e9effa); color:var(--primary); }
.exp__state b{ display:block; }
.exp__state small{ color:var(--ink-soft,#3d4a5f); }
.exp__spin{ flex:0 0 auto; inline-size:1.6rem; block-size:1.6rem; border-radius:50%; border:3px solid rgba(23,63,138,.2); border-block-start-color:var(--primary); animation:exp-spin .9s linear infinite; }
@keyframes exp-spin{ to{ transform:rotate(360deg); } }
@media (prefers-reduced-motion:reduce){ .exp__spin{ animation-duration:3s; } }
.exp__always{ display:flex; gap:.5rem; align-items:flex-start; margin:1rem 0 0; padding-block-start:.9rem; border-block-start:1px dashed var(--line); color:var(--muted); font-size:.82rem; }
.exp__always svg{ flex:0 0 auto; inline-size:1rem; block-size:1rem; margin-block-start:.15rem; color:var(--accent,#21B79C); }
.exp__ready-head{ display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:.3rem 1rem; margin-block-end:.6rem; }
.exp__ready-head h2{ margin:0; }
.exp__when{ color:var(--muted); font-size:.82rem; }
.exp__files{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); gap:.6rem; }
.exp__file{ display:flex; align-items:center; gap:.75rem; padding:.6rem .7rem; border:1px solid var(--line); border-radius:var(--radius-sm,12px); }
.exp__file-b{ flex:1 1 auto; display:grid; min-inline-size:0; }
.exp__file-b b{ font-size:.92rem; }
.exp__file-b small{ color:var(--muted); font-size:.78rem; }
.exp__dl{ flex:0 0 auto; min-block-size:44px; gap:.35rem; }
.exp__del{ margin:.6rem 0 0; }
.exp__del .linklike{ color:var(--danger); font-size:.85rem; }
.exp__older > summary, .exp__help > summary{ min-block-size:44px; display:flex; align-items:center; cursor:pointer; font-weight:700; }
.exp__runs{ list-style:none; margin:.4rem 0 0; padding:0; }
.exp__run{ display:flex; flex-wrap:wrap; align-items:center; gap:.3rem 1rem; padding:.6rem 0; border-block-start:1px solid var(--line-soft,#f0ede6); }
.exp__run-when{ font-weight:700; font-size:.88rem; min-inline-size:12rem; }
.exp__run-files{ display:flex; flex-wrap:wrap; gap:.2rem .9rem; font-size:.85rem; flex:1 1 auto; }
.exp__run-files a{ color:var(--primary); display:inline-flex; align-items:center; min-block-size:2.25rem; }
.exp__run-del{ color:var(--danger); font-size:.82rem; }
.exp__steps{ margin:.5rem 0 0; padding-inline-start:1.3rem; display:grid; gap:.4rem; line-height:1.8; }
.exp__privacy{ margin:0; }
@media (max-width:560px){
  .exp__what{ gap:.4rem; }
  .exp__item{ flex-direction:row; align-items:center; padding:.55rem .7rem; }
  .exp__ic{ inline-size:2.1rem; block-size:2.1rem; }
  .exp__item-b{ grid-template-columns:auto 1fr; column-gap:.5rem; align-items:baseline; }
  .exp__item-b small{ grid-column:1 / -1; }
  .exp__cta{ inline-size:100%; justify-content:center; }
  .exp__dl{ padding-inline:.8rem; }
  .exp__run-when{ min-inline-size:0; inline-size:100%; }
}

/* ---- «نمادها» step-by-step (badges/index.php) ------------------------- */
.bdg__intro-top{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:.4rem 1rem; }
.bdg__intro-top h2{ margin:0; font-size:1.05rem; }
.bdg__intro .hint{ margin:.6rem 0 0; }
.bdg__bar{ margin-block-start:.8rem; block-size:8px; border-radius:99px; background:var(--line-soft,#f0ede6); overflow:hidden; }
.bdg__bar span{ display:block; block-size:100%; border-radius:inherit; background:linear-gradient(90deg, var(--accent,#21B79C), var(--primary)); }
.bdg__steps{ list-style:none; margin:1rem 0 0; padding:0; display:grid; gap:.8rem; counter-reset:none; }
.bdg__step{ margin:0; border:1.5px solid var(--line); }
.bdg__step.is-now{ border-color:var(--primary); box-shadow:0 0 0 4px rgba(23,63,138,.08); }
.bdg__step.is-done{ background:var(--card); }
.bdg__step.is-wait{ opacity:.9; }
.bdg__step-head{ display:flex; align-items:center; gap:.8rem; }
.bdg__num{ flex:0 0 auto; display:grid; place-items:center; inline-size:2.2rem; block-size:2.2rem; border-radius:50%;
  font-weight:800; background:var(--line-soft,#f0ede6); color:var(--muted); }
.bdg__step.is-now .bdg__num{ background:var(--primary); color:#fff; }
.bdg__step.is-done .bdg__num{ background:var(--ok-bg,#e3f5f0); color:var(--ok,#12876f); }
.bdg__step-t{ flex:1 1 auto; min-inline-size:0; }
.bdg__step-tt{ display:flex; flex-wrap:wrap; align-items:center; gap:.3rem .6rem; }
.bdg__step-t h3{ margin:0; font-size:1rem; }
.bdg__step-t small{ color:var(--muted); font-size:.8rem; }
.bdg__tag{ flex:0 0 auto; font-size:.75rem; font-weight:700; padding:.2rem .6rem; border-radius:99px; background:var(--line-soft,#f0ede6); color:var(--muted); }
.bdg__step.is-now .bdg__tag{ background:var(--primary-050,#e9effa); color:var(--primary); }
.bdg__step.is-done .bdg__tag{ background:var(--ok-bg,#e3f5f0); color:var(--ok,#12876f); }
.bdg__step > .field, .bdg__step > .verify-out, .bdg__step > .badges__live, .bdg__step > .alert{ margin-block-start:1rem; }
.bdg__text{ margin:.8rem 0 .7rem; line-height:1.9; color:var(--ink-soft,#3d4a5f); font-size:.9rem; }
.bdg__out{ display:inline-flex; align-items:center; gap:.4rem; min-block-size:44px; }
.bdg__out svg{ inline-size:1rem; block-size:1rem; }
.bdg__checks{ list-style:none; margin:.9rem 0 0; padding:0; display:grid; gap:.4rem; }
.bdg__check{ display:flex; align-items:center; gap:.7rem; padding:.55rem .7rem; border-radius:var(--radius-sm,12px); background:var(--bg); }
.bdg__check.is-todo{ background:var(--warn-bg,#fbf1df); }
.bdg__mark{ flex:0 0 auto; display:grid; place-items:center; inline-size:1.5rem; block-size:1.5rem; border-radius:50%; font-size:.8rem; font-weight:800; }
.bdg__check.is-ok .bdg__mark{ background:var(--ok-bg,#e3f5f0); color:var(--ok,#12876f); }
.bdg__check.is-todo .bdg__mark{ background:#fff; color:var(--warn,#b5730a); border:1.5px solid currentColor; }
.bdg__check-b{ flex:1 1 auto; display:grid; min-inline-size:0; }
.bdg__check-b b{ font-size:.9rem; font-weight:600; }
.bdg__check-b small{ color:var(--ink-soft,#3d4a5f); font-size:.78rem; line-height:1.7; }
.bdg__fix{ flex:0 0 auto; min-block-size:40px; }
.bdg__copy{ display:flex; gap:.5rem; }
.bdg__copy input{ flex:1 1 auto; min-inline-size:0; font-size:.82rem; }
.bdg__copy-btn{ flex:0 0 auto; min-block-size:44px; min-inline-size:5.5rem; }
.bdg__facts{ list-style:none; margin:.8rem 0 0; padding:0; display:grid; gap:.35rem; font-size:.88rem; }
.bdg__facts li.is-warn{ color:var(--warn,#b5730a); }
.bdg__outs{ display:flex; flex-wrap:wrap; gap:.5rem; margin-block-start:1rem; }
.bdg__note{ margin:1rem 0 0; }
@media (max-width:560px){
  .bdg__step-head{ align-items:flex-start; }
  .bdg__check{ display:grid; grid-template-columns:auto minmax(0,1fr); align-items:start; }
  .bdg__fix{ grid-column:2; justify-self:start; }
  .bdg__out{ inline-size:100%; justify-content:center; }
}

/* ---- «پنل پیامکی» (sms/index.php) ------------------------------------- */
.smsx__kpis{ list-style:none; margin:0 0 1rem; padding:0; display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 9.25rem), 1fr)); gap:.7rem; }
.smsx__kpi{ display:grid; grid-template-columns:auto 1fr; grid-template-areas:"ic l" "ic n" "ic s"; column-gap:.75rem; align-items:center;
  padding:.9rem 1rem; background:var(--card); border:1px solid var(--line); border-radius:var(--radius,16px); box-shadow:var(--shadow-xs); }
.smsx__kpi-ic{ grid-area:ic; align-self:start; display:grid; place-items:center; inline-size:2.4rem; block-size:2.4rem; border-radius:.8rem; background:var(--primary-050,#e9effa); color:var(--primary); }
.smsx__kpi-ic svg{ inline-size:1.2rem; block-size:1.2rem; }
.smsx__kpi-l{ grid-area:l; font-size:.8rem; color:var(--muted); }
.smsx__kpi-n{ grid-area:n; font-size:1.45rem; font-weight:800; line-height:1.3; font-variant-numeric:tabular-nums; }
.smsx__kpi-n small{ font-size:.8rem; font-weight:600; color:var(--muted); }
.smsx__kpi-n--txt{ font-size:1rem; }
.smsx__kpi > small, .smsx__kpi > a{ grid-area:s; font-size:.78rem; color:var(--muted); }
.smsx__kpi > a{ color:var(--primary); font-weight:700; justify-self:start; min-block-size:2.25rem; display:inline-flex; align-items:center; }
.smsx__filters .chip{ min-block-size:2.25rem; display:inline-flex; align-items:center; }
.smsx__row-what a{ min-block-size:2rem; display:inline-flex; align-items:center; }
.smsx__kpi.is-bad{ border-color:rgba(207,59,59,.35); }
.smsx__kpi.is-bad .smsx__kpi-ic{ background:var(--danger-bg,#fbeaea); color:var(--danger); }
.smsx__kpi.is-warn .smsx__kpi-ic{ background:var(--warn-bg,#fbf1df); color:var(--warn); }
.smsx__ours{ margin:0 0 1rem; }
.smsx__wallet-row{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:.8rem 1.5rem; }
.smsx__wallet-row h2{ margin:0 0 .3rem; font-size:1.05rem; }
.smsx__wallet-msg{ margin:0; font-size:.88rem; color:var(--ink-soft,#3d4a5f); }
.smsx__wallet-msg.is-bad{ color:var(--danger); }
.smsx__wallet-msg.is-warn{ color:var(--warn); }
.smsx__cta{ min-block-size:44px; }
.smsx__fold{ margin-block-start:1rem; border-block-start:1px dashed var(--line); padding-block-start:.4rem; }
.smsx__fold > summary{ min-block-size:44px; display:flex; align-items:center; cursor:pointer; font-weight:700; font-size:.88rem; color:var(--primary); }
.smsx__thr{ display:flex; flex-wrap:wrap; align-items:flex-end; gap:.6rem 1rem; }
.smsx__thr .field{ flex:1 1 14rem; margin:0; }
.smsx__sub{ font-size:.78rem; font-weight:500; color:var(--muted); margin-inline-start:.4rem; }
.smsx__spend{ list-style:none; margin:0; padding:0; display:grid; gap:.2rem; }
.smsx__spend li{ display:grid; grid-template-columns:minmax(0, 14rem) 1fr auto; align-items:center; gap:.4rem 1rem; padding:.55rem 0; border-block-end:1px solid var(--line-soft,#f0ede6); }
.smsx__spend li:last-child{ border-block-end:0; }
.smsx__spend-l{ display:grid; color:inherit; text-decoration:none; min-block-size:44px; align-content:center; }
.smsx__spend-l b{ font-size:.9rem; color:var(--primary); }
.smsx__spend-l small{ font-size:.75rem; color:var(--muted); }
.smsx__spend-bar{ block-size:8px; border-radius:99px; background:var(--line-soft,#f0ede6); overflow:hidden; }
.smsx__spend-bar span{ display:block; block-size:100%; border-radius:inherit; background:linear-gradient(90deg, var(--accent,#21B79C), var(--primary)); }
.smsx__spend-n{ text-align:end; font-size:.82rem; color:var(--muted); white-space:nowrap; }
.smsx__spend-n b{ color:var(--ink); font-size:.95rem; }
.smsx__spend-n small{ display:block; }
.smsx__spend-n .is-bad, .smsx__why{ color:var(--danger); }
.smsx__filters{ margin-block-end:.6rem; }
.smsx__log{ list-style:none; margin:0; padding:0; }
.smsx__row{ display:grid; grid-template-columns:1fr auto; grid-template-areas:"what st" "meta meta" "why why"; gap:.15rem .8rem; padding:.7rem 0; border-block-end:1px solid var(--line-soft,#f0ede6); }
.smsx__row:last-child{ border-block-end:0; }
.smsx__row-what{ grid-area:what; display:flex; flex-wrap:wrap; align-items:baseline; gap:.2rem .6rem; }
.smsx__row-what b{ font-size:.9rem; }
.smsx__row-what a{ font-size:.8rem; color:var(--primary); }
.smsx__row-st{ grid-area:st; align-self:start; }
.smsx__row-meta{ grid-area:meta; font-size:.78rem; color:var(--muted); }
.smsx__why{ grid-area:why; font-size:.8rem; line-height:1.7; }
.smsx__why.is-ours{ color:var(--ink-soft,#3d4a5f); }
.smsx__help{ margin:.8rem 0 0; }
.smsx__auto{ list-style:none; margin:.4rem 0 1rem; padding:0; display:grid; grid-template-columns:repeat(auto-fill, minmax(min(100%, 14rem), 1fr)); gap:.5rem; }
.smsx__auto li{ display:flex; align-items:center; justify-content:space-between; gap:.6rem; padding:.6rem .8rem; border:1px solid var(--line); border-radius:var(--radius-sm,12px); font-size:.9rem; }
@media (max-width:560px){
  .smsx__kpis{ grid-template-columns:1fr 1fr; gap:.5rem; }
  .smsx__kpi{ grid-template-columns:1fr; grid-template-areas:"ic" "l" "n" "s"; row-gap:.15rem; padding:.75rem; }
  .smsx__kpi-ic{ inline-size:2rem; block-size:2rem; margin-block-end:.3rem; }
  .smsx__kpi-n{ font-size:1.25rem; }
  .smsx__spend li{ grid-template-columns:1fr auto; }
  .smsx__spend-bar{ grid-column:1 / -1; grid-row:2; }
  .smsx__cta{ inline-size:100%; justify-content:center; }
}

/* ---- «تنظیمات قالب» (theme/index.php #tk-settings) --------------------- */
.tset__form{ display:grid; gap:1rem; }
.tset__group{ border:1px solid var(--line); border-radius:var(--radius-sm,12px); margin:0; padding:.9rem 1rem 1rem; min-inline-size:0; display:grid; gap:.9rem; }
.tset__group > legend{ padding:0 .4rem; font-weight:800; font-size:.92rem; color:var(--ink); }
.tset__row{ margin:0; }
.tset__label{ display:block; font-weight:700; font-size:.88rem; margin-block-end:.45rem; }
.tset__row .field__hint{ display:block; margin-block-start:.35rem; }
.tset__color input[type="color"]{ inline-size:4.5rem; block-size:2.75rem; padding:.2rem; border:1px solid var(--line); border-radius:10px; cursor:pointer; background:#fff; }
.tset__acts{ display:flex; flex-wrap:wrap; align-items:center; gap:.6rem 1.2rem; }
.tset__acts .btn{ min-block-size:44px; }

/* Theme picker: each theme is a switch button + a «try it on» link, and a
   row of the theme's own colours so seven themes are not seven lines of
   text. The form is the card's frame so the link sits inside it. */
.pack-grid--themes form{ display:flex; flex-direction:column; gap:.35rem; }
.pack-grid--themes .pack{ flex:1 1 auto; }
.pack__swatch{ display:flex; justify-content:center; gap:.3rem; margin-block:.35rem .15rem; }
.pack__swatch i{ inline-size:18px; block-size:18px; border-radius:50%; box-shadow:inset 0 0 0 1px rgba(18,35,63,.14); }
.pack__try{ display:flex; align-items:center; justify-content:center; min-block-size:40px; font-size:.8rem; font-weight:600;
  color:var(--primary); border:1px dashed var(--line,#dfe3ea); border-radius:10px; text-decoration:none; }
.pack__try:hover{ background:var(--primary-050,#eef3fb); border-style:solid; }