/* ==========================================================================
   10-Key Typing Test — Frontend Styles
   ========================================================================== */

.ttk-widget {
	--ttk-primary: #2563eb;
	--ttk-primary-dark: #1d4ed8;
	--ttk-bg: #f8fafc;
	--ttk-panel: #ffffff;
	--ttk-border: #e2e8f0;
	--ttk-text: #0f172a;
	--ttk-muted: #64748b;
	--ttk-correct: #16a34a;
	--ttk-correct-bg: #dcfce7;
	--ttk-error: #dc2626;
	--ttk-error-bg: #fee2e2;
	--ttk-current-bg: #fef08a;

	box-sizing: border-box;
	max-width: 880px;
	margin: 2em auto;
	padding: 1.75em;
	background: var(--ttk-bg);
	border: 1px solid var(--ttk-border);
	border-radius: 14px;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	color: var(--ttk-text);
}
.ttk-widget *, .ttk-widget *::before, .ttk-widget *::after { box-sizing: border-box; }

.ttk-header .ttk-title { margin: 0 0 0.25em; font-size: 1.5em; font-weight: 700; }
.ttk-header .ttk-subtitle { margin: 0 0 1.25em; color: var(--ttk-muted); font-size: 0.95em; line-height: 1.5; }

/* Controls */
.ttk-controls {
	display: flex;
	flex-wrap: wrap;
	align-items: end;
	gap: 0.85em;
	background: var(--ttk-panel);
	border: 1px solid var(--ttk-border);
	border-radius: 10px;
	padding: 1em;
	margin-bottom: 1em;
}
.ttk-control { display: flex; flex-direction: column; gap: 0.3em; font-size: 0.82em; font-weight: 600; color: var(--ttk-muted); }
.ttk-control select {
	padding: 0.5em 0.6em;
	border: 1px solid var(--ttk-border);
	border-radius: 8px;
	font-size: 0.95em;
	background: #fff;
	color: var(--ttk-text);
}
.ttk-toggle { flex-direction: row; align-items: center; gap: 0.5em; font-weight: 500; }
.ttk-toggle input { width: 16px; height: 16px; accent-color: var(--ttk-primary); }

