.walk-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 22px 14px;
  padding: 10px 12px;
  border: 1px solid #e5e0d6;
  border-radius: 9px;
  background: #f8f4eb;
}
.walk-person-switch { display: flex; gap: 3px; padding: 3px; border-radius: 7px; background: #ece7dd; }
.walk-person-switch button {
  padding: 7px 12px;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: #827f75;
  font-size: 12px;
  white-space: nowrap;
}
.walk-person-switch button:hover { color: #b94b21; }
.walk-person-switch button[aria-pressed="true"] { background: #fffdf8; color: #b94b21; box-shadow: 0 1px 3px #24252112; }
.walk-key-hint { font-size: 11px; color: #969180; }
.walk-pad { display: none; gap: 6px; }
.walk-pad button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-width: 44px;
  min-height: 44px;
  padding: 6px 10px;
  border: 1px solid #e5d6c8;
  border-radius: 7px;
  background: #fffdf8;
  color: #7c6e5c;
  font-size: 11px;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
.walk-pad button > span:first-child { font-size: 17px; line-height: 1; color: #ed6b31; }
.walk-pad button:hover, .walk-pad button:active { border-color: #e5a687; background: #fcf0e7; color: #b94b21; }
.walk-toolbar button:focus-visible { outline: 3px solid #ed6b31; outline-offset: 3px; }
@media (max-width: 980px), (pointer: coarse) {
  .walk-pad { display: flex; }
  .walk-key-hint { flex: 1; text-align: right; }
  .walk-pad { flex-basis: 100%; }
  .walk-pad button { flex: 1; }
}
@media (max-width: 640px) {
  .walk-toolbar { margin: 0 14px 12px; padding: 9px; gap: 8px; }
  .walk-person-switch { flex: 1; }
  .walk-person-switch button { flex: 1; padding: 7px 9px; }
  .walk-key-hint { display: none; }
  .walk-pad button { padding: 6px; }
}