.fair-role-practice,
.fair-my-roles,
.fair-bio-login {
	--fair-bio-navy: #111c3c;
	--fair-bio-blue: #347fc3;
	--fair-bio-blue-soft: #e9f3fc;
	--fair-bio-green: #079b66;
	--fair-bio-red: #c83f4e;
	--fair-bio-red-soft: #fff0f2;
	--fair-bio-bg: #f3f7fc;
	--fair-bio-surface: #ffffff;
	--fair-bio-line: #dbe4ef;
	--fair-bio-muted: #65708a;
	--fair-bio-shadow: rgba(17, 28, 60, 0.1);
	box-sizing: border-box;
	width: 100%;
	color: var(--fair-bio-navy);
	font-family: "Polin", sans-serif;
}

.fair-role-practice *,
.fair-my-roles *,
.fair-bio-login * {
	box-sizing: border-box;
}

.fair-role-practice button,
.fair-role-practice input,
.fair-role-practice textarea {
	font: inherit;
}

.fair-role-practice {
	overflow: hidden;
	border: 1px solid var(--fair-bio-line);
	border-radius: 28px;
	background: radial-gradient(circle at 94% 7%, rgba(52, 127, 195, 0.13), transparent 28%), var(--fair-bio-bg);
	box-shadow: 0 18px 48px var(--fair-bio-shadow);
}

.fair-role-practice__topbar {
	position: sticky;
	top: 0;
	z-index: 5;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	padding: 20px 28px;
	border-bottom: 1px solid var(--fair-bio-line);
	background: rgba(255, 255, 255, 0.96);
	backdrop-filter: blur(12px);
}

.fair-role-practice__breadcrumbs {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 7px;
	color: var(--fair-bio-muted);
}

.fair-role-practice__breadcrumbs a {
	color: var(--fair-bio-muted);
	text-decoration: none;
}

.fair-role-practice__breadcrumbs a:hover,
.fair-role-practice__breadcrumbs a:focus-visible {
	color: var(--fair-bio-blue);
	text-decoration: underline;
}

.fair-role-practice__top-actions {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 10px;
}

.fair-role-practice__new-role,
.fair-role-practice__my-roles,
.fair-bio-primary-action {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 10px 18px;
	border: 1px solid var(--fair-bio-blue);
	border-radius: 999px;
	background: var(--fair-bio-surface);
	color: var(--fair-bio-blue);
	font-weight: 500;
	text-decoration: none;
	white-space: nowrap;
}

.fair-role-practice__new-role {
	border-color: var(--fair-bio-green);
	background: var(--fair-bio-green);
	color: #ffffff;
}

.fair-role-practice__new-role:hover,
.fair-role-practice__new-role:focus-visible {
	background: #067e55;
	color: #ffffff;
}

.fair-role-practice__my-roles:hover,
.fair-role-practice__my-roles:focus-visible {
	background: var(--fair-bio-blue);
	color: #ffffff;
}

.fair-role-practice__field.has-error input {
	border-color: var(--fair-bio-red);
	background: var(--fair-bio-red-soft);
	outline: 3px solid rgba(200, 63, 78, 0.13);
}

.fair-role-practice__form {
	max-width: 980px;
	margin: 0 auto;
	padding: 48px 28px 70px;
}

.fair-role-practice__heading {
	margin-bottom: 28px;
	text-align: center;
}

.fair-role-practice__heading h1 {
	margin: 0 0 10px;
	color: var(--fair-bio-navy);
	font-size: clamp(30px, 5vw, 48px);
	font-weight: 500;
}

.fair-role-practice__heading p {
	margin: 0;
	color: var(--fair-bio-muted);
}

.fair-role-practice__progress {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 24px;
	padding: 14px 18px;
	border: 1px solid var(--fair-bio-line);
	border-radius: 16px;
	background: var(--fair-bio-surface);
	color: var(--fair-bio-muted);
}

.fair-role-practice__progress strong {
	color: var(--fair-bio-blue);
	font-weight: 500;
}

.fair-role-practice__section-title {
	margin: 34px 0 14px;
	color: var(--fair-bio-navy);
	font-size: 25px;
	font-weight: 500;
}

.fair-role-practice__details {
	margin-bottom: 12px;
	border: 1px solid var(--fair-bio-line);
	border-radius: 18px;
	background: var(--fair-bio-surface);
	box-shadow: 0 8px 22px var(--fair-bio-shadow);
}

.fair-role-practice__details[open] {
	border-color: rgba(52, 127, 195, 0.55);
}

.fair-role-practice__details summary {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 18px 20px;
	color: var(--fair-bio-navy);
	cursor: pointer;
	font-weight: 500;
	list-style: none;
}

.fair-role-practice__details summary::-webkit-details-marker {
	display: none;
}

.fair-role-practice__details summary > span:nth-child(2) {
	flex: 1;
	padding-top: 4px;
}

.fair-role-practice__letter {
	display: grid;
	flex: 0 0 auto;
	place-items: center;
	width: 34px;
	height: 34px;
	border-radius: 11px;
	background: var(--fair-bio-blue-soft);
	color: var(--fair-bio-blue);
}

