/* =============================================================================
   Seemerce Freelance — Design System
   توکن‌ها از assets/css/main.css تمِ rgb گرفته شده تا زبان بصری یکسان بماند؛
   کلاس‌ها با پیشوند rgbf- تا با استایل سراسری تم تداخل نکنند (RTL-first).
   ========================================================================== */

:root {
	--rgbf-bg: var(--bg);
	--rgbf-bg-2: var(--bg-2);
	--rgbf-surface: var(--surface);
	--rgbf-surface-2: var(--surface-2);
	--rgbf-surface-3: var(--surface-3);
	--rgbf-border: var(--border);
	--rgbf-border-2: var(--border-2);
	--rgbf-text: var(--text);
	--rgbf-text-2: var(--text-2);
	--rgbf-text-3: var(--text-3);
	--rgbf-red: var(--red);
	--rgbf-green: var(--green);
	/* همان طلا، اما تیره‌شده برای «متن»: طلای روشن روی زمینهٔ روشن
	   نسبت کنتراست ۱٫۶ می‌دهد و عملاً خوانده نمی‌شود. */
	--rgbf-green-ink: var(--green-ink, #7a6200);
	--rgbf-blue: var(--blue);
	--rgbf-purple: var(--purple);
	--rgbf-amber: var(--amber);
	--rgbf-grad: var(--grad);
	--rgbf-grad-soft: var(--grad-soft);
	--rgbf-r-sm: var(--r-sm);
	--rgbf-r-md: var(--r-md);
	--rgbf-r-lg: var(--r-lg);
	--rgbf-shadow-card: var(--shadow-card);
	--rgbf-wrap: 987px;
	--rgbf-z-modal: 300;
	--rgbf-z-toast: 400;
}

/* ---------- محدوده‌ی ایزوله (برای وقتی که get_header/footer فراخوانی نمی‌شود) ---------- */
.rgbf, .rgbf *, .rgbf *::before, .rgbf *::after { box-sizing: border-box; }
.rgbf {
	color: var(--rgbf-text);
	font-family: 'Peyda', 'Vazirmatn', -apple-system, 'Segoe UI', Tahoma, sans-serif;
	line-height: 1.9;
	direction: rtl;
	text-align: right;
}
/* en/tr: چندزبانه (2026-07-21) — پلاگین برای fa/ar راست‌به‌چپ می‌ماند، en/tr چپ‌به‌راست.
   قالب‌ها ریشه‌ی `.rgbf` را بسته به rgbf_is_rtl() با/بدون این کلاس چاپ می‌کنند. */
.rgbf.rgbf-ltr {
	direction: ltr;
	text-align: left;
}
.rgbf a { color: inherit; text-decoration: none; }
.rgbf img, .rgbf svg { display: block; max-width: 100%; height: auto; }
.rgbf input, .rgbf button, .rgbf textarea, .rgbf select { font: inherit; color: inherit; }
.rgbf ul[role="list"], .rgbf ol[role="list"] { list-style: none; padding: 0; margin: 0; }

/* ---------- کانتینر و شبکه ---------- */
.rgbf-wrap { max-width: var(--rgbf-wrap); margin-inline: auto; padding-inline: 21px; }
.rgbf-grid { display: grid; gap: 13px; }
.rgbf-grid-2 { grid-template-columns: repeat(2, 1fr); }
.rgbf-grid-3 { grid-template-columns: repeat(3, 1fr); }
.rgbf-grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 980px) { .rgbf-grid-3, .rgbf-grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .rgbf-grid-2, .rgbf-grid-3, .rgbf-grid-4 { grid-template-columns: 1fr; } }

/* ---------- دکمه‌ها (هم‌خانواده‌ی .btn تم) ---------- */
.rgbf-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	padding: 13px 21px; border-radius: 5px; border: 1px solid transparent;
	font-weight: 700; font-size: 1rem; line-height: 1.5; cursor: pointer;

	white-space: nowrap; user-select: none;
}
/* .rgbf-btn.رنگ با دو کلاس نوشته می‌شود تا از «.rgbf button { color:inherit }» (کلاس+المنت)
   برنده‌تر باشد؛ وگرنه روی <button> رنگ متن ارث می‌برد و روی زمینهٔ سرمه‌ای خوانا نیست. */
.rgbf-btn.rgbf-btn-primary,
.rgbf a.rgbf-btn-primary {
	background: linear-gradient(120deg, #002366, var(--rgbf-blue));
	color: #fff;
	box-shadow: 0 8px 28px -6px rgba(26, 92, 255, .55), inset 0 1px 0 rgba(0, 35, 102, .25);
}
.rgbf-btn-primary:hover { box-shadow: 0 12px 36px -6px rgba(26, 92, 255, .7), inset 0 1px 0 rgba(0, 35, 102, .25);  }
.rgbf-btn.rgbf-btn-ghost,
.rgbf a.rgbf-btn-ghost {
	background: var(--rgbf-surface-2); border-color: var(--rgbf-border-2); color: var(--rgbf-text);

}
.rgbf-btn-ghost:hover { background: var(--rgbf-surface-3);  }
.rgbf-btn-sm { padding: 8px 21px; font-size: 0.887rem; }
.rgbf-btn-lg { padding: 13px 34px; font-size: 1.128rem; }
.rgbf-btn-block { width: 100%; }
.rgbf-btn[disabled] { opacity: .55; cursor: progress; transform: none !important; }

/* ---------- کارت‌ها ---------- */
.rgbf-card {
	background: var(--rgbf-surface); border: 1px solid var(--rgbf-border); border-radius: var(--rgbf-r-lg);
	box-shadow: inset 0 1px 0 rgba(0, 35, 102, .07), var(--rgbf-shadow-card);
	padding: clamp(21px, 3vw, 34px);

}
.rgbf-card:hover {  border-color: var(--rgbf-border-2); background: var(--rgbf-surface-2); }

/* ---------- چیپ / بج «۰٪ کارمزد» ---------- */
.rgbf-chip {
	display: inline-flex; align-items: center; gap: 8px;
	background: var(--rgbf-surface-2); border: 1px solid var(--rgbf-border);
	color: var(--rgbf-text-2); border-radius: 5px; padding: 8px 13px;
	font-size: 0.887rem; font-weight: 600;
}
.rgbf-badge-free {
	display: inline-flex; align-items: center; gap: 5px;
	background: var(--rgbf-grad-soft); border: 1px solid var(--rgbf-border-2);
	color: var(--rgbf-green-ink); border-radius: 5px; padding: 5px 13px;
	font-size: 0.786rem; font-weight: 800;
}

/* ---------- پیل‌های وضعیت پروژه ---------- */
.rgbf-status { display: inline-flex; align-items: center; gap: 5px; font-weight: 700; font-size: 0.887rem; border-radius: 5px; padding: 5px 13px; }
.rgbf-status::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.rgbf-status-open { color: var(--rgbf-green-ink); background: rgba(255, 215, 0, .12); }
.rgbf-status-in_progress { color: var(--rgbf-blue); background: rgba(0, 35, 102, .12); }
.rgbf-status-delivered { color: var(--rgbf-amber); background: rgba(183, 121, 31, .12); }
.rgbf-status-completed { color: var(--rgbf-text-2); background: rgba(0, 35, 102, .08); }
.rgbf-status-cancelled { color: var(--rgbf-red); background: rgba(200, 16, 46, .12); }

/* ---------- فرم‌ها (RTL) ---------- */
.rgbf-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; }
.rgbf-form-grid .rgbf-full { grid-column: 1 / -1; }
@media (max-width: 580px) { .rgbf-form-grid { grid-template-columns: 1fr; } }
.rgbf-field label { display: block; font-size: 0.887rem; font-weight: 700; margin-bottom: 8px; color: var(--rgbf-text-2); }
.rgbf-field input, .rgbf-field textarea, .rgbf-field select {
	width: 100%; background: rgba(10, 26, 61, .09); border: 1px solid var(--rgbf-border-2);
	border-radius: 8px; padding: 13px 21px; color: var(--rgbf-text);
	 text-align: start;
}
.rgbf-field select {
	appearance: none;
	padding-inline-end: 44px;
	background-image: linear-gradient(45deg, transparent 50%, var(--rgbf-text-3) 50%), linear-gradient(135deg, var(--rgbf-text-3) 50%, transparent 50%);
	background-position: right 20px center, right calc(20px + 6px) center; background-size: 6px 6px; background-repeat: no-repeat;
}
.rgbf-field select:dir(rtl) {
	background-position: left 20px center, left calc(20px + 6px) center;
}
.rgbf-field input:focus, .rgbf-field textarea:focus, .rgbf-field select:focus {
	outline: none; border-color: var(--rgbf-blue); box-shadow: 0 0 0 4px rgba(0, 35, 102, .16);
}
.rgbf-field textarea { min-height: 144px; resize: vertical; }
.rgbf-field-hint { display: block; margin-top: 5px; font-size: 0.786rem; color: var(--rgbf-text-3); }
.rgbf-hp-field { position: absolute; opacity: 0; height: 0; overflow: hidden; pointer-events: none; }
.rgbf-form-msg { margin-top: 13px; padding: 13px 21px; border-radius: 8px; font-size: 1rem; display: none; }
.rgbf-form-msg.show { display: block; }
.rgbf-form-msg.ok { background: rgba(255, 215, 0, .12); color: var(--rgbf-green-ink); }
.rgbf-form-msg.err { background: rgba(200, 16, 46, .12); color: var(--rgbf-red); }

