/* ĐỒNG HỒ — đếm ngược + bấm giờ. Dùng design tokens TechPulse, tự hỗ trợ dark mode. */

.tpc-wrap{ max-width:760px; margin:10px auto 0; font-family:var(--tp-font-body); color:var(--tp-ink); }

.tpc-panel{
	background:var(--tp-surface); border:1px solid var(--tp-line);
	border-radius:var(--tp-radius-lg); box-shadow:var(--tp-shadow);
	padding:30px 26px 34px;
}

/* ---- Hàng cài đặt (đếm ngược) ---- */
.tpc-setup{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; align-items:flex-end; margin-bottom:18px; }
.tpc-field{ display:flex; flex-direction:column; gap:5px; }
.tpc-field label{ font-size:.7rem; text-transform:uppercase; letter-spacing:.05em; color:var(--tp-ink-mute); font-weight:700; text-align:center; }
.tpc-field input{
	width:78px; text-align:center; font-family:var(--tp-font-mono); font-size:1.15rem; font-weight:600;
	padding:10px 8px; border:1px solid var(--tp-line-strong); border-radius:var(--tp-radius);
	background:var(--tp-bg); color:var(--tp-ink); -moz-appearance:textfield;
}
.tpc-field input::-webkit-outer-spin-button,
.tpc-field input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.tpc-field input:focus{ outline:2px solid var(--tp-accent); outline-offset:1px; border-color:var(--tp-accent); }

/* ---- Nút ---- */
.tpc-btn{
	font-family:var(--tp-font-body); font-weight:600; font-size:.9rem; line-height:1; white-space:nowrap;
	padding:12px 18px; border-radius:var(--tp-radius); border:1px solid var(--tp-line-strong);
	background:var(--tp-bg); color:var(--tp-ink); cursor:pointer; transition:all .15s var(--tp-ease);
}
.tpc-btn:hover{ border-color:var(--tp-accent); color:var(--tp-accent); }
.tpc-btn:active{ transform:translateY(1px); }
.tpc-btn--primary{ background:var(--tp-accent); border-color:var(--tp-accent); color:var(--tp-accent-ink); }
.tpc-btn--primary:hover{ filter:brightness(1.08); color:var(--tp-accent-ink); }
.tpc-btn:disabled{ opacity:.4; cursor:not-allowed; transform:none; }
.tpc-btn:disabled:hover{ border-color:var(--tp-line-strong); color:var(--tp-ink); }

/* ---- Preset ---- */
.tpc-presets{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin-bottom:28px; }
.tpc-preset{
	padding:9px 16px; border-radius:999px; border:1px solid var(--tp-line); background:var(--tp-bg-soft);
	font-family:var(--tp-font-body); font-weight:600; font-size:.82rem; color:var(--tp-ink-soft);
	cursor:pointer; transition:all .15s var(--tp-ease);
}
.tpc-preset:hover{ border-color:var(--tp-accent); color:var(--tp-accent); background:var(--tp-accent-soft); }

/* ---- Vòng tròn đếm ngược ---- */
.tpc-stage{ display:flex; justify-content:center; margin:6px 0 28px; }
.tpc-ring{ position:relative; width:300px; height:300px; max-width:80vw; }
.tpc-ring svg{ width:100%; height:100%; transform:rotate(-90deg); display:block; }
.tpc-ring .track{ fill:none; stroke:var(--tp-line); stroke-width:14; }
.tpc-ring .bar{ fill:none; stroke:var(--tp-accent); stroke-width:14; stroke-linecap:round; transition:stroke-dashoffset .25s linear, stroke .3s ease; }
.tpc-ring.is-done .bar{ stroke:#16a34a; }
.tpc-ring.is-done{ animation:tpc-flash .5s ease 3; }
@keyframes tpc-flash{ 50%{ filter:drop-shadow(0 0 14px rgba(22,163,74,.6)); } }
.tpc-ring-label{
	position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
	font-family:var(--tp-font-mono); font-weight:700; font-size:2.7rem; letter-spacing:.01em;
	color:var(--tp-ink); font-variant-numeric:tabular-nums;
}

/* ---- Hàng điều khiển ---- */
.tpc-controls{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; }

/* ---- Màn hình bấm giờ ---- */
.tpc-sw-display{
	text-align:center; padding:34px 16px; background:var(--tp-bg-sunken);
	border:1px solid var(--tp-line); border-radius:var(--tp-radius-lg); margin-bottom:22px;
}
.tpc-sw-time{ font-family:var(--tp-font-mono); font-weight:700; color:var(--tp-ink); font-variant-numeric:tabular-nums; line-height:1; }
.tpc-sw-main{ font-size:clamp(3rem,15vw,6rem); }
.tpc-sw-cs{ font-size:clamp(1.4rem,6vw,2.4rem); color:var(--tp-ink-mute); }

/* ---- Bảng vòng chạy ---- */
.tpc-laps{ margin-top:24px; }
.tpc-laps table{ width:100%; border-collapse:collapse; font-family:var(--tp-font-mono); font-size:.92rem; }
.tpc-laps th,.tpc-laps td{ padding:10px 12px; border-bottom:1px solid var(--tp-line); text-align:center; }
.tpc-laps th{ font-family:var(--tp-font-body); font-size:.72rem; text-transform:uppercase; letter-spacing:.05em; color:var(--tp-ink-mute); font-weight:700; }
.tpc-laps tr:last-child td{ border-bottom:0; }
.tpc-lap-best td{ color:#16a34a; font-weight:700; }
.tpc-lap-worst td{ color:#dc2626; font-weight:700; }
.tpc-laps-empty{ text-align:center; color:var(--tp-ink-mute); font-size:.86rem; padding:14px; }

/* ---- Toàn màn hình ---- */
.tpc-wrap:fullscreen{ background:var(--tp-bg); display:flex; align-items:center; justify-content:center; padding:24px; margin:0; max-width:none; }
.tpc-wrap:fullscreen .tpc-panel{ width:min(760px,100%); }

@media (max-width:540px){
	.tpc-panel{ padding:22px 14px 26px; }
	.tpc-ring-label{ font-size:2.05rem; }
	.tpc-btn{ padding:11px 14px; font-size:.84rem; }
	.tpc-field input{ width:64px; }
}