/* =============================================================================
   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-gold-ink: var(--gold-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: 'RGBir', 'RGBir Fallback', '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-gold-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-gold-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-gold-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-gold-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-gold-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-gold-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-gold-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-gold-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-gold-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-gold-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 ===== */

/* ===== S10:MASCOT-PICKER ===== */
.rgbf-mascot-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 12px;
	margin-top: 10px;
}
@media (max-width: 640px) {
	.rgbf-mascot-grid {
		grid-template-columns: repeat(3, 1fr);
		gap: 8px;
	}
}
.rgbf-mascot-option {
	position: relative;
	cursor: pointer;
	display: block;
	margin: 0;
	user-select: none;
}
.rgbf-mascot-input {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
	margin: 0;
	pointer-events: none;
}
.rgbf-mascot-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 12px 6px;
	border-radius: 12px;
	border: 2px solid var(--rgbf-border, #e2e8f0);
	background: var(--rgbf-surface, #ffffff);
	transition: all 0.2s ease;
	text-align: center;
}
.rgbf-mascot-option:hover .rgbf-mascot-card {
	border-color: rgba(0, 35, 102, 0.4);
	background: var(--rgbf-surface-2, #f8fafc);
}
.rgbf-mascot-input:checked + .rgbf-mascot-card {
	border-color: #002366;
	background: rgba(0, 35, 102, 0.05);
	box-shadow: 0 0 0 2px rgba(0, 35, 102, 0.25);
	transform: translateY(-2px);
}
.rgbf-mascot-avatar-wrap {
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: #f8fafc;
	border: 1px solid #e2e8f0;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}
.rgbf-mascot-img {
	width: 44px;
	height: 44px;
	object-fit: contain;
	display: block;
}
.rgbf-mascot-meta {
	margin-top: 8px;
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
}
.rgbf-mascot-name {
	font-size: 0.82rem;
	font-weight: 600;
	color: var(--rgbf-text, #1e293b);
	line-height: 1.2;
}
.rgbf-mascot-role {
	font-size: 0.7rem;
	color: var(--rgbf-text-3, #64748b);
	margin-top: 2px;
	line-height: 1.2;
}
.rgbf-avatar-mascot {
	background: #f8fafc;
	padding: 2px;
	border: 1.5px solid #e2e8f0;
	object-fit: contain;
}
/* ===== /S10:MASCOT-PICKER ===== */