.fair-role-practice__chevron {
	flex: 0 0 auto;
	margin-top: 7px;
	color: var(--fair-bio-blue);
	transition: transform 160ms ease;
}

.fair-role-practice__details[open] .fair-role-practice__chevron {
	transform: rotate(180deg);
}

.fair-role-practice__panel {
	padding: 0 20px 22px;
}

.fair-role-practice__fields {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 18px;
}

.fair-role-practice__field {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.fair-role-practice__field--wide {
	grid-column: 1 / -1;
}

.fair-role-practice__field label {
	color: var(--fair-bio-navy);
	font-weight: 500;
}

.fair-role-practice input,
.fair-role-practice textarea {
	width: 100%;
	border: 1px solid var(--fair-bio-line);
	border-radius: 13px;
	background: var(--fair-bio-bg);
	color: var(--fair-bio-navy);
}

.fair-role-practice input {
	min-height: 46px;
	padding: 10px 12px;
}

.fair-role-practice textarea {
	min-height: 145px;
	padding: 14px;
	resize: vertical;
}

.fair-role-practice input:focus,
.fair-role-practice textarea:focus {
	border-color: var(--fair-bio-blue);
	outline: 3px solid rgba(52, 127, 195, 0.18);
}

.fair-role-practice__counter-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-top: 9px;
	color: var(--fair-bio-muted);
}

.fair-role-practice__counter-info {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 12px;
}

.fair-role-practice__complete {
	min-height: 34px !important;
	padding: 6px 13px !important;
	border: 1px solid var(--fair-bio-blue) !important;
	border-radius: 999px !important;
	background: var(--fair-bio-surface) !important;
	color: var(--fair-bio-blue) !important;
	cursor: pointer;
	font-size: 14px !important;
	font-weight: 500 !important;
	line-height: 1.2 !important;
}

.fair-role-practice__complete[aria-pressed="true"] {
	background: var(--fair-bio-blue) !important;
	color: #ffffff !important;
}

.fair-role-practice__question.is-complete {
	border-color: var(--fair-bio-blue);
	background: var(--fair-bio-blue-soft);
	box-shadow: 0 8px 24px rgba(52, 127, 195, 0.18);
}

.fair-role-practice__question.is-complete .fair-role-practice__panel,
.fair-role-practice__question.is-complete summary {
	background: transparent;
}

.fair-role-practice__warning {
	color: var(--fair-bio-red);
	font-weight: 500;
}

.fair-role-practice__warning[hidden] {
	display: none;
}

.fair-role-practice__question.is-over-limit textarea {
	border-color: var(--fair-bio-red);
	background: var(--fair-bio-red-soft);
}

.fair-role-practice__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 12px;
	margin-top: 34px;
}

.fair-role-practice__save,
.fair-role-practice__save-and-go {
	min-height: 48px;
	padding: 12px 24px;
	border-radius: 999px;
	cursor: pointer;
	font-weight: 500;
}

.fair-role-practice__save {
	border: 1px solid var(--fair-bio-green) !important;
	background: var(--fair-bio-green) !important;
	color: #ffffff !important;
}

.fair-role-practice__save-and-go {
	border: 1px solid var(--fair-bio-blue) !important;
	background: var(--fair-bio-blue) !important;
	color: #ffffff !important;
}

.fair-role-practice__save:hover,
.fair-role-practice__save:focus-visible {
	background: #067e55 !important;
}

.fair-role-practice__save-and-go:hover,
.fair-role-practice__save-and-go:focus-visible {
	background: #286aa7 !important;
}

.fair-role-practice__save:disabled,
.fair-role-practice__save-and-go:disabled {
	cursor: wait;
	opacity: 0.65;
}

.fair-role-practice__save-status {
	min-height: 26px;
	margin-top: 14px;
	color: var(--fair-bio-green);
	text-align: center;
	font-weight: 500;
}

.fair-role-practice__save-status.is-error {
	color: var(--fair-bio-red);
}

.fair-my-roles {
	min-height: 470px;
	padding: 58px 32px;
	border: 1px solid var(--fair-bio-line);
	border-radius: 28px;
	background: radial-gradient(circle at 94% 7%, rgba(52, 127, 195, 0.13), transparent 28%), var(--fair-bio-bg);
}

.fair-my-roles__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	max-width: 1120px;
	margin: 0 auto 34px;
}

.fair-my-roles__top h1 {
	margin: 0 0 8px;
	color: var(--fair-bio-navy);
	font-size: clamp(30px, 5vw, 48px);
	font-weight: 500;
}

.fair-my-roles__top p {
	margin: 0;
	color: var(--fair-bio-muted);
}

.fair-my-roles__top-note {
	margin-top: 8px !important;
	font-size: 15px;
}

.fair-my-roles__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 20px;
	max-width: 1120px;
	margin: 0 auto;
}

.fair-my-roles__item {
	position: relative;
	min-height: 245px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 26px 20px;
	border: 1px solid var(--fair-bio-line);
	border-radius: 22px;
	background: var(--fair-bio-surface);
	text-align: center;
	box-shadow: 0 12px 30px var(--fair-bio-shadow);
}

