.converter { max-width: 700px; margin: 0 auto 40px auto; }
  .copy { font-size: 14px; color: #555; margin-bottom: 5px; display: flex; justify-content: center; align-items: center; gap: 6px; text-align: center; }
  .copy.left { justify-content: flex-start; text-align: left; flex-direction: column; }
  .timer-container { position: relative; width: 250px; height: 250px; margin: 0 auto 20px; }
  .timer-container svg {
  width:250px;
  height:250px;
  transform: rotate(-90deg);
}
  .circle-bg { fill: none; stroke: #eee; stroke-width: 10; }
  .circle-progress { fill: none; stroke: #4caf50; stroke-width: 10; stroke-linecap: round; stroke-dasharray: 723; stroke-dashoffset: 723; transition: stroke-dashoffset 0.2s linear; }
  #time { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 40px; font-weight: bold; color: #333; text-align: center; width: 120px; background: transparent; }
  .row-layout { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 15px; }
  .btn, #startPauseButton { padding: 6px 10px; font-size: 15px; font-weight: 500; border-radius: 6px; cursor: pointer; border: 2px solid #ccc; background: #eee; color: #222; }
  .btn.add-time { background-color: #4caf50; color: #fff; border-color: #4caf50; }
  .btn.reset { background-color: #f44336; color: #fff; border-color: #f44336; }
  .btn.edit { background-color: #9e9e9e; color: #fff; border-color: #9e9e9e; }
  #startPauseButton { width: 100%; max-width: 185px; font-size: 16px; color: white; font-weight: 500; }
  #startPauseButton.start, #startPauseButton.resume { background-color: #2196f3; border-color: #2196f3; }
  #startPauseButton.pause { background-color: #ffd700; color: black; border-color: #ffd700; }
  .hidden { display: none; }
  #lapList { list-style: decimal; padding-left: 20px; margin-top: 10px; max-height: 220px; overflow-y: auto; }