:root {
	--device-card-bg: rgba(25, 25, 25, .67);
	--device-card-badge: #389FFF;
	--device-card-tool: #97CDEE;
	--device-card-radius: 12px;

	--device-card-score-rest: rgba(255, 255, 255, .16);
}

html[data-bs-theme="light"] {
	--device-card-bg: rgba(221, 221, 221, 0.67);
	--device-card-badge: #389FFF;
	--device-card-tool: #97CDEE;
	--device-card-radius: 12px;

	--device-card-score-rest: rgba(255, 255, 255, .16);
}

a.device-card {
	width: 100%;
	max-width: 560px;
	min-height: 90px;
	aspect-ratio: 284 / 47;
	color: rgba(255, 255, 255.8);
	text-decoration: none;
	background: linear-gradient(135deg, rgb(25 25 25/ 78%), rgba(25, 25, 25, .4));
	border-radius: var(--device-card-radius);
	overflow: hidden;
	position: relative;
	padding: 5px 22px 5px 50px;
	margin-bottom: 10px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.device-card .corner-badge {
	position: absolute;
	top: 0;
	left: 0;
	width: 38px;
	height: 38px;
	background: var(--device-card-badge);
	border-bottom-right-radius: clamp(8px, 1.6vw, 12px);
	display: grid;
	place-items: center;
}

.device-card .corner-badge i {
	color: #000;
	font-size: 1.3rem;
}

.device-title {
	font-weight: 400;
	font-size: 1.7rem;
	line-height: 1.05;
	margin-top: 0px;
}

.metric-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: clamp(10px, 2vw, 10px);
}

.metric {
	display: flex;
	align-items: center;
	gap: clamp(10px, 2vw, 16px);
	min-width: 0;
}

/* ---- SCORE PIP (pie-fill) ----
	- Solid fill (no highlight/overlay gradient)
	- Color transitions: red(0) -> BRIGHT yellow(~50) -> green(100)
	- IMPORTANT: score input is 0..99, but we map 99 => 100% fill
*/
@property --score {
	syntax: "<number>";
	inherits: true;
	initial-value: 0;
}

@property --score-color {
	syntax: "<color>";
	inherits: true;
	initial-value: rgb(255, 0, 0);
}

.score-pip {
	--score: 0;
	/* 0..100 (fill percent) */
	--score-color: rgb(255, 0, 0);

	width: 35px;
	height: 35px;
	border-radius: 999px;
	flex: 0 0 auto;
	position: relative;

	background:
		conic-gradient(from 0deg,
			var(--score-color) calc(var(--score) * 1%),
			var(--device-card-score-rest) 0);

	transition:
		--score 650ms cubic-bezier(.2, .8, .2, 1),
		--score-color 650ms cubic-bezier(.2, .8, .2, 1);
}

.tool-icon {
	width: 38px;
	height: 38px;
	margin-bottom: 13px;
}

.tool-icon i {
	color: var(--device-card-tool);
	font-size: 2rem;
}

.metric-value {
	font-weight: 700;
	line-height: 1.0;
	font-size: 1.2rem;
	white-space: nowrap;
}

.metric-label {
	opacity: .95;
	font-weight: 400;
	font-size: 0.8rem;
	margin-top: 1px;
	white-space: nowrap;
}

.metric-text {
	line-height: 1.05;
}