/* Typing test styles - refined darker theme */
:root {
	--text: #eaf2ff;
	--muted: #a9b7d1;
	--accent: #7c3aed;
	--accent-2: #9b5cfb;
	--outline: rgba(255,255,255,.10);
	--surface: rgba(10, 14, 28, .70);
	--surface-2: rgba(15, 20, 38, .65);
}

html, body { height: 100%; }
body {
	margin: 0;
	font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", "Helvetica Neue", sans-serif;
	color: var(--text);
	background:
		radial-gradient(1200px 600px at 20% 10%, rgba(255,255,255,0.06), transparent 60%),
		radial-gradient(900px 500px at 90% 10%, rgba(124,58,237,.08), transparent 60%),
		linear-gradient(135deg, #11172b, #1a2141 60%, #121426);
	background-attachment: fixed;
}

.wrap {
	width: min(980px, 94%);
	margin: 0 auto;
	padding: 24px 0 40px;
}

.topbar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
	margin-bottom: 14px;
}

.timer, .stats {
	display: inline-flex;
	gap: 12px;
	align-items: center;
	background: var(--surface-2);
	border: 1px solid var(--outline);
	border-radius: 12px;
	padding: 8px 12px;
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
}

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 10px 14px;
	border-radius: 10px;
	border: 1px solid transparent;
	color: white;
	font-weight: 800;
	background: linear-gradient(135deg, var(--accent), var(--accent-2));
	cursor: pointer;
	transition: transform .06s ease, box-shadow .15s ease, opacity .15s ease;
	box-shadow: 0 6px 18px rgba(124,58,237,.25);
}
.btn:hover { opacity: .95; box-shadow: 0 8px 22px rgba(124,58,237,.32); }
.btn:active { transform: translateY(1px); box-shadow: 0 4px 12px rgba(124,58,237,.24); }

.card {
	background: var(--surface);
	border: 1px solid var(--outline);
	border-radius: 16px;
	padding: 16px;
	box-shadow: 0 18px 36px rgba(5,8,20,.48);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
}

.prompt {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
	line-height: 1.8;
	font-size: clamp(14px, 2.4vw, 17px);
	min-height: 140px;
	user-select: none;
}

.good { color: #a8f5bf; }
.bad { color: #b45309; text-decoration: underline; text-decoration-thickness: 2px; }
.current { background: rgba(124,58,237,.28); color: #ffffff; border-radius: 4px; }

.input-area { margin-top: 12px; }

textarea {
	width: 100%;
	min-height: 120px;
	padding: 12px;
	border-radius: 12px;
	border: 1px solid var(--outline);
	background: rgba(255,255,255,.04);
	color: var(--text);
	resize: vertical;
	outline: none;
	box-shadow: inset 0 2px 6px rgba(0,0,0,.25);
	transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
textarea::placeholder { color: rgba(234,242,255,.6); }
textarea:focus {
	border-color: rgba(124,58,237,.55);
	box-shadow: 0 0 0 3px rgba(124,58,237,.18), inset 0 2px 6px rgba(0,0,0,.25);
	background: rgba(255,255,255,.06);
}

.muted { color: var(--muted); }

.result {
	display: none;
	margin-top: 14px;
	background: var(--surface-2);
	border: 1px solid var(--outline);
	border-radius: 12px;
	padding: 12px;
	box-shadow: 0 10px 22px rgba(5,8,20,.35);
}

.topbar .btn { border-color: rgba(255,255,255,.06); }
.topbar a.btn { text-decoration: none; }

@media (max-width: 640px) {
	.topbar { flex-direction: column; align-items: stretch; gap: 8px; }
	.timer, .stats { width: 100%; justify-content: space-between; }
}