/* ---- پنل برندها ------------------------------------------------------------
   The customer-facing panel at /brands. It is deliberately the one light surface on this site.
   The member panel is dark because a member lives in it for an hour at a time; a customer opens
   this one to answer a money question and, often enough, to print or PDF the answer for their own
   accountant — and a dark statement prints as a black rectangle or as unreadable grey-on-white.
   Light is also what tells the two panels apart at a glance, which matters on a shared screen.

   base.css is loaded first for the self-hosted Vazirmatn faces and nothing else; everything it sets
   on `body` is overridden here by `.brand-body`, which outranks a bare element selector. */
:root {
  --bp-canvas:#f4f6f9;
  --bp-paper:#ffffff;
  --bp-ink:#16202e;
  --bp-muted:#61748c;
  --bp-line:#e2e8f0;
  --bp-line-strong:#cbd5e1;
  --bp-teal:#0f766e;
  --bp-teal-soft:#e6f4f1;
  --bp-money:#15803d;
  --bp-money-soft:#eaf7ef;
  --bp-activity:#1d4ed8;
  --bp-activity-soft:#eaf0fe;
  --bp-warn:#b45309;
  --bp-warn-soft:#fdf3e3;
  --bp-danger:#b91c1c;
  --bp-danger-soft:#fdecec;
  --bp-radius:16px;
  --bp-shadow:0 1px 2px #0f172a0d, 0 8px 24px #0f172a0a;
}
body.brand-body {
  margin:0; min-height:100vh; background:var(--bp-canvas); color:var(--bp-ink);
  font-family:Vazirmatn, Tahoma, sans-serif; font-size:15px; line-height:1.75;
}
.brand-body * { box-sizing:border-box; }
.brand-body a { color:inherit; text-decoration:none; }
.brand-body button { font:inherit; cursor:pointer; }
.brand-body h1,.brand-body h2,.brand-body h3 { margin:0; line-height:1.5; }
.brand-body p { margin:0; }
/* Every long number on this panel is a Toman amount, and Persian digits in a table column only line
   up if the figures share a width. */
.brand-body .num { font-variant-numeric:tabular-nums; }

