:root {
	/* Level colors (user requested defaults) */
	--k5-prediction-color-0: #5497FE;
	--k5-prediction-color-1: #A48FE3;
	--k5-prediction-color-2: #DFD91E;
	--k5-prediction-color-3: #DF7913;
	--k5-prediction-color-4: #DF1E1E;

	--k5-prediction-surface: #354253;
	--k5-prediction-border: rgba(255, 255, 255, 0.0);
	--k5-prediction-text: rgba(2, 0, 0, 0.92);
	--k5-prediction-muted: rgba(255, 255, 255, 0.55);

	--k5-prediction-dot: #202020;
	--k5-prediction-brackets: #202020;
	--k5-prediction-bar: #414141;
	/* confidence inactive */
}

html[data-bs-theme="light"] {
	--k5-prediction-color-0: #285aa7;
	--k5-prediction-color-1: #644ea5;
	--k5-prediction-color-2: #86820e;
	--k5-prediction-color-3: #83470b;
	--k5-prediction-color-4: #850a0a;

	--k5-prediction-surface: #90a7c5;
	--k5-prediction-border: rgba(255, 255, 255, 0.0);
	--k5-prediction-text: rgba(255, 255, 255, 0.92);
	--k5-prediction-muted: rgba(255, 255, 255, 0.55);

	--k5-prediction-dot: #8f8f8f;
	--k5-prediction-brackets: #8f8f8f;
	--k5-prediction-bar: #414141;
}

.k5-prediction-card {
	--k5-prediction-accent: var(--k5-prediction-color-0);

	background: var(--k5-prediction-surface);
	border: 1px solid var(--k5-prediction-border);
	border-radius: .75rem;
	padding: .8rem;
	width: 100%;
	max-width: 220px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

/* Map prediction level -> accent (changeable via vars above) */
.k5-prediction-card[data-prediction-level="0"] {
	--k5-prediction-accent: var(--k5-prediction-color-0);
}

.k5-prediction-card[data-prediction-level="1"] {
	--k5-prediction-accent: var(--k5-prediction-color-1);
}

.k5-prediction-card[data-prediction-level="2"] {
	--k5-prediction-accent: var(--k5-prediction-color-2);
}

.k5-prediction-card[data-prediction-level="3"] {
	--k5-prediction-accent: var(--k5-prediction-color-3);
}

.k5-prediction-card[data-prediction-level="4"] {
	--k5-prediction-accent: var(--k5-prediction-color-4);
}




.k5-prediction-title {
	color: var(--k5p-title);
	font-weight: 400;
	line-height: 0.6rem;
	font-size: 1rem;
	letter-spacing: .1px;
}

.k5-prediction-row {
	margin: 10px 0 5px 0;
	gap: .2rem !important;
	align-items: flex-start !important;
	justify-content: space-between !important;
	display: flex !important;
}

.k5-prediction-dot-track {
	position: relative;
	display: flex;
	align-items: center;
	gap: 0.25rem;
	padding: 0 0.8rem;
	margin-top: .12rem;
	margin-bottom: .2rem;
}

.k5-prediction-dot-track::before,
.k5-prediction-dot-track::after {
	content: "";
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: .55rem;
	height: 1.9rem;
	border-top: 3px solid var(--k5-prediction-brackets);
	border-bottom: 3px solid var(--k5-prediction-brackets);
}

.k5-prediction-dot-track::before {
	left: 0;
	border-left: 3px solid var(--k5-prediction-brackets);
	border-radius: .35rem 0 0 .35rem;
}

.k5-prediction-dot-track::after {
	right: 0;
	border-right: 3px solid var(--k5-prediction-brackets);
	border-radius: 0 .35rem .35rem 0;
}

.k5-prediction-dot {
	width: 1.7rem;
	aspect-ratio: 1 / 1;
	border-radius: 50%;
	background: var(--k5-prediction-dot);
	flex: 0 0 auto;
}

.k5-prediction-dot.is-active {
	background: var(--k5-prediction-accent);
	transform: scale(1.05);
	opacity: 1;
}

.k5-prediction-ok {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	min-width: calc((1.7rem * 4) + (0.25rem * 3) + (0.8rem * 2));
	height: 1.9rem;
	padding: 0 0.8rem;
	margin-bottom: 2px;
	border-radius: .35rem;
	background: var(--k5-prediction-color-0);
}

.k5-prediction-ok .bi {
	color: #ffffff;
	font-size: 1.35rem;
	line-height: 1;
}

.k5-is-hidden { display: none !important; }

.k5-prediction-confidence {
	flex: 0 0 auto;
	border-radius: 8px;
	overflow: hidden;
}

.k5-prediction-bar {
	background: var(--k5-prediction-bar);
	transition: fill 180ms ease;
}

.k5-prediction-pill-row {
	text-align: center;
}

.k5-prediction-pill {
	border-radius: 999px;
	padding: 0.05rem 1rem;
	min-width: 150px;
	color: var(--k5-prediction-text);
	font-size: 0.9rem;
	font-weight: 500;

	display: inline-flex;
	align-items: center;
	justify-content: center;

	border: 1px solid var(--k5-prediction-accent);
	background-color: var(--k5-prediction-accent);

	/* Subtle tinted background (safe everywhere) */
	/* background: rgba(255, 255, 255, 0.04); */
	cursor: default;
}