.ttk-btn {
	padding: 0.65em 1.25em;
	border: none;
	border-radius: 8px;
	background: var(--ttk-primary);
	color: #fff;
	font-weight: 600;
	font-size: 0.95em;
	cursor: pointer;
	transition: background 0.15s ease, transform 0.1s ease;
}
.ttk-btn:hover:not(:disabled) { background: var(--ttk-primary-dark); }
.ttk-btn:active:not(:disabled) { transform: translateY(1px); }
.ttk-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.ttk-btn-secondary { background: #fff; color: var(--ttk-text); border: 1px solid var(--ttk-border); }
.ttk-btn-secondary:hover:not(:disabled) { background: #f1f5f9; }
.ttk-btn-text { background: none; color: var(--ttk-primary); padding: 0.3em 0.5em; font-size: 0.85em; }
.ttk-btn-text:hover { background: none; text-decoration: underline; }

/* Stats bar */
.ttk-stats {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 0.75em;
	margin-bottom: 1em;
}
.ttk-stat {
	background: var(--ttk-panel);
	border: 1px solid var(--ttk-border);
	border-radius: 10px;
	padding: 0.75em;
	text-align: center;
}
.ttk-stat-label { display: block; font-size: 0.72em; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ttk-muted); margin-bottom: 0.25em; }
.ttk-stat-value { display: block; font-size: 1.35em; font-weight: 700; font-variant-numeric: tabular-nums; }

.ttk-warning {
	background: #fffbeb;
	border: 1px solid #fbbf24;
	color: #92400e;
	padding: 0.65em 1em;
	border-radius: 8px;
	font-size: 0.9em;
	margin-bottom: 1em;
}

/* Typing display */
.ttk-display-wrap { position: relative; margin-bottom: 1em; }
.ttk-display {
	background: var(--ttk-panel);
	border: 2px solid var(--ttk-border);
	border-radius: 10px;
	padding: 1.25em 1.4em;
	font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
	font-size: 1.5em;
	letter-spacing: 0.04em;
	line-height: 1.9;
	max-height: 6.6em;
	overflow: hidden;
	word-break: break-all;
	white-space: pre-wrap;
	cursor: text;
	user-select: none;
}
.ttk-display.is-active { border-color: var(--ttk-primary); }
.ttk-display .ttk-placeholder { color: var(--ttk-muted); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; font-size: 0.62em; letter-spacing: normal; }
.ttk-display .ttk-group { margin-right: 0.6em; display: inline-block; }
.ttk-char { padding: 0 1px; border-radius: 3px; color: var(--ttk-muted); }
.ttk-char.ttk-correct { color: var(--ttk-correct); background: var(--ttk-correct-bg); }
.ttk-char.ttk-incorrect { color: var(--ttk-error); background: var(--ttk-error-bg); text-decoration: underline wavy var(--ttk-error); }
.ttk-char.ttk-current { background: var(--ttk-current-bg); border-radius: 3px; outline: 2px solid #eab308; }
.ttk-hidden-input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }

/* Virtual keypad */
.ttk-keypad-wrap { display: flex; justify-content: center; margin-bottom: 1em; }
.ttk-keypad {
	display: grid;
	grid-template-columns: repeat(4, 60px);
	grid-auto-rows: 52px;
	gap: 6px;
	background: var(--ttk-panel);
	border: 1px solid var(--ttk-border);
	border-radius: 10px;
	padding: 12px;
}
.ttk-key {
	border: 1px solid var(--ttk-border);
	background: #f8fafc;
	border-radius: 8px;
	font-size: 1.05em;
	font-weight: 600;
	cursor: pointer;
	color: var(--ttk-text);
	transition: transform 0.08s ease, background 0.15s ease;
}
.ttk-key:hover { background: #eef2ff; }
.ttk-key:disabled, .ttk-key-lock { opacity: 0.4; cursor: not-allowed; }
.ttk-key:disabled:hover { background: #f8fafc; }
.ttk-control select:disabled { opacity: 0.6; cursor: not-allowed; }
.ttk-key:active, .ttk-key.ttk-pressed { transform: scale(0.94); background: var(--ttk-primary); color: #fff; }
.ttk-key.ttk-next-key { box-shadow: 0 0 0 3px var(--ttk-primary) inset; background: #eef2ff; }
.ttk-key-zero { grid-column: span 2; }
.ttk-key-plus, .ttk-key-enter { grid-row: span 2; }
.ttk-key-empty { visibility: hidden; }

/* Finger color coding (index/middle/ring/thumb) */
.ttk-widget.ttk-finger-guide-on .ttk-key[data-finger="index"] { border-top: 3px solid #3b82f6; }
.ttk-widget.ttk-finger-guide-on .ttk-key[data-finger="middle"] { border-top: 3px solid #10b981; }
.ttk-widget.ttk-finger-guide-on .ttk-key[data-finger="ring"] { border-top: 3px solid #f59e0b; }
.ttk-widget.ttk-finger-guide-on .ttk-key[data-finger="thumb"] { border-top: 3px solid #ec4899; }
.ttk-widget.ttk-finger-guide-on .ttk-key[data-finger="pinky"] { border-top: 3px solid #8b5cf6; }
.ttk-finger-legend { display: none; flex-wrap: wrap; gap: 0.9em; justify-content: center; font-size: 0.78em; color: var(--ttk-muted); margin: -0.4em 0 1em; }
.ttk-widget.ttk-finger-guide-on .ttk-finger-legend { display: flex; }
.ttk-finger-legend span { display: inline-flex; align-items: center; gap: 0.35em; }
.ttk-finger-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.ttk-finger-dot.index { background: #3b82f6; }
.ttk-finger-dot.middle { background: #10b981; }
.ttk-finger-dot.ring { background: #f59e0b; }
.ttk-finger-dot.thumb { background: #ec4899; }
.ttk-finger-dot.pinky { background: #8b5cf6; }

/* Results */
.ttk-results { background: var(--ttk-panel); border: 1px solid var(--ttk-border); border-radius: 10px; padding: 1.25em; margin-bottom: 1em; }
.ttk-results h4 { margin: 0 0 1em; font-size: 1.15em; }
.ttk-results-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.75em; margin-bottom: 1em; }
.ttk-result-box { background: var(--ttk-bg); border: 1px solid var(--ttk-border); border-radius: 8px; padding: 0.75em; text-align: center; }
.ttk-result-primary { background: color-mix(in srgb, var(--ttk-primary) 10%, white); border-color: var(--ttk-primary); }
.ttk-result-label { display: block; font-size: 0.72em; color: var(--ttk-muted); text-transform: uppercase; letter-spacing: 0.03em; margin-bottom: 0.2em; }
.ttk-result-value { display: block; font-size: 1.3em; font-weight: 700; }
.ttk-benchmark { display: flex; align-items: center; gap: 0.9em; background: var(--ttk-bg); border: 1px dashed var(--ttk-border); border-radius: 8px; padding: 0.85em 1em; margin-bottom: 1em; }
.ttk-benchmark-badge { flex-shrink: 0; padding: 0.4em 0.9em; border-radius: 999px; background: var(--ttk-primary); color: #fff; font-weight: 700; font-size: 0.85em; white-space: nowrap; }
.ttk-benchmark-desc { margin: 0; font-size: 0.9em; color: var(--ttk-muted); }

/* History */
.ttk-history { background: var(--ttk-panel); border: 1px solid var(--ttk-border); border-radius: 10px; padding: 1.25em; margin-bottom: 1em; }
.ttk-history-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.75em; flex-wrap: wrap; gap: 0.5em; }
.ttk-history-head h4 { margin: 0; font-size: 1.05em; }
.ttk-history-note { font-weight: 400; font-size: 0.8em; color: var(--ttk-muted); }
.ttk-history-table-wrap { overflow-x: auto; }
.ttk-history-table { width: 100%; border-collapse: collapse; font-size: 0.88em; }
.ttk-history-table th, .ttk-history-table td { text-align: left; padding: 0.5em 0.6em; border-bottom: 1px solid var(--ttk-border); }
.ttk-history-table th { color: var(--ttk-muted); font-weight: 600; font-size: 0.8em; text-transform: uppercase; }
.ttk-history-empty td { color: var(--ttk-muted); text-align: center; padding: 1em; }

.ttk-formula-note { font-size: 0.85em; color: var(--ttk-muted); }
.ttk-formula-note summary { cursor: pointer; font-weight: 600; }
.ttk-formula-note ul { margin: 0.6em 0 0; padding-left: 1.2em; }
.ttk-formula-note li { margin-bottom: 0.3em; }

/* Responsive */
@media (max-width: 640px) {
	.ttk-stats { grid-template-columns: repeat(2, 1fr); }
	.ttk-results-grid { grid-template-columns: repeat(2, 1fr); }
	.ttk-display { font-size: 1.15em; }
	.ttk-keypad { grid-template-columns: repeat(4, 48px); grid-auto-rows: 44px; }
	.ttk-control { flex: 1 1 45%; }
}