.fair-my-roles__item::before {
	content: "";
	position: absolute;
	inset: 0 0 auto;
	height: 7px;
	border-radius: 22px 22px 0 0;
	background: var(--fair-bio-blue);
}

.fair-my-roles__item-actions {
	position: absolute;
	top: 17px;
	right: 15px;
	z-index: 2;
	display: flex;
	align-items: center;
	gap: 6px;
}

.fair-my-roles__star,
.fair-my-roles__delete {
	display: grid !important;
	place-items: center;
	width: 34px !important;
	height: 34px !important;
	min-width: 34px !important;
	min-height: 34px !important;
	padding: 0 !important;
	border: 1px solid var(--fair-bio-line) !important;
	border-radius: 50% !important;
	background: #ffffff !important;
	cursor: pointer;
	font-family: Arial, sans-serif !important;
	font-size: 21px !important;
	line-height: 1 !important;
}

.fair-my-roles__star {
	color: #a9b0c0 !important;
}

.fair-my-roles__star[aria-pressed="true"] {
	border-color: #e7b224 !important;
	background: #fff8df !important;
	color: #e2a900 !important;
}

.fair-my-roles__delete {
	color: var(--fair-bio-red) !important;
}

.fair-my-roles__star:hover,
.fair-my-roles__star:focus-visible,
.fair-my-roles__delete:hover,
.fair-my-roles__delete:focus-visible {
	transform: translateY(-1px);
	box-shadow: 0 5px 14px var(--fair-bio-shadow);
}

.fair-my-roles__icon {
	display: grid;
	place-items: center;
	width: 56px;
	height: 56px;
	border-radius: 17px;
	background: var(--fair-bio-blue-soft);
	color: var(--fair-bio-blue);
	font-size: 25px;
}

.fair-my-roles__item h2 {
	margin: 0;
	color: var(--fair-bio-navy);
	font-size: 22px;
	font-weight: 500;
}

.fair-my-roles__item p,
.fair-my-roles__item small {
	margin: 0;
	color: var(--fair-bio-muted);
}

.fair-my-roles__item a {
	margin-top: 8px;
	color: var(--fair-bio-blue);
	font-weight: 500;
}

.fair-my-roles__empty,
.fair-bio-login {
	max-width: 700px;
	margin: 40px auto;
	padding: 44px 24px;
	border: 1px solid var(--fair-bio-line);
	border-radius: 24px;
	background: var(--fair-bio-surface);
	text-align: center;
}

.fair-my-roles__empty h2,
.fair-bio-login h2 {
	margin: 0 0 20px;
	color: var(--fair-bio-navy);
	font-weight: 500;
}

.fair-module-dashboard {
	--fair-module-accent: var(--fair-bio-blue);
	min-height: 470px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 30px;
	padding: 62px 28px;
}

.fair-module-dashboard--orange {
	--fair-module-accent: #edaa23;
}

.fair-module-dashboard--purple {
	--fair-module-accent: #7747aa;
}

.fair-module-dashboard__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 20px;
	width: 100%;
	max-width: 1120px;
}

.fair-module-dashboard--orange .fair-module-dashboard__grid,
.fair-module-dashboard--purple .fair-module-dashboard__grid {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	max-width: 820px;
}

.fair-module-dashboard__card {
	position: relative;
	min-height: 245px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 18px;
	padding: 30px 22px;
	border: 1px solid var(--fair-bio-line);
	border-radius: 24px;
	background: #ffffff;
	color: var(--fair-bio-navy);
	text-align: center;
	text-decoration: none !important;
	box-shadow: 0 12px 30px var(--fair-bio-shadow);
	transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

.fair-module-dashboard__card::before {
	content: "";
	position: absolute;
	inset: 0 0 auto;
	height: 7px;
	border-radius: 24px 24px 0 0;
	background: var(--fair-module-accent);
}

.fair-module-dashboard__card:hover,
.fair-module-dashboard__card:focus-visible {
	transform: translateY(-5px);
	border-color: var(--fair-module-accent);
	box-shadow: 0 18px 38px rgba(17, 28, 60, 0.14);
}

.fair-module-dashboard__icon {
	display: grid;
	place-items: center;
	width: 68px;
	height: 68px;
	border-radius: 20px;
	background: color-mix(in srgb, var(--fair-module-accent) 13%, white);
	color: var(--fair-module-accent);
	font-size: 30px;
}

.fair-module-dashboard__title {
	color: var(--fair-bio-navy);
	font-size: clamp(21px, 2vw, 25px);
	font-weight: 500;
}

.fair-module-dashboard__back {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 10px 18px;
	border: 1px solid var(--fair-bio-green);
	border-radius: 999px;
	background: #ffffff;
	color: var(--fair-bio-green);
	font-weight: 500;
	text-decoration: none !important;
}

.fair-module-dashboard__back:hover,
.fair-module-dashboard__back:focus-visible {
	background: var(--fair-bio-green);
	color: #ffffff;
}

.fair-main-dashboard {
	min-height: 520px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 66px 30px;
	background:
		radial-gradient(circle at 95% 8%, rgba(52, 127, 195, 0.15), transparent 29%),
		radial-gradient(circle at 5% 92%, rgba(7, 155, 102, 0.09), transparent 27%),
		var(--fair-bio-bg);
}

.fair-main-dashboard__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 22px;
	width: 100%;
	max-width: 1120px;
}

