.usage-stats { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; max-width: 980px; margin: -5px auto 30px; }
.stat-card { min-width: 0; display: flex; align-items: center; gap: 12px; padding: 13px 16px; border: 1px solid var(--line); border-radius: 14px; background: rgba(255,255,255,.88); box-shadow: 0 8px 24px rgba(34,63,99,.07); }
.stat-icon { width: 36px; height: 36px; flex: none; display: grid; place-items: center; border-radius: 11px; background: #edf5ff; color: var(--blue); font: 700 20px Kanit,sans-serif; }
.stat-card strong { display: block; overflow: hidden; color: var(--navy); font: 700 24px/1.05 Kanit,sans-serif; white-space: nowrap; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.stat-card small { display: block; margin-top: 4px; color: var(--muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.result-help { font-size: 12px !important; text-align: center; margin: 10px 0 0 !important; }
.results-list li.result-item { align-items: center; padding: 5px 1px; }
.result-button { min-width: 0; flex: 1; display: flex; align-items: center; justify-content: space-between; gap: 8px; border: 0; background: transparent; color: var(--ink); font: 600 15px Sarabun,sans-serif; text-align: left; padding: 7px 2px; cursor: pointer; border-radius: 8px; }
.result-button:hover, .result-button:focus-visible { background: #f2f7fe; outline: none; }
.result-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.result-timing { display: flex; align-items: center; gap: 5px; flex: none; }
.result-time { font-variant-numeric: tabular-nums; color: var(--navy); font-size: 12px; }
.status-dot { width: 8px; height: 8px; border-radius: 50%; background: #aab5c4; }
.status-dot.running { background: #23a66f; box-shadow: 0 0 0 4px #e2f6ed; }
.status-dot.paused { background: #e8a31a; }
.status-dot.completed { background: #1877e8; }
.save-pending { color: var(--muted); font-size: 11px; }
.save-error { color: #cc3c4a; font-size: 11px; }
.timer-modal-card { position: relative; width: min(560px,100%); padding: 32px; }
.timer-close { position: absolute; right: 19px; top: 15px; font-size: 28px; }
.timer-status { margin: 4px 0 0 !important; }
.participant-timer-display { font: 700 clamp(65px,14vw,104px)/1 Kanit,sans-serif; color: var(--navy); letter-spacing: 2px; font-variant-numeric: tabular-nums; margin: 18px 0; }
.participant-timer-display.overtime { color: #d53b4c; }
.participant-timer-settings { display: flex; justify-content: center; gap: 10px; }
.participant-timer-settings label { font-size: 12px; color: var(--muted); text-align: left; }
.participant-timer-settings input { display: block; width: 105px; margin-top: 4px; border: 1px solid #dfe5ed; border-radius: 9px; padding: 8px; font: 600 17px Sarabun,sans-serif; color: var(--ink); }
.participant-timer-actions { display: flex; justify-content: center; gap: 8px; margin-top: 18px; }
.participant-timer-actions button { min-width: 112px; }
.timer-delete { margin-top: 20px; }
.history-modal-card { width: min(680px,100%); max-height: calc(100vh - 40px); overflow: auto; text-align: left; }
.history-list { display: grid; gap: 8px; margin-top: 20px; }
.history-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--line); padding: 10px 0; }
.history-details { min-width: 0; }
.history-details strong { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.history-details small { color: var(--muted); }
.history-actions { display: flex; gap: 6px; flex: none; }
.history-actions button { padding: 7px 10px; }
.history-empty { text-align: center; padding: 28px 5px; color: var(--muted); }

@media (max-width: 560px) {
  .usage-stats { grid-template-columns: repeat(2,minmax(0,1fr)); margin: -3px auto 22px; gap: 8px; }
  .stat-card { padding: 11px; gap: 8px; }
  .stat-icon { width: 31px; height: 31px; font-size: 17px; }
  .stat-card strong { font-size: 20px; }
  .stat-card small { font-size: 11px; }
  .participant-timer-actions { flex-wrap: wrap; }
  .participant-timer-actions button { flex: 1; }
  .history-item { align-items: flex-start; }
  .history-actions { flex-direction: column; }
  .topbar-actions { gap: 4px; }
  .topbar-actions #historyButton { display: inline-block; padding-inline: 7px; }
  .result-footer { align-items: flex-start; }
  .timer-modal-card { padding: 30px 18px 24px; }
}