.tbTop{
  width:min(1100px,92vw);
  margin: 18px auto 10px;
}
.tbTop h1{margin:0;font-size:22px}
.tbSub{margin:6px 0 0; color:#a9b6d6}

.tbWrap{
  width:min(1100px,92vw);
  margin: 12px auto 26px;
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap:14px;
}
@media (max-width: 900px){
  .tbWrap{grid-template-columns:1fr}
}

.tbPanel,.tbTimerPanel{min-width:0}

.tbPanel{
  background: rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.08);
  border-radius: 16px;
  padding: 14px;
}

.tbPanelHead{display:flex; align-items:flex-start; justify-content:space-between; gap:10px; flex-wrap:wrap}
.tbPanel h2{margin:0;font-size:18px}

.tbRow{display:flex; gap:8px; align-items:center}
.tbRowWrap{flex-wrap:wrap}

.tbBtn{
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  color:#e8eefc;
  padding:10px 12px;
  border-radius: 12px;
  font-weight:800;
}
.tbBtn:hover{border-color: rgba(255,255,255,.18)}
.tbBtnPrimary{
  border-color: rgba(125,255,168,.55);
  background: rgba(125,255,168,.12);
}
.tbBtnDanger{
  border-color: rgba(255,107,107,.5);
  background: rgba(255,107,107,.12);
}

.tbChip{
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.02);
  color:#a9b6d6;
  padding:8px 10px;
  border-radius: 999px;
  font-weight:800;
}
.tbChip:hover{color:#e8eefc; border-color: rgba(255,255,255,.18)}

.tbHint{color:#a9b6d6; margin:10px 0 0; font-size:13px; line-height:1.6}

.tbQuick{
  margin-top: 12px;
  padding: 12px;
  border-radius: 14px;
  border:1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.14);
}
.tbQuick h3{margin:0 0 10px; font-size:14px}

.tbPresetBar{
  width:100%;
  margin-top: 10px;
  padding: 10px;
  border-radius: 14px;
  border:1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.12);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
}
.tbPresetLeft{
  display:flex;
  align-items:center;
  gap:10px;
  min-width: 220px;
}
.tbLabel{
  color:#a9b6d6;
  font-weight:900;
  font-size:12px;
}

.tbListHead{
  margin-top: 12px;
  display:grid;
  grid-template-columns: 32px 96px 1fr 70px 130px;
  gap:8px;
  color:#a9b6d6;
  font-weight:800;
  font-size:12px;
  padding: 0 6px;
}
@media (max-width: 520px){
  .tbListHead{display:none}
}

.tbList{list-style:none; padding:0; margin: 10px 0 0; display:flex; flex-direction:column; gap:8px}
.tbItem{
  display:grid;
  grid-template-columns: 32px 96px 1fr 70px 130px;
  gap:8px;
  align-items:center;
  padding:10px;
  border-radius: 14px;
  border:1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.12);
}
@media (max-width: 520px){
  .tbItem{grid-template-columns: 1fr; gap:10px}
  .tbItem .tbOrder{display:none}
}

.tbSelect,.tbInput{
  width:100%;
  padding:10px 10px;
  border-radius: 12px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  color:#e8eefc;
  font-weight:800;
}
.tbActions{display:flex; gap:6px; justify-content:flex-end}
.tbIcon{
  width:40px; height:40px;
  border-radius: 12px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  color:#e8eefc;
  font-weight:900;
  display:grid; place-items:center;
}
.tbIcon:hover{border-color: rgba(255,255,255,.18)}
.tbIconDanger{border-color: rgba(255,107,107,.45); color:#ff6b6b}

.tbTools{
  margin-top: 14px;
  padding: 12px;
  border-radius: 14px;
  border:1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.14);
}
.tbTools h3{margin:0 0 10px; font-size:14px}
.tbTextarea{
  width:100%;
  margin-top: 10px;
  padding: 12px;
  border-radius: 14px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  color:#e8eefc;
  font-weight:700;
}

.tbTimerCard{
  background: rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.08);
  border-radius: 16px;
  padding: 14px;
}
.tbTimerCard h2{margin:0 0 10px; font-size:18px}
#phase{font-size:22px; font-weight:900; margin: 6px 0}
#time{font-size: 56px; font-weight:950; margin: 10px 0; font-variant-numeric: tabular-nums}
#set{color:#a9b6d6; font-weight:800; margin: 0 0 10px}

.tbNext{
  margin: 6px 0 12px;
  color:#a9b6d6;
  font-weight:900;
}
/* 次が休憩のときに目立たせる */
.tbNext.is-rest{ color: #7dffa8; }
/* 今ブロックが休憩のとき（任意だけど入れてある） */
#phase.is-rest{ color: #7dffa8; }

.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;
}
.tbProgressTotal{ margin-top: 8px; }
.tbProgressMetaSplit{ justify-content:space-between; }

#totalRemaining{ color:#e8eefc; }

.tbTimerBtns{display:flex; gap:8px; flex-wrap:wrap}
.tbTimerBtns .tbBtn{flex:1}

.tbAd{margin-top: 12px}
.tbAdBox{
  min-height: 180px;
  border:1px dashed rgba(255,255,255,.18);
  border-radius: 14px;
  display:grid; place-items:center;
  color:#a9b6d6;
  background: rgba(0,0,0,.10);
}