body.page-pomodoro .wrap { max-width:520px; padding:2.5rem 1.5rem 1rem; }

.widget { --accent:var(--c-red); }
.widget.widget--break { --accent:var(--c-blue); }
.widget-body { padding:1.4rem 1.5rem 1.8rem; }
.widget .titlebar { background:var(--accent); border-bottom-color:var(--ink); transition:background .2s ease; }
.widget .titlebar .dot-close { background:#fff; border-color:#0a0a0a; }
.widget .titlebar .tname { color:#0c1322; font-weight:700; }

.mode-line {
  text-align:center; font-family:var(--mono); font-size:0.75rem; font-weight:500;
  letter-spacing:0.12em; text-transform:uppercase; color:var(--text-mid); margin-bottom:1.1rem;
}
.mode-line--focus, .mode-line--break { color:var(--accent); }

.clock-surface {
  position:relative; padding:1.6rem 1rem 1.4rem;
  border-radius:9px; background:var(--bg-accent);
  border:2px solid var(--ink); overflow:hidden; margin-bottom:1.3rem;
}
.clock-surface--pulse { animation:clock-surface-pulse 0.6s ease; }
@keyframes clock-surface-pulse {
  0%,100% { transform:scale(1); opacity:1; }
  50% { transform:scale(1.015); opacity:0.92; }
}
.clock-readout {
  font-family:var(--mono); font-weight:700;
  font-size:clamp(3.4rem, 18vw, 5.2rem); line-height:1;
  letter-spacing:0.02em; text-align:center; color:var(--text-hi);
  font-variant-numeric:tabular-nums;
}
.clock-readout .sep { color:var(--accent); transition:opacity 0.15s ease; }
.clock-readout .sep--dim { opacity:0.25; }

.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

.dots-row-wrap { position:relative; z-index:1; margin-top:1.1rem; }
.dots-row-label {
  text-align:center; font-family:var(--mono); font-size:0.62rem; letter-spacing:0.18em;
  color:var(--text-dim); text-transform:uppercase; margin-bottom:9px;
}
.dots-row { display:flex; flex-wrap:wrap; gap:5px; justify-content:center; max-width:100%; }
.dots-row .dot { width:9px; height:9px; background:var(--dot-off); border-radius:3px; flex-shrink:0; transition:background 0.2s ease; }
.dots-row .dot.filled { background:var(--text-hi); }
.dots-row .dot.filled--tail { background:var(--accent); }

.btn-row { display:flex; flex-wrap:wrap; gap:0.6rem; justify-content:center; margin-bottom:1rem; }
.btn {
  font-family:var(--mono); font-size:0.8rem; font-weight:500; letter-spacing:0.04em;
  border:2.5px solid var(--ink); border-radius:8px; padding:0.5rem 0.9rem; cursor:pointer;
  background:var(--win-2); color:var(--text-hi);
  box-shadow:3px 3px 0 var(--ink); transition:transform .1s, box-shadow .1s, border-color .12s, color .12s;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
}
.btn:hover { transform:translate(1px,1px); box-shadow:2px 2px 0 var(--ink); }
.btn:active { transform:translate(3px,3px); box-shadow:0 0 0 var(--ink); }
.btn:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
.btn--dur { min-width:48px; }
.btn--dur.active { border-color:var(--accent); color:var(--accent); }
.btn--toggle {
  min-width:200px; padding:0.8rem 1.5rem; font-size:0.9rem; font-weight:700;
  letter-spacing:0.06em; text-transform:uppercase;
  background:var(--c-gold); color:#1a1300;
}
.btn--toggle.running { background:var(--accent); color:var(--pill-text); border-color:var(--ink); }
.hint {
  text-align:center; margin-top:1.1rem; font-family:var(--mono); font-size:0.66rem;
  line-height:1.8; letter-spacing:0.04em; color:var(--text-dim); text-transform:uppercase;
}
.btn--sound {
  display:block; margin:0.9rem auto 0; padding:0.4rem 0.7rem; font-size:0.62rem;
  letter-spacing:0.08em; box-shadow:2px 2px 0 var(--ink); color:var(--text-mid);
}