.num { display: flex; align-items: stretch; min-width: 0; height: 22px; background: #1b1e2a; border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 5px; overflow: hidden; }
.num:focus-within { border-color: var(--accent, #f0a63a); }
.num input { flex: 1; min-width: 0; width: 100%; padding: 0 4px; border: 0; background: none; color: inherit; outline: none;
  font: inherit; font-size: 12px; text-align: right; font-variant-numeric: tabular-nums; }
.num i { align-self: center; padding-right: 3px; font-style: normal; font-size: 11px; color: var(--muted, #8a90a2); white-space: nowrap; }
.num .spin { display: flex; flex-direction: column; width: 14px; border-left: 1px solid rgba(255, 255, 255, 0.08); }
.num .spin button { flex: 1; padding: 0; border: 0; background: #232736; color: var(--muted, #8a90a2); font-size: 7px;
  line-height: 1; cursor: pointer; user-select: none; touch-action: none; }
.num .spin button:hover { background: #31364a; color: var(--fg, #e6e8ef); }
.num .spin button:active { background: var(--accent, #f0a63a); color: #1a1205; }