.pm-stage { --pm: #e5484d; display: grid; gap: 14px; justify-items: center; padding: 20px 10px; border-radius: var(--r-lg); background: linear-gradient(160deg, color-mix(in srgb, var(--pm) 14%, transparent), transparent 70%); border: 1px solid var(--line); transition: background 0.4s; }
.pm-stage[data-phase='short'] { --pm: #12a37a; }
.pm-stage[data-phase='long'] { --pm: #2f7cf6; }
#pm-display { color: var(--pm); }
.pm-stage .progress { width: min(100%, 520px); }
.pm-stage .progress > span { background: var(--pm); }
.pm-dots { display: flex; gap: 8px; }
.pm-dot { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--pm); }
.pm-dot.on { background: var(--pm); }
.pm-controls { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.pm-controls .btn { min-width: 100px; }
#pm-start { background: var(--pm); border-color: transparent; color: #fff; box-shadow: 0 8px 20px -10px var(--pm); }
#pm-status, #pm-next { margin: 0; text-align: center; }
#pm-status { font-weight: 700; min-height: 1.4em; }
.pm-task { width: min(100%, 520px); }
.pm-settings summary { cursor: pointer; font-weight: 700; }