/* ---- shell ---- */
.bp-shell { min-height:100vh; display:flex; flex-direction:column; }
.bp-top {
  position:sticky; top:0; z-index:20; background:#ffffffee; backdrop-filter:blur(10px);
  border-bottom:1px solid var(--bp-line);
}
.bp-top-inner { width:min(1180px,100%); margin:0 auto; padding:14px 24px; display:flex; align-items:center; gap:18px; }
.bp-logo { display:flex; align-items:center; gap:10px; font-weight:800; font-size:17px; }
.bp-logo img { width:34px; height:34px; border-radius:10px; }
.bp-logo small { display:block; font-weight:600; font-size:12.5px; color:var(--bp-muted); }
.bp-nav { display:flex; gap:4px; margin-inline-start:auto; flex-wrap:wrap; }
.bp-nav a {
  padding:8px 14px; border-radius:10px; font-size:14.5px; font-weight:600; color:var(--bp-muted);
  border:1px solid transparent; transition:.15s;
}
.bp-nav a:hover { color:var(--bp-ink); background:#f1f5f9; }
.bp-nav a.active { color:var(--bp-teal); background:var(--bp-teal-soft); border-color:#c7e6e0; }
.bp-account { display:flex; align-items:center; gap:10px; font-size:13.5px; color:var(--bp-muted); }
.bp-signout { border:1px solid var(--bp-line-strong); background:#fff; border-radius:9px; padding:7px 12px; font-size:13.5px; color:var(--bp-muted); }
.bp-signout:hover { color:var(--bp-danger); border-color:#f0c2c2; background:var(--bp-danger-soft); }
/* ---- نوار «شما مهمان این پنل هستید» ---- */
/* The bar over a panel a reseller has borrowed. Dark, full-bleed, and in a colour used nowhere else
   on this surface: everything under it spends somebody else's credit, and a person who loses track
   of whose screen they are on orders work for the wrong brand. It is not sticky, because the header
   right beneath it is, and two stuck bars at top:0 land on top of each other; the way out is in that
   header too, so nothing is lost when this scrolls away. */
.bp-impersonation {
  display:flex; align-items:center; justify-content:center; gap:14px; flex-wrap:wrap;
  padding:10px 20px; background:#3b2f63; color:#eee9ff; font-size:13.5px; line-height:1.7;
}
.bp-impersonation strong { color:#fff; }
.bp-impersonation-exit {
  border:1px solid #7d6cbe; background:#4c3f80; color:#fff; border-radius:9px; padding:6px 12px;
  font-size:13px; font-weight:700; white-space:nowrap;
}
.bp-impersonation-exit:hover { background:#5d4e99; }
.bp-main { width:min(1180px,100%); margin:0 auto; padding:26px 24px 64px; flex:1; }
.bp-page-head { display:flex; align-items:flex-end; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:18px; }
.bp-page-head h1 { font-size:23px; }
.bp-page-head p { color:var(--bp-muted); font-size:14.5px; }
.bp-page-actions { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
/* A caption is as long as the customer wrote it, and a whole Instagram caption in the page head
   pushes the table below the fold. Two lines are enough to recognise the post. */
.bp-page-sub { max-width:72ch; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }

/* ---- cards ---- */
.bp-card { background:var(--bp-paper); border:1px solid var(--bp-line); border-radius:var(--bp-radius); box-shadow:var(--bp-shadow); }
.bp-card-head { padding:16px 20px; border-bottom:1px solid var(--bp-line); display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.bp-card-head h2 { font-size:16.5px; }
.bp-card-head p { color:var(--bp-muted); font-size:13.5px; }
.bp-card-body { padding:18px 20px; }
.bp-section { margin-top:22px; }

/* The five figures the whole panel is arranged around. Money in is green, money spent is neutral
   ink, and the balance carries the only colour that can turn: it is the number a customer opens
   this page to see. */
.bp-stats { display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:14px; }
.bp-stat { background:var(--bp-paper); border:1px solid var(--bp-line); border-radius:var(--bp-radius); padding:16px 18px; box-shadow:var(--bp-shadow); }
.bp-stat span { display:block; font-size:13.5px; color:var(--bp-muted); font-weight:600; }
/* nowrap, and the unit steps down beside the digits rather than wrapping under them: «تومان» on its
   own line turns a headline figure into two lines of different sizes and costs the card its shape. */
.bp-stat strong { display:block; margin-top:6px; font-size:21px; font-weight:800; letter-spacing:-.2px; white-space:nowrap; }
.bp-unit { font-style:normal; font-size:13px; font-weight:700; color:var(--bp-muted); margin-inline-start:5px; }
.bp-stat em { display:block; margin-top:4px; font-style:normal; font-size:12.5px; color:var(--bp-muted); }
.bp-stat.money strong { color:var(--bp-money); }
.bp-stat.spent strong { color:var(--bp-ink); }
.bp-stat.balance { border-color:#bfe3d2; background:linear-gradient(180deg,#f4fbf7,#fff); }
.bp-stat.balance strong { color:var(--bp-money); }
.bp-stat.balance.low { border-color:#f2d6a8; background:linear-gradient(180deg,#fefaf2,#fff); }
.bp-stat.balance.low strong { color:var(--bp-warn); }
.bp-stat.balance.negative { border-color:#f2c0c0; background:linear-gradient(180deg,#fef6f6,#fff); }
.bp-stat.balance.negative strong { color:var(--bp-danger); }

.bp-alert { display:flex; gap:12px; align-items:flex-start; border-radius:var(--bp-radius); padding:14px 18px; font-size:14.5px; margin-bottom:18px; }
.bp-alert b { display:block; margin-bottom:2px; }
.bp-alert.warn { background:var(--bp-warn-soft); border:1px solid #f0dcb8; color:#7c4a08; }
.bp-alert.danger { background:var(--bp-danger-soft); border:1px solid #f3caca; color:#8f1717; }
.bp-alert.info { background:var(--bp-activity-soft); border:1px solid #cfdcfb; color:#1e3a8a; }
.bp-alert.ok { background:var(--bp-money-soft); border:1px solid #c7e8d3; color:#14532d; }

/* ---- tables ---- */
.bp-table-wrap { overflow-x:auto; }
.bp-table { width:100%; border-collapse:collapse; font-size:14px; }
.bp-table th { text-align:start; font-weight:700; color:var(--bp-muted); font-size:13px; padding:10px 14px; border-bottom:1px solid var(--bp-line); white-space:nowrap; background:#fafbfd; }
.bp-table td { padding:12px 14px; border-bottom:1px solid #eef2f6; vertical-align:top; }
.bp-table tr:last-child td { border-bottom:0; }
.bp-table tbody tr:hover { background:#fbfcfe; }
.bp-table .num { white-space:nowrap; }
.bp-table .in { color:var(--bp-money); font-weight:700; }
.bp-table .out { color:var(--bp-ink); font-weight:700; }
.bp-table tfoot td { background:#fafbfd; font-weight:800; border-top:2px solid var(--bp-line-strong); }
/* The list of work is the widest table here, and the money column is its last one. In an RTL scroll
   box the overflow hides off the left edge, which is exactly where that column sits, so the columns
   are told to give: the comment is the only one allowed to grow, the review pills wrap under each
   other, and the price keeps its own line. */
.bp-table-works { table-layout:auto; }
.bp-table-works td,.bp-table-works th { padding-inline:12px; }
.bp-table-works td:first-child,.bp-table-works td:nth-child(2) { white-space:nowrap; }
.bp-table-works td:nth-child(5) { white-space:normal; min-width:96px; }
.bp-table-works td:last-child,.bp-table-works th:last-child { white-space:nowrap; }

.bp-pill { display:inline-block; padding:3px 10px; border-radius:99px; font-size:12.5px; font-weight:700; white-space:nowrap; }
.bp-pill.ok { background:var(--bp-money-soft); color:var(--bp-money); }
.bp-pill.pending { background:var(--bp-warn-soft); color:var(--bp-warn); }
.bp-pill.bad { background:var(--bp-danger-soft); color:var(--bp-danger); }
.bp-pill.info { background:var(--bp-activity-soft); color:var(--bp-activity); }
.bp-pill.neutral { background:#f1f5f9; color:var(--bp-muted); }

/* ---- the wall of posts ----
   Vertical by design: these are Instagram posts and Reels, and a customer recognises their own post
   by its 4:5 frame long before they read the caption. The tile keeps that ratio whatever the file
   behind it is, so one landscape photo cannot break the grid's rhythm. */
.bp-posts { display:grid; grid-template-columns:repeat(auto-fill,minmax(232px,1fr)); gap:18px; align-items:stretch; }
/* The tile is a column, and it says so. Left as a plain block, a <button> centres its own content
   whenever the grid stretches it taller than its content needs, so a tile with one row of chips
   drew its picture a strip of white below its neighbour's and the wall looked untidy for no reason
   the markup could explain. */
.bp-post { display:flex; flex-direction:column; align-items:stretch; height:100%; background:var(--bp-paper); border:1px solid var(--bp-line); border-radius:var(--bp-radius); overflow:hidden; box-shadow:var(--bp-shadow); transition:.18s; text-align:start; padding:0; width:100%; }
.bp-post:hover { transform:translateY(-2px); box-shadow:0 2px 4px #0f172a0f, 0 14px 30px #0f172a14; border-color:var(--bp-line-strong); }
.bp-post-frame { position:relative; aspect-ratio:4/5; background:#eef2f7; display:block; overflow:hidden; flex:none; }
.bp-post-frame img { width:100%; height:100%; object-fit:cover; display:block; }
.bp-post-frame .bp-empty-frame { width:100%; height:100%; display:grid; place-items:center; color:#94a3b8; font-size:30px; }
/* Both badges ride one bar pinned across the top of the frame, so «در حال اجرا» can never land on
   top of «ویدیو» however long either label gets. */
.bp-post-tags { position:absolute; inset-block-start:10px; inset-inline:10px; display:flex; align-items:flex-start; justify-content:space-between; gap:6px; pointer-events:none; }
.bp-post-kind,.bp-post-live { font-size:11.5px; font-weight:700; padding:3px 9px; border-radius:99px; color:#fff; white-space:nowrap; }
.bp-post-kind { background:#0f172ac4; backdrop-filter:blur(4px); }
.bp-post-live { background:#15803de0; }
.bp-post-body { padding:14px 16px 16px; display:flex; flex-direction:column; flex:1; }
.bp-post-caption { font-size:13.5px; line-height:1.75; color:var(--bp-ink); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; min-height:47px; }
.bp-post-meta { margin-top:6px; font-size:12.5px; color:var(--bp-muted); }
.bp-counts { display:flex; flex-wrap:wrap; gap:6px; margin-top:10px; }
.bp-count { display:inline-flex; align-items:center; gap:4px; background:#f1f5f9; border-radius:8px; padding:4px 9px; font-size:12.5px; font-weight:700; color:#334155; }
.bp-count i { font-style:normal; opacity:.75; }
.bp-count.zero { opacity:.45; font-weight:600; }
/* Pushed to the floor of the tile rather than trailing the chips: the price is what a customer
   scans down the wall for, and it has to sit on the same line in every card whether the tile above
   it carried one row of chips or two. */
.bp-post-cost { margin-top:auto; padding-top:12px; border-top:1px dashed var(--bp-line); font-size:13px; color:var(--bp-muted); display:flex; align-items:baseline; justify-content:space-between; gap:8px; }
.bp-post-cost b { color:var(--bp-ink); font-size:14px; }

/* ---- سفارش کار روی یک پست ---- */
/* The stop switch under a tile. The cell is the grid item now, so the card keeps the height it
   always had and the switch sits under it: a button inside a button is not markup a browser keeps. */
.bp-post-cell { display:flex; flex-direction:column; height:100%; }
.bp-post-cell .bp-post { height:auto; flex:1; }
.bp-post-switch { display:flex; flex-direction:column; gap:4px; padding:8px 4px 0; }
.bp-post-switch .bp-note { font-size:11.5px; line-height:1.7; }
.bp-post-stop { align-self:flex-start; border:1px solid var(--bp-line-strong); background:#fff; border-radius:9px; padding:6px 11px; font-size:12.5px; font-weight:700; color:var(--bp-warn); }
.bp-post-stop:hover { border-color:var(--bp-warn); background:var(--bp-warn-soft); }
.bp-post-switch.is-paused .bp-post-stop { color:var(--bp-teal); }
.bp-post-switch.is-paused .bp-post-stop:hover { border-color:var(--bp-teal); background:var(--bp-teal-soft); }
/* The same tile, standing still. On the posts wall the whole card is a button and lifts under the
   pointer to say so; here the card is not clickable and only the button inside it is, so the lift
   would be an invitation to click something that does nothing. */
.bp-post-static { text-align:start; }
.bp-post-static:hover { transform:none; box-shadow:var(--bp-shadow); border-color:var(--bp-line); }
.bp-post-done { font-size:11.5px; font-weight:700; padding:3px 9px; border-radius:99px; color:#fff; white-space:nowrap; background:#64748be0; }
/* Amber rather than grey: a box that stopped over an unpaid balance is not the same news as one that
   finished, and the customer has something to do about this one. */
.bp-post-halted { font-size:11.5px; font-weight:700; padding:3px 9px; border-radius:99px; color:#fff; white-space:nowrap; background:#b45309e0; }
.bp-post-action { margin-top:auto; padding-top:12px; display:block; }
.bp-post-action .bp-order-button { width:100%; }
.bp-order-state { display:block; text-align:center; font-size:12.5px; font-weight:700; border-radius:10px; padding:9px 10px; }
.bp-order-state.live { color:#15803d; background:#dcfce7; }
.bp-order-state.off { color:var(--bp-muted); background:#f1f5f9; }
/* Credit and orders-left read as one line of facts above the wall, and they wrap rather than shrink:
   the amount is the number the whole screen hangs on and must never be cut to fit beside a count. */
.bp-order-bar { display:flex; flex-wrap:wrap; gap:12px 28px; }
.bp-order-bar div { display:flex; align-items:baseline; gap:8px; }
.bp-order-bar span { font-size:13px; color:var(--bp-muted); }
.bp-order-bar strong { font-size:16px; color:var(--bp-ink); }
.bp-more { display:flex; justify-content:center; margin-top:20px; }

/* ---- one post, opened ---- */
.bp-button { display:inline-block; text-align:center; border:1px solid var(--bp-line-strong); background:#fff; border-radius:10px; padding:10px 14px; font-size:14px; font-weight:700; color:var(--bp-ink); }
.bp-button:hover { border-color:var(--bp-teal); color:var(--bp-teal); background:var(--bp-teal-soft); }
.bp-button.primary { background:var(--bp-teal); border-color:var(--bp-teal); color:#fff; }
.bp-button.primary:hover { background:#0b5f59; color:#fff; }
/* The comment is the widest thing in the activity table and the reason a customer opens it, so it
   gets a floor: without one it collapses to the width of the header word and a two-line comment
   becomes eight. */
.bp-comment { color:#334155; font-size:13.5px; min-width:200px; }
.bp-comment a { color:var(--bp-activity); font-weight:600; }
.bp-handle { font-weight:700; direction:ltr; display:inline-block; unicode-bidi:isolate; }

/* ---- filters and forms ---- */
.bp-filters { display:flex; gap:10px; align-items:flex-end; flex-wrap:wrap; }
/* minmax(0,1fr) rather than a bare 1fr: the default `auto` track takes its minimum from the widest
   thing in it, and a file input's «Choose File» button is wider than the field it sits in, so the
   column grew and the control hung off the card. */
.bp-field { display:grid; gap:5px; grid-template-columns:minmax(0,1fr); }
/* display:grid beats the browser's own [hidden]{display:none}, so a field that is meant to be closed
   has to be told twice. Without this line the «توکن بات خودتان» box sat on the Telegram tab asking a
   customer for a token they had just said they were not bringing. */
.bp-field[hidden] { display:none; }
.bp-field label { font-size:12.5px; font-weight:700; color:var(--bp-muted); }
.bp-field input,.bp-field select,.bp-field textarea { border:1px solid var(--bp-line-strong); border-radius:10px; padding:9px 12px; font-size:14px; background:#fff; color:var(--bp-ink); font-family:inherit; }
.bp-field input:focus,.bp-field select:focus,.bp-field textarea:focus { outline:2px solid #99d3cb; outline-offset:1px; border-color:var(--bp-teal); }
.bp-field textarea { resize:vertical; line-height:1.9; min-height:76px; }
/* A file input carries the browser's own «Choose File» button, whose intrinsic width is wider than
   the column it is put in; without this it grows the grid cell and pushes itself off the card. */
.bp-field input[type=file] { max-width:100%; padding:7px 10px; }
/* The hint under a box, and the reason it is a colour of its own: on a form where four fields are
   compulsory and the sentence under each one says what it is for, a hint set in the label's grey
   reads as part of the label and gets skipped. */
.bp-field .bp-note { margin:0; font-size:12px; line-height:1.8; }
/* A box that needs a whole line: a paragraph of explanation cannot share a row with a phone number. */
.bp-field.wide { grid-column:1 / -1; }

/* ---- sign in ---- */
.bp-auth { min-height:100vh; display:grid; place-items:center; padding:24px; }
.bp-auth-card { width:min(430px,100%); background:var(--bp-paper); border:1px solid var(--bp-line); border-radius:20px; box-shadow:0 20px 50px #0f172a14; padding:32px; }
.bp-auth-card img { width:44px; height:44px; border-radius:12px; }
.bp-auth-card h1 { margin:14px 0 6px; font-size:21px; }
.bp-auth-card p.lead { color:var(--bp-muted); font-size:14px; margin-bottom:20px; }
.bp-auth-card .bp-field { margin-bottom:14px; }
.bp-auth-card .bp-field input { width:100%; }
.bp-auth-card .bp-button { width:100%; margin-top:6px; }
/* Google's button keeps Google's own colours and mark. It is the one element on this page that is
   not ours to restyle — a recoloured Google button reads as a phishing page to anybody who has been
   taught to look for the real one. */
.bp-button.google { display:flex; align-items:center; justify-content:center; gap:10px; width:100%; padding:12px 14px; background:#fff; border-color:var(--bp-line-strong); color:#3c4043; font-weight:700; }
.bp-button.google:hover { background:#f8fafc; border-color:#9aa5b1; color:#3c4043; }
.bp-button.google svg { flex:none; }
.bp-link-button { display:block; width:100%; margin-top:12px; border:0; background:transparent; color:var(--bp-muted); font-size:13.5px; text-decoration:underline; text-underline-offset:3px; }
.bp-link-button:hover { color:var(--bp-teal); }
.bp-or { display:flex; align-items:center; gap:12px; margin:18px 0 14px; color:var(--bp-muted); font-size:12.5px; }
.bp-or:before,.bp-or:after { content:''; flex:1; height:1px; background:var(--bp-line); }
.bp-auth-note { margin-top:18px; padding-top:16px; border-top:1px solid var(--bp-line); font-size:13px; color:var(--bp-muted); line-height:1.9; }
.bp-error { background:var(--bp-danger-soft); border:1px solid #f3caca; color:#8f1717; border-radius:10px; padding:10px 13px; font-size:13.5px; margin-bottom:14px; }
.bp-ok { background:var(--bp-money-soft); border:1px solid #c7e8d3; color:#14532d; border-radius:10px; padding:10px 13px; font-size:13.5px; margin-bottom:14px; }

/* ---- states ---- */
.bp-state { padding:44px 20px; text-align:center; color:var(--bp-muted); font-size:14.5px; }
.bp-state strong { display:block; color:var(--bp-ink); font-size:16px; margin-bottom:6px; }
.bp-skeleton { border-radius:var(--bp-radius); background:linear-gradient(90deg,#eef2f7,#f8fafc,#eef2f7); background-size:200% 100%; animation:bp-shimmer 1.2s infinite; height:110px; }
@keyframes bp-shimmer { from { background-position:200% 0; } to { background-position:-200% 0; } }

/* ---- the small print that keeps the numbers honest ---- */
/* Written on `small` as often as on `p`, and a `small` is inline: inside a table cell that runs the
   note into the end of the value above it and «کافه دنج» becomes «کافه دنجلوگو». */
.bp-note { display:block; font-size:12.5px; color:var(--bp-muted); line-height:1.9; }
.bp-note code { background:#f1f5f9; border-radius:5px; padding:1px 5px; font-size:12px; }

/* A price that wraps between the digits and «تومان» reads as two facts instead of one, and inside a
   150px tile it wraps every time. */
.bp-post-cost b { white-space:nowrap; }
@media (max-width:620px) {
  /* Two rows on a phone: the brand and the account on the first, the whole nav on the second. Without
     the wrap all three compete for 390px, and the email lands on top of the logo while the nav is
     clipped after its first word. */
  .bp-top-inner { padding:12px 16px; gap:10px; flex-wrap:wrap; }
  .bp-nav { order:3; width:100%; margin-inline-start:0; overflow-x:auto; flex-wrap:nowrap; }
  .bp-account { margin-inline-start:auto; }
  .bp-account span { max-width:140px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .bp-main { padding:18px 16px 48px; }
  .bp-posts { grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:12px; }
  .bp-post-cost { font-size:12px; }
}

/* ---- گوگل مپ ------------------------------------------------------------------
   The media pool. A grid of small tiles rather than a list, because the question a customer asks of
   this section is «how many have I got and which are still free», and that is a shape you count at a
   glance rather than read down. The state chip sits on the caption instead of over the picture: a
   badge floating on a photo of a dining room is unreadable on half the photos it lands on. */
.bp-list { margin:0; padding-inline-start:18px; display:grid; gap:8px; font-size:13.5px; line-height:1.9; color:var(--bp-ink); }
.bp-list li::marker { color:var(--bp-teal); }
.bp-media-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:12px; margin-top:16px; }
.bp-media { margin:0; border:1px solid var(--bp-line); border-radius:12px; overflow:hidden; background:#fff; }
.bp-media img,.bp-media video { display:block; width:100%; aspect-ratio:1/1; object-fit:cover; background:#f1f5f9; }
.bp-media figcaption { display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding:8px 10px; }
.bp-media figcaption .bp-note { margin:0; font-size:11.5px; }
.bp-media figcaption .bp-button { margin-inline-start:auto; padding:4px 9px; font-size:11.5px; }
.bp-media-state { font-size:11.5px; font-weight:700; border-radius:8px; padding:3px 8px; }
.bp-media-state.free { color:#0f766e; background:#ccfbf1; }
.bp-media-state.pending { color:#92400e; background:#fef3c7; }
.bp-media-state.live { color:#15803d; background:#dcfce7; }
.bp-form-status { margin:8px 0 0; font-size:13px; color:#b91c1c; min-height:1em; }
@media (max-width:640px) { .bp-media-grid { grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); gap:10px; } }
/* The three steps of setting this up, before there is anything to show. It is a list rather than a
   wizard with pages: all three are short, the customer needs to know what the second and third are
   before deciding whether to start the first, and a page that hides the price behind two screens is
   the one people close. */
.bp-steps { counter-reset:step; list-style:none; margin:0 0 18px; padding:0; display:grid; gap:10px; }
.bp-steps li { counter-increment:step; position:relative; padding:12px 52px 12px 14px; border:1px solid var(--bp-line); border-radius:12px; background:var(--bp-paper); }
.bp-steps li::before { content:counter(step); position:absolute; inset-inline-start:14px; top:12px; width:26px; height:26px; border-radius:50%; display:grid; place-items:center; font-weight:800; font-size:13px; color:var(--bp-muted); background:#eef2f7; }
.bp-steps li.now::before { color:#fff; background:var(--bp-teal); }
.bp-steps li b { display:block; font-size:14px; }
.bp-steps li span { display:block; margin-top:3px; font-size:12.5px; color:var(--bp-muted); line-height:1.9; }

/* Where the order stands. Three segments in one bar, because «delivered» and «somebody is writing it
   right now» are different answers to the question this bar is asked on a quiet afternoon, and the
   remainder is what is left to buy. The bar is decorative for a screen reader: the legend under it
   carries the same three numbers as text. */
.bp-progress { display:flex; height:12px; border-radius:99px; background:#eef2f7; overflow:hidden; }
.bp-progress>span { display:block; height:100%; transition:width .3s ease; }
.bp-progress>span.done { background:linear-gradient(90deg,#0f766e,#2dd4bf); }
.bp-progress>span.open { background:repeating-linear-gradient(135deg,#fcd34d,#fcd34d 5px,#fde68a 5px,#fde68a 10px); }
.bp-legend { list-style:none; margin:12px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:8px 18px; font-size:12.5px; color:var(--bp-muted); }
.bp-legend i { display:inline-block; width:10px; height:10px; border-radius:3px; margin-inline-end:6px; vertical-align:middle; }
.bp-legend i.done { background:#0f766e; }
.bp-legend i.open { background:#fcd34d; }
.bp-legend i.rest { background:#e2e8f0; }

/* The order slider, and the number it is worth. The reading sits beside the track rather than under
   it so the price is in the eye while the thumb is under the finger; on a phone it drops below,
   because a slider squeezed to half a row is a slider nobody can land on a value with. */
.bp-card-call { border-color:var(--bp-teal); box-shadow:0 0 0 3px var(--bp-teal-soft), var(--bp-shadow); }
.bp-range-row { display:flex; align-items:center; gap:18px; }
/* The running total under the two sliders, set apart from them so it does not read as a third one. */
.bp-tg-total { margin-top:14px; padding-top:12px; border-top:1px solid var(--bp-line); }
.bp-range-row input[type=range] { flex:1; accent-color:var(--bp-teal); }
.bp-range-read { min-width:150px; text-align:center; }
.bp-range-read strong { display:block; font-size:19px; font-weight:800; }
.bp-range-read span { display:block; margin-top:2px; font-size:14px; font-weight:700; color:var(--bp-money); }
.bp-note-warn { color:var(--bp-warn); background:var(--bp-warn-soft); border-radius:12px; padding:12px 14px; }
@media (max-width:640px) { .bp-range-row { flex-direction:column; align-items:stretch; gap:10px; } .bp-range-read { text-align:start; } }

/* Every review the customer bought, whole. A card and not a table row: this is a paragraph a
   stranger will read about their business, and a paragraph squeezed into a cell between two numbers
   is a paragraph nobody reads. The picture is fixed-width and the text takes the rest, so a wall of
   ten of them still scans down one edge. */
.bp-reviews { list-style:none; margin:0; padding:0; display:grid; gap:14px; }
.bp-review { display:flex; gap:14px; padding:14px; border:1px solid var(--bp-line); border-radius:12px; background:#fff; }
.bp-review>img { width:104px; height:104px; flex:none; border-radius:10px; object-fit:cover; background:#f1f5f9; }
.bp-review-nophoto { width:104px; height:104px; flex:none; border-radius:10px; display:grid; place-items:center; font-size:11.5px; color:var(--bp-muted); background:#f1f5f9; }
.bp-review-body { min-width:0; flex:1; }
.bp-review-top { display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; }
.bp-review-stars { color:#f59e0b; letter-spacing:2px; font-size:14px; }
.bp-review-charge { margin-inline-start:auto; font-weight:700; color:var(--bp-warn); }
.bp-review-body p { margin:8px 0 0; font-size:13.5px; line-height:2; white-space:pre-line; overflow-wrap:anywhere; }
.bp-review-body a { display:inline-block; margin-top:8px; font-size:12.5px; }
@media (max-width:640px) { .bp-review { flex-direction:column; } .bp-review>img,.bp-review-nophoto { width:100%; height:180px; } }


/* ---- فرستادن عکس‌ها ---- */
/* The one screen in this panel where the customer waits on us for longer than a moment: fifteen
   photos over a phone connection is a minute of nothing. A spinner says only «something is
   happening»; the bar says how much of it is left, which is the difference between waiting and
   pressing the picker a second time. The box sits where the file input was, so the eye does not
   have to go looking for it. */
.bp-upload { display:block; margin:12px 0 4px; padding:14px; border:1px solid var(--bp-teal); border-radius:12px; background:var(--bp-teal-soft); }
.bp-upload-head { display:flex; align-items:center; gap:12px; }
.bp-upload-text { min-width:0; flex:1; }
.bp-upload-text b { display:block; font-size:14px; }
/* The file name is the one piece of text here the customer did not write for a screen: «IMG_20260824_113045_HDR.jpg»
   is wider than a phone and would push the percentage off the row. */
.bp-upload-text .bp-note { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.bp-upload-pct { flex:none; font-size:17px; font-weight:800; color:var(--bp-teal); font-variant-numeric:tabular-nums; }
.bp-upload-bar { display:block; height:8px; margin-top:10px; border-radius:99px; background:#fff; overflow:hidden; }
.bp-upload-bar>b { display:block; height:100%; border-radius:99px; background:linear-gradient(90deg,#0f766e,#2dd4bf); transition:width .3s ease; }
.bp-upload .bp-note { margin-top:6px; }
.bp-spinner { flex:none; width:22px; height:22px; border-radius:50%; border:2.5px solid #ffffff; border-top-color:var(--bp-teal); animation:bp-spin .8s linear infinite; }
@keyframes bp-spin { to { transform:rotate(360deg); } }
/* Somebody who has asked their system not to animate still needs to see that this is running, so the
   ring stops turning and pulses instead. The bar keeps working either way: its width is the fact. */
@media (prefers-reduced-motion:reduce) {
  .bp-spinner { animation:bp-pulse 1.4s ease-in-out infinite; }
  .bp-upload-bar>b { transition:none; }
}
@keyframes bp-pulse { 0%,100% { opacity:1; } 50% { opacity:.35; } }

/* ---- کلید ساخت خودکار وظیفه ---- */
/* The switch and its sentence sit on one row and stack on a narrow screen, with the switch dropping
   under the words rather than beside them: squeezed side by side on a phone the label wraps to four
   lines and the knob ends up floating in the middle of them. */
.bp-toggle-row { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; }
.bp-toggle-row h2 { margin:0 0 6px; font-size:16px; }
.bp-toggle-row .bp-note { margin:0; }
/* A real switch, not a checkbox with a label: it is the only control in this panel that changes what
   the platform does tomorrow, and it has to look like something that is currently in one of two
   states rather than something you tick. The knob travels left in this RTL layout, so «on» is the
   side the eye reads first. */
.bp-toggle { flex:none; width:52px; height:30px; border-radius:99px; border:1px solid var(--bp-line-strong); background:#e2e8f0; padding:3px; position:relative; transition:background .18s ease, border-color .18s ease; }
.bp-toggle>span { display:block; width:22px; height:22px; border-radius:50%; background:#fff; box-shadow:0 1px 3px #0f172a33; transition:transform .18s ease; }
.bp-toggle.on { background:var(--bp-teal); border-color:var(--bp-teal); }
.bp-toggle.on>span { transform:translateX(-22px); }
.bp-toggle:disabled { opacity:.55; }
@media (max-width:560px) { .bp-toggle-row { flex-direction:column; } }

/* ---- ظرفیت یک پست ---- */
/* How many of the people the customer bought have taken the work. On the wall it sits between the
   post's own numbers and the button, which is the order the customer reads the tile in: what this
   is, how it is going, what I can do about it. */
.bp-seat-progress { display:block; margin-top:10px; }
.bp-seat-bar { display:block; height:8px; border-radius:99px; background:#e2e8f0; overflow:hidden; }
.bp-seat-bar>b { display:block; height:100%; border-radius:99px; background:linear-gradient(90deg,#0f766e,#2dd4bf); transition:width .3s ease; }
.bp-seat-line { display:block; margin-top:6px; font-size:12.5px; color:var(--bp-muted); }
.bp-seat-progress.full .bp-seat-bar>b { background:linear-gradient(90deg,#475569,#94a3b8); }
.bp-seat-progress.full .bp-seat-line { color:#334155; font-weight:700; }

/* ---- انتخاب تعداد نفرات ---- */
/* The slider is inside the tile rather than in a dialog over it, because the number it picks is
   priced against this post and this balance, and a customer comparing two posts should be able to
   dial both without anything opening or closing. */
.bp-seat-picker { display:block; margin-bottom:12px; padding:12px; border:1px solid var(--bp-line); border-radius:12px; background:#f8fafc; }
.bp-seat-picker.off { color:var(--bp-muted); font-size:12.5px; line-height:1.9; background:#f1f5f9; }
.bp-seat-head { display:flex; align-items:baseline; justify-content:space-between; gap:10px; }
.bp-seat-head label { font-size:12.5px; color:var(--bp-muted); }
.bp-seat-head b { font-size:15px; color:var(--bp-ink); }
.bp-seat-range { width:100%; margin:10px 0 2px; accent-color:var(--bp-teal); }
.bp-seat-scale { display:flex; justify-content:space-between; font-size:11.5px; color:var(--bp-muted); }
.bp-seat-scale i { font-style:normal; }
.bp-seat-cost { display:block; margin-top:8px; font-size:13px; color:var(--bp-muted); }
.bp-seat-cost b { color:var(--bp-money); font-size:14px; }
.bp-seat-note { display:block; margin-top:6px; font-size:11.5px; color:var(--bp-muted); line-height:1.9; }

/* ---- کار بی‌سقف ---- */
/* The switch that takes the number away, and the line a box without one shows instead of a bar. It
   sits above the slider rather than beside it because it decides whether there is a slider at all,
   and a control that removes another control has to be read first. */
.bp-seat-mode { display:block; margin-bottom:10px; }
.bp-seat-switch { display:flex; align-items:center; gap:8px; padding:10px 12px; border:1px solid var(--bp-line); border-radius:12px; background:#f8fafc; font-size:12.5px; color:var(--bp-ink); cursor:pointer; }
.bp-seat-switch input { accent-color:var(--bp-teal); width:16px; height:16px; flex:none; }
.bp-seat-switch:hover { border-color:var(--bp-teal); }
.bp-seat-progress.open .bp-seat-line { color:#0f766e; font-weight:700; }

/* ---- رشد صفحه ---- */
/* The follower line, one bar per day, split at the day work started. The split is carried by colour
   rather than by a marker line because the bars are only a few pixels wide on a phone and a line
   between two of them is lost; two colours survive a screenshot, which is what this chart is for.
   Heights are set inline from the data, so everything here is only the shell they sit in. */
.bp-growth-chart { display:flex; align-items:flex-end; gap:3px; height:132px; padding:10px 12px; border:1px solid var(--bp-line); border-radius:12px; background:#f8fafc; overflow-x:auto; }
.bp-growth-bar { flex:1 1 0; min-width:5px; border-radius:4px 4px 0 0; background:#cbd5e1; }
.bp-growth-bar.after { background:linear-gradient(180deg,#2dd4bf,#0f766e); }
.bp-growth-legend { display:flex; flex-wrap:wrap; align-items:center; gap:14px; margin-top:10px; font-size:12.5px; color:var(--bp-muted); }
.bp-growth-legend i { display:inline-block; width:11px; height:11px; margin-inline-end:5px; border-radius:3px; vertical-align:-1px; }
.bp-growth-legend i.before { background:#cbd5e1; }
.bp-growth-legend i.after { background:#0f766e; }
/* A sample size sits inside the same cell as the number it qualifies, so it must not take the cell's
   own weight and colour with it: «۱۲٫۴» is the figure and «(از ۷ پست)» is the footnote to it. */
.bp-table .num .bp-note { font-size:11.5px; font-weight:500; }
/* Four columns of comparison need a floor to sit on. `.bp-table-wrap` already scrolls, but a table at
   width:100% never overflows it — it squeezes instead, and on a phone the last column was clipped
   mid-word to «هنو». With a min-width the columns keep their shape and the wrap does its job. */
.bp-table-eras { min-width:520px; }
.bp-table-eras td:first-child { min-width:132px; }

/* ---- بهینه‌سازی صفحه و کپشن ----------------------------------------------------
   Everything on this screen exists to be copied out of it and pasted into Instagram, so the copy
   itself is set apart from the panel's own writing: a paper-white box, the text at the size it will
   be read at on a phone, and the button on the same row as the thing it copies rather than at the
   bottom of the card. A customer with three variants in front of them has three buttons, each next
   to the words it takes. */
.bp-sub { margin:22px 0 10px; font-size:15px; font-weight:800; }
.bp-sub:first-child { margin-top:0; }
.bp-note-lead { margin-bottom:12px; }
/* The copy blocks keep the line breaks the model wrote, because a caption is written in short chunks
   with air between them and a caption reflowed into a paragraph is a different caption. */
.bp-pre { white-space:pre-line; overflow-wrap:anywhere; }
.bp-copy { display:flex; align-items:flex-start; gap:10px; margin:8px 0; }
.bp-copy-text {
  flex:1; min-width:0; margin:0; padding:12px 14px; border:1px solid var(--bp-line); border-radius:12px;
  background:#fff; font-family:inherit; font-size:14px; line-height:2; white-space:pre-wrap; overflow-wrap:anywhere;
}
.bp-copy-button { flex:none; padding:8px 12px; font-size:12.5px; }
@media (max-width:640px) { .bp-copy { flex-direction:column; } .bp-copy-button { align-self:flex-start; } }

/* A count that is a fact until it is a problem. Instagram cuts the Name field at 30 and the bio at
   150 without saying so, and a suggestion the customer pastes in and loses the end of is worse than
   no suggestion, so the number travels with every candidate. */
.bp-count-chip { display:inline-block; margin-inline-start:8px; padding:2px 8px; border-radius:99px; font-size:11.5px; font-weight:700; color:#334155; background:#f1f5f9; font-variant-numeric:tabular-nums; }
.bp-count-chip.over { color:#8f1717; background:var(--bp-danger-soft); }

/* What the page says today, beside what it could say. Two columns on a desktop so the comparison is
   one glance rather than a scroll, one column on a phone where it never was. */
.bp-current { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:14px; }
.bp-current>div { padding:14px; border:1px solid var(--bp-line); border-radius:12px; background:#f8fafc; }
.bp-current p { margin-top:6px; font-size:14px; line-height:2; overflow-wrap:anywhere; }

.bp-candidates { list-style:none; margin:0; padding:0; display:grid; gap:14px; }
.bp-candidate { padding:14px; border:1px solid var(--bp-line); border-radius:12px; background:var(--bp-paper); }
.bp-candidate-head { display:flex; align-items:baseline; flex-wrap:wrap; gap:6px; font-size:13.5px; }
.bp-recommended { margin-top:22px; padding:16px; border:1px solid #c7e6e0; border-radius:12px; background:var(--bp-teal-soft); }
.bp-recommended p { margin-top:8px; font-size:14px; line-height:2; }
.bp-recommended .bp-list { margin-top:10px; }

/* One caption variant. The recommended one is marked rather than moved to the top: the customer
   asked for three and reordering them would make «نسخهٔ ۱» mean something different every time. */
.bp-variant { padding:16px; border:1px solid var(--bp-line); border-radius:12px; background:var(--bp-paper); margin-top:14px; }
.bp-variant.best { border-color:var(--bp-teal); box-shadow:0 0 0 3px var(--bp-teal-soft); }
.bp-variant-head { display:flex; align-items:center; flex-wrap:wrap; gap:8px; font-size:14px; }
.bp-variant-extras { margin:12px 0 0; display:grid; gap:4px; }
.bp-variant-extras dt { font-size:12.5px; font-weight:700; color:var(--bp-muted); margin-top:8px; }
.bp-variant-extras dd { margin:0; font-size:14px; line-height:2; }
.bp-variant-extras dd .bp-copy { margin-top:4px; }

/* Everything written before this month's newest, folded away. A customer comes back for the caption
   they were given last week often enough that it must be reachable, and rarely enough that it must
   not be in the way. */
.bp-past { margin-top:12px; }
.bp-past>summary { display:flex; align-items:baseline; justify-content:space-between; gap:12px; padding:14px 20px; cursor:pointer; font-size:14px; }
.bp-past>summary::-webkit-details-marker { display:none; }
.bp-past[open]>summary { border-bottom:1px solid var(--bp-line); }

/* Printing is the export: a customer's accountant wants the statement on paper or as a PDF, and
   «print to PDF» is in every browser already. Chrome and Safari drop background colours by default,
   so nothing on the page may depend on one to be readable. */
@media print {
  body.brand-body { background:#fff; font-size:12px; }
  .bp-top,.bp-signout,.bp-filters,.bp-page-actions,.bp-button,.bp-nav,.bp-impersonation { display:none !important; }
  .bp-main { width:100%; padding:0; }
  .bp-card,.bp-stat { box-shadow:none; break-inside:avoid; }
  .bp-growth-chart { break-inside:avoid; -webkit-print-color-adjust:exact; print-color-adjust:exact; }
  .bp-growth-bar { -webkit-print-color-adjust:exact; print-color-adjust:exact; border:1px solid #94a3b8; border-bottom:0; }
  .bp-growth-bar.after { border-color:#0f766e; }
  .bp-table { font-size:11px; }
  .bp-table th { background:transparent; border-bottom:1px solid #333; }
  .bp-posts { grid-template-columns:repeat(3,1fr); }
  a[href]:after { content:''; }
}