@charset "UTF-8";
.pm-card { text-align: center; }
.pm-tabs { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; margin-bottom: 22px; }
.pm-tab { font-family: inherit; font-size: 0.9rem; font-weight: 600; padding: 8px 16px; border-radius: 999px; border: 1px solid var(--border-color); background: var(--alt-content-bg-color); color: var(--font-color); cursor: pointer; transition: var(--tool-transition); }
.pm-tab.active { background: var(--tool-accent); border-color: var(--tool-accent); color: #fff; }

.pm-ring-wrap { position: relative; width: 260px; max-width: 80vw; margin: 0 auto 24px; }
.pm-ring { width: 100%; height: auto; transform: rotate(-90deg); }
.pm-ring-track { fill: none; stroke: var(--alt-content-bg-color); stroke-width: 14; }
.pm-ring-bar { fill: none; stroke: var(--tool-accent); stroke-width: 14; stroke-linecap: round; transition: stroke-dashoffset 0.3s linear, stroke 0.3s; }
.pm-ring-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.pm-time { font-size: 3.4rem; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1; }
.pm-mode-label { margin-top: 8px; font-size: 0.95rem; opacity: 0.8; }

.pm-controls { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-bottom: 22px; }
.pm-start { min-width: 130px; }

.pm-stats { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.pm-stat { display: flex; flex-direction: column; align-items: center; background: var(--alt-content-bg-color); border: 1px solid var(--border-color); border-radius: var(--tool-radius); padding: 12px 20px; min-width: 120px; }
.pm-stat-num { font-size: 1.6rem; font-weight: 700; color: var(--tool-accent); }
.pm-stat-lbl { font-size: 0.82rem; opacity: 0.8; margin-top: 2px; }

.pm-settings { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 14px; }
.pm-toggles { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
.pm-check { display: flex; align-items: center; gap: 8px; font-size: 0.9rem; font-weight: 600; cursor: pointer; }

.pm-about p { margin: 0 0 12px; }

/* Break modes recolor the ring and active tab via a body-level state class */
body.pm-break .pm-ring-bar { stroke: var(--tool-info); }
body.pm-break .pm-tab.active { background: var(--tool-info); border-color: var(--tool-info); }
body.pm-break .pm-stat-num { color: var(--tool-info); }

@media (max-width: 480px) { .pm-time { font-size: 2.8rem; } }