/* ---------- تست ---------- */
.rgbf-toast-wrap {
	position: fixed; inset-block-end: 21px; inset-inline-end: 21px; z-index: var(--rgbf-z-toast);
	display: flex; flex-direction: column; gap: 8px; pointer-events: none;
}
.rgbf-toast {
	pointer-events: auto; min-width: 233px; max-width: 377px;
	background: var(--rgbf-bg-2); border: 1px solid var(--rgbf-border-2); border-radius: 8px;
	padding: 13px 21px; box-shadow: var(--rgbf-shadow-card); color: var(--rgbf-text);
	font-size: 0.887rem; display: flex; align-items: center; gap: 8px;

}
.rgbf-toast::before { content: ''; width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--rgbf-blue); }
.rgbf-toast.success::before { background: var(--rgbf-green); }
.rgbf-toast.error::before { background: var(--rgbf-red); }

/* ---------- مودال (ورود/ثبت‌نام و غیره) ---------- */
.rgbf-modal-overlay {
	position: fixed; inset: 0; z-index: var(--rgbf-z-modal);
	background: rgba(10, 26, 61, .72);
	display: flex; align-items: center; justify-content: center; padding: 21px;
}
.rgbf-modal-overlay[hidden] { display: none; }
.rgbf-modal {
	width: 100%; max-width: 377px; max-height: 90vh; overflow-y: auto;
	background: var(--rgbf-bg-2); border: 1px solid var(--rgbf-border-2); border-radius: var(--rgbf-r-lg);
	box-shadow: var(--rgbf-shadow-card); padding: 34px;
}
.rgbf-modal[hidden] { display: none; }
.rgbf-modal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 21px; }
.rgbf-modal-head h2 { font-size: 1.272rem; font-weight: 800; margin: 0; }
.rgbf-modal-close {
	background: var(--rgbf-surface-2); border: 1px solid var(--rgbf-border); border-radius: 50%;
	width: 34px; height: 34px; display: flex; align-items: center; justify-content: center;
	cursor: pointer; color: var(--rgbf-text-2); font-size: 1.128rem; line-height: 1;
}
.rgbf-modal-foot { margin-top: 13px; text-align: center; font-size: 0.887rem; color: var(--rgbf-text-3); }
.rgbf-modal-foot a { color: var(--rgbf-blue); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

/* ---------- ابزارک‌های عمومی ---------- */
.rgbf-sr-only {
	position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
	clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.rgbf-muted { color: var(--rgbf-text-3); }
.rgbf-center { text-align: center; }

/* ===== S2:EMPLOYER ===== */

/* ---------- گام‌های ثبت پروژه ---------- */
.rgbf-steps-dots { display: flex; justify-content: center; gap: 8px; margin-bottom: 21px; flex-wrap: wrap; }
.rgbf-step-dot {
	display: flex; align-items: center; gap: 8px; font-weight: 800; font-size: 1rem;
	color: var(--rgbf-text-3); background: var(--rgbf-surface); border: 1px solid var(--rgbf-border);
	border-radius: 5px; padding: 8px 21px 8px 13px;
}
.rgbf-step-dot em { font-style: normal; font-weight: 600; font-size: 0.887rem; }
.rgbf-step-dot.is-active { color: var(--rgbf-text); border-color: var(--rgbf-blue); background: rgba(0, 35, 102, .12); }
.rgbf-step-dot.is-done { color: var(--rgbf-green-ink); border-color: var(--rgbf-green); }

.rgbf-post-project { max-width: 610px; margin-inline: auto; }
.rgbf-step-panel { display: none; }
.rgbf-step-panel.is-active { display: block;  }
.rgbf-step-title { font-size: 1.128rem; font-weight: 800; margin: 0 0 21px; }
.rgbf-step-nav { display: flex; align-items: center; justify-content: space-between; margin-top: 21px; }

.rgbf-cat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 13px; }
@media (max-width: 760px) { .rgbf-cat-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 520px) { .rgbf-cat-grid { grid-template-columns: repeat(2, 1fr); } }
.rgbf-cat-card {
	display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center;
	background: rgba(10, 26, 61, .09); border: 1px solid var(--rgbf-border-2); border-radius: var(--rgbf-r-md);
	padding: 13px 8px; cursor: pointer; color: var(--rgbf-text-2); font-size: 0.887rem; font-weight: 700;

}
.rgbf-cat-card:hover { border-color: var(--rgbf-border-2); background: var(--rgbf-surface-2);  }
.rgbf-cat-card.is-selected { border-color: var(--rgbf-blue); background: rgba(0, 35, 102, .14); color: var(--rgbf-text); box-shadow: 0 0 0 3px rgba(0, 35, 102, .16); }
.rgbf-cat-card .rgbf-i { color: var(--rgbf-blue); }

.rgbf-checkbox-row { display: flex; align-items: center; gap: 8px; margin-top: 13px; font-size: 0.887rem; color: var(--rgbf-text-2); cursor: pointer; }
.rgbf-checkbox-row input { width: 21px; height: 21px; accent-color: var(--rgbf-blue); }

.rgbf-success-panel { max-width: 610px; margin: 34px auto 0; text-align: center; }
.rgbf-success-icon {
	width: 55px; height: 55px; margin: 0 auto 21px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
	background: rgba(255, 215, 0, .14); color: var(--rgbf-green-ink); font-size: 1.825rem; font-weight: 800;
}
.rgbf-success-panel h2 { font-size: 1.272rem; font-weight: 800; margin: 0 0 8px; }
.rgbf-success-panel p { margin-bottom: 21px; }

/* عناصری که display صریح دارند، صفت hidden را نادیده می‌گیرند؛ این را برمی‌گردانیم. */
.rgbf-steps-dots[hidden],
.rgbf-intent-gate[hidden],
.rgbf-nudge[hidden],
.rgbf-success-panel[hidden] { display: none !important; }

/* ---------- دروازه‌ی نیت (کارفرما یا فریلنسر؟) ---------- */
.rgbf-intent-gate { max-width: 987px; margin: 0 auto; }
.rgbf-intent-gate .rgbf-step-title { text-align: center; }
.rgbf-intent-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 13px; margin-top: 21px; }
.rgbf-intent-card {
	display: flex; flex-direction: column; gap: 8px; text-align: start;
	padding: 21px 21px; border-radius: var(--rgbf-r-md); border: 1px solid var(--rgbf-border);
	background: var(--rgbf-surface); color: var(--rgbf-text); cursor: pointer;

}
.rgbf-intent-card:hover { border-color: var(--rgbf-blue); background: rgba(0, 35, 102, .1);  }
.rgbf-intent-card strong { font-size: 1rem; font-weight: 800; line-height: 1.7; }
.rgbf-intent-card .rgbf-muted { font-size: 0.887rem; line-height: 1.9; }
.rgbf-intent-emoji { font-size: 1.618rem; line-height: 1; }

/* ---------- تذکر نرم داخل فرم ---------- */
.rgbf-nudge {
	margin-top: 13px; padding: 13px 21px; border-radius: var(--rgbf-r-sm);
	border: 1px solid rgba(183, 121, 31, .35); background: rgba(183, 121, 31, .09);
	display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
}
.rgbf-nudge p { flex: 1 1 260px; margin: 0; font-size: 0.887rem; line-height: 1.9; color: var(--rgbf-text-2); }
.rgbf-nudge strong { color: var(--rgbf-amber); }

.rgbf-serviced-panel .rgbf-icon-info { background: rgba(0, 35, 102, .14); color: var(--rgbf-blue); }
.rgbf-serviced-panel .rgbf-btn { margin: 0 5px; }

