.rp-team-page { display: flex; flex-direction: column; gap: 22px; }
.rp-team-head { padding: 26px 28px; border: 1px solid var(--rp-border, rgba(255,255,255,.08)); border-radius: 16px; background: var(--rp-surface, rgba(255,255,255,.03)); }
.rp-team-kicker { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 8px; color: var(--rp-primary, #f59e0b); font-size: 12px; font-weight: 800; letter-spacing: .08em; }
.rp-team-head h1 { margin: 0; font-size: 28px; }
.rp-team-head p { margin: 7px 0 0; color: var(--rp-text-dim, #9ca3af); }

.rp-team-section { padding: 22px; border: 1px solid var(--rp-border, rgba(255,255,255,.08)); border-radius: 16px; background: var(--rp-surface, rgba(255,255,255,.025)); }
.rp-team-section-title { display: flex; align-items: center; gap: 13px; margin-bottom: 18px; }
.rp-team-section-icon { width: 42px; height: 42px; flex: 0 0 42px; display: grid; place-items: center; border-radius: 12px; color: var(--team-role-color); background: color-mix(in srgb, var(--team-role-color) 12%, transparent); border: 1px solid color-mix(in srgb, var(--team-role-color) 28%, transparent); }
.rp-team-section-title h2 { margin: 0; font-size: 19px; }
.rp-team-section-title p { margin: 4px 0 0; color: var(--rp-text-dim, #9ca3af); font-size: 13px; }
.rp-team-count { margin-left: auto; padding: 6px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; color: var(--rp-text-dim, #9ca3af); background: rgba(255,255,255,.04); }

.rp-team-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 13px; }
.rp-team-card { position: relative; overflow: hidden; padding: 16px; border: 1px solid var(--rp-border, rgba(255,255,255,.08)); border-radius: 14px; background: var(--rp-card, rgba(255,255,255,.025)); transition: transform .2s ease, border-color .2s ease, background .2s ease; }
.rp-team-card::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--team-role-color); opacity: .85; }
.rp-team-card:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--team-role-color) 35%, transparent); background: color-mix(in srgb, var(--team-role-color) 5%, var(--rp-card, rgba(255,255,255,.025))); }

.rp-team-card-top { display: flex; align-items: center; gap: 12px; }
.rp-team-avatar { position: relative; width: 54px; height: 54px; flex: 0 0 54px; display: grid; place-items: center; overflow: visible; border-radius: 50%; color: var(--team-role-color); background: rgba(255,255,255,.05); border: 2px solid color-mix(in srgb, var(--team-role-color) 50%, transparent); }
.rp-team-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.rp-team-online { position: absolute; right: -1px; bottom: 1px; width: 11px; height: 11px; border: 2px solid var(--rp-surface, #111827); border-radius: 50%; background: #6b7280; }
.rp-team-online.is-online { background: #22c55e; }

.rp-team-member { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.rp-team-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--team-role-color); font-weight: 800; font-size: 15px; text-decoration: none; }
.rp-team-username { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--rp-text-dim, #9ca3af); font-size: 12px; }

.rp-team-card-bottom { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 15px; padding-top: 13px; border-top: 1px solid var(--rp-border, rgba(255,255,255,.07)); }
.rp-team-role { display: inline-flex; align-items: center; gap: 6px; color: var(--team-role-color); font-size: 12px; font-weight: 800; }
.rp-team-profile { display: inline-flex; align-items: center; gap: 6px; color: var(--rp-text-dim, #9ca3af); font-size: 12px; font-weight: 700; text-decoration: none; transition: color .2s ease; }
.rp-team-profile:hover { color: var(--team-role-color); }

.rp-team-empty, .rp-team-notice { display: flex; align-items: center; gap: 10px; padding: 15px 16px; border: 1px dashed var(--rp-border, rgba(255,255,255,.10)); border-radius: 12px; color: var(--rp-text-dim, #9ca3af); background: rgba(255,255,255,.02); }
.rp-team-notice i { color: var(--rp-primary, #f59e0b); }

@media (max-width: 900px) {
	.rp-team-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
	.rp-team-grid { grid-template-columns: 1fr; }
	.rp-team-section-title { align-items: flex-start; flex-wrap: wrap; }
	.rp-team-count { margin-left: 0; }
}