body {
  font-family: system-ui, sans-serif;
  background: #111;
  color: #fff;
  text-align: center;
  padding: 20px;
  margin: 0;
}

h1 { margin: 10px 0 6px; }
p { color: #a9b6d6; margin: 0 0 14px; line-height: 1.6; }

#timer {
  background: #222;
  border-radius: 16px;
  padding: 20px;
  max-width: 360px;
  margin: 14px auto;
  border: 1px solid rgba(255,255,255,.08);
}

#phase {
  font-size: 22px;
  font-weight: 900;
  margin: 6px 0;
}
#phase.is-rest { color: #7dffa8; }

#time {
  font-size: 56px;
  font-weight: 950;
  margin: 10px 0;
  font-variant-numeric: tabular-nums;
}

#set {
  color: #a9b6d6;
  margin: 0 0 10px;
  font-weight: 800;
}

#next {
  margin: 6px 0 12px;
  color: #a9b6d6;
  font-weight: 900;
}
#next.is-rest { color: #7dffa8; }

button {
  width: 100%;
  padding: 12px;
  margin: 6px 0;
  font-size: 16px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  color: #e8eefc;
  font-weight: 900;
}
button:hover { border-color: rgba(255,255,255,.18); }

/* 進捗（要素があるページだけ表示される） */
.tbProgress{ margin: 10px 0 6px; }
.tbProgressBar{
  height: 10px;
  border-radius: 999px;
  overflow: hidden;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
}
.tbProgressFill{
  height:100%;
  width:0%;
  background: linear-gradient(90deg, rgba(122,167,255,.9), rgba(125,255,168,.9));
}
.tbProgressMeta{
  margin-top: 8px;
  display:flex;
  justify-content:flex-end;
  color:#a9b6d6;
  font-weight:900;
  font-size:12px;
}
.tbProgressMetaSplit{ justify-content:space-between; }
#totalRemaining{ color:#e8eefc; }

/* ✅ 他のタイマー導線 */
.otherTimers{
  margin: 24px auto 10px;
  max-width: 380px;
  text-align: center;
}
.otherTimers h2{
  font-size: 14px;
  margin: 0 0 10px;
  color: #a9b6d6;
}
.otherTimerLinks{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}
.otherTimerLinks a{
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.1);
  background: rgba(255,255,255,.03);
  color: #e8eefc;
  font-size: 13px;
  font-weight: 800;
  text-decoration: none;
}
.otherTimerLinks a:hover{
  border-color: rgba(255,255,255,.2);
}