/* ---------- کارت پروژه ---------- */
.rgbf-project-card { display: flex; flex-direction: column; gap: 13px; }
.rgbf-project-card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.rgbf-project-card-title { font-size: 1rem; font-weight: 800; margin: 0; line-height: 1.6; }
.rgbf-project-card-title a:hover { color: var(--rgbf-blue); }
.rgbf-project-card-excerpt { color: var(--rgbf-text-2); font-size: 0.887rem; margin: 0; }
.rgbf-project-card-meta { display: flex; flex-wrap: wrap; gap: 8px 13px; font-size: 0.887rem; align-items: center; margin-top: auto; padding-top: 8px; border-top: 1px solid var(--rgbf-border); }
.rgbf-budget { font-weight: 800; color: var(--rgbf-green-ink); }
.rgbf-budget-negotiable { color: var(--rgbf-amber); }

/* ---------- آرشیو پروژه‌ها ---------- */
.rgbf-archive-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 21px; flex-wrap: wrap; margin-bottom: 21px; }
.rgbf-filter-bar { display: flex; flex-wrap: wrap; gap: 13px; align-items: flex-end; padding: 21px; }
.rgbf-filter-bar .rgbf-field { flex: 1 1 160px; min-width: 144px; margin-bottom: 0; }
.rgbf-archive-pagination { display: flex; justify-content: center; gap: 8px; margin-top: 34px; flex-wrap: wrap; }
.rgbf-archive-pagination .page-numbers {
	display: inline-flex; align-items: center; justify-content: center; min-width: 34px; height: 34px; padding: 0 13px;
	border-radius: 5px; border: 1px solid var(--rgbf-border-2); color: var(--rgbf-text-2); font-weight: 700; font-size: 0.887rem;
}
.rgbf-archive-pagination .page-numbers.current { background: var(--rgbf-blue); border-color: var(--rgbf-blue); color: #fff; }
.rgbf-archive-pagination .page-numbers:hover:not(.current) { background: var(--rgbf-surface-2); }

/* ---------- تک‌پروژه ---------- */
.rgbf-breadcrumb { display: flex; gap: 8px; align-items: center; color: var(--rgbf-text-3); font-size: 0.887rem; margin-bottom: 21px; }
.rgbf-breadcrumb a:hover { color: var(--rgbf-blue); }
.rgbf-status-banner { border-radius: var(--rgbf-r-md); padding: 13px 21px; margin-bottom: 21px; font-weight: 700; font-size: 0.887rem; border: 1px solid var(--rgbf-border-2); }
.rgbf-status-banner.rgbf-status-in_progress { background: rgba(0, 35, 102, .1); color: var(--rgbf-blue); }
.rgbf-status-banner.rgbf-status-delivered { background: rgba(183, 121, 31, .1); color: var(--rgbf-amber); }
.rgbf-status-banner.rgbf-status-completed { background: rgba(0, 35, 102, .06); color: var(--rgbf-text-2); }
.rgbf-status-banner.rgbf-status-cancelled { background: rgba(200, 16, 46, .1); color: var(--rgbf-red); }

.rgbf-single-layout { display: grid; grid-template-columns: 2.2fr 1fr; gap: 21px; align-items: start; }
@media (max-width: 900px) { .rgbf-single-layout { grid-template-columns: 1fr; } }
.rgbf-single-title { font-size: clamp(1.272rem, 3vw, 1.618rem); font-weight: 800; margin: 13px 0; }
.rgbf-single-meta-row { display: flex; flex-wrap: wrap; gap: 8px 21px; font-size: 0.887rem; align-items: center; padding-bottom: 13px; margin-bottom: 13px; border-bottom: 1px solid var(--rgbf-border); }
.rgbf-single-desc { color: var(--rgbf-text-2); line-height: 2; }
.rgbf-single-desc p { margin: 0 0 13px; }
.rgbf-single-files { margin-top: 21px; padding-top: 21px; border-top: 1px solid var(--rgbf-border); }
.rgbf-single-files h3 { font-size: 1rem; font-weight: 800; margin: 0 0 8px; }
.rgbf-single-files li { margin-bottom: 8px; }
.rgbf-single-files a { text-decoration: underline; text-underline-offset: 3px; color: var(--rgbf-blue); }
.rgbf-owner-tools { display: flex; gap: 8px; align-items: center; margin-top: 21px; padding-top: 21px; border-top: 1px solid var(--rgbf-border); flex-wrap: wrap; }
.rgbf-employer-card h3 { font-size: 1rem; font-weight: 800; margin: 0 0 13px; }
.rgbf-employer-name { font-weight: 700; font-size: 1rem; margin: 0 0 5px; }

/* ===== S3:FREELANCER ===== */

/* ---------- آواتار ---------- */
.rgbf-avatar { border-radius: 50%; object-fit: cover; flex: none; }
.rgbf-avatar-fallback { display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; font-weight: 800; flex: none; }

/* ---------- کارت فرم پیشنهاد ---------- */
.rgbf-bid-card { position: sticky; top: calc(var(--head-h) + 24px); }
.rgbf-bid-card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 13px; flex-wrap: wrap; }
.rgbf-bid-card-head h3 { margin: 0; font-size: 1.128rem; }
.rgbf-bid-lock-note {
	background: var(--rgbf-grad-soft); border: 1px solid var(--rgbf-border-2); border-radius: var(--rgbf-r-sm);
	padding: 13px 13px; font-size: 0.887rem; font-weight: 700; margin-bottom: 13px; color: var(--rgbf-text);
}
.rgbf-bid-card-locked .rgbf-bid-form { opacity: .92; }
.rgbf-bid-status-note { margin: -5px 0 13px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* ---------- چیپ‌های مهارت (چک‌باکس) ---------- */
.rgbf-skill-chips { display: flex; flex-wrap: wrap; gap: 8px; max-height: 233px; overflow-y: auto; padding: 5px 2px; }
.rgbf-skill-chip {
	display: inline-flex; align-items: center; gap: 5px; cursor: pointer;
	background: rgba(10, 26, 61, .09); border: 1px solid var(--rgbf-border-2); border-radius: 5px;
	padding: 8px 13px; font-size: 0.887rem;
}
.rgbf-skill-chip:has(input:checked) { background: var(--rgbf-grad-soft); border-color: var(--rgbf-blue); color: var(--rgbf-text); }
.rgbf-skill-chip input { accent-color: var(--rgbf-blue); }
.rgbf-modal-lg { max-width: 610px; }
.rgbf-s3-activate-sub { margin: -8px 0 21px; }

/* ---------- فهرست پیشنهادها (مالک پروژه) ---------- */
.rgbf-bid-list-head { display: flex; align-items: center; justify-content: space-between; gap: 13px; flex-wrap: wrap; margin-bottom: 13px; }
.rgbf-bid-list-head h3 { margin: 0; font-size: 1.128rem; }
.rgbf-bid-sort { display: flex; gap: 8px; flex-wrap: wrap; }
.rgbf-bid-sort a {
	font-size: 0.887rem; font-weight: 700; color: var(--rgbf-text-2); padding: 5px 13px;
	border-radius: 5px; border: 1px solid var(--rgbf-border); background: var(--rgbf-surface);
}
.rgbf-bid-sort a.active { color: #fff; background: linear-gradient(120deg, #002366, var(--rgbf-blue)); border-color: transparent; }
.rgbf-bid-list { display: flex; flex-direction: column; gap: 13px; }
.rgbf-bid-item { border: 1px solid var(--rgbf-border); border-radius: var(--rgbf-r-md); padding: 13px 21px; background: var(--rgbf-surface); }
.rgbf-bid-item-head { display: flex; align-items: center; gap: 13px; flex-wrap: wrap; }
.rgbf-bid-item-who { flex: 1 1 auto; min-width: 144px; }
.rgbf-bid-item-meta { font-size: 0.786rem; }
.rgbf-bid-item-price { text-align: end; }
.rgbf-bid-item-price strong { display: block; font-size: 1rem; }
.rgbf-bid-item-price span { font-size: 0.786rem; }
.rgbf-bid-item-msg { margin: 13px 0 0; font-size: 0.887rem; color: var(--rgbf-text-2); }
.rgbf-bid-item-actions { display: flex; align-items: center; gap: 8px; margin-top: 13px; flex-wrap: wrap; }
.rgbf-status-pending { color: var(--rgbf-amber); background: rgba(183, 121, 31, .12); }
.rgbf-status-shortlisted { color: var(--rgbf-blue); background: rgba(0, 35, 102, .12); }
.rgbf-status-accepted { color: var(--rgbf-green-ink); background: rgba(255, 215, 0, .12); }
.rgbf-status-rejected { color: var(--rgbf-red); background: rgba(200, 16, 46, .12); }
.rgbf-status-withdrawn { color: var(--rgbf-text-3); background: rgba(0, 35, 102, .08); }

/* ---------- دایرکتوری فریلنسرها ---------- */
/* فاصله از هدر فیکس تم (site-head): بدون این، محتوا زیر هدر می‌رود */
.rgbf-freelancers-page, .rgbf-freelancer-profile { padding-block: calc(var(--head-h) + 34px) 89px; }
.rgbf-freelancers-head { text-align: center; max-width: 610px; margin: 0 auto 34px; }
.rgbf-freelancers-filters {
	display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin-bottom: 34px;
}
.rgbf-freelancers-filters input[type="text"], .rgbf-freelancers-filters select {
	background: rgba(10, 26, 61, .09); border: 1px solid var(--rgbf-border-2); border-radius: 8px;
	padding: 13px 13px; color: var(--rgbf-text); min-width: 233px;
}
.rgbf-freelancer-card { display: block; text-decoration: none; }
.rgbf-freelancer-card-head { display: flex; align-items: center; gap: 13px; margin-bottom: 13px; }
.rgbf-freelancer-city { font-size: 0.786rem; }
.rgbf-freelancer-skills { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 13px; }
.rgbf-chip-sm { padding: 5px 13px; font-size: 0.786rem; }
.rgbf-freelancer-card-foot {
	display: flex; align-items: center; justify-content: space-between; gap: 8px;
	font-size: 0.786rem; color: var(--rgbf-text-2); padding-top: 13px; border-top: 1px solid var(--rgbf-border);
}
.rgbf-pagination { display: flex; justify-content: center; gap: 8px; margin-top: 34px; flex-wrap: wrap; }
.rgbf-pagination a {
	display: inline-flex; align-items: center; justify-content: center; min-width: 34px; height: 34px;
	border-radius: 5px; border: 1px solid var(--rgbf-border); font-weight: 700; font-size: 0.887rem;
}
.rgbf-pagination a.active { color: #fff; background: linear-gradient(120deg, #002366, var(--rgbf-blue)); border-color: transparent; }

/* ---------- پروفایل عمومی فریلنسر ---------- */
.rgbf-freelancer-hero { display: flex; align-items: center; gap: 21px; flex-wrap: wrap; margin-bottom: 21px; }
.rgbf-freelancer-hero-info { flex: 1 1 auto; min-width: 233px; }
.rgbf-freelancer-hero-info h1 { margin: 0 0 5px; font-size: 1.435rem; }
.rgbf-freelancer-headline { margin: 0 0 8px; color: var(--rgbf-text-2); }
.rgbf-freelancer-hero-meta { display: flex; flex-wrap: wrap; gap: 13px; font-size: 0.887rem; color: var(--rgbf-text-2); }
.rgbf-freelancer-body { align-items: start; }
.rgbf-freelancer-main { display: flex; flex-direction: column; gap: 21px; }
.rgbf-freelancer-main .rgbf-card h2, .rgbf-freelancer-aside .rgbf-card h2 { margin: 0 0 13px; font-size: 1rem; }
.rgbf-freelancer-skills { display: flex; flex-wrap: wrap; gap: 8px; }
.rgbf-portfolio-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 13px; }
@media (max-width: 640px) { .rgbf-portfolio-grid { grid-template-columns: repeat(2, 1fr); } }
.rgbf-portfolio-item {
	position: relative; border: 1px solid var(--rgbf-border); border-radius: var(--rgbf-r-sm); overflow: hidden;
	background: rgba(10, 26, 61, .09); padding: 0; cursor: pointer; aspect-ratio: 1; display: block;
}
.rgbf-portfolio-item img { width: 100%; height: 100%; object-fit: cover; }
.rgbf-portfolio-item span {
	position: absolute; inset-inline: 0; inset-block-end: 0; background: rgba(10, 26, 61, .82);
	color: #fff; font-size: 0.786rem; padding: 5px 8px; text-align: start;
}
.rgbf-reviews-list { display: flex; flex-direction: column; gap: 13px; }
.rgbf-review-item { border-top: 1px solid var(--rgbf-border); padding-top: 13px; }
.rgbf-review-item:first-child { border-top: none; padding-top: 0; }
.rgbf-review-item-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 5px; }
.rgbf-review-stars { color: var(--rgbf-amber); font-weight: 700; font-size: 0.887rem; }
.rgbf-review-time { font-size: 0.786rem; }

/* ===== S4:PANEL ===== */

/* ---------- پوسته‌ی پنل (سایدبار دسکتاپ / تب پایین موبایل) ---------- */
.rgbf-panel { display: flex; align-items: flex-start; gap: 21px; max-width: var(--rgbf-wrap); margin-inline: auto; padding: 89px 21px 89px; }
.rgbf-panel-side { position: sticky; top: calc(var(--head-h) + 18px); flex: 0 0 230px; }
.rgbf-panel-nav { display: flex; flex-direction: column; gap: 5px; background: var(--rgbf-surface); border: 1px solid var(--rgbf-border); border-radius: var(--rgbf-r-md); padding: 8px; }
.rgbf-panel-nav-item {
	display: flex; align-items: center; gap: 8px; padding: 13px 13px; border-radius: var(--rgbf-r-sm);
	color: var(--rgbf-text-2); font-weight: 700; font-size: 0.887rem; position: relative;
}
.rgbf-panel-nav-item:hover { background: var(--rgbf-surface-2); color: var(--rgbf-text); }
.rgbf-panel-nav-item.active { background: var(--rgbf-grad-soft); color: var(--rgbf-text); }
.rgbf-panel-nav-item .rgbf-i { flex: none; }
.rgbf-panel-nav-item span:not(.rgbf-panel-badge) { flex: 1 1 auto; }
.rgbf-panel-nav-exit { margin-top: 8px; border-top: 1px solid var(--rgbf-border); padding-top: 13px; border-radius: 0; }
.rgbf-panel-badge {
	display: inline-flex; align-items: center; justify-content: center; min-width: 21px; height: 21px; padding: 0 5px;
	border-radius: 5px; background: var(--rgbf-red); color: #fff; font-size: 0.697rem; font-weight: 800;
}
.rgbf-panel-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 21px; }

