/* «كيولين ماكس» — الحاسبة (super-admin, read-only). Phone first: the founder
   opens the dashboard in Safari on an iPhone, so every block stacks at 375 px
   and only widens into columns from 760 px. Built on the dashboard's own
   tokens (css/main.css) so it reads as part of the same product. */

#section-qlean-max .qmx-shell { overflow: visible; }
#qmx-root { display: flex; flex-direction: column; gap: 14px; transition: opacity .2s; }
#qmx-root.qmx-busy { opacity: .72; }
.qmx-scope { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 12px 14px;
  border-radius: 14px; background: rgba(var(--accent-rgb), .07); border: 1px solid rgba(var(--accent-rgb), .25); }
.qmx-scope-city { display: flex; align-items: center; gap: 8px; font-weight: 800; color: var(--text-primary); font-size: 13.5px; min-width: 0; }
#qmx-root .qmx-scope-city select { min-width: 0; max-width: 100%; background: var(--bg-color); color: var(--text-primary);
  border: 1px solid var(--border-color); border-radius: 10px; padding: 8px 10px; font: inherit; font-size: 14px; font-weight: 700; }
.qmx-scope-note { margin: 0; font-size: 12.5px; color: var(--text-secondary); line-height: 1.7; flex: 1 1 220px; }
/* Figures from the PREVIOUS inputs, while new ones are pending or refused. */
.qmx-stale { opacity: .45; filter: grayscale(.7); }
.qmx-banner { margin: 0; padding: 10px 12px; border-radius: 12px; font-size: 13px; font-weight: 700; line-height: 1.7;
  background: rgba(255, 82, 82, .12); color: var(--error-color); border: 1px solid rgba(255, 82, 82, .35); }
.qmx-banner:empty { display: none; }
.qmx-btn:disabled { opacity: .45; cursor: not-allowed; }
.qmx-nw { white-space: nowrap; }

#section-qlean-max .section-card-head { flex-wrap: wrap; gap: 10px; }

/* The three tabs (founder, 17 Oct 2026): one quiet segmented bar, then the
   tab's one line. NOT sticky — a pinned bar over the cards was the problem
   before (14 Oct), so nothing ever sits behind it. Each tab a 44 px target. */
.qmx-tabs { display: flex; gap: 4px; padding: 4px; border-radius: 14px;
  background: rgba(255, 255, 255, .03); border: 1px solid var(--border-color); }
.qmx-tab { flex: 1 1 0; min-width: 0; min-height: 44px; display: inline-flex; align-items: center; justify-content: center;
  gap: 8px; padding: 0 10px; border: 0; border-radius: 10px; background: transparent; color: var(--text-secondary);
  font: inherit; font-size: 14.5px; font-weight: 700; cursor: pointer; white-space: nowrap;
  transition: background .15s, color .15s; }
.qmx-tab i { font-size: 13px; opacity: .85; }
.qmx-tab:hover { color: var(--text-primary); background: rgba(255, 255, 255, .04); }
.qmx-tab.on { color: var(--text-primary); background: rgba(var(--accent-rgb), .14);
  box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), .45); }
