.dn-patience {
  height: 14px; background: var(--surface-2); border-radius: 8px; overflow: hidden;
  border: 1px solid var(--line);
}
.dn-pat-fill { height: 100%; width: 100%; background: #6bcb77; transition: width .08s linear; }
.dn-pat-fill.low { background: #e23b3b; }
.dn-order { text-align: center; }
.dn-label { font-size: 12px; color: #8aa0c0; }
.dn-order-row { display: flex; gap: 8px; justify-content: center; margin-top: 6px; flex-wrap: wrap; }
.dn-chip {
  font-size: 26px; width: 46px; height: 46px; border-radius: 10px;
  display: grid; place-items: center; background: var(--surface); border: 2px solid var(--line);
}
.dn-chip.done { border-color: #6bcb77; opacity: .4; }
.dn-chip.next { border-color: #ffd93d; box-shadow: 0 0 0 2px #ffd93d inset; }
.dn-tray {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; max-width: 340px;
  margin-left: auto; margin-right: auto;
}
.dn-ing {
  font-size: 30px; padding: 14px 0; border-radius: 12px; border: 1px solid var(--line);
  background: var(--surface); cursor: pointer; user-select: none; -webkit-user-select: none;
  display: grid; place-items: center;
}
.dn-ing:active { background: var(--grape); }