.rgbf-panel-header { display: flex; align-items: center; justify-content: space-between; gap: 13px; flex-wrap: wrap; }
.rgbf-panel-header h1 { margin: 0 0 5px; font-size: 1.435rem; }
.rgbf-panel-section-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 13px; }
.rgbf-panel-section-head h2 { margin: 0; font-size: 1rem; }

/* ---------- نمای کلی: کارت‌های آمار ---------- */
.rgbf-stat-card { display: flex; flex-direction: column; gap: 5px; text-align: center; padding: 21px 13px; }
.rgbf-stat-num { font-size: 1.825rem; font-weight: 800; }
.rgbf-stat-label { color: var(--rgbf-text-2); font-size: 0.887rem; display: flex; align-items: center; justify-content: center; gap: 8px; }
.rgbf-stat-cta { border: none; font: inherit; cursor: pointer; }
.rgbf-rating-card { display: flex; align-items: center; gap: 8px; padding: 13px 21px; }
.rgbf-rating-big { font-size: 1.128rem; color: var(--rgbf-amber); }
.rgbf-rating-sep { color: var(--rgbf-text-3); }

/* ---------- فهرست اعلان‌ها ---------- */
.rgbf-notif-list { display: flex; flex-direction: column; gap: 2px; }
.rgbf-notif-item a { display: flex; align-items: center; justify-content: space-between; gap: 13px; padding: 13px 5px; border-top: 1px solid var(--rgbf-border); }
.rgbf-notif-item:first-child a { border-top: none; }
.rgbf-notif-item.unread .rgbf-notif-body { color: var(--rgbf-text); font-weight: 700; position: relative; padding-inline-start: 13px; }
.rgbf-notif-item.unread .rgbf-notif-body::before { content: ''; position: absolute; inset-inline-start: 0; top: 7px; width: 8px; height: 8px; border-radius: 50%; background: var(--rgbf-blue); }
.rgbf-notif-body { color: var(--rgbf-text-2); font-size: 0.887rem; }
.rgbf-notif-time { font-size: 0.786rem; color: var(--rgbf-text-3); white-space: nowrap; }

/* ---------- فهرست‌های پنل (پروژه‌ها/پیشنهادها) ---------- */
.rgbf-panel-list { display: flex; flex-direction: column; gap: 13px; }
.rgbf-panel-list-item { display: flex; align-items: center; justify-content: space-between; gap: 13px; flex-wrap: wrap; }
.rgbf-panel-list-main { flex: 1 1 260px; min-width: 0; }
.rgbf-panel-list-title { font-weight: 800; font-size: 1rem; display: block; margin-bottom: 5px; }
.rgbf-panel-list-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 0.887rem; }
.rgbf-panel-list-actions { flex: none; }

/* ---------- کارگاه پروژه ---------- */
.rgbf-status-lg { padding: 8px 21px; font-size: 0.887rem; }
.rgbf-workspace-other { display: flex; align-items: center; gap: 13px; }
.rgbf-workspace-other-info { display: flex; flex-direction: column; gap: 2px; }

