/* UTIL-002 Đồng hồ bấm giờ — kế thừa font Arial của bộ giao diện tiện ích. */
.sw-stage{position:relative;container-type:inline-size;display:flex;flex-direction:column;align-items:center;gap:10px;padding:24px 16px;border:1px solid var(--sou-line);border-radius:18px;background:#f7f9fd;text-align:center}
.sw-stage:focus{outline:none}
.sw-stage:focus-visible{outline:2px solid #3869ed;outline-offset:2px}
.sw-state{margin:0;font-size:14px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--sou-muted)}
.sw-stage[data-run-state=running] .sw-state{color:var(--sou-ok)}
.sw-stage[data-run-state=paused] .sw-state{color:var(--sou-warn)}
.sw-display{margin:0;max-width:100%;font-weight:700;line-height:1.05;color:var(--sou-ink);white-space:nowrap;font-variant-numeric:tabular-nums;font-size:clamp(28px,9vw,120px);font-size:clamp(28px,15.5cqw,120px)}
.sw-current{margin:0;font-size:17px;font-weight:700;color:var(--sou-muted);font-variant-numeric:tabular-nums}
.sw-controls{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;width:100%;max-width:720px;margin-top:6px}
.sw-controls .sou-button{flex:1 1 auto;min-height:50px;white-space:nowrap}
.sw-controls .sw-main{flex:2 1 200px;font-size:18px}
.sw-stage[data-run-state=running] .sw-main{background:#b3261e}
.sw-stage[data-run-state=running] .sw-main:hover{background:#951f18}
.sw-stage.is-fs{justify-content:center;min-height:100vh;padding:24px;border:0;border-radius:0}
.sw-stage.is-fs .sw-display{font-size:min(15vw,32vh)}
.sw-stage.is-fs .sw-current{font-size:min(4vw,5vh)}
.sw-options{display:flex;flex-wrap:wrap;gap:6px 24px;align-items:flex-start;margin-top:18px}
.sw-options .sou-field{flex:0 1 280px;margin:0}
.sw-keys{flex:1 1 260px;margin:28px 0 0}
.sw-keys kbd{display:inline-block;padding:1px 6px;border:1px solid var(--sou-line);border-bottom-width:2px;border-radius:6px;background:#fff;font:700 13px Arial,"Helvetica Neue",Helvetica,sans-serif;color:var(--sou-ink)}
.sw-undo{margin:0 0 12px}
.sw-conflict p{margin:0 0 6px}
.sw-conflict .sou-toolbar{margin-top:6px}
.sw-laps{margin-top:16px}
.sw-laps-head{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.sw-laps-head h2{font-size:20px}
.sw-count{color:var(--sou-muted);font-size:16px}
.sw-more{display:none!important}
.sw-export{margin:10px 0 12px}
.sw-summary{margin:0 0 10px;font-weight:700;color:var(--sou-ink);font-variant-numeric:tabular-nums}
.sw-table-wrap{max-height:520px;overflow:auto}
.sw-table td{font-variant-numeric:tabular-nums}
.sw-table tr.is-fast td{background:var(--sou-ok-bg)}
.sw-table tr.is-slow td{background:var(--sou-err-bg)}
.sw-tag{display:inline-block;margin-left:8px;padding:1px 8px;border-radius:999px;font-size:12px;font-weight:700;vertical-align:1px}
.is-fast .sw-tag{background:#fff;color:var(--sou-ok)}
.is-slow .sw-tag{background:#fff;color:var(--sou-err)}
.sw-lap-no{white-space:nowrap;font-weight:700;color:var(--sou-ink)}
@media (max-width:600px){
 .sw-stage{padding:20px 12px}
 .sw-controls .sou-button{flex:1 1 40%}
 .sw-controls .sw-main{flex:1 1 100%}
 .sw-keys{margin:0}
 .sw-more{display:inline-flex!important;min-height:44px}
 .sw-export{display:none}
 .sw-export.is-open{display:flex}
 .sw-export .sou-button{flex:1 1 100%}
 .sw-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
 .sw-table,.sw-table tbody{display:block}
 .sw-table tr{display:grid;grid-template-columns:1fr 1fr;gap:4px 12px;padding:10px 12px;border-top:1px solid #edf1f9}
 .sw-table tr:first-child{border-top:0}
 .sw-table td{display:block;padding:0;border:0;text-align:left!important;background:none!important}
 .sw-table tr.is-fast{background:var(--sou-ok-bg)}
 .sw-table tr.is-slow{background:var(--sou-err-bg)}
 .sw-table td.sw-lap-no{grid-column:1/-1}
 .sw-table td[data-label]::before{content:attr(data-label);display:block;font-size:13px;font-weight:700;color:var(--sou-muted)}
}
@media print{.sw-controls,.sw-options,.sw-export,.sw-more,.sw-undo{display:none!important}.sw-table-wrap{max-height:none;overflow:visible}}