.fair-main-dashboard__card {
	--fair-main-accent: var(--fair-bio-blue);
	position: relative;
	min-height: 285px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 22px;
	padding: 34px 24px;
	overflow: hidden;
	border: 1px solid var(--fair-bio-line);
	border-radius: 26px;
	background: #ffffff;
	color: var(--fair-bio-navy);
	text-align: center;
	text-decoration: none !important;
	box-shadow: 0 14px 34px var(--fair-bio-shadow);
	transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

.fair-main-dashboard__card::before {
	content: "";
	position: absolute;
	inset: 0 0 auto;
	height: 8px;
	background: var(--fair-main-accent);
}

.fair-main-dashboard__card--orange {
	--fair-main-accent: #edaa23;
}

.fair-main-dashboard__card--purple {
	--fair-main-accent: #7747aa;
}

.fair-main-dashboard__card:hover,
.fair-main-dashboard__card:focus-visible {
	transform: translateY(-6px);
	border-color: var(--fair-main-accent);
	box-shadow: 0 20px 42px rgba(17, 28, 60, 0.16);
}

.fair-main-dashboard__icon {
	display: grid;
	place-items: center;
	width: 76px;
	height: 76px;
	border-radius: 22px;
	background: color-mix(in srgb, var(--fair-main-accent) 13%, white);
	color: var(--fair-main-accent);
	font-size: 34px;
	line-height: 1;
}

.fair-main-dashboard__title {
	color: var(--fair-bio-navy);
	font-size: clamp(23px, 2.1vw, 28px);
	font-weight: 500;
	line-height: 1.35;
}

@media (max-width: 850px) {
	.fair-my-roles__grid,
	.fair-main-dashboard__grid,
	.fair-module-dashboard__grid,
	.fair-module-dashboard--orange .fair-module-dashboard__grid,
	.fair-module-dashboard--purple .fair-module-dashboard__grid {
		grid-template-columns: 1fr;
		max-width: 560px;
	}

	.fair-main-dashboard {
		padding: 42px 18px;
	}
}

@media (max-width: 700px) {
	.fair-role-practice__topbar,
	.fair-my-roles__top {
		align-items: stretch;
		flex-direction: column;
	}

	.fair-role-practice__topbar {
		padding: 16px;
	}

	.fair-role-practice__top-actions {
		width: 100%;
		align-items: stretch;
		flex-direction: column;
	}

	.fair-role-practice__new-role,
	.fair-role-practice__my-roles,
	.fair-my-roles__top .fair-bio-primary-action {
		width: 100%;
	}

	.fair-role-practice__form {
		padding: 34px 16px 52px;
	}

	.fair-role-practice__fields {
		grid-template-columns: 1fr;
	}

	.fair-role-practice__field--wide {
		grid-column: auto;
	}

	.fair-role-practice__progress,
	.fair-role-practice__counter-row,
	.fair-role-practice__counter-info {
		align-items: flex-start;
		flex-direction: column;
	}

	.fair-role-practice__details summary {
		padding: 16px;
	}

	.fair-role-practice__panel {
		padding: 0 16px 18px;
	}

	.fair-my-roles {
		padding: 38px 16px;
	}
}

/* Fair product UI refresh - 2026 */
.fair-role-practice,
.fair-my-roles,
.fair-bio-login {
	--fair-bio-navy: #101b3b;
	--fair-bio-blue: #2f7fc4;
	--fair-bio-blue-soft: #eef6fd;
	--fair-bio-green: #009b68;
	--fair-bio-green-dark: #007f56;
	--fair-bio-red: #bd3949;
	--fair-bio-red-soft: #fff2f4;
	--fair-bio-bg: #f7f9fc;
	--fair-bio-surface: #ffffff;
	--fair-bio-line: #e2e8f1;
	--fair-bio-line-strong: #cdd7e5;
	--fair-bio-muted: #68738a;
	--fair-bio-shadow: rgba(16, 27, 59, 0.07);
	font-family: "Polin", sans-serif !important;
	font-size: 16px;
	line-height: 1.55;
}

.fair-role-practice {
	overflow: visible;
	border: 0;
	border-radius: 24px;
	background: var(--fair-bio-bg);
	box-shadow: none;
}

.fair-role-practice a,
.fair-my-roles a,
.fair-bio-login a,
.fair-role-practice button,
.fair-my-roles button {
	transition: color 160ms ease, background-color 160ms ease, border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.fair-role-practice :focus-visible,
.fair-my-roles :focus-visible,
.fair-bio-login :focus-visible {
	outline: 3px solid rgba(0, 155, 104, 0.22);
	outline-offset: 3px;
}

.fair-role-practice__topbar {
	top: 12px;
	z-index: 12;
	min-height: 64px;
	padding: 12px 20px;
	border: 1px solid rgba(226, 232, 241, 0.92);
	border-radius: 18px;
	background: rgba(255, 255, 255, 0.94);
	box-shadow: 0 10px 28px rgba(16, 27, 59, 0.07);
}

.fair-role-practice__breadcrumbs {
	gap: 6px;
	font-size: 14px;
}

.fair-role-practice__breadcrumbs a {
	color: #546079;
	font-weight: 500;
}

.fair-role-practice__top-actions {
	gap: 8px;
}

.fair-role-practice__new-role,
.fair-role-practice__my-roles,
.fair-bio-primary-action {
	min-height: 40px;
	padding: 8px 16px;
	border-color: var(--fair-bio-line-strong);
	border-radius: 12px;
	font-size: 14px;
	font-weight: 600;
	box-shadow: none;
}

.fair-role-practice__new-role {
	border-color: var(--fair-bio-green);
	background: var(--fair-bio-green);
}

.fair-role-practice__new-role:hover,
.fair-role-practice__new-role:focus-visible {
	background: var(--fair-bio-green-dark);
	box-shadow: 0 7px 18px rgba(0, 155, 104, 0.2);
}

.fair-role-practice__my-roles {
	background: #ffffff;
	color: var(--fair-bio-navy);
}

.fair-role-practice__my-roles:hover,
.fair-role-practice__my-roles:focus-visible {
	border-color: var(--fair-bio-blue);
	background: var(--fair-bio-blue-soft);
	color: var(--fair-bio-blue);
}

.fair-role-practice__form {
	max-width: 1000px;
	padding: 46px 24px 64px;
}

.fair-role-practice__heading {
	max-width: 700px;
	margin: 0 auto 30px;
}

.fair-role-practice__heading h1 {
	margin-bottom: 8px;
	font-size: clamp(32px, 4vw, 44px);
	font-weight: 650;
	letter-spacing: -0.025em;
	line-height: 1.2;
}

.fair-role-practice__heading p {
	font-size: 16px;
}

.fair-role-practice__progress {
	margin-bottom: 30px;
	padding: 15px 18px;
	border-color: var(--fair-bio-line);
	border-radius: 14px;
	box-shadow: 0 5px 16px rgba(16, 27, 59, 0.035);
}

.fair-role-practice__progress::before {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--fair-bio-green);
	box-shadow: 0 0 0 5px rgba(0, 155, 104, 0.1);
}

.fair-role-practice__progress > span:first-child {
	margin-inline-end: auto;
	font-weight: 500;
}

.fair-role-practice__section-title {
	margin: 34px 0 12px;
	font-size: 24px;
	font-weight: 650;
	letter-spacing: -0.015em;
}

.fair-role-practice__details {
	margin-bottom: 10px;
	border-color: var(--fair-bio-line);
	border-radius: 16px;
	box-shadow: none;
	transition: border-color 160ms ease, box-shadow 160ms ease, background-color 160ms ease;
}

.fair-role-practice__details[open] {
	border-color: rgba(47, 127, 196, 0.46);
	box-shadow: 0 10px 26px rgba(16, 27, 59, 0.055);
}

.fair-role-practice__details summary {
	align-items: center;
	padding: 16px 18px;
	font-weight: 550;
}

.fair-role-practice__details summary > span:nth-child(2) {
	padding-top: 0;
}

.fair-role-practice__letter {
	width: 32px;
	height: 32px;
	border-radius: 10px;
	font-size: 15px;
	font-weight: 650;
}

.fair-role-practice__chevron {
	margin-top: 0;
}

.fair-role-practice__panel {
	padding: 2px 18px 20px;
}

.fair-role-practice__fields {
	gap: 16px;
}

.fair-role-practice__field {
	gap: 7px;
}

.fair-role-practice__field label {
	font-size: 15px;
	font-weight: 550;
}

.fair-role-practice input,
.fair-role-practice textarea {
	border-color: var(--fair-bio-line-strong);
	border-radius: 11px;
	background: #ffffff;
	box-shadow: inset 0 1px 2px rgba(16, 27, 59, 0.025);
}

.fair-role-practice input {
	min-height: 48px;
	padding: 10px 13px;
}

.fair-role-practice textarea {
	min-height: 150px;
	padding: 13px 14px;
	line-height: 1.65;
}

.fair-role-practice input::placeholder,
.fair-role-practice textarea::placeholder {
	color: #99a2b4;
}

.fair-role-practice input:focus,
.fair-role-practice textarea:focus {
	border-color: var(--fair-bio-blue);
	background: #ffffff;
	outline: 3px solid rgba(47, 127, 196, 0.12);
}

.fair-role-practice__counter-row {
	margin-top: 10px;
	font-size: 14px;
}

.fair-role-practice__complete {
	min-height: 32px !important;
	padding: 5px 12px !important;
	border-color: var(--fair-bio-line-strong) !important;
	border-radius: 10px !important;
	color: #536078 !important;
	font-weight: 550 !important;
}

.fair-role-practice__complete:hover,
.fair-role-practice__complete:focus-visible {
	border-color: var(--fair-bio-blue) !important;
	background: var(--fair-bio-blue-soft) !important;
	color: var(--fair-bio-blue) !important;
}

.fair-role-practice__complete[aria-pressed="true"] {
	border-color: var(--fair-bio-green) !important;
	background: var(--fair-bio-green) !important;
	color: #ffffff !important;
}

.fair-role-practice__question.is-complete {
	border-color: rgba(0, 155, 104, 0.4);
	background: #f1fbf7;
	box-shadow: none;
}

.fair-role-practice__question.is-complete .fair-role-practice__letter {
	background: var(--fair-bio-green);
	color: #ffffff;
}

.fair-role-practice__actions {
	position: sticky;
	bottom: 14px;
	z-index: 8;
	margin: 34px auto 0;
	padding: 11px;
	border: 1px solid rgba(226, 232, 241, 0.9);
	border-radius: 16px;
	background: rgba(255, 255, 255, 0.94);
	box-shadow: 0 14px 36px rgba(16, 27, 59, 0.12);
	backdrop-filter: blur(12px);
}

.fair-role-practice__save,
.fair-role-practice__save-and-go {
	min-height: 44px;
	padding: 9px 20px;
	border-radius: 11px;
	font-weight: 600;
}

.fair-role-practice__save {
	border-color: var(--fair-bio-line-strong) !important;
	background: #ffffff !important;
	color: var(--fair-bio-navy) !important;
}

.fair-role-practice__save:hover,
.fair-role-practice__save:focus-visible {
	border-color: var(--fair-bio-blue) !important;
	background: var(--fair-bio-blue-soft) !important;
	color: var(--fair-bio-blue) !important;
}

.fair-role-practice__save-and-go {
	border-color: var(--fair-bio-green) !important;
	background: var(--fair-bio-green) !important;
	color: #ffffff !important;
}

.fair-role-practice__save-and-go:hover,
.fair-role-practice__save-and-go:focus-visible {
	background: var(--fair-bio-green-dark) !important;
	box-shadow: 0 7px 18px rgba(0, 155, 104, 0.2);
}

.fair-my-roles {
	min-height: 430px;
	padding: 48px 28px 60px;
	border: 0;
	border-radius: 24px;
	background: var(--fair-bio-bg);
}

.fair-my-roles__top {
	align-items: flex-end;
	margin-bottom: 26px;
}

.fair-my-roles__top h1 {
	font-size: clamp(32px, 4vw, 44px);
	font-weight: 650;
	letter-spacing: -0.025em;
}

.fair-my-roles__grid {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
}

.fair-my-roles__grid:has(> :only-child) {
	grid-template-columns: minmax(0, 560px);
	justify-content: center;
}

.fair-my-roles__item {
	min-height: 210px;
	align-items: flex-start;
	justify-content: flex-start;
	gap: 8px;
	padding: 25px 24px 22px;
	border-radius: 18px;
	text-align: right;
	box-shadow: 0 7px 22px rgba(16, 27, 59, 0.055);
}

.fair-my-roles__item::before {
	inset: 0;
	width: 5px;
	height: auto;
	border-radius: 0 18px 18px 0;
}

.fair-my-roles__item-actions {
	top: 16px;
	right: auto;
	left: 16px;
}

.fair-my-roles__star,
.fair-my-roles__delete {
	width: 32px !important;
	height: 32px !important;
	min-width: 32px !important;
	min-height: 32px !important;
	border-radius: 10px !important;
	font-size: 19px !important;
}

.fair-my-roles__icon {
	width: 42px;
	height: 42px;
	margin-bottom: 2px;
	border-radius: 12px;
	font-size: 19px;
}

.fair-my-roles__item h2 {
	max-width: calc(100% - 74px);
	font-size: 21px;
	font-weight: 600;
}

.fair-my-roles__item a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 38px;
	margin-top: auto;
	padding: 7px 14px;
	border: 1px solid var(--fair-bio-line-strong);
	border-radius: 10px;
	background: #ffffff;
	color: var(--fair-bio-navy);
	text-decoration: none;
}

