/* ============================================
   EVENTS PAGE — interior page styles
   Layers on top of /style.css. Only page-specific
   mockups live here.
   ============================================ */


/* ============================================
   MOCKUP — Testing event roster (Section 3)
   ============================================ */
.mock-event-roster {
	background: #fff;
	border-radius: 14px;
	border: 1px solid var(--ink-200);
	box-shadow: var(--shadow-lg);
	overflow: hidden;
}

.mock-event-roster-head {
	padding: 1rem 1.25rem;
	background: linear-gradient(180deg, var(--brand-50), #fff);
	border-bottom: 1px solid var(--ink-100);
}

.mock-event-roster-bc {
	font-family: var(--mono);
	font-size: 0.62rem;
	color: var(--ink-500);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	margin-bottom: 0.45rem;
}

.mock-event-roster-title {
	font-size: 1.05rem;
	font-weight: 700;
	color: var(--ink-900);
	margin-bottom: 0.3rem;
	letter-spacing: -0.01em;
}

.mock-event-roster-date {
	font-size: 0.78rem;
	color: var(--ink-600);
	margin-bottom: 0.75rem;
	display: flex;
	align-items: center;
	gap: 0.4rem;
}

.mock-event-roster-date i {
	color: var(--brand-600);
}

.mock-event-roster-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem;
}

.mock-event-roster-chip {
	font-size: 0.65rem;
	font-weight: 600;
	background: #fff;
	border: 1px solid var(--ink-200);
	color: var(--ink-700);
	padding: 0.2rem 0.55rem;
	border-radius: 999px;
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
}

.mock-event-roster-chip.primary {
	background: var(--brand-50);
	border-color: var(--brand-200);
	color: var(--brand-700);
}

.mock-event-roster-chip.public {
	background: var(--accent-50);
	border-color: var(--accent-100);
	color: var(--accent-600);
}

.mock-event-roster-chip i {
	font-size: 0.6rem;
}

.mock-event-roster-stats {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	border-bottom: 1px solid var(--ink-100);
}

.mock-event-roster-stat {
	padding: 0.85rem 0.5rem;
	text-align: center;
	border-right: 1px solid var(--ink-100);
}

.mock-event-roster-stat:last-child {
	border-right: 0;
}

.mock-event-roster-stat-num {
	font-size: 1.4rem;
	font-weight: 800;
	color: var(--brand-700);
	line-height: 1;
}

.mock-event-roster-stat-label {
	font-size: 0.58rem;
	color: var(--ink-500);
	font-family: var(--mono);
	margin-top: 0.3rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.mock-event-roster-section {
	padding: 0.65rem 1.25rem;
	font-family: var(--mono);
	font-size: 0.6rem;
	color: var(--ink-500);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	background: var(--ink-50);
	border-bottom: 1px solid var(--ink-100);
	font-weight: 600;
}

.mock-event-roster-table {
	display: flex;
	flex-direction: column;
}

.mock-event-roster-tr {
	display: grid;
	grid-template-columns: 1.3fr 1fr 0.85fr 1.1fr 1fr;
	align-items: center;
	padding: 0.65rem 1.25rem;
	border-bottom: 1px solid var(--ink-100);
	font-size: 0.74rem;
	gap: 0.5rem;
}

.mock-event-roster-tr:last-child {
	border-bottom: 0;
}

.mock-event-roster-tr.head {
	font-family: var(--mono);
	font-size: 0.58rem;
	color: var(--ink-500);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	background: var(--ink-50);
	padding-top: 0.55rem;
	padding-bottom: 0.55rem;
}

.mock-event-roster-name {
	font-weight: 600;
	color: var(--ink-900);
}

.mock-event-roster-position {
	color: var(--ink-700);
}

.mock-event-roster-status {
	font-size: 0.62rem;
	font-weight: 600;
	padding: 0.2rem 0.5rem;
	border-radius: 4px;
	display: inline-block;
	width: max-content;
}

.mock-event-roster-status.attended {
	background: rgba(34, 167, 95, 0.12);
	color: #16783F;
}

.mock-event-roster-status.scheduled {
	background: var(--ink-100);
	color: var(--ink-700);
}

.mock-event-roster-ats {
	color: var(--ink-700);
	font-size: 0.7rem;
}

.mock-event-roster-checkin {
	font-size: 0.62rem;
	font-weight: 600;
	padding: 0.3rem 0.55rem;
	border-radius: 5px;
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	width: max-content;
}

.mock-event-roster-checkin.checked {
	background: rgba(34, 167, 95, 0.12);
	color: #16783F;
}

.mock-event-roster-checkin.checked i {
	font-size: 0.55rem;
}

.mock-event-roster-checkin.action {
	background: var(--brand-600);
	color: #fff;
	border: 1px solid var(--brand-700);
}


/* ============================================
   MOCKUP — Info events list (Section 4)
   ============================================ */
.mock-info-events {
	background: #fff;
	border-radius: 14px;
	border: 1px solid var(--ink-200);
	box-shadow: var(--shadow-lg);
	overflow: hidden;
}

.mock-info-events-head {
	padding: 0.85rem 1.1rem;
	border-bottom: 1px solid var(--ink-100);
	display: flex;
	align-items: center;
	gap: 0.55rem;
	font-size: 0.85rem;
	font-weight: 700;
	color: var(--ink-900);
}

.mock-info-events-head i {
	color: var(--brand-600);
}

.mock-info-events-list {
	padding: 0.25rem 0;
}

.mock-info-event {
	padding: 0.85rem 1.1rem;
	border-bottom: 1px solid var(--ink-100);
}

.mock-info-event:last-child {
	border-bottom: 0;
}

.mock-info-event-title {
	font-size: 0.88rem;
	font-weight: 700;
	color: var(--ink-900);
	margin-bottom: 0.5rem;
	line-height: 1.3;
}

.mock-info-event-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.3rem;
	margin-bottom: 0.5rem;
}

.mock-info-event-chip {
	font-size: 0.6rem;
	font-weight: 600;
	padding: 0.15rem 0.5rem;
	border-radius: 4px;
	background: var(--ink-100);
	color: var(--ink-700);
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
}

.mock-info-event-chip i {
	font-size: 0.55rem;
}

.mock-info-event-chip.type {
	background: var(--brand-50);
	color: var(--brand-700);
}

.mock-info-event-chip.public {
	background: var(--accent-50);
	color: var(--accent-600);
}

.mock-info-event-chip.private {
	background: #FEF3E7;
	color: #B95A12;
}

.mock-info-event-foot {
	display: flex;
	align-items: center;
	gap: 0.45rem;
	font-size: 0.7rem;
	color: var(--ink-600);
	flex-wrap: wrap;
}

.mock-info-event-foot i {
	color: var(--ink-400);
	font-size: 0.68rem;
	margin-right: 0.25rem;
}

.mock-info-event-foot-sep {
	color: var(--ink-300);
}


/* ============================================
   MOCKUP — Leaderboard with podium (Section 5)
   ============================================ */
.mock-leaderboard {
	background: #fff;
	border-radius: 14px;
	border: 1px solid var(--ink-200);
	box-shadow: var(--shadow-lg);
	overflow: hidden;
}

.mock-leaderboard-head {
	padding: 0.85rem 1.1rem;
	border-bottom: 1px solid var(--ink-100);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	flex-wrap: wrap;
}

.mock-leaderboard-title {
	display: flex;
	align-items: center;
	gap: 0.55rem;
	font-size: 0.9rem;
	font-weight: 700;
	color: var(--ink-900);
}

.mock-leaderboard-title i {
	color: #E89F50;
}

.mock-leaderboard-tabs {
	display: flex;
	gap: 0.2rem;
	background: var(--ink-50);
	padding: 0.2rem;
	border-radius: 6px;
	border: 1px solid var(--ink-200);
}

.mock-leaderboard-tab {
	font-size: 0.7rem;
	font-weight: 600;
	padding: 0.25rem 0.65rem;
	border-radius: 4px;
	color: var(--ink-600);
}

.mock-leaderboard-tab.active {
	background: #fff;
	color: var(--ink-900);
	box-shadow: var(--shadow-sm);
}