.rgbf-timeline { display: flex; align-items: flex-start; gap: 5px; padding: 8px 5px; }
.rgbf-timeline-step { flex: 1 1 0; text-align: center; position: relative; color: var(--rgbf-text-3); }
.rgbf-timeline-step::before {
	content: ''; position: absolute; top: 7px; inset-inline-start: -50%; width: 100%; height: 2px; background: var(--rgbf-border);
	z-index: 0;
}
.rgbf-timeline-step:first-child::before { display: none; }
.rgbf-timeline-dot { position: relative; z-index: 1; display: block; width: 13px; height: 13px; margin: 0 auto 8px; border-radius: 50%; background: var(--rgbf-bg-2); border: 2px solid var(--rgbf-border-2); }
.rgbf-timeline-label { font-size: 0.786rem; font-weight: 700; }
.rgbf-timeline-step.done { color: var(--rgbf-green-ink); }
.rgbf-timeline-step.done .rgbf-timeline-dot { background: var(--rgbf-green); border-color: var(--rgbf-green); }
.rgbf-timeline-step.done::before { background: var(--rgbf-green); }
.rgbf-timeline-step.active { color: var(--rgbf-blue); }
.rgbf-timeline-step.active .rgbf-timeline-dot { background: var(--rgbf-blue); border-color: var(--rgbf-blue); box-shadow: 0 0 0 4px rgba(0, 35, 102, .18); }

.rgbf-workspace-actions h2 { margin: 0 0 13px; font-size: 1rem; }
.rgbf-workspace-actions h2:not(:first-child) { margin-top: 21px; }
.rgbf-workspace-btn-row, .rgbf-workspace-danger-row { display: flex; gap: 8px; flex-wrap: wrap; }
.rgbf-workspace-danger-row { margin-top: 21px; padding-top: 13px; border-top: 1px solid var(--rgbf-border); }
.rgbf-file-list { display: flex; flex-direction: column; gap: 5px; margin: 0 0 13px; padding: 0; list-style: none; }
.rgbf-file-list a { color: var(--rgbf-blue); }

.rgbf-star-input { display: flex; flex-direction: row-reverse; justify-content: flex-end; gap: 5px; }
.rgbf-star-input input { position: absolute; opacity: 0; width: 0; height: 0; }
.rgbf-star-input label { font-size: 1.618rem; color: var(--rgbf-border-2); cursor: pointer; }
.rgbf-star-input input:checked ~ label,
.rgbf-star-input label:hover,
.rgbf-star-input label:hover ~ label { color: var(--rgbf-amber); }

