/**
 * AP Canvas Fingerprint module styles (scoped).
 */

.ap-canvas-fingerprint {
	--ap-cf-bg: #0b0f14;
	--ap-cf-surface: #121821;
	--ap-cf-border: #1f2a36;
	--ap-cf-text: #d8e2ee;
	--ap-cf-muted: #8aa0b5;
	--ap-cf-accent: #00e5ff;
	--ap-cf-accent-2: #00ff94;
	--ap-cf-danger: #ff4d6d;
	--ap-cf-shadow: 0 16px 42px rgba(0, 0, 0, 0.45);

	max-width: 760px;
	margin: 1.5rem auto;
}

.ap-cf-card {
	background:
		radial-gradient(circle at 8% 12%, rgba(0, 229, 255, 0.09), transparent 36%),
		radial-gradient(circle at 92% 90%, rgba(0, 255, 148, 0.08), transparent 36%),
		var(--ap-cf-surface);
	border: 1px solid var(--ap-cf-border);
	border-radius: 14px;
	padding: clamp(1rem, 2.8vw, 1.5rem);
	color: var(--ap-cf-text);
	box-shadow: var(--ap-cf-shadow);
}

.ap-cf-title {
	margin: 0 0 0.4rem;
	font-size: clamp(1.2rem, 2.6vw, 1.45rem);
	letter-spacing: 0.01em;
	color: #e9f5ff;
}

.ap-cf-subtitle {
	margin: 0 0 1rem;
	color: var(--ap-cf-muted);
	line-height: 1.45;
	font-size: 0.95rem;
}

.ap-cf-hidden-canvas {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
}

.ap-cf-result-wrap {
	border: 1px solid rgba(0, 229, 255, 0.2);
	border-radius: 10px;
	background: linear-gradient(180deg, rgba(7, 12, 18, 0.95), rgba(9, 14, 20, 0.95));
	padding: 0.85rem 0.95rem;
	margin-bottom: 1rem;
}

.ap-cf-label {
	display: block;
	font-size: 0.78rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--ap-cf-muted);
	margin-bottom: 0.4rem;
}

.ap-cf-hash {
	display: block;
	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
	font-size: clamp(1.1rem, 3vw, 1.35rem);
	font-weight: 700;
	letter-spacing: 0.08em;
	word-break: break-all;
	color: var(--ap-cf-accent);
	text-shadow: 0 0 10px rgba(0, 229, 255, 0.35);
}

.ap-cf-button {
	appearance: none;
	border: 1px solid rgba(0, 255, 148, 0.55);
	border-radius: 10px;
	background: linear-gradient(135deg, rgba(0, 255, 148, 0.2), rgba(0, 229, 255, 0.16));
	color: #e7fff5;
	font-weight: 600;
	padding: 0.62rem 1rem;
	cursor: pointer;
	transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.ap-cf-button:hover {
	transform: translateY(-1px);
	box-shadow: 0 8px 22px rgba(0, 255, 148, 0.18);
	border-color: var(--ap-cf-accent-2);
}

.ap-cf-button:active {
	transform: translateY(0);
}

.ap-cf-button:focus-visible {
	outline: 2px solid var(--ap-cf-accent);
	outline-offset: 2px;
}