.fair-my-roles__item a:hover,
.fair-my-roles__item a:focus-visible {
	border-color: var(--fair-bio-blue);
	background: var(--fair-bio-blue-soft);
	color: var(--fair-bio-blue);
}

.fair-module-dashboard,
.fair-main-dashboard {
	min-height: 380px;
	padding: 44px 28px;
	background: var(--fair-bio-bg);
}

.fair-main-dashboard__grid,
.fair-module-dashboard__grid {
	gap: 16px;
	max-width: 1080px;
}

.fair-module-dashboard--orange .fair-module-dashboard__grid,
.fair-module-dashboard--purple .fair-module-dashboard__grid {
	max-width: 820px;
}

.fair-main-dashboard__card,
.fair-module-dashboard__card {
	min-height: 220px;
	gap: 16px;
	padding: 28px 22px;
	border-color: var(--fair-bio-line);
	border-radius: 20px;
	box-shadow: 0 8px 24px rgba(16, 27, 59, 0.06);
}

.fair-main-dashboard__card::before,
.fair-module-dashboard__card::before {
	inset: 0;
	width: 5px;
	height: auto;
	border-radius: 0 20px 20px 0;
}

.fair-main-dashboard__card:hover,
.fair-main-dashboard__card:focus-visible,
.fair-module-dashboard__card:hover,
.fair-module-dashboard__card:focus-visible {
	transform: translateY(-3px);
	box-shadow: 0 15px 32px rgba(16, 27, 59, 0.1);
}

