/* 線上番茄鐘頁專用樣式；共用元件沿用 site.css */
.pm-stage { background: #fff; border-radius: 12px; padding: 4px 0; text-align: center; }
.pm-phase { display: inline-block; margin: 8px 0 0; padding: 4px 16px; border-radius: 999px; background: #eff4ff; color: var(--brand); font-weight: 700; font-size: 1.1rem; }
.pm-stage.pm-break .pm-phase { background: #ecfdf5; color: #047857; }
.pm-disp { display: block; font-variant-numeric: tabular-nums; font-size: clamp(3.5rem, 18vw, 6.5rem); font-weight: 800; line-height: 1.2; color: var(--brand-dark); margin: 6px 0; }
.pm-stage.pm-break .pm-disp { color: #047857; }
.pm-bar { height: 8px; background: var(--line); border-radius: 5px; overflow: hidden; margin: 4px 0 8px; }
.pm-bar div { height: 100%; width: 0; background: var(--brand); }
.pm-stage.pm-break .pm-bar div { background: #059669; }
.pm-round, .pm-done { margin: 6px 0; font-size: 1rem; color: var(--muted); }
.pm-ctl { display: flex; flex-wrap: wrap; gap: 10px; margin: 10px 0; }
.pm-ctl .btn { flex: 1 1 100px; min-height: 52px; font-size: 1.1rem; }
.pm-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.pm-row > * { min-width: 0; }
.pm-chk { display: flex; align-items: flex-start; gap: 8px; margin: 10px 0; font-size: 1rem; font-weight: 600; cursor: pointer; }
.pm-chk input { width: 22px; height: 22px; flex: none; margin-top: 1px; }
@media (min-width: 720px) { .pm-row { grid-template-columns: repeat(4, 1fr); } }