.qmx-tab.on i { color: var(--accent-color); opacity: 1; }
.qmx-tab:focus-visible { outline: 2px solid var(--accent-color); outline-offset: 2px; }
.qmx-tabline { margin: -4px 2px 0; font-size: 14px; line-height: 1.7; color: var(--text-secondary); }
.qmx-tabpanel { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.qmx-tabpanel[hidden], #qmx-root .qmx-scope[hidden],
#section-qlean-max details.page-hint[hidden] { display: none !important; }
/* An open fold shows its content: the one-line summary of it would say the
   same thing twice, so it goes while the fold is open. */
/* «باقات كيولين ماكس» keeps its line open: its counts (live, sold, in
   flight) are nowhere in the list below. */
details.qmx-fold[open] > summary .qmx-fold-line:not(#qmx-bundles-line) { display: none; }
/* «ماذا يعني هذا الرقم؟» under the summary's counts — folded. */
details.qmx-sum-why { margin-top: 6px; font-size: 13px; color: var(--text-secondary); }
details.qmx-sum-why > summary { cursor: pointer; min-height: 32px; display: inline-flex; align-items: center;
  font-weight: 700; color: var(--text-secondary); }
details.qmx-sum-why > p { margin: 4px 0 0; line-height: 1.8; }
@media (max-width: 400px) {
  .qmx-tab { gap: 6px; padding: 0 6px; font-size: 14px; }
}

.qmx-card {
  background: rgba(255, 255, 255, .025);
  border: 1px solid var(--border-color);
  border-radius: 16px; padding: 16px; min-width: 0;
}
.qmx-h { margin: 0 0 10px; font-size: 15.5px; font-weight: 800; color: var(--text-primary);
  display: flex; align-items: center; gap: 8px; line-height: 1.5; }
.qmx-h i { color: var(--accent-color); }
.qmx-lead { margin: -4px 0 12px; color: var(--text-secondary); font-size: 13px; line-height: 1.7; }
.qmx-muted { color: var(--text-secondary); }
.qmx-n { unicode-bidi: isolate; font-variant-numeric: tabular-nums; }
.qmx-neg { color: var(--error-color); }
.qmx-pos { color: var(--success-color); }
.qmx-warn { color: #ffb74d; }
.qmx-loading { color: var(--text-secondary); padding: 18px 4px; text-align: center; }


/* inputs */
.qmx-row-label { font-size: 12.5px; color: var(--text-secondary); margin: 8px 0 6px; }
.qmx-seg { display: flex; gap: 4px; padding: 4px; border-radius: 12px; background: rgba(255,255,255,.04);
  border: 1px solid var(--border-color); }
.qmx-seg button { flex: 1 1 0; min-width: 0; border: 0; border-radius: 9px; padding: 9px 8px; cursor: pointer;
  background: transparent; color: var(--text-secondary); font: inherit; font-size: 13px; font-weight: 700; line-height: 1.4; }
.qmx-seg button.on { background: var(--accent-color); color: #0b1016; }

.qmx-sizes { margin-top: 14px; display: flex; flex-direction: column; gap: 10px; }
.qmx-sizes-head { display: none; }
.qmx-size-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 10px; padding: 10px;
  border-radius: 12px; background: rgba(255,255,255,.03); }
.qmx-size-name { grid-column: 1 / -1; font-weight: 800; color: var(--text-primary); font-size: 13.5px; }
.qmx-size-row > .qmx-field { grid-column: 1 / -1; }
@media (min-width: 760px) {
  .qmx-sizes-head { display: grid; grid-template-columns: 74px repeat(3, minmax(0, 1fr)); gap: 10px;
    font-size: 12px; color: var(--text-secondary); padding: 0 10px; }
  .qmx-size-row { grid-template-columns: 74px repeat(3, minmax(0, 1fr)); align-items: start; }
  .qmx-size-name { grid-column: auto; padding-top: 10px; }
  .qmx-size-row > .qmx-field { grid-column: auto; }
  .qmx-size-row .qmx-field-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
}
.qmx-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.qmx-field-label { font-size: 12px; color: var(--text-secondary); line-height: 1.5; }
.qmx-field-box { display: flex; align-items: center; gap: 6px; min-width: 0;
  background: var(--bg-color); border: 1px solid var(--border-color); border-radius: 10px; padding: 0 10px; }
.qmx-field-box:focus-within { border-color: var(--accent-color); }
#qmx-root .qmx-field-box input { flex: 1 1 auto; min-width: 0; width: 100%; border: 0; outline: 0; background: transparent;
  color: var(--text-primary); font: inherit; font-size: 16px; font-weight: 700; padding: 9px 0; }
.qmx-unit { font-style: normal; font-size: 11.5px; color: var(--text-secondary); white-space: nowrap; }
.qmx-hint { display: block; margin-top: 3px; font-size: 11.5px; color: var(--text-secondary); line-height: 1.6; }
.qmx-more { margin-top: 14px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 360px) { .qmx-more { grid-template-columns: 1fr; } }

.qmx-error { margin: 10px 0 0; color: var(--error-color); font-size: 13px; min-height: 0; }
.qmx-error:empty { display: none; }

/* the answer */
.qmx-answer { margin-top: 12px; }
.qmx-be-grid { display: grid; grid-template-columns: 1fr; gap: 10px; }
@media (min-width: 560px) and (max-width: 1099px) { .qmx-be-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.qmx-be { border-radius: 12px; padding: 12px; background: rgba(0,0,0,.18); border: 1px solid var(--border-color); min-width: 0; }
.qmx-be-size { font-weight: 800; color: var(--text-primary); font-size: 13.5px; }
.qmx-be-size small { font-weight: 500; color: var(--text-secondary); margin-inline-start: 4px; }
.qmx-be-big { font-size: 26px; font-weight: 800; color: var(--accent-color); margin: 4px 0 2px; line-height: 1.3; }
.qmx-be-big small { font-size: 12.5px; color: var(--text-secondary); font-weight: 600; }
.qmx-be-sub, .qmx-be-split, .qmx-be-now { font-size: 12.5px; color: var(--text-secondary); line-height: 1.7; }
.qmx-be-now { margin-top: 4px; padding-top: 6px; border-top: 1px dashed var(--border-color); }
.qmx-answer-foot { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; }
.qmx-verdict { font-weight: 800; font-size: 14px; line-height: 1.6; }
.qmx-v-loss { color: var(--error-color); }
.qmx-v-gain { color: var(--success-color); }

.qmx-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; cursor: pointer;
  border: 0; border-radius: 10px; padding: 9px 14px; font: inherit; font-size: 13px; font-weight: 800;
  background: var(--accent-color); color: #0b1016; line-height: 1.4; text-align: center; }
.qmx-btn-ghost { background: rgba(255,255,255,.06); color: var(--text-primary); }
.qmx-link { border: 0; background: none; padding: 0; color: var(--accent-color); font: inherit; font-weight: 800; cursor: pointer; text-decoration: underline; }

/* platform */
.qmx-tiles { display: grid; grid-template-columns: 1fr; gap: 10px; }
@media (min-width: 640px) { .qmx-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.qmx-tile { border-radius: 12px; padding: 12px; background: rgba(0,0,0,.18); border: 1px solid var(--border-color);
  border-inline-start: 4px solid var(--border-color); min-width: 0; }
.qmx-t-loss { border-inline-start-color: var(--error-color); }
.qmx-t-gain { border-inline-start-color: var(--success-color); }
.qmx-tile-label { font-size: 12.5px; color: var(--text-secondary); font-weight: 700; }
.qmx-tile-big { font-size: 22px; font-weight: 800; margin: 2px 0; line-height: 1.35; }
.qmx-tile-big small, .qmx-tile-sub { font-size: 12px; color: var(--text-secondary); font-weight: 600; }
.qmx-tile-note { font-size: 11.5px; color: var(--text-secondary); margin-top: 4px; line-height: 1.6; }
.qmx-notes { margin: 12px 0 0; padding-inline-start: 18px; color: var(--text-secondary); font-size: 12.5px; line-height: 1.8; }

/* tools — one quiet row above the laundries. 🔴 NOT PINNED, at any width
   (founder, 14 Oct 2026): a bar 112–132px tall pinned over the cards was the
   problem, not its offset. It scrolls away with the list. */
.qmx-tools { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px 10px; padding: 4px 0; }
.qmx-search { flex: 1 1 240px; min-width: 0; display: flex; align-items: center; gap: 8px; padding: 0 12px; border-radius: 12px;
  background: var(--bg-color); border: 1px solid var(--border-color); }
.qmx-search i { color: var(--text-secondary); }
#qmx-root .qmx-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--text-primary);
  font: inherit; font-size: 16px; padding: 10px 0; width: 100%; }
details.qmx-filter { flex: 0 1 auto; min-width: 0; }
details.qmx-filter[open] { flex-basis: 100%; }
details.qmx-filter > summary { list-style: none; cursor: pointer; display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 8px;
  min-height: 44px; padding: 4px 14px; border: 1px solid var(--border-color); border-radius: 12px;
  font-size: 13px; font-weight: 700; color: var(--text-primary); }
details.qmx-filter > summary::-webkit-details-marker { display: none; }
details.qmx-filter > summary i { color: var(--text-secondary); }
.qmx-filter-on { color: var(--accent-color); overflow-wrap: anywhere; }
.qmx-filter-on:empty { display: none; }
.qmx-filter-body { margin-top: 10px; display: grid; gap: 10px; min-width: 0; }
.qmx-clear { min-height: 44px; padding: 0 4px; }
.qmx-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.qmx-chip { flex: 0 0 auto; border: 1px solid var(--border-color); background: transparent; color: var(--text-secondary);
  border-radius: var(--radius-pill); padding: 7px 13px; min-height: 36px; font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; }
.qmx-chip.on { background: rgba(var(--accent-rgb), .15); color: var(--accent-color); border-color: rgba(var(--accent-rgb), .5); }
.qmx-selects { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap: 8px; max-width: 640px; }
.qmx-selects label { display: flex; flex-direction: column; gap: 3px; min-width: 0; font-size: 11.5px; color: var(--text-secondary); }
#qmx-root .qmx-selects select { width: 100%; min-width: 0; background: var(--bg-color); color: var(--text-primary);
  border: 1px solid var(--border-color); border-radius: 10px; padding: 8px; font: inherit; font-size: 13px; }
.qmx-count { font-size: 12.5px; color: var(--text-secondary); }

/* laundries — grouped by what can be done (founder, 16 Oct 2026). Each
   group has a colour AND a dot shape, so it reads without reading: solid for
   a step on ماهر's side or a settled state, a ring for one waiting on the
   owner or the calendar. One column: the order is the meaning. */
/* Each group its own colour from the dashboard's palette: blue to send,
   amber for a step of his, white for the owner's turn, green in force, gold
   for an end in sight, grey for done or out. */
.qmx-b-ready { --band: var(--accent-color); }
.qmx-b-waiting { --band: #ffb74d; }
.qmx-b-pending { --band: var(--text-primary); }
.qmx-b-inforce { --band: var(--success-color); }
.qmx-b-ending { --band: #f5c542; }
.qmx-b-ended, .qmx-b-cannot, .qmx-b-unread { --band: var(--text-secondary); }
.qmx-dot { flex: 0 0 auto; display: inline-block; width: 12px; height: 12px; border-radius: 50%; box-sizing: border-box;
  border: 2px solid var(--band); background: var(--band); }
.qmx-dot.qmx-b-pending, .qmx-dot.qmx-b-ending, .qmx-dot.qmx-b-cannot, .qmx-dot.qmx-b-unread { background: transparent; }
.qmx-list { display: grid; gap: 20px; min-width: 0; }
.qmx-band { display: grid; gap: 8px; min-width: 0; }
.qmx-band-h { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 0; min-height: 32px;
  font-size: 14.5px; font-weight: 800; color: var(--text-primary); }
.qmx-band-h .qmx-n { color: var(--text-secondary); font-weight: 800; }
.qmx-band-h .qmx-muted { color: var(--text-secondary); }
.qmx-band-h .qmx-sum-test { display: inline; }
.qmx-band-h .qmx-muted { font-size: 12px; font-weight: 600; }
.qmx-band-empty .qmx-band-h { color: var(--text-secondary); font-weight: 700; font-size: 13px; }
details.qmx-band > summary { list-style: none; cursor: pointer; }
details.qmx-band > summary::-webkit-details-marker { display: none; }
details.qmx-band[open] > summary .qmx-fold-caret { transform: rotate(180deg); }
.qmx-band-list { display: grid; gap: 8px; min-width: 0; }
.qmx-laundry { border-radius: 14px; padding: 12px 14px; background: rgba(255,255,255,.025); min-width: 0;
  border: 1px solid var(--border-color); border-inline-start: 3px solid var(--band, var(--border-color));
  display: flex; flex-direction: column; gap: 10px; }
.qmx-laundry.qmx-b-pending, .qmx-laundry.qmx-b-ending, .qmx-laundry.qmx-b-cannot, .qmx-laundry.qmx-b-unread { border-inline-start-style: dashed; }
/* Phone: name and money, then the state, then the action. Wide: one line. */
.qmx-l-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 14px; align-items: center;
  grid-template-areas: "name money" "state state" "acts acts"; }
.qmx-l-name { grid-area: name; }
.qmx-l-state { grid-area: state; min-width: 0; display: grid; gap: 6px; }
.qmx-l-money { grid-area: money; min-width: 0; max-width: 46vw; text-align: end; }
.qmx-l-acts { grid-area: acts; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; }
.qmx-l-acts .qmx-btn { min-height: 44px; }
.qmx-l-go { flex: 1 1 120px; }
.qmx-l-more-btn { flex: 0 1 auto; min-width: 0; gap: 8px; padding-inline: 14px; }
.qmx-l-more-btn[aria-expanded="true"] .qmx-fold-caret { transform: rotate(180deg); }
@media (min-width: 900px) {
  .qmx-l-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr) auto auto; grid-template-areas: "name state money acts"; }
  .qmx-l-acts { flex-wrap: nowrap; justify-content: flex-end; }
  .qmx-l-go { flex: 0 0 auto; }
}
.qmx-l-again { display: flex; }
.qmx-l-again .qmx-btn { min-height: 44px; }
.qmx-l-washed { margin: 0; font-size: 12.5px; color: var(--text-secondary); line-height: 1.7; }
.qmx-l-sec { margin: 6px 0 -4px; font-size: 12.5px; font-weight: 800; color: var(--text-secondary); }
.qmx-l-more .qmx-meaning p, .qmx-l-washed, .qmx-l-more .qmx-offer-rule, .qmx-l-more .qmx-figs p { max-width: 80ch; }
.qmx-l-name { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.qmx-l-name bdi { font-weight: 800; font-size: 15px; color: var(--text-primary); overflow-wrap: anywhere; line-height: 1.5; }
.qmx-l-name small { font-size: 12px; color: var(--text-secondary); line-height: 1.6; }
/* The money: quiet, beside the state — Qlean's margin here, not the step. */
.qmx-pill { display: inline-block; font-size: 13.5px; font-weight: 800; line-height: 1.35; overflow-wrap: anywhere; }
.qmx-pill small { display: block; font-size: 10.5px; font-weight: 600; color: var(--text-secondary); }
.qmx-p-loss { color: var(--error-color); }
.qmx-p-gain { color: var(--success-color); }
.qmx-p-out { color: var(--text-secondary); font-size: 12.5px; }
.qmx-l-prices { display: flex; flex-direction: column; gap: 6px; }
.qmx-price-line { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 12.5px; color: var(--text-primary); }
.qmx-price-line > b { font-size: 12px; color: var(--text-secondary); font-weight: 700; min-width: 86px; }
.qmx-pz { display: inline-flex; flex-direction: column; align-items: center; min-width: 52px; padding: 4px 8px;
  border-radius: 8px; background: rgba(255,255,255,.04); font-weight: 800; line-height: 1.3; }
.qmx-pz em { font-style: normal; font-size: 10.5px; font-weight: 600; color: var(--text-secondary); }
.qmx-pz small { font-size: 10px; color: var(--text-secondary); font-weight: 600; }
.qmx-pz.qmx-odd { background: rgba(255, 183, 77, .16); color: #ffb74d; outline: 1px solid rgba(255,183,77,.5); }
.qmx-l-peak { display: grid; grid-template-columns: 1fr; gap: 4px; }
.qmx-spark { display: flex; align-items: flex-end; gap: 2px; height: 34px; }
.qmx-spark i { flex: 1 1 0; background: rgba(255,255,255,.12); border-radius: 2px 2px 0 0; min-height: 2px; }
.qmx-spark i.w { background: var(--accent-color); }
.qmx-spark-axis { display: flex; justify-content: space-between; font-size: 9.5px; color: var(--text-secondary); }
.qmx-l-peak-text { font-size: 12.5px; color: var(--text-secondary); line-height: 1.6; }
.qmx-l-peak-text b { color: var(--text-primary); }
.qmx-flags { display: flex; flex-wrap: wrap; gap: 6px; }
.qmx-flag { font-size: 11.5px; font-weight: 700; padding: 3px 9px; border-radius: var(--radius-pill);
  background: rgba(255,255,255,.06); color: var(--text-secondary); line-height: 1.5; }
.qmx-f-missing_service, .qmx-f-no_price, .qmx-f-outlier, .qmx-f-above_his_price { background: rgba(255,183,77,.14); color: #ffb74d; }
.qmx-f-vip_only, .qmx-f-two_rows, .qmx-f-outlier_other, .qmx-f-no_service_orders { background: rgba(var(--accent-rgb), .10); color: var(--accent-color); }
.qmx-grant-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 8px 10px;
  border-radius: 12px; background: rgba(var(--accent-rgb), .06); }
.qmx-grant { display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 700; color: var(--text-primary); min-width: 0; }
#qmx-root .qmx-grant select, #qmx-root #qmx-peak-hours { min-width: 0; background: var(--bg-color); color: var(--text-primary);
  border: 1px solid var(--border-color); border-radius: 10px; padding: 7px 8px; font: inherit; font-size: 13.5px; font-weight: 700; }
#qmx-root #qmx-peak-hours { border: 0; width: 100%; padding: 9px 0; background: transparent; }
.qmx-grant-note { font-size: 12px; color: var(--text-secondary); }
.qmx-detail { display: grid; grid-template-columns: 1fr; gap: 10px; padding-top: 4px; }
@media (min-width: 640px) { .qmx-detail { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.qmx-dz { border-radius: 12px; padding: 10px; background: rgba(0,0,0,.18); min-width: 0; }
.qmx-dz h4 { margin: 0 0 6px; font-size: 13px; color: var(--text-primary); }
.qmx-dz h4 small { color: var(--text-secondary); font-weight: 600; }
.qmx-dz dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 4px 10px; font-size: 12px; }
.qmx-dz dt { color: var(--text-secondary); }
.qmx-dz dd { margin: 0; color: var(--text-primary); font-weight: 700; text-align: left; }
.qmx-dz dd small { display: block; color: var(--text-secondary); font-weight: 500; font-size: 11px; text-align: left; }
.qmx-empty { text-align: center; padding: 30px 12px; color: var(--text-secondary); border: 1px dashed var(--border-color); border-radius: 16px; }
.qmx-empty i { font-size: 24px; margin-bottom: 6px; }

/* the preview sheet */
.qmx-sheet { position: fixed; inset: 0; z-index: 1200; background: rgba(4, 6, 10, .72);
  display: flex; align-items: flex-end; justify-content: center; }
.qmx-sheet.hidden { display: none; }
.qmx-sheet-body { width: 100%; max-width: 560px; max-height: 92vh; max-height: 92dvh; overflow-y: auto; -webkit-overflow-scrolling: touch;
  background: var(--surface-color); border-radius: 20px 20px 0 0; padding: 16px; border: 1px solid var(--border-color); }
@media (min-width: 760px) { .qmx-sheet { align-items: center; } .qmx-sheet-body { border-radius: 20px; } }
body.qmx-sheet-open { overflow: hidden; }
.qmx-sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: var(--text-primary); }
.qmx-sheet-head bdi { overflow-wrap: anywhere; }
.qmx-x { border: 0; background: rgba(255,255,255,.06); color: var(--text-primary); width: 36px; height: 36px; border-radius: 50%; cursor: pointer; flex: 0 0 auto; }
.qmx-sheet-note { font-size: 12.5px; margin: 8px 0 0; line-height: 1.7; color: var(--accent-color); }
.qmx-sheet-note.qmx-muted { color: var(--text-secondary); }
.qmx-sheet-note.qmx-warn { color: #ffb74d; }

/* the owner's card, as he would see it */

/* ── Stage 2 P3: offers from the card, the send sheet, the saved allowance ── */
.qmx-offer-lines { display: grid; gap: 4px; margin: 10px 0 0; font-size: 13px; color: var(--text-secondary); }
.qmx-offer-line { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 10px; line-height: 1.6; }
.qmx-offer-line span { overflow-wrap: anywhere; min-width: 0; }
.qmx-offer-line .qmx-link { padding: 4px 0; min-height: 32px; }
.qmx-offer-flags { display: flex; flex-wrap: wrap; gap: 6px; }
.qmx-f-offer { background: rgba(255, 183, 77, .14); color: #ffb74d; }
.qmx-qm { margin: 14px 0 0; padding: 12px; border: 1px solid var(--border-color); border-radius: 12px; }
.qmx-qm h4 { margin: 0 0 6px; font-size: 13.5px; color: var(--text-primary); }
.qmx-qm h4 + * { margin-top: 0; }
.qmx-qm .qmx-qm-hist { margin-top: 2px; }
.qmx-qm-state, .qmx-qm-owner { margin: 0 0 8px; font-size: 13px; line-height: 1.7; color: var(--text-secondary); }
.qmx-qm-owner { margin-top: 10px; }
.qmx-qm-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px; }
.qmx-qm-form label { display: grid; gap: 4px; font-size: 12px; color: var(--text-secondary); min-width: 0; }
.qmx-qm-form select, .qmx-qm-form input { min-height: 40px; border-radius: 8px; border: 1px solid var(--border-color);
  background: rgba(255,255,255,.04); color: var(--text-primary); font: inherit; padding: 6px 8px; }
.qmx-qm-reason { flex: 1 1 180px; }
.qmx-qm-reason input { width: 100%; box-sizing: border-box; }
.qmx-qm-hist ul { margin: 0; padding-inline-start: 18px; font-size: 12.5px; line-height: 1.9; color: var(--text-secondary); }
.qmx-qm-hist p { margin: 0; font-size: 12.5px; }
.qmx-refusal { margin: 8px 0 0; padding: 8px 10px; border-inline-start: 3px solid #f87171; background: rgba(248, 113, 113, .08);
  color: #fca5a5; font-size: 13px; line-height: 1.7; }
.qmx-refusal.hidden, .qmx-qm .hidden { display: none; }
.qmx-owner-card { margin-top: 12px; padding: 12px; border-radius: 14px; background: var(--bg-color); border: 1px solid var(--border-color); }
/* 🔴 Qlean's side — set apart from the owner's card, never inside it. */
.qmx-qlean-only { margin-top: 12px; padding: 12px; border-radius: 12px; border: 1px dashed rgba(255,255,255,.28); background: rgba(255,255,255,.03); }
.qmx-qlean-only h4 { margin: 0 0 8px; font-size: 12.5px; color: var(--text-secondary); display: flex; gap: 6px; align-items: center; }
.qmx-margin { margin: 0; font-size: 14px; color: var(--text-primary); line-height: 1.7; }
.qmx-margin b { font-size: 16px; }
.qmx-margin-pos b { color: #4ade80; }
.qmx-margin-neg b { color: #f87171; }
.qmx-loss { margin: 8px 0 0; padding: 8px 10px; border-radius: 8px; background: rgba(248, 113, 113, .14); color: #fca5a5;
  font-weight: 800; font-size: 14px; line-height: 1.7; }
.qmx-basis { margin: 8px 0 0; font-size: 12.5px; line-height: 1.8; color: var(--text-secondary); }
.qmx-loss-reason { display: grid; gap: 4px; margin-top: 10px; font-size: 12.5px; color: var(--text-secondary); }
.qmx-loss-reason b { color: #fca5a5; }
.qmx-loss-reason textarea { width: 100%; box-sizing: border-box; min-height: 64px; border-radius: 8px; border: 1px solid var(--border-color);
  background: rgba(255,255,255,.04); color: var(--text-primary); font: inherit; padding: 8px; resize: vertical; }
.qmx-move-from { border: 0; margin: 12px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 16px; color: var(--text-primary); font-size: 13.5px; }
.qmx-move-from legend { font-size: 12.5px; color: var(--text-secondary); margin-bottom: 4px; }
.qmx-move-from label { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; }
.qmx-sheet-foot { display: flex; gap: 10px; margin-top: 14px; position: sticky; bottom: 0; padding: 8px 0 2px; background: var(--surface-color); }
.qmx-sheet-foot .qmx-btn { flex: 1 1 0; min-height: 44px; }
.qmx-btn-send[disabled] { opacity: .45; cursor: not-allowed; }


/* Safari's «aA» at 200% leaves a phone about 188 px of layout: one column.
   LAST in the file on purpose — earlier, the base rules below it would win. */
@media (max-width: 330px) {
  .qmx-size-row, .qmx-selects { grid-template-columns: 1fr; }
  .qmx-l-row { grid-template-columns: minmax(0, 1fr); grid-template-areas: "name" "money" "state" "acts"; }
  .qmx-l-acts .qmx-btn { flex: 1 1 100%; }
  .qmx-l-money { max-width: none; text-align: start; }
  .qmx-price-line > b { min-width: 0; flex-basis: 100%; }
}

/* ── The order ماهر reads it in (14 Oct 2026): ⓪ «كيف أرسل عرضاً؟», the city,
   ① «أين تقف الآن», ② the summary, ③ «أرقامك» folded, ④ «كم أستطيع أن أدفع»
   folded, ⑤ the laundries, ⑥ «المدن» folded, ⑦ «تفاصيل الحساب» folded. Every
   block is a plain child of #qmx-root, in source order, at every width —
   nothing is reordered for the phone. */

/* ① summary */
.qmx-summary { background: linear-gradient(160deg, rgba(var(--accent-rgb), .10), rgba(255,255,255,.02) 60%); }
.qmx-sum-scope { font-size: 12.5px; color: var(--text-secondary); font-weight: 700; line-height: 1.7; }
.qmx-sum-main { margin: 6px 0 4px; font-size: 20px; font-weight: 800; line-height: 1.5; }
.qmx-sum-amt { font-size: 30px; font-weight: 900; }
.qmx-sum-meaning, .qmx-sum-hint { margin: 4px 0 0; font-size: 13px; color: var(--text-secondary); line-height: 1.8; }
.qmx-sum-hint { margin-top: 10px; font-size: 12.5px; }
.qmx-sum-total { font-size: 13px; color: var(--text-secondary); font-weight: 600; }
.qmx-sum-counts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
.qmx-sum-count { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 0; cursor: pointer;
  padding: 8px 6px; border-radius: 12px; border: 1px solid var(--border-color); background: rgba(0,0,0,.18);
  color: var(--text-primary); font: inherit; font-size: 12px; }
.qmx-sum-count b { font-size: 20px; font-weight: 800; }
.qmx-sum-count.on { border-color: var(--accent-color); color: var(--accent-color); }
/* Too narrow for three side by side (a phone at 200%): one per line, the
   number beside its words. */
@media (max-width: 360px) {
  .qmx-sum-counts { grid-template-columns: 1fr; }
  .qmx-sum-count { flex-direction: row; justify-content: space-between; padding: 8px 12px; }
}

/* ② cities */
.qmx-city-list { display: grid; grid-template-columns: 1fr; gap: 6px; }
@media (min-width: 760px) { .qmx-city-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.qmx-city-line { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 2px 10px;
  min-width: 0; padding: 10px 12px; border-radius: 12px; cursor: pointer; text-align: start;
  border: 1px solid var(--border-color); border-inline-start: 4px solid var(--border-color);
  background: rgba(0,0,0,.18); color: var(--text-primary); font: inherit; }
.qmx-city-line.qmx-c-gain { border-inline-start-color: var(--success-color); }
.qmx-city-line.qmx-c-loss { border-inline-start-color: var(--error-color); }
.qmx-city-line.on { background: rgba(var(--accent-rgb), .12); border-color: rgba(var(--accent-rgb), .45); }
.qmx-city-name { font-weight: 800; font-size: 14px; min-width: 0; }
.qmx-city-name small { font-weight: 600; font-size: 11.5px; color: var(--text-secondary); }
.qmx-city-res { font-weight: 800; font-size: 15px; }
.qmx-city-res small { font-size: 11px; color: var(--text-secondary); font-weight: 600; }
.qmx-city-won { flex-basis: 100%; font-size: 11.5px; color: var(--text-secondary); }

/* ③ laundries: the card is short; the offer stays on it */
.qmx-laundries { display: flex; flex-direction: column; gap: 12px; }
.qmx-laundries > .qmx-h { margin-bottom: 0; }
.qmx-l-more { display: flex; flex-direction: column; gap: 10px; padding-top: 10px; border-top: 1px dashed var(--border-color); }
.qmx-l-vat { font-size: 12px; color: var(--text-secondary); }

/* ④ and ⑥: folded blocks */
.qmx-fold > summary { list-style: none; }
.qmx-fold > summary::-webkit-details-marker { display: none; }
.qmx-fold-head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; cursor: pointer; }
.qmx-fold-title { display: inline-flex; align-items: center; gap: 8px; font-weight: 800; font-size: 15.5px; color: var(--text-primary); }
.qmx-fold-title i { color: var(--accent-color); }
.qmx-fold-line { flex: 1 1 220px; min-width: 0; font-size: 12.5px; color: var(--text-secondary); line-height: 1.7; }
.qmx-fold-caret { color: var(--text-secondary); transition: transform .2s; margin-inline-start: auto; }
.qmx-fold[open] > summary .qmx-fold-caret, .qmx-fold-inner[open] > summary .qmx-fold-caret { transform: rotate(180deg); }
.qmx-fold[open] > summary { margin-bottom: 12px; }
.qmx-usage { margin-top: 14px; max-width: 360px; }
.qmx-fold-inner { margin-top: 14px; border-radius: 12px; border: 1px solid var(--border-color); padding: 10px 12px; }
.qmx-fold-inner > summary { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; cursor: pointer;
  font-weight: 800; font-size: 13.5px; color: var(--text-primary); }
.qmx-fold-inner > summary::-webkit-details-marker { display: none; }
.qmx-fold-inner > summary small { flex: 1 1 200px; font-weight: 500; font-size: 11.5px; color: var(--text-secondary); }
.qmx-fold-inner .qmx-more { margin-top: 10px; }
.qmx-fold-inner .qmx-more > div { min-width: 0; }
@media (max-width: 360px) { .qmx-fold-inner { padding: 8px 6px; } }

/* «جمهور تجريبي» — a laundry only the test audience sees (founder, 13 Oct
   2026). Its own name: generic ones are what ad blockers hide. */
.qmx-testaud { display: inline-flex; align-items: center; gap: 5px; align-self: flex-start; margin: 2px 0;
  padding: 3px 9px; border-radius: var(--radius-pill); font-size: 11.5px; font-weight: 800; line-height: 1.5;
  color: #f5c542; background: rgba(245, 197, 66, .12); border: 1px dashed rgba(245, 197, 66, .7); }
.qmx-testaud-sheet { display: flex; flex-direction: column; gap: 6px; margin: 0 0 12px; padding: 10px 12px;
  border-radius: 12px; border: 1px dashed rgba(245, 197, 66, .7); background: rgba(245, 197, 66, .08); }
.qmx-testaud-sheet p { margin: 0; font-size: 12.5px; line-height: 1.8; color: var(--text-primary); }
.qmx-sum-test { display: block; font-size: 11px; font-weight: 700; color: #f5c542; }

/* ── For ماهر (14 Oct 2026): the page teaches its own use ─────────────────── */
/* ① «من أين أبدأ؟» — the answer before anything else (founder, 16 Oct 2026). */
.qmx-start { display: grid; gap: 10px; }
.qmx-start-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.qmx-start-head .qmx-h { margin: 0; }
.qmx-start-bundle { flex: 0 1 360px; min-width: 0; }
.qmx-start-now { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; color: var(--text-primary); }
.qmx-start-name { border: 1px solid rgba(var(--accent-rgb), .5); background: rgba(var(--accent-rgb), .12); color: var(--accent-color);
  border-radius: var(--radius-pill); padding: 6px 14px; min-height: 40px; max-width: 100%; font: inherit; font-size: 13.5px; font-weight: 800;
  cursor: pointer; overflow-wrap: anywhere; text-align: start; }
.qmx-start-none { margin: 0; font-size: 14px; font-weight: 700; color: var(--text-primary); }
.qmx-start-sub { margin: 6px 0 0; font-size: 12px; font-weight: 700; color: var(--text-secondary); }
/* The eight counts: open on a wide screen, folded under one line on a phone. */
details.qmx-start-more { display: grid; gap: 8px; }
details.qmx-start-more > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between;
  gap: 8px; min-height: 40px; font-size: 13px; font-weight: 700; color: var(--text-secondary); }
details.qmx-start-more > summary::-webkit-details-marker { display: none; }
details.qmx-start-more[open] > summary .qmx-fold-caret { transform: rotate(180deg); }
details.qmx-start-more > .qmx-path, details.qmx-start-more > .qmx-after { margin-top: 6px; }
details.qmx-start-more .qmx-refusal { margin: 6px 0 0; font-size: 12.5px; }
.qmx-start-shown { margin: 0; font-size: 12.5px; color: var(--text-secondary); }
.qmx-start-shown .qmx-sum-test { display: inline; }
/* The way to an offer: four steps, in order — a real sequence, so numbered. */
.qmx-path { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
@media (min-width: 1100px) { .qmx-path { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.qmx-path-step { display: flex; align-items: center; gap: 8px; min-width: 0; }
.qmx-after { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
@media (min-width: 900px) { .qmx-after { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.qmx-path-num { flex: 0 0 auto; width: 24px; height: 24px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 800; color: #0b1016; background: var(--band); }
.qmx-path-step .qmx-stage { flex: 1 1 auto; }
.qmx-stage { display: flex; align-items: center; justify-content: space-between; gap: 4px 10px; flex-wrap: wrap; min-width: 0; min-height: 44px;
  padding: 6px 12px; border-radius: 12px; cursor: pointer; text-align: start; font: inherit; font-size: 13px; font-weight: 700;
  border: 1px solid var(--border-color); background: rgba(0,0,0,.18); color: var(--text-primary); }
.qmx-stage > span { display: inline-flex; align-items: center; gap: 8px; flex: 1 1 auto; min-width: 0; overflow-wrap: break-word; }
.qmx-stage > b { flex: 0 0 auto; }
.qmx-stage b { font-size: 18px; font-weight: 800; }
.qmx-stage.qmx-after-n b { font-size: 15px; }
.qmx-stage.qmx-zero { color: var(--text-secondary); }
.qmx-stage.qmx-zero b { opacity: .6; }
.qmx-stage.on { border-color: var(--accent-color); background: rgba(var(--accent-rgb), .1); color: var(--accent-color); }
.qmx-stage .qmx-sum-test { flex-basis: 100%; }
/* Phone: two to a row — the label wraps between words, its count beside it —
   so the answer stays short and nothing scrolls sideways. Safari's 200%
   zoom (about 188px) stacks them. */
@media (max-width: 599px) {
  .qmx-start-bundle { flex: 1 1 100%; }
  .qmx-start-bundle button { padding: 8px 6px; }
  .qmx-path-step { gap: 6px; }
  .qmx-path-num { width: 20px; height: 20px; font-size: 11px; }
  .qmx-stage { flex-wrap: nowrap; padding: 6px 10px; font-size: 12.5px; line-height: 1.4; }
  .qmx-stage b { font-size: 16px; }
  .qmx-stage:has(.qmx-sum-test) { flex-wrap: wrap; }
}
@media (max-width: 330px) { .qmx-path, .qmx-after { grid-template-columns: minmax(0, 1fr); } }
/* The explanations under the numbers. */
.qmx-explain { margin: 0 0 12px; font-size: 13px; line-height: 1.85; color: var(--text-secondary); }
.qmx-usage .qmx-explain { margin: 6px 0 0; }
/* 🔴 The card's state in a few words, and which of the four steps. */
.qmx-next { display: grid; gap: 4px; min-width: 0; font-size: 13.5px; font-weight: 700; line-height: 1.7; color: var(--text-primary); }
.qmx-next p { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.qmx-next .qmx-next-ended { font-size: 12.5px; font-weight: 600; color: var(--text-secondary); }
.qmx-next-loading, .qmx-next-unknown, .qmx-next-none, .qmx-next-twice { color: var(--text-secondary); font-weight: 600; }
.qmx-step { display: inline-flex; align-items: center; gap: 8px; font-size: 11.5px; font-weight: 600; color: var(--text-secondary); }
.qmx-step-bar { display: inline-flex; gap: 3px; }
.qmx-step-bar i { width: 14px; height: 4px; border-radius: 2px; background: rgba(255,255,255,.12); }
.qmx-step-bar i.on { background: var(--band, var(--accent-color)); }
.qmx-b-ended .qmx-step-bar i.on { background: rgba(255,255,255,.55); }
/* «ماذا يعني…؟» — first under «التفاصيل». */
.qmx-meaning { display: grid; gap: 6px; margin-bottom: 10px; font-size: 13px; line-height: 1.85; color: var(--text-secondary); }
.qmx-meaning p { margin: 0; }
.qmx-meaning b { color: var(--text-primary); }
/* «أرقام هذه المغسلة» (founder, 14 Oct 2026): every laundry's own figures. */
.qmx-figs { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 2px 10px;
  margin: 8px 0 0; font-size: 13px; line-height: 1.7; color: var(--text-primary); }
.qmx-figs p { margin: 0; flex: 1 1 220px; min-width: 0; overflow-wrap: anywhere; }
.qmx-figs .qmx-link { padding: 4px 0; min-height: 32px; }
.qmx-figs-none { color: #ffb74d; }
.qmx-fold-sub { font-size: 11.5px; font-weight: 600; color: var(--text-secondary); }
.qmx-fig-grid { display: grid; gap: 10px; margin-top: 12px; }
.qmx-fig-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px 10px; padding: 10px;
  border-radius: 12px; background: rgba(255,255,255,.03); }
.qmx-fig-size { grid-column: 1 / -1; font-size: 13.5px; color: var(--text-primary); }
.qmx-fig-size small { color: var(--text-secondary); font-weight: 600; }
.qmx-figs-be { display: grid; gap: 4px; margin-top: 12px; }
.qmx-figs-be .qmx-btn { justify-self: start; min-height: 44px; }
.qmx-send-figs { margin-top: 10px; padding: 8px 12px; border-radius: 12px; border: 1px solid rgba(var(--accent-rgb), .35);
  background: rgba(var(--accent-rgb), .06); font-size: 13px; line-height: 1.65; color: var(--text-primary); }
.qmx-send-figs p { margin: 0; overflow-wrap: anywhere; }
.qmx-send-figs-sar { color: var(--text-secondary); }
.qmx-send-figs small { display: block; font-size: 11.5px; color: var(--text-secondary); }
/* 🔴 The customer's bundle price a verdict rests on: large, above the button. */
.qmx-bundle-price { margin-top: 12px; padding: 12px; border-radius: 12px; border: 1px solid rgba(255, 183, 77, .45);
  background: rgba(255, 183, 77, .07); }
.qmx-bundle-price p { margin: 0; font-size: 13.5px; line-height: 1.7; color: var(--text-primary); }
.qmx-bundle-price p.qmx-muted { margin-top: 6px; font-size: 12.5px; color: var(--text-secondary); }
.qmx-bundle-price-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 8px; }
.qmx-bundle-price-grid div { display: grid; justify-items: center; gap: 2px; padding: 8px 4px; border-radius: 10px;
  background: rgba(0,0,0,.2); min-width: 0; }
.qmx-bundle-price-grid span, .qmx-bundle-price-grid small { font-size: 12px; color: var(--text-secondary); }
.qmx-bundle-price-grid b { font-size: 22px; font-weight: 800; color: var(--text-primary); }
.qmx-sum-figs { margin: 6px 0 0; font-size: 13px; line-height: 1.8; color: var(--text-primary); }
.qmx-answer-foot .qmx-hint { margin-top: 6px; }
/* Narrow — a phone at 200% text (Safari's zoom) is under 200px wide: one
   figure per line, so no number box collapses beside its unit, and the
   customer's price one size per line, so it fits above the buttons. */
@media (max-width: 360px) {
  .qmx-fig-row { grid-template-columns: minmax(0, 1fr); }
  .qmx-bundle-price { padding: 8px 10px; }
  .qmx-bundle-price p { line-height: 1.55; }
  .qmx-bundle-price-grid { grid-template-columns: minmax(0, 1fr); gap: 2px; margin-top: 4px; }
  .qmx-bundle-price-grid div { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; padding: 0 8px; }
}

/* ── «باقة العميل»: the six prices, the cap, selling (Stage 3, 14 Oct 2026) ── */
.qmx-product { display: grid; gap: 10px; }
.qmx-pr-rows { display: grid; gap: 6px; }
.qmx-pr-row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; padding: 8px 0;
  border-bottom: 1px solid var(--border-color); min-width: 0; font-variant-numeric: tabular-nums; }
.qmx-pr-name { flex: 1 1 9em; min-width: 0; }
.qmx-pr-prices { flex: 2 1 16em; min-width: 0; overflow-wrap: anywhere; }
.qmx-pr-prices b { font-size: 15px; }
.qmx-pr-row .qmx-btn { min-height: 44px; }
.qmx-product-grid { display: grid; gap: 10px; }
@media (min-width: 760px) { .qmx-product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.qmx-product-box { border: 1px solid var(--border-color); border-radius: 10px; padding: 10px 12px; min-width: 0; }
.qmx-product-box h4 { margin: 0 0 6px; font-size: 14px; }
.qmx-product-box p { margin: 0 0 6px; line-height: 1.7; overflow-wrap: anywhere; }
.qmx-product-box .qmx-btn { min-height: 44px; }
.qmx-product-fields { display: grid; gap: 8px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 380px) { .qmx-product-fields { grid-template-columns: 1fr; } }

/* «أرقامك»: the stored price, shown and never typed. */
.qmx-price-ro-v { display: flex; align-items: center; min-height: 40px; padding: 0 10px; border-radius: 8px;
  border: 1px dashed var(--border-color); font-variant-numeric: tabular-nums; color: var(--text-secondary); }

/* A card's «حدود التفاوض»: the safe ceiling in its title, riyals first. */
.qmx-guide-box { margin: 6px 0 0; padding: 6px 10px; border-radius: 8px; border: 1px solid var(--border-color);
  font-size: 13px; line-height: 1.7; min-width: 0; }
.qmx-guide-box summary { cursor: pointer; min-height: 32px; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.qmx-guide-above { border-color: rgba(255, 183, 77, .55); }
.qmx-guide-above summary, .qmx-guide-status { color: #ffb74d; }
.qmx-guide-box:not(.qmx-guide-above) .qmx-guide-status { color: var(--text-secondary); }
.qmx-guide-status { margin: 6px 0; overflow-wrap: anywhere; }
.qmx-guide-for { margin: 6px 0 0; color: var(--text-secondary); overflow-wrap: anywhere; }
.qmx-guide-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.qmx-guide-list li { display: flex; flex-wrap: wrap; gap: 2px 10px; align-items: baseline; min-width: 0; }
.qmx-guide-v { overflow-wrap: anywhere; }
.qmx-guide-box > p { margin: 6px 0 0; overflow-wrap: anywhere; }

/* The send sheet: the ceiling beside the amounts, and a reason asked, never a lock. */
.qmx-send-guide { margin-top: 8px; font-size: 12.5px; line-height: 1.7; }
.qmx-send-guide p { margin: 0; }
.qmx-send-guide ul { margin: 2px 0 0; padding-inline-start: 18px; }
.qmx-send-guide .qmx-guide-over { color: #ffb74d; }
.qmx-above-safe { margin: 8px 0 0; padding: 8px 10px; border-radius: 8px; background: rgba(255, 183, 77, .14);
  color: #ffb74d; font-size: 13px; line-height: 1.7; overflow-wrap: anywhere; }
.qmx-reason-ask { margin: 6px 0 0; color: #ffb74d; font-size: 12.5px; }
/* At 200% on a phone a card is ~190px wide: the guidance gives its border
   and padding back to the words. */
@media (max-width: 420px) { .qmx-guide-box { padding: 4px 6px; border-inline-width: 0; border-radius: 0; } }

/* «باقات كيولين ماكس» — the bundles customers bought (Stage 3, piece 2).
   Each bundle is the refund page's own card (`.sbr-card`, css/dashboard.css);
   only the list around it is set here. */
.qmx-bundles .qmx-explain { margin-top: 0; }
/* Piece 5 (D3): what laundries owe Qlean for washes given back after they
   withdrew the amount — red, above the list. */
.qmx-bundles .qmx-bundles-debts { color: #fca5a5; }
.qmx-bundles p.qmx-muted { margin: 6px 0 0; font-size: 12.5px; line-height: 1.7; }
.qmx-bundles-search { margin: 10px 0; }
#qmx-root .qmx-bundles-search .qmx-btn { flex: 0 0 auto; }
.qmx-bundle-list { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.qmx-bundle-list .sbr-card { min-width: 0; }

/* The owner's term-٦ line under his agreement in force (js/dashboard.js
   `_qmoShownLine`): apart from the contact note above it. */
.qmo-bundle .qmo-shown { margin-top: 10px; }

/* ── «باقات كيولين ماكس»: each wash a bundle gave (Stage 3, piece 4) ── */
.qmx-washes { margin-top: 10px; border-top: 1px dashed var(--border-color); }
.qmx-wash-list { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 4px; }
.qmx-wash { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 2px 10px;
  font-size: 13px; line-height: 1.7; overflow-wrap: anywhere; }
.qmx-wash > span { min-width: 0; }
.qmx-wash .qmx-link { padding: 4px 0; min-height: 32px; }
.qmx-wash--voided { color: var(--text-secondary); }
.qmx-wash-void-note { font-size: 12px; }
/* Piece 5 (D3): a wash given back after the laundry withdrew its amount — the
   debt sits on its own line under the struck-through wash. */
.qmx-wash-debt { flex-basis: 100%; font-weight: 700; }
/* Piece 5: the customer's invoice and refund document, one tap each. */
.qmx-docs { display: flex; flex-wrap: wrap; gap: 4px 18px; margin-top: 8px; }
.qmx-docs .qmx-doc-link { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0 6px; padding: 4px 0;
  min-height: 32px; max-width: 100%; min-width: 0; text-align: start; overflow-wrap: anywhere; }
/* D5: show a laundry only after its workers updated the app. */
.qmx-offer-rule { margin: 4px 0 0; font-size: 12px; line-height: 1.7; color: #ffb74d;
  overflow-wrap: anywhere; }

/* ── «القياس»: what the bundles sold have measured (founder, 15 Oct 2026) ──
   Panels stack on a phone; the two averages sit side by side only where both
   fit. Every figure with its unit is `.qmx-nw` and never splits. */
.qmx-measure { display: grid; gap: 10px; min-width: 0; }
.qmx-measure > .qmx-explain { margin: 0; }
.qmx-mx-box { border: 1px solid var(--border-color); border-radius: 10px; padding: 10px 12px; min-width: 0;
  overflow-wrap: anywhere; }
.qmx-mx-head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.qmx-mx-head h4 { margin: 0; font-size: 14px; line-height: 1.6; }
.qmx-mx-period { margin: 2px 0 8px; font-size: 12px; color: var(--text-secondary); line-height: 1.7; }
.qmx-mx-box p { margin: 0 0 6px; font-size: 13px; line-height: 1.8; }
.qmx-mx-tag { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 600;
  line-height: 1.7; border: 1px solid currentColor; }
.qmx-mx-tag--measured { color: var(--success-color); }
.qmx-mx-tag--incomplete { color: #ffb74d; }
.qmx-mx-tag--now { color: var(--accent-color); }
.qmx-mx-tag--owed { color: #ffb74d; }
.qmx-mx-tag--high { color: #ffb74d; }
.qmx-mx-pair { display: grid; gap: 10px; }
@media (min-width: 760px) { .qmx-mx-pair { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.qmx-mx-half { min-width: 0; padding: 8px 10px; border-radius: 8px; background: rgba(255, 255, 255, .03); }
.qmx-mx-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; font-weight: 600; }
.qmx-mx-big { display: inline-block; margin: 2px 0 4px; font-size: 22px; line-height: 1.4; }
/* Second rank beside the headline average: never as big as the figure prices
   are built on. */
.qmx-mx-mid { display: inline-block; margin: 2px 0 4px; font-size: 16px; line-height: 1.4; }
.qmx-mx-lead { box-shadow: inset 0 0 0 1px var(--success-color); }
.qmx-mx-third { margin-top: 10px; }
.qmx-mx-note { color: var(--text-secondary); font-size: 12.5px; }
.qmx-mx-warn { color: #ffb74d; }
.qmx-mx-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.qmx-mx-chip { display: inline-flex; gap: 4px; padding: 2px 8px; border-radius: 999px; font-size: 12.5px;
  border: 1px solid var(--border-color); }
.qmx-mx-list, .qmx-mx-sum { list-style: none; margin: 4px 0 6px; padding: 0; display: grid; gap: 4px; }
.qmx-mx-list li, .qmx-mx-sum li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 10px;
  font-size: 13px; line-height: 1.7; min-width: 0; }
.qmx-mx-list li > * { min-width: 0; }
.qmx-mx-net { border-top: 1px dashed var(--border-color); padding-top: 4px; font-weight: 700; }
.qmx-mx-loss { color: var(--error-color); }
.qmx-mx-gain { color: var(--success-color); }