.fair-main-dashboard__icon,
.fair-module-dashboard__icon {
	width: 58px;
	height: 58px;
	border-radius: 16px;
	font-size: 25px;
}

.fair-main-dashboard__title,
.fair-module-dashboard__title {
	font-size: clamp(21px, 2vw, 25px);
	font-weight: 600;
	letter-spacing: -0.01em;
}

.fair-module-dashboard__back {
	min-height: 40px;
	padding: 8px 16px;
	border-color: var(--fair-bio-line-strong);
	border-radius: 11px;
	color: var(--fair-bio-navy);
}

.fair-module-dashboard__back:hover,
.fair-module-dashboard__back:focus-visible {
	border-color: var(--fair-bio-green);
	background: #eefaf5;
	color: var(--fair-bio-green-dark);
}

@media (max-width: 850px) {
	.fair-my-roles__grid {
		grid-template-columns: 1fr;
	}

	.fair-main-dashboard__grid,
	.fair-module-dashboard__grid,
	.fair-module-dashboard--orange .fair-module-dashboard__grid,
	.fair-module-dashboard--purple .fair-module-dashboard__grid {
		max-width: 600px;
	}
}

@media (max-width: 700px) {
	.fair-role-practice,
	.fair-my-roles {
		border-radius: 18px;
	}

	.fair-role-practice__topbar {
		position: relative;
		top: auto;
		gap: 12px;
		padding: 14px;
		border-radius: 14px;
	}

	.fair-role-practice__top-actions {
		display: grid;
		grid-template-columns: 1fr;
	}

	.fair-role-practice__new-role,
	.fair-role-practice__my-roles {
		width: 100%;
		white-space: normal;
		text-align: center;
	}

	.fair-role-practice__form {
		padding: 32px 14px 48px;
	}

	.fair-role-practice__heading h1,
	.fair-my-roles__top h1 {
		font-size: 31px;
	}

	.fair-role-practice__progress::before {
		display: none;
	}

	.fair-role-practice__actions {
		bottom: 8px;
		display: grid;
		grid-template-columns: 1fr;
	}

	.fair-role-practice__actions button {
		width: 100%;
	}

	.fair-my-roles {
		padding: 34px 14px 48px;
	}

	.fair-main-dashboard,
	.fair-module-dashboard {
		min-height: 0;
		padding: 34px 14px;
	}

	.fair-main-dashboard__card,
	.fair-module-dashboard__card {
		min-height: 165px;
		padding: 24px 18px;
	}
}

