[hidden] {
	display: none !important;
}
:root {
	font-family: "Space Grotesk", "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	color-scheme: dark;
	--card-bg: rgba(15, 15, 25, 0.7);
	--border: rgba(255, 255, 255, 0.15);
	--accent: linear-gradient(120deg, #ff2d55, #7c5dff, #2dfff0);
	--accent-solid: #ff2d55;
}
* {
	box-sizing: border-box;
}
body {
	margin: 0;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	padding: 0;
	background: radial-gradient(circle at 20% 20%, #1f1147, #09090f) fixed;
	color: #f8f9fb;
}
.page {
	flex: 1;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1.5rem;
}
main {
	position: relative;
	width: min(460px, 94vw);
	padding: 2.75rem 2.35rem 2.35rem;
	background: var(--card-bg);
	border-radius: 32px;
	border: 1px solid var(--border);
	box-shadow: 0 25px 65px rgba(0, 0, 0, 0.5);
	display: flex;
	flex-direction: column;
	gap: 1.35rem;
}
.site-footer {
	margin-top: auto;
	width: 100%;
	text-align: center;
	font-size: 0.85rem;
	padding: 0.75rem 1rem calc(0.75rem + env(safe-area-inset-bottom, 0px));
	background: rgba(9, 9, 15, 0.28);
	border-top: 1px solid rgba(255, 255, 255, 0.06);
	color: #6b6b6b !important;
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
}
h1 {
	margin: 0;
	font-size: clamp(2.2rem, 6vw, 2.9rem);
	letter-spacing: 0.05em;
	background: var(--accent);
	background-clip: text;
	-webkit-background-clip: text;
	color: transparent;
}
p {
	margin: 0;
	color: rgba(255, 255, 255, 0.82);
	line-height: 1.5;
}
button {
	width: 100%;
	padding: 1rem 1.2rem;
	border-radius: 999px;
	font: inherit;
	font-weight: 600;
	border: none;
	cursor: pointer;
	transition: transform 0.2s ease, opacity 0.2s ease;
}
header {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}
header h1 {
	flex: 1;
}
button:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}
button:not(:disabled):active {
	transform: translateY(1px);
}
.accent-button {
	background: var(--accent);
	color: #0b0b0f;
}

#nextCardButton {
	background: var(--accent) !important;
	color: #0b0b0f !important;
}
#logoutButton {
	position: absolute;
	top: 1.3rem;
	right: 1.3rem;
	width: auto;
	padding: 0.55rem 1.25rem;
	background: transparent;
	border: 1px solid rgba(255, 255, 255, 0.3);
	color: rgba(255, 255, 255, 0.9);
	text-transform: uppercase;
	letter-spacing: 0.05em;
}
.status-chip {
	padding: 0.6rem 1rem;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.08);
	font-size: 0.95rem;
	text-align: center;
}
#tokenHint {
	color: #ffd166;
	font-size: 0.9rem;
}
.view {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}
.scan-card,
.result-card {
	padding: 1rem 0 0.25rem;
	display: flex;
	flex-direction: column;
	gap: 1rem;
}
#scannerView video {
	width: 100%;
	border-radius: 20px;
	background: #000;
	min-height: 260px;
	object-fit: cover;
	border: 2px dashed rgba(255, 255, 255, 0.12);
	margin-top: 0.35rem;
}
#scannerView canvas {
	display: none;
}
.muted {
	color: rgba(255, 255, 255, 0.7);
	font-size: 0.95rem;
	margin: 0;
}
.note-stage {
	min-height: 220px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.music-note {
	font-size: clamp(16rem, 20vw, 7rem);
	line-height: 1;
	display: inline-block;
	animation: groove 1.4s ease-in-out infinite alternate;
	filter: drop-shadow(0 8px 24px rgba(0, 0, 0, 0.45));
	color: #f8f9fb;
}
.music-note.note-playing {
	color: #7c5dff;
	animation-duration: 1.1s;
}
.music-note.note-paused {
	animation-play-state: paused;
	opacity: 0.6;
}
.music-note.note-error {
	color: #ff6b6b;
	animation: shake 0.35s ease-in-out infinite;
}
@keyframes groove {
	0% {
		transform: translate(-14px, 4px) rotate(-9deg) scale(0.93);
	}
	22% {
		transform: translate(6px, -16px) rotate(11deg) scale(1.1);
	}
	45% {
		transform: translate(-4px, 8px) rotate(-5deg) scale(0.99);
	}
	68% {
		transform: translate(14px, -6px) rotate(6deg) scale(1.06);
	}
	100% {
		transform: translate(-10px, 14px) rotate(-7deg) scale(1.01);
	}
}
@keyframes shake {
	0% {
		transform: translate(-12px, -2px) rotate(-7deg);
	}
	30% {
		transform: translate(11px, 6px) rotate(5deg);
	}
	55% {
		transform: translate(-6px, -8px) rotate(-4deg);
	}
	80% {
		transform: translate(13px, 2px) rotate(7deg);
	}
	100% {
		transform: translate(-9px, 5px) rotate(-6deg);
	}
}