.mock-leaderboard-filters {
	padding: 0.55rem 1.1rem;
	background: var(--ink-50);
	border-bottom: 1px solid var(--ink-100);
	display: flex;
	gap: 0.3rem;
	flex-wrap: wrap;
}

.mock-leaderboard-filter {
	font-size: 0.62rem;
	font-weight: 600;
	padding: 0.2rem 0.55rem;
	border-radius: 999px;
	border: 1px solid var(--ink-200);
	background: #fff;
	color: var(--ink-600);
}

.mock-leaderboard-filter.active {
	background: var(--brand-50);
	border-color: var(--brand-200);
	color: var(--brand-700);
}

.mock-leaderboard-podium {
	padding: 1.25rem 1rem 1.1rem;
	display: grid;
	grid-template-columns: 1fr 1.1fr 1fr;
	gap: 0.6rem;
	align-items: end;
}

.mock-leaderboard-pos {
	background: #fff;
	border: 2px solid var(--ink-100);
	border-radius: 10px;
	padding: 0.9rem 0.6rem 1rem;
	text-align: center;
	position: relative;
}

.mock-leaderboard-pos.first {
	border-color: #E8B547;
	background: linear-gradient(180deg, #FFFAEB, #fff);
	padding-top: 1.3rem;
	padding-bottom: 1.1rem;
	box-shadow: 0 8px 24px -8px rgba(232, 181, 71, 0.4);
}

.mock-leaderboard-pos.second {
	border-color: #B3BAC2;
	background: linear-gradient(180deg, #F4F6F8, #fff);
}

.mock-leaderboard-pos.third {
	border-color: #D2A47A;
	background: linear-gradient(180deg, #FAF1E8, #fff);
}

.mock-leaderboard-medal {
	font-size: 1.4rem;
	line-height: 1;
	margin-bottom: 0.4rem;
}

.mock-leaderboard-pos.first .mock-leaderboard-medal {
	font-size: 1.65rem;
}

.mock-leaderboard-name {
	font-size: 0.76rem;
	font-weight: 700;
	color: var(--ink-900);
	line-height: 1.25;
	margin-bottom: 0.4rem;
	min-height: 1.9rem;
	display: flex;
	align-items: center;
	justify-content: center;
}

.mock-leaderboard-total {
	font-size: 1.5rem;
	font-weight: 800;
	color: var(--brand-700);
	line-height: 1;
	margin-bottom: 0.15rem;
}

.mock-leaderboard-pos.first .mock-leaderboard-total {
	font-size: 1.85rem;
	color: #B07A0E;
}

.mock-leaderboard-totallabel {
	font-size: 0.55rem;
	font-family: var(--mono);
	color: var(--ink-500);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	margin-bottom: 0.8rem;
}

.mock-leaderboard-breakdown {
	border-top: 1px solid var(--ink-100);
	padding-top: 0.55rem;
	display: flex;
	flex-direction: column;
	gap: 0.32rem;
	text-align: left;
}

.mock-leaderboard-metric {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	font-size: 0.6rem;
	gap: 0.35rem;
}

.mock-leaderboard-metric-label {
	color: var(--ink-600);
	font-weight: 500;
	line-height: 1.2;
}

.mock-leaderboard-metric-val {
	font-weight: 700;
	color: var(--ink-900);
	font-family: var(--mono);
}


/* ============================================
   MOCKUP — Outreach apps list (Section 6)
   ============================================ */
.mock-outreach {
	background: #fff;
	border-radius: 14px;
	border: 1px solid var(--ink-200);
	box-shadow: var(--shadow-lg);
	overflow: hidden;
}

.mock-outreach-head {
	padding: 0.85rem 1.1rem;
	border-bottom: 1px solid var(--ink-100);
	display: flex;
	align-items: center;
	gap: 0.55rem;
	font-size: 0.85rem;
	font-weight: 700;
	color: var(--ink-900);
}

.mock-outreach-head i {
	color: var(--brand-600);
}

.mock-outreach-list {
	padding: 0.2rem 0;
}

.mock-outreach-app {
	padding: 0.85rem 1.1rem;
	border-bottom: 1px solid var(--ink-100);
}

.mock-outreach-app:last-child {
	border-bottom: 0;
}

.mock-outreach-app-category {
	font-family: var(--mono);
	font-size: 0.55rem;
	color: var(--ink-500);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	margin-bottom: 0.3rem;
}

.mock-outreach-app-title {
	font-size: 0.88rem;
	font-weight: 700;
	color: var(--ink-900);
	margin-bottom: 0.5rem;
	line-height: 1.3;
}

.mock-outreach-app-meta {
	display: flex;
	align-items: center;
	gap: 0.55rem;
	margin-bottom: 0.5rem;
	flex-wrap: wrap;
}

.mock-outreach-deploy {
	font-size: 0.6rem;
	font-weight: 600;
	padding: 0.18rem 0.5rem;
	border-radius: 4px;
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
}

.mock-outreach-deploy i {
	font-size: 0.55rem;
}

.mock-outreach-deploy.public {
	background: var(--accent-50);
	color: var(--accent-600);
}

.mock-outreach-deploy.private {
	background: #FEF3E7;
	color: #B95A12;
}

.mock-outreach-count {
	font-size: 0.7rem;
	color: var(--ink-600);
}

.mock-outreach-count strong {
	color: var(--ink-900);
	font-weight: 700;
}

.mock-outreach-app-fields {
	font-size: 0.68rem;
	color: var(--ink-600);
	line-height: 1.45;
}

.mock-outreach-app-fields strong {
	color: var(--ink-700);
	font-weight: 600;
}


/* ============================================
   MOCKUP — Section 7 backbone (3 cards w/ visuals)
   ============================================ */
.mock-backbone-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.5rem;
	margin-top: 3rem;
}

@media (max-width: 1000px) {
	.mock-backbone-grid {
		grid-template-columns: 1fr;
		gap: 2rem;
	}
}

.mock-backbone-card {
	background: #fff;
	border: 1px solid var(--ink-100);
	border-radius: var(--radius);
	padding: 1.75rem;
	display: flex;
	flex-direction: column;
}

.mock-backbone-card-title {
	font-size: 1.15rem;
	font-weight: 700;
	color: var(--ink-900);
	margin-bottom: 0.65rem;
	letter-spacing: -0.005em;
	line-height: 1.3;
}

.mock-backbone-card-body {
	color: var(--ink-700);
	font-size: 0.92rem;
	line-height: 1.55;
	margin-bottom: 1.5rem;
}

.mock-backbone-card-body strong {
	color: var(--ink-900);
	font-weight: 700;
}

.mock-backbone-visual {
	background: var(--ink-50);
	border: 1px solid var(--ink-100);
	border-radius: 10px;
	padding: 0.9rem;
	margin-top: auto;
}

/* Visual 1: Embedded registration on agency homepage */
.mock-bb-embed {
	background: #fff;
	border-radius: 6px;
	overflow: hidden;
	border: 1px solid var(--ink-200);
}

.mock-bb-embed-header {
	background: var(--navy-900);
	padding: 0.5rem 0.7rem;
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.mock-bb-embed-logo {
	width: 18px;
	height: 18px;
	border-radius: 4px;
	background: var(--accent-400);
	flex-shrink: 0;
}

.mock-bb-embed-nav {
	display: flex;
	gap: 0.55rem;
	font-size: 0.55rem;
	color: rgba(255, 255, 255, 0.7);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.mock-bb-embed-body {
	padding: 0.75rem 0.7rem 0.85rem;
}

.mock-bb-embed-callout {
	font-size: 0.55rem;
	font-family: var(--mono);
	color: var(--ink-500);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	margin-bottom: 0.45rem;
}

.mock-bb-embed-form {
	background: linear-gradient(180deg, var(--brand-50), #fff);
	border: 1px dashed var(--brand-300);
	border-radius: 6px;
	padding: 0.65rem;
}

.mock-bb-embed-form-title {
	font-size: 0.7rem;
	font-weight: 700;
	color: var(--ink-900);
	margin-bottom: 0.5rem;
}

.mock-bb-embed-form-field {
	background: #fff;
	border: 1px solid var(--ink-200);
	border-radius: 4px;
	padding: 0.3rem 0.45rem;
	margin-bottom: 0.3rem;
	font-size: 0.6rem;
	color: var(--ink-500);
}

.mock-bb-embed-form-btn {
	background: var(--brand-600);
	color: #fff;
	text-align: center;
	padding: 0.4rem;
	border-radius: 4px;
	font-size: 0.62rem;
	font-weight: 700;
	margin-top: 0.4rem;
}

.mock-bb-embed-foot {
	margin-top: 0.6rem;
	font-size: 0.6rem;
	color: var(--ink-600);
	text-align: center;
	line-height: 1.4;
}

.mock-bb-embed-foot strong {
	color: var(--brand-700);
}

/* Visual 2: Attendance (manual roster + magic-link virtual) */
.mock-bb-attendance {
	background: #fff;
	border: 1px solid var(--ink-200);
	border-radius: 6px;
	overflow: hidden;
}

.mock-bb-att-section {
	padding: 0.4rem 0.65rem;
	font-family: var(--mono);
	font-size: 0.5rem;
	color: var(--ink-500);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	background: var(--ink-50);
	border-bottom: 1px solid var(--ink-100);
	font-weight: 600;
}

.mock-bb-att-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0.45rem 0.65rem;
	font-size: 0.62rem;
	color: var(--ink-800);
	border-bottom: 1px solid var(--ink-100);
	gap: 0.4rem;
}

.mock-bb-att-row:last-child {
	border-bottom: 0;
}

.mock-bb-att-name {
	font-weight: 600;
	color: var(--ink-900);
}

.mock-bb-att-status {
	font-size: 0.52rem;
	font-weight: 700;
	padding: 0.15rem 0.4rem;
	border-radius: 3px;
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	flex-shrink: 0;
}

.mock-bb-att-status.done {
	background: rgba(34, 167, 95, 0.12);
	color: #16783F;
}

.mock-bb-att-status.done i {
	font-size: 0.45rem;
}

.mock-bb-att-action {
	background: var(--brand-600);
	color: #fff;
	font-size: 0.55rem;
	font-weight: 700;
	padding: 0.18rem 0.5rem;
	border-radius: 3px;
	flex-shrink: 0;
}

.mock-bb-att-magic {
	font-size: 0.55rem;
	font-weight: 600;
	color: var(--accent-600);
	background: var(--accent-50);
	padding: 0.15rem 0.4rem;
	border-radius: 3px;
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	flex-shrink: 0;
}

.mock-bb-att-magic i {
	font-size: 0.45rem;
}

/* Visual 2: SMS thread — system handles reschedule automatically */
.mock-bb-sms {
	background: #fff;
	border: 1px solid var(--ink-200);
	border-radius: 6px;
	padding: 0.6rem 0.55rem;
	display: flex;
	flex-direction: column;
	gap: 0.32rem;
}

.mock-bb-sms-bubble {
	max-width: 85%;
	padding: 0.4rem 0.55rem;
	border-radius: 8px;
	font-size: 0.62rem;
	line-height: 1.35;
}

.mock-bb-sms-bubble.system {
	background: var(--brand-50);
	color: var(--ink-900);
	align-self: flex-start;
	border-bottom-left-radius: 2px;
	border: 1px solid var(--brand-100);
}

.mock-bb-sms-bubble.candidate {
	background: var(--ink-100);
	color: var(--ink-900);
	align-self: flex-end;
	border-bottom-right-radius: 2px;
	font-weight: 600;
}

.mock-bb-sms-meta {
	font-size: 0.5rem;
	color: var(--ink-500);
	font-family: var(--mono);
	align-self: flex-start;
	margin-top: -0.1rem;
	margin-bottom: 0.1rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

/* Visual 3: Post-event footer — appended to .mock-bb-attendance */
.mock-bb-att-postfoot {
	padding: 0.5rem 0.65rem;
	border-top: 1px solid var(--ink-100);
	background: var(--ink-50);
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
	font-size: 0.58rem;
	color: var(--ink-700);
}

.mock-bb-att-postfoot-row {
	display: flex;
	align-items: center;
	gap: 0.45rem;
	line-height: 1.35;
}

.mock-bb-att-postfoot-row i {
	color: var(--accent-600);
	font-size: 0.55rem;
	flex-shrink: 0;
}

.mock-bb-att-postfoot-row strong {
	color: var(--ink-900);
	font-weight: 700;
}

/* Section 7 cross-reference (under the 3 cards) */
.mock-backbone-foot {
	margin-top: 3rem;
	text-align: center;
	font-size: 0.95rem;
	color: var(--ink-600);
	max-width: 760px;
	margin-left: auto;
	margin-right: auto;
	line-height: 1.6;
}

.mock-backbone-foot a {
	color: var(--brand-700);
	font-weight: 600;
	transition: color 0.15s ease;
}

.mock-backbone-foot a:hover {
	color: var(--brand-600);
}


/* ============================================
   RESPONSIVE — narrow viewport adjustments
   ============================================ */
@media (max-width: 700px) {
	.mock-event-roster-stats {
		grid-template-columns: repeat(2, 1fr);
	}

	.mock-event-roster-stat:nth-child(2) {
		border-right: 0;
	}

	.mock-event-roster-stat:nth-child(1),
	.mock-event-roster-stat:nth-child(2) {
		border-bottom: 1px solid var(--ink-100);
	}

	.mock-event-roster-tr {
		grid-template-columns: 1fr 1fr;
		gap: 0.3rem 0.5rem;
		padding: 0.55rem 1rem;
	}

	.mock-event-roster-tr.head {
		display: none;
	}

	.mock-leaderboard-podium {
		gap: 0.4rem;
		padding: 1rem 0.6rem;
	}

	.mock-leaderboard-name {
		font-size: 0.68rem;
	}

	.mock-leaderboard-total {
		font-size: 1.25rem;
	}

	.mock-leaderboard-pos.first .mock-leaderboard-total {
		font-size: 1.45rem;
	}

	.mock-leaderboard-metric {
		font-size: 0.55rem;
	}
}

	/* ===========================================================================
   panel-events.css  —  RecruitApp.ai event-roster visual
   SELF-CONTAINED, hard-scoped under .raev-root (raev- prefix). No core file.

   Aligned to the real single-event page: color-coded stat cards, colored
   ATS-stage pills (Application green / Pre Background orange, per the real
   screenshot), peach/green status pills, Checked-In text vs solid Check In.

   Scoping per handoff: explicit-property reset (NO all:revert, NO blanket
   width/height:auto -> zeroes inline SVG); layout-critical props !important;
   SVG sizing/fill explicit per icon (never currentColor).
   =========================================================================== */

				@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap');

				.raev-root {
					--ev-navy: #03213d;
					--ev-blue: #155fc8;
					--ev-ink: #1a2533;
					--ev-soft: #5a6b7e;
					--ev-faint: #8a98a8;
					--ev-line: #e4e9f0;
					--ev-line-2: #eef2f7;
					--ev-surf: #ffffff;
					--ev-surf-2: #f6f8fb;
					/* stat + pill tints (from the real event page) */
					--ev-peach-bg: #fdeee4;
					--ev-peach-tx: #c2603e;
					--ev-green-bg: #e6f6ee;
					--ev-green-tx: #1f7a3d;
					--ev-red-bg: #fdeaea;
					--ev-red-tx: #c0202a;
					--ev-mute-bg: #f1f4f8;
					--ev-mute-tx: #9aa6b3;
					--ev-app-bg: #d8f3e6;
					--ev-app-tx: #0f7a52;
					/* Application green */
					--ev-bg-bg: #fbe9d4;
					--ev-bg-tx: #b5651a;
					/* Pre Background orange */
					--ev-sans: 'Plus Jakarta Sans', ui-sans-serif, system-ui, sans-serif;
					--ev-mono: 'JetBrains Mono', ui-monospace, monospace;
				}

				/* ---- scoped reset (explicit props only; SVG-safe) ---- */
				.raev-root,
				.raev-root *,
				.raev-root *::before,
				.raev-root *::after {
					box-sizing: border-box !important;
					margin: 0;
					padding: 0;
					border: 0;
					font-family: var(--ev-sans) !important;
					font-weight: 400;
					font-style: normal;
					line-height: 1.45 !important;
					color: var(--ev-ink) !important;
					letter-spacing: normal;
					text-transform: none;
					text-align: left;
					text-shadow: none;
					text-decoration: none;
					vertical-align: baseline;
					background: transparent;
					float: none;
				}

				.raev-root b,
				.raev-root strong {
					font-weight: 700;
				}

				.raev-root button {
					cursor: pointer;
				}

				.raev-root svg {
					display: block;
				}

				/* ---- card ---- */
				.raev-root .raev-card {
					display: block !important;
					width: 100%;
					background: var(--ev-surf) !important;
					border: 1px solid var(--ev-line) !important;
					border-radius: 16px;
					box-shadow: 0 18px 48px -20px rgba(3, 33, 61, .30), 0 2px 8px -2px rgba(3, 33, 61, .10);
					overflow: hidden;
				}

				/* ---- browser chrome ---- */
				.raev-root .raev-chrome {
					display: flex !important;
					align-items: center;
					gap: 8px;
					padding: 12px 16px;
					background: var(--ev-surf-2) !important;
					border-bottom: 1px solid var(--ev-line) !important;
				}

				.raev-root .raev-dots {
					display: flex !important;
					gap: 7px;
				}

				.raev-root .raev-dots i {
					width: 11px;
					height: 11px;
					border-radius: 50%;
					display: block !important;
				}

				.raev-root .raev-dots i:nth-child(1) {
					background: #f0625a !important;
				}

				.raev-root .raev-dots i:nth-child(2) {
					background: #f5bd4f !important;
				}

				.raev-root .raev-dots i:nth-child(3) {
					background: #5cc663 !important;
				}

				.raev-root .raev-chrome-title {
					font-size: 12.5px;
					font-weight: 600 !important;
					color: var(--ev-soft) !important;
					margin-left: 6px;
				}

				.raev-root .raev-body {
					display: block !important;
					padding: 14px 16px 16px;
				}

				/* ---- event header ---- */
				.raev-root .raev-bc {
					font-size: 10px;
					font-weight: 700 !important;
					text-transform: uppercase !important;
					letter-spacing: 0.07em !important;
					color: var(--ev-faint) !important;
				}

				.raev-root .raev-bc-sep {
					color: var(--ev-line) !important;
					margin: 0 4px;
				}

				.raev-root .raev-title {
					font-size: 18px;
					font-weight: 700 !important;
					color: var(--ev-navy) !important;
					letter-spacing: -0.015em !important;
					line-height: 1.2 !important;
					margin-top: 4px;
				}

				.raev-root .raev-date {
					display: flex !important;
					align-items: center;
					gap: 7px;
					font-size: 12.5px;
					font-weight: 600 !important;
					color: var(--ev-soft) !important;
					margin-top: 5px;
				}

				.raev-root .raev-date svg {
					width: 15px !important;
					height: 15px !important;
					flex: none;
				}

				.raev-root .raev-chips {
					display: flex !important;
					flex-wrap: wrap;
					align-items: center;
					gap: 7px;
					margin-top: 11px;
				}

				.raev-root .raev-chip {
					display: inline-flex !important;
					align-items: center;
					gap: 5px;
					font-size: 11px;
					font-weight: 600 !important;
					border-radius: 6px;
					padding: 4px 9px;
					border: 1px solid var(--ev-line) !important;
					color: var(--ev-soft) !important;
					background: var(--ev-surf) !important;
				}

				.raev-root .raev-chip svg {
					width: 12px !important;
					height: 12px !important;
				}

				.raev-root .raev-chip-event {
					color: var(--ev-blue) !important;
					background: #e8f0fb !important;
					border-color: #cfe0f6 !important;
				}

				.raev-root .raev-chip-public {
					color: #0f8a6b !important;
				}

				/* ---- stat cards ---- */
				.raev-root .raev-stats {
					display: grid !important;
					grid-template-columns: repeat(4, 1fr);
					gap: 9px;
					margin: 13px 0;
				}

				.raev-root .raev-stat {
					text-align: center !important;
					border: 1px solid var(--ev-line) !important;
					border-radius: 10px;
					padding: 9px 6px;
					background: var(--ev-surf) !important;
				}

				.raev-root .raev-stat-num {
					font-size: 22px;
					font-weight: 800 !important;
					line-height: 1.05 !important;
					color: var(--ev-navy) !important;
					text-align: center !important;
				}

				.raev-root .raev-stat-label {
					font-size: 9px;
					font-weight: 700 !important;
					text-transform: uppercase !important;
					letter-spacing: 0.06em !important;
					color: var(--ev-faint) !important;
					text-align: center !important;
					margin-top: 3px;
				}

				.raev-root .raev-stat-sched {
					background: var(--ev-peach-bg) !important;
					border-color: #f6d8c6 !important;
				}

				.raev-root .raev-stat-sched .raev-stat-num {
					color: var(--ev-peach-tx) !important;
				}

				.raev-root .raev-stat-att {
					background: var(--ev-green-bg) !important;
					border-color: #c6ead4 !important;
				}

				.raev-root .raev-stat-att .raev-stat-num {
					color: var(--ev-green-tx) !important;
				}

				.raev-root .raev-stat-miss {
					background: var(--ev-red-bg) !important;
					border-color: #f3cccc !important;
				}

				.raev-root .raev-stat-miss .raev-stat-num {
					color: var(--ev-red-tx) !important;
				}

				.raev-root .raev-stat-rebook {
					background: var(--ev-mute-bg) !important;
				}

				.raev-root .raev-stat-rebook .raev-stat-num {
					color: var(--ev-mute-tx) !important;
				}

				.raev-root .raev-stat-rebook .raev-stat-label {
					color: #b3bdc9 !important;
				}

				/* ---- roster ---- */
				.raev-root .raev-section {
					font-size: 10px;
					font-weight: 700 !important;
					text-transform: uppercase !important;
					letter-spacing: 0.07em !important;
					color: var(--ev-faint) !important;
					margin-bottom: 8px;
				}

				.raev-root .raev-table {
					border: 1px solid var(--ev-line) !important;
					border-radius: 10px;
					overflow: hidden;
				}

				.raev-root .raev-tr {
					display: grid !important;
					grid-template-columns: 1.5fr 1.1fr 0.9fr 1.1fr 1fr;
					align-items: center;
					gap: 8px;
					padding: 9px 12px;
					border-bottom: 1px solid var(--ev-line-2) !important;
				}

				.raev-root .raev-tr-last {
					border-bottom: 0 !important;
				}

				.raev-root .raev-tr-head {
					background: var(--ev-surf-2) !important;
				}

				.raev-root .raev-tr-head span {
					font-size: 9.5px;
					font-weight: 700 !important;
					text-transform: uppercase !important;
					letter-spacing: 0.05em !important;
					color: var(--ev-faint) !important;
				}

				.raev-root .raev-name {
					font-size: 12.5px;
					font-weight: 600 !important;
					color: var(--ev-ink) !important;
				}

				.raev-root .raev-position {
					font-size: 11.5px;
					color: var(--ev-soft) !important;
				}

				/* status pills */
				.raev-root .raev-status {
					display: inline-block !important;
					font-size: 10px;
					font-weight: 700 !important;
					border-radius: 6px;
					padding: 3px 9px;
				}

				.raev-root .raev-status-sched {
					color: var(--ev-peach-tx) !important;
					background: var(--ev-peach-bg) !important;
				}

				.raev-root .raev-status-att {
					color: var(--ev-green-tx) !important;
					background: var(--ev-green-bg) !important;
				}

				/* ATS pills */
				.raev-root .raev-ats {
					display: inline-block !important;
					font-size: 10px;
					font-weight: 700 !important;
					border-radius: 6px;
					padding: 3px 9px;
				}

				.raev-root .raev-ats-app {
					color: var(--ev-app-tx) !important;
					background: var(--ev-app-bg) !important;
				}

				.raev-root .raev-ats-bg {
					color: var(--ev-bg-tx) !important;
					background: var(--ev-bg-bg) !important;
				}

				/* check-in */
				.raev-root .raev-checkin-done {
					display: inline-flex !important;
					align-items: center;
					gap: 5px;
					font-size: 11.5px;
					font-weight: 700 !important;
					color: var(--ev-green-tx) !important;
				}

				.raev-root .raev-checkin-done svg {
					width: 13px !important;
					height: 13px !important;
				}

				.raev-root .raev-checkin-btn {
					display: inline-block !important;
					background: var(--ev-navy) !important;
					color: #fff !important;
					font-size: 11px;
					font-weight: 700 !important;
					border-radius: 7px;
					padding: 6px 13px;
				}

				.raev-root .raev-checkin-btn:hover {
					background: #0a2f52 !important;
				}

				/* ---- narrow fallback ---- */
				@media (max-width: 560px) {
					.raev-root .raev-stats {
						grid-template-columns: repeat(2, 1fr);
					}

					.raev-root .raev-tr {
						grid-template-columns: 1.4fr 0.9fr 1fr;
					}

					.raev-root .raev-tr span:nth-child(4),
					.raev-root .raev-tr span:nth-child(5) {
						display: none !important;
					}
				}

					/* ===========================================================================
   panel-info-events.css  —  RecruitApp.ai "Information Events" visual
   SELF-CONTAINED, scoped under .raie-root (raie- prefix). No core file.

   Keeps the ORIGINAL layout (title, then a meta row of chips, then a foot row
   of date/location/count). Only the SKIN matches the real Events list:
   - TYPE chip = filled rounded pill, blue (Info Session / Webinar / Open House
     / Practice Event). Public = green outlined. Invite-only = red filled.
   - left accent border = type color (info-type = blue).
   SVG-safe reset; layout-critical props !important; per-icon fills.
   =========================================================================== */

				@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap');

				.raie-root {
					--ie-navy: #03213d;
					--ie-blue: #155fc8;
					--ie-green: #1f7a3d;
					--ie-ink: #1a2533;
					--ie-soft: #5a6b7e;
					--ie-faint: #8a98a8;
					--ie-line: #e4e9f0;
					--ie-line-2: #eef2f7;
					--ie-surf: #ffffff;
					--ie-surf-2: #f6f8fb;
					--ie-orange: #e07b3a;
					--ie-blue-bg: #e8f0fb;
					--ie-blue-bd: #cfe0f6;
					--ie-red: #c0202a;
					--ie-red-bg: #fdeaea;
					--ie-red-bd: #f3cccc;
					--ie-green-bd: #bfe3cb;
					--ie-amber-bg: #fcedcf;
					--ie-amber-tx: #9a6a12;
					--ie-amber-bd: #f0d9a0;
					--ie-sans: 'Plus Jakarta Sans', ui-sans-serif, system-ui, sans-serif;
				}

				.raie-root,
				.raie-root *,
				.raie-root *::before,
				.raie-root *::after {
					box-sizing: border-box !important;
					margin: 0;
					padding: 0;
					border: 0;
					font-family: var(--ie-sans) !important;
					font-weight: 400;
					font-style: normal;
					line-height: 1.4 !important;
					color: var(--ie-ink) !important;
					letter-spacing: normal;
					text-transform: none;
					text-align: left;
					text-shadow: none;
					text-decoration: none;
					vertical-align: baseline;
					background: transparent;
					float: none;
				}

				.raie-root b,
				.raie-root strong {
					font-weight: 700;
				}

				.raie-root svg {
					display: block;
				}

				.raie-root .raie-card {
					display: block !important;
					width: 100%;
					background: var(--ie-surf) !important;
					border: 1px solid var(--ie-line) !important;
					border-radius: 16px;
					box-shadow: 0 18px 48px -20px rgba(3, 33, 61, .30), 0 2px 8px -2px rgba(3, 33, 61, .10);
					overflow: hidden;
				}

				/* chrome */
				.raie-root .raie-chrome {
					display: flex !important;
					align-items: center;
					gap: 8px;
					padding: 12px 16px;
					background: var(--ie-surf-2) !important;
					border-bottom: 1px solid var(--ie-line) !important;
				}

				.raie-root .raie-dots {
					display: flex !important;
					gap: 7px;
				}

				.raie-root .raie-dots i {
					width: 11px;
					height: 11px;
					border-radius: 50%;
					display: block !important;
				}

				.raie-root .raie-dots i:nth-child(1) {
					background: #f0625a !important;
				}

				.raie-root .raie-dots i:nth-child(2) {
					background: #f5bd4f !important;
				}

				.raie-root .raie-dots i:nth-child(3) {
					background: #5cc663 !important;
				}

				.raie-root .raie-chrome-title {
					font-size: 12.5px;
					font-weight: 600 !important;
					color: var(--ie-soft) !important;
					margin-left: 6px;
				}

				/* header */
				.raie-root .raie-head {
					display: flex !important;
					align-items: center;
					gap: 9px;
					padding: 13px 16px 11px;
				}

				.raie-root .raie-head-ico {
					width: 18px !important;
					height: 18px !important;
					flex: none;
				}

				.raie-root .raie-head-title {
					font-size: 15px;
					font-weight: 700 !important;
					color: var(--ie-navy) !important;
					letter-spacing: -0.01em !important;
				}

				/* list */
				.raie-root .raie-list {
					display: block !important;
					padding: 0 14px 14px;
				}

				.raie-root .raie-event {
					display: block !important;
					padding: 11px 13px;
					border: 1px solid var(--ie-line) !important;
					border-left: 3px solid var(--ie-blue) !important;
					/* info-type = blue accent */
					border-radius: 9px;
					background: var(--ie-surf) !important;
				}

				.raie-root .raie-event+.raie-event {
					margin-top: 8px;
				}

				.raie-root .raie-event-title {
					font-size: 13.5px;
					font-weight: 600 !important;
					color: var(--ie-ink) !important;
				}

				/* meta row: type + public/private chips (as in the original) */
				.raie-root .raie-event-meta {
					display: flex !important;
					align-items: center;
					flex-wrap: wrap;
					gap: 7px;
					margin-top: 8px;
				}

				.raie-root .raie-chip {
					display: inline-flex !important;
					align-items: center;
					gap: 5px;
					font-size: 11px;
					font-weight: 700 !important;
					border-radius: 7px;
					padding: 4px 10px;
					border: 1px solid transparent !important;
					white-space: nowrap;
				}

				.raie-root .raie-chip svg {
					width: 12px !important;
					height: 12px !important;
				}

				/* type pill — blue filled (info-type) */
				.raie-root .raie-chip.type {
					color: var(--ie-blue) !important;
					background: var(--ie-blue-bg) !important;
					border-color: var(--ie-blue-bd) !important;
				}

				/* public — green outlined */
				.raie-root .raie-chip.public {
					color: var(--ie-green) !important;
					background: var(--ie-surf) !important;
					border-color: var(--ie-green-bd) !important;
				}

				/* invite-only — red filled */
				.raie-root .raie-chip.private {
					color: var(--ie-red) !important;
					background: var(--ie-red-bg) !important;
					border-color: var(--ie-red-bd) !important;
				}

				/* foot row: date · location · count */
				.raie-root .raie-event-foot {
					display: flex !important;
					align-items: center;
					flex-wrap: wrap;
					gap: 5px 4px;
					margin-top: 9px;
					font-size: 11.5px;
					color: var(--ie-soft) !important;
				}

				.raie-root .raie-event-foot>span {
					display: inline-flex !important;
					align-items: center;
					gap: 5px;
					color: var(--ie-soft) !important;
				}

				.raie-root .raie-event-foot svg {
					width: 13px !important;
					height: 13px !important;
					flex: none;
				}

				.raie-root .raie-foot-sep {
					color: var(--ie-faint) !important;
					margin: 0 5px;
				}

				.raie-root .raie-event-foot strong {
					color: var(--ie-orange) !important;
					font-weight: 800 !important;
				}

				@media (max-width: 540px) {
					.raie-root .raie-event-foot {
						gap: 4px 2px;
					}
				}

					/* ===========================================================================
   panel-leaderboard.css  —  RecruitApp.ai leaderboard + re-engagement charts
   SELF-CONTAINED, scoped under .ralb-root (ralb- prefix). No core file.

   Matches the real Recruiter Leaderboard: colored top-border podium cards
   (gold/silver/bronze), circular medal, PLACE eyebrow + name, big TOTAL, and
   labeled progress bars (blue/green/purple). Plus two donut charts side by side.

   SVG-safe reset; layout-critical props !important; per-icon fills.
   =========================================================================== */

				@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap');

				.ralb-root {
					--lb-navy: #03213d;
					--lb-blue: #155fc8;
					--lb-ink: #1a2533;
					--lb-soft: #5a6b7e;
					--lb-faint: #8a98a8;
					--lb-line: #e4e9f0;
					--lb-line-2: #eef2f7;
					--lb-surf: #ffffff;
					--lb-surf-2: #f6f8fb;
					--lb-gold: #e0a92e;
					--lb-silver: #9aa6b3;
					--lb-bronze: #bd7b3c;
					--lb-bar-blue: #1f6fd6;
					--lb-bar-green: #1f9d57;
					--lb-bar-purple: #9b51c9;
					--lb-track: #eef2f7;
					--lb-sans: 'Plus Jakarta Sans', ui-sans-serif, system-ui, sans-serif;
				}

				.ralb-root,
				.ralb-root *,
				.ralb-root *::before,
				.ralb-root *::after {
					box-sizing: border-box !important;
					margin: 0;
					padding: 0;
					border: 0;
					font-family: var(--lb-sans) !important;
					font-weight: 400;
					font-style: normal;
					line-height: 1.4 !important;
					color: var(--lb-ink) !important;
					letter-spacing: normal;
					text-transform: none;
					text-align: left;
					text-shadow: none;
					text-decoration: none;
					vertical-align: baseline;
					background: transparent;
					float: none;
				}

				.ralb-root b,
				.ralb-root strong {
					font-weight: 700;
				}

				.ralb-root svg {
					display: block;
				}

				.ralb-root .ralb-card {
					display: block !important;
					width: 100%;
					background: var(--lb-surf) !important;
					border: 1px solid var(--lb-line) !important;
					border-radius: 16px;
					box-shadow: 0 18px 48px -20px rgba(3, 33, 61, .30), 0 2px 8px -2px rgba(3, 33, 61, .10);
					overflow: hidden;
				}

				/* chrome */
				.ralb-root .ralb-chrome {
					display: flex !important;
					align-items: center;
					gap: 8px;
					padding: 12px 16px;
					background: var(--lb-surf-2) !important;
					border-bottom: 1px solid var(--lb-line) !important;
				}

				.ralb-root .ralb-dots {
					display: flex !important;
					gap: 7px;
				}

				.ralb-root .ralb-dots i {
					width: 11px;
					height: 11px;
					border-radius: 50%;
					display: block !important;
				}

				.ralb-root .ralb-dots i:nth-child(1) {
					background: #f0625a !important;
				}

				.ralb-root .ralb-dots i:nth-child(2) {
					background: #f5bd4f !important;
				}

				.ralb-root .ralb-dots i:nth-child(3) {
					background: #5cc663 !important;
				}

				.ralb-root .ralb-chrome-title {
					font-size: 12.5px;
					font-weight: 600 !important;
					color: var(--lb-soft) !important;
					margin-left: 6px;
				}

				.ralb-root .ralb-body {
					display: block !important;
					padding: 15px 16px 16px;
				}

				/* header */
				.ralb-root .ralb-head {
					display: flex !important;
					align-items: center;
					justify-content: space-between;
					gap: 12px;
					margin-bottom: 12px;
				}

				.ralb-root .ralb-title {
					display: flex !important;
					align-items: center;
					gap: 9px;
					font-size: 16px;
					font-weight: 700 !important;
					color: var(--lb-navy) !important;
					letter-spacing: -0.01em !important;
				}

				.ralb-root .ralb-trophy {
					width: 19px !important;
					height: 19px !important;
				}

				.ralb-root .ralb-tabs {
					display: flex !important;
					gap: 4px;
					border: 1px solid var(--lb-line) !important;
					border-radius: 8px;
					padding: 3px;
					background: var(--lb-surf-2) !important;
				}

				.ralb-root .ralb-tab {
					font-size: 11.5px;
					font-weight: 600 !important;
					color: var(--lb-soft) !important;
					padding: 5px 12px;
					border-radius: 6px;
				}

				.ralb-root .ralb-tab-on {
					color: var(--lb-navy) !important;
					background: var(--lb-surf) !important;
					box-shadow: 0 1px 3px rgba(3, 33, 61, .12);
				}

				/* time filters */
				.ralb-root .ralb-filters {
					display: flex !important;
					flex-wrap: wrap;
					gap: 7px;
					margin-bottom: 14px;
				}

				.ralb-root .ralb-filter {
					font-size: 11px;
					font-weight: 600 !important;
					color: var(--lb-soft) !important;
					border: 1px solid var(--lb-line) !important;
					border-radius: 16px;
					padding: 5px 12px;
					background: var(--lb-surf) !important;
				}

				.ralb-root .ralb-filter-on {
					color: var(--lb-blue) !important;
					background: #e8f0fb !important;
					border-color: #cfe0f6 !important;
				}

				/* podium */
				.ralb-root .ralb-podium {
					display: grid !important;
					grid-template-columns: 1fr 1fr;
					gap: 11px;
					margin-bottom: 15px;
				}

				.ralb-root .ralb-first {
					grid-column: 1 / -1 !important;
				}

				/* winner spans full width, row 1 */
				.ralb-root .ralb-pos {
					border: 1px solid var(--lb-line) !important;
					border-top: 3px solid var(--lb-line) !important;
					border-radius: 11px;
					padding: 12px 12px 13px;
					background: var(--lb-surf) !important;
				}

				.ralb-root .ralb-first {
					border-top-color: var(--lb-gold) !important;
					box-shadow: 0 6px 18px -10px rgba(224, 169, 46, .5);
				}

				.ralb-root .ralb-second {
					border-top-color: var(--lb-silver) !important;
				}

				.ralb-root .ralb-third {
					border-top-color: var(--lb-bronze) !important;
				}

				/* winner card: use the full width as a 2-column layout (identity | bars) */
				.ralb-root .ralb-first {
					display: grid !important;
					grid-template-columns: minmax(180px, 0.7fr) 1.3fr;
					column-gap: 22px;
					align-items: center;
				}

				.ralb-root .ralb-first .ralb-pos-top {
					display: block !important;
				}

				.ralb-root .ralb-first .ralb-medal {
					width: 42px;
					height: 42px;
					margin-bottom: 9px;
				}

				.ralb-root .ralb-first .ralb-medal svg {
					width: 24px !important;
					height: 24px !important;
				}

				.ralb-root .ralb-first .ralb-pos-id {
					margin-bottom: 2px;
				}

				.ralb-root .ralb-first .ralb-name {
					font-size: 16px;
					white-space: normal;
				}

				.ralb-root .ralb-first .ralb-totalwrap {
					text-align: left !important;
					margin-top: 6px;
				}

				.ralb-root .ralb-first .ralb-total {
					font-size: 30px;
					text-align: left !important;
				}

				.ralb-root .ralb-first .ralb-totallabel {
					text-align: left !important;
				}

				.ralb-root .ralb-first .ralb-bars {
					margin-top: 0 !important;
				}

				.ralb-root .ralb-pos-top {
					display: flex !important;
					align-items: center;
					gap: 9px;
				}

				.ralb-root .ralb-medal {
					width: 34px;
					height: 34px;
					flex: none;
					border-radius: 50%;
					display: inline-flex !important;
					align-items: center;
					justify-content: center;
				}

				.ralb-root .ralb-medal svg {
					width: 20px !important;
					height: 20px !important;
				}

				.ralb-root .ralb-medal-gold {
					background: var(--lb-gold) !important;
				}

				.ralb-root .ralb-medal-silver {
					background: var(--lb-silver) !important;
				}

				.ralb-root .ralb-medal-bronze {
					background: var(--lb-bronze) !important;
				}

				.ralb-root .ralb-pos-id {
					flex: 1;
					min-width: 0;
				}

				.ralb-root .ralb-place {
					font-size: 8.5px;
					font-weight: 800 !important;
					text-transform: uppercase !important;
					letter-spacing: 0.07em !important;
				}

				.ralb-root .ralb-place-gold {
					color: var(--lb-gold) !important;
				}

				.ralb-root .ralb-place-silver {
					color: var(--lb-silver) !important;
				}

				.ralb-root .ralb-place-bronze {
					color: var(--lb-bronze) !important;
				}

				.ralb-root .ralb-name {
					font-size: 13px;
					font-weight: 600 !important;
					color: var(--lb-navy) !important;
					line-height: 1.2 !important;
					margin-top: 1px;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}

				.ralb-root .ralb-totalwrap {
					text-align: right !important;
					flex: none;
				}

				.ralb-root .ralb-total {
					font-size: 22px;
					font-weight: 800 !important;
					color: var(--lb-blue) !important;
					line-height: 1 !important;
					text-align: right !important;
				}

				.ralb-root .ralb-totallabel {
					font-size: 8px;
					font-weight: 700 !important;
					text-transform: uppercase !important;
					letter-spacing: 0.07em !important;
					color: var(--lb-faint) !important;
					text-align: right !important;
					margin-top: 2px;
				}

				/* bars */
				.ralb-root .ralb-bars {
					margin-top: 12px;
					display: block !important;
				}

				.ralb-root .ralb-bar-row {
					display: block !important;
				}

				.ralb-root .ralb-bar-row+.ralb-bar-row {
					margin-top: 8px;
				}

				.ralb-root .ralb-bar-label {
					font-size: 10px;
					font-weight: 600 !important;
					color: var(--lb-soft) !important;
					display: block !important;
					margin-bottom: 3px;
				}

				.ralb-root .ralb-bar {
					height: 18px;
					border-radius: 5px;
					background: var(--lb-track) !important;
					overflow: hidden;
					display: block !important;
				}

				.ralb-root .ralb-bar-fill {
					height: 18px;
					border-radius: 5px;
					display: inline-flex !important;
					align-items: center;
					min-width: 22px;
					padding: 0 7px;
				}

				.ralb-root .ralb-bar-fill b {
					font-size: 10px;
					font-weight: 800 !important;
					color: #fff !important;
				}

				.ralb-root .ralb-fill-blue {
					background: var(--lb-bar-blue) !important;
				}

				.ralb-root .ralb-fill-green {
					background: var(--lb-bar-green) !important;
				}

				.ralb-root .ralb-fill-purple {
					background: var(--lb-bar-purple) !important;
				}

				/* ---- donut charts ---- */
				.ralb-root .ralb-charts {
					display: grid !important;
					grid-template-columns: 1fr 1fr;
					gap: 12px;
					padding-top: 14px;
					border-top: 1px solid var(--lb-line) !important;
				}

				.ralb-root .ralb-chart {
					border: 1px solid var(--lb-line) !important;
					border-radius: 11px;
					padding: 12px 13px 14px;
					background: var(--lb-surf) !important;
				}

				.ralb-root .ralb-chart-head {
					display: flex !important;
					align-items: center;
					justify-content: space-between;
				}

				.ralb-root .ralb-chart-title {
					font-size: 12.5px;
					font-weight: 700 !important;
					color: var(--lb-soft) !important;
				}

				.ralb-root .ralb-dl {
					width: 14px !important;
					height: 14px !important;
				}

				.ralb-root .ralb-chart-legend {
					display: flex !important;
					gap: 14px;
					margin: 9px 0 4px;
				}

				.ralb-root .ralb-chart-legend span {
					display: inline-flex !important;
					align-items: center;
					gap: 6px;
					font-size: 11px;
					font-weight: 600 !important;
					color: var(--lb-soft) !important;
				}

				.ralb-root .ralb-key {
					width: 9px;
					height: 9px;
					border-radius: 50%;
					display: inline-block !important;
				}

				.ralb-root .ralb-key-amber {
					background: #f0a92e !important;
				}

				.ralb-root .ralb-key-green {
					background: #1f9d57 !important;
				}

				.ralb-root .ralb-key-red {
					background: #d8232a !important;
				}

				.ralb-root .ralb-key-blue {
					background: #155fc8 !important;
				}

				.ralb-root .ralb-donut-wrap {
					display: flex !important;
					align-items: center;
					justify-content: center;
					gap: 14px;
					margin-top: 6px;
				}

				.ralb-root .ralb-donut {
					width: 108px !important;
					height: 108px !important;
					transform: rotate(-90deg);
				}

				.ralb-root .ralb-donut-pcts {
					display: flex !important;
					flex-direction: column;
					gap: 6px;
				}

				.ralb-root .ralb-pct {
					font-size: 13px;
					font-weight: 800 !important;
				}

				.ralb-root .ralb-pct-amber {
					color: #c8881a !important;
				}

				.ralb-root .ralb-pct-green {
					color: #1f9d57 !important;
				}

				.ralb-root .ralb-pct-red {
					color: #d8232a !important;
				}

				.ralb-root .ralb-pct-blue {
					color: #155fc8 !important;
				}

				/* ---- narrow fallback ---- */
				@media (max-width: 640px) {
					.ralb-root .ralb-podium {
						grid-template-columns: 1fr;
					}

					.ralb-root .ralb-charts {
						grid-template-columns: 1fr;
					}
				}

					/* ===========================================================================
   panel-outreach.css  —  RecruitApp.ai "Outreach" visual
   SELF-CONTAINED, scoped under .raor-root (raor- prefix). No core file.

   Outreach Apps list in the standard browser-chrome stage, with a phone frame
   overlapping the bottom-right corner showing the real branded Demo Police
   Department interest form. Card is overflow:visible so the phone isn't
   clipped (corner-overhang pattern per handoff).

   SVG-safe reset; layout-critical props !important; per-icon fills.
   =========================================================================== */

				@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap');

				.raor-root {
					--or-navy: #03213d;
					--or-navy-2: #0a2f52;
					--or-blue: #155fc8;
					--or-teal: #1db795;
					--or-ink: #1a2533;
					--or-soft: #5a6b7e;
					--or-faint: #8a98a8;
					--or-line: #e4e9f0;
					--or-line-2: #eef2f7;
					--or-surf: #ffffff;
					--or-surf-2: #f6f8fb;
					--or-green: #1f7a3d;
					--or-green-bg: #e6f6ee;
					--or-peach-tx: #c2603e;
					--or-peach-bg: #fdeee4;
					--or-req: #c0202a;
					--or-sans: 'Plus Jakarta Sans', ui-sans-serif, system-ui, sans-serif;
					--or-mono: 'JetBrains Mono', ui-monospace, monospace;
				}

				.raor-root,
				.raor-root *,
				.raor-root *::before,
				.raor-root *::after {
					box-sizing: border-box !important;
					margin: 0;
					padding: 0;
					border: 0;
					font-family: var(--or-sans) !important;
					font-weight: 400;
					font-style: normal;
					line-height: 1.4 !important;
					color: var(--or-ink) !important;
					letter-spacing: normal;
					text-transform: none;
					text-align: left;
					text-shadow: none;
					text-decoration: none;
					vertical-align: baseline;
					background: transparent;
					float: none;
				}

				.raor-root b,
				.raor-root strong {
					font-weight: 700;
				}

				.raor-root button {
					cursor: pointer;
				}

				.raor-root svg {
					display: block;
				}

				/* stage holds the card + the overlapping phone */
				.raor-root .raor-stage {
					position: relative !important;
					display: block !important;
					padding-right: 22px;
					padding-bottom: 30px;
				}

				.raor-root .raor-card {
					position: relative !important;
					display: block !important;
					width: 100%;
					background: var(--or-surf) !important;
					border: 1px solid var(--or-line) !important;
					border-radius: 16px;
					box-shadow: 0 18px 48px -20px rgba(3, 33, 61, .30), 0 2px 8px -2px rgba(3, 33, 61, .10);
					overflow: visible !important;
					/* don't clip the overhanging phone */
				}

				/* round the chrome's top corners since the card no longer clips */
				.raor-root .raor-chrome {
					display: flex !important;
					align-items: center;
					gap: 8px;
					padding: 12px 16px;
					background: var(--or-surf-2) !important;
					border-bottom: 1px solid var(--or-line) !important;
					border-radius: 16px 16px 0 0;
				}

				.raor-root .raor-dots {
					display: flex !important;
					gap: 7px;
				}

				.raor-root .raor-dots i {
					width: 11px;
					height: 11px;
					border-radius: 50%;
					display: block !important;
				}

				.raor-root .raor-dots i:nth-child(1) {
					background: #f0625a !important;
				}

				.raor-root .raor-dots i:nth-child(2) {
					background: #f5bd4f !important;
				}

				.raor-root .raor-dots i:nth-child(3) {
					background: #5cc663 !important;
				}

				.raor-root .raor-chrome-title {
					font-size: 12.5px;
					font-weight: 600 !important;
					color: var(--or-soft) !important;
					margin-left: 6px;
				}

				.raor-root .raor-body {
					display: block !important;
					padding: 14px 16px 16px;
				}

				.raor-root .raor-head {
					display: flex !important;
					align-items: center;
					gap: 9px;
					margin-bottom: 12px;
				}

				.raor-root .raor-head-ico {
					width: 18px !important;
					height: 18px !important;
					flex: none;
				}

				.raor-root .raor-head-title {
					font-size: 15px;
					font-weight: 700 !important;
					color: var(--or-navy) !important;
					letter-spacing: -0.01em !important;
				}

				/* apps list — full width; the phone overlaps these cards (not beside them) */
				.raor-root .raor-list {
					display: block !important;
					padding-right: 0;
				}

				.raor-root .raor-app {
					border: 1px solid var(--or-line) !important;
					border-left: 3px solid var(--or-blue) !important;
					border-radius: 10px;
					padding: 11px 13px;
					background: var(--or-surf) !important;
				}

				.raor-root .raor-app+.raor-app {
					margin-top: 9px;
				}

				.raor-root .raor-app-cat {
					font-size: 9.5px;
					font-weight: 700 !important;
					text-transform: uppercase !important;
					letter-spacing: 0.06em !important;
					color: var(--or-blue) !important;
				}

				.raor-root .raor-app-title {
					font-size: 14px;
					font-weight: 600 !important;
					color: var(--or-navy) !important;
					margin-top: 2px;
				}

				.raor-root .raor-app-meta {
					display: flex !important;
					align-items: center;
					flex-wrap: wrap;
					gap: 9px;
					margin-top: 7px;
				}

				.raor-root .raor-deploy {
					display: inline-flex !important;
					align-items: center;
					gap: 5px;
					font-size: 10.5px;
					font-weight: 700 !important;
					border-radius: 6px;
					padding: 3px 9px;
					border: 1px solid transparent !important;
				}

				.raor-root .raor-deploy svg {
					width: 12px !important;
					height: 12px !important;
				}

				.raor-root .raor-deploy-public {
					color: var(--or-green) !important;
					background: var(--or-green-bg) !important;
					border-color: #c6ead4 !important;
				}

				.raor-root .raor-deploy-private {
					color: var(--or-peach-tx) !important;
					background: var(--or-peach-bg) !important;
					border-color: #f6d8c6 !important;
				}

				.raor-root .raor-count {
					font-size: 11.5px;
					color: var(--or-soft) !important;
				}

				.raor-root .raor-count strong {
					color: var(--or-ink) !important;
					font-weight: 800 !important;
				}

				.raor-root .raor-app-fields {
					font-size: 11px;
					color: var(--or-soft) !important;
					margin-top: 7px;
				}

				.raor-root .raor-app-fields strong {
					color: var(--or-ink) !important;
					font-weight: 700 !important;
				}

				/* ---- overlapping phone ---- */
				.raor-root .raor-phone {
					position: absolute !important;
					right: 10px;
					bottom: -8px;
					width: 212px;
					background: #0c1626 !important;
					border-radius: 30px;
					padding: 11px 9px;
					box-shadow: 0 26px 56px -16px rgba(3, 33, 61, .6), 0 0 0 1px rgba(3, 33, 61, .06);
					z-index: 3 !important;
				}

				.raor-root .raor-phone-notch {
					position: absolute !important;
					top: 9px;
					left: 50%;
					transform: translateX(-50%);
					width: 56px;
					height: 5px;
					border-radius: 3px;
					background: #2a3850 !important;
					z-index: 2 !important;
				}

				.raor-root .raor-phone-screen {
					background: var(--or-surf) !important;
					border-radius: 21px;
					overflow: hidden;
				}

				/* form header (navy band + shield) */
				.raor-root .raor-form-head {
					background: linear-gradient(180deg, #0a3a63, #0a2f52) !important;
					padding: 18px 12px 12px;
					text-align: center !important;
				}

				.raor-root .raor-shield {
					width: 40px;
					height: 40px;
					margin: 0 auto 7px;
					background: #fff !important;
					border-radius: 9px;
					display: flex !important;
					align-items: center;
					justify-content: center;
				}

				.raor-root .raor-shield svg {
					width: 26px !important;
					height: 26px !important;
				}

				.raor-root .raor-form-dept {
					font-size: 11px;
					font-weight: 700 !important;
					color: #fff !important;
					text-align: center !important;
				}

				.raor-root .raor-form-body {
					padding: 11px 12px 13px;
				}

				.raor-root .raor-form-title {
					font-size: 12px;
					font-weight: 600 !important;
					color: var(--or-navy) !important;
					text-align: center !important;
					line-height: 1.25 !important;
				}

				.raor-root .raor-form-sub {
					font-size: 8.5px;
					color: var(--or-soft) !important;
					text-align: center !important;
					margin-top: 4px;
					line-height: 1.4 !important;
				}

				.raor-root .raor-field {
					margin-top: 9px;
				}

				.raor-root .raor-flabel {
					font-size: 9px;
					font-weight: 700 !important;
					color: var(--or-navy) !important;
				}

				.raor-root .raor-req {
					color: var(--or-req) !important;
					font-weight: 700 !important;
					font-style: italic;
				}

				.raor-root .raor-input {
					height: 18px;
					border: 1px solid var(--or-line) !important;
					border-radius: 5px;
					background: var(--or-surf-2) !important;
					margin-top: 3px;
					display: flex !important;
					align-items: center;
					justify-content: space-between;
					padding: 0 6px;
				}

				.raor-root .raor-input-date span {
					font-size: 8px;
					color: var(--or-faint) !important;
				}

				.raor-root .raor-input-date svg {
					width: 10px !important;
					height: 10px !important;
				}

				.raor-root .raor-fhint {
					font-size: 7.5px;
					color: var(--or-soft) !important;
					margin-top: 2px;
				}

				.raor-root .raor-consent {
					display: flex !important;
					align-items: flex-start;
					gap: 6px;
					margin-top: 11px;
				}

				.raor-root .raor-checkbox {
					width: 11px;
					height: 11px;
					flex: none;
					border: 1.4px solid #c3ccd6 !important;
					border-radius: 3px;
					background: #fff !important;
					margin-top: 1px;
				}

				.raor-root .raor-consent-text {
					font-size: 7.5px;
					color: var(--or-soft) !important;
					line-height: 1.35 !important;
				}

				.raor-root .raor-submit {
					margin-top: 11px;
					width: 100%;
					background: var(--or-navy-2) !important;
					color: #fff !important;
					font-size: 10px;
					font-weight: 700 !important;
					border-radius: 6px;
					padding: 8px 0;
					text-align: center !important;
				}

				/* ---- narrow fallback: phone drops below, stops overhanging ---- */
				@media (max-width: 560px) {
					.raor-root .raor-stage {
						padding-right: 0;
						padding-bottom: 0;
					}

					.raor-root .raor-list {
						padding-right: 0;
					}

					.raor-root .raor-phone {
						position: static !important;
						margin: 14px auto 0;
					}
				}