/* ---- صف جمع‌آورنده -----------------------------------------------------------
   تنها چیزی که این صفحه از خودش دارد نوار پیشرفت است و بقیه‌اش از همان قطعه‌های پنل ساخته شده.
   نوار عمداً باریک و بدون انیمیشن پرشی است: عددی که پشتش است هر پانزده ثانیه یک بار تازه می‌شود،
   و نواری که بین دو خوانش تکان بخورد چیزی می‌گوید که نمی‌داند. */

.collector-section { margin-top: 24px; }

.collector-readers { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 14px; }
.collector-reader { border: 1px solid var(--line); border-radius: 14px; padding: 16px 17px; background: linear-gradient(145deg, #1b1830, #151326); }
.collector-reader header { display: flex; align-items: center; gap: 11px; }
.collector-reader header > div { min-width: 0; flex: 1; }
.collector-reader header strong { display: block; overflow-wrap: anywhere; }
.collector-reader header .status { flex: 0 0 auto; }
.collector-reader .moderation-note { margin: 4px 0 0; }
.collector-reader > .moderation-note, .collector-reader > .cost-line { margin-top: 12px; }

.collector-now { margin-top: 14px; }
.collector-now-title { margin: 0 0 9px; color: #efecff; font-size: 14.5px; }
.collector-now-line { margin: 9px 0 0 !important; color: #c8c2e4; font-size: 13.5px; line-height: 1.9; }
.collector-now-line strong { color: #fff; }

.collector-bar { height: 9px; border-radius: 999px; background: #2a2545; overflow: hidden; }
.collector-bar > span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #7656ec, #42c5ff); transition: width .4s ease; }
.collector-bar.blue > span { background: linear-gradient(90deg, #5a3ee8, #6cd4ff); }

/* شمارهٔ نوبت در ستون خودش، چون چیزی که آدم روی این فهرست دنبالش می‌گردد «چندمم» است. */
.collector-queue-row { align-items: flex-start; }
.collector-position {
  flex: 0 0 auto; display: grid; place-items: center; width: 34px; height: 34px; margin-top: 2px;
  border-radius: 11px; background: #6549f52c; color: #a895ff; font-size: 14px; font-weight: 700;
}
.collector-eta { flex: 0 0 auto; max-width: 230px; text-align:end; }
.collector-eta strong { display: block; color: #8fddff; font-size: 13.5px; line-height: 1.8; }
.collector-eta span { display: block; margin-top: 5px; color: var(--muted); font-size: 12.5px; line-height: 1.8; }

@media (max-width: 760px) {
  .collector-readers { grid-template-columns: 1fr; }
  /* روی موبایل «نوبتش کِی است» زیر خودِ ردیف می‌رود به‌جای اینکه اسم پیج را به یک ستون باریک بچپاند. */
  .collector-eta { max-width: none; width: 100%; text-align:start; padding-top: 8px; border-top: 1px solid var(--line); }
}