/* ---- شمارندهٔ امتیاز در هدر ------------------------------------------------ */
.points-counter { display:flex; flex-direction:column; align-items:flex-end; gap:1px; padding:7px 13px; border-radius:12px; background:#7657ec1a; border:1px solid #7657ec3d; text-decoration:none; line-height:1.3; transition:background .18s,border-color .18s; }
.points-counter:hover { background:#7657ec2e; border-color:#7657ec70; }
.points-counter strong { color:#c8bcff; font-size:16px; font-weight:800; }
.points-counter strong small { font-size:12px; font-weight:600; color:#9d92c4; }
.points-counter span { color:#65d7ae; font-size:13px; font-weight:700; }

/* ---- تایم‌لاین عضویت ------------------------------------------------------- */
/* The number of steps is decided by the server (the Instagram proof step exists only when a
   verification post is configured), so the strip sizes itself to however many boxes arrive
   instead of assuming four. */
.onboarding-timeline { display:grid; grid-auto-flow:column; grid-auto-columns:1fr; gap:8px; margin:0 0 24px; padding:0; list-style:none; }
.timeline-step { position:relative; display:flex; flex-direction:column; align-items:center; gap:6px; padding:12px 6px 10px; border-radius:12px; background:#ffffff08; border:1px solid var(--line); text-align:center; }
.timeline-step::after { content:''; position:absolute; top:26px; left:-8px; width:8px; height:2px; background:var(--line); }
.timeline-step:last-child::after { display:none; }
.timeline-mark { display:grid; place-items:center; width:28px; height:28px; border-radius:50%; background:#ffffff14; color:#9d92c4; font-size:15px; font-weight:800; }
.timeline-title { font-size:13px; font-weight:700; color:#c9c3de; line-height:1.6; }
.timeline-state { font-size:11.5px; color:#7f7995; }
.timeline-step.done { border-color:#48cc9b4d; background:#48cc9b12; }
.timeline-step.done .timeline-mark { background:#48cc9b; color:#08150f; }
.timeline-step.done .timeline-state { color:#65d7ae; }
.timeline-step.current { border-color:#7657ec8a; background:#7657ec18; box-shadow:0 0 0 1px #7657ec33; }
.timeline-step.current .timeline-mark { background:#7657ec; color:#fff; }
.timeline-step.current .timeline-state { color:#a993ff; }

/* ---- جعبه‌های تعامل -------------------------------------------------------- */
.engagement-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(340px,1fr)); gap:16px; margin-bottom:26px; }
.engagement-box { display:flex; flex-direction:column; gap:13px; padding:18px; border-radius:16px; background:var(--card); border:1px solid var(--line); }
.engagement-box.complete { border-color:#48cc9b45; }
.box-head { display:flex; align-items:center; gap:11px; }
.box-title { flex:1; min-width:0; }
.box-title .eyebrow { margin:0 0 2px; }
.box-title .task-count { font-weight:800; font-size:14.5px; color:#c8bcff; }
.box-title h3 { margin:0; font-size:16px; overflow-wrap:anywhere; }
.box-score { text-align:center; padding:6px 11px; border-radius:11px; background:#7657ec18; border:1px solid #7657ec38; }
.box-score strong { display:block; color:#c8bcff; font-size:17px; font-weight:800; }
.box-score span { color:#9d92c4; font-size:11.5px; }
.box-media { border-radius:12px; overflow:hidden; background:#ffffff08; max-height:190px; }
.box-media img { width:100%; height:100%; max-height:190px; object-fit:cover; display:block; }
.box-caption { margin:0; color:var(--muted); font-size:14px; line-height:1.9; max-height:3.8em; overflow:hidden; overflow-wrap:anywhere; }
.box-progress .capacity-line { margin-top:6px; font-size:12.5px; }
/* On the dashboard a box shows the work that is left; the rows already approved are folded away and
   the count of them sits on the button that brings them back, in their own places in the list. */
.engagement-box.folds-done .action-row.is-done { display:none; }
.box-done-toggle { margin-top:4px; font-size:12.5px; }
.box-links { display:flex; flex-wrap:wrap; align-items:center; gap:10px; }
.box-links .button { padding:8px 14px; font-size:14px; }

.action-list { display:grid; gap:9px; margin:0; padding:0; list-style:none; }
.action-row { display:flex; gap:11px; padding:12px 12px 12px 10px; border-radius:12px; background:#ffffff07; border:1px solid var(--line); }
.action-row.is-done { background:#48cc9b0f; border-color:#48cc9b33; }
.action-row.rejected { background:#ff6b8a0d; border-color:#ff6b8a38; }
.action-row.referral-row { background:#f0b4290f; border-color:#f0b42933; }
.action-check { flex:0 0 auto; display:grid; place-items:center; width:24px; height:24px; border-radius:50%; background:#ffffff12; color:#9d92c4; font-size:15px; font-weight:800; }
.action-check.checked { background:#48cc9b; color:#08150f; }
.action-body { flex:1; min-width:0; }
.action-body strong { display:block; font-size:15px; color:#efeaff; }
.action-body p { margin:4px 0 0; color:var(--muted); font-size:13.5px; line-height:1.85; overflow-wrap:anywhere; }
.action-meta { display:flex; flex-wrap:wrap; align-items:center; gap:7px; margin-top:8px; font-size:12px; color:#7f7995; }
.action-points { padding:2px 8px; border-radius:7px; background:#7657ec22; color:#c8bcff; font-weight:800; font-size:12.5px; }
.action-reward { margin-top:7px!important; color:#e5c37a!important; }
/* flex:0 0 auto here took the column's *max-content* width, and on a row with proof fields that is
   the help sentence laid out on one line — 534px inside a 324px phone. The page then grew wider than
   the viewport, which let the off-screen nav drawer be scrolled into view and made the whole panel
   look broken. Shrinking is allowed, and a row that carries proof fields drops them onto their own
   full-width line instead of squeezing them into a side column. */
.action-side { flex:0 1 auto; display:flex; flex-direction:column; justify-content:center; align-items:stretch; gap:6px; min-width:0; max-width:100%; }
.action-row.has-proof { flex-wrap:wrap; }
.action-row.has-proof .action-side { flex:1 0 100%; margin-top:2px; }
.action-done { color:#65d7ae; font-size:13.5px; font-weight:700; }
/* A row waiting on the follow row: readable, obviously not tappable, and not a wall of grey — the
   member still has to read what the row asks for, because that is the work they unlock. */
.action-row.is-shut { opacity:.62; }
.action-locked { white-space:nowrap; padding:6px 10px; border-radius:9px; background:#ffffff0d; border:1px solid var(--line); color:#9d92c4; font-size:13px; font-weight:700; }
.box-lock { margin:0; padding:10px 12px; border-radius:11px; background:#f0b42912; border:1px solid #f0b42933; color:#e9d7ae; font-size:13.5px; line-height:1.95; }
/* A network the member switched off at sign-up: the box stays readable — that is the advert for
   turning it on — but it is visibly asleep, and the one live control in it is the button that
   wakes it up. */
.engagement-box.is-off { border-style:dashed; }
.engagement-box.is-off .box-media,.engagement-box.is-off .action-list,.engagement-box.is-off .box-progress { opacity:.55; }
.box-lock.box-off { display:grid; gap:10px; justify-items:start; background:#7657ec14; border-color:#7657ec3d; color:#c8bcff; }
.box-lock.box-off p { margin:0; }
.box-lock.box-off .button.compact { padding:9px 15px; font-size:14px; }
.action-form { display:grid; gap:7px; width:100%; }
.action-form .button.compact { padding:8px 13px; font-size:13.5px; white-space:nowrap; }
.action-proof { display:grid; gap:6px; }
.action-proof label { font-size:12.5px; color:#9d92c4; }
/* What has to be visible in the screenshot, sitting above the file input rather than reading as one
   more grey caption among the three field labels. */
.proof-hint { margin:0!important; padding:8px 10px; border-radius:9px; background:#7657ec14; border:1px solid #7657ec30; color:#c8bcff!important; font-size:13px!important; line-height:1.8!important; }
.action-proof .form-help { overflow-wrap:anywhere; }
.action-proof input,.action-proof textarea { width:100%; font-size:var(--field-size-sm); padding:7px 9px; }
/* Stays after the «عکس بارگذاری شد» toast fades: the file input's own reply is a clipped name in
   grey beside the button, which reads the same whether or not a picture was actually picked. */
.proof-picked { margin:0!important; padding:7px 10px; border-radius:9px; background:#26d07c1a; border:1px solid #26d07c40; color:#8ff0bd!important; font-size:13px!important; line-height:1.7!important; overflow-wrap:anywhere; }
.icon-hint { display:flex; align-items:center; gap:7px; margin-top:7px!important; color:#c8bcff!important; }
.icon-hint svg { flex:0 0 auto; }
/* The row's open-link, sized to be found and tapped rather than read. Outlined purple keeps it a
   step below the row's own «انجام دادم» — go there first, come back and confirm — while still
   sitting well above the body text it used to disappear into. */
.action-open { display:inline-flex; align-items:center; gap:7px; margin-top:10px; padding:9px 14px; border:1px solid #7657ec5c; border-radius:10px; background:#7657ec1f; color:#c8bcff; font-size:14px; font-weight:700; line-height:1.2; transition:.2s; }
.action-open:hover { border-color:#8469ff; background:#7657ec33; color:#efeaff; transform:translateY(-1px); }
.action-open svg { flex:0 0 auto; opacity:.85; }
.gate-banner .gate-actions { display:flex; flex-wrap:wrap; align-items:center; gap:10px; }
.gate-banner .button.compact { padding:8px 14px; font-size:14px; }
.ai-verdict { margin-top:9px; padding:9px 11px; border-radius:10px; background:#7657ec14; border:1px solid #7657ec30; }
.ai-verdict strong { font-size:13.5px; color:#c8bcff; }
.ai-verdict p { margin:4px 0 0; font-size:13px; color:#c9c3de; line-height:1.85; }
.ai-verdict .ai-improve { color:#e5c37a; }
.box-foot { display:flex; flex-wrap:wrap; align-items:center; gap:9px; padding-top:3px; border-top:1px solid var(--line); }
.box-foot-note { color:#7f7995; font-size:12px; }
/* Hiding is one press away from taking the whole box off the dashboard, so the press opens a
   question instead of doing it. The question replaces the link in place — same corner of the box,
   no dialog jumping over the page — and is coloured like the other «read this before you act»
   notices in the box rather than like a warning about damage: nothing here is destroyed. */
.box-hide { display:flex; flex-wrap:wrap; align-items:center; gap:9px; width:100%; }
.box-hide .text-button { margin:0; }
.box-hide[hidden],.box-hide-confirm[hidden] { display:none; }
.box-hide-confirm { display:grid; gap:11px; width:100%; padding:12px 13px; border-radius:11px; background:#f0b42912; border:1px solid #f0b42933; }
.box-hide-confirm p { margin:0; color:#e9d7ae; font-size:13.5px; line-height:1.95; }
.box-hide-actions { display:flex; flex-wrap:wrap; align-items:center; gap:14px; }
.box-hide-actions .button.compact { padding:9px 15px; font-size:14px; white-space:nowrap; }
.box-hide-actions .text-button { margin:0; font-weight:700; }

/* ---- راهنمای درآمد --------------------------------------------------------- */
.guide-intro h1 { max-width:34ch; }
.guide-card { margin-bottom:18px; }
.guide-table { display:grid; gap:8px; margin-top:12px; }
.guide-row { display:grid; grid-template-columns:1fr auto auto; gap:12px; align-items:center; padding:12px 13px; border-radius:11px; background:#ffffff07; border:1px solid var(--line); }
.guide-row.guide-head { background:transparent; border:0; padding:0 13px; color:#7f7995; font-size:12px; }
.guide-row strong { font-size:15px; color:#efeaff; }
.guide-row p { margin:4px 0 0; color:var(--muted); font-size:13.5px; line-height:1.85; }
.guide-points { padding:4px 10px; border-radius:8px; background:#7657ec22; color:#c8bcff; font-weight:800; font-size:13.5px; white-space:nowrap; }
.guide-checker { color:#7f7995; font-size:12.5px; white-space:nowrap; }
.guide-note { margin-top:14px; padding:12px 14px; border-radius:11px; background:#48cc9b10; border:1px solid #48cc9b2e; font-size:14px; color:#c9c3de; }
.guide-note ul { margin:8px 0 0; padding-inline-start:18px; display:grid; gap:5px; line-height:1.9; }
.guide-grades { display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:11px; margin-top:14px; }
.grade { padding:14px; border-radius:12px; background:#ffffff07; border:1px solid var(--line); }
.grade strong { display:block; margin-bottom:6px; font-size:15px; color:#efeaff; }
.grade p { margin:0; color:var(--muted); font-size:13.5px; line-height:1.9; }
.grade.low { border-color:#ff6b8a38; }
.grade.mid { border-color:#f0b42938; }
.grade.high { border-color:#48cc9b45; }
.guide-warning { margin-top:14px; padding:12px 14px; border-radius:11px; background:#ff6b8a0f; border:1px solid #ff6b8a33; color:#c9c3de; font-size:14px; line-height:1.9; }
.prize-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:11px; margin:14px 0; }
.prize { display:flex; flex-direction:column; align-items:center; gap:5px; padding:16px 12px; border-radius:12px; background:#ffffff07; border:1px solid var(--line); }
.prize span { font-size:26px; }
.prize strong { font-size:14px; color:#c9c3de; }
.prize b { font-size:16px; color:#efeaff; }
.prize.gold { border-color:#f0b4294d; background:#f0b42910; }
.prize.silver { border-color:#9aa5b14d; }
.prize.bronze { border-color:#cd7f324d; }
.guide-teaser { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:16px; background:linear-gradient(135deg,#7657ec1f,#48cc9b14); border-color:#7657ec3d; }
.guide-teaser .teaser-body { flex:1; min-width:250px; }
.guide-teaser h2 { margin:2px 0 6px; font-size:18px; }
.guide-teaser p { margin:0; color:var(--muted); font-size:14.5px; line-height:1.9; }
.stat-money { display:block; margin-top:2px; color:#65d7ae; font-size:13px; font-style:normal; font-weight:700; }

/* ---- لایت‌باکس دعوت -------------------------------------------------------- */
.lightbox-card { max-width:480px; }
.lightbox-card h2 { margin:4px 0 10px; font-size:20px; }
.lightbox-actions { display:flex; flex-wrap:wrap; align-items:center; gap:9px; margin:16px 0 10px; }
.lightbox-actions .button { padding:9px 15px; font-size:14.5px; }

/* ---- میز جایزهٔ ماهانه ----------------------------------------------------- */
.contest-card { margin-bottom:16px; }
.contest-winners { display:grid; gap:9px; margin:12px 0; padding:0; list-style:none; }
.contest-winners li { padding:11px 13px; border-radius:11px; background:#ffffff07; border:1px solid var(--line); font-size:14px; color:#c9c3de; line-height:1.9; }
.contest-winners strong { color:#efeaff; }
.poster-previews { display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:10px; }
.poster-thumb { display:block; border-radius:11px; overflow:hidden; border:1px solid var(--line); background:#ffffff07; text-decoration:none; }
.poster-thumb img { width:100%; aspect-ratio:1; object-fit:cover; display:block; }
.poster-thumb span { display:block; padding:7px 9px; font-size:12.5px; color:#9d92c4; text-align:center; }
.raw-json { max-height:260px; overflow:auto; padding:11px; border-radius:10px; background:#00000040; color:#9d92c4; font-size:12.5px; line-height:1.7; white-space:pre-wrap; overflow-wrap:anywhere; }
.invite-code-form { margin-top:14px; text-align:start; }

@media (max-width:760px) {
  .onboarding-timeline { grid-auto-flow:row; grid-template-columns:repeat(2,1fr); }
  /* An odd last step would sit as a half-width box with nothing beside it, reading like a column
     that failed to load; it takes the whole row instead. */
  .timeline-step:last-child:nth-child(odd) { grid-column:1 / -1; }
  .timeline-step::after { display:none; }
  .engagement-grid { grid-template-columns:1fr; }
  .action-row { flex-wrap:wrap; }
  .action-side { flex:1 0 100%; }
  .guide-row { grid-template-columns:1fr; gap:7px; }
  .guide-row.guide-head { display:none; }
  .points-counter { padding:6px 9px; }
  .points-counter strong { font-size:15px; }
}

/* ---- تابلوی برندگان (نمای عضو) --------------------------------------------- */
.winners-board { margin-top:16px; padding-top:14px; border-top:1px solid var(--line); }
.winners-layout { display:grid; grid-template-columns:200px 1fr; gap:16px; align-items:start; }
.winners-poster { width:100%; border-radius:12px; border:1px solid var(--line); display:block; }
.winners-list { display:grid; gap:9px; margin:0; padding:0; list-style:none; }
.winners-list li { display:flex; gap:11px; padding:11px 13px; border-radius:11px; background:#ffffff07; border:1px solid var(--line); }
.winner-medal { font-size:22px; line-height:1; }
.winners-list strong { font-size:15px; color:#efeaff; }
.winners-list p { margin:4px 0 0; color:var(--muted); font-size:13.5px; line-height:1.85; }
@media (max-width:760px) { .winners-layout { grid-template-columns:1fr; } .winners-poster { max-width:260px; } }

/* ---- عنوان جعبه، زبان محتوا و گیت امتیاز ----------------------------------- */
.box-account { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:5px 0 0; font-size:13px; color:#9d92c4; }
.box-account bdi { color:#a993ff; font-weight:700; }
.lang-chip { padding:2px 8px; border-radius:7px; background:#48cc9b1c; border:1px solid #48cc9b3d; color:#65d7ae; font-weight:700; font-size:12px; }
/* The deadline reads as time, not as a warning, until it nearly is one: amber inside the last
   quarter hour, and red once the box has closed for good. */
.lang-chip.deadline { background:#a993ff1a; border-color:#a993ff40; color:#bda9ff; }
.lang-chip.deadline.urgent { background:#f0b4291a; border-color:#f0b42947; color:#e9be62; }
.lang-chip.deadline.over { background:#ff6b8a14; border-color:#ff6b8a3d; color:#f5a3b4; }
.lang-note { margin-top:7px!important; padding:7px 10px; border-radius:9px; background:#48cc9b10; border:1px solid #48cc9b2e; color:#c9c3de!important; }
.lang-note strong { color:#65d7ae; }
.gate-banner { padding:15px 17px; margin-bottom:16px; border-radius:14px; background:#ff6b8a10; border:1px solid #ff6b8a38; }
.gate-banner strong { display:block; margin-bottom:6px; font-size:15.5px; color:#ffb3c4; }
.gate-banner p { margin:0 0 8px; color:#c9c3de; font-size:14px; line-height:1.9; }
.bonus-note { margin:0 0 14px; padding:10px 13px; border-radius:11px; background:#f0b4290f; border:1px solid #f0b42930; color:#e5c37a; font-size:13.5px; line-height:1.85; }
/* Why the screenshot fields are gone, or why they are back and staying. */
.trust-note { margin:0 0 14px; padding:11px 13px; border-radius:11px; font-size:13.5px; line-height:1.9; }
.trust-note.good { background:#48cc9b12; border:1px solid #48cc9b38; color:#8fe4c3; }
.trust-note.bad { background:#ff6b8a0f; border:1px solid #ff6b8a3d; color:#f5b7c3; }