/* Existing AI assistant page - aligned with the Fair product UI */
.elementor-12669 {
	--fair-ai-navy: #101b3b;
	--fair-ai-purple: #7447a8;
	--fair-ai-purple-dark: #5d358b;
	--fair-ai-purple-soft: #f5effa;
	--fair-ai-green: #009b68;
	--fair-ai-green-dark: #007f56;
	--fair-ai-bg: #f7f9fc;
	--fair-ai-line: #e2e8f1;
	--fair-ai-line-strong: #cdd7e5;
	--fair-ai-muted: #68738a;
	background: var(--fair-ai-bg);
	color: var(--fair-ai-navy);
	font-family: "Polin", sans-serif !important;
}

.elementor-12669 *,
.elementor-12669 button,
.elementor-12669 input,
.elementor-12669 textarea {
	font-family: inherit !important;
	box-sizing: border-box;
}

.elementor-12669 .elementor-element-91f98f4 > .e-con-inner {
	max-width: 1040px;
	padding: 44px 24px 64px;
}

.elementor-12669 .elementor-heading-title {
	margin: 0 0 26px;
	color: var(--fair-ai-navy) !important;
	font-size: clamp(32px, 4vw, 44px) !important;
	font-weight: 650 !important;
	letter-spacing: -0.025em;
	line-height: 1.2 !important;
	text-align: center;
}

.elementor-12669 .e-n-tabs {
	width: 100%;
}

.elementor-12669 .e-n-tabs-heading {
	display: grid !important;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 7px !important;
	padding: 6px;
	border: 1px solid var(--fair-ai-line);
	border-radius: 16px;
	background: #ffffff;
	box-shadow: 0 7px 22px rgba(16, 27, 59, 0.05);
}

.elementor-12669 .e-n-tab-title {
	min-height: 48px;
	justify-content: center;
	padding: 9px 14px !important;
	border: 0 !important;
	border-radius: 11px !important;
	background: transparent !important;
	color: var(--fair-ai-muted) !important;
	font-size: 15px !important;
	font-weight: 600 !important;
	text-align: center;
}