/* ---------- گفتگو (کارگاه پروژه + صندوق پیام‌ها) ---------- */
.rgbf-msg-layout { display: grid; grid-template-columns: 280px 1fr; gap: 21px; align-items: start; }
.rgbf-msg-sidebar { display: flex; flex-direction: column; gap: 5px; background: var(--rgbf-surface); border: 1px solid var(--rgbf-border); border-radius: var(--rgbf-r-md); padding: 8px; max-height: 70vh; overflow-y: auto; }
.rgbf-msg-conv-item { display: flex; align-items: center; gap: 8px; padding: 8px; border-radius: var(--rgbf-r-sm); }
.rgbf-msg-conv-item:hover, .rgbf-msg-conv-item.active { background: var(--rgbf-surface-2); }
.rgbf-msg-conv-info { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.rgbf-msg-conv-info strong { font-size: 0.887rem; }
.rgbf-msg-conv-project, .rgbf-msg-conv-preview { font-size: 0.786rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.rgbf-msg-thread-card { display: flex; flex-direction: column; min-height: 377px; }
.rgbf-msg-thread { flex: 1 1 auto; overflow-y: auto; max-height: 55vh; display: flex; flex-direction: column; gap: 13px; padding: 5px 5px 13px; }
.rgbf-msg-bubble { max-width: 78%; padding: 8px 13px; border-radius: 8px; background: var(--rgbf-surface-2); align-self: flex-start; }
.rgbf-msg-bubble.mine { align-self: flex-end; background: linear-gradient(120deg, rgba(0, 35, 102, .28), rgba(0, 35, 102, .22)); }
.rgbf-msg-bubble-head { display: flex; gap: 8px; margin-bottom: 5px; font-size: 0.697rem; color: var(--rgbf-text-3); }
.rgbf-msg-body { margin: 0; font-size: 0.887rem; white-space: pre-wrap; }
.rgbf-msg-attachment { display: inline-block; margin-top: 5px; font-size: 0.786rem; color: var(--rgbf-blue); }
#rgbf-msg-compose { display: flex; flex-direction: column; gap: 8px; margin-top: 13px; border-top: 1px solid var(--rgbf-border); padding-top: 13px; }
#rgbf-msg-compose textarea { width: 100%; resize: vertical; background: rgba(10, 26, 61, .09); border: 1px solid var(--rgbf-border-2); border-radius: 5px; padding: 8px 13px; color: var(--rgbf-text); }
.rgbf-msg-compose-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.rgbf-msg-compose-row input[type="file"] { font-size: 0.786rem; color: var(--rgbf-text-2); max-width: 55%; }

/* ---------- ویرایش نمونه‌کارها در پروفایل ---------- */
.rgbf-portfolio-edit-rows { display: flex; flex-direction: column; gap: 8px; }
.rgbf-portfolio-edit-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 8px; border: 1px solid var(--rgbf-border); border-radius: var(--rgbf-r-sm); }
.rgbf-portfolio-edit-row input[type="text"],
.rgbf-portfolio-edit-row input[type="url"] { flex: 1 1 160px; background: rgba(10, 26, 61, .09); border: 1px solid var(--rgbf-border-2); border-radius: 5px; padding: 8px 13px; color: var(--rgbf-text); }
.rgbf-portfolio-edit-row input[type="file"] { flex: 1 1 160px; font-size: 0.786rem; }
.rgbf-portfolio-thumb { width: 55px; height: 55px; border-radius: 8px; object-fit: cover; flex: none; }

/* ---------- ریسپانسیو: سایدبار → تب پایین موبایل ---------- */
@media (max-width: 860px) {
	.rgbf-msg-layout { grid-template-columns: 1fr; }
	.rgbf-msg-sidebar { max-height: 233px; }
}
@media (max-width: 760px) {
	.rgbf-panel { flex-direction: column; padding-inline: 13px; padding-bottom: 89px; gap: 13px; }
	.rgbf-panel-side {
		position: fixed; inset-inline: 0; bottom: 0; top: auto; flex: none; z-index: var(--rgbf-z-modal);
		background: var(--rgbf-bg-2); border-top: 1px solid var(--rgbf-border); padding: 5px 5px calc(5px + env(safe-area-inset-bottom));
	}
	.rgbf-panel-nav { flex-direction: row; background: none; border: none; padding: 0; justify-content: space-around; }
	.rgbf-panel-nav-item { flex-direction: column; gap: 3px; padding: 5px 8px; font-size: 0.697rem; text-align: center; }
	.rgbf-panel-nav-item span:not(.rgbf-panel-badge) { flex: none; }
	.rgbf-panel-nav-exit { display: none; }
	.rgbf-panel-badge { position: absolute; top: 2px; inset-inline-end: 5px; }
}

/* ===== S5:ADMIN ===== */

/* ===== S6:SEO ===== */
.rgbf-price-table { width: 100%; border-collapse: collapse; margin: 21px 0; }
.rgbf-price-table th, .rgbf-price-table td { padding: 13px 21px; text-align: start; border-bottom: 1px solid var(--rgbf-border); }
.rgbf-price-table th { color: var(--rgbf-text-2); font-size: 0.786rem; font-weight: 700; }
.rgbf-price-table td { font-size: 1rem; }
.rgbf-price-table tbody tr:hover { background: var(--rgbf-surface); }
.rgbf-tips-list { display: grid; gap: 13px; margin: 21px 0 0; padding: 0; list-style: none; }
.rgbf-tips-list li { position: relative; padding-inline-start: 21px; }
.rgbf-tips-list li::before { content: ''; position: absolute; inset-inline-start: 0; top: 9px; width: 8px; height: 8px; border-radius: 50%; background: var(--rgbf-blue); }

/* ---------- نقش Seemerce در این بخش (rgbf_role_notice) ---------- */
.rgbf-role-note h2 { font-size: 1.128rem; font-weight: 800; margin: 0 0 8px; }
.rgbf-role-note p { color: var(--rgbf-text-2); font-size: 1rem; line-height: 2; margin: 0 0 8px; }
.rgbf-role-note p:last-child { font-size: 0.887rem; margin-bottom: 0; }
.rgbf-role-line {
	border: 1px solid var(--rgbf-border); border-radius: var(--rgbf-r-sm);
	background: var(--rgbf-surface); color: var(--rgbf-text-2);
	padding: 13px 13px; margin: 0 0 21px; font-size: 0.887rem; line-height: 1.9;
}

/* ===== S7:PROFILE-UI (1405/06/06) ==========================================
   بازطراحی سطح های فریلنسری: انتخابگر مهارت، ناحیه آپلود، ویرایشگر نمونه کار،
   آواتار، نوار تکمیل پروفایل و کارت های نیت.

   دو قید که شکل این بخش را تعیین کرده اند:
   ۱) هیچ transition و animation و backdrop-filter، مطابق تصمیم سراسری سایت در
      ۱۴۰۵/۰۵/۲۲؛ عمق فقط از لایه گذاری گرادیان، حاشیه دقیق و inset highlight.
   ۲) هر حالت با یک ویژگی رنگی «معنادار» متمایز می شود، نه با جابه جایی، تا
      CLS صفر بماند.
   این بخش عمدا آخر فایل است تا بر قواعد قدیمی هم نام غلبه کند.
   ========================================================================== */

/* ---------- ریل طیفی: امضای بصری مشترک همه سرفصل های این بخش ---------- */
.rgbf-rail {
	position: relative;
	padding-inline-start: 13px;
	margin-bottom: 5px;
	font-size: 1rem;
	font-weight: 800;
	line-height: 1.7;
}
.rgbf-rail::before {
	content: '';
	position: absolute;
	inset-inline-start: 0;
	inset-block: 5px;
	width: 3px;
	border-radius: 3px;
	background: var(--rgbf-grad);
}

/* ---------- بلوک راهنما: «چه چیزی اینجا بنویسم» ---------- */
.rgbf-help {
	display: flex;
	gap: 13px;
	align-items: flex-start;
	background: rgba(0, 35, 102, .07);
	border: 1px solid rgba(0, 35, 102, .22);
	border-radius: var(--rgbf-r-md);
	padding: 13px 13px;
	color: var(--rgbf-text-2);
	font-size: 0.887rem;
	line-height: 1.95;
}
.rgbf-help svg { flex: none; margin-block-start: 5px; color: var(--rgbf-blue); }
.rgbf-help p { margin: 0; }
.rgbf-help strong { color: var(--rgbf-text); font-weight: 800; }

/* ---------- نوار تکمیل پروفایل ---------- */
.rgbf-pcomp {
	background:
		radial-gradient(120% 160% at 100% 0%, rgba(26, 92, 255, .12), transparent 60%),
		var(--rgbf-surface);
	border: 1px solid var(--rgbf-border);
	border-radius: var(--rgbf-r-lg);
	box-shadow: inset 0 1px 0 rgba(0, 35, 102, .07);
	padding: clamp(21px, 3vw, 21px);
	margin-bottom: 21px;
}
.rgbf-pcomp-top {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 13px;
	flex-wrap: wrap;
}
.rgbf-pcomp-score {
	font-size: 1.825rem;
	font-weight: 800;
	line-height: 1;
	background: var(--rgbf-grad);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}
.rgbf-pcomp-bar {
	display: flex;
	gap: 5px;
	margin: 13px 0 13px;
}
.rgbf-pcomp-seg {
	flex: 1;
	height: 8px;
	border-radius: 5px;
	background: rgba(0, 35, 102, .08);
	box-shadow: inset 0 1px 0 rgba(0, 35, 102, .06);
}
/* هر قطعه پرشده تکه ای از همان طیف برند را می گیرد، پس نوار پر که می شود
   همان لوگوی رنگی سایت را می سازد. */
.rgbf-pcomp-seg.is-on:nth-child(1) { background: #c8102e; }
.rgbf-pcomp-seg.is-on:nth-child(2) { background: #e0559b; }
.rgbf-pcomp-seg.is-on:nth-child(3) { background: #1450c8; }
.rgbf-pcomp-seg.is-on:nth-child(4) { background: #7a83ff; }
.rgbf-pcomp-seg.is-on:nth-child(5) { background: #002366; }
.rgbf-pcomp-seg.is-on:nth-child(6) { background: #ffd700; }
.rgbf-pcomp-missing {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	font-size: 0.887rem;
	color: var(--rgbf-text-3);
}
.rgbf-pcomp-item {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: var(--rgbf-surface-2);
	border: 1px solid var(--rgbf-border);
	border-radius: 5px;
	padding: 5px 13px;
	color: var(--rgbf-text-2);
	font-weight: 600;
}
.rgbf-pcomp-item::before {
	content: '';
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--rgbf-amber);
	flex: none;
}
.rgbf-pcomp-done {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--rgbf-green-ink);
	font-weight: 700;
	font-size: 0.887rem;
}

/* ---------- انتخابگر مهارت ---------- */
.rgbf-skillpick {
	background: rgba(10, 26, 61, .066);
	border: 1px solid var(--rgbf-border-2);
	border-radius: var(--rgbf-r-md);
	padding: 13px;
}
.rgbf-skillpick-bar {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 13px;
	flex-wrap: wrap;
}
.rgbf-skillpick-search {
	position: relative;
	flex: 1 1 190px;
	display: flex;
	align-items: center;
}
.rgbf-skillpick-search svg {
	position: absolute;
	inset-inline-start: 13px;
	color: var(--rgbf-text-3);
	pointer-events: none;
}
.rgbf-skillpick .rgbf-skillpick-input {
	width: 100%;
	background: rgba(10, 26, 61, .105);
	border: 1px solid var(--rgbf-border);
	border-radius: 5px;
	padding: 8px 13px;
	padding-inline-start: 34px;
	color: var(--rgbf-text);
	font-size: 0.887rem;
	text-align: start;
}
.rgbf-skillpick .rgbf-skillpick-input:focus {
	outline: none;
	border-color: var(--rgbf-blue);
	box-shadow: 0 0 0 3px rgba(0, 35, 102, .16);
}
.rgbf-skillpick .rgbf-skillpick-input::-webkit-search-cancel-button { filter: invert(.6); }
.rgbf-skillpick-count {
	flex: none;
	font-size: 0.887rem;
	font-weight: 700;
	color: var(--rgbf-text-2);
	background: var(--rgbf-surface-2);
	border: 1px solid var(--rgbf-border);
	border-radius: 5px;
	padding: 8px 13px;
}
.rgbf-skillpick-count.is-empty { color: var(--rgbf-text-3); }
.rgbf-skillpick-count.is-full { color: var(--rgbf-amber); border-color: rgba(183, 121, 31, .35); }

/* گرید چیپ ها: انتخاب شده ها با order منفی بالا می آیند، بدون جابه جایی DOM. */
.rgbf-skillpick-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	max-height: 233px;
	overflow-y: auto;
	padding: 2px;
	/* محو شدن لبه پایین، تا معلوم باشد فهرست ادامه دارد. */
	mask-image: linear-gradient(to bottom, #000 calc(100% - 26px), transparent 100%);
}
.rgbf-skillpick-grid::-webkit-scrollbar { width: 8px; }
.rgbf-skillpick-grid::-webkit-scrollbar-thumb { background: var(--rgbf-surface-3); border-radius: 5px; }

.rgbf-skillpick .rgbf-skill-chip {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: var(--rgbf-surface);
	border: 1px solid var(--rgbf-border);
	border-radius: 5px;
	padding: 8px 13px 8px 13px;
	padding-inline: 13px 13px;
	color: var(--rgbf-text-2);
	font-size: 0.887rem;
	font-weight: 600;
	cursor: pointer;
	user-select: none;
}
.rgbf-skillpick .rgbf-skill-chip[hidden] { display: none; }
.rgbf-skillpick .rgbf-skill-chip input {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
	margin: 0;
}
.rgbf-skill-box {
	flex: none;
	width: 21px;
	height: 21px;
	border-radius: 5px;
	border: 1.5px solid var(--rgbf-border-2);
	background: rgba(10, 26, 61, .09);
	display: grid;
	place-items: center;
	color: transparent;
}
.rgbf-skill-box svg { width: 13px; height: 13px; }
.rgbf-skillpick .rgbf-skill-chip:hover { border-color: var(--rgbf-border-2); background: var(--rgbf-surface-2); }
.rgbf-skillpick .rgbf-skill-chip.is-on,
.rgbf-skillpick .rgbf-skill-chip:has(input:checked) {
	background: var(--rgbf-grad-soft);
	border-color: rgba(0, 35, 102, .55);
	color: var(--rgbf-text);
}
.rgbf-skillpick .rgbf-skill-chip.is-on .rgbf-skill-box,
.rgbf-skillpick .rgbf-skill-chip:has(input:checked) .rgbf-skill-box {
	background: linear-gradient(135deg, #002366, #1450c8);
	border-color: transparent;
	color: #fff;
}
.rgbf-skillpick .rgbf-skill-chip.is-locked {
	opacity: .38;
	cursor: not-allowed;
}
.rgbf-skillpick .rgbf-skill-chip:has(input:focus-visible) {
	outline: 2px solid var(--rgbf-blue);
	outline-offset: 2px;
}
.rgbf-skillpick-empty {
	margin: 8px 2px 2px;
	font-size: 0.887rem;
	color: var(--rgbf-text-3);
}

/* ---------- ناحیه آپلود ---------- */
.rgbf-drop {
	position: relative;
	border: 1px solid var(--rgbf-border-2);
	border-radius: var(--rgbf-r-md);
	background: rgba(10, 26, 61, .054);
	padding: 8px;
}
.rgbf-drop.is-over {
	border-style: solid;
	border-color: var(--rgbf-blue);
	background: rgba(0, 35, 102, .1);
}
.rgbf-drop-input {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
}
.rgbf-drop-face {
	width: 100%;
	display: flex;
	align-items: center;
	gap: 13px;
	background: none;
	border: 0;
	padding: 13px 8px;
	cursor: pointer;
	text-align: start;
	color: inherit;
}
.rgbf-drop-face:focus-visible { outline: 2px solid var(--rgbf-blue); outline-offset: 2px; border-radius: 8px; }
.rgbf-drop-icon {
	flex: none;
	width: 55px;
	height: 55px;
	border-radius: 8px;
	display: grid;
	place-items: center;
	color: var(--rgbf-blue);
	background: var(--rgbf-grad-soft);
	border: 1px solid var(--rgbf-border-2);
	box-shadow: inset 0 1px 0 rgba(0, 35, 102, .1);
}
.rgbf-drop-copy { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.rgbf-drop-copy strong { font-size: 1rem; font-weight: 700; color: var(--rgbf-text); }
.rgbf-drop-hint { font-size: 0.786rem; color: var(--rgbf-text-3); }
.rgbf-drop-cta {
	flex: none;
	background: var(--rgbf-surface-2);
	border: 1px solid var(--rgbf-border-2);
	border-radius: 5px;
	padding: 8px 13px;
	font-size: 0.887rem;
	font-weight: 700;
	color: var(--rgbf-text);
}
.rgbf-drop-face:hover .rgbf-drop-cta { background: var(--rgbf-surface-3); }

.rgbf-drop-list { display: flex; flex-direction: column; gap: 8px; }
.rgbf-drop-list:not(:empty) { margin-top: 5px; }
.rgbf-drop-item {
	display: flex;
	align-items: center;
	gap: 13px;
	background: var(--rgbf-surface);
	border: 1px solid var(--rgbf-border);
	border-radius: 8px;
	padding: 8px 13px;
}
.rgbf-drop-item.is-current { border-style: dashed; }
.rgbf-drop-thumb {
	flex: none;
	width: 55px;
	height: 55px;
	border-radius: 5px;
	object-fit: cover;
	background: rgba(10, 26, 61, .12);
	border: 1px solid var(--rgbf-border);
}
.rgbf-drop-thumb-file { display: grid; place-items: center; color: var(--rgbf-text-2); }
.rgbf-drop-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.rgbf-drop-meta strong {
	font-size: 0.887rem;
	font-weight: 600;
	color: var(--rgbf-text);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	/* نام فایل لاتین است اما بلوکش باید مثل بقیه ستون از راست شروع شود؛
	   isolate ترتیب حروف را درست نگه می دارد بدون آنکه چیدمان را چپ چین کند. */
	unicode-bidi: isolate;
}
.rgbf-drop-size { font-size: 0.786rem; color: var(--rgbf-text-3); }
.rgbf-drop-del {
	flex: none;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	background: var(--rgbf-surface-2);
	border: 1px solid var(--rgbf-border);
	color: var(--rgbf-text-3);
	cursor: pointer;
}
.rgbf-drop-del:hover { color: var(--rgbf-red); border-color: rgba(200, 16, 46, .45); background: rgba(200, 16, 46, .1); }
.rgbf-drop-err {
	margin: 8px 2px 2px;
	display: flex;
	flex-direction: column;
	gap: 5px;
	font-size: 0.887rem;
	line-height: 1.85;
	color: var(--rgbf-red);
}
.rgbf-drop-err span {
	background: rgba(200, 16, 46, .1);
	border: 1px solid rgba(200, 16, 46, .28);
	border-radius: 5px;
	padding: 8px 13px;
}

/* حالت تصویری: وقتی فایلی انتخاب شده، قاب انتخاب جمع می شود و تصویر بزرگ است. */
.rgbf-drop-img.has-files .rgbf-drop-face { padding: 5px 8px; }
.rgbf-drop-img.has-files .rgbf-drop-icon { width: 34px; height: 34px; border-radius: 5px; }
.rgbf-drop-img.has-files .rgbf-drop-icon svg { width: 21px; height: 21px; }
.rgbf-drop-img.has-files .rgbf-drop-hint { display: none; }
.rgbf-drop-img .rgbf-drop-thumb { width: 89px; height: 89px; border-radius: 5px; }

/* ---------- انتخاب آواتار ---------- */
.rgbf-avatar-pick { display: flex; align-items: center; gap: 21px; flex-wrap: wrap; }
.rgbf-avatar-pick-figure { position: relative; flex: none; }
.rgbf-avatar-pick-figure .rgbf-avatar {
	width: 89px;
	height: 89px;
	border-radius: 50%;
	object-fit: cover;
	border: 2px solid var(--rgbf-border-2);
	box-shadow: 0 0 0 5px rgba(0, 35, 102, .1);
}
.rgbf-avatar-pick-body { flex: 1 1 260px; min-width: 0; }
.rgbf-avatar-remove {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 8px;
	font-size: 0.887rem;
	color: var(--rgbf-text-3);
	cursor: pointer;
}
.rgbf-avatar-remove input { accent-color: var(--rgbf-red); }

/* ---------- ویرایشگر نمونه کار ---------- */
.rgbf-pf-editor { display: grid; grid-template-columns: repeat(2, 1fr); gap: 13px; }
@media (max-width: 860px) { .rgbf-pf-editor { grid-template-columns: 1fr; } }
.rgbf-pf-card {
	background: var(--rgbf-surface);
	border: 1px solid var(--rgbf-border);
	border-radius: var(--rgbf-r-md);
	padding: 13px;
	display: flex;
	flex-direction: column;
	gap: 13px;
}
.rgbf-pf-card:has(.rgbf-pf-drop .rgbf-drop-item) { border-color: var(--rgbf-border-2); }
.rgbf-pf-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.rgbf-pf-num {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 0.887rem;
	font-weight: 800;
	color: var(--rgbf-text-2);
}
.rgbf-pf-num i {
	width: 21px;
	height: 21px;
	border-radius: 8px;
	display: grid;
	place-items: center;
	font-style: normal;
	font-size: 0.786rem;
	color: #fff;
	background: linear-gradient(135deg, #002366, #1450c8);
}
.rgbf-pf-del {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: 0.786rem;
	color: var(--rgbf-text-3);
	cursor: pointer;
}
.rgbf-pf-del input { accent-color: var(--rgbf-red); }
.rgbf-pf-card input[type="text"],
.rgbf-pf-card input[type="url"] {
	width: 100%;
	background: rgba(10, 26, 61, .09);
	border: 1px solid var(--rgbf-border-2);
	border-radius: 5px;
	padding: 13px 13px;
	color: var(--rgbf-text);
	font-size: 0.887rem;
	text-align: start;
}
.rgbf-pf-card input[type="url"] { direction: ltr; }
.rgbf-pf-card input:focus { outline: none; border-color: var(--rgbf-blue); box-shadow: 0 0 0 3px rgba(0, 35, 102, .14); }

/* ---------- کارت های نیت (ثبت پروژه) ---------- */
.rgbf-intent-card { position: relative; }
.rgbf-intent-icon {
	width: 55px;
	height: 55px;
	border-radius: 8px;
	display: grid;
	place-items: center;
	background: var(--rgbf-grad-soft);
	border: 1px solid var(--rgbf-border-2);
	box-shadow: inset 0 1px 0 rgba(0, 35, 102, .1);
	color: var(--rgbf-blue);
	margin-bottom: 5px;
}
.rgbf-intent-card[data-rgbf-intent="freelancer"] .rgbf-intent-icon { color: var(--rgbf-purple); }
.rgbf-intent-card:hover .rgbf-intent-icon { border-color: rgba(0, 35, 102, .5); }

/* ---------- فیلد با شمارنده ---------- */
.rgbf-field-row { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.rgbf-count {
	font-size: 0.786rem;
	font-weight: 700;
	color: var(--rgbf-text-3);
	font-variant-numeric: tabular-nums;
}
.rgbf-count.is-short { color: var(--rgbf-amber); }
.rgbf-count.is-ok { color: var(--rgbf-green-ink); }

/* ---------- بخش بندی فرم پروفایل ---------- */
.rgbf-section { margin-bottom: 21px; }
.rgbf-section:last-of-type { margin-bottom: 0; }
.rgbf-section > .rgbf-muted { font-size: 0.887rem; margin: 0 0 13px; }
.rgbf-public-url {
	direction: ltr;
	display: inline-block;
	font-size: 0.887rem;
	color: var(--rgbf-blue);
	background: rgba(0, 35, 102, .1);
	border: 1px solid rgba(0, 35, 102, .25);
	border-radius: 5px;
	padding: 5px 13px;
}

/* ---------- حالت فشرده آپلود (نوار نوشتن پیام) ---------- */
.rgbf-drop-compact {
	border: 0;
	background: none;
	padding: 0;
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
}
.rgbf-drop-compact .rgbf-drop-face {
	width: auto;
	gap: 8px;
	padding: 8px 13px 8px 8px;
	padding-inline: 8px 13px;
	background: var(--rgbf-surface-2);
	border: 1px solid var(--rgbf-border);
	border-radius: 5px;
}
.rgbf-drop-compact .rgbf-drop-face:hover { background: var(--rgbf-surface-3); }
.rgbf-drop-compact .rgbf-drop-icon {
	width: 21px;
	height: 21px;
	border-radius: 8px;
	background: none;
	border: 0;
	box-shadow: none;
	color: var(--rgbf-text-2);
}
.rgbf-drop-compact .rgbf-drop-copy strong { font-size: 0.887rem; font-weight: 700; color: var(--rgbf-text-2); }
.rgbf-drop-compact .rgbf-drop-list { flex-direction: row; flex-wrap: wrap; }
.rgbf-drop-compact .rgbf-drop-item { padding: 5px 8px; border-radius: 5px; gap: 8px; }
.rgbf-drop-compact .rgbf-drop-thumb { width: 21px; height: 21px; border-radius: 5px; }
.rgbf-drop-compact .rgbf-drop-thumb svg { width: 13px; height: 13px; }
.rgbf-drop-compact .rgbf-drop-meta strong { font-size: 0.786rem; max-width: 144px; }
.rgbf-drop-compact .rgbf-drop-size { display: none; }
.rgbf-drop-compact .rgbf-drop-del { width: 21px; height: 21px; }
.rgbf-drop-compact .rgbf-drop-err { flex-basis: 100%; }
.rgbf-drop-compact.is-over .rgbf-drop-face { border-color: var(--rgbf-blue); background: rgba(0, 35, 102, .12); }

/* مودال ساخت پروفایل حالا انتخابگر مهارت را در خود دارد و به عرض بیشتری نیاز دارد. */
.rgbf-modal-lg { max-width: 610px; }

/* نوار نوشتن پیام: دکمه پیوست و دکمه ارسال در یک ردیف. */
.rgbf-msg-compose-row { align-items: center; gap: 8px; flex-wrap: wrap; }
.rgbf-msg-compose-row .rgbf-drop-compact { flex: 1 1 auto; min-width: 0; }

/* ---------- چک باکس بومی: مربع سیاه پیش فرض مرورگر ---------- */
/* در تم تیره، چک باکس بومی یک مربع مشکی توپر است که کنار بقیه اجزا وصله
   می زند. اینجا با appearance:none همان مربع به جعبه ای هم خانواده با
   .rgbf-skill-box تبدیل می شود. انتخابگر مهارت چک باکس خودش را کاملا پنهان
   می کند، پس با این قاعده تداخلی ندارد. */
.rgbf input[type="checkbox"] {
	appearance: none;
	-webkit-appearance: none;
	flex: none;
	width: 21px;
	height: 21px;
	margin: 0;
	border-radius: 5px;
	border: 1.5px solid var(--rgbf-border-2);
	background: rgba(10, 26, 61, .09);
	cursor: pointer;
	vertical-align: -4px;
}
.rgbf input[type="checkbox"]:checked {
	border-color: transparent;
	background:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.4 4.4L19 7.5'/%3E%3C/svg%3E") center / 12px 12px no-repeat,
		linear-gradient(135deg, #002366, #1450c8);
}
.rgbf input[type="checkbox"]:focus-visible {
	outline: 2px solid var(--rgbf-blue);
	outline-offset: 2px;
}
.rgbf input[type="checkbox"]:hover:not(:checked) { border-color: var(--rgbf-blue); }
/* حذف: تیک قرمز، چون معنایش برگشت ناپذیر است. */
.rgbf-avatar-remove input[type="checkbox"]:checked,
.rgbf-pf-del input[type="checkbox"]:checked {
	background:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.4 4.4L19 7.5'/%3E%3C/svg%3E") center / 12px 12px no-repeat,
		linear-gradient(135deg, #c8102e, #1450c8);
}
.rgbf-avatar-remove:has(input:checked),
.rgbf-pf-del:has(input:checked) { color: var(--rgbf-red); }

/* ===== S8:PANEL-POLISH ===== */
/* لایه بازطراحی پنل ۱۴۰۵/۰۶/۰۶ (نسخه 1.2.2)، هماهنگ با زبان طراحی پنل رنک:
   سربرگ با خط گرادیانی، کاشی آمار با عدد گرادیانی و هاور، فید اعلان ها.
   بدون transition (قرارداد سراسری سایت). */

.rgbf-panel-header {
	position: relative;
	padding-bottom: 13px; margin-bottom: 21px;
	border-bottom: 1px solid var(--rgbf-border);
}
.rgbf-panel-header::after {
	content: ''; position: absolute; inset-inline-start: 0; bottom: -1px;
	width: 89px; height: 2px; border-radius: 2px; background: var(--rgbf-grad);
}
.rgbf-panel-header h1 { font-size: 1.435rem; }
.rgbf-panel-header .rgbf-muted { margin: 5px 0 0; font-size: 0.887rem; }

.rgbf-stat-card { text-align: start; padding: 21px 13px; text-decoration: none; color: inherit; }
.rgbf-stat-card:hover { background: var(--rgbf-surface-2); border-color: var(--rgbf-border-2); }
.rgbf-stat-num {
	font-size: 1.618rem; line-height: 1.25;
	background: var(--rgbf-grad); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.rgbf-stat-label { color: var(--rgbf-text-3); font-size: 0.786rem; }
.rgbf-stat-cta { cursor: pointer; border-style: dashed; border-color: var(--rgbf-border-2); }
.rgbf-stat-cta .rgbf-stat-num { background: none; -webkit-text-fill-color: var(--rgbf-blue); color: var(--rgbf-blue); }
.rgbf-stat-cta:hover { border-color: rgba(0, 35, 102, .5); }

/* دو کلاسه تا با .rgbf-card:hover هم وزن شود، وگرنه هاور ته رنگ کهربایی را می برد. */
.rgbf-card.rgbf-rating-card { border-color: rgba(183, 121, 31, .4); background: rgba(183, 121, 31, .06); }
.rgbf-rating-big { font-size: 1.272rem; color: var(--rgbf-amber, #b7791f); }

.rgbf-notif-item a:hover { background: var(--rgbf-surface); }
.rgbf-notif-item a { border-radius: var(--rgbf-r-sm); padding-inline: 8px; }
.rgbf-notif-time { color: var(--rgbf-text-3); font-size: 0.786rem; flex: none; }

.rgbf-panel-section-head h2 { font-size: 1rem; }

@media (max-width: 640px) {
	.rgbf-panel-header h1 { font-size: 1.272rem; }
	.rgbf-stat-num { font-size: 1.272rem; }
}
/* ===== /S8:PANEL-POLISH ===== */

/* ===== S9:AVATAR-FIT ===== */
/*
 * تم روی هر img یک height: auto می گذارد و همان، ارتفاع attribute آواتار را
 * بی اثر می کرد: عکس عمودی ۱۰۸۰x۲۴۰۰ یک فریلنسر به جای دایره، بیضی کشیده
 * می شد. نسبت اینجا قفل می شود تا هر عکسی مربع بریده شود نه تغییر شکل یافته.
 * تمایل عمودی به بالا عمدی است: در عکس عمودی موبایل صورت معمولا بالای کادر
 * است و برش وسط، چانه را می برد.
 */
.rgbf-avatar {
	aspect-ratio: 1 / 1;
	height: auto;
	object-fit: cover;
	object-position: 50% 35%;
	background-color: var(--rgbf-surface-2);
	box-shadow: 0 0 0 1px var(--rgbf-border-2);
}
/* دایره ی حرف اول ته رنگ خودش را دارد و به حلقه احتیاج ندارد. */
.rgbf-avatar-fallback { box-shadow: none; }
/* ===== /S9:AVATAR-FIT ===== */