.stopur-wrap{
  max-width:700px;
  margin:20px auto;
  padding:20px;
  border:1px solid #ccc;
  border-radius:12px;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  text-align:center
}

/*
  V6: Slashed zero kommer fra visse monospace-fonts som en *fast glyph* (ikke en feature),
  så 'zero 0' hjælper ikke altid. Derfor bruger vi system-ui (ingen skrå nuller)
  + tabular-nums + fast bredde for at undgå vibration.
*/
.stopur-display{
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  font-size:72px;
  margin-bottom:14px;
  display:inline-block;
  min-width: 12ch;
  text-align:center;
  letter-spacing:0.02em;
  white-space:nowrap;
  user-select:none;
}

.stopur-controls{
  display:flex;
  gap:10px;
  justify-content:center;
  flex-wrap:wrap
}

.btn{
  padding:12px 18px;
  border-radius:10px;
  border:none;
  font-weight:700;
  color:#fff;
  cursor:pointer;
  transition:background .15s ease, transform .05s ease
}

.btn:active:not(:disabled){
  transform:translateY(1px)
}

.btn:disabled{
  opacity:.55;
  cursor:not-allowed
}

.btn.start{background:#2faa46}
.btn.start:hover:not(:disabled){background:#248a3a}

.btn.stop{background:#d83a3a}
.btn.stop:hover:not(:disabled){background:#b82f2f}

.btn.lap{background:#2A7ABF}
.btn.lap:hover:not(:disabled){background:#1f5f96}

.btn.reset{background:#111}
.btn.reset:hover:not(:disabled){background:#000}

.laps-list{
  text-align:left;
  margin-top:14px
}

@media (max-width:600px){
  .stopur-display{font-size:54px}
  .btn{flex:1 1 45%}
}