.elementor-12669 .e-n-tab-title:hover,
.elementor-12669 .e-n-tab-title:focus-visible {
	background: var(--fair-ai-purple-soft) !important;
	color: var(--fair-ai-purple-dark) !important;
}

.elementor-12669 .e-n-tab-title[aria-selected="true"] {
	background: var(--fair-ai-purple) !important;
	color: #ffffff !important;
	box-shadow: 0 7px 18px rgba(116, 71, 168, 0.2);
}

.elementor-12669 .e-n-tabs-content {
	margin-top: 14px;
}

.elementor-12669 [role="tabpanel"] {
	min-height: 360px;
	padding: 28px !important;
	border: 1px solid var(--fair-ai-line);
	border-radius: 18px;
	background: #ffffff !important;
	box-shadow: 0 8px 26px rgba(16, 27, 59, 0.055);
}

.elementor-12669 [role="tabpanel"] p {
	margin-bottom: 16px;
	color: #35405a;
	font-size: 16px;
	line-height: 1.8;
}

.elementor-12669 [role="tabpanel"] p:last-child {
	margin-bottom: 0;
}

.elementor-12669 .bioq-wrapper {
	max-width: 820px !important;
	margin: 0 auto !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
}

.elementor-12669 .bioq-header {
	padding: 20px !important;
	border: 1px solid rgba(116, 71, 168, 0.18) !important;
	border-radius: 15px !important;
	background: var(--fair-ai-purple-soft) !important;
	text-align: center;
}

.elementor-12669 .bioq-header h3 {
	margin: 0 0 5px !important;
	color: var(--fair-ai-navy) !important;
	font-size: 23px !important;
	font-weight: 650 !important;
}

.elementor-12669 .bioq-header p {
	margin: 0 !important;
	color: var(--fair-ai-muted) !important;
	font-size: 14px !important;
}

.elementor-12669 .bioq-messages {
	min-height: 240px !important;
	margin: 14px 0 !important;
	padding: 18px !important;
	border: 1px solid var(--fair-ai-line) !important;
	border-radius: 15px !important;
	background: #fafbfd !important;
}

.elementor-12669 .bioq-starters {
	display: flex !important;
	flex-wrap: wrap;
	gap: 8px !important;
	margin: 0 0 12px !important;
}

.elementor-12669 .bioq-starter-btn {
	min-height: 38px !important;
	padding: 7px 13px !important;
	border: 1px solid var(--fair-ai-line-strong) !important;
	border-radius: 10px !important;
	background: #ffffff !important;
	color: var(--fair-ai-navy) !important;
	font-size: 14px !important;
	font-weight: 550 !important;
}

.elementor-12669 .bioq-starter-btn:hover,
.elementor-12669 .bioq-starter-btn:focus-visible {
	border-color: var(--fair-ai-purple) !important;
	background: var(--fair-ai-purple-soft) !important;
	color: var(--fair-ai-purple-dark) !important;
}

.elementor-12669 .bioq-input-area {
	margin: 0 0 10px !important;
}

.elementor-12669 #bioq-user-input {
	width: 100% !important;
	min-height: 130px !important;
	padding: 14px !important;
	border: 1px solid var(--fair-ai-line-strong) !important;
	border-radius: 12px !important;
	background: #ffffff !important;
	color: var(--fair-ai-navy) !important;
	font-size: 16px !important;
	line-height: 1.65 !important;
	resize: vertical;
}

.elementor-12669 #bioq-user-input:focus {
	border-color: var(--fair-ai-purple) !important;
	outline: 3px solid rgba(116, 71, 168, 0.12) !important;
}

.elementor-12669 .bioq-send-btn-full {
	width: auto !important;
	min-width: 150px;
	min-height: 44px !important;
	padding: 9px 22px !important;
	border: 1px solid var(--fair-ai-green) !important;
	border-radius: 11px !important;
	background: var(--fair-ai-green) !important;
	color: #ffffff !important;
	font-size: 16px !important;
	font-weight: 600 !important;
}

.elementor-12669 .bioq-send-btn-full:hover,
.elementor-12669 .bioq-send-btn-full:focus-visible {
	border-color: var(--fair-ai-green-dark) !important;
	background: var(--fair-ai-green-dark) !important;
	box-shadow: 0 7px 18px rgba(0, 155, 104, 0.2);
}

@media (max-width: 700px) {
	.elementor-12669 .elementor-element-91f98f4 > .e-con-inner {
		padding: 32px 14px 48px;
	}

	.elementor-12669 .elementor-heading-title {
		margin-bottom: 20px;
		font-size: 30px !important;
	}

	.elementor-12669 .e-n-tabs-heading {
		grid-template-columns: 1fr;
	}

	.elementor-12669 .e-n-tab-title {
		min-height: 42px;
	}

	.elementor-12669 [role="tabpanel"] {
		min-height: 0;
		padding: 18px !important;
	}

	.elementor-12669 .bioq-starter-btn,
	.elementor-12669 .bioq-send-btn-full {
		width: 100% !important;
	}
}